增加pc余额支付功能。增加倒计时

buyer/package.json

@@ -14,6 +14,7 @@
     "js-cookie": "^2.2.1",
     "less": "^3.12.2",
     "less-loader": "^5.0.0",
+    "mv-count-down": "^0.1.15",
     "psl": "^1.8.0",
     "qs": "^6.9.4",
     "swiper": "^6.4.1",

buyer/src/pages/payment/PayMent.vue

@@ -5,31 +5,68 @@
       <div class="head-left">
         <div class="left-tips">订单提交成功，请尽快付款！</div>
         <div class="left-tips-time">请您尽快完成支付，否则订单会被自动取消</div>
+        <div class="left-tips-count-down">
+          <mv-count-down :startTime="startTime"
+                         :endTime="endTime"
+                         :endText="endText"
+                         :dayTxt="'天'"
+                         :hourTxt="'小时'"
+                         :minutesTxt="'分钟'"
+                         :secondsTxt="'秒'"
+                         :isStart="isStart"></mv-count-down>
+
+        </div>
       </div>
       <div class="head-right">
-        <div>应付金额 <span class="price">{{payDetail.price | unitPrice}}</span>元</div>
+        <div>应付金额 <span class="price">{{ payDetail.price | unitPrice }}</span>元</div>
       </div>
     </div>
     <div class="wrapper-box">
-      <div class="-box-item" @click="handlePay('ALIPAY')">
+      <div v-for="item in support">
-        <img src="https://ss3.bdstatic.com/yrwDcj7w0QhBkMak8IuT_XF5ehU5bvGh7c50/logopic/a9936a369e82e0c6c42112674a5220e8_fullsize.jpg" alt="">
+        <div v-if="item === 'ALIPAY'" class="-box-item" @click="handlePay('ALIPAY')">
+          <img
+            src="https://ss3.bdstatic.com/yrwDcj7w0QhBkMak8IuT_XF5ehU5bvGh7c50/logopic/a9936a369e82e0c6c42112674a5220e8_fullsize.jpg"
+            alt="">
           <span>支付宝</span>
         </div>
-      <div  class="-box-item" @click="handlePay('WECHAT')">
+        <div v-if="item === 'WECHAT'" class="-box-item" @click="handlePay('WECHAT')">
-        <img src="https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=3774939867,2826752539&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=796e842a5ef2d16d9edc872d6f1147ef" alt="">
+          <img
+            src="https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=3774939867,2826752539&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=796e842a5ef2d16d9edc872d6f1147ef"
+            alt="">
           <span>微信</span>
         </div>
+        <div v-if="item === 'WALLET'" class="-box-item" @click="handlePay('WALLET')">
+          <img
+            src="https://dss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=3774939867,2826752539&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=796e842a5ef2d16d9edc872d6f1147ef"
+            alt="">
+          <span>余额支付</span>
+          <span>当前剩余({{ walletValue|unitPrice('￥') }})</span>
+        </div>
+      </div>
     </div>
     <BaseFooter></BaseFooter>
   </div>
 </template>
 <script>
-import { tradeDetail } from '@/api/pay.js';
+
+import {tradeDetail} from '@/api/pay.js';
+import MvCountDown from 'mv-count-down'
+import {Message} from 'view-design';
+
 export default {
+  components: {
+    MvCountDown
+  },
   data () {
     return {
       payDetail: {}, // 支付详情
-      qrcode: '' // 支付二维码
+      support: [], // 支持配送方式
+      walletValue: 0, // 当前余额
+      qrcode: '', // 支付二维码
+      startTime: new Date().getTime(), // 开始时间（时间戳）
+      endTime: 0, // 完成的时间（时间戳）
+      endText: '订单已超时取消', // 倒计时完成的提示文本
+      isStart: false // 控制倒计时开始的时机（异步请求完成开启）
     };
   },
   methods: {
@@ -39,10 +76,23 @@ export default {
       tradeDetail(params).then(res => {
         if (res.success) {
           this.payDetail = res.result;
+          this.endTime = this.payDetail.autoCancel
+          this.isStart = true
+          this.support = this.payDetail.support
+          this.walletValue = this.payDetail.walletValue
         }
       });
     },
+    // 支付
     handlePay (way) {
+      // 余额支付则直接跳转
+      if (way === 'WALLET') {
+        // 如果待支付金额大于余额，则报错
+        if (this.payDetail.price > this.walletValue) {
+          Message.error('余额不足以支付当前订单，如需充值请前往会员中心');
+          return;
+        }
+      }
       const params = this.$route.query;
       params.paymentMethod = way;
       params.paymentClient = 'NATIVE';
@@ -56,14 +106,16 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.head-left{
+.head-left {
   font-weight: bold;
 }
-.left-tips{
+
+.left-tips {
   font-size: 21px;
 
 }
-.-box-item{
+
+.-box-item {
   margin-right: 30px;
   display: flex;
   font-size: 21px;
@@ -73,47 +125,62 @@ export default {
   cursor: pointer;
   @include content_color($light_content_color);
 
-    &:hover{color: $theme_color;}
+  &:hover {
+    color: $theme_color;
+  }
 
-    >span{
+  > span {
     margin-left: 10px;
   }
-    >img{
+
+  > img {
     border-radius: 10px;
     width: 60px;
     height: 60px;
   }
 }
-.left-tips-time{
+
+.left-tips-time {
   font-size: 16px;
 }
-.wrapper-head{
+
+.left-tips-count-down {
+  font-size: 10px;
+  color: red;
+}
+
+.wrapper-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   line-height: 1.75;
 }
+
 .wrapper-head,
 .wrapper-box {
   padding: 20px 40px;
   width: 1200px;
   margin: 20px auto;
 }
+
 .wrapper-box {
   @include white_background_color();
   height: auto;
   display: flex;
 }
+
 .wrapper {
   width: 100%;
   height: 100%;
 }
-.price{
+
+.price {
   font-size: 18px;
   font-weight: bold;
   color: $theme_color;
 }
-.head-right{
+
+.head-right {
   font-weight: bold;
 }
 </style>

buyer/yarn.lock

@@ -2051,7 +2051,7 @@ copy-webpack-plugin@^4.0.1:
     p-limit "^1.0.0"
     serialize-javascript "^1.4.0"
 
-core-js@^2.4.0, core-js@^2.5.0:
+core-js@^2.4.0, core-js@^2.5.0, core-js@^2.6.5:
   version "2.6.12"
   resolved "https://registry.npm.taobao.org/core-js/download/core-js-2.6.12.tgz?cache=0&sync_timestamp=1607216048810&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw=
@@ -5150,6 +5150,16 @@ mute-stream@0.0.7:
   resolved "https://registry.npm.taobao.org/mute-stream/download/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
   integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
 
+mv-count-down@^0.1.15:
+  version "0.1.15"
+  resolved "https://registry.npmjs.org/mv-count-down/-/mv-count-down-0.1.15.tgz#a3f3c1677576e592c7710b441b2dda96acac2702"
+  integrity sha512-7poh86i27D/u4AvE9Ne8QHhy61p4MYAhSf4XAVyxzL0gXVCyccJ0NtJferEOxBP6C2q9jImknpKLGdwnEeJ7qQ==
+  dependencies:
+    core-js "^2.6.5"
+    vue "^2.6.10"
+    vue-router "^3.0.3"
+    vuex "^3.0.1"
+
 nan@^2.12.1, nan@^2.13.2:
   version "2.14.2"
   resolved "https://registry.npm.taobao.org/nan/download/nan-2.14.2.tgz?cache=0&sync_timestamp=1602591700047&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnan%2Fdownload%2Fnan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
@@ -8315,6 +8325,11 @@ vue-router@^3.0.1:
   resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.9.tgz?cache=0&sync_timestamp=1607347231238&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.9.tgz#c016f42030ae2932f14e4748b39a1d9a0e250e66"
   integrity sha1-wBb0IDCuKTLxTkdIs5odmg4lDmY=
 
+vue-router@^3.0.3:
+  version "3.5.2"
+  resolved "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz#5f55e3f251970e36c3e8d88a7cd2d67a350ade5c"
+  integrity sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ==
+
 vue-style-loader@^3.0.0, vue-style-loader@^3.0.1:
   version "3.1.2"
   resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-3.1.2.tgz#6b66ad34998fc9520c2f1e4d5fa4091641c1597a"