cashier_wx/components/paymentMethod copy.vue

<template>
	<!-- 支付方式 -->
	<view class="paymentMethod">
		<view class="paymentMethod_content">
			<view class="paymentMethod_title">支付方式</view>
			<up-radio-group v-model="radiovalue" iconPlacement="right" @change="groupChanges" :size="28"
				placement="column">
				<block v-for="(item,index) in paymentMethodList" :key="index">
					<view class="method_list" @click="groupChanges(item.type)" :class="{disabled:returnDisabled(item)}"
						v-if="(index+1) == radiovalue?!changeFreeenable:true">
						<view class="method_list_top">
							<view class="method_list_top_left">
								<image class="icon" :src="item.url" mode="aspectFill" />
								<view class="method_list_top_cen">
									<view class="name"> {{ item.name }} </view>
									<view class="method_list_bom" v-if="item.type == 1">
										<text class="balance">
											当前余额￥{{orderVIP?(orderVIP.amount||0):0}}</text>
										<text class="topUpNow" @click="goRecharge">去充值</text>
									</view>
								</view>
							</view>
							<up-radio :disabled="returnDisabled(item)" activeColor="#E8AD7B" icon-size="18" size="18" :name="item.type">
							</up-radio>
						</view>
					</view>
				</block>
			</up-radio-group>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		defineProps,
		computed,
		defineEmits,
		watch,
		watchEffect,
		defineExpose
	} from 'vue'

	const props = defineProps({
		rechargeFreeChecked: {
			type: Boolean,
			default: false
		},
		payAmount: {
			type: Number,
			default: 0
		},
		freeCheck: {
			type: Boolean,
			default: false
		},
		changeFreeenable: {
			type: Boolean,
			default: false
		},
		disablePayType: {
			type: Array,
			default: () => {
				return []
			}
		}

	});

	function returnDisabled(item) {
		if (props.disablePayType.includes(item.name)) {
			return true
		}else{
			return false
		}
	}

	const orderVIP = ref(null)
	const emits = defineEmits(['customevent', 'groupChange']);
	watchEffect(() => {
		orderVIP.value = uni.cache.get('orderVIP')
	})

	const orderVIPfun = (data) => {
		orderVIP.value = data
	}

	const paymentMethodList = ref([
		// #ifdef MP-WEIXIN
		{
			name: "微信支付",
			type: 2,
			url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png",
			payType: 'wechatPay'
		},
		// #endif
		// #ifdef MP-ALIPAY
		{
			name: "支付宝支付",
			type: 3,
			url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/alipay.png",
			payType: 'aliPay'
		},
		// #endif
		{
			name: "余额支付",
			type: 1,
			url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png",
			payType: 'accountPay'
		}
	])


	const paymentMethodName = ref([{
			name: "余额支付",
			type: 1,
			url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png",
			payType: 'accountPay'
		},
		{
			name: "微信支付",
			type: 2,
			url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png",
			payType: 'wechatPay'
		},
		{
			name: "支付宝支付",
			type: 3,
			url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/alipay.png",
			payType: 'aliPay'
		},
	])

	const radiovalue = ref(2) // 支付方式

	const ispws = ref(false) // 输入支付密码

	const storeInfo = ref({})

	// * 监听支付方式切换
	const groupChanges = (type) => {
		if (props.freeCheck && type == 1) {
			return;
		}
		const item=paymentMethodList.value.find(v=>v.type==type)
		if(item&&returnDisabled(item)){
			 uni.showToast({
				title:"当前支付方式不可用",
				icon:'none'
			})
			return
		}
		// if (props.payAmount <= 0 && type != 1) {
		// 	return;
		// }
		radiovalue.value = type;
		let name = paymentMethodName.value[type - 1].name;

		emits("groupChange", paymentMethodName.value[type - 1])
	}

	// 去充值
	const goRecharge = () => {
		if (orderVIP.value.isVip) {
			uni.navigateTo({
				url: '/pages/user/member/czzx?shopId=' + orderVIP.value.shopId
			})
			return
		}
		uni.navigateTo({
			url: '/user/vip/buy-vip?shopId=' + orderVIP.value.shopId
		})

		// uni.pro.navigateTo('user/member/index', {
		// 	shopId: orderVIP.value.shopId
		// })
	}
	// 将方法暴露给父组件
	defineExpose({
		groupChanges,
		orderVIPfun
	});
</script>

<style lang="scss">
	.paymentMethod {
		box-sizing: border-box;
		margin-top: 30rpx;
		border-radius: 18rpx;

		.paymentMethod_content {
			background-color: #fff;
			border-radius: 22rpx;
			padding: 30rpx 30rpx 0 30rpx;
			box-sizing: border-box;

			.paymentMethod_title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				box-sizing: border-box;
			}

			.method_list {
				padding: 40rpx 0;
				box-sizing: border-box;
				&.disabled{
					opacity: .6;
				}
				.method_list_top {
					display: flex;
					justify-content: space-between;

					.method_list_top_left {
						display: flex;
						align-items: center;

						.icon {
							width: 54.67rpx !important;
							height: 48rpx !important;
							margin-right: 22rpx;
						}

						.name {
							font-size: 32rpx;
							font-weight: 500;
							color: #333;
						}

						.method_list_top_cen {
							display: flex;
							flex-direction: column;
						}
					}

				}

				.method_list_bom {
					display: flex;
					align-items: center;

					.balance {
						margin-right: 20rpx;
						font-size: 24rpx;
					}

					.topUpNow {
						color: #FF803D;
						font-size: 28rpx;
					}
				}
			}

			.method_list:nth-child(odd) {
				border-bottom: 2rpx solid #e5e5e5;
			}
		}
	}
</style>