ieplus-app/src/pagesSystem/pages/bind-teacher-profile/bind-teacher-profile.vue

<template>
  <ie-page bg-color="#F6F8FA" :safeAreaInsetBottom="false">
    <ie-navbar title="完善信息" custom-back @left-click="handleBack" />
    <uv-form labelPosition="left" :model="examTypeForm" labelWidth="70px" ref="formRef">
      <content-card title="个人信息">
        <uv-form-item label="姓名" prop="name" borderBottom required>
          <uv-input v-model="form.nickName" border="none" placeholder="请输入姓名" placeholderClass="text-30"
            font-size="30rpx" :custom-style="customStyle">
          </uv-input>
        </uv-form-item>
        <uv-form-item label="所在省份" prop="location" borderBottom required>
          <ie-picker ref="pickerRef" v-model="examTypeForm.location" :list="provinceList"
            :placeholder="pickerPlaceholder" :custom-style="customStyle" key-label="areaName" key-value="shortName"
            :disabled="disabledEdit">
            <template v-if="disabledEdit" #right>
              <ie-image src="/static/image/icon-lock.png" custom-class="w-24 h-30" mode="aspectFill" />
            </template></ie-picker>
        </uv-form-item>
        <uv-form-item label="考生类别" prop="examType" borderBottom required>
          <ie-picker ref="pickerRef" v-model="examTypeForm.examType" :list="examTypeList"
            :disabled="!examTypeForm.location || disabledEdit" :placeholder="pickerPlaceholder"
            :custom-style="customStyle" key-label="dictLabel" key-value="dictValue" @change="handleExamTypeChange">
            <template v-if="disabledEdit" #right>
              <ie-image src="/static/image/icon-lock.png" custom-class="w-24 h-30" mode="aspectFill" />
            </template>
          </ie-picker>
        </uv-form-item>
        <uv-form-item v-if="examTypeForm.examType === 'VHS'" label="专业类别" prop="majorType" borderBottom required>
          <ie-picker ref="pickerRef" v-model="examTypeForm.majorType" :list="examMajorList"
            :disabled="!examTypeForm.examType || disabledEdit" :placeholder="pickerPlaceholder"
            :custom-style="customStyle" key-label="dictLabel" key-value="dictValue">
            <template v-if="disabledEdit" #right>
              <ie-image src="/static/image/icon-lock.png" custom-class="w-24 h-30" mode="aspectFill" />
            </template></ie-picker>
        </uv-form-item>
        <uv-form-item label="单招年份" prop="year" required>
          <ie-picker ref="pickerRef" v-model="examTypeForm.endYear" :list="endYearList"
            :disabled="!examTypeForm.examType || disabledEdit" :placeholder="pickerPlaceholder"
            :custom-style="customStyle" key-label="dictLabel" key-value="dictValue">
            <template v-if="disabledEdit" #right>
              <ie-image src="/static/image/icon-lock.png" custom-class="w-24 h-30" mode="aspectFill" />
            </template></ie-picker>
        </uv-form-item>
      </content-card>

      <content-card v-if="showCulture" title="文化素质">
        <uv-form-item label="语文" prop="form.scores.chinese" borderBottom :required="isScoreRequired">
          <uv-input v-model.number="scoresForm.chinese" border="none" type="number" :placeholder="inputPlaceholder"
            font-size="30rpx" :custom-style="customStyle" :readonly="disabledEdit">
          </uv-input>
        </uv-form-item>
        <uv-form-item label="数学" prop="form.score.mathematics" borderBottom :required="isScoreRequired">
          <uv-input v-model.number="scoresForm.mathematics" border="none" type="number" :placeholder="inputPlaceholder"
            font-size="30rpx" :custom-style="customStyle" :readonly="disabledEdit">
          </uv-input>
          <ie-image v-if="disabledEdit" 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.scores.foreign" borderBottom :required="isScoreRequired">
          <uv-input v-model.number="scoresForm.foreign" border="none" type="number" :placeholder="inputPlaceholder"
            font-size="30rpx" :custom-style="customStyle" :readonly="disabledEdit">
          </uv-input>
          <ie-image v-if="disabledEdit" 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.scores.physics" borderBottom :required="isScoreRequired">
          <uv-input v-model.number="scoresForm.physics" border="none" type="number" :placeholder="inputPlaceholder"
            font-size="30rpx" :custom-style="customStyle" :readonly="disabledEdit">
          </uv-input>
          <ie-image v-if="disabledEdit" 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.scores.political" :required="isScoreRequired">
          <uv-input v-model.number="scoresForm.political" border="none" type="number" :placeholder="inputPlaceholder"
            font-size="30rpx" :custom-style="customStyle" :readonly="disabledEdit">
          </uv-input>
          <ie-image v-if="disabledEdit" slot="right" src="/static/image/icon-lock.png" custom-class="w-24 h-30"
            mode="aspectFill" />
        </uv-form-item>
      </content-card>

      <content-card v-if="showSchoolInfo" 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>
    <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>
</template>

<script lang="ts" setup>
import ContentCard from '@/pagesSystem/components/content-card.vue';
import { useExamType } from '@/composables/useExamType';
import { updateUserInfo } from '@/api/modules/login';
import { useUserStore } from '@/store/userStore';
import { ClassItem, Scores, UserInfo } from '@/types/user';
import { useTransferPage } from '@/hooks/useTransferPage';
import { EnumExamType, EnumUserType } from '@/common/enum';
import { getClassList } from '@/api/modules/user';
const { prevData, transferTo, transferBack } = useTransferPage();
const { form: examTypeForm, examTypeList, examMajorList, provinceList, endYearList } = useExamType();
const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);

const classList = ref<ClassItem[]>([]);
const customStyle = {
  paddingLeft: '26px'
};
const inputPlaceholder = computed(() => {
  return true ? '请输入(提交后不可修改)' : '请输入';
});
const pickerPlaceholder = computed(() => {
  return true ? '请选择(提交后不可修改)' : '请选择';
});

const form = ref<UserInfo>({
  ...userInfo.value,
});
const scoresForm = ref<Scores>({})
examTypeForm.value.location = form.value.location;
examTypeForm.value.examType = form.value.examType;
examTypeForm.value.endYear = form.value.endYear;
examTypeForm.value.majorType = form.value.majorType;
scoresForm.value = form.value.scores || {}

const disabledEdit = computed(() => {
  return !!userInfo.value.location;
})
// 普高-文化成绩必填，保存后锁定不可修改
// 中职务-文化成绩不填，保存后可修改
const isScoreRequired = computed(() => examTypeForm.value.examType === EnumExamType.OHS);
const showCulture = computed(() => {
  return examTypeForm.value.examType === EnumExamType.OHS;
});
// 代理机构不显示学校
const showSchoolInfo = computed(() => userStore.userInfo.userType !== EnumUserType.AGENT);

const handleBack = () => {
  if (disabledEdit.value) {
    transferBack();
    return;
  }
  uni.$ie.showToast('请先完善信息');
};
const loginValidate = () => {
  form.value = {
    ...form.value,
    ...examTypeForm.value,
  }
  const { nickName, location, examType, endYear } = form.value;
  if (!nickName || nickName.trim() === '') {
    uni.$ie.showToast('请输入姓名');
    return false;
  }
  if (!location || location.trim() === '') {
    uni.$ie.showToast('请选择省份');
    return false;
  }
  if (!examType || examType.trim() === '') {
    uni.$ie.showToast('请选择考生类别');
    return false;
  }
  if (examType === 'VHS') {
    if (!form.value.majorType) {
      uni.$ie.showToast('请选择专业类别');
      return false;
    }
  }
  if (!endYear) {
    uni.$ie.showToast('请选择毕业年份');
    return false;
  }
  if (showCulture.value) {
    if (isScoreRequired.value) {
      if (!scoresForm.value.chinese) {
        uni.$ie.showToast('请输入语文成绩');
        return false;
      }
    }
    if (scoresForm.value?.chinese && (scoresForm.value.chinese < 0 || scoresForm.value.chinese > 100)) {
      uni.$ie.showToast('请输入正确的语文成绩');
      return false;
    }
    // 
    if (isScoreRequired.value) {
      if (!scoresForm.value.mathematics) {
        uni.$ie.showToast('请输入数学成绩');
        return false;
      }
    }
    if (scoresForm.value?.mathematics && (scoresForm.value.mathematics < 0 || scoresForm.value.mathematics > 100)) {
      uni.$ie.showToast('请输入正确的数学成绩');
      return false;
    }
    //
    if (isScoreRequired.value) {
      if (!scoresForm.value.foreign) {
        uni.$ie.showToast('请输入外语成绩');
        return false;
      }
    }
    if (scoresForm.value?.foreign && (scoresForm.value.foreign < 0 || scoresForm.value.foreign > 100)) {
      uni.$ie.showToast('请输入正确的外语成绩');
      return false;
    }
    // 
    if (isScoreRequired.value) {
      if (!scoresForm.value.physics) {
        uni.$ie.showToast('请输入物理成绩');
        return false;
      }
    }
    if (scoresForm.value?.physics && (scoresForm.value.physics < 0 || scoresForm.value.physics > 100)) {
      uni.$ie.showToast('请输入正确的物理成绩');
      return false;
    }
    //
    if (isScoreRequired.value) {
      if (!scoresForm.value.political) {
        uni.$ie.showToast('请输入政治成绩');
        return false;
      }
    }
    if (scoresForm.value?.political && (scoresForm.value.political < 0 || scoresForm.value.political > 100)) {
      uni.$ie.showToast('请输入正确的政治成绩');
      return false;
    }
  }
  return true;
}

const handleExamTypeChange = () => {
  scoresForm.value = {};
}

const handleSubmit = async () => {
  console.log('handleSubmit', examTypeForm.value)
  if (!loginValidate()) {
    return;
  }
  const params = {
    ...userStore.userInfo,
    ...form.value,
    scores: scoresForm.value,
  } as UserInfo;
  console.log(params)
  uni.$ie.showLoading();
  await updateUserInfo(params);
  await userStore.getUserInfo();
  uni.$ie.hideLoading();
  uni.$ie.showToast('保存成功');
  setTimeout(() => {
    transferTo('/pagesMain/pages/index/index', {
      type: 'reLaunch'
    });
  }, 800);
};

</script>

<style></style>