volunteer-4/src/login-sub/inviteCode.vue

<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '基本信息',
  },
}
</route>

<template>
  <view class="flex flex-col bg-[#f8f8f8] h-screen">
    <view class="flex-1 pb-safe">
      <view class="mx-[32rpx] mt-[24rpx] bg-[#fff] rounded-[20rpx]">
        <form>
          <view
            class="flex items-center justify-between h-[100rpx] mx-[24rpx] border-b-[2rpx] border-b-solid border-[#F3F3F3]"
          >
            <view class="flex items-center">
              <view class="text-[28rpx] text-[#000] font-[500]">姓名</view>
              <view class="text-[#FF5151] font-[500] leading-[1] h-[18rpx] ml-[8rpx]">*</view>
            </view>
            <view>
              <input
                v-model="formData.name"
                placeholder="请输入姓名"
                confirm-type="done"
                placeholder-style="color:#BABABA;font-size:28rpx;text-align:right;"
                class="text-right w-[140rpx]"
              />
            </view>
          </view>

          <view
            class="flex items-center justify-between h-[100rpx] mx-[24rpx] border-b-[2rpx] border-b-solid border-[#F3F3F3]"
          >
            <view class="flex items-center">
              <view class="text-[28rpx] text-[#000] font-[500]">性别</view>
              <view class="text-[#FF5151] font-[500] leading-[1] h-[18rpx] ml-[8rpx]">*</view>
            </view>
            <view>
              <RadioGroup v-model="formData.gender" class="custom-radio-group">
                <Radio :name="1" class="custom-radio">男</Radio>
                <Radio :name="2" class="custom-radio">女</Radio>
              </RadioGroup>
            </view>
          </view>

          <view
            class="flex items-center justify-between h-[100rpx] mx-[24rpx] border-b-[2rpx] border-b-solid border-[#F3F3F3]"
          >
            <view class="flex items-center">
              <view class="text-[28rpx] text-[#000] font-[500]">手机号</view>
              <view class="text-[#FF5151] font-[500] leading-[1] h-[18rpx] ml-[8rpx]">*</view>
            </view>
            <view class="text-[#333] text-[28rpx]">{{ userStore.userInfo.mobile }}</view>
          </view>

          <view class="flex items-center justify-between h-[100rpx] mx-[24rpx]">
            <view class="flex items-center">
              <view class="text-[28rpx] text-[#000] font-[500]">就读学校</view>
            </view>
            <view class="">
              <input
                v-model="formData.school"
                placeholder="请输入您的就读学校"
                confirm-type="done"
                placeholder-style="color:#BABABA;font-size:28rpx;text-align:right;"
                class="text-right w-[252rpx]"
              />
            </view>
          </view>
        </form>
      </view>

      <view class="p-[24rpx] bg-[#fff] mx-[32rpx] mt-[24rpx] rounded-[20rpx]">
        <input
          v-model="formData.invitedCode"
          placeholder="邀请码"
          confirm-type="done"
          :maxlength="4"
          placeholder-style="color:#999;font-size:28rpx;"
          class="text-center h-[86rpx] bg-[#F5F5F5] rounded-[16rpx]"
          @input="handleInviteCode"
        />

        <view class="text-[#666] text-[24rpx] text-center mt-[10rpx]">
          输入邀请码，获取免费AI报告解读
        </view>
      </view>

      <button
        class="w-[560rpx]! h-[88rpx]! rounded-[44rpx] font-500 text-[32rpx] text-white! flex items-center justify-center mt-[80rpx]"
        :class="'bg-[#1580FF]!'"
        @click="handleSubmit"
      >
        提交
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import Radio from './components/radio-group/Radio.vue'
import RadioGroup from './components/radio-group/RadioGroup.vue'
import { useUserStore } from '@/store'
import { savePerfectInfo, verifyInviteCode } from '@/service/index/api'

const userStore = useUserStore()

const formData = ref({
  name: userStore.userInfo.nickname,
  gender: userStore.userInfo.sex || 1,
  school: userStore.userInfo.estimatedAchievement.schoolName,
  invitedCode: userStore.userInfo.estimatedAchievement.vipCode,
})

const invitedCodeFlag = ref(false)

const handleSubmit = () => {
  if (!formData.value.name) {
    uni.showToast({
      title: '请输入昵称',
      icon: 'error',
      mask: true,
    })
    return
  }

  savePerfectInfo({
    nickName: formData.value.name,
    schoolName: formData.value.school,
    sex: formData.value.gender,
    inviteCode: formData.value.invitedCode,
  }).then((resp) => {
    if (resp.code === 200) {
      userStore.setEstimatedAchievement({ init: true })
      uni.switchTab({
        url: '/pages/home/index/index',
      })
    } else {
      uni.showToast({
        title: resp.message,
        icon: 'error',
        mask: true,
      })
    }
  })
}

const handleInviteCode = () => {
  if (formData.value.invitedCode.length === 4) {
    verifyInviteCode({ code: formData.value.invitedCode }).then((resp) => {
      if (resp.code === 200) {
        invitedCodeFlag.value = resp.result as boolean
      }
    })
  } else {
    invitedCodeFlag.value = false
  }
}
const handleLogout = () => {
  userStore.clearUserInfo()
  uni.switchTab({
    url: '/pages/home/index/index',
  })
}

const instance = getCurrentInstance()
onUnload(() => {
  if (!userStore.userInfo.estimatedAchievement.init) {
    handleLogout()
  }
}, instance)
</script>

<style lang="scss" scoped>
:deep(.custom-radio-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  background-color: #fff;
  justify-content: center;
}

:deep(.custom-radio) {
  width: 108rpx;
  height: 60rpx;
  background-color: #fff;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #ccc;
  color: #999;

  .radio-wrapper {
    padding: 0;
    width: 100%;
    height: 100%;
  }

  .radio {
    display: none;
  }

  .radio-label {
    margin-left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .radio-label--active {
    background-color: rgba(21, 128, 255, 0.1) !important;
    border-color: #1580ff !important;
    border: 2rpx solid #1580ff;
    border-radius: 32rpx;
  }
}
</style>