zhibo/components/pay-type-pop/pay-type-pop.vue

<template>
	<u-popup :show="show" @close="close" closeOnClickOverlay round="20rpx" closeable v-if="showType=='popup'">
		<view class="pop_cont">
			<view class="center bold">支付方式</view>
			<view class="column mt30">
				<view class="pay_item align-center" v-for="(item,index) in pay_list" :key="index"
					@click="emits('update:payment_type',item.type)">
					<view class="align-center flex-1">
						<u--image showLoading :src="item.cover" width="54rpx" height="54rpx" lazy-load></u--image>
						<text class="ml20">{{item.name}}</text>
					</view>
					<view :class="payment_type==item.type?['radio','radio_act']:['radio']">
						<u-icon name="checkmark" color="#fff"></u-icon>
					</view>
				</view>
			</view>
			<view class="mtb30">
				<u-button type="primary" @click="onConfirm" shape="circle" color="linear-gradient(
					102deg, #F1AE73 0%, #EC5232 100%)">立即支付</u-button>
			</view>
		</view>
	</u-popup>
	<view class="pop_cont" v-else>
		<view class="bold">支付方式</view>
		<view class="column mt30">
			<view class="pay_item align-center" v-for="(item,index) in pay_list" :key="index"
				@click="emits('update:payment_type',item.name)">
				<view class="align-center flex-1">
					<u--image showLoading :src="item.cover" width="54rpx" height="54rpx" lazy-load></u--image>
					<text class="ml20 ">{{item.name}}</text>
				</view>
				<view :class="payment_type==item.type?['radio','radio_act']:['radio']">
					<u-icon name="checkmark" color="#fff"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		watchEffect,
	} from "vue";
	import {
		checkLogin
	} from "@/core/app";
	import {
		useRequestPayment
	} from '@/hooks/useRequestPayment/useRequestPayment.js'
	name: "pay-type-pop"
	const emits = defineEmits(['update:show', 'update:payment_type', 'confirm', 'close'])
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		payment_type: {
			type: String,
			default: 'wxpay',
		},
		showType: {
			type: String,
			default: 'popup', //popup:弹出框   cell:显示到页面
		},
		showPayList: { //支付列表
			type: Array,
			default: () => ['wxpay']
		},
		userMoney: {
			type: String,
			default: '0',
		}
	})
	const pay_list = ref([])
	const {
		getPayItem,
		getPayListData
	} = useRequestPayment()
	onMounted(async () => {
		pay_list.value = await getPayListData()
		pay_list.value = pay_list.value.filter(item => {
			if (item.type == 'wechat_applet') item.type = 'wxpay'
			if (props.showPayList.includes(item.type)) return item
		})
		let balanceData = pay_list.value.find(item => item.type == 'balance')
		if (!balanceData) return
		if (props.userMoney) {
			balanceData.label = `余额(${props.userMoney})`
		} else {
			let userInfo = uni.getStorageSync('userInfo-qianyue')
			if (userInfo && props.showPayList.includes('balance')) {
				balanceData.label = `余额(${userInfo.money})`
			}
		}
	})
	// 关闭pop
	const close = () => {
		emits('close', false)
	}
	const onConfirm = () => {
		emits('confirm', props.payment_type)
	}
</script>

<style lang="scss">
	.pop_cont {
		width: calc(100% - 60rpx);
		padding: 30rpx;

		.pay_item {
			padding: 20rpx;
		}

		.radio {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			border: 1rpx solid #b5b5b5;
			transition: .2s;
			background: #b5b5b5;
		}

		.radio_act {
			background: #EB6446;
			border: 1rpx solid rgba(0, 0, 0, 0);
		}
	}
</style>