ieplus-app/src/pagesSystem/pages/edit-profile/edit-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="个人信息">
          <uv-form-item label="姓名" 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="/static/image/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] text-30">
              <ie-dict :dictName="EnumDictName.EXAM_TYPE" :dictValue="form.examType" />
            </view>
            <ie-image slot="right" src="/static/image/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="/static/image/icon-lock.png" custom-class="w-24 h-30" mode="aspectFill" />
          </uv-form-item>
        </content-card>

        <content-card title="文化素质">
          <uv-form-item label="语文" prop="name" borderBottom>
            <uv-input v-model="scores.chinese" border="none"
              :placeholder="form.examType === EnumExamType.OHS ? '' : '请输入'" placeholderClass="text-30"
              font-size="30rpx" :custom-style="customStyle" :readonly="form.examType === EnumExamType.OHS">
            </uv-input>
            <ie-image v-if="form.examType === EnumExamType.OHS" slot="right" src="/static/image/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="form.examType === EnumExamType.OHS ? '' : '请输入'" placeholderClass="text-30"
              font-size="30rpx" :custom-style="customStyle" :readonly="form.examType === EnumExamType.OHS">
            </uv-input>
            <ie-image v-if="form.examType === EnumExamType.OHS" slot="right" src="/static/image/icon-lock.png"
              custom-class="w-24 h-30" mode="aspectFill" />
          </uv-form-item>
          <uv-form-item label="外语" prop="name" :borderBottom="form.examType === EnumExamType.OHS">
            <uv-input v-model="scores.foreign" border="none"
              :placeholder="form.examType === EnumExamType.OHS ? '' : '请输入'" placeholderClass="text-30"
              font-size="30rpx" :custom-style="customStyle" :readonly="form.examType === EnumExamType.OHS">
            </uv-input>
            <ie-image v-if="form.examType === EnumExamType.OHS" slot="right" src="/static/image/icon-lock.png"
              custom-class="w-24 h-30" mode="aspectFill" />
          </uv-form-item>
          <block v-if="[EnumExamType.OHS].includes(form.examType)">
            <uv-form-item label="物理" prop="name" borderBottom>
              <uv-input v-model="scores.physics" border="none"
                :placeholder="form.examType === EnumExamType.OHS ? '' : '请输入'" placeholderClass="text-30"
                font-size="30rpx" :custom-style="customStyle" :readonly="form.examType === EnumExamType.OHS">
              </uv-input>
              <ie-image v-if="form.examType === EnumExamType.OHS" slot="right" src="/static/image/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="form.examType === EnumExamType.OHS ? '' : '请输入'" placeholderClass="text-30"
                font-size="30rpx" :custom-style="customStyle" :readonly="form.examType === EnumExamType.OHS">
              </uv-input>
              <ie-image v-if="form.examType === EnumExamType.OHS" slot="right" src="/static/image/icon-lock.png"
                custom-class="w-24 h-30" mode="aspectFill" />
            </uv-form-item>
          </block>
        </content-card>

        <content-card v-if="([EnumExamType.OHS, EnumExamType.SVS].includes(form.examType))" 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>

        <template v-if="userStore.isStudent">
          <content-card v-if="userStore.isVip" 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="/static/image/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>
        </template>
        <content-card v-else title="学校信息">
          <uv-form-item label="学校名称" prop="form.campusName" borderBottom>
            <uv-input v-model="form.campusName" border="none" placeholder="" placeholderClass="text-30"
              font-size="30rpx" :custom-style="customStyle" readonly>
            </uv-input>
            <ie-image slot="right" src="/static/image/icon-lock.png" custom-class="w-24 h-30" mode="aspectFill" />
          </uv-form-item>
          <uv-form-item label="所在班级" prop="form.campusClassName">
            <uv-input v-model="form.campusClassName" border="none" placeholder="" placeholderClass="text-30"
              font-size="30rpx" :custom-style="customStyle" readonly>
            </uv-input>
            <ie-image slot="right" src="/static/image/icon-lock.png" custom-class="w-24 h-30" mode="aspectFill" />
          </uv-form-item>
        </content-card>
      </uv-form>
    </view>
    <ie-safe-toolbar :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, EnumExamType } 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();

const form = ref<UserInfo>({
  ...userInfo.value
});
if (userStore.isStudent) {
  form.value.schoolName = cardInfo.value?.schoolName || '';
  form.value.classId = cardInfo.value?.classId || undefined;
  form.value.schoolClassName = cardInfo.value?.className || '';
  form.value.schoolId = cardInfo.value?.schoolId || undefined
}

const scores = ref({
  ...userInfo.value.scores
})
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>