Yizhan-app/pages/my/index.vue

<template>
	<view id="myapp" class="bodyA">
		<!-- 导航栏 -->
		<view class="header userHdeader">
			<view class="info">
				<image src="../../static/common/userMan.png" alt="">
					<view class="userMsg">
						<view class="msg">{{user.name}}</view>
						<view class="msg">{{user.dept}}</view>
					</view>
			</view>

			<view class="updateMode" @click="updateImg"></view>
		</view>
		<!-- 滚动区域 -->
		<view class="content">
			<!-- 模块1 -->
			<view class="listBox">
				<view class="list" v-for="item in listMode1" @click="toPage(item.url)">
					<image :src="item.img"></image>{{item.name}}
					<van-icon class="icon" name="arrow" size=".4*74upx"></van-icon>
				</view>
			</view>
			<!-- 模块2 -->
			 <view class="listBox">
				<view class="list" v-for="item in listMode2" @click="toPage(item.url)">
          <image :src="item.img"></image>{{item.name}}
					<van-icon class="icon" name="arrow" size=".4*74upx"></van-icon>
				</view>
			</view>
			<!-- 模块3 -->
			 <view class="listBox">
				<view class="list" v-for="item in listMode3" @click="toPage(item.url)">
          <image :src="item.img"></image>{{item.name}}
					<van-icon class="icon" name="arrow" size=".4*74upx"></van-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getNoticeData
	} from '@/common/api.js'
	import {
		callbackRequest
	} from '@/common/util.js'
	export default {
		data() {
			return {
				loadingFlag: 'n',
				loadingFlag_Tm: 'n',
				user: {
					name: '',
					dept: '',
				},
				// code
				listMode1: [{
						name: '个人信息',
						img: '../../static/index/listIcon_user.png',
						url: '/pages/my/userInfo'
					},
					{
						name: '家庭成员',
						img: '../../static/index/listIcon_famliy.png',
						url: '/pages/my/familyMember'
					},

				],
				listMode2: [{
					name: '电子餐卡',
					img: '../../static/index/listIcon_ck.png',
					url: '/pages/my/mealCard'
				}, ],
				listMode3: [{
						name: '常见问题',
						img: '../../static/index/listIcon_question.png',
						url: '/pages/my/commonQuestion'
					},
          {
            name: '意见建议',
            img: '../../static/index/listIcon_msg.png',
            url: '/pages/my/offerView'
          },
          {
            name: '关于我们',
            img: '../../static/index/listIcon_aboutUs.png',
            url: '/pages/my/aboutUs'
          },
				],
			};
		},
		mounted() {
			this.getUserInfo();
		},
		methods: {
			// 手动同步web端图片到app
			updateImg() {
				request.updateImg({}, res => {
					console.log(res);
					if (res.returnCode == 1) {
						// vant.Toast({
						//     message: res.returnMsg,
						//     duration: 2000
						// })
					}
				})
			},
			getUserInfo() {
				const that = this;
				let resData = uni.getStorageSync('userInfos')
				that.user.name = resData.realName
				that.user.dept = resData.departmentName
				// request.qryPersonalInfo({}, res => {
				// 	console.log(res);
				// 	if (res.returnCode == 1) {
				// 		let resData = res.returnData;
				// 		that.user.name = resData.realName
				// 		that.user.dept = resData.departmentName

				// 	}
				// })
			},
			toPage(url) {
				if (!url) return
				uni.navigateTo({
					url: url
				})
			},
			// switch跳转
			toSwitch(i) {
				console.log(i);
				let url;
				switch (i) {
					case 0:
						url = './indexIndex.html';
						break;
					case 1:
						url = './indexTab_message.html';
						break;
					case 2:
						url = './indexTab_mine.html';
						break;
				}
				window.location.href = url;
			},
			// code
			back() {},
		},
	}
</script>

<style lang="scss" scoped>
	.updateMode {
		position: absolute;
		left: 1.2162*74upx;
		top: .7568*74upx;
		width: .5405*74upx;
		height: .5405*74upx;
	}

	.userHdeader {
		background-image: url('../../static/mine_topimg1.png');
		background-size: 100% 100%;
		height: 4.11*74upx;
		line-height: normal;
		display: block;
		position: relative;
	}

	.userHdeader .info {
		display: flex;
		align-items: center;
		position: absolute;
		left: .66*74upx;
		bottom: .67*74upx
	}

	.userHdeader image {
		width: 1.6*74upx;
		height: 1.6*74upx;
		border-radius: 50%;
		border: 1px solid #fff;
	}

	.userHdeader .userMsg {
		font-size: .54*74upx;
		margin-left: .32*74upx;
		color: #0e1a24;
	}

	.userHdeader .userMsg .msg:last-child {
		margin-top: .2*74upx;
		font-size: .375*74upx;
	}

	.content {
		font-size: .38*74upx;
		color: #0e1a24;
		padding: .32*74upx;
	}

	.listBox {
		background-color: #fff;
		border-radius: .3*74upx;
		margin-bottom: .3*74upx;
	}

	.listBox .list {
		padding: .43*74upx .54*74upx;
		display: flex;
		align-items: center;
	}

	.listBox .list image {
		width: .6486*74upx;
		height: .6486*74upx;
		margin-right: .6486*74upx;
	}

	.listBox .list .icon {
		margin-left: auto;
		color: #97a5b1;
	}
</style>