ParkApp/pages/mine/mine.vue

<template>
<view class="">
	<view class="pageBg">
		<view class="mine_order_statue">
			<view class="flex justify-between" style="padding: 20rpx;">
				<view class="flex">
					<image :src="userInfo.avatarUrl?userInfo.avatarUrl:'http://139.9.103.171:8888/group1/M00/00/01/iwlnq1_AYZqAb30pAAAQNvkj3Wk302.png'"  style="background-color: #FFFFFF;width: 110rpx;height: 110rpx;border-radius: 50%;" ></image>
					<view  class="flex flex-direction padding-left-30">
						<text class="text-lg text-bold" v-text="userInfo.nickName?userInfo.nickName:'暂无昵称'"></text>
						<button v-if="$isEmpty(userInfo)" open-type="getUserInfo" @getuserinfo="getUserInfo" class="cu-btn  bg-white text-blue margin-top-20 df" style="margin-left: -20rpx;">
							点击获取微信昵称和头像
						</button>
						<view v-else class="padding-20" >
							<text  class="margin-top-30 text-df">{{phone}}</text>
						</view>
					</view>
				</view>
				<view @click="goUserInfo" class="flex align-center justify-center">
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
		
		<view class="item_list">
			<view class=" flex justify-between" style="padding: 40rpx 20rpx;">
				<view class="text-bold">所属公司</view>
				<view class="text-gray">
					<text>暂无公司信息</text>
					<text class="cuIcon-playfill  padding-left-20" style="font-size: 28rpx;"></text>
				</view>
			</view>
		</view>
		
		<view class="item_list" >
			<view class="item" v-for="(item, index) in systemItemList" :key="index" @tap="tapToMenu(item.name)">
				<view class="item_content">
					<image :src="item.itemIcon"></image>
					<text>{{ item.itemName }}</text>
				</view>
				<view class="">
					<image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
var app=getApp()
import DtCustomBar from '@/components/dt_custom_bar.vue'
let that
export default {
	components: {
		DtCustomBar
	},
	data() {
		return {
			background: {
				backgroundColor: '#f5f6f8',
			},
			phone:'',
			userInfo:{},
			systemItemList:[
				// {
				// 	itemName: '物业报修',
				// 	itemIcon: '/static/index/blue/wuye.png',
				// 	index:10
				// },
				// {
				// 	itemName: '人员认证',
				// 	itemIcon: '/static/index/blue/shenfen.png',
				// 	index:10
				// },
				{
					itemName: '我的消息',
					itemIcon: '/static/index/blue/msg.png',
					name:'msg'
				},
				{
					itemName: '问题反馈',
					itemIcon: '/static/index/blue/fankui.png',
					name:'feedback'
				},
				{
					itemName: '帮助中心',
					itemIcon: '/static/index/blue/shuoming.png',
					name:'help'
				},
				{
					itemName: '用户协议',
					itemIcon: '/static/index/blue/xieyi1.png',
					name:'protocol'
				}
			],
			memberId: '',
			dataDetail: {},
			orderStatusNum: {},
			userDetail: {},
			isLogin: false,
		};
	},
	onShow() {
		this.apiGetUserInfo()
	},
	onLoad() {
		that=this
	},
	computed: {
		
	},
	methods: {
		//功能跳转
		tapToMenu(name){
			let url='/pages/mine/protocol/protocol'
			switch (name){
				case 'feedback':
					url="/pages/mine/feedback/feedback"
					break;
				default:
					break;
			}
			if (!this.$isEmpty(url)) {
				uni.navigateTo({
					url:url
				})
			}
		},
		//获取微信昵称和头像
		getUserInfo(e){
			this.userInfo=e.detail.userInfo
			console.log(this.userInfo.avatarUrl)
			this.$cache.put('userInfo',this.userInfo)
		},
		//从缓存中获取用户信息
		apiGetUserInfo(){
			this.phone=this.$cache.get('phone') || ''
			this.userInfo= this.$cache.get('userInfo') || {}
		},
		//跳转到用户信息
		goUserInfo(){
			uni.navigateTo({
				url:"/pages/mine/mine-info/mine-info"
			})
		}
	},

};
</script>
<style lang="scss" scoped>
page{
	min-height: 100vh;
	background-color: #f5f6f8;
}
button::after {
	  border: none;
	}
.header {
	// border-bottom-right-radius: 100rpx;
	// border-bottom-left-radius: 100rpx;
	//todo
	height: 260upx;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	.member_head_img {
		margin-right: 30upx;
		image {
			//todo
			width: 110upx;
			height:110upx;
			border-radius: 59rpx;
		}

		.avatar-wrap {
			display: inline-flex;
			border: 0;
			background-color: transparent;
		}
	}

	.no_login {
		display: flex;
		flex-direction: column;
		.no_login_btn {
			border-radius: 25px;
			//todo
			font-size: 32upx;
			color: #fff;
			width: fit-content;
			padding: 0 15upx;
			height: 60upx;
			line-height: 60upx;
			background: transparent;
		}
	}

	.member_info {
		display: flex;
		flex-direction: column;
		.member_name_box {
			display: flex;
			flex-direction: row;
			align-items: center;
			.member_name { 
				font-size: 40upx;
				color: #fff;
				font-weight: bold;
			}
			.member_level {
				background: #ffc600;
				color: #fff;
				font-size: 22upx;
				border-radius: 4upx;
				padding: 5upx 10upx;
				margin-left: 10upx;
			}
		}

		.member_phone_box {
			display: flex;
			flex-direction: row;
			align-items: center;
			.member_phone { 
				font-size: 24upx;
				color: #FFFFFF;
			}

			image {
				width: 19upx;
				height: 19upx;
				padding: 20upx;
			}
		}
	}

	.member_benefits {
		background: #fff;
		width: 180upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: center;
		border-radius: 27upx 0px 0px 27upx;
		height: 54upx;
		text-align: center;
		position: absolute;
		right: 0;

		image {
			width: 26upx;
			height: 23upx;
			padding: 0 10upx 0 30upx;
		}

		.member_benefits_text {
			font-size: 24upx;
			color: #2f7ff5;
			letter-spacing: 2upx;
		}
	}

	button::after {
		border: none;
	}
}

.coupon_point {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 110upx;
	background: #fff;
	justify-content: space-around;

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50%;

		.item_box {
			display: flex;
			flex-direction: row;
			align-items: center;
			letter-spacing: 2upx;

			.item_content {
				color: #2f7ff5;
				font-size: 34upx;
			}

			.item_unit {
				color: #2f7ff5;
				font-size: 22upx;
				margin-top: 6upx;
			}
		}

		.item_text {
			color: #333333;
			font-size: 22upx;
		}
	}

	.line {
		width: 1upx;
		height: 50upx;
		background: #e5e5e5;
	}
}

.mine_order_statue {
	//todo
	box-shadow: 0 10rpx #e7f1fd ;
	margin: 20upx 20upx 0;
	background: #fff;
	padding: 10upx 20upx;
	border-radius: 20rpx;
}

.item_list {
	display: flex;
	flex-direction: column;
	background: #fff;
	margin-top: 20upx;
    margin-left: 20rpx;
	margin-right: 20rpx;
	border-radius: 10rpx;
	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx;
		height: 90upx;
		border-bottom: 1upx solid #f1f1f1;

		.item_content {
			display: flex;
			flex-direction: row;
			align-items: center;

			image {
				width: 42upx;
				height: 42upx;
			}

			text {
				font-size: 28upx;
				color: #333333;
				margin-left: 20upx;
			}
		}

		image {
			width: 10upx;
			height: 18upx;
		}
	}
	.item:last-child {
		border: none;
	}
}
</style>