material-shop-user/components/CashierList/index.vue

<template>
	<view class="cashier-list-content">
		<u-radio-group v-model="paymentMode" placement="row" icon-placement="right" @change="handleChangePaymentMode">
			<view v-for="payment in paymentList" :key="payment.id" class="cashier">
				<view class="cashier-item" @click="handleChangePaymentMode(payment.paymentMode, payment.disabled)">
					<view class="icon-text">
						<image class="pay-type-img-inner" :src="payment.icon" mode="widthFix" />
						{{ payment.label }}
						<span v-if="paymentMode === 3 && paymentMode === payment.paymentMode">
							（手续费：￥{{ flowerObj.hbServiceChargeTotal }}）
						</span>
					</view>
					<view class="radio">
						<u-radio :disabled="payment.disabled" active-color="#c5aa7b" :name="payment.paymentMode" />
					</view>
				</view>
				<!-- 花呗分期 -->
				<view v-if="paymentMode === 3 && paymentMode === payment.paymentMode" class="ali-hb-content">
					<u-radio-group
						v-model="flowerObj.hbByStagesPeriods" placement="row" icon-placement="right"
						@change="handleChangePeriods"
					>
						<view v-for="(flowerItem, index) in flowerObj.hbByStagesList" :key="index" class="cashier">
							<view class="cashier-item" @click="handleChangePeriods(flowerItem.numberOfStages, flowerItem.disabled)">
								<view class="icon-text">
									{{ flowerItem.numberOfStages }}期（￥{{ flowerItem.price }}/期）
								</view>
								<view class="radio-context">
									手续费：￥{{ flowerItem.serviceCharge }}/期
									<u-radio
										class="radio" active-color="#c5aa7b" :disabled="flowerItem.disabled"
										:name="flowerItem.numberOfStages"
									/>
								</view>
							</view>
						</view>
					</u-radio-group>
				</view>
			</view>
		</u-radio-group>
	</view>
</template>

<script>
import NET from '../../utils/request'
import API from '../../config/api'

export default {
	name: 'CashierList',
	props: {
		totalPrice: {
			type: Number,
			default: () => 200
		}
	},
	data() {
		return {
			paymentMode: 1, // 支付方式 1微信 2支付宝 3花呗分期
			paymentList: [
				{
					id: 1,
					label: '微信支付',
					paymentMode: 1,
					icon: require('../../static/images/origin/wechat_pay.png'),
					disabled: false
				},
				{
					id: 2,
					label: '支付宝支付',
					paymentMode: 2,
					icon: require('../../static/images/origin/alipay.png'),
					disabled: false
				},
				{
					id: 3,
					label: '花呗分期',
					paymentMode: 3,
					icon: require('../../static/images/origin/huabei.png'),
					disabled: false
				}
			],
			// 花呗相关
			flowerObj: {
				hbChargeType: 1, // 花呗手续费支付方式 1-商户支付 2-用户支付 后端接口返回
				hbByStagesPeriods: -1, // 花呗分期期数 3 6 12
				hbByStagesList: [
					{
						rate: 0,
						price: 0,
						numberOfStages: 3,
						serviceCharge: 0,
						disabled: false
					},
					{
						rate: 0,
						price: 0,
						numberOfStages: 6,
						serviceCharge: 0,
						disabled: false
					},
					{
						rate: 0,
						price: 0,
						numberOfStages: 12,
						serviceCharge: 0,
						disabled: false
					}
				], // 花呗手续费比例列表 【{3期}，{6期}，{12期}】
				hbServiceChargeTotal: 0 // 花呗支付总手续费
			}
		}
	},
	mounted() {
		this.getTheFlowerConfig()
		this.handleSetDisable()
		this.handleNoticeFather()
	},
	methods: {
		/**
		 * 根据环境更改可选支付项
		 */

		handleSetDisable() {
			// #ifdef MP-WEIXIN
			this.paymentList[0].disabled = false
			this.paymentList[1].disabled = true
			this.paymentList[2].disabled = true
			this.paymentMode = 1
			// #endif
			// #ifdef MP-ALIPAY
			this.paymentList[0].disabled = true
			this.paymentList[1].disabled = false
			this.paymentList[2].disabled = false
			this.paymentMode = 2
			// #endif
			// #ifdef APP-PLUS || H5
			this.paymentList[0].disabled = false
			this.paymentList[1].disabled = true
			this.paymentList[2].disabled = true
			this.paymentMode = 1
			// #endif
		},

		/**
		 * 支付方式改变事件
		 * @param paymentMode
		 * @param disabled
		 */

		handleChangePaymentMode(paymentMode, disabled = false) {
			if (disabled) return
			this.paymentMode = paymentMode
			const { flowerObj } = this
			if ([1, 2].includes(paymentMode)) {
				// 支付宝支付，取消分期选择
				flowerObj.hbByStagesPeriods = -1
				// 3 6 12 全部禁止
				flowerObj.hbByStagesList.map((item) => {
					item.disabled = true
				})
			} else {
				// 分期支付，默认选三期
				flowerObj.hbByStagesPeriods = 3
			}
			this.handleHbStagesAndPrice()
			this.handleNoticeFather()
		},

		/**
		 * 获取花呗分期配置
		 */

		async getTheFlowerConfig() {
			const { data } = await NET.request(API.GetHuabeiConfig, {}, 'GET')
			const { flowerObj } = this
			flowerObj.hbChargeType = data.huabeiChargeType
			// 如果后端返回的是用户支付手续费，设置费率信息
			if (data.huabeiChargeType === 1) {
				data.huabeiFeeRateList.forEach((rate, index) => {
					flowerObj.hbByStagesList[index].rate = rate
				})
			}
		},

		/**
		 * 处理花呗期数选择
		 * @param periods 期数
		 * @param disabled
		 */

		handleChangePeriods(periods, disable = false) {
			if (disable) return
			const { flowerObj } = this
			flowerObj.hbByStagesPeriods = periods
			this.handleHbStagesAndPrice()
			this.handleNoticeFather()
		},

		/**
		 * 处理花呗价格和手续费显示
		 */

		handleHbStagesAndPrice() {
			const { flowerObj, totalPrice } = this
			if (this.paymentMode !== 3) return
			flowerObj.hbByStagesList.forEach((stages) => {
				// 根据价格填充每一期价格和手续费信息
				stages.price = ((totalPrice * (1 + stages.rate / 100)) / stages.numberOfStages).toFixed(2) // 每一期价格
				stages.serviceCharge = ((totalPrice * (stages.rate / 100)) / stages.numberOfStages).toFixed(2) // 每一期手续费
				// 计算总手续费
				if (stages.numberOfStages === Number(flowerObj.hbByStagesPeriods)) {
					flowerObj.hbServiceChargeTotal = (totalPrice * (stages.rate / 100)).toFixed(2)
				}
				// 处理允许分期的区间，公式为总价格要大于分期数/100
				this.totalPrice < stages.numberOfStages / 100 ? stages.disabled = true : stages.disabled = false
			})
		},

		/**
		 * 通知父组件
		 */

		handleNoticeFather() {
			const { paymentMode, flowerObj } = this
			const params = {
				paymentMode,
				huabeiPeriod: flowerObj.hbByStagesPeriods
			}
			this.$emit('change', params)
		}
	}
}
</script>

<style
    lang="scss"
    scoped
>
.cashier-list-content {
	width: 100%;
	padding: 0rpx 15rpx;
	box-sizing: border-box;
	background: #fff;

	.u-radio-group {
		display: block !important;
	}

	.cashier {
		border-bottom: 2rpx solid #d0d0d0;

		&:last-child {
			border-bottom: none
		}

		.cashier-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			box-sizing: border-box;
			position: relative;

			.icon-text {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 15rpx;
				}
			}

			.radio-context {
				display: flex;
				align-items: center;
				font-size: 14rpx;

				.radio {
					margin-left: 15rpx;
				}
			}
		}

		.ali-hb-content {
			padding: 10rpx 20px;
			box-sizing: border-box;
			border-top: 2rpx solid #d0d0d0;
		}
	}
}
</style>