<!-- * @Description: * @Author: 欧阳承珺 * @LastEditors: 欧阳承珺 * @Date: 2022-11-01 20:18:40 * @LastEditTime: 2022-11-16 10:16:06 --> <template> <div class="font-primary min-w-1200px"> <Navbar></Navbar> <div class="flex mt-50px px-[10%] mb-30px justify-between"> <div class="w-[27%] min-w-260px px-24px pb-80px mb-20px bg-[#fafafa]"> <div class="person"> <div> <a href="/members/me/expenses" class="members"> <img v-if="userInfo?.subscriberType === 1" src="http://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg" > <img v-else src="http://user-file.17pdf.com/avatars/2018/01/02/f183029426a996325853fa244e7df661-jpg.jpg" > </a> <br> <p class="username">{{userInfo?.name}}</p> <p class="user-showname block mt-16px">{{userInfo?.email || userInfo?.phone}}</p> </div> <div class="flex py-14px mt-20px justify-between text-left"> <div> <p v-if="userInfo?.subscriberType === 1" class="user-vip text-18px mb-6px text-[#333] font-500 leading-24px">17会员</p> <p v-else class="text-18px text-[#333] font-500 leading-24px mb-6px">免费用户</p> <p v-if="userInfo?.subscriberType === 1" class="text-12px text-[#999] pl-28px mb-6px leading-17px">剩余<span class="text-bg-$btn-color-primary">{{userInfo?.day}}</span>天到期</p> <p v-else class="text-12px text-[#999] leading-17px">订阅会员免费格式转换</p> </div> <button class="btn-renew" @click="handlerBuy('vip')"> {{userInfo?.subscriberType === 1 ? '续费' : '订阅会员'}} </button> </div> <div class="flex py-14px my-8px justify-between text-left"> <div class="user-ticket"> <p class="text-18px text-[#333] leading-24px mb-6px"><span class="font-500 text-bg-$btn-color-primary text-18px leading-24px tracking-1px">{{userInfo?.points}}</span><span class="text-bg-$btn-color-primary text-14px leading-18px">张</span><span class="text-14px text-[rgba(0,0,0,0.8)] leading-18px">/{{userInfo?.totalPoints}}张</span></p> <p class="text-12px text-[#999] leading-17px">转换券</p> </div> <button class="btn-recharge" @click="handlerBuy('ticket')">充值</button> </div> </div> <ul class="menus-ul"> <li class="my_convert" :class="{active: $route.path === '/members/me/expenses'}"> <a href="/members/me/expenses" class='myexpenses'> 我的转档 </a> </li> <li class='my_pricing' :class="{active: $route.path === '/members/me/points'}"> <a href="/members/me/points">消费记录</a> <ul :class="{active: $route.path === '/members/me/points'}"> <li > <a :class="{active: $route.path === '/members/me/points'}" href="/members/me/points" class='mypoints'> 转换券购买 </a> </li> </ul> </li> </ul> </div> <Nuxt class="w-[70%]"></Nuxt> </div> <FooterBar></FooterBar> </div> </template> <script> import { mapState } from 'vuex' import Navbar from './components/NavBar.vue' import FooterBar from './components/FooterBar.vue' export default { components: { Navbar, FooterBar, }, data() { return { } }, computed: { ...mapState([ 'userInfo', ]), }, methods: { handlerBuy(type) { this.$store.commit('OPEN_LOGIN', true) this.$store.commit('SET_INTERFACE', type) }, }, } </script> <style lang="scss" scoped> .person{ width: 100%; text-align: center; padding: 30px 0px 8px; border-bottom: 1px solid rgb(218,218,218); a.members { width: 80px; height: 80px; border-radius: 100%; box-shadow: rgba(0,0,0,0.2); display: inline-block; overflow: hidden; box-shadow: 0px 1px 4px rgba(0,0,0,0.2); img{ width: 100%; height: 100%; } } .username{ height: 30px; font-size: 20px; color: rgb(51,51,51); } .user-showname{ height: 21px; font-size: 14px; color: rgb(153,153,153); } } .user-vip{ background: url('~assets/images/common/ic_member.svg') no-repeat; background-size: 24px; padding-left: 28px; } .user-ticket { padding-left: 28px; background: url('~assets/images/common/ic_coupon.svg') no-repeat; background-size: 24px; } .menus-ul { list-style: none; font-size: 18px; padding-left: 0px; width: 100%; max-width: 250px; margin-top: 24px; li { margin-bottom: 8px; cursor: pointer; a { color: rgb(51, 51, 51); display: block; width: 100%; height: 48px; line-height: 48px; } ul { list-style: none; padding-left: 0px; display: none; &.active { display: block; } li { font-size: 16px; border: 0px !important; &:hover{ a{ color: rgb(255, 79, 79); } } a { color: rgb(153, 153, 153); &.active{ color: rgb(255, 79, 79); } } } } } } .my_pricing{ padding: 0px 32px; background: url(http://cn-file.17pdf.com/website/members/ic_sidebai_consumption_nor.png) no-repeat left 12px; &:hover{ background: url(http://cn-file.17pdf.com/website/members/ic_sidebai_consumption_elect.png) no-repeat left 12px; & > a{ color: #ff4f4f; } } &.active:hover{ background: url(http://cn-file.17pdf.com/website/members/ic_sidebai_consumption_nor.png) no-repeat left 12px; & > a{ color: rgb(51, 51, 51); } } & > a{ background: url(http://cn-file.17pdf.com/website/members/ic_siderbar_cebian.png) no-repeat right 14px; } &.active > a{ background: url(http://cn-file.17pdf.com/website/members/ic_siderbar_cebian_normal.png) no-repeat right 14px; } } .my_convert{ padding: 0px 32px; background: url(http://cn-file.17pdf.com/website/members/ic_sidebar_conversion_nor.png) no-repeat left 12px; &:hover{ background: url(http://cn-file.17pdf.com/website/members/ic_sidebar_conversion_elect.png) no-repeat left 12px; & > a{ color: #ff4f4f; } } &.active{ background: url(http://cn-file.17pdf.com/website/members/ic_sidebar_conversion_elect.png) no-repeat left 12px; a{ color: rgb(255, 79, 79); } } } .mypoints { &.active { a { color: rgb(255, 79, 79); } } } </style>