125 lines
3.6 KiB
Vue
125 lines
3.6 KiB
Vue
<template>
|
|
<view class="pay-radio">
|
|
<wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44" @change="Pay.handleChangePay">
|
|
<block v-for="(item, index) in PayList" :key="index">
|
|
<wd-radio :value="item.value">
|
|
<view
|
|
class="flex justify-between items-center"
|
|
v-if="!(hidePlatformBalance && item.type === PayCategory.PlatformBalance) && !(hideStoreBalance && item.type === PayCategory.StoreBalance) && !(hideWechat && item.type === PayCategory.WeChatPay)"
|
|
>
|
|
<view class="flex items-center">
|
|
<wd-img width="50rpx" height="50rpx" :src="`${OSS}${item.icon}`"></wd-img>
|
|
<view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="absolute right-0 top-6rpx right-60rpx" v-if="item.type !== PayCategory.WeChatPay">可用{{ userInfo.user_money }}</view>
|
|
</wd-radio>
|
|
</block>
|
|
</wd-radio-group>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="RechargeBtn">
|
|
/**
|
|
* Pay 支付组件
|
|
* @description 用于展示支付
|
|
*/
|
|
import { PayList as OriginPayList, PayCategory, PayValue } from '@/utils/pay'
|
|
import { IUserInfoResult } from '@/api/types/user'
|
|
import { getUserInfo } from '@/api/user'
|
|
|
|
const OSS = inject('OSS')
|
|
const pay = ref<number>() // 支付方式
|
|
|
|
// 当前用户信息
|
|
const userInfo = reactive<IUserInfoResult>({
|
|
account: '',
|
|
avatar: '',
|
|
create_time: '',
|
|
has_auth: false,
|
|
has_password: false,
|
|
id: 0,
|
|
mobile: '',
|
|
nickname: '',
|
|
real_name: '',
|
|
sex: '',
|
|
sn: 0,
|
|
user_money: '',
|
|
version: 0
|
|
})
|
|
|
|
onMounted(async () => {
|
|
// 获取个人用户信息
|
|
const userRes = await getUserInfo()
|
|
Object.assign(userInfo, userRes || {})
|
|
|
|
})
|
|
|
|
const props = defineProps({
|
|
// 是否隐藏平台余额支付
|
|
hidePlatformBalance: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
|
|
// 是否隐藏门店余额支付
|
|
hideStoreBalance: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
|
|
// 是否隐藏微信支付
|
|
hideWechat: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
// 定义emit事件
|
|
const emit = defineEmits(['pay'])
|
|
|
|
const Pay = {
|
|
// 支付方式改变
|
|
handleChangePay(e: {value: number}) {
|
|
emit('pay', e.value)
|
|
}
|
|
}
|
|
|
|
const PayList = computed(() => {
|
|
return OriginPayList.filter(item => {
|
|
if (props.hidePlatformBalance && item.type === PayCategory.PlatformBalance) return false
|
|
if (props.hideStoreBalance && item.type === PayCategory.StoreBalance) return false
|
|
if (props.hideWechat && item.type === PayCategory.WeChatPay) return false
|
|
return true
|
|
})
|
|
})
|
|
|
|
watch(PayList, (list) => {
|
|
if (list.length > 0) {
|
|
pay.value = list[0].value
|
|
emit('pay', pay.value )
|
|
} else {
|
|
pay.value = undefined
|
|
}
|
|
}, { immediate: true })
|
|
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.pay-radio {
|
|
:deep() {
|
|
.wd-radio {
|
|
position: relative;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.wd-radio:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
</style> |