| @ -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> | |||