|
|
@ -0,0 +1,223 @@ |
|
|
|
<template> |
|
|
|
<view class='updateUserInfo'> |
|
|
|
<!--顶部导航栏--> |
|
|
|
<navbar leftClick @leftClick="$utils.navigateBack" title="修改个人信息" /> |
|
|
|
|
|
|
|
<!--主页面--> |
|
|
|
<view class="frame"> |
|
|
|
<view class="headImage"> |
|
|
|
<view style="" class="key">头像</view> |
|
|
|
<button style="" class="value" @chooseavatar="onChooseAvatar" open-type="chooseAvatar"> |
|
|
|
<image :src="form.headImage" v-if="form.headImage" style="width: 150%;height: 100%" mode=""> |
|
|
|
</image> |
|
|
|
<image src="/static/image/tabbar/6.png" v-else style="width: 100%;height: 100%" mode=""> |
|
|
|
</image> |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
<view class="item"> |
|
|
|
<view class="label">昵称</view> |
|
|
|
<view class="value"> |
|
|
|
<input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName" |
|
|
|
v-model="form.nickName" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- <view class="item" @click="sexChange"> |
|
|
|
<view class="label">性别</view> |
|
|
|
<view>{{form.sex}}</view> |
|
|
|
</view> --> |
|
|
|
<view class="item"> |
|
|
|
<view class="label">联系方式</view> |
|
|
|
<view class="value"> |
|
|
|
<uv-input v-model="form.phone" placeholder="联系方式" border="bottom" clearable></uv-input> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- ActionSheet 操作菜单 --> |
|
|
|
<uv-action-sheet ref="actionSheet" :actions="sexList" title="性别" @select="select" @close="close"> |
|
|
|
</uv-action-sheet> |
|
|
|
|
|
|
|
<!--确认修改个人信息按钮--> |
|
|
|
<button @click="confirmEditUserInfo" class="bottomBtn"> |
|
|
|
确认修改 |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import '../../common.css'; // 引入公共 CSS 文件 |
|
|
|
import { |
|
|
|
mapState, |
|
|
|
mapGetters |
|
|
|
} from 'vuex' |
|
|
|
export default { |
|
|
|
computed: { |
|
|
|
...mapState(['userInfo']), |
|
|
|
...mapGetters(['isVedio']), |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
form: { |
|
|
|
sex: '', |
|
|
|
nickName: '1', |
|
|
|
phone: '', |
|
|
|
headImage: '', |
|
|
|
}, |
|
|
|
// itemUserImage: userInfo.headImage, |
|
|
|
fileList: [], |
|
|
|
sexList: [{ |
|
|
|
name: '男', |
|
|
|
value: 1 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '女', |
|
|
|
value: 0 |
|
|
|
}, |
|
|
|
], |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.form.phone = this.userInfo.phone |
|
|
|
this.form.headImage = this.userInfo.headImage |
|
|
|
this.form.nickName = this.userInfo.nickName |
|
|
|
this.form.sex = this.userInfo.sex |
|
|
|
if (this.userInfo.sex == '' || this.userInfo.sex == null) { |
|
|
|
this.form.sex = '未知' |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
onChooseAvatar(res) { |
|
|
|
let self = this |
|
|
|
console.log(res.target.avatarUrl, "res.target.avatarUrl"); |
|
|
|
self.$Oss.ossUpload(res.target.avatarUrl) |
|
|
|
.then(url => { |
|
|
|
console.log(url, "url"); |
|
|
|
self.form.headImage = url |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
// 确认修改个人信息 |
|
|
|
confirmEditUserInfo() { |
|
|
|
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: '请填写昵称' |
|
|
|
})) { |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
self.$api('infoUpdateInfo', self.form, res => { |
|
|
|
if (res.code == 200) { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages/index/index' |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
this.$api('infoUpdateInfo', this.form, res => { |
|
|
|
if (res.code == 200) { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages/index/index' |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
sexChange() { |
|
|
|
this.$refs.actionSheet.open() //打开ActionSheet 操作菜单 |
|
|
|
}, |
|
|
|
|
|
|
|
// ActionSheet 操作菜单选中 |
|
|
|
select(e) { |
|
|
|
console.log('选中该项:', e); |
|
|
|
this.form.sex = e.name |
|
|
|
this.$refs.actionSheet.close() //关闭操作菜单 |
|
|
|
}, |
|
|
|
|
|
|
|
// ActionSheet 操作菜单关闭 |
|
|
|
close() { |
|
|
|
this.$refs.actionSheet.close() //关闭操作菜单 |
|
|
|
|
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
* { |
|
|
|
box-sizing: border-box; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.updateUserInfo { |
|
|
|
.frame { |
|
|
|
padding: 28rpx 28rpx 0 28rpx; |
|
|
|
|
|
|
|
.headImage { |
|
|
|
display: flex; |
|
|
|
// width: 100vw; |
|
|
|
padding: 20rpx; |
|
|
|
|
|
|
|
.key { |
|
|
|
width: 500rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.value { |
|
|
|
border-radius: 50rpx; |
|
|
|
border: 1px solid red; |
|
|
|
box-sizing: border-box; |
|
|
|
overflow: hidden; |
|
|
|
width: 100rpx; |
|
|
|
height: 100rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.item { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
// border-bottom: 1px solid #c9c9c9; |
|
|
|
margin-top: 20rpx; |
|
|
|
padding: 20rpx; |
|
|
|
|
|
|
|
.label { |
|
|
|
width: 50%; |
|
|
|
} |
|
|
|
|
|
|
|
.value { |
|
|
|
width: 50%; |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .input__content { |
|
|
|
/deep/.uv-input__content__field-wrapper { |
|
|
|
border: 1px solid red; |
|
|
|
|
|
|
|
input { |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .uv-input__content__field-wrapper__field { |
|
|
|
text-align: right; |
|
|
|
} |
|
|
|
</style> |