myInfo.vue
3.69 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<template>
<view class="fixedbody">
<uni-forms ref="baseForm" :modelValue="form" label-width="80">
<uni-group mode="card" title="个人信息" top="20">
<view class="wBox">
<uni-forms-item label="照片" required name="picUrl">
<view class="avatarUrl">
<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
<image mode="aspectFill" :src="form.avatar" class="refreshIcon"></image>
</button>
</view>
<!-- {{form.avatar}} -->
</uni-forms-item>
<uni-forms-item label="姓名" name="realName">
<uni-easyinput type="nickname" v-model="form.nickName" :clearable="false" placeholder="请输入姓名"
@blur="changename"/>
</uni-forms-item>
<uni-forms-item label="手机号码" name="phone">
<!-- <button type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">获取手机号</button> -->
<uni-easyinput v-model="form.phonenumber" :clearable="false" placeholder="请输入联系方式" />
</uni-forms-item>
</view>
</uni-group>
</uni-forms>
<view class="fixedBottom"><button class="btn btn1" @click="save">保存</button></view>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { onLoad ,onShow,onPullDownRefresh} from '@dcloudio/uni-app'
import * as api from '@/common/api.js';
import * as loginServer from '@/common/login.js';
const imageStyles=ref({
width:'500rpx',
height:'300rpx',
border:{radius:'2px'}
});
const countryList = ref([]);
const regionsList = ref([]);
const groupList = ref([]);
const form = ref({});
const nn = ref({})
const current = ref(0);
onLoad(()=>{
})
onShow(()=>{
getData()
})
onPullDownRefresh(() => {
getData()
})
function getData(){
form.value = uni.getStorageSync('currUser')
}
function save() {
api.updateUserInfo(form.value).then(res=>{
uni.showToast({
title:`保存成功`
})
loginServer.getCurrUser()
})
}
function onChooseavatar(e){
form.value.avatar = e.detail.avatarUrl
}
function changename(e){
console.log(e)
form.value.nickName = e.detail.value
}
function decryptPhoneNumber(e){
if (e.detail.errMsg == "getPhoneNumber:ok") {
// 可以使用 e.detail.encryptedData 和 e.detail.iv 获取加密的手机号信息
const encryptedData = e.detail.encryptedData;
const iv = e.detail.iv;
api.jiexi({
encryptedData: encryptedData,
iv: iv
}).then(res=>{
console.log(res.data); // 服务器返回的手机号等信息
})
} else {
// 用户拒绝授权
console.log("用户拒绝授权获取手机号");
}
}
</script>
<style scope lang="scss">
.wBox { position: relative;
background: #ffffff;
border-radius: 15px;
box-sizing: border-box;
}
:deep(.fixedbody .uni-group.uni-group--card){overflow:visible;}
:deep(.uni-tag){
padding: 4rpx 6rpx!important;font-size: 20rpx!important;
}
.avatarUrl{width: 200rpx;height:200rpx;}
.avatarUrl button{padding: 0;display: block;line-height: 1;}
.refreshIcon{width: 200rpx;height:200rpx;}
.matchItem{background: #FBFCFD; margin: 30rpx 0 90rpx;padding:20rpx;border: #eee solid 1rpx;
.bottomFunc{background: #FBFCFD;border: #eee solid 1rpx;}
}
.poKxBtn{position: absolute; top: -100rpx;
right: 0;
font-size: 24rpx;
line-height: 2;
}
.pp{display: flex;
.uni-data-tree{font-size: 24rpx;
.selected-list{padding: 0;}
.input-value{line-height:normal;padding: 0;}
}
}
.ttt{color: #2B3133;font-size: 30rpx;margin: 0 0 10rpx;
text{font-size: 24rpx;color: #DC0032;margin-left:10rpx;}
}
.idImgUrl{width: 500rpx;height: 300rpx;margin:20rpx auto 40rpx;
button {padding: 0;display: block;line-height: 1;}
.idImg{width: 500rpx;height: 300rpx;}
}
</style>