87 lines
2.1 KiB
Vue
87 lines
2.1 KiB
Vue
<template>
|
|
<cl-popup v-model="visible" direction="bottom" :padding="0">
|
|
<view class="cl-pay">
|
|
<view class="cl-pay__title">选择支付方式</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"> 取消支付 </view>
|
|
</view>
|
|
</cl-popup>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from "vue"
|
|
import IconWx from "./wx.png"
|
|
import IconAli from "./ali.png"
|
|
|
|
export default defineComponent({
|
|
name: "cl-pay",
|
|
|
|
setup(_, { emit }) {
|
|
// 是否可见
|
|
const visible = ref(false)
|
|
|
|
// 回掉
|
|
let cb: any = null
|
|
|
|
// 支付方式
|
|
const methods = ref<ClPay.Item[]>([
|
|
{
|
|
label: "微信支付",
|
|
value: "wxpay",
|
|
icon: IconWx
|
|
},
|
|
{
|
|
label: "支付宝支付",
|
|
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>
|