支付逻辑开发

src/api/pay.api.js

@@ -36,4 +36,18 @@ const getCoupon = function(params) {
   return request.post(`${talosApi}/open/checkout/pay_coupon_list`, params);
 };
 
-export { pay, prepay, sendSms, queryPayInfo, queryPayStatus, desSalt, h5AppyUrl, getCoupon };
+const ocrFaceId = function(params) {
+  return request.post(`${talosApi}open/checkout/ocr_faceId`, params);
+};
+
+export {
+  pay,
+  prepay,
+  sendSms,
+  queryPayInfo,
+  queryPayStatus,
+  desSalt,
+  h5AppyUrl,
+  getCoupon,
+  ocrFaceId
+};

src/pay/STATIC_DATA.js

@@ -8,12 +8,15 @@ const payTypeE = [
   'PD_YXMMAEC_UserClickCashierSelectXiangHuaCardPay',
   'PD_YXMMAEC_UserClickCashierSelectWechatPay'
 ];
+
 const codeArr = ['4034', '4035', '4036'];
 // (4034, "密码错误"),
 // (4035, "密码重试超限，无法验证"),
 // (4036, "验证码错误");
+
 const payStatus = [3, 5]; // 展示支付文案
 const creditStatus = [1, 2]; //展示开通文案
+
 // (1, "VCC未申请"),
 // (2, "VCC审核中"),
 // (3, "VCC审核失败"),
@@ -24,6 +27,7 @@ const ACCOUNT_APPLY_AUDITING = 2;
 const ACCOUNT_APPLY_AUDIT_FAIL = 3;
 const ACCOUNT_APPLY_FAIL = 4;
 const ACCOUNT_APPLY_SUCCESS = 5;
+
 // 1信用支付 2微信支付 3支付宝支付 4信用支付_微信支付 5信用支付_支付宝支付 6虚拟支付0元
 const CREDIT_PAY = 1;
 const WECHAT_PAY = 2;
@@ -43,12 +47,84 @@ const PAYMENT_CODE_PAY = 1; // 支付密码
 const SMS_VERIFICATION_CODE_PAY = 2; //短信验证码
 
 const PAY_SUCCESS = 3; // 支付成功
+const PAY_PAYING = 2; //支付中
 
+function isDetentionFn() {
+  // 推荐开通享花卡
+  if (this.creditPayInfo.accountStatus !== ACCOUNT_APPLY_SUCCESS) {
+    this.$dialog({
+      message: '您有一笔免费额度可以使用，40天免息等你拿',
+      confirmButtonText: '立即开通',
+      cancelButtonText: '继续支付',
+      confirmButtonColor: '#EC1500',
+      onCancel: () => {
+        this.pay();
+      },
+      onConfirm: () => {
+        this.goApply();
+      }
+    });
+  } else if (
+    // 推荐享花卡支付
+    this.creditPayInfo.accountStatus === ACCOUNT_APPLY_SUCCESS &&
+    this.creditPayList.isGroupPay
+  ) {
+    this.$dialog({
+      message: '使用组合支付部分金额可免洗使用40天哦！',
+      confirmButtonText: '组合支付',
+      cancelButtonText: '继续支付',
+      confirmButtonColor: '#EC1500',
+      onCancel: () => {
+        this.pay();
+      },
+      onConfirm: () => {
+        // 推荐组合支付
+        for (let key in this.creditPayList.payList) {
+          if (this.creditPayList.payList[key].isRecommend) {
+            const type = this.creditPayList.payList[key].payType;
+            this.changePayType(type, this.creditPayList.payList[key].mergePayPretreatmentInfo);
+            this.pay();
+            return;
+          }
+        }
+      }
+    });
+  } else if (
+    this.creditPayInfo.accountStatus === ACCOUNT_APPLY_SUCCESS &&
+    !this.creditPayList.isGroupPay
+  ) {
+    this.$dialog({
+      message: '使用享花卡支付可免洗使用40天哦',
+      confirmButtonText: '享花卡支付',
+      cancelButtonText: '继续支付',
+      confirmButtonColor: '#EC1500',
+      onCancel: () => {
+        this.pay();
+      },
+      onConfirm: () => {
+        // 切换享花卡支付
+        this.changePayType(CREDIT_PAY);
+        this.pay();
+      }
+    });
+  }
+}
+function filterAllPayList(type, data) {
+  for (let item in data.payList) {
+    if (data.payList[item].payType === type) {
+      data.payList[item].isCheck = true;
+      continue;
+    }
+    data.payList[item].isCheck = false;
+  }
+  return data;
+}
 export {
   status,
   codeArr,
   payTypeE,
   payStatus,
+  PAY_PAYING,
   CREDIT_PAY,
   WECHAT_PAY,
   ALIPAY_PAY,
@@ -58,6 +134,8 @@ export {
   IS_THIRD_PAY,
   IS_GROUP_PAY,
   IS_CREDIT_PAY,
+  isDetentionFn,
+  filterAllPayList,
   ACCOUNT_NO_APPLY,
   PAYMENT_CODE_PAY,
   ACCOUNT_APPLY_FAIL,

src/pay/components/Contract.vue

+<template>
+  <div class="contract">
+    <cr-checkbox
+      v-model="isCheck"
+      shape="round"
+      class="contract-checkbox"
+      btn-size="mini"
+      @change="change"
+    />
+    <p class="contract-list">
+      勾选同意
+      <span
+        v-for="contract in contractList"
+        :key="contract.contractName"
+        @click="goview(contract.contractVisitUrl)"
+      >
+        《{{ contract.contractName }}》</span
+      >
+    </p>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Contract',
+  props: {
+    contractList: Array
+  },
+  data() {
+    return {
+      isCheck: false
+    };
+  },
+  methods: {
+    goview(url) {
+      window.location.href = url;
+    },
+    change(e) {
+      this.$emit('change', e);
+    }
+  }
+};
+</script>
+<style lang="less">
+.contract {
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  color: @gray-5;
+  .text-10;
+  &-checkbox {
+    // margin-right: 2px;
+    // height: 14px;
+  }
+  &-list {
+    display: inline-flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    color: @gray-5;
+    span {
+      color: @red;
+    }
+  }
+}
+</style>

src/pay/components/PayCardItem.vue

@@ -11,7 +11,7 @@
             </div>
             <p>{{ value.accountStatusDesc }}</p>
           </div>
-          <p v-if="value.mergePayPretreatmentInfo" class="content-info-amount">
+          <p v-if="isGroupPay && value.mergePayPretreatmentInfo" class="content-info-amount">
             {{ value.mergePayPretreatmentInfo && value.mergePayPretreatmentInfo.creditPayAmt }}
           </p>
         </div>
@@ -65,10 +65,8 @@ export default {
       if (this.disabled || this.value.disabled) {
         return;
       }
-      // registeredEvents(payTypeE[val - 1], {
-      //   order_id: this.pay.orderNo
-      // });
-      this.payCard.changePayType(payType);
+      this.$emit('click');
+      this.pay.changePayType(payType);
     },
     openCouponModal() {
       if (this.couponDisabled) return;

src/pay/components/PayGroupCard.vue

@@ -7,99 +7,37 @@
         :coupon-info="couponInfo"
         :show-coupon="showCoupon"
         :risk-limit="riskLimit"
-        :coupon-disabled="showCoupon && !payCouponCouldBeUsed"
       />
-      <!-- <div class="payCardItem">
-      <div class="type-item">
-        <div class="type-item-content">
-          <div class="type-item-content-info">
-            <cr-image
-              :src="creditPayInfo.icon"
-              class="content-info-icon"
-              mode="aspectFit"
-              width="39"
-              height="39"
-            />
-            <div class="content-info-con">
-              <div class="content-info-tit">
-                <p class="content-info-tit">{{ creditPayInfo.name }}</p>
-                <p v-if="creditPayInfo.tagName" class="content-info-tit_tag">
-                  {{ creditPayInfo.tagName }}
-                </p>
-              </div>
-              <p>{{ creditPayInfo.accountStatusDesc }}</p>
-            </div>
-            <p class="type-item-amount content-info-amount">
-              {{
-                creditPayInfo.mergePayPretreatmentInfo &&
-                  creditPayInfo.mergePayPretreatmentInfo.creditPayAmt
-              }}
-            </p>
-          </div>
-          <div
-            v-if="showCoupon && creditPayInfo.payType === 1"
-            class="couponDes"
-            :class="{ disable: couponDisabled }"
-            @click.stop="openCouponModal"
-          >
-            {{ couponInfo.name || '未选择优惠券' }}
-            <cr-icon type="arrow" class="selectArrow" size="15px" />
-          </div>
-        </div>
-      </div>
-      <p v-if="riskLimit && creditPayInfo.riskManagementDesc && !disabled" class="limitDes">
-        {{ creditPayInfo.riskManagementDesc }}
-      </p>
-    </div> -->
       <p class="dashed">
         <cr-checkbox
-          v-model="value.isCheck"
+          v-model="thirdPayInfo.isCheck"
           shape="round"
           checked-color="#EC1500"
-          :disabled="disabled || value.disabled"
+          :disabled="disabled || thirdPayInfo.disabled"
           class="dashed-checkbox"
-          @click.native="changePayType(value)"
+          @click.native="changePayType(thirdPayInfo)"
         />
       </p>
-      <!-- <div class="payCardItem">
-      <div class="type-item">
-        <div class="type-item-content">
-          <div class="type-item-content-info">
-            <cr-image
-              :src="creditPayInfo.icon"
-              class="content-info-icon"
-              mode="aspectFit"
-              width="39"
-              height="39"
-            />
-            <div class="content-info-con">
-              <div class="content-info-tit">
-                <p class="content-info-tit">{{ creditPayInfo.name }}</p>
-              </div>
-            </div>
-            <p class="type-item-amount content-info-amount">
-              ¥1111111{{
-                creditPayInfo.mergePayPretreatmentInfo &&
-                  creditPayInfo.mergePayPretreatmentInfo.creditPayAmt
-              }}
-            </p>
-          </div>
-        </div>
-      </div>
-    </div> -->
       <PayCardItem :is-group-pay="true" :value="thirdPayInfo" />
     </div>
-    <p class="group-more b-t">更多支付方式<cr-icon type="arrow" size="15px" /></p>
+    <p class="group-more b-t" @click="openMore">更多支付组合<cr-icon type="arrow" size="15px" /></p>
+    <cr-popup v-model="morePopup" round position="bottom" :style="{ height: '30%' }" closeable>
+      <p class="more-title">更换支付组合</p>
+      <PayCardItem
+        v-for="item in thirdPayList"
+        :key="item.payType"
+        :value="item"
+        :coupon-info="couponInfo"
+        :show-coupon="showCoupon"
+        :risk-limit="riskLimit"
+        @click="morePopup = false"
+      />
+    </cr-popup>
   </div>
 </template>
 <script>
 // import { registeredEvents } from '@/utils/sa';
 import PayCardItem from './PayCardItem.vue';
-const payTypeE = [
-  'PD_YXMMAEC_UserClickCashierSelectXiangHuaCardPay',
-  'PD_YXMMAEC_UserClickCashierSelectWechatPay'
-];
-const payTypeMiniAppE = ['c_cashierselectxianghuacardpay', 'c_cashierselectwechatpay'];
 export default {
   name: 'PayGroupCard',
   inject: ['payCard', 'pay'],
@@ -117,35 +55,42 @@ export default {
   },
   data() {
     return {
-      creditPayInfo: this.value.creditPayInfo || {},
-      thirdPayList: []
+      morePopup: false,
+      thirdPayList: [],
+      creditPayInfo: this.value.creditPayInfo || {}
     };
   },
   computed: {
     thirdPayInfo: function() {
-      // 切换支付组合方式
       let temp = {};
       for (const key in this.value) {
-        if (this.value[key].isRecommend) {
+        if (this.value[key].isRecommend || this.value[key].isCheck) {
           temp = { ...this.value[key] };
         }
       }
       return temp;
     }
   },
+  mounted() {
+    for (const key in this.value) {
+      if (this.value[key].isGroupPay) {
+        this.thirdPayList.push(this.value[key]);
+      }
+    }
+  },
   methods: {
-    changePayType({ payType }) {
+    changePayType({ payType, mergePayPretreatmentInfo }) {
       if (this.disabled || this.creditPayInfo.disabled) {
         return;
       }
-      // registeredEvents(payTypeE[val - 1], {
-      //   order_id: this.pay.orderNo
-      // });
-      this.payCard.changePayType(payType);
+      this.payCard.changePayType(payType, mergePayPretreatmentInfo);
     },
     openCouponModal() {
       if (this.couponDisabled) return;
       this.pay.openCouponModal(this.pay.orderNo);
+    },
+    openMore() {
+      this.morePopup = true;
     }
   }
 };
@@ -165,8 +110,8 @@ export default {
   align-items: center;
   justify-content: center;
 }
-.payCardItem {
-  padding-bottom: 2px;
+.cr-popup--close-top-right {
+  z-index: 2;
 }
 .dashed {
   width: 309px;
@@ -191,94 +136,13 @@ export default {
     background-size: 100%;
   }
 }
-.couponDes {
-  margin-left: 50px;
-  display: inline-block;
-  color: @text-color-red;
-  .text-12;
-  border: @border-width-base solid @text-color-light;
-  border-radius: 3px;
-  padding: 0 0 0 3px;
-  &.disable {
-    color: @font-color-disabled;
-    border-color: @font-color-disabled;
-  }
-  text {
-    color: @text-color-red;
-    .text-12;
-    &.disable {
-      color: @font-color-disabled;
-    }
-  }
-}
-.limitDes {
-  color: #ed6a0c;
-  background: #fffbe8;
-  .text-12;
-  padding: 10px 8px;
-  margin: 8px;
-  border-radius: 3px;
-}
-.type-item {
-  padding: 12px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-  &-content {
-    width: 100%;
-  }
-  &-amount {
-    .text-15;
-    color: @black;
-    &-credit {
-      margin-top: -13%;
-    }
-  }
-  &-content-info {
-    display: flex;
-    width: 100%;
-    align-items: center;
-  }
-}
-.content-info-icon {
-  width: 39px;
-  height: 39px;
-  margin-right: @padding-sm;
-}
-.content-info-tit {
-  font-size: 15px;
-  color: @font-color-dark;
-  margin-bottom: 2px;
+.more-title {
+  .text-16;
   display: flex;
+  justify-content: center;
   align-items: center;
-  &_tag {
-    display: inline-flex;
-    align-items: center;
-    height: 16px;
-    border: @border-width-base solid @text-color-light;
-    border-radius: 3px;
-    font-size: 11px;
-    color: @text-color-light;
-    margin-left: @padding-unit;
-    padding: 0 2px;
-  }
-}
-.content-info-con {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  .text-12;
-  color: @font-color-light;
-}
-.content-info-amount {
-  &::before {
-    content: '¥';
-  }
-  .text-15;
+  height: 48px;
   color: @black;
-}
-.selectArrow {
-  vertical-align: text-top;
+  position: relative;
 }
 </style>

src/pay/index.less

@@ -3,14 +3,14 @@
   padding: @padding-xs;
 }
 .price-box {
-  background-color: #fff;
+  background-color: @white;
   height: 120px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   .text-13;
-  color: #333333;
+  color: @black;
   border-radius: @border-radius-sm;
 
   .price{
@@ -29,6 +29,28 @@
     margin-top: @padding-unit;
   }
 }
+.payBtn{
+  width: 100%;
+  position: fixed;
+  padding: @padding-xs @padding-lg;
+  box-sizing: border-box;
+  z-index: 99;
+  bottom: 0;
+  left:0;
+  background-color:@white;
+  button{
+    width: 100%;
+    color: @white;
+    font-size: @line-height-sm;
+    border-radius: @border-radius-lx;
+  }
+  button[disabled] {
+    color: rgba(255,255,255,.6);
+  }
+  &-primary {
+    @primary-bg();
+  }
+}
 .btn{
   height:50px;
   width: 100%;
@@ -37,7 +59,7 @@
   box-sizing: border-box;
   bottom: 0;
   left:0;
-  background-color:#fff;
+  background-color:@white;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -60,4 +82,8 @@
     background-color: @white !important;
   }
 
+}
+.placeholder{
+  width: 100%;
+  height: 100px;
 }
\ No newline at end of file

src/service/weChat_pay.js → src/service/pay.js

@@ -6,7 +6,7 @@
  */
 
 import qs from 'qs';
-import { isXyqb } from '@/service/validation.service';
+import { isApp as isXyqb } from '@/service/validation.service';
 /**
  * payByWeixinJsapi
  * @description: 微信通过jsapi支付
@@ -70,6 +70,28 @@ function payByWeixinH5(info) {
   nextPage.click();
 }
 
+/**
+ * payByALIH5
+ * @description: 支付宝支付
+ * @param {type}
+ * @return:
+ */
+function payByALIH5(info) {
+  if (!info.order_string) return;
+  console.log('ali:', info.order_string);
+  const aliWrap = document.createElement('div');
+  aliWrap.id = 'ALIWEB_WRAP';
+  aliWrap.setAttribute('id', 'ALIWEB_WRAP');
+  aliWrap.innerHTML = info.order_string;
+  document.body.appendChild(aliWrap);
+  document.forms[0].submit();
+
+  setTimeout(() => {
+    const ALIWEB_WRAP = document.getElementById('ALIWEB_WRAP');
+    if (ALIWEB_WRAP != null) ALIWEB_WRAP.parentNode.removeChild(ALIWEB_WRAP);
+  }, 500);
+}
+
 /**
  * payByThirdPartyCashier
  * @description: 第三方收银台
@@ -111,6 +133,9 @@ export function payByWay(type = 'THIRD', payInfo) {
       if (payInfo.url.indexOf('tenpay') > -1) {
         payByWeixinH5(payInfo);
         reject();
+      } else if (type === 'ALIWEB') {
+        payByALIH5(payInfo);
+        resolve();
       } else {
         payByThirdPartyCashier(payInfo);
         reject();