chelvc-custom/src/PageMine/personInfo/index.vue

<template>
  <view class="client-personInfo">
    <page-navbar bgColor="#fff" title="个人信息"></page-navbar>
    <view class="direction u-m-b-60">
      <u-avatar :src="avatar" size="108" />
      <view class="u-m-t-10 text-666">点击更换头像</view>
    </view>
    <base-card padding="0 24rpx">
      <u-cell-group :border="false">
        <u-cell title="昵称" isLink>
          <view slot="value" class="f-s-26" style="color: #616570">yizhiyang</view>
        </u-cell>
        <u-cell title="性别" isLink>
          <view slot="value" class="f-s-26" style="color: #616570">男</view>
        </u-cell>
        <u-cell title="生日" isLink>
          <view slot="value" class="f-s-26" style="color: #616570">男</view>
        </u-cell>
        <u-cell title="我的推广码" isLink :border="false" @click="handlePromotionCode" />
      </u-cell-group>
    </base-card>

    <view class="person-bottom">
      <base-button text="保存" :buttonStyle="customStyle"></base-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,
    };
  },
  computed: {
    customStyleOut() {
      return {
        fontSize: '30rpx',
      };
    },
  },
  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);
      });
    },
    handlePromotionCode() {
      uni.switchTab({
        url: '/pages/extend/index',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.client-personInfo {
  padding: 60rpx 32rpx 0 32rpx;

  .person-bottom {
    width: 90%;
    position: fixed;
    bottom: 10%;
  }

  ::v-deep .u-cell__body {
    padding: 20rpx 0;
    color: #0c1223;
    font-size: 34rpx;
  }
  ::v-deep .u-cell__title-text {
    line-height: 65rpx !important;
  }
}
</style>