1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| <template>
| <cl-popup v-model="visible" direction="bottom" :padding="0">
| <view class="cl-pay">
| <view class="cl-pay__title">{{ t("选择支付方式") }}</view>
|
| <!-- 选择方式 -->
| <view class="cl-pay__container">
| <template v-for="(item, index) in methods">
| <view class="cl-pay__item" :key="index" v-if="!item.hidden" @tap="choose(item)">
| <image class="cl-pay__icon" :src="item.icon" mode="aspectFit" />
| <text class="cl-pay__label">{{ item.label }}</text>
| </view>
| </template>
| </view>
|
| <view class="cl-pay__footer" @tap="close">{{ t("取消支付") }}</view>
| </view>
| </cl-popup>
| </template>
|
| <script lang="ts">
| import { defineComponent, ref } from "vue";
| import IconWx from "./wx.png";
| import IconAli from "./ali.png";
| import { useI18n } from "vue-i18n";
|
| export default defineComponent({
| name: "cl-pay",
|
| setup(_, { emit }) {
| const { t } = useI18n();
|
| // 是否可见
| const visible = ref(false);
|
| // 回掉
| let cb: any = null;
|
| // 支付方式
| const methods = ref<ClPay.Item[]>([
| {
| label: t("微信支付"),
| value: "wxpay",
| icon: IconWx,
| },
|
| {
| label: t("支付宝支付"),
| value: "alipay",
| icon: IconAli,
| },
| ]);
|
| // 打开
| function open(options?: ClPay.Options) {
| const { list, callback } = options || {};
|
| if (list) {
| methods.value = list;
| }
|
| cb = callback;
| visible.value = true;
| }
|
| // 关闭
| function close() {
| visible.value = false;
| }
|
| // 选择
| function choose(item: ClPay.Item) {
| close();
| emit("choose", item);
|
| if (cb) {
| cb(item);
| }
| }
|
| return {
| visible,
| methods,
| open,
| close,
| choose,
| };
| },
| });
| </script>
|
|
