luoyang-uniapp-app/pages/tabbar/mine/index.vue

<template>
	<view class="pageBgImg">
		<view class="status_bar"></view>
		<!-- 用户信息 -->
		<view class="userInfo">
			<view class="avatar">
				<image :src="vuex_userInfo.photoPath" mode="aspectFill" v-if="vuex_userInfo.photoPath" @click="show=true"></image>
			</view>
			<view class="rightInfo" @click="topClick">
				<view class="name-row">
					<view class="leftTxt">
						<view class="name">{{ vuex_userInfo.name?vuex_userInfo.name:vuex_userInfo.phone?vuex_userInfo.phone:'请登录' }}</view>
						<view class="arrowIcon">
							<image src="@/static/images/icon/arrowRightfff.png" mode=""></image>
						</view>
					</view>
					<view class="scanCode" @click.stop="scanCodeClick">
						<image src="@/static/images/mineIcon/sanCode.png" mode=""></image>
					</view>
				</view>
				<view class="phone" v-if="vuex_userInfo.name">{{ vuex_userInfo.phone }}</view>
			</view>
		</view>
		
		<view class="pad">
			<view class="ul">
				<view class="li" v-for="(item,index) in ulData" :key="index"  @click="goPage(item)">
					<view class="icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="text">{{ item.name }}</view>
				</view>
			</view>
			
			<view class="ul2">
				<view class="li2" v-for="(item,index) in ulData2" :key="index" @click="goPage(item)">
					<view class="icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="text">{{ item.name }}</view>
					<view class="arrowRight">
						<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup :show="show" mode="center" @close="show=false" :closeable="true">
			<view style="width: 90vw;">
				<image :src="vuex_userInfo.photoPath" mode="widthFix" ></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { scanCodeFn } from '@/config/utils.js'
	export default {
		data() {
			return {
				show: false,
				ulData: [
					{name: '学车进度', icon: require('@/static/images/mineIcon/emtryIcon (4).png'),url: '/pages/mineEntry/carLearProgress/carLearProgress'},
					{name: '我的预约', icon: require('@/static/images/mineIcon/emtryIcon (1).png'),url: '/pages/mineEntry/myAppointment/myAppointment'},
					{name: '我的订单', icon: require('@/static/images/mineIcon/emtryIcon (2).png'),url: '/pages/mineEntry/myOrder/myOrder'},
					{name: '我的合同', icon: require('@/static/images/mineIcon/emtryIcon (3).png'),url: '/pages/mineEntry/myContract/myContract'},
				],
				ulData2: [
					{name: '学时查询', icon: require('@/static/images/mineIcon/minIcon (4).png'),url: '/pages/mineEntry/carLearnHours/carLearnHours'},
					{name: '我的评价', icon: require('@/static/images/mineIcon/minIcon (1).png'),url: '/pages/mineEntry/myEvaluate/myEvaluate'},
					// {name: '退款申请', icon: require('@/static/images/mineIcon/minIcon (3).png'),url: '/pages/mineEntry/refund/refund'},
					{name: '变更车型', icon: require('@/static/images/mineIcon/minIcon (7).png'),url: '/pages/mineEntry/modelChange/modelChange'},
					{name: '同城转校', icon: require('@/static/images/mineIcon/minIcon (5).png'),url: '/pages/mineEntry/schoolTransfer/schoolTransfer'},
					// {name: '退款申请记录', icon: require('@/static/images/mineIcon/minIcon (6).png'),url: ''},
					{name: '关于我们', icon: require('@/static/images/mineIcon/minIcon (2).png'),url: '/pages/mineEntry/aboutUs/aboutUs'},
				]
			}
		},
		onHide() {
			if(this.show) this.show = false
		},
		methods: {
			topClick() {
				if(!this.vuex_userInfo.phone) {
					this.$goPage('/pages/userCenter/login/login')
				}else {
					this.$goPage('/pages/mineEntry/personaInfo/personaInfo')
				}
			},
			goPage(item) {
				if(item.name!='关于我们') {
					if(item.name=='我的订单'&&this.vuex_userInfo.applyStep>2&&this.vuex_userInfo.applyStep<6) {
						return this.$goPage('/pages/mineEntry/myForecastName/myForecastName')
					}
					if(this.vuex_userInfo.applyStep!=6) {
						return this.$u.toast('您还未报名驾校')
					}
				}
				this.$goPage(item.url)
			},
			scanCodeClick() {
				scanCodeFn(this)
			}
		}
	}
</script>

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