tourGuide/pages/user/user.vue

<template>
	<view class="bg">
		<view class="top-box flex-between" @click="gotoPath('/subPackages/user/userInfo')">
			<view class="top-left">
				<image :src="showImg(userInfo.avatar || 'https://static.ticket.sz-trip.com/tourGuide/images/index/topImg.png')" mode="" class="avatar"></image>
				<view class="flex-column">
					<view class="top-title">{{userInfo.nickname}}</view>
					<view class="top-subtitle">{{userInfo.group_data.name}}</view>
				</view>
			</view>
			<view class="top-right">
				个人信息
				<image src="https://static.ticket.sz-trip.com/tourGuide/images/user/rightBlack.png" mode=""></image>
			</view>
		</view>
		
		<view class="box">
			<view v-for="(item,index) in list" :key="index" class="flex-between" @click="gotoPath(item.path)">
				<view class="title">{{item.title}}</view>
				<image src="https://static.ticket.sz-trip.com/tourGuide/images/user/rightGray.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						title: '我的消息',
						path: '/subPackages/user/myNews'
					},
					{
						title: '我的订单',
						path: '/subPackages/order/orderList'
					},
					{
						title: '账号密码',
						path: '/subPackages/user/accountPassword'
					}
				],
				userInfo: {group_data: {}}
			}
		},
		onShow() {
			this.Post({}, '/api/Merchants/get_login_details').then(res => {
				this.userInfo = res.data
			})
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		min-height: 100vh;
		background: #F5F5F5;
		padding: 57rpx 26rpx 0;
	}
	
	.top-box {
		height: 169rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		padding: 0 34rpx;
		
		.top-left {
			display: flex;
			align-items: center;
			
			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 15rpx;
			}
			
			view {
				padding: 15rpx 0;
				justify-content: space-between;
				
				.top-title {
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
				}
				
				.top-subtitle {
					font-weight: 500;
					font-size: 25rpx;
					color: #000000;
				}
			}
		}
		
		.top-right {
			font-weight: 500;
			font-size: 25rpx;
			color: #100E0E;
			display: flex;
			align-items: center;
			
			image {
				width: 11.33rpx;
				height: 20rpx;
				margin-left: 19rpx;
			}
		}
	}
	
	.box {
		margin-top: 28rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		
		.flex-between {
			height: 106rpx;
			padding: 0 26rpx;
			
			.title {
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}
			
			image {
				width: 11.33rpx;
				height: 20rpx;
			}
		}
		.flex-between:not(:first-child) {
			border-top: 1rpx solid #D8D8D8;
		}
	}
</style>