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="groupChange" :size="28"
				placement="column">
				<block v-for="(item,index) in paymentMethodList" :key="index">
					<view class="method_list" @click="groupChange(item.type)">
						<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">会员卡余额 ￥{{amountVIP?amountVIP.amount:0}}</text>
										<text class="topUpNow" @click="goRecharge">去充值</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
	} from 'vue'

	const props = defineProps({
		rechargeFreeChecked: {
			type: Boolean,
			default: false
		},
		payAmount: {
			type: Number,
			default: 0
		},
		freeCheck: {
			type: Boolean,
			default: false
		}

	});

	const emits = defineEmits(['customevent', 'groupChange']);

	const amountVIP = uni.cache.get('shopUserInfo')

	const paymentMethodList = ref([{
			name: "余额支付",
			type: 1,
			url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png",
			payType: ''
		},
		// #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
	])


	const paymentMethodName = ref([{
			name: "余额支付",
			type: 1,
			url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png",
			payType: ''
		},
		{
			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(1) // 支付方式

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

	const storeInfo = ref({})

	// * 监听支付方式切换
	const groupChange = (type) => {
		console.log(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", type)
	}

	// 去充值
	const goRecharge = () => {
		uni.pro.navigateTo('/pages/member/index', {
			shopId: uni.cache.get('shopId')
		})
	}
</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>