cashier_weapp/pagesOrder/components/paymentMethod.vue

<template>
	<!-- 支付方式 -->
	<view class="paymentMethod">
		<view class="paymentMethod_content">
			<view class="paymentMethod_title">支付方式</view>
			<u-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>
								<u-radio activeColor="#E8AD7B" :disabled="(freeCheck&&index==0) || (index!=0&&payAmount<=0) || (rechargeFreeChecked&&index==0)" icon-size="36" size="36" :name="item.type">
								</u-radio>
							</view>
							
						</view>
				</block>
			</u-radio-group>
		</view>
	</view>
</template>

<script>
	export default {
		
	
		data() {
			return {
				paymentMethodList:[
					{ name: "余额支付", type: 1, url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png"},
					// #ifdef MP-WEIXIN
					{ name: "微信支付", type: 2, url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png"},
					// #endif
					// #ifdef MP-ALIPAY
					{ name: "支付宝支付", type: 3, url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/alipay.png"},
					// #endif
				],
				paymentMethodName:[
					{ name: "余额支付", type: 1, url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png"},
					{ name: "微信支付", type: 2, url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png"},
					{ name: "支付宝支付", type: 3, url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/alipay.png"},
				],
				radiovalue: 1,		// 支付方式
				ispws: false,  		// 输入支付密码
				storeInfo: {},
			}
		},
		props:{
			rechargeFreeChecked:{
				type: Boolean
			},
			payAmount:{
				type: Number
			},
			amountVIP:{
				type: Object
			},
			freeCheck: {
				type: Boolean
			}
		},
		watch: {
		
			// freeCheck(newVal,oldVal) {
			// 	if ( newVal ) {
			// 		// #ifdef MP-WEIXIN
			// 		this.radiovalue = 2
			// 		// #endif
			// 		// #ifdef MP-ALIPAY
			// 		this.radiovalue = 3
			// 		// #endif
			// 		let name = this.paymentMethodName[this.radiovalue-1].name;
			// 		console.log({type:this.radiovalue ,name: name })
			// 		this.$emit("groupChange",{type:this.radiovalue ,name: name })
			// 	}
			// }
			payAmount:{
				immediate: true,
				handler (newVal) {
					if ( this.amountVIP.amount < newVal) {
						// #ifdef MP-WEIXIN
						this.radiovalue = 2
						// #endif
						// #ifdef MP-ALIPAY
						this.radiovalue = 3
						// #endif
					}
					if ( newVal <= 0 ) {
						this.radiovalue = 1
					}
					let name = this.paymentMethodName[this.radiovalue-1].name;
					this.$emit("groupChange",{type:this.radiovalue ,name: name })
				}
			},
			rechargeFreeChecked:{
				immediate: true,
				handler (newVal) {
					if ( newVal ) {
						// #ifdef MP-WEIXIN
						this.radiovalue = 2
						// #endif
						// #ifdef MP-ALIPAY
						this.radiovalue = 3
						// #endif
						let name = this.paymentMethodName[this.radiovalue-1].name;
						this.$emit("groupChange",{type:this.radiovalue ,name: name })
					}
				}
			},
			freeCheck:{
				immediate: true,
				handler (newVal) {
					if ( newVal ) {
						// #ifdef MP-WEIXIN
						this.radiovalue = 2
						// #endif
						// #ifdef MP-ALIPAY
						this.radiovalue = 3
						// #endif
						let name = this.paymentMethodName[this.radiovalue-1].name;
						this.$emit("groupChange",{type:this.radiovalue ,name: name })
					}
				}
			},
		},
		mounted() {
			// console.log(this.amountVIP)
			// this.getAount();
			
		},
		methods: {
			/**
			 * 监听支付方式切换
			 * @param {Object} 
			 */
			groupChange(type) {
				if ( this.freeCheck && type == 1 ) {
					return;
				}
				if ( this.payAmount<=0 && type != 1 ) {
					return;
				}
				this.radiovalue = type;
				let name = this.paymentMethodName[type-1].name;
				this.$emit("groupChange",{type:type ,name: name })
			},

			
			/**
			 * 去充值
			 */
			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>