FleetManagement-MPWEIXIN/pages/personal/index.vue

<template> 
	<view class="personal flex column"> 
	<view style="" class="ball"></view>
	<view style="" class="ball"></view>
		<view :style="{height:`${titleStyle.height}px`,paddingTop:`${titleStyle.top}px`}"></view>
		<!-- 上半部分 -->
		<view class="personal_top">
			<view class="businessCard flex ac">
				<view style=" font-size: 55rpx;color: aliceblue;" class="sculpture flex ac jc">
					<image :src="user.headPhoto" mode=""></image>
				</view>
				<view class="information">
					<view @click="login" class="information_name"> {{user?user.name:'点击登录'}}</view>
					<view class="information_footer"> {{user.userPhone|filterPhone}}</view>
				</view>
			</view>  
		</view>
		<!-- 中间部分 -->
		<view class="personal_center flex around">
			<view  @click="jump('details')" class="menu-item flex ac jc">
				<text class="menu-item-label">我的订单</text>
				<image   src="../../static/wddd.png"></image>
			</view>
			<view @click="jump('created')" class="menu-item flex ac jc">
				<text class="menu-item-label">新建订单</text>
				<image   src="../../static/xjdd.png"></image>
			</view>
		</view>
		<!-- 下半部分  -->
		<view class="personal_bottom oneflex"> 
		<view style="color: #000000; font-size: 30rpx; font-weight: 600;"> 常用功能</view>
			<view class="personal_bottom_others">
				<view @click="othersClick(item)" v-for="(item,index) in others" :key="index"
					class="personal_bottom_others_item flex ac">
					<image v-if="item.imageSrc" :src="item.imageSrc"></image>
					<view class="oneflex personal_bottom_others_item_title">{{item.title}}</view>
					<uni-icons type="forward" color="#121836" size="20"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script> 
	import tool from '../../utils/tool.js'
	export default { 
		data() {
			return {
				configuration:{
					title:"用户中心"
				},
				imgUrl: this.baseImgURL,
				cards: uni.getStorageSync('cards'),
				user: uni.getStorageSync('user'),
				others: [  {
					imageSrc: require("@/static/mmsz.png"),
					title: '修改密码',
					functionName:'updatepsw'
				},   {
					imageSrc:require("@/static/tcdl.png"),
					title: '退出登录',
					functionName: 'goM78'
				}], 
				titleStyle: {}
			}
		},
		created() {
			this.init()
		},
		onShow() {

		},
		filters: {
			filterPhone(str) {
				if (!str) return ' '
				let enStr = str.slice(0, 3) + '****' + str.slice(str.length - 4);
				return enStr
			}
		},
		methods: {
			updatepsw(){
				uni.navigateTo({
					url:'/Personal/pages/seting/password'
				})
			},
			jump(e){
				switch (e){
					case 'created':
					uni.navigateTo({
						url:'/Order/pages/created/index'
					})
						break;
						case 'details':
						uni.navigateTo({
							url:'/Order/pages/index/index'
						})
						break;
					default:
						break;
				}
			},
			ultramanVehicle() {
				uni.navigateTo({
					url: '/ChargingStation/pages/vehicle/index'
				})
			},
			goCollect() {
				uni.navigateTo({
					url: '/ChargingStation/pages/collect/index'
				})
			},
			KillTheRecord() {
				this.$emit('switchTabBar', 3)
			},
			login() {
				if (!this.user) {
					uni.clearStorageSync();
					uni.reLaunch({
						url: '/pages/login/index'
					})
				}
			},
			isEyeFn(e) {
				e.isEye = !e.isEye;
				console.log(e, 'isEyeFnisEyeFnisEyeFn')
			},
			othersClick(e) {
				if (e.functionName) {
					this[e.functionName]()
				} else {
					uni.showToast({
						title: '功能暂未开放',
						icon: 'none'
					})
				}
			},
			init() {
				this.titleStyle = wx.getMenuButtonBoundingClientRect(); //获取高度
				if (!this.user) {
					this.others.pop();
				}
			},
			async goM78() {
				uni.showModal({
					title: '提示',
					content: '确定要退出么？',
					success: async function (res) {
						if (res.confirm) {
							let result = await tool.loginOut();
							if (result) {  
								uni.clearStorageSync();
								uni.reLaunch({
									url: '/pages/login/index'
								})
							} 
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			}
		}
	}
</script>

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