aftermarket-h5/src/views/airshow/index.vue

<template>
  <div class="mcSubmit">
    <div style="text-align: center; font-size: 20px">第十五届航展报名申请</div>
    <van-form @submit="onSubmit" ref="submits" style="background: #fff">
      <van-cell-group style="margin: none" inset>
        <div class="myTitle required"><span class="number">01</span>姓名</div>
        <van-field
          class="zdycell"
          v-model="formData.name"
          label-align="top"
          name="姓名"
          maxlength="15"
          label=""
          placeholder="请填写您的姓名"
          :rules="[{ required: true, message: '请填写您的姓名' }]"
        />
        <div class="myTitle required"><span class="number">02</span>证件类型</div>
        <van-field
          v-model="setObjId.type"
          class="zdycell"
          is-link
          readonly
          name="picker"
          label=""
          :placeholder="t('feedback.setselcet')"
          :rules="[{ required: true, message: '请选择证件类型' }]"
          @click="showPicker.type = true"
        />
        <van-popup v-model:show="showPicker.type" position="bottom">
          <van-picker
            :columns="columns.industryOptionId"
            @confirm="(val) => onConfirm(val, 'type')"
            @cancel="showPicker.type = false"
          />
        </van-popup>

        <div class="myTitle required"><span class="number">03</span>证件号码</div>
        <van-field
          class="zdycell"
          v-model="formData.num"
          label-align="top"
          name="姓名"
          maxlength="15"
          label=""
          placeholder="请输入证件号码"
          :rules="[{ required: true, message: '请输入证件号码' }]"
        />
        <div class="myTitle required"><span class="number">04</span>性别</div>
        <van-field name="radio" label="" :rules="[{ required: true, message: '请选择性别' }]">
          <template #input>
            <van-radio-group v-model="formData.gender" direction="horizontal">
              <van-radio name="男">男性</van-radio>
              <van-radio name="女">女性</van-radio>
              <!-- <van-radio name="3">其他</van-radio> -->
            </van-radio-group>
          </template>
        </van-field>
        <div class="myTitle required"><span class="number">05</span>国籍</div>
        <van-field
          class="zdycell"
          v-model="formData.nationality"
          label-align="top"
          name="国籍"
          maxlength="15"
          label=""
          placeholder="请填写您的国籍"
          :rules="[{ required: true, message: '请填写您的国籍' }]"
        />
        <!-- <van-field
          v-model="formData.nationality"
          is-link
          class="zdycell"
          readonly
          name="picker"
          label=""
          :placeholder="t('feedback.setselcet')"
          @click="showPicker.nationality = true"
          :rules="[{ required: true, message: '请选择您的国籍' }]"
        /> -->
        <div class="myTitle required"><span class="number">06</span>单位名称</div>
        <van-field
          class="zdycell"
          v-model="formData.unit"
          label-align="top"
          name="姓名"
          maxlength="15"
          label=""
          placeholder="请填写单位名称"
          :rules="[{ required: true, message: '请填写单位名称' }]"
        />
        <div class="myTitle required"><span class="number">07</span>职务</div>
        <van-field
          class="zdycell"
          v-model="formData.job"
          label-align="top"
          name="姓名"
          maxlength="15"
          label=""
          placeholder="请填写您的职位"
          :rules="[{ required: true, message: '请填写您的职位' }]"
        />
        <div class="myTitle required"><span class="number">08</span>手机号码</div>
        <van-field
          class="zdycell"
          v-model="formData.phone"
          label-align="top"
          name="手机号码"
          maxlength="11"
          label=""
          :rules="[{ required: true, message: '请填写您的手机号码' }]"
          placeholder="请填写您的手机号码"
        />
        <div class="myTitle required"><span class="number">09</span>出生日期</div>
        <van-field
          v-model="setObjId.birthday"
          class="zdycell"
          is-link
          readonly
          name="picker"
          label=""
          :placeholder="t('feedback.setselcet')"
          :rules="[{ required: true, message: '请选择出生日期' }]"
          @click="showPicker.birthday = true"
        />
        <van-popup v-model:show="showPicker.birthday" position="bottom">
          <van-date-picker
            :min-date="dataDay.minDate"
            :max-date="dataDay.maxDate"
            @confirm="(val) => onConfirmdate(val, 'birthday')"
            @cancel="showPicker.birthday = false"
          />
        </van-popup>
        <div class="myTitle required"><span class="number">10</span>计划参观日期</div>
        <van-field
          v-model="setObjId.joinDate"
          class="zdycell"
          is-link
          readonly
          name="picker"
          label=""
          :placeholder="t('feedback.setselcet')"
          :rules="[{ required: true, message: '请选择计划参观日期' }]"
          @click="showPicker.joinDate = true"
        />
        <van-popup v-model:show="showPicker.joinDate" position="bottom">
          <van-picker :columns="columns.data" @confirm="(val) => onConfirm(val, 'joinDate')" @cancel="showPicker.date = false" />
        </van-popup>

        <div class="myTitle required"><span class="number">11</span>头像</div>
        <van-field class="uploadercell" name="uploader" label-align="top">
          <template #input>
            <div>
              <div>
                <van-uploader
                  upload-icon="plus"
                  :multiple="true"
                  :before-read="beforeRead"
                  :after-read="clzpAfterRead"
                  accept="image/*"
                  :max-count="6"
                  v-model="formData.thumb"
                />
              </div>
              <div class="tips" v-html="'请上传图片</br>支持jpg、png格式，不大于5MB；'"></div>
            </div>
          </template>
        </van-field>
        <van-popup v-model:show="showPicker.nationality" position="bottom">
          <van-picker
            :columns="columnsnationality"
            @confirm="(val) => onConfirm(val, 'nationality')"
            @cancel="showPicker.nationality = false"
          />
        </van-popup>
        <div style="margin: 54px 0 24px 0; background-color: #f5f5f5">
          <van-button style="height: 44px" block color="#00B3EC" type="primary" native-type="submit"> 提交 </van-button>
        </div>
      </van-cell-group>
    </van-form>
  </div>
</template>

<script setup>
  import { ref, watch } from 'vue';
  import nationalityList from './country.json';
  import { addRoster } from '/@/api/index';
  import { useRouter } from 'vue-router';
  import axios from 'axios';
  // const areaList = ref({});
  import { showToast } from 'vant';
  const router = useRouter();

  const dataDay = ref({
    minDate: new Date(1924, 1, 1),
    maxDate: new Date(2024, 12, 12),
  });
  const columns = ref({
    industryOptionId: [
      {
        text: '身份证',
        value: '身份证',
        value: '身份证',
      },
      {
        text: '港澳回乡证',
        value: '港澳回乡证',
        value: '港澳回乡证',
      },
      {
        text: '台胞证',
        value: '台胞证',
        value: '台胞证',
      },
      {
        text: '国外护照',
        value: '国外护照',
        value: '国外护照',
      },
    ],
    data: [
      {
        text: '11月13日（周三） ',
        value: '2024-11-13',
      },
      {
        text: '11月14日（周四）',
        value: '2024-11-14',
      },
      {
        text: '11月15日（周五）',
        value: '2024-11-15',
      },
      {
        text: '11月16日（周六）',
        value: '2024-11-16',
      },
      {
        text: '11月17日（周日）',
        value: '2024-11-17',
      },
    ],
  });
  const loading = ref(false);
  const submits = ref(null);
  const setObjId = ref({
    type: null,
    nationality: null,
    joinDate: null,
  });
  const showPicker = ref({
    type: false,
    nationality: false,
    softwareOptionId: false,
    joinDate: false,
  });
  const formData = ref({
    birthday: '',
    exhibitionName: '',
    gender: '男',
    job: '',
    joinDate: '',
    name: '',
    nationality: '中国',
    num: '',
    phone: '',
    thumb: [],
    type: '',
    unit: '',
    year: 2024,
    exhibitionName: '2024珠海航展',
  });
  import { useI18n } from 'vue-i18n';
  const { t, locale } = useI18n();
  const columnsnationality = nationalityList.map((ele) => {
    return {
      text: locale.value == 'en-us' ? ele.english : ele.chinese,
      value: locale.value == 'en-us' ? ele.english : ele.chinese,
      zhText: ele.chinese,
    };
  });

  const onConfirm = ({ selectedOptions, selectedValues }, b) => {
    console.log('onConfirm', selectedOptions, selectedValues);
    formData.value[b] = selectedValues.join(',');
    setObjId.value[b] = selectedOptions[0].zhText || selectedOptions[0].text;
    showPicker.value[b] = false;
  };

  const onConfirmdate = ({ selectedOptions, selectedValues }, b) => {
    console.log('onConfirm', selectedOptions, selectedValues);
    formData.value[b] = selectedValues.join('-');
    setObjId.value[b] = selectedValues.join('-');
    showPicker.value[b] = false;
  };
  const onSubmit = async () => {
    console.log('submit', formData.value, setObjId.value);
    let param = { ...formData.value };
    param.thumb = param.thumb[0]?.url;
    await addRoster(param);
    router.push('/airshowsuccess');
  };
  // const beforeUpload = (file) => {
  //   console.log('beforeUpload', file);
  //   const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  //   if (!isJpgOrPng) {
  //     showToast('You can only upload JPG file!');
  //   }
  //   const isLt2M = file.size / 1024 / 1024 < 2;
  //   if (!isLt2M) {
  //     showToast('Image must smaller than 2MB!');
  //   }
  //   return isJpgOrPng && isLt2M;
  // }; //校验图片的格式
  function beforeRead(file) {
    const isJpgOrPng =
      file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'video/mp4' || file.type === 'video/quicktime';
    if (!isJpgOrPng) {
      showToast(t('feedback.fileTips'));
      return false;
    }
    const isLt2M = file.size / 1024 / 1024 < 5;
    const isLt50M = file.size / 1024 / 1024 < 50;
    if (!isLt2M && (file.type === 'image/jpeg' || file.type === 'image/png')) {
      showToast(t('feedback.fileTips'));
      return false;
    }
    if (!isLt50M && (file.type === 'video/mp4' || file.type === 'video/quicktime')) {
      showToast(t('feedback.fileTips'));
      return false;
    }
    // if (!/(jpg|jpeg|png|JPG|PNG|mp4|quicktime)/i.test(file.type)) {
    //   showToast(t('feedback.fileTips'));
    //   return false;
    // }
    return true;
  }
  function validator(value, rule) {
    let isOk = Boolean(formData.value[rule.name] || (formData.value[`${rule.name}Imgs`] && formData.value[`${rule.name}Imgs`].length > 0));
    return isOk;
  }
  //照片上传事件方法
  function clzpAfterRead(file) {
    // 上传状态提示开启
    file.status = 'uploading';
    file.message = '上传中...';
    loading.value = true;
    // 创建一个空对象实例
    let formData = new FormData();
    // 调用append()方法添加数据
    formData.append('file', file.file);
    axios({
      url: '/service/manage/common/upload/files',
      method: 'POST',
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })
      .then((res) => {
        loading.value = false;
        let { data } = res;
        if (data.code == 200 || data.code == 0) {
          // 上传状态提示关闭
          file.url = data.data;
          file.file = file.file;
          file.content = '';
          file.status = 'done';
          showToast('上传成功！');
          setTimeout(() => {
            console.log('problemDesc', submits.value);
            // submits.value.validate('problemDesc')();
            // submits.value.validate('solution');
          }, 1000);
        }
        console.log('formData.faultImg', formData, file);
      })
      .catch(() => {
        loading.value = false;
      });
  }
</script>

<style lang="scss" scoped>
  .mcSubmit {
    padding-top: 16px;
    .tips {
      font-size: 14px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #cccccc;
      line-height: 16px;
      margin-top: 15px;
    }
    .required {
      &::before {
        display: inline-block;
        margin-inline-end: 4px;
        color: #ff4d4f;
        font-size: 14px;
        font-family: SimSun, sans-serif;
        line-height: 1;
        content: '*';
        position: absolute;
        left: -11px;
        top: 4.5px;
      }
    }
    .myTitle {
      position: relative;
      margin: 48px 0 15px 0;
      font-size: 16px;
      // padding: 0 var(--van-cell-horizontal-padding);
      .number {
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        color: #00b3ec;
      }
      span {
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 19px;
        margin-right: 7px;
      }
    }
    ::v-deep .uploadercell:after {
      display: none;
    }
    ::v-deep .ratecell:after {
      display: none;
    }
    ::v-deep .van-cell {
      padding: 4px 0px;
    }
    // ::v-deep .van-uploader__upload{
    //   background-color: #fff;
    //   border: 1px solid #e4e4e5;
    //   border-radius: 5px;
    // }
    // .zdycell {
    //   border: 1px solid #e4e4e5;
    //   border-radius: 5px;
    // }
    .uploadercell {
      padding: 20px 0 0 0;
    }
  }
</style>