<template>
|
<view class="content">
|
<view class="cell" v-if="!loading.page">
|
<view class="cell-item" @click="uploadAvatar">
|
<view class="cell-item-text">头像</view>
|
<view class="cell-item-value"><image :src="userInfo.imgTx" class="avatar"></image></view>
|
<image class="cell-item-icon" src="/static/icon/icon_arraw.png" mode="widthFix"></image>
|
</view>
|
<view class="cell-item">
|
<view class="cell-item-text">昵称</view>
|
<input class="cell-item-input" type="text" v-model="userInfo.nickname" />
|
</view>
|
<view class="cell-item">
|
<view class="cell-item-text">个性签名</view>
|
<input class="cell-item-input" type="text" placeholder="请输入个性签名" v-model="userInfo.individuation" />
|
</view>
|
<view class="cell-item" @click="openPickerSex">
|
<view class="cell-item-text">性别</view>
|
<input class="cell-item-input" type="text" placeholder="待完善" :value="userInfo.sex == 1?'男':'女'" disabled />
|
<image class="cell-item-icon" src="/static/icon/icon_arraw.png" mode="widthFix"></image>
|
</view>
|
<view class="cell-item" @click="openDateOfBirth">
|
<view class="cell-item-text">生日</view>
|
<input class="cell-item-input" type="text" placeholder="待完善" v-model="userInfo.dateOfBirth" disabled />
|
<image class="cell-item-icon" src="/static/icon/icon_arraw.png" mode="widthFix"></image>
|
</view>
|
<view class="cell-item" @click="openAdder">
|
<view class="cell-item-text">地区</view>
|
<input class="cell-item-input" type="text" placeholder="待完善" v-model="userInfo.adder" disabled />
|
<image class="cell-item-icon" src="/static/icon/icon_arraw.png" mode="widthFix"></image>
|
</view>
|
<button class="button button-submit" :loading="loading.submit" @click="submit">提交</button>
|
</view>
|
<u-loading-page :loading="loading.page"></u-loading-page>
|
<!-- 性别 -->
|
<w-picker ref="pickerSex" :visible.sunc="visibleSex" :options="optionsSex" :defaultProps="{label:'name',value:'key'}" defaultType="name" mode="selector" @confirm="sexConfirm" @cancel="pickerClose"></w-picker>
|
<!-- 生日 -->
|
<w-picker
|
:visible.sync="dateOfBirthShow"
|
mode="date"
|
startYear="1900"
|
endYear="2029"
|
current
|
fields="day"
|
@confirm="dateOfBirthConfirm"
|
@cancel="pickerClose"
|
disabled-after
|
></w-picker>
|
<!-- 地区 -->
|
<w-picker
|
:visible.sync="regionVisible"
|
mode="region"
|
default-type="value"
|
:hide-area="false"
|
@confirm="adderConfirm"
|
@cancel="pickerClose"
|
ref="region"
|
></w-picker>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
loading: {
|
page:true,
|
submit:false
|
},
|
userInfo:{},
|
visibleSex:false,
|
optionsSex:[{key:1,name:'男'},{key:2,name:'女'}],
|
dateOfBirthShow:false,
|
regionVisible:false
|
};
|
},
|
onLoad() {
|
this.init()
|
},
|
methods: {
|
init(){
|
this.$apis.user.getUserInfo().then(res=>{
|
this.loading.page = false
|
this.userInfo = res.data
|
})
|
},
|
uploadAvatar(){
|
uni.chooseImage({
|
count: 1,
|
success: (ev) => {
|
this.$apis.app.uploadImage(ev.tempFilePaths[0],ev.tempFiles[0]).then(res=>{
|
this.userInfo.imgTx = res.data.name
|
})
|
}
|
})
|
},
|
pickerClose(){
|
this.visibleSex = false
|
this.dateOfBirthShow = false
|
this.regionVisible = false
|
},
|
openPickerSex(){
|
this.visibleSex = true
|
},
|
sexConfirm(ev){
|
this.visibleSex = false
|
this.userInfo.sex = ev.value
|
},
|
openDateOfBirth(){
|
this.dateOfBirthShow = true
|
},
|
dateOfBirthConfirm(ev){
|
this.userInfo.dateOfBirth = ev.result
|
},
|
openAdder(){
|
this.regionVisible = true
|
},
|
adderConfirm(ev){
|
this.userInfo.adder = ev.result
|
},
|
submit(){
|
this.loading.submit = true
|
let params = {
|
sex:this.userInfo.sex,
|
imgTx:this.userInfo.imgTx,
|
nickname:this.userInfo.nickname,
|
dateOfBirth:this.userInfo.dateOfBirth,
|
adder:this.userInfo.adder,
|
individuation:this.userInfo.individuation,
|
}
|
this.$apis.user.updateUserInfo(params).then(res=>{
|
this.loading.submit = false
|
this.$toast('修改成功')
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.content{
|
padding: 0 28rpx;
|
.cell{
|
.cell-item{
|
height: 100rpx;
|
display: flex;
|
align-items: center;
|
border-bottom: 2rpx solid rgba(217, 217, 217, 0.4);
|
.cell-item-text{
|
font-size: 32rpx;
|
color: #000000;
|
line-height: 32rpx;
|
}
|
.cell-item-icon{
|
width: 14rpx;
|
height: 24rpx;
|
}
|
.cell-item-input{
|
flex: 1;
|
font-size: 32rpx;
|
color: rgba(0, 0, 0, 0.8);
|
line-height: 42rpx;
|
text-align: right;
|
padding-right: 30rpx;
|
}
|
.cell-item-value{
|
flex: 1;
|
padding-right: 30rpx;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
.avatar{
|
width: 88rpx;
|
height: 88rpx;
|
border-radius: 50%;
|
}
|
}
|
}
|
}
|
.button-submit{
|
margin: 0 auto;
|
margin-top: 253rpx;
|
width: 635rpx;
|
height: 96rpx;
|
background: #FF2729;
|
border-radius: 58rpx;
|
font-weight: 700;
|
font-size: 35rpx;
|
color: #FFFFFF;
|
line-height: 35rpx;
|
}
|
}
|
</style>
|
