|
@@ -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>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|