ieplus-app/src/pagesSystem/pages/edit-student-profile/edit-student-profile.vue

<template>
  <ie-page bg-color="#F6F8FA" :safeAreaInsetBottom="false">
    <ie-navbar title="基本信息" />
    <view class="">
      <uv-form labelPosition="left" :model="form" labelWidth="70px" ref="formRef">
        <content-card :title="userStore.isStudent ? '考生信息' : '个人信息'">
          <uv-form-item :label="nameLabel" prop="name" borderBottom>
            <uv-input v-model="form.nickName" border="none" :readonly="!userStore.isStudent" placeholder="请输入姓名"
              placeholderClass="text-30" font-size="30rpx" :custom-style="customStyle">
            </uv-input>
          </uv-form-item>
          <uv-form-item v-if="userStore.isStudent" label="手机号码" prop="name" borderBottom>
            <uv-input v-model="form.phonenumber" border="none" placeholder="请输入手机号码" maxlength="11" type="number"
              placeholderClass="text-30" font-size="30rpx" :custom-style="customStyle" readonly>
            </uv-input>
            <text slot="right" class="text-30 text-primary" @click="handleBindPhone">换绑</text>
          </uv-form-item>
          <uv-form-item label="所在省份" prop="name" borderBottom>
            <uv-input v-model="form.location" border="none" placeholder="" placeholderClass="text-30" font-size="30rpx"
              :custom-style="customStyle" readonly>
            </uv-input>
            <ie-image slot="right" src="/pagesSystem/static/image/icon/icon-lock.png" custom-class="w-24 h-30"
              mode="aspectFill" />
          </uv-form-item>
          <uv-form-item label="考试类别" prop="name" borderBottom>
            <view class="flex-1 pl-[26px]">
              <ie-dict :dictName="EnumDictName.EXAM_TYPE" :dictValue="form.examType" />
            </view>
            <ie-image slot="right" src="/pagesSystem/static/image/icon/icon-lock.png" custom-class="w-24 h-30"
              mode="aspectFill" />
          </uv-form-item>
          <uv-form-item label="毕业年份" prop="name">
            <uv-input v-model="form.endYear" border="none" placeholder="" placeholderClass="text-30" font-size="30rpx"
              :custom-style="customStyle" readonly>
            </uv-input>
            <ie-image slot="right" src="/pagesSystem/static/image/icon/icon-lock.png" custom-class="w-24 h-30"
              mode="aspectFill" />
          </uv-form-item>
        </content-card>

        <content-card v-if="userStore.isStudent" title="文化素质">
          <uv-form-item label="语文" prop="name" borderBottom>
            <uv-input v-model="scores.chinese" border="none" placeholder="请输入" placeholderClass="text-30"
              font-size="30rpx" :custom-style="customStyle" :readonly="form.examType === 'OHS'">
            </uv-input>
            <ie-image v-if="form.examType === 'OHS'" slot="right" src="/pagesSystem/static/image/icon/icon-lock.png"
              custom-class="w-24 h-30" mode="aspectFill" />
          </uv-form-item>
          <uv-form-item label="数学" prop="name" borderBottom>
            <uv-input v-model="scores.mathematics" border="none" placeholder="请输入" placeholderClass="text-30"
              font-size="30rpx" :custom-style="customStyle" :readonly="form.examType === 'OHS'">
            </uv-input>
            <ie-image v-if="form.examType === 'OHS'" slot="right" src="/pagesSystem/static/image/icon/icon-lock.png"
              custom-class="w-24 h-30" mode="aspectFill" />
          </uv-form-item>
          <uv-form-item label="外语" prop="name" :borderBottom="form.examType !== 'VHS'">
            <uv-input v-model="scores.foreign" border="none" placeholder="请输入" placeholderClass="text-30"
              font-size="30rpx" :custom-style="customStyle" :readonly="form.examType === 'OHS'">
            </uv-input>
            <ie-image v-if="form.examType === 'OHS'" slot="right" src="/pagesSystem/static/image/icon/icon-lock.png"
              custom-class="w-24 h-30" mode="aspectFill" />
          </uv-form-item>
          <block v-if="['OHS', 'SVS'].includes(form.examType)">
            <uv-form-item label="物理" prop="name" borderBottom>
              <uv-input v-model="scores.physics" border="none" placeholder="请输入" placeholderClass="text-30"
                font-size="30rpx" :custom-style="customStyle" :readonly="form.examType === 'OHS'">
              </uv-input>
              <ie-image v-if="form.examType === 'OHS'" slot="right" src="/pagesSystem/static/image/icon/icon-lock.png"
                custom-class="w-24 h-30" mode="aspectFill" />
            </uv-form-item>
            <uv-form-item label="政治" prop="name">
              <uv-input v-model="scores.political" border="none" placeholder="请输入" placeholderClass="text-30"
                font-size="30rpx" :custom-style="customStyle" :readonly="form.examType === 'OHS'">
              </uv-input>
              <ie-image v-if="form.examType === 'OHS'" slot="right" src="/pagesSystem/static/image/icon/icon-lock.png"
                custom-class="w-24 h-30" mode="aspectFill" />
            </uv-form-item>
          </block>
        </content-card>

        <content-card v-if="userStore.isStudent && (form.examType === 'OHS' || form.examType === 'SVS')" title="职业技能成绩">
          <uv-form-item label="职业技能" prop="name">
            <uv-input v-model.number="scores.skill" border="none" placeholder="请输入" placeholderClass="text-30"
              font-size="30rpx" :custom-style="customStyle">
            </uv-input>
          </uv-form-item>
        </content-card>

        <content-card v-if="userStore.isLogin && userStore.isStudent" title="学校信息">
          <uv-form-item label="学校名称" prop="form.name" borderBottom>
            <uv-input v-model="form.schoolName" border="none" placeholder="" placeholderClass="text-30"
              font-size="30rpx" :custom-style="customStyle" readonly>
            </uv-input>
            <ie-image slot="right" src="/pagesSystem/static/image/icon/icon-lock.png" custom-class="w-24 h-30"
              mode="aspectFill" />
          </uv-form-item>
          <uv-form-item label="所在班级" prop="form.name">
            <ie-picker ref="pickerRef" v-model="form.classId" :list="classList" title="选择班级" placeholder="请选择所在班级"
              :custom-style="customStyle" key-label="name" key-value="classId"></ie-picker>
          </uv-form-item>
        </content-card>
      </uv-form>
    </view>
    <ie-safe-toolbar v-if="userStore.isStudent" :height="84" :shadow="false">
      <view class="px-30 py-16">
        <ie-button @click="handleSubmit">确认保存</ie-button>
      </view>
    </ie-safe-toolbar>

  </ie-page>
  <uv-popup ref="popupRef" title="换绑手机号" mode="bottom" :round="16">
    <view class="theme-ie popup-content pt-100 py-30 px-30">
      <ie-input v-model="phoneForm.phone" type="number" :maxlength="11" placeholder="请输入新手机号" />
      <ie-input custom-class="mt-28" type="number" :maxlength="6" v-model="phoneForm.code" placeholder="请输入验证码">
        <ie-sms :phone="phoneForm.phone" :sms-api-type="EnumSmsApiType.NO_TOKEN" :beforeSend="handleBeforeSend"
          @send="handleSendSuccess" />
      </ie-input>
      <view class="mt-80 mb-16">
        <ie-button @click="handleChangePhone">确认更换</ie-button>
      </view>
    </view>
  </uv-popup>
</template>

<script lang="ts" setup>
import ContentCard from '@/pagesSystem/components/content-card.vue';
import { updateUserInfo } from '@/api/modules/login';
import { useUserStore } from '@/store/userStore';
import { useSchool } from '@/composables/useSchool';
import { BindCardInfo, UserInfo } from '@/types/user';
import { EnumDictName, EnumSmsApiType } from '@/common/enum';
import { validatePhone } from '@/hooks/useValidation';
import { validateSms } from '@/api/modules/system';
const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);
const cardInfo = computed(() => userStore.card);
const { classList, loadClassData } = useSchool();
type SchoolInfo = {
  schoolName: string;
  classId: number | null;
  className: string;
  schoolId: number | null;
}
type UserProfile = Pick<UserInfo, 'nickName' | 'phonenumber' | 'location' | 'endYear' | 'examType'> & SchoolInfo;
const form = ref<UserProfile>({
  ...userInfo.value,
  schoolName: cardInfo.value?.schoolName || '',
  classId: cardInfo.value?.classId || null,
  className: cardInfo.value?.className || '',
  schoolId: cardInfo.value?.schoolId || null
});
const scores = ref({
  ...userInfo.value.scores
})
const nameLabel = computed(() => userStore.isStudent ? '学生姓名' : '姓名');
const customStyle = {
  paddingLeft: '26px'
};

const handleSubmit = async () => {
  uni.$ie.showLoading();
  const params = {
    ...userInfo.value,
    ...form.value,
    scores: scores.value,
  } as UserInfo;
  await updateUserInfo(params);
  await userStore.getUserInfo();
  uni.$ie.hideLoading();
  uni.$ie.showToast('保存成功');
}
const popupRef = ref();
const phoneForm = ref({
  phone: '',
  code: '',
  uuid: ''
});
const handleBeforeSend = () => {
  if (phoneForm.value.phone === userInfo.value.phonenumber) {
    uni.$ie.showToast('新手机号不能与旧手机号相同');
    return false;
  }
  return true;
}
const handleBindPhone = () => {
  popupRef.value.open();
}
const handleSendSuccess = (_phone: string, _code: string, _uuid: string) => {
  phoneForm.value.uuid = _uuid;
}
const handleChangePhone = async () => {
  if (phoneForm.value.phone.trim() === '') {
    uni.$ie.showToast('请输入新手机号');
    return;
  }
  if (phoneForm.value.code.trim() === '') {
    uni.$ie.showToast('请输入验证码');
    return;
  }
  if (phoneForm.value.phone === userInfo.value.phonenumber) {
    uni.$ie.showToast('新手机号不能与旧手机号相同');
    return;
  }
  uni.$ie.showLoading();
  const valid = await validateSms({
    code: phoneForm.value.code,
    uuid: phoneForm.value.uuid,
    mobile: phoneForm.value.phone
  });
  uni.$ie.hideLoading();
  if (!valid) {
    uni.$ie.showToast('请输入正确的验证码');
    return;
  }
  form.value.phonenumber = phoneForm.value.phone;
  popupRef.value.close();
}
onLoad(() => {
  loadClassData(cardInfo.value?.schoolId);
});
</script>

<style lang="scss" scoped></style>