zx_flk_app/pages/my/my.vue

<template>
    <view class="container-view">
        <view class="user-switch-row">
            <view class="name-wrap" @tap="handleToUserDtl">{{ userInfo.name }}</view>
            <image class="message" :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.url)">
                <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.url)">
                <image :src="QINIU_URL + item.icon" class="icon" />
                <view class="name">{{ item.name }}</view>
            </view>
        </view>
    </view>
</template>

<script>
import { QINIU_URL } from '@/common/constant'
export default {
    data() {
        return {
            QINIU_URL,
            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('换电套餐')}`, 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: '', icon: 'Fp6G-Kzb-YUGkP2WR-kjTlIbbTj1' },
            ]
        }
    },
    methods: {
        handleToUserDtl() {

        },
        routerLink(url) {
            uni.navigateTo({ url })
        }
    }
}
</script>

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