suke-mp/src/pages/mine/subs/profile/index.vue

<template>
  <view class='content'>
    <view class='top-card-view'>
      <image class='bg-image' :src='assetsUrl("test_bg.png")' />
      <image class='avatar-image' :src='userInfo.image' />
      <text>{{ userInfo.nickName }}</text>
      <text>会员卡</text>
    </view>

    <view class='basic-info-view c-flex-column'>
      <view class='c-flex-row'>
        <text>头像</text>
        <view class='avatar-view'>
          <image class='avatar-image' :src='userInfo.image' />
          <button class='avatar-btn' open-type='chooseAvatar' @chooseavatar='chooseAvatar' />
        </view>
      </view>

      <view class='c-flex-row'>
        <text class='nickname'>姓名</text>
        <input placeholder='请输入姓名' type='nickname' v-model='userInfo.nickName' @input='bindNickname' />
      </view>

      <view class='divider' />
      <view class='c-flex-row'>
        <text>手机号</text>
        <input placeholder='请输入手机号' v-model='userInfo.telephone' @input='bindTelephone' />
      </view>

      <view class='divider' />
      <view class='c-flex-row'>
        <text>性别</text>
        <view class='c-flex-row' @click.stop='changeGender(0)'>
          <image class='gender-image'
                 :src='assetsUrl(currentGender==0?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
          <text class='gender-text'>男</text>
        </view>
        <view class='c-flex-row' @click.stop='changeGender(1)'>
          <image class='gender-image'
                 :src='assetsUrl(currentGender==1?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
          <text class='gender-text'>女</text>
        </view>
      </view>

      <view class='divider' />
      <view class='c-flex-row'>
        <text>生日</text>
        <picker mode='date' @change='changeDate'>
          <text>{{ userInfo.birthday || '请选择生日' }}</text>
        </picker>
      </view>
    </view>

    <button class='primary-button' @click.stop='save'>保存</button>
  </view>
</template>

<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
import { useUserStore } from '@/store';
import { showToast } from '@/utils';

const store = useUserStore();
const { userInfo } = storeToRefs(store);

const currentGender = ref<number>(0);

onLoad(() => {
  store.getProfile();
});

const chooseAvatar = (e: any) => {
  uni.showLoading();
  uni.uploadFile({
    url: import.meta.env.VITE_APP_BASE_API + '/wc/wechat/uploadImage',
    filePath: e.detail.avatarUrl,
    name: 'fileName',
    header: {
      'Content-Type': 'multipart/form-data'
    },
    success: (res: any) => {
      userInfo.value.image = JSON.parse(res.data).data;
    },
    error: (err: any) => {
      showToast('上传失败');
    },
    complete() {
      uni.hideLoading();
    }
  });
};

const bindNickname = (e: any) => {
  userInfo.value.nickName = e.detail.value;
};

const bindTelephone = (e: any) => {
  userInfo.value.telephone = e.detail.value;
};

const changeGender = (index: number) => {
  currentGender.value = index;
  userInfo.value.gender = index;
};

const changeDate = (e: any) => {
  userInfo.value.birthday = e.detail.value;
};

const save = async () => {
  // const registerForm = {
  //   unionId: userInfo.value.unionId,
  //   openId: userInfo.value.openId,
  //   maOpenId: userInfo.value.maOpenId,
  //   image: userInfo.value.image,
  //   nickName: userInfo.value.nickName,
  //   telephone: userInfo.value.telephone,
  //   birthday: userInfo.value.birthday,
  //   gender: userInfo.value.gender,
  //   companyId: userInfo.value.companyId,
  //   creatorId: userInfo.value.creatorId
  // };
  // console.log('--------_>>>userInfo.value ', userInfo.value);
  // const result = await store.userRegister(registerForm);
  // console.log('--------->>>', result);

  store.setUserInfo(userInfo.value)
};

</script>

<style lang='scss' scoped>
.top-card-view {
  display: flex;
  height: 338rpx;
  position: relative;
  margin: 30rpx;

  .bg-image {
    width: 100%;
    height: 100%;
    border-radius: 30rpx;
    position: absolute;
  }

  .avatar-image {
    width: 95rpx;
    height: 95rpx;
    margin-left: 36rpx;
    margin-top: 60rpx;
    background: #FFFFFF;
    border: 1rpx solid #707070;
    position: relative;
    border-radius: 50%;
  }

  text:nth-of-type(1) {
    font-size: 30rpx;
    font-weight: 800;
    color: #FFFFFF;
    position: absolute;
    top: 64rpx;
    left: 158rpx;
  }

  text:nth-of-type(2) {
    font-size: 24rpx;
    font-weight: 400;
    color: #FFFFFF;
    position: absolute;
    top: 116rpx;
    left: 158rpx;
  }
}

.basic-info-view {
  margin: 0 30rpx 30rpx 30rpx;

  .avatar-view {
    display: flex;
    position: relative;

    .avatar-image {
      width: 110rpx;
      height: 110rpx;
      border-radius: 50%;
    }

    .avatar-btn {
      @extend .avatar-image;
      position: absolute;
      border: none;
      background: #00000000;
    }
  }

  input {
    font-size: 30rpx;
    font-weight: 400;
    color: #333333;
  }

  view:not(.divider):nth-of-type(n+1) {
    padding: 0 20rpx;
    height: 120rpx;

    .gender-image {
      width: 37rpx;
      height: 37rpx;
    }

    .gender-text {
      width: 80rpx;
      color: #333333;
      font-size: 30rpx;
      margin-left: 10rpx;
    }

    text:not(.gender-text):nth-of-type(1) {
      font-size: 30rpx;
      width: 120rpx;
      font-weight: 400;
      color: #7E7E7E;
    }

    .nickname:before {
      content: '*';
      color: #F32B2B;
    }
  }
}
</style>