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

pages/orderDetailRefactored/components/PageThree.vue

@@ -12,14 +12,14 @@
         <u-col span="5.8">
           <view class="info-label">银行名称</view>
           <u-input v-model="paymentInfo.bankName" placeholder="请输入银行名称" class="info-input"
-            @blur="handleBankNameInput" />
+            :disabled="isAlipayPayment" @blur="handleBankNameInput" />
         </u-col>
       </u-row>
       <u-row class="info-row">
         <u-col span="12">
-          <view class="info-label">银行账号</view>
-          <u-input v-model="paymentInfo.bankAccount" placeholder="请输入银行账号" class="info-input" type="number"
-            @input="handleBankAccountInput" />
+          <view class="info-label">{{ bankAccountLabel }}</view>
+          <u-input v-model="paymentInfo.bankAccount" :placeholder="bankAccountPlaceholder" class="info-input"
+            :type="isAlipayPayment ? 'text' : 'number'" @input="handleBankAccountInput" />
         </u-col>
       </u-row>
       <u-row class="info-row">
@@ -35,6 +35,7 @@
           <u-radio-group iconPlacement="left" v-model="paymentMethodRadio" placement="row"
             @change="handlePaymentMethodRadioChange">
             <u-radio shape="circle" label="小葫芦线上支付" name="online" />
+            <u-radio shape="circle" label="小葫芦线上支付宝" name="online_alipay" />
             <u-radio shape="circle" label="线下支付" name="offline" />
           </u-radio-group>
         </u-col>
@@ -42,7 +43,7 @@
       <u-row class="info-row">
         <u-col span="12">
           <view class="info-label">支付方式</view>
-          <u-input :disabled="paymentMethodRadio === 'online'" v-model="paymentMethod" placeholder="请输入支付方式"
+          <u-input :disabled="paymentMethodRadio === 'online'||paymentMethodRadio === 'online_alipay'" v-model="paymentMethod" placeholder="请输入支付方式"
             class="info-input" />
         </u-col>
       </u-row>
@@ -237,6 +238,18 @@ export default {
         transform: `translate(${this.currentX - this.startX}px, ${this.currentY - this.startY}px)`,
         zIndex: 1000
       }
+    },
+    // 是否为支付宝支付
+    isAlipayPayment() {
+      return this.paymentMethodRadio === 'online_alipay'
+    },
+    // 银行账号标签
+    bankAccountLabel() {
+      return this.isAlipayPayment ? '支付宝账号' : '银行账号'
+    },
+    // 银行账号占位符
+    bankAccountPlaceholder() {
+      return this.isAlipayPayment ? '请输入支付宝账号' : '请输入银行账号'
     }
   },
   watch: {
@@ -318,6 +331,10 @@ export default {
       if (value === '小葫芦线上支付') {
         this.paymentMethod = '小葫芦线上支付'
         this.paymentMethodRadio = 'online'
+      } else if (value === '小葫芦线上支付宝') {
+        this.paymentMethod = '小葫芦线上支付宝'
+        this.paymentMethodRadio = 'online_alipay'
+        this.paymentInfo.bankName = '支付宝'
       } else {
         this.paymentMethod = value || ''
         this.paymentMethodRadio = 'offline'
@@ -330,8 +347,20 @@ export default {
     handlePaymentMethodRadioChange(value) {
       if (value === 'online') {
         this.paymentMethod = '小葫芦线上支付'
+        // 恢复银行名称输入框
+        if (this.paymentInfo.bankName === '支付宝') {
+          this.paymentInfo.bankName = ''
+        }
+      } else if (value === 'online_alipay') {
+        this.paymentMethod = '小葫芦线上支付宝'
+        // 自动设置银行名称为支付宝
+        this.paymentInfo.bankName = '支付宝'
       } else {
         this.paymentMethod = ''
+        // 恢复银行名称输入框
+        if (this.paymentInfo.bankName === '支付宝') {
+          this.paymentInfo.bankName = ''
+        }
       }
     },
 
@@ -594,8 +623,8 @@ export default {
         id: this.orderDetail.id,
         paymentMethod: this.paymentMethod || ''
       })
-      //如果是小葫芦线上刚支付就调用接口，如果不是小葫芦线上支付就不要调用接口，直接点击下一步
-      if (this.paymentMethod === '小葫芦线上支付') {
+      //如果是小葫芦线上支付或者小葫芦线上支付宝就调用接口，如果不是小葫芦线上支付就不要调用接口，直接点击下一步
+      if (this.paymentMethod === '小葫芦线上支付' || this.paymentMethod === '小葫芦线上支付宝') {
         this.$emit('confirm-pay')
       } else {
         this.handleNext()