更新支付

src/views/adapay/payment/index.tsx

@@ -1,132 +1,132 @@
-import { Button, Cell, CellGroup, Icon, RadioGroup, Radio, showConfirmDialog } from 'vant'
-import { defineComponent, reactive } from 'vue'
-import styles from './index.module.less'
-import { browser, moneyFormat } from '@/helpers/utils'
-
-export default defineComponent({
-  name: 'payment',
-  props: {
-    paymentConfig: {
-      type: Object,
-      default: {}
-    }
-  },
-  emits: ['backOut', 'close', 'confirm'],
-  setup(props, { slots, attrs, emit }) {
-    const state = reactive({
-      payType: 'wx',
-      pay_channel: ''
-    })
-    const onClose = () => {
-      // 继续支付则直接关闭弹窗就可
-      showConfirmDialog({
-        message: '是否放弃本次付款',
-        confirmButtonText: '继续付款',
-        cancelButtonText: '放弃',
-        showCancelButton: true
-      }).catch(async () => {
-        await onCancel()
-        emit('backOut')
-        emit('close')
-      })
-    }
-
-    // 需要关闭订单
-    const onCancel = async (noBack?: boolean) => {}
-    const onSubmit = async () => {
-      // 支付...
-      const pt = state.payType
-      // 判断当前浏览器
-      if (browser().weixin) {
-        // 微信浏览器
-        if (pt == 'zfb') {
-          state.pay_channel = 'alipay_qr'
-          getCodePay('qrCode')
-        } else if (pt == 'wx') {
-          state.pay_channel = 'wx_pub'
-          getCodePay('pay')
-        }
-      } else if (browser().alipay) {
-        // 支付宝浏览器
-        if (pt == 'zfb') {
-          state.pay_channel = 'alipay_wap'
-          // 支付宝 H5 支付
-          getCodePay('pay')
-        } else if (pt == 'wx') {
-          state.pay_channel = 'wx_pub'
-          getCodePay('qrCode')
-        }
-      } else {
-        if (pt == 'zfb') {
-          state.pay_channel = 'alipay_qr'
-        } else if (pt == 'wx') {
-          state.pay_channel = 'wx_pub'
-        }
-        getCodePay('qrCode')
-      }
-    }
-
-    const getCodePay = (code) => {
-      // 二维码页面， 唤起支付页面
-      const payCode = code == 'qrCode' ? 'payCenter' : 'payResult'
-      emit('confirm', {
-        payCode,
-        pay_channel: state.pay_channel
-      })
-    }
-    return () => (
-      <div class={styles.payment}>
-        <Icon onClick={onClose} name="cross" size={20} />
-        <div class={[styles.title]}>选择支付方式</div>
-
-        <div class={styles.payAmount}>
-          <p>应付金额</p>
-          <div class={styles.amount}>
-            <span>￥ </span>
-            {moneyFormat(props.paymentConfig.currentPrice)}
-          </div>
-        </div>
-        <RadioGroup v-model={state.payType}>
-          <CellGroup border={false}>
-            <Cell
-              border={true}
-              center
-              onClick={() => {
-                // wx_lite
-                state.payType = 'wx'
-              }}
-              v-slots={{
-                icon: () => <Icon name="wechat-pay" color="#15c434" size={22} />,
-                'right-icon': () => <Radio name="wx" />,
-                title: () => (
-                  <div class={styles.payTypeRe}>
-                    微信支付 <span class={styles.recommend}>推荐</span>
-                  </div>
-                )
-              }}
-            ></Cell>
-            <Cell
-              title="支付宝支付"
-              border={true}
-              // class="van-hairline--bottom"
-              center
-              onClick={() => {
-                // alipay
-                state.payType = 'zfb'
-              }}
-              v-slots={{
-                icon: () => <Icon name="alipay" color="#009fe9" size={22} />,
-                'right-icon': () => <Radio name="zfb" />
-              }}
-            ></Cell>
-          </CellGroup>
-        </RadioGroup>
-
-        <div class={styles.blank}></div>
-        <Button type="primary" class={styles.payBtn} block round onClick={onSubmit}>
-          确认支付
-        </Button>
-      </div>
-    )
-  }
-})
+import { Button, Cell, CellGroup, Icon, RadioGroup, Radio, showConfirmDialog } from 'vant'
+import { defineComponent, reactive } from 'vue'
+import styles from './index.module.less'
+import { browser, moneyFormat } from '@/helpers/utils'
+
+export default defineComponent({
+  name: 'payment',
+  props: {
+    paymentConfig: {
+      type: Object,
+      default: {}
+    }
+  },
+  emits: ['backOut', 'close', 'confirm'],
+  setup(props, { slots, attrs, emit }) {
+    const state = reactive({
+      payType: 'wx',
+      pay_channel: ''
+    })
+    const onClose = () => {
+      // 继续支付则直接关闭弹窗就可
+      showConfirmDialog({
+        message: '是否放弃本次付款',
+        confirmButtonText: '继续付款',
+        cancelButtonText: '放弃',
+        showCancelButton: true
+      }).catch(async () => {
+        await onCancel()
+        emit('backOut')
+        emit('close')
+      })
+    }
+
+    // 需要关闭订单
+    const onCancel = async (noBack?: boolean) => {}
+    const onSubmit = async () => {
+      // 支付...
+      const pt = state.payType
+      // 判断当前浏览器
+      if (browser().weixin) {
+        // 微信浏览器
+        if (pt == 'zfb') {
+          state.pay_channel = 'alipay_qr'
+          getCodePay('qrCode')
+        } else if (pt == 'wx') {
+          state.pay_channel = 'wx_pub'
+          getCodePay('pay')
+        }
+      } else if (browser().alipay) {
+        // 支付宝浏览器
+        if (pt == 'zfb') {
+          state.pay_channel = 'alipay_wap'
+          // 支付宝 H5 支付
+          getCodePay('pay')
+        } else if (pt == 'wx') {
+          state.pay_channel = 'wx_pub'
+          getCodePay('qrCode')
+        }
+      } else {
+        if (pt == 'zfb') {
+          state.pay_channel = 'alipay_qr'
+        } else if (pt == 'wx') {
+          state.pay_channel = 'wx_pub'
+        }
+        getCodePay('qrCode')
+      }
+    }
+
+    const getCodePay = (code) => {
+      // 二维码页面， 唤起支付页面
+      const payCode = code == 'qrCode' ? 'payCenter' : 'payResult'
+      emit('confirm', {
+        payCode,
+        pay_channel: state.pay_channel
+      })
+    }
+    return () => (
+      <div class={styles.payment}>
+        <Icon onClick={onClose} name="cross" size={20} />
+        <div class={[styles.title]}>选择支付方式</div>
+
+        <div class={styles.payAmount}>
+          <p>应付金额</p>
+          <div class={styles.amount}>
+            <span>￥ </span>
+            {moneyFormat(props.paymentConfig.currentPrice)}
+          </div>
+        </div>
+        <RadioGroup v-model={state.payType}>
+          <CellGroup border={false}>
+            <Cell
+              border={true}
+              center
+              onClick={() => {
+                // wx_lite
+                state.payType = 'wx'
+              }}
+              v-slots={{
+                icon: () => <Icon name="wechat-pay" color="#15c434" size={22} />,
+                'right-icon': () => <Radio name="wx" />,
+                title: () => (
+                  <div class={styles.payTypeRe}>
+                    微信支付 <span class={styles.recommend}>推荐</span>
+                  </div>
+                )
+              }}
+            ></Cell>
+            {/* <Cell
+              title="支付宝支付"
+              border={true}
+              // class="van-hairline--bottom"
+              center
+              onClick={() => {
+                // alipay
+                state.payType = 'zfb'
+              }}
+              v-slots={{
+                icon: () => <Icon name="alipay" color="#009fe9" size={22} />,
+                'right-icon': () => <Radio name="zfb" />
+              }}
+            ></Cell> */}
+          </CellGroup>
+        </RadioGroup>
+
+        <div class={styles.blank}></div>
+        <Button type="primary" class={styles.payBtn} block round onClick={onSubmit}>
+          确认支付
+        </Button>
+      </div>
+    )
+  }
+})