admin/jurong_circle_frontdesk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加支付方式

Browse Source
This commit is contained in:
dzl
2025-09-29 15:01:55 +08:00
parent a0d8823b02
commit 743abaebb5
1 changed files with 54 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/views/Pay.vue
View File

@@ -246,7 +246,7 @@
</div> </div>
<!-- 支付宝支付选项 --> <!-- 支付宝支付选项 -->
<!-- <div <div
class="payment-option" class="payment-option"
:class="{ active: selectedPaymentMethod === 'alipay_wap' }" :class="{ active: selectedPaymentMethod === 'alipay_wap' }"
@click="selectPaymentMethod('alipay_wap')" @click="selectPaymentMethod('alipay_wap')"
@@ -259,10 +259,29 @@
</div> </div>
<div class="payment-info"> <div class="payment-info">
<div class="payment-name">支付宝支付</div> <div class="payment-name">支付宝支付</div>
<div class="payment-desc">使用支付宝进行支付</div> <div class="payment-desc">使用支付宝进行支付（¥{{ getRMBPrice() }}）</div>
</div> </div>
<el-icon class="check-icon" v-if="selectedPaymentMethod === 'alipay_wap'"><Check /></el-icon> <el-icon class="check-icon" v-if="selectedPaymentMethod === 'alipay_wap'"><Check /></el-icon>
</div> --> </div>
<!-- 微信支付选项 -->
<div
class="payment-option"
:class="{ active: selectedPaymentMethod === 'wechat_h5' }"
@click="selectPaymentMethod('wechat_h5')"
>
<div class="payment-icon" style="color: #07C160;">
<svg viewBox="0 0 24 24" width="20" height="20">
<path fill="#07C160" d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 4.882-1.932 7.621-.55-.302-2.676-2.476-4.81-5.693-6.025C11.268 2.475 9.975 2.188 8.691 2.188z"/>
<path fill="#07C160" d="M23.759 11.89c0-3.26-2.931-5.932-6.563-5.932s-6.563 2.672-6.563 5.932c0 3.259 2.931 5.932 6.563 5.932.711 0 1.394-.087 2.047-.235a.68.68 0 0 1 .567.079l1.501.877a.255.255 0 0 0 .132.043.234.234 0 0 0 .231-.234.24.24 0 0 0-.038-.169l-.308-1.117a.467.467 0 0 1 .169-.525C22.331 15.604 23.759 13.833 23.759 11.89z"/>
</svg>
</div>
<div class="payment-info">
<div class="payment-name">微信支付</div>
<div class="payment-desc">使用微信进行支付（¥{{ getRMBPrice() }}）</div>
</div>
<el-icon class="check-icon" v-if="selectedPaymentMethod === 'wechat_h5'"><Check /></el-icon>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -315,6 +334,15 @@
</div> </div>
</div> </div>
</template> </template>
<template v-else-if="selectedPaymentMethod === 'alipay_wap' || selectedPaymentMethod === 'wechat_h5'">
<!-- 微信支付或支付宝支付 -->
<div class="bottom-price-container">
<div class="bottom-main-price">
<span class="bottom-rmb-symbol">¥</span>
<span class="bottom-rmb-price">{{ getRMBPrice() }}</span>
</div>
</div>
</template>
<template v-else> <template v-else>
<!-- 未选择支付方式时的默认显示 --> <!-- 未选择支付方式时的默认显示 -->
<div class="bottom-price-container"> <div class="bottom-price-container">
@@ -389,6 +417,12 @@ const totalPointsPrice = computed(() => {
return sum + (pointsPrice * item.quantity) return sum + (pointsPrice * item.quantity)
}, 0) }, 0)
}) })
// 计算人民币价格（融豆价格1:1换算）
const getRMBPrice = () => {
const totalRongdou = totalRongdouPrice.value
return (totalRongdou).toFixed(2) // 假设1融豆=0.01元，可根据实际汇率调整
}
// 用户余额数据 // 用户余额数据
const userBalance = ref({ const userBalance = ref({
points: 0, // 用户积分 points: 0, // 用户积分
@@ -1471,8 +1505,23 @@ onMounted(() => {
} }
.bottom-points-price { .bottom-points-price {
font-size: 14px; font-size: 16px;
color: #666; font-weight: bold;
color: #ff4757;
}
/* 人民币价格显示样式 */
.bottom-rmb-symbol {
font-size: 16px;
font-weight: bold;
color: #ff4757;
margin-right: 2px;
}
.bottom-rmb-price {
font-size: 18px;
font-weight: bold;
color: #ff4757;
} }
.bottom-points-price { .bottom-points-price {