证件类型加载

src/api/entitlement.js

@@ -2,13 +2,13 @@ import request from 'mn-template/plugins/http';
 
 // 获取权益列表
 export const getEntitlementList = async (externalOrderNo, projectEquityNo) => {
-    return request({
-      method: 'get',
-      url: `/tis/insurance/projectEquityNo/externalOrderNo?externalOrderNo=${externalOrderNo}&projectEquityNo=${projectEquityNo}`,
-      withCredentials: true,
-      hasLoading:true,
-    });
-  };
+  return request({
+    method: 'get',
+    url: `/tis/insurance/projectEquityNo/externalOrderNo?externalOrderNo=${externalOrderNo}&projectEquityNo=${projectEquityNo}`,
+    withCredentials: true,
+    hasLoading: true,
+  });
+};
 
 // 获取banner
 export const getBanner = async (pageType, yunOrderNo) => {
@@ -16,6 +16,15 @@ export const getBanner = async (pageType, yunOrderNo) => {
     method: 'get',
     url: `/tis/insurance/explain/${yunOrderNo}/${pageType}`,
     withCredentials: true,
-    hasLoading:true,
+    hasLoading: true,
+  });
+};
+
+// 查询证件类型字典的接口
+export const getCardTypes = () => {
+  return request({
+    url: 'basic-data/constants/app?typeCodeList=P333',
+    method: 'get',
+    withCredentials: true,
   });
 };

src/main.js

-import { router, store, vueApp } from '@pica-cli/vue-cli-plugin-pica-cli-plugin/auto';
+import {
+  router,
+  store,
+  vueApp,
+} from '@pica-cli/vue-cli-plugin-pica-cli-plugin/auto';
 import * as dd from 'dingtalk-jsapi';
 import '@/router';
 console.log('router, store, vueApp: ', router, store, vueApp);
 import '@/assets/js/flexible';
-import {isWeixin } from './utils/index';
+import { isWeixin } from './utils/index';
 import Loading from '@/components/loading/loading.js';
 import CryptoJS from 'crypto-js/crypto-js';
 import JsEncrypt from 'jsencrypt/bin/jsencrypt';
@@ -39,22 +43,21 @@ document.documentElement.addEventListener(
     passive: false,
   }
 );
-
+console.log('z', vueApp.$rocNative);
 vueApp.$rocNative.appInit();
 vueApp.$rocNative.on('wx_ready', function () {
   console.log('-wx_ready-', window._picaWechat);
   // 初始化wx jssdk 后 执行 脚手架将 wx 对象挂在到 $rocNative对象上，后执行  小程序环境判断方法 miniProgram.getEnv
-  vueApp.$rocNative.WXInstance.miniProgram.getEnv(function(res) {
+  vueApp.$rocNative.WXInstance.miniProgram.getEnv(function (res) {
     console.log('_miniprogram', res.miniprogram); // true
     window._miniprogram = res.miniprogram;
   });
-
 });
 console.log('---', isWeixin());
-if(isWeixin()) {
+if (isWeixin()) {
   window._picaWechat = 'wechat';
 }
-if(dd.env.version) {
+if (dd.env.version) {
   window._picaWechat = 'dingtalk';
 }
 
@@ -63,7 +66,7 @@ sessionStorage.setItem('headerHeight', 0);
 window.Vue.use(Loading);
 // 设置安全密钥
 window._AMapSecurityConfig = {
-  securityJsCode: 'f5093bfce95bd0393749259bcc44ede8'
+  securityJsCode: 'f5093bfce95bd0393749259bcc44ede8',
 };
 
 console.log('router, store, vueApp: ', router, store, vueApp);

src/views/sz-public-new/date-picker.vue

+<template>
+  <div class="pica-date-picker">
+    <van-field
+      :border="false"
+      disabled
+      placeholder="请选择出生年月日"
+      :value="value"
+      class="appoint-form-items"
+      @click="handleOpenPopup"
+    />
+    <van-popup
+      v-model="visible"
+      position="bottom"
+      :transition-appear="false"
+    >
+      <van-datetime-picker
+        type="date"
+        title="选择年月日"
+        :max-date="maxDate"
+        @confirm="handleConfirm"
+        @cancel="visible = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs';
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      currentDate: new Date(),
+      maxDate: new Date(),
+    };
+  },
+
+  methods: {
+    handleOpenPopup() {
+      this.visible = true;
+    },
+
+    handleConfirm(value) {
+      this.visible = false;
+      const formatDate = dayjs(value).format('YYYY-MM-DD');
+      this.$emit('input', formatDate);
+    },
+  },
+};
+</script>
+<style scoped>
+.pica-date-picker {
+  .van-cell {
+    padding: 3px 0;
+  }
+}
+</style>

src/views/sz-public-new/index.vue

@@ -7,9 +7,7 @@
     />
     <div class="insurance-register-bg">
       <div class="bg-img back-img">
-        <img
-          :src="bgPath"
-        >
+        <img :src="bgPath">
       </div>
       <div class="wrap-reg">
         <div class="choose-section">
@@ -29,28 +27,65 @@
               required
               class="appoint-form-items"
               placeholder="点击此处输入"
-              :rules="[{ required: true, message: '请输入参保人姓名' },{
-                         pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
-                         message: '请输入正确格式',
-                       },
-                       {
-                         pattern: /^.{2,20}$/,
-                         message: '参保人姓名请填写2-20位',
-                       },]"
+              :rules="[
+                { required: true, message: '请输入参保人姓名' },
+                {
+                  pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
+                  message: '请输入正确格式',
+                },
+                {
+                  pattern: /^.{2,20}$/,
+                  message: '参保人姓名请填写2-20位',
+                },
+              ]"
+            />
+            <van-field
+              :value="cardTypeName"
+              label="证件类型"
+              required
+              disabled
+              class="appoint-form-items"
+              right-icon="arrow"
+              @click="showCardTypeVisible = true"
             />
             <van-field
               v-model="dectionForm.idCard"
               class="appoint-form-items"
               clearable
               required
-              label="参保人身份证"
+              label="参保人证件号"
               placeholder="点击此处输入"
-              :rules="[{ required: true, message: '请输入真实身份证号' },
-                       {
-                         pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
-                         message: '身份证号格式填写有误',
-                       },]"
+              :rules="rules"
             />
+            <van-field
+              class="appoint-form-items"
+              required
+              label="参保人性别"
+            >
+              <template #input>
+                <van-radio-group
+                  v-model="dectionForm.sex"
+                  direction="horizontal"
+                >
+                  <van-radio :name="1">
+                    男
+                  </van-radio>
+                  <van-radio :name="0">
+                    女
+                  </van-radio>
+                </van-radio-group>
+              </template>
+            </van-field>
+            <van-field
+              class="appoint-form-items"
+              required
+              label="参保人出生日期"
+              right-icon="arrow"
+            >
+              <template #input>
+                <DatePicker v-model="dectionForm.birthTime" />
+              </template>
+            </van-field>
             <van-field
               v-model="dectionForm.mobilePhone"
               class="appoint-form-items"
@@ -59,15 +94,18 @@
               clearable
               required
               placeholder="点击此处输入"
-              :rules="[{ required: true, message: '请输入手机号' },
-                       {
-                         pattern: /^([1][3,4,5,6,7,8,9])\d{9}$/,
-                         message: '手机号格式填写有误',
-                       },]"
+              :rules="[
+                { required: true, message: '请输入手机号' },
+                {
+                  pattern: /^([1][3,4,5,6,7,8,9])\d{9}$/,
+                  message: '手机号格式填写有误',
+                },
+              ]"
             >
               <template #label>
                 <div class="phone-wrap">
-                  参保人手机号 <span class="sm-grey">该手机号将用于接收预约信息</span>
+                  参保人手机号
+                  <span class="sm-grey">该手机号将用于接收预约信息</span>
                 </div>
               </template>
             </van-field>
@@ -84,12 +122,11 @@
           >
         </div>
       </div>
-
     </div>
     <div class="bottom-btn">
       <van-button
         class="btn"
-        :class="canSubmit ? 'appoint-form-submit-active':''"
+        :class="canSubmit ? 'appoint-form-submit-active' : ''"
         @click="appointment"
       >
         领取权益
@@ -97,7 +134,7 @@
     </div>
     <van-popup
       v-model="showProtocol"
-      :style="{ height: '230px',width: '300px', }"
+      :style="{ height: '230px', width: '300px' }"
       :transition-appear="false"
       :close-on-click-overlay="false"
     >
@@ -105,14 +142,22 @@
         v-if="showProtocol"
         class="protocol-content"
       >
-        <div class="block70 f20">身份校验通过</div>
+        <div class="block70 f20">
+          身份校验通过
+        </div>
         <div class="block70">
           请点击“领取权益”按钮填写预约领取信息
         </div>
         <div class="submit-button submit-button-empty">
           <wx-open-launch-weapp
             id="launchBtn"
-            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
+            style="
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+            "
             :username="openWebAppConfigPositive.username"
             :path="openWebAppConfigPositive.path"
             :env-version="envVersion"
@@ -126,20 +171,36 @@
         </div>
       </div>
     </van-popup>
+
+    <!-- 选择证件类型弹框 -->
+    <van-popup
+      v-model="showCardTypeVisible"
+      position="bottom"
+      :style="{ height: '230px' }"
+    >
+      <van-cell
+        v-for="(item, index) in cardTypes"
+        :key="index"
+        :title="item.value"
+        @click="handleChooseCardType(item)"
+      />
+    </van-popup>
   </div>
 </template>
 
 <script>
-import { createOrderSzV2} from '@/api/question';
-import {getBanner} from '@/api/entitlement';
+import { createOrderSzV2 } from '@/api/question';
+import { getBanner, getCardTypes } from '@/api/entitlement';
+import DatePicker from './date-picker.vue';
 const { VUE_APP_ENV } = process.env;
 let that;
 export default {
+  components: { DatePicker },
   data() {
     return {
       projectEquityNo: '',
       externalOrderNo: '',
-      picaWechat:window._picaWechat,
+      picaWechat: window._picaWechat,
       headerInfo: {
         title: '惠民保癌筛权益领取',
         isBlack: true,
@@ -149,18 +210,23 @@ export default {
       },
       dectionForm: {
         mobilePhone: '',
-        idCard:'',
+        idCard: '',
+        idType: 1 /** 默认为1:身份证 */,
         name: '',
+        sex: 1,
+        birthTime: '',
       },
-      showProtocol:false,
+      showProtocol: false,
+      showCardTypeVisible: false,
+      cardTypes: [],
       envVersion: VUE_APP_ENV == 'production' ? 'release' : 'trial',
       // envVersion:'trial',
-      openWebAppConfigPositive:{
-        username:'gh_e92f58174364', // 小程序唯一username  1.gh_80d54796f2d5 云鹊助手 2. gh_e92f58174364 云鹊健康
-        path:'pagesInsurance/all-entrance/index', // 打开页面
-        extraData: JSON.stringify({})
+      openWebAppConfigPositive: {
+        username: 'gh_e92f58174364', // 小程序唯一username  1.gh_80d54796f2d5 云鹊助手 2. gh_e92f58174364 云鹊健康
+        path: 'pagesInsurance/all-entrance/index', // 打开页面
+        extraData: JSON.stringify({}),
       },
-      bgPath: ''
+      bgPath: '',
     };
   },
   computed: {
@@ -171,23 +237,53 @@ export default {
         this.dectionForm.mobilePhone
       );
     },
+    cardTypeName() {
+      const item = this.cardTypes.find(
+        (item) => item.no == this.dectionForm.idType
+      );
+      return item ? item.value : '';
+    },
+    rules() {
+      const rules = [{ required: true, message: '请输入真实证件号' }];
+      if (this.dectionForm.idType === 1) {
+        return [
+          ...rules,
+          {
+            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
+            message: '身份证号格式填写有误',
+          },
+        ];
+      }
+
+      return rules;
+    },
   },
   mounted() {
     document.title = '惠民保癌筛权益领取';
     that = this;
-    const {externalOrderNo, projectEquityNo} = this.$route.query;
+    const { externalOrderNo, projectEquityNo } = this.$route.query;
     this.projectEquityNo = projectEquityNo;
     this.externalOrderNo = externalOrderNo;
     // this.$loading.show();
     this.getBanner(7, projectEquityNo);
-
+    this.loadCardTypes();
   },
   methods: {
+    async loadCardTypes() {
+      const { data } = await getCardTypes();
+      this.cardTypes = data || [];
+    },
+
+    handleChooseCardType(item) {
+      this.dectionForm.idType = item.no;
+      this.showCardTypeVisible = false;
+    },
+
     getBanner(pageType, yunOrderNo) {
       const self = this;
       self.$loading.show();
-      getBanner(pageType, yunOrderNo).then(res => {
-        if(res.code === '000000') {
+      getBanner(pageType, yunOrderNo).then((res) => {
+        if (res.code === '000000') {
           self.bgPath = res.data.logoUrl;
           self.$loading.hide();
         }
@@ -200,47 +296,58 @@ export default {
         ...this.dectionForm,
         projectEquityNo,
       };
-      if(externalOrderNo) {
+      if (externalOrderNo) {
         data['externalOrderNo'] = externalOrderNo;
       }
       createOrderSzV2(data).then((res) => {
         console.log(res);
-        if(res.code == '000000') {
-          const {yunOrderNo, statusCode, externalOrderNo, lanZhouOldflag, projectEquityNo} = res.data;
-          if(lanZhouOldflag) {
+        if (res.code == '000000') {
+          const {
+            yunOrderNo,
+            statusCode,
+            externalOrderNo,
+            lanZhouOldflag,
+            projectEquityNo,
+          } = res.data;
+          if (lanZhouOldflag) {
             const url = '/home';
             const l = window.location.origin;
-            const hr = l + `/pica-insurance${url}?projectEquityNo=${projectEquityNo}&externalOrderNo=${externalOrderNo}`;
+            const hr =
+              l +
+              `/pica-insurance${url}?projectEquityNo=${projectEquityNo}&externalOrderNo=${externalOrderNo}`;
             window.location.href = hr;
           }
-          if(statusCode == '0103') {
+          if (statusCode == '0103') {
             this.showProtocol = true;
             this.openWebAppConfigPositive.path = `pagesInsurance/all-entrance/index?channelSource=insurance_channel&projectEquityNo=${projectEquityNo}&yunOrderNo=${yunOrderNo}&externalOrderNo=${externalOrderNo}`;
-            console.log('-openWebAppConfigPositive', this.openWebAppConfigPositive);
-          }else{
-            this.$router.replace(
-              {
-                path: '/entitlement',
-                query: {
-                  projectEquityNo: projectEquityNo,
-                  externalOrderNo: externalOrderNo
-                },
-              }
+            console.log(
+              '-openWebAppConfigPositive',
+              this.openWebAppConfigPositive
             );
+          } else {
+            this.$router.replace({
+              path: '/entitlement',
+              query: {
+                projectEquityNo: projectEquityNo,
+                externalOrderNo: externalOrderNo,
+              },
+            });
           }
-        }else{
+        } else {
           this.$toast(res.message);
         }
-
       });
     },
     appointment() {
-      this.$refs.dectionForm.validate().then(result => {
-        console.log('this.dectionForm', result);
-        this.createOrderSz();
-      }).catch(err => {
-        console.log(err);
-      });
+      this.$refs.dectionForm
+        .validate()
+        .then((result) => {
+          console.log('this.dectionForm', result);
+          this.createOrderSz();
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     },
     handleErrorFn(e) {
       console.log('handleErrorFn', e);
@@ -249,7 +356,7 @@ export default {
       console.log('handleLaunchFn', e);
       that.showProtocol = false;
     },
-  }
+  },
 };
 </script>
 
@@ -259,27 +366,26 @@ export default {
   overflow: auto;
   box-sizing: border-box;
   padding-bottom: 70px;
-  background-color: #BEE2FD;
-  .insurance-register-bg{
+  background-color: #bee2fd;
+  .insurance-register-bg {
     width: 100%;
-    .bg-img{
+    .bg-img {
       width: 100%;
 
-      img{
+      img {
         width: 100%;
         height: 100%;
       }
     }
-    .wrap-reg{
+    .wrap-reg {
       width: 350px;
       border-radius: 20px;
       margin: 0 auto;
-      margin-top: 230px;
+      margin-top: 280px;
       position: relative;
-
     }
   }
-  .back-img{
+  .back-img {
     position: absolute;
     top: 0;
   }
@@ -290,10 +396,10 @@ export default {
     font-weight: 600;
     padding-top: 0px;
     margin: 0 auto;
-    /deep/ .van-field__label{
+    /deep/ .van-field__label {
       color: #212121;
     }
-    /deep/ .van-field__control:disabled{
+    /deep/ .van-field__control:disabled {
       color: #323233;
       -webkit-text-fill-color: #323233;
     }
@@ -335,22 +441,22 @@ export default {
       color: rgba(255, 56, 56, 1);
     }
   }
-  .appoint-form-items{
-    /deep/ .van-field__label{
+  .appoint-form-items {
+    /deep/ .van-field__label {
       color: #212121;
+      width: auto;
     }
-
   }
-  .appoint-form-placeholder{
+  .appoint-form-placeholder {
     color: #999999;
   }
-  .appoint-form-title::after{
+  .appoint-form-title::after {
     display: none;
   }
-  .appoint-form-submit{
+  .appoint-form-submit {
     margin-top: 30px;
     height: 40px;
-    background: #D9D9D9;
+    background: #d9d9d9;
     border-radius: 20px;
     border: none;
     position: absolute;
@@ -360,33 +466,33 @@ export default {
 
   .sz-appoint-form-tips {
     width: 175px;
-    height:32px;
+    height: 32px;
     margin: 0 auto;
     margin-bottom: 10px;
   }
-  /deep/.van-cell{
+  /deep/.van-cell {
     display: block;
     font-weight: 300;
     font-size: 14px;
   }
-  .phone-wrap{
-    .sm-grey{
+  .phone-wrap {
+    .sm-grey {
       font-weight: 100;
       color: #999999;
       font-size: 12px;
     }
   }
-  .protocol-content{
+  .protocol-content {
     padding: 20px;
     border-radius: 20px;
   }
-  .block70{
+  .block70 {
     font-size: 14px;
-    color: #212121!important;
+    color: #212121 !important;
     text-align: center;
     margin-top: 15px;
   }
-  .f20{
+  .f20 {
     font-size: 20px;
   }
   .submit-button {
@@ -397,26 +503,26 @@ export default {
     font-size: 16px;
     display: flex;
     align-items: center;
-    background: #00BDA5;
+    background: #00bda5;
     justify-content: center;
     width: 130px;
     margin: 0 auto;
     margin-top: 30px;
   }
-  /deep/.van-popup--center{
+  /deep/.van-popup--center {
     border-radius: 20px;
   }
-  .bottom-btn{
+  .bottom-btn {
     width: 100%;
-    background: #FFFFFF;
-    box-shadow: inset 0px 1px 0px 0px #E9E9E9;
+    background: #ffffff;
+    box-shadow: inset 0px 1px 0px 0px #e9e9e9;
     overflow: hidden;
     text-align: center;
     padding-bottom: calc(5px + env(safe-area-inset-bottom) / 2);
     position: fixed;
     bottom: 0;
     left: 0;
-    .btn{
+    .btn {
       width: 351px;
       height: 40px;
       border-radius: 20px;
@@ -424,17 +530,17 @@ export default {
       font-size: 16px;
       background: #cccccc;
       font-weight: 600;
-      color: #FFFFFF;
+      color: #ffffff;
       line-height: 40px;
       text-align: center;
     }
-    .appoint-form-submit-active{
-      background: linear-gradient(270deg, #FF7400 0%, #FE4000 100%);
+    .appoint-form-submit-active {
+      background: linear-gradient(270deg, #ff7400 0%, #fe4000 100%);
     }
   }
-  .mt20{
+  .mt20 {
     margin-top: 10px;
-    background-color: #BEE2FD;
+    background-color: #bee2fd;
   }
 }
 </style>

vue.config.js

@@ -36,7 +36,7 @@ module.exports = {
     port: 8083,
     proxy: {
       '/proxy': {
-        target: 'https://test1-sc.yunqueyi.com/',
+        target: 'https://dev-sc.yunqueyi.com/',
         // target: 'https://test1-sc.yunqueyi.com/',
         // target: 'https://uat-sc.yunqueyi.com/',
         // http://10.241.65.90:3000/mock/1071/cs/route/removeUser