mall4pc-bbc/pages/user-center.vue

<template>
  <div class="user-center" >
    <div class="content flex-box">
      <!-- 侧栏 -->
      <div :class="['side-nav',this.$store.state.locale == 'en'?'side-nav-en':'side-nav-zh']">
        <div class="item">
          <div class="tit">{{$t('userCenter.orderManagement')}}</div>
          <a
            href="javascript:void(0)"
            @click="switchPage('order')"
            :class="['item-a',currentPage=='order'?'active':'']"
          >{{$t('userCenter.myOrders')}}</a>
          <a
            href="javascript:void(0)"
            @click="switchPage('collection')"
            :class="['item-a',currentPage=='collection'?'active':'']"
          >{{$t('userCenter.myCollection')}}</a>
          <a
            href="javascript:void(0)"
            @click="switchPage('footprint')"
            :class="['item-a',currentPage=='footprint'?'active':'']"
          >{{$t('history.history')}}</a>
          <a
            href="javascript:void(0)"
            @click="switchPage('comments')"
            :class="['item-a',currentPage=='comments'?'active':'']"
          >{{$t('userCenter.evaluationList')}}</a>
        </div>
        <div class="item">
          <div class="tit">{{$t('userCenter.customerService')}}</div>
          <!-- <a
            href="javascript:void(0)"
            @click="switchPage('contactCustomerService')"
            :class="['item-a',currentPage=='return'?'active':'']"
          >{{$t('userCenter.contactCustomerService')}}</a> -->

          <!-- 联系平台客服 -->
          <a @click="toChat" href="javascript:void(0)" class="item-a message-chat" target="view_window">
            {{$t('prodDetail.contactCustomerService')}}
            <i class="message-radio" v-if="message"></i>
          </a>
          <a
            href="javascript:void(0)"
            @click="switchPage('return')"
            :class="['item-a',currentPage=='return'?'active':'']"
          >{{$t('userCenter.refunds')}}</a>
          <!-- 免费开店 -->
          <!-- <a
            href="javascript:void(0)"
            @click="switchPage('freeshop')"
            v-if="shopAuditStatus!=1"
            :class="['item-a',currentPage=='freeshop'?'active':'']"
          >{{$t('userCenter.freeStoreOpening')}}</a> -->
          <!-- 我的店铺 -->
          <!-- <a
            href="javascript:void(0)"
            @click="switchPage('myshop')"
            data-shopid="shopId"
            v-if="shopAuditStatus == 1"
            :class="['item-a']"
          >{{$t('userCenter.myStore')}}</a> -->
          <!-- 设置店铺账号 -->
          <!-- <a
            href="javascript:void(0)"
            @click="switchPage('shopaccount')"
            v-if="shopAuditStatus == 1 && isSetPassword == false"
            :class="['item-a',currentPage=='shopaccount'?'active':'']"
          >{{$t('userCenter.setStoreAccount')}}</a> -->
          <!-- 修改店铺密码 -->
          <!-- <a
            href="javascript:void(0)"
            @click="switchPage('shopaccount')"
            v-if="shopAuditStatus == 1 && isSetPassword == true"
            :class="['item-a',currentPage=='shopaccount'?'active':'']"
          >{{$t('userCenter.changeStorePassword')}}</a> -->
        </div>
        <div class="item">
          <div class="tit">{{$t('userCenter.assetCenter')}}</div>
          <a
            href="javascript:void(0)"
            @click="switchPage('balance')"
            :class="['item-a',currentPage=='balance'?'active':'']"
          >{{$t('userCenter.myBalance')}}</a>
          <a
            href="javascript:void(0)"
            @click="switchPage('integral')"
            :class="['item-a',currentPage=='integral'?'active':'']"
          >{{$t('userCenter.myPoints')}}</a>
          <a href="javascript:void(0)" @click="switchPage('member-center')" :class="['item-a']">{{$t('userCenter.memberCenter')}}</a>
          <a
            href="javascript:void(0)"
            @click="switchPage('coupons-center')"
            :class="['item-a']"
          >{{$t('userCenter.couponCenter')}}</a>
          <a
            href="javascript:void(0)"
            @click="switchPage('coupons')"
            :class="['item-a',currentPage=='coupons'?'active':'']"
          >{{$t('userCenter.myCoupons')}}</a>
        </div>
        <div class="item">
          <div class="tit">{{$t('userCenter.accountManagement')}}</div>
          <a
            href="javascript:void(0)"
            @click="switchPage('account')"
            :class="['item-a',currentPage=='account'?'active':'']"
          >{{$t('userCenter.accountInformation')}}</a>
          <a
            href="javascript:void(0)"
            @click="switchPage('address')"
            :class="['item-a',currentPage=='address'?'active':'']"
          >{{$t('userCenter.receivingAddress')}}</a>
          <a
            href="javascript:void(0)"
            @click="switchPage('password')"
            :class="['item-a',currentPage=='password'?'active':'']"
          >{{$t('userCenter.changePassword')}}</a>
        </div>
      </div>
      <!-- /侧栏 -->
      <nuxt-child @userCenterInfo="getUserCenterInfo()" />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      unUseCount: 0,
      currentPage: '',
      shopAuditStatus: null, //店铺状态：0 未审核 1已通过 -1未通过 null 未开店
      shopId: 0, //店铺id,
      isSetPassword: null,
    }
  },
  mounted () {
    this.getCouponCount()
    this.getUserCenterInfo()  //获取个人中心信息
    this.currentPage = this.$route.query.currentPage || this.$route.path.substring(this.$route.path.lastIndexOf("-") + 1)
  },
  computed: {
    message() {
      return this.$store.state.websocket.messageValue;
    }
  },
  watch:{
    $route(to,from){
      if (to.path === '/user-center/uc-integral') {
        this.currentPage = 'integral'
      }
    }
  },
  updated() {
    this.currentPage = this.$route.query.currentPage || this.$route.path.substring(this.$route.path.lastIndexOf("-") + 1)
  },
  methods: {
    /**
     * 跳转客服
     */
    toChat() {
      this.$store.commit('websocket/changeMessage', 0)
      let routeUrl = this.$router.resolve({
        path: '/chat?shopId=1&chatType=1'
      });
      window.open(routeUrl.href, 'view_window');
    },

    switchPage (page) {
      if (page == 'coupons-center') {
        this.$router.push({ path: '/coupons' })
      } else if (page == 'member-center') {
        this.$router.push({ path: '/member-center/member-center' })
      } else if (page == 'comments') {
        this.$router.push({ path: '/user-center/uc-comments' })
      } else if (page == 'balance') {
        this.$router.push({ path: '/user-center/uc-balance' })
      } else if (page == "myshop") {
        if (this.shopAuditStatus==1) {
          this.$router.push({ path: `/shopIndex?sid=${this.shopId}` })
        } else {
          this.$message({
            type: 'warning',
            message: this.shopAuditStatus == 0 ? this.$i18n.t('userCenter.storeProgress') :  this.shopAuditStatus == -1 ? this.$i18n.t('userCenter.theAuditNotPass') : this.$i18n.t('userCenter.theStoreOffline')
          })
        }
        // this.$router.push({ path: '/shopIndex?sid=' + this.shopId })
      } else if (page == 'shopaccount') {
        this.$router.push({ path: '/user-center/uc-shopaccount', query: { isSetPassword: this.isSetPassword } })
      } else if (page == 'freeshop') {
        this.$router.push({ path: '/user-center/uc-freeshop', query: { shopAuditStatus: this.shopAuditStatus } })
      } else {
        this.$router.push({ path: '/user-center/uc-' + page })
      }
      this.currentPage = page
    },

    /**
     * 请求个人中心信息（店铺审核状态）
     */
    getUserCenterInfo () {
      this.$axios.get('/p/user/centerInfo', {
      }).then(({ data }) => {
        this.isSetPassword = data.isSetPassword  //是否已经设置过支付密码
        this.orderCountData = data.orderCountData  //订单状态信息
        this.shopAuditStatus = data.shopAuditStatus  //审核状态：0 未审核 1已通过 -1未通过 null 未开店
        this.shopId = data.shopId  //店铺id
      })
    },

    /**
    * 获取各分类数量
    */
    getCouponCount () {
      this.$axios.get('/p/myCoupon/getMyCouponsStatusCount', {
      }).then(({ data }) => {
        this.unUseCount = data.unUseCount
      })
    },
  },
}
</script>

<style scoped src='~/assets/css/user-center.css'></style>