xytSk-App/pages/personInfo/personInfo.vue

<template>
	<view class="container">
		<div class="userinfo">
			<div class="icon" @click="goBack">
				<uni-icons type="back" size="25" color="white"></uni-icons>
			</div>
			<div class="Header">
				<span>个人信息</span>
			</div>
		</div>
		
		<uni-list class="info">
			<uni-list-item
				title="头像"
				show-arrow="true"
				clickable
				class="listContainer"
				@click="showActionSheet()"
			>
				<template v-slot:footer >
					<image class="slot-image" src='../../static/tabs/头像_icon@2x.png' mode="aspectFit"></image>
				</template>
			</uni-list-item>
			<uni-list-item 
				v-for="(item, index) in userListShow" 
				:key="index"
				clickable
				:title="item.name"
				class="listContainer"
			>
				<template v-slot:footer >
					<div @click="modifyValue(item)" @click.stop="over(item)">
						<text >{{item.info}}</text>
					</div>
				</template>
			</uni-list-item>
		</uni-list>
		<button type="primary" class="button">保存</button>
	</view>
</template>

<script>
	
	let modify = false
	
	//访问数据
	const userList = uni.getStorageSync('value')
	const userListShow = [
		{name: '手机号码', info: userList.phone},
	]
	
	const default_src = '../../static/tabs/头像_icon@2x.png'
	
	export default {
		data() {
			return {
				userList: userList,
				userListShow:userListShow,
				modify: modify
			}
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			showActionSheet(){
				uni.showActionSheet({
					itemList: ['拍照/上传照片', '恢复默认头像'],
					success: (res) => {
						console.log('选择了第' + (res.tapIndex + 1) + '个选项');
						if (res.tapIndex === 0) { //拍照上传照片
							
						} else if(res.tapIndex === 1) { //恢复默认头像
							
						}
					},
					fail: (err) => {
					console.log('弹窗取消');
					}
				});
			},
			modifyValue(item){
				console.log(item);
				
			}
		}
	}
</script>

<style>
	.userinfo{
		border-radius: 5px;
		display: flex;
		flex-direction: row;
		margin-top: 5vh;
		margin-left: 2vw;
		margin-bottom: 2vh;
		align-items: center;
		width: 95%;
		height: 6vh;
		background-color: #007afd;
		
	}
	.icon{
		width: 6vw;
		height: 6vh;
		align-items: center;
		line-height: 6vh;
	}
	.Header{
		display: flex;
		flex-direction: row;
		flex: 0.95;
		justify-content: center;
		color: white;
		font-size: 20px;		
	}
	.info{
		margin: 1vh;
		
	}
	.listContainer{
		height: 6vh;
		line-height: 8vh;
	}
	.button{
		margin-top: 60vh;
		border-radius: 10px;
		display: flex;
		flex-direction: column-reverse;
		width: 92%;
		height: 6vh;
		font-size: 20px;
		color: white;
		background-color: #007afd;
	}
	.slot-image{
		width: 8vw;
		height: 8vh;
	}
</style>