142 lines
2.6 KiB
Vue
142 lines
2.6 KiB
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>
|