chelvc-custom/src/PageMine/setting/personInformation.vue

<template>
  <view class="ccontainer">
    <view class="item-box">
      <view class="item-left"> 头像 : </view>
      <view class="item-right flex-end">
        <image @click="handlerUploadImg" class="img" :src="uoloadImg"></image>
      </view>
    </view>
    <view class="item-box">
      <view class="item-left"> 昵称 : </view>
      <view class="item-right">
        <u--input placeholder="请输入内容" border="none" v-model="queryParams.nickname"></u--input>
      </view>
    </view>
    <view class="item-box">
      <view class="item-left"> 性别 : </view>
      <view class="item-right">
        <view class="sex-item">
          <view class="item" v-for=" (item,index) of sexList" :class="current == index ? 'act-sex' : ''" :key="index"
            @click="handlerSelectGender(item)"> {{ item.name }} </view>
        </view>
      </view>
    </view>
    <view class="item-box">
      <view class="item-left"> 生日 : </view>
      <view class="item-right right-time-box" @click="timeShow = true">
        <view class="time-left" :class="queryParams.birthday ? '' : 'gray-color'">
          {{ queryParams.birthday ? queryParams.birthday : '请选择您的生日' }}
        </view>
        <view class="time-right">
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </view>

    <u-datetime-picker :show="timeShow" v-model="time_value" mode="date" @cancel='timeShow = false'
      @confirm='confirmTime' :minDate="0" :maxDate='maxDataTime'></u-datetime-picker>

    <view class="btn-box">
      <button class="btn" @click="handlerSubmitBtn">提交</button>
    </view>
  </view>
</template>

<script>
  import {
    getUserInfo
  } from '@/api/user';
  import {
    uploadFile
  } from "@/utils/upload"
  export default {
    data() {
      return {
        queryParams: {
          avatar: '', // 头像
          gender: '', //性别
          birthday: '', //生日
          nickname: '', //昵称
        },
        time_value: '',
        timeShow: false,
        sexList: [{
            id: 0,
            name: '男',
            type: 'MALE'
          },
          {
            id: 1,
            name: '女',
            type: 'FEMALE'
          }
        ],
        current: 0,
        uoloadImg: '',
        maxDataTime: 0
      }
    },
    mounted() {
      this.maxDataTime = new Date().getTime()
      getUserInfo().then(res => {
        let {
          avatar,
          nickname,
          gender,
          birthday
        } = res.data
        this.uoloadImg = avatar
        this.queryParams.avatar = avatar
        this.queryParams.nickname = nickname
        this.queryParams.birthday = uni.$u.timeFormat(birthday, 'yyyy-mm-dd');
        if (gender) {
          for (let key in gender) {
            this.sexList.map(rs => {
              if (key == rs.type) {
                this.current = rs.id
              }
            })
          }
        }
      })
    },
    methods: {
      // 选择性别
      handlerSelectGender(item) {
        this.current = item.id
      },
      // 选择时间
      confirmTime(e) {
        this.queryParams.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
        this.timeShow = false
      },
      // 上传头像
      async handlerUploadImg() {
        try {
          const res = await uni.showActionSheet({
            itemList: ['拍照', '从相册选择'],
          });
          if (res.tapIndex === 0) {
            // 用户选择拍照
            this.takeOrChoosePhoto(0);
          } else if (res.tapIndex === 1) {
            // 用户选择从相册选择
            this.takeOrChoosePhoto(1);
          }
        } catch (error) {}
      },
      // 拍照
      takeOrChoosePhoto(idx) {
        uni.chooseImage({
          sourceType: idx == 0 ? ['camera'] : ['album'],
          count: 1,
          success: res => {
            const tempFilePaths = res.tempFilePaths;
            // 调用上传图片的方法
            this.uploadAvatar(tempFilePaths[0]);
          },
          fail: error => {
            console.error(error);
          },
        });
      },
      // 上传头像
      uploadAvatar(filePath) {
        this.uoloadImg = filePath
        uploadFile(filePath).then(res => {
          this.queryParams.avatar = JSON.parse(res.data).data.url;
        })
        this.$forceUpdate(); // 手动触发组件的重新渲染
      },

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

<style lang="scss" scoped>
  .ccontainer {
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 28rpx;

    .item-box {
      display: flex;
      padding: 20rpx;
      box-shadow: 0 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      align-items: center;

      .item-left {
        margin-right: 20rpx;
        width: 13%;
      }

      .item-right {
        width: 87%;

        .img {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }

        .sex-item {
          display: flex;

          .item {
            padding: 20rpx 30rpx;
            background-color: #F7F7F7;
            border-radius: 10rpx;
            text-align: center;
            font-size: 28rpx;
          }

          .act-sex {
            border: 2rpx solid #5992BB;
            background-color: #5992BB;
            color: #fff !important;
          }
        }
      }

      .right-time-box {
        display: flex;
        justify-content: space-between;
      }

      .flex-end {
        display: flex;
        justify-content: flex-end;
      }
    }

    .btn-box {
      margin-top: 100rpx;

      .btn {
        border-radius: 20rpx;
        padding: 10rpx;
        font-size: 28rpx;
        color: #fff;
        background: linear-gradient(to right, #e8cbc0, #636fa4);
        box-shadow: 0 5rpx 15rpx 0 rgba(99, 111, 164, 0.2);
      }
    }
  }

  .gray-color {
    color: #D2D5DB;
  }
</style>