Преглед изворни кода

app新增小葫芦线上支付宝渠道

Yannay пре 1 месец
родитељ
комит
4a5ca6637a
1 измењених фајлова са 36 додато и 7 уклоњено
  1. 36 7
      pages/orderDetailRefactored/components/PageThree.vue

+ 36 - 7
pages/orderDetailRefactored/components/PageThree.vue

@@ -12,14 +12,14 @@
12
         <u-col span="5.8">
12
         <u-col span="5.8">
13
           <view class="info-label">银行名称</view>
13
           <view class="info-label">银行名称</view>
14
           <u-input v-model="paymentInfo.bankName" placeholder="请输入银行名称" class="info-input"
14
           <u-input v-model="paymentInfo.bankName" placeholder="请输入银行名称" class="info-input"
15
-            @blur="handleBankNameInput" />
15
+            :disabled="isAlipayPayment" @blur="handleBankNameInput" />
16
         </u-col>
16
         </u-col>
17
       </u-row>
17
       </u-row>
18
       <u-row class="info-row">
18
       <u-row class="info-row">
19
         <u-col span="12">
19
         <u-col span="12">
20
-          <view class="info-label">银行账号</view>
21
-          <u-input v-model="paymentInfo.bankAccount" placeholder="请输入银行账号" class="info-input" type="number"
22
-            @input="handleBankAccountInput" />
20
+          <view class="info-label">{{ bankAccountLabel }}</view>
21
+          <u-input v-model="paymentInfo.bankAccount" :placeholder="bankAccountPlaceholder" class="info-input"
22
+            :type="isAlipayPayment ? 'text' : 'number'" @input="handleBankAccountInput" />
23
         </u-col>
23
         </u-col>
24
       </u-row>
24
       </u-row>
25
       <u-row class="info-row">
25
       <u-row class="info-row">
@@ -35,6 +35,7 @@
35
           <u-radio-group iconPlacement="left" v-model="paymentMethodRadio" placement="row"
35
           <u-radio-group iconPlacement="left" v-model="paymentMethodRadio" placement="row"
36
             @change="handlePaymentMethodRadioChange">
36
             @change="handlePaymentMethodRadioChange">
37
             <u-radio shape="circle" label="小葫芦线上支付" name="online" />
37
             <u-radio shape="circle" label="小葫芦线上支付" name="online" />
38
+            <u-radio shape="circle" label="小葫芦线上支付宝" name="online_alipay" />
38
             <u-radio shape="circle" label="线下支付" name="offline" />
39
             <u-radio shape="circle" label="线下支付" name="offline" />
39
           </u-radio-group>
40
           </u-radio-group>
40
         </u-col>
41
         </u-col>
@@ -42,7 +43,7 @@
42
       <u-row class="info-row">
43
       <u-row class="info-row">
43
         <u-col span="12">
44
         <u-col span="12">
44
           <view class="info-label">支付方式</view>
45
           <view class="info-label">支付方式</view>
45
-          <u-input :disabled="paymentMethodRadio === 'online'" v-model="paymentMethod" placeholder="请输入支付方式"
46
+          <u-input :disabled="paymentMethodRadio === 'online'||paymentMethodRadio === 'online_alipay'" v-model="paymentMethod" placeholder="请输入支付方式"
46
             class="info-input" />
47
             class="info-input" />
47
         </u-col>
48
         </u-col>
48
       </u-row>
49
       </u-row>
@@ -237,6 +238,18 @@ export default {
237
         transform: `translate(${this.currentX - this.startX}px, ${this.currentY - this.startY}px)`,
238
         transform: `translate(${this.currentX - this.startX}px, ${this.currentY - this.startY}px)`,
238
         zIndex: 1000
239
         zIndex: 1000
239
       }
240
       }
241
+    },
242
+    // 是否为支付宝支付
243
+    isAlipayPayment() {
244
+      return this.paymentMethodRadio === 'online_alipay'
245
+    },
246
+    // 银行账号标签
247
+    bankAccountLabel() {
248
+      return this.isAlipayPayment ? '支付宝账号' : '银行账号'
249
+    },
250
+    // 银行账号占位符
251
+    bankAccountPlaceholder() {
252
+      return this.isAlipayPayment ? '请输入支付宝账号' : '请输入银行账号'
240
     }
253
     }
241
   },
254
   },
242
   watch: {
255
   watch: {
@@ -318,6 +331,10 @@ export default {
318
       if (value === '小葫芦线上支付') {
331
       if (value === '小葫芦线上支付') {
319
         this.paymentMethod = '小葫芦线上支付'
332
         this.paymentMethod = '小葫芦线上支付'
320
         this.paymentMethodRadio = 'online'
333
         this.paymentMethodRadio = 'online'
334
+      } else if (value === '小葫芦线上支付宝') {
335
+        this.paymentMethod = '小葫芦线上支付宝'
336
+        this.paymentMethodRadio = 'online_alipay'
337
+        this.paymentInfo.bankName = '支付宝'
321
       } else {
338
       } else {
322
         this.paymentMethod = value || ''
339
         this.paymentMethod = value || ''
323
         this.paymentMethodRadio = 'offline'
340
         this.paymentMethodRadio = 'offline'
@@ -330,8 +347,20 @@ export default {
330
     handlePaymentMethodRadioChange(value) {
347
     handlePaymentMethodRadioChange(value) {
331
       if (value === 'online') {
348
       if (value === 'online') {
332
         this.paymentMethod = '小葫芦线上支付'
349
         this.paymentMethod = '小葫芦线上支付'
350
+        // 恢复银行名称输入框
351
+        if (this.paymentInfo.bankName === '支付宝') {
352
+          this.paymentInfo.bankName = ''
353
+        }
354
+      } else if (value === 'online_alipay') {
355
+        this.paymentMethod = '小葫芦线上支付宝'
356
+        // 自动设置银行名称为支付宝
357
+        this.paymentInfo.bankName = '支付宝'
333
       } else {
358
       } else {
334
         this.paymentMethod = ''
359
         this.paymentMethod = ''
360
+        // 恢复银行名称输入框
361
+        if (this.paymentInfo.bankName === '支付宝') {
362
+          this.paymentInfo.bankName = ''
363
+        }
335
       }
364
       }
336
     },
365
     },
337
 
366
 
@@ -594,8 +623,8 @@ export default {
594
         id: this.orderDetail.id,
623
         id: this.orderDetail.id,
595
         paymentMethod: this.paymentMethod || ''
624
         paymentMethod: this.paymentMethod || ''
596
       })
625
       })
597
-      //如果是小葫芦线上刚支付就调用接口,如果不是小葫芦线上支付就不要调用接口,直接点击下一步
598
-      if (this.paymentMethod === '小葫芦线上支付') {
626
+      //如果是小葫芦线上支付或者小葫芦线上支付宝就调用接口,如果不是小葫芦线上支付就不要调用接口,直接点击下一步
627
+      if (this.paymentMethod === '小葫芦线上支付' || this.paymentMethod === '小葫芦线上支付宝') {
599
         this.$emit('confirm-pay')
628
         this.$emit('confirm-pay')
600
       } else {
629
       } else {
601
         this.handleNext()
630
         this.handleNext()