fix: jinsha支付重新对接
This commit is contained in:
old burden
parent
899635eaf5
commit
73888efd14
|
|
@ -73,6 +73,47 @@
|
|||
</mf-button>
|
||||
</div>
|
||||
</mf-dialog>
|
||||
<!-- 银行卡信息输入对话框 -->
|
||||
<mf-dialog
|
||||
:visible="cardInfoVisible"
|
||||
modal-class="card-info-dialog"
|
||||
class="card-info-dialog-wrapper"
|
||||
:title="$t('common.recharge')"
|
||||
hideTitle
|
||||
:footer="false"
|
||||
unmountOnClose
|
||||
@cancel="cancelCardInfo">
|
||||
<div class="card-info-close">
|
||||
<mf-icon
|
||||
value="icon-close"
|
||||
@click="cancelCardInfo" />
|
||||
</div>
|
||||
<div class="card-info-title">
|
||||
{{ $t('common.recharge') }}
|
||||
</div>
|
||||
<mf-input
|
||||
class="card-info-input"
|
||||
:placeholder="$t('common.cardNo')"
|
||||
v-model="cardno" />
|
||||
<mf-input
|
||||
class="card-info-input"
|
||||
:placeholder="$t('common.cardName')"
|
||||
v-model="cardname" />
|
||||
<div class="card-info-submit">
|
||||
<mf-button
|
||||
size="large"
|
||||
@click="cancelCardInfo">
|
||||
{{ $t('common.cancel') }}
|
||||
</mf-button>
|
||||
<mf-button
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submitCardInfo">
|
||||
{{ $t('common.ok') }}
|
||||
</mf-button>
|
||||
</div>
|
||||
</mf-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -90,7 +131,11 @@ export default {
|
|||
rechargeRemark: '',
|
||||
payVisible: false,
|
||||
orderNo: null,
|
||||
showPay: import.meta.env.VITE_SHOW_PAY == "SUCCESS"
|
||||
showPay: import.meta.env.VITE_SHOW_PAY == "SUCCESS",
|
||||
cardInfoVisible: false,
|
||||
cardno: '',
|
||||
cardname: '',
|
||||
currentGearId: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
|
@ -108,6 +153,12 @@ export default {
|
|||
this.orderNo = null
|
||||
this.payVisible = false
|
||||
},
|
||||
cancelCardInfo() {
|
||||
this.cardInfoVisible = false
|
||||
this.cardno = ''
|
||||
this.cardname = ''
|
||||
this.currentGearId = null
|
||||
},
|
||||
selectItem(item, idx) {
|
||||
this.selectedIndex = idx
|
||||
this.rechargeRemark = item.title
|
||||
|
|
@ -167,14 +218,41 @@ export default {
|
|||
},
|
||||
ok() {
|
||||
let selectedItem = this.dataList[this.selectedIndex]
|
||||
let amount = selectedItem.rechargeAmount
|
||||
// 判断是否是 jinsha-pay 接口，需要先输入银行卡信息
|
||||
if (this.apiUrl && this.apiUrl.includes('jinsha-pay')) {
|
||||
this.currentGearId = selectedItem.id
|
||||
this.cardInfoVisible = true
|
||||
return
|
||||
}
|
||||
// 其他支付方式直接调用
|
||||
this.doRecharge(selectedItem.id)
|
||||
},
|
||||
submitCardInfo() {
|
||||
// 验证银行卡信息
|
||||
if (!this.cardno || !this.cardno.trim()) {
|
||||
this.$message.error(this.$t('common.cardNoRequired') || '请输入银行卡号')
|
||||
return
|
||||
}
|
||||
if (!this.cardname || !this.cardname.trim()) {
|
||||
this.$message.error(this.$t('common.cardNameRequired') || '请输入银行卡姓名')
|
||||
return
|
||||
}
|
||||
this.doRecharge(this.currentGearId, this.cardno.trim(), this.cardname.trim())
|
||||
},
|
||||
doRecharge(gearId, cardno, cardname) {
|
||||
this.loading = true
|
||||
let params = {
|
||||
gearId: gearId
|
||||
}
|
||||
// 如果是 jinsha-pay，添加银行卡信息参数
|
||||
if (cardno && cardname) {
|
||||
params.cardno = cardno
|
||||
params.cardname = cardname
|
||||
}
|
||||
this.$axios({
|
||||
url: this.apiUrl,
|
||||
method: 'get',
|
||||
data: {
|
||||
gearId: selectedItem.id
|
||||
}
|
||||
data: params
|
||||
})
|
||||
.then((res) => {
|
||||
this.loading = false
|
||||
|
|
@ -184,13 +262,31 @@ export default {
|
|||
return;
|
||||
}
|
||||
if (res.code == 200) {
|
||||
// jinsha-pay 返回格式: {code: 0, msg: "成功"}
|
||||
// 其他支付方式返回: {orderNo, payUrl}
|
||||
if (this.apiUrl && this.apiUrl.includes('jinsha-pay')) {
|
||||
// jinsha支付成功，关闭对话框
|
||||
this.cardInfoVisible = false
|
||||
this.cardno = ''
|
||||
this.cardname = ''
|
||||
this.$message.success(this.$t('common.rechargeSuccessfully') || '充值成功，请等待处理')
|
||||
} else {
|
||||
// 其他支付方式，跳转支付页面
|
||||
this.orderNo = res.data?.orderNo;
|
||||
this.rechargeUrl = res.data?.payUrl;
|
||||
window.open(res.data?.payUrl)
|
||||
if (res.data?.payUrl) {
|
||||
window.open(res.data.payUrl)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((_) => {
|
||||
.catch((err) => {
|
||||
this.loading = false
|
||||
if (err.response && err.response.data && err.response.data.msg) {
|
||||
this.$message.error(err.response.data.msg)
|
||||
} else {
|
||||
this.$message.error(this.$t('common.rechargeFailed') || '充值失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -298,6 +394,96 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-info-dialog {
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(39, 20, 51, 0.7) 0%,
|
||||
rgba(230, 33, 122, 0.7) 49%
|
||||
);
|
||||
border-radius: 20px;
|
||||
border: 2px solid #e6217a;
|
||||
width: 500px;
|
||||
top: 45% !important;
|
||||
transform: translateY(-45%) !important;
|
||||
&-wrapper {
|
||||
.arco-modal-mask {
|
||||
backdrop-filter: blur(10px);
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.arco-modal-body {
|
||||
padding: 24px 30px 30px 30px;
|
||||
}
|
||||
|
||||
.card-info-close {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 6px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
|
||||
.mf-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-info-title {
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-info-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 10px;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(#ffffff, 0.3);
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
cursor: text;
|
||||
font-size: 14px;
|
||||
|
||||
::placeholder {
|
||||
color: rgba(#fff, 0.5);
|
||||
}
|
||||
|
||||
&.arco-input-wrapper:focus-within {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.card-info-submit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
gap: 14px;
|
||||
.mf-button {
|
||||
width: 160px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mf-recharge-pc {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
|
|
|
|||
|
|
@ -137,5 +137,10 @@ export default {
|
|||
loadingText: 'Loading...',
|
||||
hasMore: 'Pull up to load more',
|
||||
noMore: 'No more data',
|
||||
giftAmount: 'Credited Amount'
|
||||
giftAmount: 'Credited Amount',
|
||||
cardNo: 'Card Number',
|
||||
cardName: 'Cardholder Name',
|
||||
cardNoRequired: 'Please enter card number',
|
||||
cardNameRequired: 'Please enter cardholder name',
|
||||
rechargeFailed: 'Recharge failed'
|
||||
}
|
||||
|
|
@ -141,5 +141,10 @@ export default {
|
|||
loadingText: '載入中...',
|
||||
hasMore: '上拉載入更多',
|
||||
noMore: '沒有更多了',
|
||||
giftAmount: '到帳金額'
|
||||
giftAmount: '到帳金額',
|
||||
cardNo: '銀行卡號',
|
||||
cardName: '銀行卡姓名',
|
||||
cardNoRequired: '請輸入銀行卡號',
|
||||
cardNameRequired: '請輸入銀行卡姓名',
|
||||
rechargeFailed: '充值失敗'
|
||||
}
|
||||
Loading…
Reference in New Issue