123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226 |
- <template>
- <view class="user-info">
- <view class="form-item">
- <text>用户头像:</text>
- <image :src="userInfo.avatarUrl" mode="aspectFill" class="avatar"></image>
- <image v-if="userInfo.userType === 1" src="/static/images/v.png" mode="aspectFit" class="verification-badge"></image>
- </view>
- <view class="form-item">
- <text>昵称:</text>
- <input v-model="userInfo.nickName" placeholder="请输入昵称" />
- <text class="clear-icon" @tap="clearInput('nickName')">×</text>
- </view>
- <view class="form-item">
- <text>性别</text>
- <picker @change="onGenderChange" :value="userInfo.gender" :range="genders">
- <view class="picker-view">{{ genders[userInfo.gender] || '请选择性别' }}</view>
- </picker>
- <text class="clear-icon" @tap="clearInput('gender')">×</text>
- </view>
- <view class="form-item">
- <text>手机号码</text>
- <input v-model="userInfo.phoneNumber" placeholder="请输入手机号码" />
- <button class="get-phone-btn" @getphonenumber="getPhoneNumber" open-type="getPhoneNumber">获取手机号码</button>
- </view>
- <view class="form-item">
- <text>用户类别</text>
- <picker @change="onTypeChange" :value="userInfo.userType" :range="typeList">
- <view class="picker-view">{{ typeList[userInfo.userType] || '请选择用户类别' }}</view>
- </picker>
- <text class="clear-icon" @tap="clearInput('userType')">×</text>
- </view>
- <view class="form-item" v-if="userInfo.userType === 1">
- <text>姓名:</text>
- <input v-model="userInfo.realName" placeholder="请输入姓名" />
- <text class="clear-icon" @tap="clearInput('realName')">×</text>
- </view>
- <button class="save-btn" @tap="saveUserInfo">保存更新</button>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- userInfo: {
- avatarUrl: 'http://127.0.0.1:11170/__tmp__/7VdGoREFyrIFad833dc1387351cba860b823af033162.jpeg',
- nickName: 'lis23',
- gender: 0,
- phoneNumber: '13223896731',
- userType: 0,
- realName: ''
- },
- genders: ['保密', '男', '女'],
- typeList: ['普通用户', '内部用户'],
- errorMessage: ''
- }
- },
- onLoad() {
- // 这里可以添加页面加载时的逻辑,比如从服务器获取用户信息
- this.getUserInfo()
- },
- methods: {
- getUserInfo() {
- // 从服务器获取用户信息的方法
- // 这里应该调用API获取用户信息,然后更新 this.userInfo
- },
- onTypeChange(e) {
- this.userInfo.userType = parseInt(e.detail.value)
- },
- onGenderChange(e) {
- this.userInfo.gender = parseInt(e.detail.value)
- },
- clearInput(field) {
- if (field === 'nickName' || field === 'realName') {
- this.userInfo[field] = ''
- } else if (field === 'gender' || field === 'userType') {
- this.userInfo[field] = -1
- }
- },
- getPhoneNumber(e) {
- if (e.detail.errMsg === "getPhoneNumber:ok") {
- // 这里应该调用后端API来解密获取手机号
- console.log("获取手机号成功,需要解密的数据:", e.detail)
- // 示例:调用解密API
- // this.decryptPhoneNumber(e.detail.encryptedData, e.detail.iv)
- } else {
- uni.showToast({
- title: '获取手机号失败',
- icon: 'none'
- })
- }
- },
- // decryptPhoneNumber(encryptedData, iv) {
- // // 调用后端API进行解密
- // // 解密成功后更新 this.userInfo.phoneNumber
- // },
- async saveUserInfo() {
- if (!this.validateForm()) {
- return
- }
- try {
- // 这里应该调用保存用户信息的API
- // await this.updateUserInfoAPI(this.userInfo)
- uni.showToast({
- title: '保存成功',
- icon: 'success'
- })
- } catch (error) {
- uni.showToast({
- title: '保存失败,请重试',
- icon: 'none'
- })
- }
- },
- validateForm() {
- if (!this.userInfo.nickName.trim()) {
- uni.showToast({ title: '请输入昵称', icon: 'none' })
- return false
- }
- if (this.userInfo.gender === -1) {
- uni.showToast({ title: '请选择性别', icon: 'none' })
- return false
- }
- if (!/^1\d{10}$/.test(this.userInfo.phoneNumber)) {
- uni.showToast({ title: '请输入有效的手机号码', icon: 'none' })
- return false
- }
- if (this.userInfo.userType === 1 && !this.userInfo.realName.trim()) {
- uni.showToast({ title: '请输入姓名', icon: 'none' })
- return false
- }
- return true
- }
- }
- }
- </script>
- <style>
- /* 样式保持不变 */
- .user-info {
- padding: 20px;
- background-color: #ffffff;
- }
- .form-item {
- margin-bottom: 15px;
- position: relative;
- }
- .form-item text {
- display: block;
- margin-bottom: 5px;
- color: #333;
- font-size: 14px;
- }
- .avatar {
- width: 80px;
- height: 80px;
- border-radius: 8px;
- }
- .verification-badge {
- position: absolute;
- bottom: 0px;
- left: 65px;
- width: 20px;
- height: 20px;
- }
- input,
- .picker-view {
- width: 100%;
- height: 40px;
- padding: 0 10px;
- border: none;
- border-bottom: 1px solid #e0e0e0;
- background-color: #fff;
- font-size: 14px;
- line-height: 40px;
- }
- .clear-icon {
- position: absolute;
- right: 10px;
- top: 30px;
- color: #999;
- font-size: 18px;
- background-color: #e0e0e0;
- width: 20px;
- height: 20px;
- text-align: center;
- line-height: 20px;
- border-radius: 50%;
- }
- .get-phone-btn {
- position: absolute;
- right: 0;
- bottom: 0;
- font-size: 14px;
- background-color: transparent;
- color: #007AFF;
- padding: 5px 0;
- border: none;
- }
- .save-btn {
- width: 100%;
- height: 44px;
- line-height: 44px;
- text-align: center;
- background-color: #007AFF;
- color: white;
- border-radius: 4px;
- margin-top: 20px;
- font-size: 16px;
- }
- </style>
|