313 lines
8.4 KiB
Vue
313 lines
8.4 KiB
Vue
<template>
|
||
<view class="index" :style="[theme]">
|
||
<view class="onecontent">
|
||
个人信息
|
||
</view>
|
||
<view class="towcontent">
|
||
<view class="towcontent_item flex-between">
|
||
<view class="towcontent_item_text">
|
||
头像
|
||
</view>
|
||
<view class="towcontent_item_box">
|
||
<button open-type="chooseAvatar" @chooseavatar='onChooseAvatar' style="padding: 0;margin: 0;">
|
||
<image class="towcontent_item_box_imge" :src="urlavatar" mode="aspectFill"></image>
|
||
<!-- <image v-else class="towcontent_item_box_imge" src="@/static/logo.png" mode="aspectFill"></image> -->
|
||
</button>
|
||
<!-- <image v-if="userlist.avatar" class="towcontent_item_box_imge" :src="userlist.avatar" mode="aspectFill">
|
||
</image>
|
||
-->
|
||
</view>
|
||
</view>
|
||
<view class="towcontent_item flex-between">
|
||
<view class="towcontent_item_text">
|
||
UID
|
||
</view>
|
||
<view class="towcontent_item_box flex-start">
|
||
<text class="towcontent_item_box_text">ID:{{userlist.user_id}}</text>
|
||
<!-- <u-icon name="arrow-right" color="#909399" size="14"></u-icon> -->
|
||
</view>
|
||
</view>
|
||
<view class="towcontent_item flex-between">
|
||
<view class="towcontent_item_text">
|
||
昵称
|
||
</view>
|
||
<view class="towcontent_item_box flex-start">
|
||
<input class="towcontent_item_box_text" style="text-align: right;" type="nickname" @blur="blurname"
|
||
v-model="userlist.nickname" placeholder="请输入昵称">
|
||
<!-- <text class="towcontent_item_box_text">{{userlist.nickname||'暂无您称'}}</text> -->
|
||
</view>
|
||
</view>
|
||
<view class="towcontent_item flex-between">
|
||
<view class="towcontent_item_text">
|
||
性别
|
||
</view>
|
||
<view class="towcontent_item_box flex-start">
|
||
<u-radio-group v-model="userlist.gender" placement="row" @change="groupChange">
|
||
<u-radio shape="circle" label="男" name="1"></u-radio>
|
||
<u-radio style="margin-left: 10rpx;" shape="circle" label="女" name="2"></u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
</view>
|
||
<view class="towcontent_item flex-between" @click="datetimeshow = true">
|
||
<view class="towcontent_item_text">
|
||
生日
|
||
</view>
|
||
<view class="towcontent_item_box flex-start">
|
||
<text class="towcontent_item_box_text">{{userlist.birthday || ''}}</text>
|
||
<u-icon name="arrow-right" color="#909399" size="14"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="towcontent_item flex-between">
|
||
<view class="towcontent_item_text">
|
||
手机号
|
||
</view>
|
||
<view class="towcontent_item_box flex-start" v-if="userlist.mobile">
|
||
<text
|
||
class="towcontent_item_box_text">{{userlist.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</text>
|
||
<!-- <navigator :url="'/pages/my/setup/phone'" class="towcontent_item_box_ghbd">
|
||
更换绑定
|
||
</navigator>
|
||
<button class="towcontent_item_box_ghbd" open-type="getPhoneNumber"
|
||
@getphonenumber="getPhoneNumber">获取电话</button>-->
|
||
</view>
|
||
<!-- <navigator :url="'/pages/my/setup/phone'" v-else class="towcontent_item_box flex-start">
|
||
<text class="towcontent_item_box_text">去绑定</text>
|
||
<u-icon name="arrow-right" color="#909399" size="14"></u-icon>
|
||
</navigator> -->
|
||
<view v-else class="towcontent_item_box flex-start">
|
||
<button class="towcontent_item_box_ghbd" open-type="getPhoneNumber"
|
||
@getphonenumber="getPhoneNumber">获取电话</button>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="thereconse thereconses" @click="useruserinfoedit">
|
||
保存
|
||
</view>
|
||
<u-datetime-picker :minDate="-946800000000" :maxDate="2240409600000" :show="datetimeshow"
|
||
v-model="datetimevalue" @cancel='datetimeshow = false' @confirm="confirmdatetime"
|
||
mode="date"></u-datetime-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
|
||
import WXBizDataCrypt from "@/common/js/WXBizDataCrypt.js" // 需要引入
|
||
export default {
|
||
data() {
|
||
return {
|
||
urlavatar: '',
|
||
userlist: {},
|
||
datetimeshow: false,
|
||
datetimevalue: '',
|
||
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
|
||
};
|
||
},
|
||
onLoad() {},
|
||
computed: {
|
||
theme() {
|
||
return this.$store.getters.theme
|
||
},
|
||
},
|
||
onShow() {
|
||
this.useruserinfo()
|
||
|
||
},
|
||
watch: {},
|
||
methods: {
|
||
// / 更换头像
|
||
onChooseAvatar(e) {
|
||
uni.showLoading({
|
||
title: '上传中',
|
||
mask: true
|
||
})
|
||
console.log(e.detail.avatarUrl)
|
||
let file = e.detail.avatarUrl;
|
||
uploadImage(file, '',
|
||
result => {
|
||
//将上传后的图片以对象（官方要求的格式）的形式存入uni-file-picker的value值imageValue（imageValue值的结构为数组包对象）用于图片回显
|
||
// let objAge = {
|
||
// 'url': result,
|
||
// 'extname': 'png',
|
||
// 'name': 'imgss.png'
|
||
// };
|
||
// this.userlist.avatar.push(objAge)
|
||
this.urlavatar = result
|
||
console.log(this.urlavatar)
|
||
uni.hideLoading()
|
||
}, result => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
// 获取昵称
|
||
blurname(e) {
|
||
console.log(e);
|
||
this.userlist.nickname = e.detail.value
|
||
},
|
||
async useruserinfo() {
|
||
let res = await this.api.useruserinfo()
|
||
uni.cache.set('loginuser', res);
|
||
this.userlist = res.userinfo
|
||
this.userlist.gender = String(res.userinfo.gender)
|
||
this.urlavatar = res.userinfo.avatar
|
||
|
||
},
|
||
async useruserinfoedit() {
|
||
if (this.userlist.mobile == '' || this.userlist.mobile == null) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '请先绑定手机号'
|
||
});
|
||
return;
|
||
}
|
||
if (this.urlavatar == '' || this.urlavatar == null) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '头像不能为空'
|
||
});
|
||
return;
|
||
}
|
||
if (this.userlist.gender == '' || this.userlist.gender == null) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '性别不能为空'
|
||
});
|
||
return;
|
||
}
|
||
if (this.userlist.birthday == '' || this.userlist.birthday == null) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '生日不能为空'
|
||
});
|
||
return;
|
||
}
|
||
let res = await this.api.useruserinfoedit({
|
||
avatar: this.urlavatar,
|
||
nickname: this.userlist.nickname,
|
||
gender: this.userlist.gender,
|
||
birthday: this.userlist.birthday
|
||
})
|
||
uni.showToast({
|
||
title: '修改成功',
|
||
icon: 'none'
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 2000);
|
||
console.log(res)
|
||
},
|
||
confirmdatetime(e) {
|
||
console.log(e)
|
||
this.datetimeshow = false
|
||
this.userlist.birthday = uni.$u.date(e.value, 'yyyy-mm-dd')
|
||
},
|
||
groupChange(n) {
|
||
console.log(n)
|
||
this.userlist.gender = n
|
||
},
|
||
async getPhoneNumber(res) { // 获取手机号
|
||
var resdataa = res
|
||
console.log(res)
|
||
// #ifdef MP-WEIXIN
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: async (data) => {
|
||
let resdata = await this.api.usergetwechatphone({
|
||
code: data.code,
|
||
iv: resdataa.detail.iv,
|
||
encryptedData: resdataa.detail.encryptedData
|
||
})
|
||
this.userlist.mobile = resdata.mobile
|
||
}
|
||
});
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
|
||
// #endif
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #F9F9F9;
|
||
}
|
||
::v-deep .u-radio{
|
||
margin-left: 10rpx;
|
||
}
|
||
.index {
|
||
padding: 28rpx;
|
||
|
||
.onecontent {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #666666;
|
||
}
|
||
|
||
.towcontent {
|
||
padding: 0 32rpx;
|
||
margin-top: 24rpx;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 12rpx;
|
||
|
||
.towcontent_item:nth-child(1) {
|
||
border-top: none;
|
||
}
|
||
|
||
.towcontent_item {
|
||
padding: 22rpx;
|
||
border-top: 1rpx dotted #ccc;
|
||
|
||
.towcontent_item_text {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.towcontent_item_box {
|
||
.towcontent_item_box_imge {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
}
|
||
|
||
.towcontent_item_box_text {
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.towcontent_item_box_ghbd {
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #9397C1;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.thereconse {
|
||
width: 630rpx;
|
||
height: 80rpx;
|
||
background: #999999;
|
||
border-radius: 40rpx;
|
||
font-size: 36rpx;
|
||
text-align: center;
|
||
margin: 84rpx auto;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
line-height: 80rpx;
|
||
}
|
||
|
||
.thereconses {
|
||
background: var(--bg-color-button);
|
||
}
|
||
}
|
||
</style> |