i2-school-employee-uniapp/pages/mine/index.vue

<template>
	<view class="mine">
		
		<view class="mine-content" style="background:url('/static/login/login_top_backgroud.png') no-repeat; background-size: 100%;">
			
			<!-- 用户信息 -->
			<view class="mine-card cu-card padding radius shadow bg-white">
				<view class="cu-chat">
					<view class="cu-avatar xl round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"></view>
					<text class="text-bold text-xl"> {{ userInfo.name }} </text>
				</view>
				<view class="cu-bar justify-around" style="width: 100%;">
					<view class="cu-bar">
						<image src="../../static/mine/phone.png" style="width: 20px;height: 20px;"></image>
						<text class="text-sm"> {{ userInfo.mobile }} </text>
					</view>
					<view class="cu-bar">
						<image src="../../static/mine/email.png" style="width: 20px;height: 20px;"></image>
						<text class="text-sm"> {{ userInfo.email }} </text>
					</view>
				</view>
			</view>
			
			<view v-for="(section,i) in mineItems" :key="i">
				<u-gap height="15"/>
				<view class="cu-card padding radius shadow bg-white">
					<view class="cu-bar justify-between align-center" v-for="(item,index) in section" :key="index" @click="itemDidClick(item)">
						<view class="cu-bar">
							<image :src="item.image" style="width: 30px;height: 30px;"></image>
							<text class="text-bold padding-sm"> {{ $t(item.title) }} </text>
						</view>
						<text v-if="item.detail"> {{ item.detail }} </text>
						<text v-else class="lg text-gray cuIcon-right"></text>
					</view>
				</view>
			</view>		
		</view>
		
		<!-- <button class="u-button--primary" type="default" @click="back">back</button> -->
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'  
	export default {
		data() {
			return {
				mineItems: [
					[
						{'image': '/static/mine/city.png','title': 'city','detail': '成都', 'url': ''},
						{'image': '/static/mine/location.png','title': 'campus','detail': '成都', 'url': ''},
						{'image': '/static/mine/department.png','title': 'department', 'detail': '成都', 'url': ''}
					],
					[
						{'image': '/static/mine/city.png','title': 'city','detail': '成都', 'url': ''},
						{'image': '/static/mine/location.png','title': 'campus','detail': '成都', 'url': ''},
						{'image': '/static/mine/department.png','title': 'department', 'detail': '成都', 'url': ''}
					],
					[
						{'image': '/static/mine/city.png','title': 'city','detail': '成都', 'url': ''},
						{'image': '/static/mine/location.png','title': 'campus','detail': '成都', 'url': ''},
						{'image': '/static/mine/department.png','title': 'department', 'detail': '成都', 'url': ''}
					],
					[
						{'image': '/static/mine/student_old.png','title': 'referralList', 'detail': '', 'url': ''},
						{'image': '/static/mine/student_pain.png','title': 'renewList', 'detail': '', 'url': ''},
						{'image': '/static/mine/referral.png','title': 'auditList', 'detail': '', 'url': ''}
					],
					[
						{'image': '/static/mine/setting.png','title': 'setting', 'detail': '', 'url': '../mine/setting'},
					],
				]
			};
		},
		name: 'tabbar-mine',
		computed: {
			...mapState(['userInfo'])
		},
		props: {
			
		},
		methods: {
			/// 列表跳转
			itemDidClick(item) {
				if (!item.url) return
				uni.navigateTo({
					url: item.url
				})
			}
		}
	}
</script>


<style lang="scss">
	.mine {
		width: 100%;
		position: absolute;
		display: flex;
		flex-direction: column;
		height: 100%;
		.mine-content {
			padding: 80px 20px 70px;
			.mine-card{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.user-card-top {
					position: absolute;
					top: 0;
					left: 0;
					align-self: flex-start;
					width: 40px;
					height: 20px;
				}
			}
		}
	}
</style>