[NEW] 添加卡单支付微信分享支付功能

src/views/ebiz/cardList/Pay.vue

@@ -6,7 +6,7 @@
         <van-field :value="underWriteData.orderAmount == undefined ? '' : `${underWriteData.orderAmount} 元`" readonly label="支付金额" />
       </van-cell-group>
       <!-- 银行卡支付开始 -->
-      <div class="money">
+      <!-- <div class="money">
         <div>
           <img src="../../../assets/images/u10280.png" alt style="margin-top:-5px;margin-right:10px;" />
           <span class="oi">银行卡支付</span>
@@ -14,9 +14,26 @@
         <div class="i mr20">
           <van-radio-group v-model="radio" class="flex justify-content-fe"><van-radio name="1"></van-radio></van-radio-group>
         </div>
-      </div>
+      </div> -->
+      <van-cell-group class="flex align-items-c">
+        <img :src="src" class="pl10" />
+        <van-cell title="银行卡支付" clickable>
+          <!-- <van-checkbox v-model="checked" class="flex justify-content-fe"></van-checkbox> -->
+          <van-radio-group v-model="radio" class="flex justify-content-fe">
+            <van-radio name=""></van-radio>
+          </van-radio-group>
+        </van-cell>
+      </van-cell-group>
+      <van-cell-group class="flex align-items-c">
+        <img :src="vxSrc" class="vximg" />
+        <van-cell title="微信支付" clickable>
+          <van-radio-group v-model="radio" class="flex justify-content-fe">
+            <van-radio name="3" @click="vxVerify"></van-radio>
+          </van-radio-group>
+        </van-cell>
+      </van-cell-group>
       <!-- 银行卡支付结束 -->
-      <van-cell-group>
+      <van-cell-group v-if="radio == '' && !isWeixin">
         <van-field
           v-model="underWriteData.name"
           label="姓名"
@@ -94,6 +111,10 @@
         <input name="S3Sign" type="hidden" v-model="payParam.S3Sign" />
       </form>
       <div class="bg-white bottom-btn"><van-button type="danger" size="large" @click="pay" v-no-more-click="1000">支付</van-button></div>
+      <div class="bg-white bottom-btn" v-if="radio == '3' && !isWeixin">
+        <van-button type="danger" style="width: 50vw;height: 13vw" @click="pay" v-no-more-click="1000">支付</van-button>
+        <van-button type="danger" style="width: 50vw;height: 13vw" @click="share" v-no-more-click="1000">分享</van-button>
+      </div>
     </div>
     <!-- 银行卡扫描按钮 -->
     <van-popup v-model="isScan" style="height:100vh" position="bottom">
@@ -131,7 +152,12 @@ export default {
     [Radio.name]: Radio
   },
   data() {
+    let isWeixin = this.$utils.device().isWeixin //判断环境
     return {
+      // 银行卡支付图片地址
+      src: this.$assetsUrl + 'images/cardImg.png',
+      // 微信支付图片地址
+      vxSrc: this.$assetsUrl + 'images/vxImg.png',
       // trialList: JSON.parse(localStorage.trialList),
       // 核保数据
       orderStatus: '',
@@ -142,7 +168,7 @@ export default {
         bankCode: '', //银行卡号
         bankName: '' //开户银行
       },
-      radio: '1',
+      radio: '',
       result: [],
       isScan: false, //是否显示证件扫描组件
       isClear: false, //是否清空
@@ -188,10 +214,17 @@ export default {
         tradeState: '' // 状态
       },
       gotPayParam: false, // 是否已正确获取支付参数,
-      payStatus: '' // 接口返回的支付状态
+      payStatus: '', // 接口返回的支付状态
+      isWeixin, // 是否为微信环境
+      isLoading: false // 分享到微信后的页面loading
+    }
+  },
+  created() {
+    if (this.isWeixin) {
+      this.radio = '3'
+      this.isLoading = true
     }
   },
-  created() {},
   mounted() {
     setTimeout(() => {
       // eslint-disable-next-line no-undef
@@ -205,20 +238,30 @@ export default {
     // this.underWrite.orderAmount = this.trialList[0].prem
     document.body.style.backgroundColor = '#fff'
     window.appCallBack = this.appCallBack
-    // 获取银行卡
-    this.getBankList()
-    // this.getOrderDetail()
-    // console.log('----保融form.action', config.payUrl)
-    // if (localStorage.salelist == '1') {
-    // 第一次支付 调核保获取
-    // this.underWrite()
-    // this.underWriteData = JSON.parse(window.localStorage.getItem('underWriteData'))
-    // } else {
     // 再次支付 调详情 获取信息
     this.getOrderDetail()
-    // this.underWriteData = JSON.parse(window.localStorage.getItem('underWriteData'))
-    // }
-    // console.log('--自核结果--支付信息：', JSON.stringify(this.underWriteData))
+    // 不在微信环境下
+    if (!this.isWeixin) {
+      // 获取银行卡
+      this.getBankList()
+      // this.getOrderDetail()
+      // console.log('----保融form.action', config.payUrl)
+      // if (localStorage.salelist == '1') {
+      // 第一次支付 调核保获取
+      // this.underWrite()
+      // this.underWriteData = JSON.parse(window.localStorage.getItem('underWriteData'))
+      // } else {
+
+      // this.underWriteData = JSON.parse(window.localStorage.getItem('underWriteData'))
+      // }
+      // console.log('--自核结果--支付信息：', JSON.stringify(this.underWriteData))
+    } else {
+      let token = this.$route.query.token
+      let orderNo = this.$route.query.orderNo
+      localStorage.token = token
+      localStorage.orderNo = orderNo
+      this.pay()
+    }
   },
   beforeRouteLeave(to, from, next) {
     document.body.style.backgroundColor = ''
@@ -356,6 +399,7 @@ export default {
           this.underWriteData = {
             appntName: res.orderDTO.insuredDTOs[0].riskDTOLst[0].riskName,
             name: res.orderDTO.appntDTO.name,
+            idType: res.orderDTO.appntDTO.idType,
             bankCode: res.orderDTO.orderAccountDTO.cardBookCode,
             bankName: res.orderDTO.orderAccountDTO.bankCode,
             cardBookCode: res.orderDTO.orderAccountDTO.cardBookCode,
@@ -371,6 +415,7 @@ export default {
           this.underWriteData = {
             accountName: '',
             appntName: '',
+            idType: '',
             bankCode: '',
             bankName: '',
             cardBookCode: '',
@@ -438,7 +483,8 @@ export default {
     acceptInsurance() {
       let data = {
         orderNo: window.localStorage.getItem('orderNo'),
-        cardOrder: 'cardOrder'
+        cardOrder: 'cardOrder',
+        payType: this.radio
       }
       acceptInsurance(data).then(res => {
         console.log('----取支付参数结果：', JSON.stringify(res))
@@ -481,7 +527,11 @@ export default {
             }, 100)
           })
         } else {
-          this.$toast.clear()
+          if (!this.isWeixin) {
+            this.$toast.clear()
+          } else {
+            this.isLoading = false
+          }
           this.$toast(res.resultMessage)
         }
       })
@@ -542,6 +592,31 @@ export default {
         this.$toast(res.resultMessage)
       }
       // })
+    },
+    // 选择微信支付校验身份证类型
+    vxVerify() {
+      if (this.underWriteData.idType != '1') {
+        this.$dialog
+          .confirm({
+            message: '证件类型不是身份证，无法使用微信支付',
+            showCancelButton: false
+          })
+          .then(() => {
+            this.radio = ''
+          })
+      }
+    },
+    share() {
+      let shareName = this.underWriteData.name
+      EWebBridge.webCallAppInJs('bridge', {
+        flag: 'share',
+        extra: {
+          title: `国富人寿卡单投保（${shareName}）付款`,
+          content: '付款进行',
+          url: location.origin + '/#/cardList/pay?orderNo=' + localStorage.orderNo + '&token=' + localStorage.token,
+          img: this.$assetsUrl + 'images/logo.png'
+        }
+      })
     }
   }
 }
@@ -552,36 +627,44 @@ export default {
 * {
   box-sizing: border-box;
 }
-.oi {
-  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
-  font-weight: 700;
-  font-style: normal;
-  color: #666666;
-}
-.money {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  z-index: 100;
-  background: white;
-  height: 40px;
-  overflow: hidden;
-  > div:nth-of-type(1) {
-    display: flex;
-    align-items: center;
+// .oi {
+//   font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
+//   font-weight: 700;
+//   font-style: normal;
+//   color: #666666;
+// }
+// .money {
+//   display: flex;
+//   width: 100%;
+//   align-items: center;
+//   justify-content: space-between;
+//   z-index: 100;
+//   background: white;
+//   height: 40px;
+//   overflow: hidden;
+//   > div:nth-of-type(1) {
+//     display: flex;
+//     align-items: center;
 
-    img {
-      width: 33px;
-      height: 32px;
-    }
-    span {
-      font-size: 14px;
-    }
-  }
-  > div:nth-of-type(2) {
-    display: flex;
-    align-items: center;
-  }
+//     img {
+//       width: 33px;
+//       height: 32px;
+//     }
+//     span {
+//       font-size: 14px;
+//     }
+//   }
+//   > div:nth-of-type(2) {
+//     display: flex;
+//     align-items: center;
+//   }
+// }
+
+.vximg {
+  width: 25px;
+  height: 25px;
+  padding-left: 13px;
+  padding-right: 2px;
+  box-sizing: content-box;
 }
 </style>