|
|
@ -0,0 +1,319 @@ |
|
|
|
<template> |
|
|
|
<view class="login"> |
|
|
|
|
|
|
|
<view class="bg1"></view> |
|
|
|
|
|
|
|
<view class="title"> |
|
|
|
定制自己的形象 |
|
|
|
</view> |
|
|
|
|
|
|
|
<view |
|
|
|
v-if="back" |
|
|
|
@click="$utils.navigateBack" |
|
|
|
style="position: absolute;top: 120rpx;left: 20rpx;"> |
|
|
|
<uv-icon |
|
|
|
size="30rpx" |
|
|
|
color="#000" |
|
|
|
name="arrow-left"></uv-icon> |
|
|
|
</view> |
|
|
|
|
|
|
|
<button class="chooseAvatar" |
|
|
|
open-type="chooseAvatar" |
|
|
|
@chooseavatar="onChooseAvatar"> |
|
|
|
<image :src="form.headImage" |
|
|
|
mode="aspectFill"></image> |
|
|
|
</button> |
|
|
|
|
|
|
|
<input type="nickname" |
|
|
|
placeholder="给自己起一个响亮的名字" |
|
|
|
class="nickname" id="nickName" |
|
|
|
v-model="form.nickName" /> |
|
|
|
|
|
|
|
<!-- <view class="sexSelect"> |
|
|
|
<view |
|
|
|
@click="sexClick(item)" |
|
|
|
v-for="(item, index) in sexList" |
|
|
|
:key="index" |
|
|
|
:style="{color : form.sex == item.value ? item.actColor : '#333'}"> |
|
|
|
<uv-icon |
|
|
|
size="30rpx" |
|
|
|
:color="form.sex == item.value ? item.actColor : '#333'" |
|
|
|
:name="item.icon"></uv-icon> |
|
|
|
{{ item.value }} |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<!-- <view class="address" |
|
|
|
@click="$refs.datetimePicker.open()"> |
|
|
|
您出生于{{ $dayjs(form.yearDate).format("YYYY") }}年 |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="address" |
|
|
|
@click="$refs.picker.open()"> |
|
|
|
{{ form.address || '请选择居住地址'}} |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<uv-datetime-picker |
|
|
|
ref="datetimePicker" |
|
|
|
v-model="form.yearDate" |
|
|
|
mode="year" |
|
|
|
:minDate="minDate" |
|
|
|
:maxDate="maxDate"> |
|
|
|
</uv-datetime-picker> |
|
|
|
|
|
|
|
<uv-picker ref="picker" |
|
|
|
:columns="columns" |
|
|
|
keyName="name" |
|
|
|
@confirm="confirmAddress"></uv-picker> |
|
|
|
|
|
|
|
<view class="btn" @click="submit"> |
|
|
|
确认 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapState } from 'vuex' |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
form: { |
|
|
|
headImage: '', |
|
|
|
nickName: '', |
|
|
|
sex : '男', |
|
|
|
yearDate : this.$dayjs().add(-18, 'y').valueOf(),//默认满18岁 |
|
|
|
address : '', |
|
|
|
}, |
|
|
|
maxDate : this.$dayjs().valueOf(), |
|
|
|
minDate : this.$dayjs().add(-100, 'y').valueOf(), |
|
|
|
sex : { |
|
|
|
男 : { |
|
|
|
name : 'man', |
|
|
|
color : '#5baaff', |
|
|
|
}, |
|
|
|
女 : { |
|
|
|
name : 'woman', |
|
|
|
color : '#ff50b3', |
|
|
|
}, |
|
|
|
}, |
|
|
|
sexList : [ |
|
|
|
{ |
|
|
|
value : '男', |
|
|
|
icon : 'man', |
|
|
|
actColor : '#5baaff', |
|
|
|
}, |
|
|
|
{ |
|
|
|
value : '女', |
|
|
|
icon : 'woman', |
|
|
|
actColor : '#ff50b3', |
|
|
|
}, |
|
|
|
], |
|
|
|
columns : [], |
|
|
|
back : '', |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState(['cityList', 'userInfo']), |
|
|
|
}, |
|
|
|
onLoad({back}) { |
|
|
|
this.back = back |
|
|
|
// this.$nextTick(() => { |
|
|
|
// this.form.headImage = this.userInfo.headImage || this.form.headImage |
|
|
|
// this.form.nickName = this.userInfo.nickName || this.form.nickName |
|
|
|
// this.form.sex = this.userInfo.sex || this.form.sex |
|
|
|
// this.form.yearDate = this.userInfo.yearDate || this.form.yearDate |
|
|
|
// this.form.address = this.userInfo.address || this.form.address |
|
|
|
// }) |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
this.getCityList() |
|
|
|
this.getUserInfo() |
|
|
|
}, |
|
|
|
computed: {}, |
|
|
|
methods: { |
|
|
|
onChooseAvatar(res) { |
|
|
|
let self = this |
|
|
|
self.$Oss.ossUpload(res.target.avatarUrl) |
|
|
|
.then(url => { |
|
|
|
self.form.headImage = url |
|
|
|
}) |
|
|
|
}, |
|
|
|
sexClick(item){ |
|
|
|
this.form.sex = item.value |
|
|
|
}, |
|
|
|
confirmAddress(e){ |
|
|
|
this.form.address = e.value[0].name |
|
|
|
}, |
|
|
|
// 获取城市 |
|
|
|
getCityList(){ |
|
|
|
this.$api('getCityList', res => { |
|
|
|
if(res.code == 200){ |
|
|
|
this.columns = [ |
|
|
|
res.result |
|
|
|
] |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
getUserInfo(){ |
|
|
|
this.$api('getInfo', res => { |
|
|
|
if(res.code == 200){ |
|
|
|
|
|
|
|
this.form.headImage = res.result.headImage || this.form.headImage |
|
|
|
|
|
|
|
this.form.nickName = res.result.nickName || this.form.nickName |
|
|
|
|
|
|
|
this.form.sex = res.result.sex || this.form.sex |
|
|
|
|
|
|
|
this.form.yearDate = res.result.yearDate && |
|
|
|
this.$dayjs(res.result.yearDate + '-01-01').valueOf() || this.form.yearDate |
|
|
|
|
|
|
|
this.form.address = res.result.address || this.form.address |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
submit() { |
|
|
|
let self = this |
|
|
|
|
|
|
|
uni.createSelectorQuery().in(this) |
|
|
|
.select("#nickName") |
|
|
|
.fields({ |
|
|
|
properties: ["value"], |
|
|
|
}) |
|
|
|
.exec((res) => { |
|
|
|
const nickName = res?.[0]?.value |
|
|
|
self.form.nickName = nickName |
|
|
|
|
|
|
|
if (self.$utils.verificationAll(self.form, { |
|
|
|
headImage: '请选择头像', |
|
|
|
nickName: '请填写昵称', |
|
|
|
// address: '请选择居住地址', |
|
|
|
})) { |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
let data = { |
|
|
|
...self.form, |
|
|
|
// yearDate : this.$dayjs(self.form.yearDate).format("YYYY") |
|
|
|
} |
|
|
|
|
|
|
|
self.$api('updateInfo', data, res => { |
|
|
|
if (res.code == 200) { |
|
|
|
uni.reLaunch({ |
|
|
|
url:'/pages/index/index' |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.login { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 100vh; |
|
|
|
background-color: #fff; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
|
|
.bg1{ |
|
|
|
width: 700rpx; |
|
|
|
height: 700rpx; |
|
|
|
border-radius: 50%; |
|
|
|
background-color: #ffc0b333; |
|
|
|
position: absolute; |
|
|
|
right: -300rpx; |
|
|
|
top: -300rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
line-height: 45rpx; |
|
|
|
font-weight: 900; |
|
|
|
padding-bottom: 100rpx; |
|
|
|
font-size: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.chooseAvatar { |
|
|
|
width: 100%; |
|
|
|
padding: 0 !important; |
|
|
|
margin: 0 !important; |
|
|
|
border: none; |
|
|
|
background-color: #fff !important; |
|
|
|
width: 220rpx; |
|
|
|
height: 220rpx; |
|
|
|
border-radius: 50%; |
|
|
|
image{ |
|
|
|
width: 200rpx; |
|
|
|
height: 200rpx; |
|
|
|
border-radius: 50%; |
|
|
|
box-shadow: 0 0 10rpx 10rpx #00000012; |
|
|
|
margin: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.chooseAvatar::after{ |
|
|
|
border: none; |
|
|
|
padding: 0 !important; |
|
|
|
margin: 0 !important; |
|
|
|
} |
|
|
|
|
|
|
|
.nickname{ |
|
|
|
background-color: #f7f7f7; |
|
|
|
width: 600rpx; |
|
|
|
height: 80rpx; |
|
|
|
text-align: center; |
|
|
|
border-radius: 40rpx; |
|
|
|
margin-top: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.sexSelect{ |
|
|
|
background-color: #f7f7f7; |
|
|
|
width: 600rpx; |
|
|
|
height: 80rpx; |
|
|
|
text-align: center; |
|
|
|
border-radius: 40rpx; |
|
|
|
margin-top: 30rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
font-size: 26rpx; |
|
|
|
line-height: 80rpx; |
|
|
|
overflow: hidden; |
|
|
|
&>view{ |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-content: center; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
&>view:nth-child(1){ |
|
|
|
border-right: 1px solid #000; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.address{ |
|
|
|
background-color: #f7f7f7; |
|
|
|
width: 600rpx; |
|
|
|
height: 80rpx; |
|
|
|
text-align: center; |
|
|
|
border-radius: 40rpx; |
|
|
|
margin-top: 30rpx; |
|
|
|
line-height: 80rpx; |
|
|
|
color: #555; |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
// background: $uni-linear-gradient-btn-color; |
|
|
|
background: $uni-color; |
|
|
|
color: #fff; |
|
|
|
width: 80%; |
|
|
|
padding: 20rpx 0; |
|
|
|
text-align: center; |
|
|
|
border-radius: 15rpx; |
|
|
|
margin-top: 10vh; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |