zx_flk_app/pages/my/my.vue

<template>
	<view class="container-view zx-page-linear">
		<!-- #ifdef MP-WEIXIN -->
		<view :style="{height: `${statusBarHeight + 20}px`}"></view>
		<!-- #endif -->
		<!-- #ifdef APP -->
		<view :style="{height: `${statusBarHeight}px`}"></view>
		<!-- #endif -->
		
		<view class="user-switch-row">
			<view class="news">
				<view v-if="(newsList.plate_count + newsList.device_count) > 0" class="num">{{newsList.plate_count + newsList.device_count}}</view>
				<image :src="QINIU_URL + 'FlL5BtEdMES2-mntjR9D3CX_LWYv'" class="message"
					@tap="routerLink({ url: '/pages/message/index' })" />
			</view>
		</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 v-if="car_info.car_sn" class="common-tabs">
			<view class="item" @click="routerLink({url:'/pages/dashboard/dashboard'})">
				<image :src="QINIU_URL + 'Fp6G-Kzb-YUGkP2WR-kjTlIbbTj1'" class="icon" />
				<view class="name">{{ $t('我的车辆') }}</view>
			</view>
			<view class="item" @click="routerLink({url:'/pages/userManagement/userManagement'})">
				<image :src="QINIU_URL + 'FnxGW52BCkTkK9HxsTdVrghU7B4D'" class="icon" />
				<view class="name">{{ $t('用车人') }}</view>
			</view>
			<view v-if="car_info.sold_time" class="item" @click="routerLink({url:'',jumpCheck:'combo'})">
				<image :src="QINIU_URL + 'FsOsd1SxYDHDm00aiwrTib_k0Mbr'" class="icon" />
				<view class="name">{{ $t('换电套餐') }}</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'
var request = require('@/common/request.js');
	var config = require('../../common/config_gyq.js');
	var http = require('../../common/request.js');

	export default {
		components: {
			Confirm,
			CustomTabbar
		},
		data() {
			return {
				newsList:{},
				statusBarHeight:0,
				car_info: {},
				QINIU_URL,
				defaultAvatarUrl: defaultHeadImg,
				comboDialoginfo: {
					showConfirm: false,
					title: '温馨提示',
					opType: 'combo',
					text: '您还未购买换电套餐，是否前往进行换电套餐？',
					confirmBtnText: '前往购买',
					showCancelButton: false
				},
				userInfo: {}
			}
		},
		computed: {
			// commonTabs() {
			//   return [
			//     { name: `${this.$t('我的车辆')}`, url: '/pages/dashboard/dashboard', 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: '/pages/batteryRecord/batteryRecord',
						icon: 'FnSjwcN7Mcpa-WA7Cqx2cGTvX2V1'
					},
					{
						name: `${lang('意见反馈')}`,
						url: '/pages/feedback/index',
						icon: 'FnSjwcN7Mcpa-WA7Cqx2cGTvX2V1'
					},
					//   { name: `${lang('关于我们')}`, url: '/pages/bluetoothUnlock/unlockSet', icon: 'Fmin1_DG6ZkENCdsI1qJZJpDNkhQ' },
					{
						name: `${lang('客服中心')}`,
						url: '',
						statues:'service',
						icon: 'FhA9TUbTMF0e7ma6NZXqPrkscN6l'
					},
					{
						name: `${lang('设置')}`,
						url: '/pages/my/set',
						icon: 'Fu3f2iRi5BspRfbVLPcw8ryWc4lu'
					}
				]
			}
		},
		onShow() {
			this.car_info = uni.getStorageSync('car_info') || {};
			const user_token = storage.getUserToken()
			if(user_token){
				this.loadUserInfo()
				this.newsNumFn()
			}

		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0
		},
		methods: {
			async newsNumFn(){
				let {data} = await request.postApi(config.API_FLK_MESSAGE_UNREAD_COUNT,{})
				if(data.code == 200){
					this.newsList = data.data
				}
			},
			async loadUserInfo() {
				const userInfo = storage.getUserInfoData()
				this.setData({
					userInfo
				})
				let {
					data
				} = await http.postApi(config.API_USER_INFO, {})
				if (data.code == 200) {
					this.userInfo = data.data.userInfo
					storage.setUserInfoData(this.userInfo)
				}
			},
			loginHandle() {
				if (!this.userInfo.nickname) {
					uni.navigateTo({
						url: '/pages/loginRegister/login'
					})
				}
			},
			checkHandle_combo() {
				if(this.car_info.exchange_package_info){
					uni.navigateTo({
						url: `/pages/package/package`
					})
					return
				}
				this.comboDialoginfo.showConfirm = true
				
			},
			dialogConfirm(type) {
				uni.navigateTo({
					url: `/pages/batteryPackage/batteryPackage`
				})
			},
			routerLink({
				url,
				jumpCheck,
				statues
			}) {
				if(statues){
					return
				}
				if (jumpCheck) {
					this[`checkHandle_${jumpCheck}`]()
					return
				}
				console.log(url)
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './my.scss';
	.news{
		position: relative;
		.num {
			position: absolute;
			right: -6rpx;
			top: -6rpx;
			min-width: 28rpx;
			height: 28rpx;
			font-size: 18rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			line-height: 1;
			background-color: #FA2918;
			border-radius: 50%;
		}
	}
</style>