初始化
This commit is contained in:
魏啾
313
pages/my/setup/index.vue
Normal file
313
pages/my/setup/index.vue
Normal file
@@ -0,0 +1,313 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user