commit

components.d.ts

@@ -22,6 +22,8 @@ declare module 'vue' {
     VanButton: typeof import('vant/es')['Button']
     VanCascader: typeof import('vant/es')['Cascader']
     VanCellGroup: typeof import('vant/es')['CellGroup']
+    VanDatePicker: typeof import('vant/es')['DatePicker']
+    VanDatetimePicker: typeof import('vant/es')['DatetimePicker']
     VanDivider: typeof import('vant/es')['Divider']
     VanField: typeof import('vant/es')['Field']
     VanForm: typeof import('vant/es')['Form']

src/App.vue

@@ -28,14 +28,15 @@
     if (routersName == 'feedback' || routersName == 'feedbacksuccess') {
       document.title = t('feedback.title');
     } else if (wxOpenId.value) {
-      //
+      console.log('已登录', wxOpenId.value);
+    } else if (routersName == 'airshow') {
       console.log('已登录', wxOpenId.value);
     } else if (code) {
       //存在code
       userStore.setWxOpenId(code);
     } else {
       //进行微信登录
-      getCodeApi(123);
+      // getCodeApi(123);
     }
     let clear = getUrlKey('clear'); //获取url参数code
     if (clear) {

src/api/index.ts

@@ -146,6 +146,14 @@ export function wechatMobilePay(params) {
     data: params,
   });
 }
+// 航展报名
+export function addRoster(params) {
+  return request({
+    url: 'https://sit-visitcommon.4dage.com/api/roster/add',
+    method: 'post',
+    data: params,
+  });
+}
 export interface wxLoginRus {
   openid: string;
 }

src/router/index.ts

@@ -15,18 +15,20 @@ router.beforeEach(async (_to, _from, next) => {
   if (_to.name == 'feedback' || _to.name == 'feedbacksuccess') {
     const current = window.navigator.language || window.navigator.userLanguage || localStorage.getItem('lang') || null;
     let mytitle = '产品建议';
-    if (current && !/^zh/.test(current) || _to.query.lang == 'en') {
-
+    if ((current && !/^zh/.test(current)) || _to.query.lang == 'en') {
       mytitle = 'Feedback';
     }
     document.title = mytitle;
+  } else if (_to.name == 'airshow') {
+    document.title = '[第十五届中国国际航空航天博览会」报名申请';
   } else {
     document.title = '四维时代售后';
   }
-  if (wxOpenId || _to.name == 'feedback' || _to.name == 'feedbacksuccess' || getUrlKey('code')) {
+  console.log('wxOpenId', _to);
+  if (wxOpenId || _to.name == 'feedback' || _to.name == 'airshow' || _to.name == 'feedbacksuccess' || getUrlKey('code')) {
     next();
   } else {
-    getCodeApi(123);
+    // getCodeApi(123);
   }
 });
 

src/router/routes.ts

@@ -14,6 +14,15 @@ const routes = [
         },
       },
       {
+        path: 'airshow',
+        name: 'airshow',
+        component: () => import('/@/views/airshow/index.vue'),
+        meta: {
+          title: '[第十五届中国国际航空航天博览会」报名申请',
+          keepAlive: true,
+        },
+      },
+      {
         path: 'detail/:id',
         name: 'detail',
         component: () => import('/@/views/detail/index.vue'),

src/views/airshow/index.vue

@@ -0,0 +1,431 @@
+<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.carType"
+          class="zdycell"
+          is-link
+          readonly
+          name="picker"
+          label=""
+          :placeholder="t('feedback.setselcet')"
+          :rules="[{ required: true, message: '请选择证件类型' }]"
+          @click="showPicker.carType = true"
+        />
+        <van-popup v-model:show="showPicker.carType" position="bottom">
+          <van-picker
+            :columns="columns.industryOptionId"
+            @confirm="(val) => onConfirm(val, 'carType')"
+            @cancel="showPicker.carType = 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="1">男性</van-radio>
+              <van-radio name="2">女性</van-radio>
+              <van-radio name="3">其他</van-radio>
+            </van-radio-group>
+          </template>
+        </van-field>
+        <div class="myTitle"><span class="number">05</span>国籍</div>
+        <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 @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">08</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="t('feedback.fileTipsPc')"></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 axios from 'axios';
+  // const areaList = ref({});
+  import { showToast } from 'vant';
+  const dataDay = ref({
+    // minDate: new Date(1924, 01, 01),
+    // 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({
+    carType: null,
+    nationality: null,
+    joinDate: null,
+  });
+  const showPicker = ref({
+    carType: false,
+    nationality: false,
+    softwareOptionId: false,
+    joinDate: false,
+  });
+  const formData = ref({
+    birthday: '',
+    exhibitionName: '',
+    gender: 0,
+    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);
+  };
+  // 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>