1、生育全程签约乌当和张家港页面独立开；2、券详情页券码显示在券详情中间；

src/router/index.js

@@ -23,6 +23,12 @@ export default new Router({
       meta: {keepAlive: false, title: '生育全程签约'}
     },
     {
+      path: '/signingWD',
+      name: '生育全程签约(乌当)',
+      component: () => import('@/views/signingWD/index'),
+      meta: {keepAlive: false, title: '生育全程签约'}
+    },
+    {
       path: '/vouchers',
       name: '我的健康券',
       component: () => import('@/views/vouchers/index'),

src/views/signing/indexbate.vue → src/views/signingWD/indexbate.vue

@@ -128,8 +128,17 @@
           </div>
         </div>
       </div>
+      <div class="notice">
+        <span>
+          <mt-checklist
+            v-model="noticeCheck"
+            :options="noticeOptions">
+          </mt-checklist>
+          <span class="cell link" @click="noticePopupVisible=true">签约须知</span>
+        </span>
+      </div>
       <div class="footer">
-        <button class="btn-default btn-block" :class="btnDisabled?'disabled':''" :disabled="btnDisabled" @click="handelSave">立即领取</button>
+        <button class="btn-default btn-block" @click="confirmSignature">确认签约</button>
       </div>
     </div>
     <mt-popup
@@ -269,6 +278,17 @@
       :startDate="pickerLastMensesTimeStart"
       :endDate="pickerLastMensesTimeEnd">
     </mt-datetime-picker>
+    <mt-popup
+      v-model="noticePopupVisible"
+      class="full-width noticePopup"
+      position="bottom">
+      <div class="body">
+        <img :src="noticePicture" class="full-width"/>
+        <div class="footer-btn">
+          <button class="btn-block" @click="noticePopupHandelClose">确定</button>
+        </div>
+      </div>
+    </mt-popup>
   </div>
 </template>
 
@@ -279,6 +299,8 @@ import { getOrgInfo, getSignInfo, getAreaList, getVillages } from '@/api/signing
 import { validatename, cardid, isvalidatemobile } from '@/util/validate'
 import { SubtractDay, getBirthByIdNumber, getSexByIdCard, getAgeByBirth } from '@/util/index'
 import _defaultPicture from '../../assets/images/org-default-picture.png'
+import _noticePicture from '../../assets/images/notice-img.png'
+import _signatureBg from '../../assets/images/signature-bg.png'
 
 export default {
   name: 'Home',
@@ -347,6 +369,30 @@ export default {
         type: '',
         sex: '',
         state: ''
+      },
+      noticePopupVisible: false,
+      noticePicture: _noticePicture,
+      noticeCheck: [],
+      noticeOptions: [
+        { label: '我已阅读并确认', value: '1' }
+      ],
+      SignatureSheetVisible: false,
+      signatureImage: '',
+      signCanvasW: '400px',
+      signCanvasH: '220px',
+      signOption: {
+        penColor: 'rgb(0, 0, 0)',
+        backgroundColor: '#efefef'
+      },
+      signBGdataUrl: _signatureBg,
+      signWaterMarkState: true,
+      waterMarkOptions: {
+        text: '请在此处签名，字迹工整！', // watermark text, > default ''
+        font: '16px Arial', // mark font, > default '20px sans-serif'
+        style: 'fill', // fillText and strokeText,  'all'/'stroke'/'fill', > default 'fill
+        fillStyle: '#333', // fillcolor, > default '#333'
+        x: 100, // fill positionX, > default 20
+        y: 100 // fill positionY, > default 20
       }
     }
   },
@@ -801,6 +847,41 @@ export default {
       getVillages(params).then(res => {
         this.VillagesData = res.records
       })
+    },
+    confirmSignature () {
+      this.BaseValidateHandle()
+      if (this.pageType === 1) { // 子女
+        let downState = true
+        for (let i = 0; i < this.childrenArr.length; i++) {
+          this.tab2Validate(i)
+          if (!this.childrensValidate[i].nameState || !this.childrensValidate[i].ageState) {
+            downState = false
+          }
+        }
+        if (!downState) {
+          return false
+        }
+      } else if (this.pageType === 0) { // 配偶
+        if (!this.BaseValidate.nameState || !this.BaseValidate.idCardState || !this.BaseValidate.lastMensesTimeState || !this.BaseValidate.chooseImg1State) {
+          return false
+        }
+      }
+
+      if (parseInt(this.noticeCheck[0]) !== 1) {
+        this.$toast({
+          message: '请预览签约须知后勾选',
+          position: 'center',
+          duration: 3000
+        })
+        return false
+      }
+      this.SignatureSheetVisible = true
+      this.modalVisible = true
+      this.signCanvasW = this.$refs.signCanvasBlock.offsetWidth
+    },
+    noticePopupHandelClose () {
+      this.noticePopupVisible = false
+      this.noticeCheck.push(1)
     }
   }
 }
@@ -914,6 +995,9 @@ export default {
   .address-step .step-list .step-item.finish > .icon > .ico > .glyphicon{
     display: block;
   }
+  .address-step .step-list .step-item.finish > .icon > .ico > .glyphicon > i {
+    top: 2px;
+  }
   .address-step .step-list .step-item.finish > .icon > .ico > .number{
     display: none;
   }
@@ -949,6 +1033,10 @@ export default {
     overflow-y:auto;
   }
 
+  .addressPopup .address-list .address-head {
+    margin: 0.2em 0;
+  }
+
   .addressPopup .address-list > .switch > .title {
     color: #9aa0a4;
   }
@@ -964,4 +1052,216 @@ export default {
     background-color: #fff;
     font-size: 1em;
   }
+
+  .noticePopup .body {
+    padding: 1em;
+    overflow: auto;
+    height: 100%;
+    position: relative;
+    padding-bottom: 60px;
+  }
+  .noticePopup .footer-btn {
+    position: fixed;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+  }
+  .noticePopup .footer-btn > button {
+    width: 100%;
+    padding: 1em 0;
+    border: none;
+    background-color:#43d1be;
+    color: #fff;
+    font-size: 1em;
+  }
+
+  .signaturePopup .body .title{
+    padding: 0.7em 0.5em;
+    font-size: 1.2em;
+    border-bottom: 1px solid #efefef;
+  }
+
+  .signaturePopup .body .title > .close {
+    opacity: 1;
+  }
+
+  .signaturePopup .body .canvas {
+    min-height: 240px;
+    background-color: #dddee1;
+  }
+  .signaturePopup .footer-btn {
+    overflow: hidden;
+  }
+  .signaturePopup .footer-btn > button {
+    width: 50%;
+    padding: 1em 0;
+    border: none;
+    background-color:#fff;
+    font-size: 1em;
+    float: left;
+  }
+  .signaturePopup .footer-btn > button.confirm-btn {
+    background-color:#43d1be;
+    color: #fff;
+  }
+
+  .upload-list{
+    overflow: hidden;
+    padding-top: 1.2em;
+  }
+  .upload-list ul li {
+    padding-right: 5px;
+    margin-left: 0;
+    margin-bottom: 5px;
+    position: relative;
+  }
+  .upload-list ul li > span{
+    display: inline-block;
+    width: 90px;
+    height: 90px;
+    max-height: 90px;
+    position: relative;
+    overflow: hidden;
+  }
+  .upload-list ul li > span.upload-plus {
+    font-size: 3em;
+    line-height: 90px;
+    text-align: center;
+    color: #9aa0a4;
+    border: 1px dotted #9aa0a4;
+    border-radius: 5px;
+  }
+  .upload-list ul li > .close-btn {
+    position: absolute;
+    right: 0;
+    top: -5px;
+    z-index: 1;
+    color: #333;
+    font-size: 1.2em;
+  }
+  .notice{
+    margin: 1.1em 0;
+    text-align: center;
+  }
+  .notice .link {
+    color: #43d1be;
+  }
+  .notice > span {
+    display: inline-block;
+  }
+  .notice .mint-checkbox-core::after {
+    width: 5px;
+  }
+
+  .signPopup {
+    position: fixed;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 99;
+  }
+  .signPopup.on {
+    top: initial;
+    bottom: 0;
+  }
+  .signPopup.off {
+    top: 100%;
+    bottom: initial;
+  }
+  .signPopup .body{
+    background-color: #fff;
+  }
+  .signPopup .body .title{
+    padding: 0.7em 0.5em;
+    font-size: 1.2em;
+    border-bottom: 1px solid #efefef;
+  }
+
+  .signPopup .body .title > .close {
+    opacity: 1;
+  }
+
+  .signPopup .body .canvas {
+    min-height: 150px;
+    padding: 0 1em;
+    /* background-color: #dddee1; */
+  }
+  .signPopup .footer-btn {
+    overflow: hidden;
+    border-top: 1px solid #efefef;
+  }
+  .signPopup .footer-btn > button {
+    width: 50%;
+    padding: 1em 0;
+    border: none;
+    background-color:#fff;
+    font-size: 1em;
+    float: left;
+  }
+  .signPopup .footer-btn > button.confirm-btn {
+    background-color:#43d1be;
+    color: #fff;
+  }
+  .light-box {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    z-index: 9999;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .light-box > .table {
+    width: 100%;
+    height: 100%;
+    display: table;
+  }
+  .light-box > .table > .cell {
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+  }
+  .light-box > .table > .cell > img {
+    max-width: 80%;
+  }
+  .footer {
+    margin: 10px 0;
+  }
+</style>
+
+<style>
+  .noticePopup.mint-popup-bottom{
+    top: 0 ;
+  }
+  .notice .mint-checklist {
+    display: inline-block;
+    float: left;
+  }
+  .notice .mint-checklist > .mint-checklist-title {
+    display: none;
+  }
+  .notice .mint-checklist > .mint-cell {
+    min-height: 0;
+    background-image: none;
+    background-color: transparent;
+  }
+  .notice .mint-checklist > .mint-cell .mint-cell-wrapper{
+    font-size: 1em;
+    background-image: none;
+    padding: 0;
+  }
+  .notice .mint-checklist > .mint-cell .mint-cell-wrapper .mint-checklist-label{
+    padding: 0;
+  }
+  .notice .mint-checklist .mint-checkbox-core::after {
+    width: 5px;
+  }
+  .notice .mint-checkbox-input:checked + .mint-checkbox-core {
+    background-color: #43d1be;
+    border-color: #43d1be;
+  }
+  .sign-page .form .table .tr .td .mint-radiolist{
+    width: 200px;
+    float: right;
+  }
 </style>

src/views/voucherDetail/index.vue

@@ -20,6 +20,13 @@
           <div class="big-title" v-if="voucherType === '2'">免费<span class="unit">价值{{voucherData.cost}}元</span></div>
           <div class="big-title" v-else>{{voucherData.cost}}<span class="unit">元</span></div>
           <div class="text-center">{{voucherData.voucherName}}</div>
+          <div class="qrcode-block">
+            <div class="qrcode-inner">
+              <mt-spinner v-show="qrcodeLoading" type="fading-circle" color="#43d1be"></mt-spinner>
+              <div id="qrcode"></div>
+            </div>
+            <h4 class="text-danger text-center">请在使用时将券码出示给医生</h4>
+          </div>
           <div class="table">
             <div class="tr">
               <div class="td label">领取人：</div>
@@ -73,7 +80,7 @@
         <div v-show="contentMessageVisible" class="message-block"><i class="glyphicon glyphicon-info-sign"></i> 暂无相关健康知识！</div>
       </div>
       <!-- 扫码核销 -->
-      <div class="model" v-show="qrCodeVisible">
+      <!-- <div class="model" v-show="qrCodeVisible">
         <div class="model-body">
           <div class="title">医生扫描券码即可服务</div>
           <div id="qrcode"></div>
@@ -81,7 +88,7 @@
         <div class="text-center model-close">
           <i class="glyphicon glyphicon-remove-circle" @click="qrCodeVisible=false"></i>
         </div>
-      </div>
+      </div> -->
 
       <!-- 小贴士 -->
       <div class="popup-model" v-if="tipsPopupVisible">
@@ -120,7 +127,8 @@ export default {
       contentData: [], // 内容流数据
       contentMessageSpinner: true, // 内容流加载状态，默认显示
       contentMessageVisible: false, // 内容流文字提示，默认不显示，接口返回数组为0显示
-      qrCodeVisible: false, // “查看券码”弹窗显示状态
+      qrCodeVisible: true, // 二维码显示状态
+      qrcodeLoading: true,
       tipsPopupVisible: false, // “小贴士”弹窗显示状态
       tipsData: { // “小贴士”数据
         tipsTime: '无',
@@ -155,6 +163,7 @@ export default {
             data.logoLoading = true // 图片加载中标识
             this.voucherData = data
             this.foreachButtons() // 配置按钮图标
+            this.qrCodePopup() // 获取券的核销二维码
             console.log('getVoucherInfoByIdFn' + this.voucherData.merchantsLogo)
           }
         }).catch((error) => {
@@ -213,10 +222,12 @@ export default {
       }
     },
     qrCodePopup () { // 核销二维码弹窗
-      document.getElementById('qrcode').innerHTML = ''
+      console.log(this.voucherId)
+      // document.getElementById('qrcode').innerHTML = ''
       getQrCodeByVoucherId(this.voucherId).then(res => {
+        this.qrcodeLoading = false
         if (res && res.msg === 'success') {
-          this.qrCodeVisible = true
+          // this.qrCodeVisible = true
           let qrcode = new QRCode('qrcode', {
             width: 200,
             height: 200,
@@ -225,8 +236,13 @@ export default {
             colorLight: '#fff'
           })
           qrcode.clear()
-          qrcode.makeCode(JSON.stringify(res.data))
+          if (res.data) {
+            qrcode.makeCode(JSON.stringify(res.data))
+          } else {
+            this.qrCodeVisible = false
+          }
         } else {
+          this.qrCodeVisible = false
           this.$toast({
             message: '获取服务券二维码失败',
             position: 'center',
@@ -357,4 +373,30 @@ export default {
     font-weight:bold;
     text-align: right;
   }
+  .detail-card .body .qrcode-block {
+    margin: 2em 0;
+  }
+  .detail-card .body .qrcode-block h4{
+    font-size: 1.2em;
+  }
+  .detail-card .body .qrcode-inner {
+    margin-bottom: 1em;
+    text-align: center;
+  }
+  .detail-card .body .qrcode-inner #qrcode {
+    display: inline-block;
+    width: 220px;
+    height: 220px;
+    padding: 10px;
+    background-color: #fff;
+    box-shadow: 0 0 16px rgb(221, 221, 221, 1);
+  }
+</style>
+
+<style>
+  .detail-card .mint-spinner-fading-circle{
+    width: 5em !important;
+    height: 5em !important;
+    margin: 0 auto;
+  }
 </style>