zx_flk_app/pages/my/my.vue

<template>
    <view class="container-view">
        <view class="user-switch-row">
            <view class="name-wrap">{{ userInfo.name }}</view>
            <image class="message" @tap="routerLink({ url: '/pages/message/index' })"
                :src="QINIU_URL + 'FghCVNMWDBKJpqbIrqoxT-de9Has'" />
        </view>
        <view class="user-info-wrap">
            <image class="head-img" :src="userInfo.headImg" />
            <view class="user-name">{{ userInfo.userName }}</view>
            <view class="e-mail">{{ userInfo.eMail }}</view>
        </view>
        <view class="common-tabs">
            <view class="item" v-for="(item, index) in commonTabs" :key="index" @click="routerLink(item)">
                <image :src="QINIU_URL + item.icon" class="icon" />
                <view class="name">{{ item.name }}</view>
            </view>
        </view>
        <view class="tabs-wrap">
            <view class="tab-item" v-for="(item, index) in baseTabs" :key="index" @click="routerLink(item)">
                <image :src="QINIU_URL + item.icon" class="icon" />
                <view class="name">{{ item.name }}</view>
            </view>
        </view>
        <Confirm 
            v-model="comboDialoginfo.showConfirm"
            :dialogInfo="comboDialoginfo"
            @confirm="dialogConfirm"
        />
    </view>
</template>

<script>
import Confirm from '@/component/comPopup/Confirm'
import { QINIU_URL } from '@/common/constant'
export default {
    components: {
        Confirm
    },
    data() {
        return {
            QINIU_URL,
            comboDialoginfo: {
                showConfirm: false,
                title: '温馨提示',
                opType: 'combo',
                text: '您还未购买换电套餐，是否前往进行换电套餐？',
                confirmBtnText: '前往购买',
                showCancelButton: false
            },
            userInfo: {
                name: 'Real name',
                userName: 'Kabuda-4',
                eMail: '1007929522@Mail.com',
                headImg: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.lmGw9aECIAIIvJK_U92f_gAAAA?w=169&h=180&c=7&r=0&o=5&pid=1.7'
            }
        }
    },
    computed: {
        commonTabs() {
            return [
                { name: `${this.$t('我的车辆')}`, url: '', icon: 'Fp6G-Kzb-YUGkP2WR-kjTlIbbTj1' },
                { name: `${this.$t('用车人')}`, url: '', icon: 'Fp6G-Kzb-YUGkP2WR-kjTlIbbTj1' },
                { name: `${this.$t('换电套餐')}`, jumpCheck: 'combo', url: '', icon: 'Fp6G-Kzb-YUGkP2WR-kjTlIbbTj1' },
            ]
        },
        baseTabs() {
            const lang = t => this.$t(t)
            return [
                { name: `${lang('我的订单')}`, url: '', icon: 'Fp6G-Kzb-YUGkP2WR-kjTlIbbTj1' },
                { name: `${lang('换电记录')}`, url: '', icon: 'Fp6G-Kzb-YUGkP2WR-kjTlIbbTj1' },
                { name: `${lang('关于我们')}`, url: '', icon: 'Fp6G-Kzb-YUGkP2WR-kjTlIbbTj1' },
                { name: `${lang('客服中心')}`, url: '', icon: 'Fp6G-Kzb-YUGkP2WR-kjTlIbbTj1' },
                { name: `${lang('设置')}`, url: '/pages/my/set', icon: 'Fp6G-Kzb-YUGkP2WR-kjTlIbbTj1' },
            ]
        }
    },
    methods: {
        checkHandle_combo() {
            this.comboDialoginfo.showConfirm = true
        },
        dialogConfirm(type) {
            console.log('dialogConfirm', type)
        },
        routerLink({ url, jumpCheck }) {
            if (jumpCheck) {
                this[`checkHandle_${jumpCheck}`]()
                return
            }
            uni.navigateTo({ url })
        }
    }
}
</script>

<style lang="scss" scoped>
@import './my.scss';
</style>