zx_flk_app/pages/my/my.vue

<template>
    <view class="container-view zx-page-linear">
      <view class="user-switch-row">
        <image
          :src="QINIU_URL + 'FlL5BtEdMES2-mntjR9D3CX_LWYv'"
          class="message"
          @tap="routerLink({ url: '/pages/message/index' })"
        />
      </view>
      <view class="user-info-wrap" @tap="loginHandle">
        <image :src="userInfo.headimg || defaultAvatarUrl" class="head-img" />
        <view class="user-name">{{ userInfo.nickname || '请点击登录' }}</view>
        <view
          v-if="userInfo.user_name"
          class="e-mail"
        >
          {{ userInfo.user_name }}
        </view>
      </view>
      <view class="common-tabs">
        <view
          v-for="(item, index) in commonTabs"
          :key="index"
          class="item"
          @click="routerLink(item)"
        >
          <image :src="QINIU_URL + item.icon" class="icon" />
          <view class="name">{{ item.name }}</view>
        </view>
      </view>
      <view class="tabs-wrap">
        <view
          v-for="(item, index) in baseTabs"
          :key="index"
          class="tab-item"
          @click="routerLink(item)"
        >
          <image :src="QINIU_URL + item.icon" class="icon" />
          <view class="name">{{ item.name }}</view>
        </view>
      </view>
      <Confirm
        v-model="comboDialoginfo.showConfirm"
        :dialog-info="comboDialoginfo"
        @confirm="dialogConfirm"
      />
      <CustomTabbar curt-tab="my" />
    </view>
  </template>
  
  <script>
  const storage = require('@/common/storage.js')
  import Confirm from '@/component/comPopup/Confirm'
  import { QINIU_URL, defaultHeadImg } from '@/common/constant'
  import CustomTabbar from '@/component/customTabbar/index'
  export default {
    components: {
      Confirm,
      CustomTabbar
    },
    data() {
      return {
        QINIU_URL,
        defaultAvatarUrl: defaultHeadImg,
        comboDialoginfo: {
          showConfirm: false,
          title: '温馨提示',
          opType: 'combo',
          text: '您还未购买换电套餐，是否前往进行换电套餐？',
          confirmBtnText: '前往购买',
          showCancelButton: false
        },
        userInfo: {}
      }
    },
    computed: {
      commonTabs() {
        return [
          { name: `${this.$t('我的车辆')}`, url: '/pages/mileageStatistics/index', icon: 'Fp6G-Kzb-YUGkP2WR-kjTlIbbTj1' },
          { name: `${this.$t('用车人')}`, url: '/pages/userManagement/userManagement', icon: 'FnxGW52BCkTkK9HxsTdVrghU7B4D' },
          { name: `${this.$t('换电套餐')}`, jumpCheck: 'combo', url: '', icon: 'FsOsd1SxYDHDm00aiwrTib_k0Mbr' }
        ]
      },
      baseTabs() {
        const lang = t => this.$t(t)
        return [
          { name: `${lang('我的订单')}`, url: '/pages/order/order', icon: 'FkLJGLo1faYtJWhW4Q0gt5dphI7g' },
          { name: `${lang('换电记录')}`, url: '', icon: 'FnSjwcN7Mcpa-WA7Cqx2cGTvX2V1' },
          { name: `${lang('意见反馈')}`, url: '/pages/feedback/index', icon: 'FnSjwcN7Mcpa-WA7Cqx2cGTvX2V1' },
        //   { name: `${lang('关于我们')}`, url: '/pages/bluetoothUnlock/unlockSet', icon: 'Fmin1_DG6ZkENCdsI1qJZJpDNkhQ' },
          { name: `${lang('客服中心')}`, url: '/pages/bluetoothUnlock/bluetoothPair', icon: 'FhA9TUbTMF0e7ma6NZXqPrkscN6l' },
          { name: `${lang('设置')}`, url: '/pages/my/set', icon: 'Fu3f2iRi5BspRfbVLPcw8ryWc4lu' }
        ]
      }
    },
    onShow() {
      const user_token = storage.getUserToken()
      user_token && this.loadUserInfo()
    },
    methods: {
      loadUserInfo() {
        const userInfo = storage.getUserInfoData()
        console.log('userInfo', userInfo)
        this.setData({ userInfo })
      },
      loginHandle() {
        uni.navigateTo({ url: '/pages/loginRegister/login' })
      },
      checkHandle_combo() {
        this.comboDialoginfo.showConfirm = true
      },
      dialogConfirm(type) {
        console.log('dialogConfirm', type)
      },
      routerLink({ url, jumpCheck }) {
		  console.log(url);
        if (jumpCheck) {
          this[`checkHandle_${jumpCheck}`]()
          return
        }
        uni.navigateTo({ url })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  @import './my.scss';
  </style>