|
|
|
|
@ -0,0 +1,288 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-recharge">
|
|
|
|
|
<el-card class="recharge-card-a">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<div style="text-align: center;">
|
|
|
|
|
<span style="font-size: 36px;font-weight:bolder;">{{ fund }}</span
|
|
|
|
|
><span style="padding: 0px 10px;font-weight: bolder;">元</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="text-align: center;">
|
|
|
|
|
<span style="font-size:small;font-weight:bolder;">余额</span>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24" style="text-align: center; padding: 25px;">
|
|
|
|
|
<el-button type="primary" plain @click="fnGoUrl('/payment')"
|
|
|
|
|
>充值记录</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button type="primary" plain @click="fnGoUrl('/paymentlog')"
|
|
|
|
|
>微信平台记录</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
plain
|
|
|
|
|
@click="fnGoUrl('/enterpriseaccountbill')"
|
|
|
|
|
>交易流水</el-button
|
|
|
|
|
>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-card>
|
|
|
|
|
<el-card class="recharge-card-b">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="4"><div class="label">充值方式：</div></el-col>
|
|
|
|
|
<el-col :span="20">
|
|
|
|
|
<div style="padding-bottom:40px;">
|
|
|
|
|
<el-image
|
|
|
|
|
style="width: 140px; height: 48px;float:left;"
|
|
|
|
|
:src="require('@/assets/images/wxpayment.png')"
|
|
|
|
|
fit="fill"
|
|
|
|
|
></el-image>
|
|
|
|
|
<div
|
|
|
|
|
style="height: 48px;float:left;line-height: 48px;margin-left:10px;"
|
|
|
|
|
>
|
|
|
|
|
<span>手续费:</span
|
|
|
|
|
><span style="color: red;font-size:larger;">0.6%</span>
|
|
|
|
|
<span style="color: red;padding-left:10px;"
|
|
|
|
|
>支付成功后资金进入宁夏商户账户</span
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row style="margin-top: 20px;">
|
|
|
|
|
<el-col :span="4" class="label">充值金额：</el-col>
|
|
|
|
|
<el-col :span="20">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<div v-if="amount == 1" class="recharge-btn recharge-slted">
|
|
|
|
|
1 元
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="recharge-btn" @click="fnAmountSlted(1)">
|
|
|
|
|
1 元
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="amount == 10" class="recharge-btn recharge-slted">
|
|
|
|
|
10 元
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="recharge-btn" @click="fnAmountSlted(10)">
|
|
|
|
|
10 元
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="amount == 20" class="recharge-btn recharge-slted">
|
|
|
|
|
20 元
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="recharge-btn" @click="fnAmountSlted(20)">
|
|
|
|
|
20 元
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="amount == 50" class="recharge-btn recharge-slted">
|
|
|
|
|
50 元
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="recharge-btn" @click="fnAmountSlted(50)">
|
|
|
|
|
50 元
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<div v-if="amount == 100" class="recharge-btn recharge-slted">
|
|
|
|
|
100 元
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="recharge-btn" @click="fnAmountSlted(100)">
|
|
|
|
|
100 元
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="amount == 200" class="recharge-btn recharge-slted">
|
|
|
|
|
200 元
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="recharge-btn" @click="fnAmountSlted(200)">
|
|
|
|
|
200 元
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<div v-if="amount == 500" class="recharge-btn recharge-slted">
|
|
|
|
|
500 元
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="recharge-btn" @click="fnAmountSlted(500)">
|
|
|
|
|
500 元
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="amount == 1000" class="recharge-btn recharge-slted">
|
|
|
|
|
1000 元
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="recharge-btn" @click="fnAmountSlted(1000)">
|
|
|
|
|
1000 元
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row style="margin-top: 20px;">
|
|
|
|
|
<el-col :span="4" class="label">自定义充值金额：</el-col>
|
|
|
|
|
<el-col :span="20">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<div style="line-height: 48px;">
|
|
|
|
|
<el-input-number
|
|
|
|
|
v-model="amount"
|
|
|
|
|
:precision="2"
|
|
|
|
|
:step="0.01"
|
|
|
|
|
:min="0.01"
|
|
|
|
|
:max="1000000"
|
|
|
|
|
placeholder="自定义金额"
|
|
|
|
|
></el-input-number>
|
|
|
|
|
元
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<div class="qrcode-box"><div id="qrcode" ref="qrCode"></div></div>
|
|
|
|
|
<div class="qrcode-des">
|
|
|
|
|
微信扫码充值<span
|
|
|
|
|
style="color: red;font-size:larger;padding: 0px 10px;"
|
|
|
|
|
>{{ amount }}</span
|
|
|
|
|
>元
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import request from "@/utils/request";
|
|
|
|
|
import { rechargeCreateOrder } from "@/api/recharge";
|
|
|
|
|
import QRCode from "qrcodejs2";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "recharge",
|
|
|
|
|
components: {},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
codeUrl: undefined,
|
|
|
|
|
orderNo: undefined,
|
|
|
|
|
enterpriseId: undefined,
|
|
|
|
|
fund: undefined,
|
|
|
|
|
amount: undefined,
|
|
|
|
|
intervalId: undefined
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
amount: {
|
|
|
|
|
handler: function(val) {
|
|
|
|
|
if(val){
|
|
|
|
|
this.fnRechargeCreateOrder(this.enterpriseId, val);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
orderNo: {
|
|
|
|
|
handler: function(val) {
|
|
|
|
|
// if(val){
|
|
|
|
|
// this.intervalId = setInterval(()=>[
|
|
|
|
|
// console.log(val)
|
|
|
|
|
// ], 1000)
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.enterpriseId = this.$route.params.enterpriseId;
|
|
|
|
|
if (this.enterpriseId) {
|
|
|
|
|
this.initDeliveryOrderData();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {},
|
|
|
|
|
methods: {
|
|
|
|
|
initDeliveryOrderData() {
|
|
|
|
|
request({
|
|
|
|
|
url:
|
|
|
|
|
`/api/scm/RecycleDeliveryOrder/deliveryOrderCount/` +
|
|
|
|
|
this.enterpriseId,
|
|
|
|
|
method: "get"
|
|
|
|
|
}).then(res => {
|
|
|
|
|
this.fund = res.data.fund;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
fnAmountSlted(amount) {
|
|
|
|
|
this.amount = amount;
|
|
|
|
|
},
|
|
|
|
|
fnRechargeCreateOrder(enterpriseId, amount) {
|
|
|
|
|
rechargeCreateOrder(enterpriseId, amount)
|
|
|
|
|
.then(res => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
this.codeUrl = res.data.codeUrl;
|
|
|
|
|
this.orderNo = res.data.orderNo;
|
|
|
|
|
this.getQRimg();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
console.log(err);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getQRimg() {
|
|
|
|
|
if (!this.codeUrl) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this.$refs.qrCode.innerHTML = "";
|
|
|
|
|
let qrcode = new QRCode(this.$refs.qrCode, {
|
|
|
|
|
width: 180,
|
|
|
|
|
height: 180, // 高度
|
|
|
|
|
text: this.codeUrl, // 二维码内容
|
|
|
|
|
// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
|
|
|
|
|
// background: '#f0f'
|
|
|
|
|
// foreground: '#ff0'
|
|
|
|
|
correctLevel: QRCode.CorrectLevel.H //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
fnGoUrl(url) {
|
|
|
|
|
if (url) {
|
|
|
|
|
this.$router.push({ path: url });
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.app-recharge {
|
|
|
|
|
.recharge-card-b {
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
.label {
|
|
|
|
|
text-align: right;
|
|
|
|
|
line-height: 48px;
|
|
|
|
|
padding-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
.recharge-btn {
|
|
|
|
|
float: left;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
border: solid 1px #e0e0e0;
|
|
|
|
|
width: 140px;
|
|
|
|
|
height: 48px;
|
|
|
|
|
line-height: 48px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
margin-bottom: 15px;
|
|
|
|
|
}
|
|
|
|
|
.recharge-slted {
|
|
|
|
|
border: solid 1px #3775f6;
|
|
|
|
|
}
|
|
|
|
|
.qrcode-box {
|
|
|
|
|
background-color: #f9f9f9;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
width: 200px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
#qrcode {
|
|
|
|
|
width: 180px;
|
|
|
|
|
height: 180px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.qrcode-des {
|
|
|
|
|
width: 200px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
mhsnet
3 months ago
