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

<template>
	<view class="ali-hb-pay-content">
		<u-popup
			v-model="showPopup" class="pay-type-popup" mode="bottom" border-radius="14"
			close-icon-pos="top-right"
			close-icon-size="20"
		>
			<view class="pay-type-item">
				<radio-group v-model="flowerObj.paymentMode" @change="payTypeChange">
					<view class="pay-type-radio">
						<view class="pay-type-img">
							<img class="pay-type-img-inner" src="../../static/images/origin/alipay.png" />
						</view>
						<label class="pay-type-label">支付宝支付</label>
						<radio
							class="pay-type-radio-item" style="transform:scale(0.7)" :checked="flowerObj.paymentMode === '2'"
							value="2"
						/>
					</view>
					<view class="pay-type-radio">
						<view class="pay-type-img">
							<img class="pay-type-img-inner" src="../../static/images/origin/huabei.png" />
						</view>
						<label class="pay-type-label">花呗分期</label>
						<radio
							class="pay-type-radio-item" style="transform:scale(0.7)" :disabled="totalPrice < 0.03"
							:checked="flowerObj.paymentMode === '3'" value="3"
						/>
					</view>
				</radio-group>
				<view v-if="flowerObj.paymentMode === '3'" class="huabei-detail">
					<radio-group v-model="flowerObj.hbByStagesPeriods" @change="handleChangePeriods">
						<view v-for="stages in flowerObj.hbByStagesList" class="period-radio">
							<view class="period-amount">
								<label class="period-each">￥ {{ stages.price }}x{{ stages.numberOfStages }}期</label>
								<label class="period-each-charge">手续费￥{{ stages.serviceCharge }}/期</label>
							</view>
							<radio
								class="period-type-radio-item" style="transform:scale(0.7)" :disabled="stages.disabled"
								:checked="Number(flowerObj.hbByStagesPeriods) === stages.numberOfStages"
								:value="stages.numberOfStages + ''"
							/>
						</view>
					</radio-group>
				</view>
			</view>
			<view class="paytype-confirm">
				<view v-if="totalPrice >= 0.03 && flowerObj.paymentMode === '3'" class="fenqi-total-amount">
					<label class="fenqi-all">分期总额 ￥{{ totalPrice }}</label>
					<label class="charge-fee-all">手续费 ￥{{ flowerObj.hbServiceChargeTotal }}</label>
				</view>
				<view v-if="flowerObj.paymentMode === '2'" class="fenqi-total-amount">
					<label class="order-amount">订单总额 ￥{{ totalPrice }}</label>
				</view>
				<view class="fenqi-confirm">
					<text class="btn active" @click="handleAliPayConfirm">
						确认
					</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import NET from '../../utils/request'
import API from '../../config/api'
import { handleDoPay } from '../../utils/payUtil'

export default {
	name: 'AliHbPay',
	model: {
		prop: 'show',
		event: 'change'
	},
	props: {
		totalPrice: {
			type: Number | String,
			default: () => 0
		},
		show: {
			type: Boolean,
			default: false
		},
		alipayInfo: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			// 花呗相关
			flowerObj: {
				paymentMode: '2', // 支付方式 1-微信支付 2-支付宝支付 3-花呗分期
				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 // 花呗支付总手续费
			}
		}
	},
	computed: {
		showPopup: {
			get() {
				return this.show
			},
			set(value) {
				this.$emit('change', value)
			}
		}
	},
	mounted() {
		this.getTheFlowerConfig()
	},
	methods: {
		/**
		 * 获取花呗分期配置
		 */

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

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

		handleChangePeriods(event) {
			this.flowerObj.hbByStagesPeriods = event
			this.handleHbStagesAndPrice()
		},

		/**
		 * 处理支付宝支付方式选择逻辑
		 * @param event
		 */

		payTypeChange(event) {
			const flowerObj = this.flowerObj
			const paymentMode = flowerObj.paymentMode = event.target.value
			if (paymentMode === '2') {
				// 支付宝支付，取消分期选择
				flowerObj.hbByStagesPeriods = '-1'
				// 3 6 12 全部禁止
				flowerObj.hbByStagesList.map((item) => {
					item.disabled = true
				})
			} else {
				// 分期支付，默认选三期
				flowerObj.hbByStagesPeriods = '3'
			}
			this.handleHbStagesAndPrice()
		},

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

		handleHbStagesAndPrice() {
			const { flowerObj, totalPrice } = this
			if (flowerObj.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
				if (this.totalPrice < stages.numberOfStages / 100) {
					stages.disabled = true
				}
			})
		},

		/**
		 * 确认支付宝支付
		 * @return {Promise<void>}
		 */

		async handleAliPayConfirm() {
			const payInfo = Object.assign({}, this.alipayInfo, {
				'paymentMode': this.flowerObj.paymentMode,
				'huabeiPeriod': this.flowerObj.hbByStagesPeriods
			})
			await handleDoPay.call(this, payInfo)
			this.$emit('confirm', {
				'paymentMode': this.flowerObj.paymentMode,
				'huabeiPeriod': this.flowerObj.hbByStagesPeriods
			})
		}
	}
}
</script>

<style
    lang="scss"
    scoped
>
.pay-type-item {
	.pay-type-radio {
		background-color: white;
		border-bottom: 1upx solid #EDEDED;
		margin-bottom: 20upx;
		padding: 24upx 20upx 24upx 20upx;

		.pay-type-img {
			display: inline-block;

			.pay-type-img-inner {
				width: 50upx;
				height: 50upx;
				vertical-align: middle;
			}
		}

		.pay-type-label {
			vertical-align: middle;
			margin-left: 30upx;
		}

		.pay-type-radio-item {
			float: right;
			margin-right: 20upx;
			width: 50upx;
			height: 50upx;
		}
	}

	.huabei-detail {
		margin-top: 20upx;

		.fenqi-wenzi {
			display: inline-block;
			margin-left: 64upx;
		}

		.fenqi-amount {
			display: block;
			margin-left: 64upx;
			margin-top: 14upx;
			color: #BABBBC;
		}

		.fenqi-charge-fee {
			float: right;
			margin-right: 68upx;
			color: #BABBBC;
		}

		.fenqi-modal {
			width: 40upx;
			height: 40upx;
			margin-left: 20upx;
			float: right;
			position: relative;
			top: -80upx;
		}
	}
}

.paytype-confirm {
	height: 120upx;
	padding: 0upx 108upx 0upx 32upx;

	.fenqi-all {
		display: inline-block;
		width: 100%;
	}

	.fenqi-total-amount {
		width: 65%;
		float: left;
	}

	.fenqi-confirm {
		float: right;
		width: 160upx;
		padding: 0upx 20upx;

		.btn {
			width: 216upx;
			height: 80upx;
			line-height: 80upx;
			border-radius: 40upx;
			font-size: 28upx;
			text-align: center;
			background: linear-gradient(90deg, rgba(255, 162, 0, 1), rgba(255, 121, 17, 1));
			color: #fff;
			display: inline-block;
			margin-right: 66upx;
		}
	}
}

.period-radio {
	margin: 30upx;
	padding-right: 100upx;
	width: 95%;
	border-bottom: 1px solid #EFEFEF;

	.period-amount {
		display: inline-block;

		.period-each-charge {
			display: inline-block;
			margin-top: 12upx;
			margin-left: 6upx;
			font-size: 26upx;
			color: #b7b7b7;
			margin-bottom: 13upx;
		}
	}

	.period-each {
		display: block;
	}

	.period-type-radio-item {
		float: right;
	}
}
</style>