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