组合样式

src/pay/STATIC_DATA.js

@@ -24,10 +24,21 @@ const ACCOUNT_APPLY_AUDITING = 2;
 const ACCOUNT_APPLY_AUDIT_FAIL = 3;
 const ACCOUNT_APPLY_FAIL = 4;
 const ACCOUNT_APPLY_SUCCESS = 5;
-// 1信用支付 2微信支付 3支付宝支付
+// 1信用支付 2微信支付 3支付宝支付 4信用支付_微信支付 5信用支付_支付宝支付 6虚拟支付0元
 const CREDIT_PAY = 1;
 const WECHAT_PAY = 2;
 const ALIPAY_PAY = 3;
+const CREDIT_AND_WECHAT_PAY = 4;
+const CREDIT_AND_ALIPAY_PAY = 5;
+
+// 三方支付
+const IS_THIRD_PAY = method => [WECHAT_PAY, ALIPAY_PAY].indexOf(method) > -1;
+//组合支付
+const IS_GROUP_PAY = method => [CREDIT_AND_WECHAT_PAY, CREDIT_AND_ALIPAY_PAY].indexOf(method) > -1;
+//信用支付
+const IS_CREDIT_PAY = method =>
+  [CREDIT_AND_WECHAT_PAY, CREDIT_AND_ALIPAY_PAY, CREDIT_PAY].indexOf(method) > -1;
+
 const PAYMENT_CODE_PAY = 1; // 支付密码
 const SMS_VERIFICATION_CODE_PAY = 2; //短信验证码
 
@@ -44,10 +55,15 @@ export {
   PAY_SUCCESS,
   payTypeText,
   creditStatus,
+  IS_THIRD_PAY,
+  IS_GROUP_PAY,
+  IS_CREDIT_PAY,
   ACCOUNT_NO_APPLY,
   PAYMENT_CODE_PAY,
   ACCOUNT_APPLY_FAIL,
   creditPayStatusType,
+  CREDIT_AND_WECHAT_PAY,
+  CREDIT_AND_ALIPAY_PAY,
   ACCOUNT_APPLY_SUCCESS,
   ACCOUNT_APPLY_AUDITING,
   ACCOUNT_APPLY_AUDIT_FAIL,

src/pay/components/PayCard.vue

 <template>
   <div class="pay-type-list">
-    <p class="type-title b-b">推荐支付方式</p>
-    <template v-if="single">
-      <payCardItem :pay-type="payType" :value="value" />
-    </template>
+    <p class="type-title b-b">{{ value.title }}</p>
+    <payGroupItem
+      v-if="value.isGroupPay"
+      v-model="payList"
+      :pay-type="payType"
+      :disabled="disabled"
+      :coupon-info="couponInfo"
+      :show-coupon="showCoupon"
+      :risk-limit="riskLimit"
+      :coupon-disabled="showCoupon && !payCouponCouldBeUsed"
+    />
     <template v-else>
-      <template v-for="(item, key) of value">
+      <template v-for="(item, key) of payList">
         <payCardItem
           v-if="item.show"
           :key="key"
@@ -23,10 +30,12 @@
 </template>
 <script>
 import payCardItem from './PayCardItem';
+import payGroupItem from './PayGroupCard.vue';
 export default {
   name: 'PayCard',
   components: {
-    payCardItem
+    payCardItem,
+    payGroupItem
   },
   provide() {
     return {
@@ -45,18 +54,23 @@ export default {
     single: { type: Boolean, default: false },
     creditPay: { type: Boolean, default: false }
   },
+  data() {
+    return {
+      payList: this?.value?.payList || {}
+    };
+  },
   mounted() {
     console.log(this.value, 'value');
   },
   methods: {
     changePayType(payType) {
       // 需要初始化全部的选中状态
-      for (let item in this.value) {
-        if (this.value[item].payType === payType) {
-          this.value[item].isCheck = true;
+      for (let item in this.payList) {
+        if (this.payList[item].payType === payType) {
+          this.payList[item].isCheck = true;
           continue;
         }
-        this.value[item].isCheck = false;
+        this.payList[item].isCheck = false;
       }
       this.$emit('changePayType', payType);
     }

src/pay/components/PayCardItem.vue

 <template>
   <div class="payCardItem">
-    <div class="type-item b-t">
+    <div :class="['type-item', { 'b-t': !isGroupPay }]">
       <div class="type-item-content">
         <div class="type-item-content-info">
           <cr-image :src="value.icon" class="icon" mode="aspectFit" width="39" height="39" />
-          <div class="con">
-            <div class="tit">
-              <p class="tit">{{ value.name }}</p>
-              <p v-if="value.tagName" class="tag">{{ value.tagName }}</p>
+          <div class="content-info-con">
+            <div class="content-info-tit">
+              <p class="content-info-tit">{{ value.name }}</p>
+              <p v-if="value.tagName" class="content-info-tit_tag">{{ value.tagName }}</p>
             </div>
             <p>{{ value.accountStatusDesc }}</p>
           </div>
+          <p v-if="value.mergePayPretreatmentInfo" class="content-info-amount">
+            {{ value.mergePayPretreatmentInfo && value.mergePayPretreatmentInfo.creditPayAmt }}
+          </p>
         </div>
         <div
           v-if="showCoupon && value.payType === 1"
@@ -23,8 +26,10 @@
         </div>
       </div>
       <cr-checkbox
+        v-if="!isGroupPay"
         v-model="value.isCheck"
         shape="round"
+        class="type-item-checkbox"
         checked-color="#EC1500"
         :disabled="disabled || value.disabled"
         @click.native="changePayType(value)"
@@ -50,8 +55,9 @@ export default {
     payType: Number,
     disabled: Boolean,
     couponInfo: Object,
-    showCoupon: Boolean,
     riskLimit: Boolean,
+    showCoupon: Boolean,
+    isGroupPay: Boolean,
     couponDisabled: Boolean
   },
   methods: {
@@ -71,8 +77,9 @@ export default {
   }
 };
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .payCardItem {
+  width: 100%;
   padding-bottom: 2px;
 }
 .couponDes {
@@ -104,29 +111,39 @@ export default {
   border-radius: 3px;
 }
 .type-item {
+  width: 100%;
   // height: 134rpx;
-  padding: 8px;
+  padding: 12px 8px 12px 12px;
+  box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
+  &-content {
+    width: 100%;
+  }
   &-content-info {
+    width: 100%;
     display: flex;
+    // width: 308px;
     align-items: center;
   }
+  &-checkbox {
+    width: 18px;
+  }
 }
 .icon {
   width: 39px;
   height: 39px;
   margin-right: @padding-sm;
 }
-.tit {
+.content-info-tit {
   font-size: 15px;
   color: @font-color-dark;
   margin-bottom: 2px;
   display: flex;
   align-items: center;
-  .tag {
+  &_tag {
     display: inline-flex;
     align-items: center;
     height: 16px;
@@ -138,13 +155,20 @@ export default {
     padding: 0 2px;
   }
 }
-.con {
+.content-info-con {
   flex: 1;
   display: flex;
   flex-direction: column;
   .text-12;
   color: @font-color-light;
 }
+.content-info-amount {
+  &::before {
+    content: '¥';
+  }
+  .text-15;
+  color: @black;
+}
 .selectArrow {
   vertical-align: text-top;
 }

src/pay/components/PayGroupCard.vue

+<template>
+  <div>
+    <div class="groupCard">
+      <PayCardItem
+        :is-group-pay="true"
+        :value="creditPayInfo"
+        :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"
+          shape="round"
+          checked-color="#EC1500"
+          :disabled="disabled || value.disabled"
+          class="dashed-checkbox"
+          @click.native="changePayType(value)"
+        />
+      </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>
+  </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'],
+  components: {
+    PayCardItem
+  },
+  props: {
+    value: Object,
+    payType: Number,
+    disabled: Boolean,
+    couponInfo: Object,
+    showCoupon: Boolean,
+    riskLimit: Boolean,
+    couponDisabled: Boolean
+  },
+  data() {
+    return {
+      creditPayInfo: this.value.creditPayInfo || {},
+      thirdPayList: []
+    };
+  },
+  computed: {
+    thirdPayInfo: function() {
+      // 切换支付组合方式
+      let temp = {};
+      for (const key in this.value) {
+        if (this.value[key].isRecommend) {
+          temp = { ...this.value[key] };
+        }
+      }
+      return temp;
+    }
+  },
+  methods: {
+    changePayType({ payType }) {
+      if (this.disabled || this.creditPayInfo.disabled) {
+        return;
+      }
+      // registeredEvents(payTypeE[val - 1], {
+      //   order_id: this.pay.orderNo
+      // });
+      this.payCard.changePayType(payType);
+    },
+    openCouponModal() {
+      if (this.couponDisabled) return;
+      this.pay.openCouponModal(this.pay.orderNo);
+    }
+  }
+};
+</script>
+<style lang="less">
+.groupCard {
+  width: 320px;
+}
+.group-more {
+  .text-13;
+  width: 335px;
+  height: 36px;
+  margin: auto;
+  display: flex;
+  color: #ec1500;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+}
+.payCardItem {
+  padding-bottom: 2px;
+}
+.dashed {
+  width: 309px;
+  margin: auto;
+  position: relative;
+  border-bottom: 1px dashed #dcdcdc;
+  &-checkbox {
+    width: 18px;
+    position: absolute;
+    right: -22px;
+    top: -8px;
+  }
+  &::after {
+    content: '';
+    width: 24px;
+    height: 28px;
+    position: absolute;
+    margin-top: -12px;
+    left: 50%;
+    margin-left: -12px;
+    background: url('../../assets/images/addicon.png') no-repeat;
+    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;
+  display: flex;
+  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;
+  color: @black;
+}
+.selectArrow {
+  vertical-align: text-top;
+}
+</style>

src/pay/index.vue

@@ -10,9 +10,22 @@
       <p v-else>支付超时，订单关闭</p>
     </div>
 
-    <!-- 支付方式 -->
+    <!-- 推荐信用支付 -->
     <cr-pay-card
-      v-model="payTypeList"
+      v-model="creditPayList"
+      :pay-type="payType"
+      :disabled="overtime"
+      :risk-limit="riskLimit"
+      :show-coupon="showCoupon"
+      :coupon-info="selectedCoupon"
+      :has-pwd="creditPayInfo.hasPwd"
+      :pay-coupon-could-be-used="displayInfo.payCouponInfo.payCouponCouldBeUsed"
+      @changePayType="changePayType"
+    />
+
+    <!-- 其他支付方式 -->
+    <cr-pay-card
+      v-model="thirdPayList"
       :pay-type="payType"
       :disabled="overtime"
       :risk-limit="riskLimit"
@@ -67,7 +80,9 @@
 
 <script>
 import crPayCard from './components/PayCard';
+import { payByWay } from '@/service/weChat_pay';
 import crSmsCodeModal from './components/SmsModal';
+import { isWechat } from '@/service/validation.service';
 import { encryptByDESModeEBC } from '@/service/encrypt';
 import { registeredEvents } from '@/service/sa.service';
 import localStorage from '@/service/localStorage.service';
@@ -77,11 +92,14 @@ import {
   payTypeE,
   CREDIT_PAY,
   WECHAT_PAY,
+  PAY_SUCCESS,
   payTypeText,
   creditStatus,
+  IS_THIRD_PAY,
+  IS_GROUP_PAY,
+  IS_CREDIT_PAY,
   PAYMENT_CODE_PAY, // 支付密码
   ACCOUNT_APPLY_FAIL,
-  PAY_SUCCESS,
   creditPayStatusType,
   ACCOUNT_APPLY_SUCCESS,
   ACCOUNT_APPLY_AUDIT_FAIL,
@@ -114,6 +132,14 @@ export default {
       couponPopup: false,
       showGoFaceTip: false, // h5支付活体提示怎么处理
       payTypeList: {},
+      creditPayList: {
+        title: '推荐信用支付',
+        payList: {}
+      },
+      thirdPayList: {
+        title: '其他支付方式',
+        payList: {}
+      },
       displayInfo: {
         payCouponInfo: {}
       },
@@ -123,7 +149,8 @@ export default {
         fn: this.pay
       },
       payCouponList: [],
-      selectedCoupon: {}
+      selectedCoupon: {},
+      tradeType: isWechat ? 'JSAPI' : 'MWEB'
     };
   },
   computed: {
@@ -165,8 +192,18 @@ export default {
             if (p.isDefault) {
               this.payType = p.method;
             }
-            if (p.method === payType) {
-              this.$set(this.payTypeList, key, {
+            if (IS_THIRD_PAY(p.method) && p.method === payType) {
+              this.$set(this.thirdPayList.payList, key, {
+                ...displayInfo[key],
+                ...p,
+                show: true,
+                isCheck: p.isDefault || false
+              });
+              break;
+            }
+            if (IS_CREDIT_PAY(p.method) && (p.method - 1 === payType || p.method === payType)) {
+              this.creditPayList.isGroupPay = IS_GROUP_PAY(p.method);
+              this.$set(this.creditPayList.payList, key, {
                 ...displayInfo[key],
                 ...p,
                 show: true,
@@ -176,6 +213,7 @@ export default {
             }
           }
         }
+        console.log(this.creditPayList);
         if (key === 'creditPayInfo' && this.checkStatus(displayInfo[key], displayInfo)) {
           this.payTypeList[key].disabled = true;
         }
@@ -237,7 +275,7 @@ export default {
           this.accountS = {
             text: '认证提额',
             fn: () => {
-              // this.tip('appToFace'); //待处理
+              // 走h5活体流程
             }
           };
         } else if (accountStatus === ACCOUNT_APPLY_SUCCESS) {
@@ -308,6 +346,7 @@ export default {
     /* 预支付 */
     async pay(params) {
       this.error = '';
+      /* 设置密码 */
       if (this.payType === CREDIT_PAY && !this.creditPayInfo.hasPwd) {
         const url = `${this.creditPayInfo.pwdSetJumpUrl}&vccChannel=${VCC_CHANNEL}`;
         this.goH5(url);
@@ -320,6 +359,7 @@ export default {
         payCouponId: this.selectedCoupon.pickupId || ''
       };
       const [data, error] = params ? await pay(paramsData) : await prepay(paramsData);
+      /* 支付失败 */
       if (error) {
         if (codeArr.indexOf(error.response.businessCode) < 0) {
           this.payResult('Fail', error.msg);
@@ -333,17 +373,17 @@ export default {
       this.flowOrderNo = flowOrderNo;
 
       if (!params && this.payType === WECHAT_PAY) {
-        // 微信支付
-        this.wxPay(wxPayInfo);
+        /* 微信支付 */
+        payByWay(this.tradeType, { url: wxPayInfo.mwebUrl });
         return;
       }
       if (creditPayStatus === PAY_SUCCESS) {
-        //支付成功；
+        /*  支付成功 */
         this.payResult('Success');
         return;
       }
       if (creditPayStatus === PAYMENT_CODE_PAY || creditPayStatus === SMS_VERIFICATION_CODE_PAY) {
-        // 密码或者短信鉴权
+        /* 密码或者短信鉴权 */
         this.close();
         this[`${creditPayStatusType[creditPayStatus]}Modal`] = true;
       }
@@ -354,7 +394,7 @@ export default {
           ? this.displayInfo.orderAmt || '0.00'
           : (this.displayInfo.orderAmt - this.selectedCoupon.faceValue || 0).toFixed(2);
       const freeAmount = this.showCoupon ? this.selectedCoupon.faceValue || '0.00' : '0.00';
-      //跳转支付结果页面
+      /* 跳转支付结果页面 */
       this.$router.push({
         name: `pay${type}`,
         query: {
@@ -375,10 +415,7 @@ export default {
         this.payResult('Success');
       }
     },
-    wxPay() {
-      //微信支付
-    },
-    //选择支付方式
+    /* 选择支付方式 */
     changePayType(type) {
       this.payType = type;
     },
@@ -387,7 +424,7 @@ export default {
       this.random = Math.random();
       this.couponPopup = true;
     },
-    // 选取优惠券
+    /* 选取优惠券 */
     handleSelectCoupon(id, selectedCoupon) {
       console.log(id, selectedCoupon);
       registeredEvents('PD_YXMMACP_UserClickCouponPopupWindowComfirmBtn');
@@ -407,20 +444,22 @@ export default {
       this.pwdModal = false;
       this.smsModal = false;
     },
+    /* 支付时间超时 */
     timeup() {
       this.overtime = true;
       this.payType = null;
       this.close();
     },
+    /* 获取支付密码 */
     async getPwd({ pwd }) {
-      // 获取支付密码
       this.retrieve();
       this.pay({ flowOrderNo: this.flowOrderNo, password: await encryptByDESModeEBC(pwd) });
     },
+    /*  短信验证码回调 */
     getSms(e) {
-      // 短信验证码回调
       this.pay({ flowOrderNo: this.flowOrderNo, smsAuthorizationCode: e });
     },
+    /* 进入h5授信流程 */
     async goApply() {
       const [{ url }] = await h5AppyUrl();
       window.location.href = url;
@@ -431,13 +470,13 @@ export default {
         coupon_id: couponInfo.id
       });
     },
+    /* 密码支付失败 */
     retrieve() {
-      // 密码支付失败
       this.$refs.pwd.tips(false, this.error);
     },
+    /* 忘记密码 */
     retrieveLink() {
-      // 忘记密码
-      const url = `${this.creditPayInfo.forgetPwdJumpUrl}&vccChannel={vccChannel}`;
+      const url = `${this.creditPayInfo.forgetPwdJumpUrl}&vccChannel=${VCC_CHANNEL}`;
       window.location.href = url;
     },
     goHome() {

src/pay/payResult.vue

@@ -17,7 +17,7 @@
       您可在“我的-我的订单”中查看详情
     </p>
     <div class="actions">
-      <cr-button class="actions__back" :plain="true" type="primary" @click="goHome"
+      <cr-button shape="circle" class="actions__back" :plain="true" type="primary" @click="goHome"
         >返回首页</cr-button
       >
       <cr-button shape="circle" type="primary" @click="goOrderDetail">查看订单</cr-button>
@@ -128,7 +128,7 @@ export default {
     display: flex;
     flex-direction: row;
     margin-top: @padding-lg;
-
+    justify-content: space-between;
     &__back {
       color: @cherry-color-error;
       border: 1px solid @cherry-color-error;
@@ -140,8 +140,9 @@ export default {
     }
 
     button {
-      flex: 1;
+      // flex: 1;
       .text-17;
+      width: 161px;
     }
   }
   .info_button {

src/pay/payWaiting.vue

+<template>
+  <div class="card">
+    <div class="info">
+      <cr-image width="63px" height="63px" class="info__image" src="../assets/images/paying.png" />
+      <div class="info__desc">
+        <p class="info__text">（{{ time }}s）支付中...</p>
+      </div>
+    </div>
+    <p class="tips">
+      努力返回支付结果中，请留心查看！
+    </p>
+    <div class="actions">
+      <cr-button class="actions__back" :plain="true" type="primary" shape="circle" @click="goHome"
+        >返回首页</cr-button
+      >
+      <cr-button shape="circle" type="primary" @click="goOrderDetail">查看订单</cr-button>
+    </div>
+  </div>
+</template>
+<script>
+import { registeredEvents } from '@/service/sa.service';
+import { queryPayStatus } from '../api/pay.api';
+export default {
+  components: {},
+  data() {
+    return {
+      orderNo: null,
+      timer: null,
+      time: 10
+    };
+  },
+  created() {
+    const { orderNo } = this.$route.query;
+    this.orderNo = orderNo;
+  },
+  mounted() {
+    this.timer = setInterval(() => {
+      this.time -= 1;
+      if (this.time % 2 === 0) {
+        queryPayStatus({ orderNo: this.orderNo });
+      }
+      if (this.time < 1) {
+        clearInterval(this.timer);
+      }
+    }, 2000);
+  },
+  methods: {
+    goHome() {
+      // 去页面
+    },
+    goOrderDetail() {
+      registeredEvents('PD_YXMMAEC_UserClickCashierCheckOrderBtn', {
+        order_id: this.orderNo
+      });
+      // 去订单详情页面
+    },
+    goPay() {
+      registeredEvents('PD_YXMMAEC_UserClickCashierPaymentAgainBtn', {
+        order_id: this.orderNo
+      });
+      this.$router.push({ name: 'pay', query: { order: this.orderNo } });
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.card {
+  margin: @padding-sm;
+  background-color: @white;
+  border-radius: @border-radius-sm;
+  padding: 28px @padding-sm @padding-sm @padding-sm;
+
+  .info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &__image {
+      width: 100px;
+      height: 100px;
+    }
+
+    &__text {
+      .text-16;
+      margin-left: @padding-md;
+    }
+
+    &__desc {
+      display: flex;
+      flex-direction: column;
+    }
+
+    &__money {
+      margin-top: @padding-xs;
+    }
+    &__free {
+      .text-13;
+      margin-top: @padding-xs;
+      color: @font-color-light;
+    }
+  }
+
+  .tips {
+    .text-12;
+    text-align: center;
+    margin-top: @padding-lg;
+    color: @font-color-light;
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: row;
+    margin-top: @padding-lg;
+    justify-content: space-between;
+
+    &__back {
+      color: @cherry-color-error;
+      border: 1px solid @cherry-color-error;
+    }
+
+    &__order {
+      @primary-bg();
+      margin-left: @padding-sm;
+    }
+
+    button {
+      .text-17;
+      width: 161px;
+    }
+  }
+  .info_button {
+    width: 100%;
+  }
+}
+</style>

src/router/routes.js

@@ -12,7 +12,7 @@ export default [
     component: () => import('../pay')
   },
   {
-    path: '/payResult',
+    path: '/payFail',
     name: 'payFail',
     alias: ['/payFail'],
     meta: {
@@ -21,7 +21,7 @@ export default [
     component: () => import('../pay/payResult')
   },
   {
-    path: '/payResult',
+    path: '/paySuccess',
     name: 'paySuccess',
     alias: ['/paySuccess'], // 有问题🤨
     meta: {
@@ -53,6 +53,28 @@ export default [
       title: '订单详情'
     },
     component: () => import('../views/orderDetail')
+ },{
+    path: '/payWaiting',
+    name: 'payWaiting',
+    meta: {
+      title: '支付中',
+      success: true
+    },
+    component: () => import('../pay/payWaiting')
+  },
+  {
+    path: '/demo',
+    alias: ['/demo-page'],
+    name: 'demo-page',
+    back: false,
+    meta: {
+      title: 'DEMO',
+      has: {
+        header: true,
+        footer: true
+      }
+    },
+    component: () => import('../views/demo')
   },
   {
     path: '/error',

src/service/weChat_pay.js

+/*
+ * @Description: 支付微信h5, jsapi, 第三方收银台，跳转）
+ * @Date: 2020-07-28 15:03:52
+ * @LastEditors: gzw
+ * @LastEditTime: 2020-10-19 11:33:04
+ */
+
+import qs from 'qs';
+import { isXyqb } from '@/service/validation.service';
+/**
+ * payByWeixinJsapi
+ * @description: 微信通过jsapi支付
+ *               可以在微信浏览器调起支付
+ * @param {type}
+ * @return:
+ */
+function payByWeixinJsapi(info = {}, callback) {
+  function onBridgeReady() {
+    // eslint-disable-next-line no-undef
+    WeixinJSBridge.invoke('getBrandWCPayRequest', info, function(res) {
+      console.log(res);
+      if (res.err_msg == 'get_brand_wcpay_request:ok') {
+        // 使用以上方式判断前端返回,微信团队郑重提示：
+        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
+        callback('ok');
+      } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
+        // 支付取消
+        callback('cancel');
+      } else {
+        // 支付失败
+        callback('fail');
+      }
+    });
+  }
+  if (typeof WeixinJSBridge == 'undefined') {
+    if (document.addEventListener) {
+      document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
+    } else if (document.attachEvent) {
+      document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
+      document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
+    }
+  } else {
+    onBridgeReady();
+  }
+}
+
+/**
+ * payByWeixinH5
+ * @description: 微信通过H5支付
+ *               可以在浏览器调起微信支付
+ *               在羊小咩（信用钱包）app中调起微信支付，会先唤起微信，原来的页面会自动跳转到redirect_url设定的地址
+ * @param {type}
+ * @return:
+ */
+function payByWeixinH5(info) {
+  if (!info.url) return;
+  if (!info.params) {
+    info.params = {};
+  }
+  info.params.isXyqb = isXyqb ? 1 : 0;
+  info.params.isWxH5 = 1;
+  const currentPath = encodeURIComponent(
+    window.location.origin +
+      '/payWaiting' +
+      qs.stringify(info.params, { encode: true, addQueryPrefix: true })
+  );
+  // window.location.href = `${info.url}&redirect_url=${currentPath}`;
+  const nextPage = document.createElement('a');
+  nextPage.setAttribute('href', `${info.url}&redirect_url=${currentPath}`);
+  nextPage.click();
+}
+
+/**
+ * payByThirdPartyCashier
+ * @description: 第三方收银台
+ * @param {type}
+ * @return:
+ */
+function payByThirdPartyCashier(info) {
+  if (!info.url) return;
+  info.params.third = 1;
+  const currentPath = encodeURIComponent(
+    window.location.origin +
+      '/payWaiting' +
+      qs.stringify(info.params, { encode: true, addQueryPrefix: true })
+  );
+  const nextPage = document.createElement('a');
+  nextPage.setAttribute('href', `${info.url}&redirect_uri=${currentPath}`);
+  nextPage.click();
+  // window.location.href = `${info.url}&redirect_uri=${currentPath}`;
+}
+
+/**
+ * @description: 支付方式判断， 返回promise
+ *              NATIVE=原生扫码支付.,APP=ap支付,,JSAPI=公众号支付/小程序支付,,MWEB=H5支付.,MICROPAY=刷卡支付,默认JSAPI
+ * @param {String} type 支付方式，THIRD -> 第三方，MWEB -> H5支付， JSAPI -> jsapi支付，默认支付方式，THIRD
+ * @param {Object/String} payInfo 支付信息
+ * @return {Promise} 回调
+ */
+export function payByWay(type = 'THIRD', payInfo) {
+  return new Promise((resolve, reject) => {
+    if (type === 'JSAPI' && !payInfo.url) {
+      payByWeixinJsapi(payInfo, function(e) {
+        if (e === 'ok') {
+          resolve();
+        } else {
+          reject();
+        }
+      });
+    } else {
+      if (payInfo.url.indexOf('tenpay') > -1) {
+        payByWeixinH5(payInfo);
+        reject();
+      } else {
+        payByThirdPartyCashier(payInfo);
+        reject();
+      }
+      // resolve();
+    }
+  });
+}

vue.config.js

@@ -140,6 +140,7 @@ module.exports = {
     proxy: 'http://kdsp-vcc.liangkebang.net'
   },
   css: {
+    extract: false,
     loaderOptions: {
       less: {
         // 若使用 less-loader@5，请移除 lessOptions 这一级，直接配置选项。