fix: jinsha支付重新对接

This commit is contained in:
old burden 2026-01-21 11:42:37 +08:00
parent 899635eaf5
commit 73888efd14
3 changed files with 207 additions and 11 deletions

View File

@ -73,6 +73,47 @@
</mf-button> </mf-button>
</div> </div>
</mf-dialog> </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> </div>
</template> </template>
@ -90,7 +131,11 @@ export default {
rechargeRemark: '', rechargeRemark: '',
payVisible: false, payVisible: false,
orderNo: null, 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: { props: {
@ -108,6 +153,12 @@ export default {
this.orderNo = null this.orderNo = null
this.payVisible = false this.payVisible = false
}, },
cancelCardInfo() {
this.cardInfoVisible = false
this.cardno = ''
this.cardname = ''
this.currentGearId = null
},
selectItem(item, idx) { selectItem(item, idx) {
this.selectedIndex = idx this.selectedIndex = idx
this.rechargeRemark = item.title this.rechargeRemark = item.title
@ -167,14 +218,41 @@ export default {
}, },
ok() { ok() {
let selectedItem = this.dataList[this.selectedIndex] 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 this.loading = true
let params = {
gearId: gearId
}
// jinsha-pay
if (cardno && cardname) {
params.cardno = cardno
params.cardname = cardname
}
this.$axios({ this.$axios({
url: this.apiUrl, url: this.apiUrl,
method: 'get', method: 'get',
data: { data: params
gearId: selectedItem.id
}
}) })
.then((res) => { .then((res) => {
this.loading = false this.loading = false
@ -184,13 +262,31 @@ export default {
return; return;
} }
if (res.code == 200) { if (res.code == 200) {
this.orderNo = res.data?.orderNo; // jinsha-pay : {code: 0, msg: ""}
this.rechargeUrl = res.data?.payUrl; // : {orderNo, payUrl}
window.open(res.data?.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;
if (res.data?.payUrl) {
window.open(res.data.payUrl)
}
}
} }
}) })
.catch((_) => { .catch((err) => {
this.loading = false 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 { .mf-recharge-pc {
display: flex; display: flex;
flex-flow: wrap; flex-flow: wrap;

View File

@ -137,5 +137,10 @@ export default {
loadingText: 'Loading...', loadingText: 'Loading...',
hasMore: 'Pull up to load more', hasMore: 'Pull up to load more',
noMore: 'No more data', 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'
} }

View File

@ -141,5 +141,10 @@ export default {
loadingText: '載入中...', loadingText: '載入中...',
hasMore: '上拉載入更多', hasMore: '上拉載入更多',
noMore: '沒有更多了', noMore: '沒有更多了',
giftAmount: '到帳金額' giftAmount: '到帳金額',
cardNo: '銀行卡號',
cardName: '銀行卡姓名',
cardNoRequired: '請輸入銀行卡號',
cardNameRequired: '請輸入銀行卡姓名',
rechargeFailed: '充值失敗'
} }