jdt-user/src/components/UserModal.vue

<script lang="ts" setup>
import { computed, ref } from 'vue';
import Taro from '@tarojs/taro';
import headImg from '../static/def_avatar.png';
import logoImg from '../static/logo.jpg';
import { BASE_URL } from '@/utils/request';
import { getPhone, login } from '@/api/user';

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(['closeEdit', 'update:isShow']);

const userInfo = ref({
  nickname: '',
  avatar: '',
  phone: '',
});

const show = computed({
  get: (): boolean => props.isShow,
  set: val => {
    emits('update:isShow', val);
  },
});

const mp_is_new = ref(true);

const canvasStatus = ref(false);

const closeAttr = () => {
  emits('closeEdit');
};

const onChooseAvatar = e => {
  const { avatarUrl } = e.detail;
  Taro.uploadFile({
    url: `${BASE_URL}/upload`,
    filePath: avatarUrl,
    name: 'file',
    success: function (res) {
      const data = JSON.parse(res.data);
      userInfo.value.avatar = data.data.data;
    },
  });
};

const uploadPic = () => {
  canvasStatus.value = true;
};

const getPhoneNumber = async (e: any) => {
  Taro.showLoading({
    title: '授权手机号中',
    mask: true,
  });
  const { code } = e.detail;
  const res = await getPhone({
    code: code,
  });
  userInfo.value.phone = res.data.phone;
  Taro.hideLoading();
};

const formSubmit = async (e: any) => {
  if (!userInfo.value.avatar)
    return Taro.showToast({
      title: '请上传头像',
      icon: 'none',
    });
  userInfo.value.nickname = e.detail.value.nickname;
  if (!userInfo.value.nickname)
    return Taro.showToast({
      title: '请输入昵称',
      icon: 'none',
    });
  if (!userInfo.value.phone)
    return Taro.showToast({
      title: '请授权手机号码',
      icon: 'none',
    });
  const res = await login({
    Code: Taro.getStorageSync('wx_code'),
    NickName: userInfo.value.nickname,
    AvatarUrl: userInfo.value.avatar,
    Phone: userInfo.value.phone,
    Referee: Taro.getStorageSync('bind_id') || '',
  });
  emits('closeEdit');
  Taro.showToast({
    title: res.msg,
    icon: 'success',
    duration: 2000,
  });
  Taro.setStorageSync('token', res.data.token);
  setTimeout(() => {
    Taro.removeStorageSync('wx_code');
    Taro.removeStorageSync('bind_id');
    Taro.switchTab({
      url: '/pages/user/index',
    });
  }, 2000);
};
</script>

<template>
  <view>
    <nut-popup
      position="bottom"
      safe-area-inset-bottom
      closeable
      :style="{ padding: '20px 10px' }"
      v-model:visible="show"
      @close="closeAttr"
      :close-on-click-overlay="false">
      <view class="mp-data">
        <image class="image" :src="logoImg"></image>
        <text class="mp-name">捷兑通 申请</text>
      </view>
      <!-- <view class="trip-msg">
        <view class="title"> 获取您的昵称、头像 </view>
        <view class="trip"> 提供具有辨识度的用户中心界面 </view>
      </view> -->
      <form @submit="formSubmit">
        <view class="edit">
          <view class="avatar edit-box">
            <view class="left">
              <view class="head">头像</view>
              <view
                class="avatar-box"
                v-if="!mp_is_new"
                @click.stop="uploadPic">
                <image
                  :src="userInfo.avatar || headImg"
                  mode="aspectFill"></image>
              </view>
              <button
                v-else
                class="avatar-box"
                open-type="chooseAvatar"
                @chooseavatar="onChooseAvatar">
                <image
                  :src="userInfo.avatar || headImg"
                  mode="aspectFill"></image>
              </button>
            </view>
          </view>
          <view class="nickname edit-box">
            <view class="left">
              <view class="head">昵称</view>
              <view class="input">
                <input
                  type="nickname"
                  placeholder-class="pl-sty"
                  placeholder="请输入昵称"
                  name="nickname"
                  :maxlength="16"
                  :value="userInfo.nickname" />
              </view>
            </view>
          </view>
          <view class="nickname edit-box">
            <view class="left">
              <view class="head">号码</view>
              <view class="input">
                <button
                  open-type="getPhoneNumber"
                  @getphonenumber="getPhoneNumber">
                  {{ !userInfo.phone ? '请授权手机号' : '授权成功' }}
                </button>
              </view>
            </view>
          </view>
        </view>

        <view class="bottom">
          <nut-button formType="submit" block type="success" color="#07C160">
            保存
          </nut-button>
        </view>
      </form>
    </nut-popup>
  </view>
</template>

<style lang="scss">
.mp-data {
  display: flex;
  align-items: center;
  margin-bottom: 30px;

  .mp-name {
    font-size: 28px;
    font-weight: bold;
    color: #000000;
  }

  .image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 16px;
  }
}

.trip-msg {
  padding-bottom: 32px;
  border-bottom: 1px solid #f5f5f5;

  .title {
    font-size: 30px;
    font-weight: bold;
    color: #000;
    margin-bottom: 6px;
  }

  .trip {
    font-size: 26px;
    color: #777777;
  }
}

.edit {
  // border-bottom: 1px solid #f5f5f5;

  .avatar {
    border-bottom: 1px solid #f5f5f5;
  }

  .nickname {
    .input {
      width: 100%;
    }
    border-bottom: 1px solid #f5f5f5;
  }

  input {
    height: 80px;
  }
  button {
    flex: 1;
    display: flex;
    align-items: center;
    background: none;
    padding: 0;
    height: 50px;
    font-size: 28px;
    color: #838383;

    &::after {
      border: none;
    }
  }
}

.edit-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30px;
  padding: 22px 0;

  .left {
    display: flex;
    align-items: center;
    flex: 1;

    .head {
      color: rgba(0, 0, 0, 0.9);
      white-space: nowrap;
      margin-right: 60px;
    }

    .avatar-box {
      image {
        width: 100px;
        height: 100%;
        border-radius: 6px;
      }
    }

    button {
      flex: 1;
      display: flex;
      align-items: center;
      background: none;
      height: 100px;

      &::after {
        border: none;
      }
    }
  }
}

.icon-xiangyou {
  color: #cfcfcf;
}

.bottom {
  margin-top: 20px;
  padding: 0 150px;

  .nut-button {
    border-radius: 10px;
  }
}
</style>