cashier_wx/components/paymentMethod.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)"
						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" v-if="orderVIP.isVip == 1">
											会员卡余额￥{{orderVIP?orderVIP.amount:0}}</text>
										<text class="topUpNow"
											@click="goRecharge">{{orderVIP.isVip == 0?'注册会员':'去充值'}}</text>
									</view>
								</view>
							</view>
							<up-radio 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
		}


	});

	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;
		}
		// 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 = () => {
		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;

				.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>