17pdf_front_end/layouts/userCenter.vue

<!--
 * @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 :src="userInfo.avatarUrl" class="userCenterAvatarUrl">
            </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'}">
            <nuxt-link to="/members/me/expenses" class='myexpenses'>我的转档</nuxt-link>
          </li>
          <li class='my_pricing' :class="{active: showBuy || $route.path === '/members/me/points' || $route.path === '/members/me/vip'}">
            <a @click="showBuy = !showBuy">消费记录</a>
            <ul :class="{active: showBuy || $route.path === '/members/me/points' || $route.path === '/members/me/vip'}">
              <li >
                <nuxt-link :class="{active: $route.path === '/members/me/vip'}" to="/members/me/vip" class='mypoints text-[16px]'> 
                  会员购买
                </nuxt-link>
              </li>
              <li >
                <nuxt-link :class="{active: $route.path === '/members/me/points'}" to="/members/me/points" class='mypoints'> 
                  转换券购买
                </nuxt-link>
              </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 {
      showBuy: false
    }
  },
  computed: {
    ...mapState([
      'userInfo',
    ]),
  },
  methods: {
    handlerBuy(type) {
      this.$store.commit('OPEN_LOGIN', true)
      this.$store.commit('SET_INTERFACE', type)
    },
  },
  mounted() {
    this.$axios.get('members/getMemberInfo').then((res)=> {
        if(res.code === 200) {
          this.$store.commit('setUser',res.result.memberInfo)
        }
      })
  },
  
}
</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%;
    }
  }
  .userCenterAvatarUrl{
    object-fit: cover;
    display: inline-block;
    border: none;
    // border-radius: 10px;
  }
  .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;
        margin-bottom: 0px;
        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>