You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
387 lines
9.8 KiB
387 lines
9.8 KiB
<!--
|
|
* @FileDescription: 阿里花呗分期支付
|
|
* @Author: kahu
|
|
* @Date: 2022/11/21
|
|
* @LastEditors: kahu
|
|
* @LastEditTime: 2022/11/21
|
|
-->
|
|
<template>
|
|
<view class="ali-hb-pay-content">
|
|
<u-popup
|
|
class="pay-type-popup"
|
|
v-model="showPopup"
|
|
mode="bottom"
|
|
border-radius="14"
|
|
close-icon-pos="top-right"
|
|
close-icon-size="20"
|
|
>
|
|
<view class="pay-type-item">
|
|
<radio-group
|
|
@change="payTypeChange"
|
|
v-model="flowerObj.paymentMode"
|
|
>
|
|
<view class="pay-type-radio">
|
|
<view class="pay-type-img">
|
|
<img
|
|
class="pay-type-img-inner"
|
|
src="http://36.138.125.206:8081/ceres-local-file/static/images/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="http://36.138.125.206:8081/ceres-local-file/static/images/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 class="huabei-detail" v-if="flowerObj.paymentMode==='3'">
|
|
<radio-group
|
|
@change="handleChangePeriods"
|
|
v-model="flowerObj.hbByStagesPeriods"
|
|
>
|
|
<view class="period-radio" v-for="stages in flowerObj.hbByStagesList">
|
|
<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
|
|
class="fenqi-total-amount"
|
|
v-if="totalPrice >= 0.03 && flowerObj.paymentMode === '3'"
|
|
>
|
|
<label class="fenqi-all">分期总额 ￥{{ totalPrice }}</label>
|
|
<label class="charge-fee-all">手续费 ￥{{ flowerObj.hbServiceChargeTotal }}</label>
|
|
</view>
|
|
<view
|
|
class="fenqi-total-amount"
|
|
v-if="flowerObj.paymentMode === '2'"
|
|
>
|
|
<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",
|
|
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, // 花呗支付总手续费
|
|
},
|
|
}
|
|
},
|
|
props:{
|
|
totalPrice:{
|
|
type:Number | String,
|
|
default:()=>0
|
|
},
|
|
show:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
alipayInfo:{
|
|
type:Object,
|
|
default:()=>({})
|
|
}
|
|
},
|
|
computed:{
|
|
showPopup:{
|
|
get(){
|
|
return this.show
|
|
},
|
|
set(value){
|
|
this.$emit('change',value)
|
|
}
|
|
}
|
|
},
|
|
model:{
|
|
prop:'show',
|
|
event:'change'
|
|
},
|
|
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>
|