chelvc-custom/src/pages/client/clientUser/mine/setting/personInfo.vue

<template>
  <view class="root">
    <view class="content-box">
      <u-cell-group>
        <u-cell title="头像" @click="handlerUploadImg" isLink>
          <template slot="value">
            <u-avatar shape="square" size="60" :src="userInfo.avatar" @click.stop="viewAvatar(userInfo.avatar)"></u-avatar>
          </template>
        </u-cell>
        <u-cell title="昵称" isLink>
          <template slot="value" >
            <u-input inputAlign="right" :border="false" v-model="userInfo.nickname" />
          </template>
        </u-cell>
        <u-cell title="性别" isLink>
          <template slot="value">
            <u-radio-group v-model="userInfo.gender">
              <u-radio v-for="item in sexList" :key="item.type" :label="item.text" :name="item.type" />
            </u-radio-group>
          </template>
        </u-cell>
      </u-cell-group>
    </view>
    <view class="btn-box">
      <u-button type="primary" shape="circle" @click="handlerSubmitBtn">确认</u-button>
    </view>
  </view>
</template>

<script>
import { uploadFile } from "@/utils/upload"
  export default {
    data() {
      return {
        userInfo:{
          userId:'',
          avatar:'',
          gender:'',
          nickname:''
        },
        time_value: '',
        timeShow: false,
        sexList: [{
            id: 0,
            text: '男',
            type:'MALE'
          },
          {
            id: 1,
            text: '女',
            type:'FEMALE'
          }
        ],
        current: 0,
      }
    },
    mounted(){
      this.userInfo.userId = this.$store.getters.userId
      this.userInfo.avatar = this.$store.getters.avatar
      this.userInfo.gender = this.$store.getters.gender
      this.userInfo.nickname = this.$store.getters.nickname
    },
    methods: {
      viewAvatar(url){
        uni.previewImage({
          urls:[url]
        })
      },
      // 选择性别
      handlerSelectGender(item) {
        this.current = item.id
      },
      // 上传头像
      async handlerUploadImg() {
        const res = await uni.showActionSheet({
          itemList: ['拍照', '从相册选择'],
        });
        if (res.tapIndex === 0) {
          // 用户选择拍照
          this.takePhoto();
        } else if (res.tapIndex === 1) {
          // 用户选择从相册选择
          this.chooseImage();
        }
      },
      // 拍照
      takePhoto() {
        uni.chooseImage({
          sourceType: ['camera'],
          count: 1,
          success: res => {
            const tempFilePaths = res.tempFilePaths;
            this.uploadAvatar(tempFilePaths[0]);
          },
          fail: error => {
            console.error(error);
          },
        });
      },
      //从相册中选择
      chooseImage() {
        uni.chooseImage({
          sourceType: ['album'],
          count: 1,
          success: res => {
            const tempFilePaths = res.tempFilePaths;
            this.uploadAvatar(tempFilePaths[0]);
          },
          fail: error => {
            console.error(error);
          },
        });
      },
      // 上传头像
      async uploadAvatar(filePath) {
        // 在这里实现上传头像的逻辑，将filePath作为参数传入
        const res = await uploadFile(filePath)
        if(res.statusCode === 200 && res.data){
          const resp = JSON.parse(res.data)
          this.userInfo.avatar = resp.data.url
        }
      },

      // 点击提交按钮
      handlerSubmitBtn() {
        this.$store.dispatch('UpdateUserInfo',this.userInfo).then(res=>{
          setTimeout(()=>{
            uni.navigateBack(-1)
          },1500)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.root{
  background-color: #f3f3f3;
  height: calc(100vh -  env(safe-area-inset-top));
  position: relative;
  .content-box{
    background-color: #fff;
  }
  .btn-box{
    position: absolute;
    bottom: 0;
    padding: 32rpx 16rpx;
    box-sizing: border-box;
    width: 100%;
  }
}
</style>