|
@@ -53,8 +53,8 @@
|
|
|
<div class="payBox-way">
|
|
<div class="payBox-way">
|
|
|
<div class="way-item">
|
|
<div class="way-item">
|
|
|
<div class="item-left">
|
|
<div class="item-left">
|
|
|
- <div :class="{ 'gray': integralMoney ? false : true }" id="expCode" ref="expCodeRef"></div>
|
|
|
|
|
- <div v-if="!integralMoney" style="position: absolute;top: 70px;left: 30px;color: #fff;">请先选择套餐</div>
|
|
|
|
|
|
|
+ <div :class="{ 'gray': checked ? false : true }" id="expCode" ref="expCodeRef"></div>
|
|
|
|
|
+ <div v-if="!checked" class="grayText">请先阅读并同意相关协议再扫码支付</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="item-right">
|
|
<div class="item-right">
|
|
|
<div class="up">
|
|
<div class="up">
|
|
@@ -66,8 +66,11 @@
|
|
|
<div class="textStyle">微信扫码支付</div>
|
|
<div class="textStyle">微信扫码支付</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="down">
|
|
<div class="down">
|
|
|
- <div>扫码支付代表已阅读并同意</div>
|
|
|
|
|
- <div style="color: #04498d;cursor: pointer;">《充值协议》</div>
|
|
|
|
|
|
|
+ <el-checkbox v-model="checked" style="margin-right: 5px;font-size: 16px;"></el-checkbox>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ 请阅读并同意
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <span style="color: #04498d;cursor: pointer;" @click="getHtmldata()">《充值协议》</span>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -76,21 +79,34 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <el-dialog
|
|
|
|
|
+ title="用户充值协议"
|
|
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
|
|
+ width="50%">
|
|
|
|
|
+ <div v-html="htmlData"></div>
|
|
|
|
|
+ <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center">
|
|
|
|
|
+ <el-button style="width:50%;font-size: 24px;" type="danger" @click="dialogVisible = false">我已知晓</el-button>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<script>
|
|
<script>
|
|
|
import QRCode from 'qrcodejs2';
|
|
import QRCode from 'qrcodejs2';
|
|
|
|
|
+import { dictList } from "@/api/allApi";
|
|
|
import { payList, getWxPayCode,queryWxPayStatus } from "@/api/pay";
|
|
import { payList, getWxPayCode,queryWxPayStatus } from "@/api/pay";
|
|
|
export default {
|
|
export default {
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
|
|
+ checked:false,
|
|
|
|
|
+ htmlData:'',
|
|
|
|
|
+ dialogVisible: false,
|
|
|
timerPayWxQRcode: null,
|
|
timerPayWxQRcode: null,
|
|
|
timer: null,
|
|
timer: null,
|
|
|
fullscreenLoading: false,
|
|
fullscreenLoading: false,
|
|
|
money: undefined,
|
|
money: undefined,
|
|
|
integralMoney: undefined,
|
|
integralMoney: undefined,
|
|
|
visible: false,
|
|
visible: false,
|
|
|
- selected: -2,
|
|
|
|
|
|
|
+ selected: 0,
|
|
|
orderNo: undefined,
|
|
orderNo: undefined,
|
|
|
rate:undefined,
|
|
rate:undefined,
|
|
|
payList: [],
|
|
payList: [],
|
|
@@ -99,11 +115,18 @@ export default {
|
|
|
},
|
|
},
|
|
|
created() {
|
|
created() {
|
|
|
this.getPayList();
|
|
this.getPayList();
|
|
|
- this.$nextTick (function () {
|
|
|
|
|
- this.qrcode(this.payUrl);
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ // this.$nextTick (function () {
|
|
|
|
|
+ // this.handlePayWxQRcode()
|
|
|
|
|
+ // this.qrcode(this.payUrl);
|
|
|
|
|
+ // })
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ getHtmldata(){
|
|
|
|
|
+ dictList({dictType:'recharge_agreement'}).then(response => {
|
|
|
|
|
+ this.htmlData = response.data.data[0].remark;
|
|
|
|
|
+ this.dialogVisible = true;
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
// 清空二维码,避免生成多个二维码
|
|
// 清空二维码,避免生成多个二维码
|
|
|
delQrcode() {
|
|
delQrcode() {
|
|
|
this.$refs.expCodeRef.innerHTML = ""
|
|
this.$refs.expCodeRef.innerHTML = ""
|
|
@@ -130,8 +153,11 @@ export default {
|
|
|
this.handleQueryWxPayStatus(data.orderNo);
|
|
this.handleQueryWxPayStatus(data.orderNo);
|
|
|
}, 1000);
|
|
}, 1000);
|
|
|
this.timerPayWxQRcode = setInterval(() => { // 刷新微信支付二维码
|
|
this.timerPayWxQRcode = setInterval(() => { // 刷新微信支付二维码
|
|
|
|
|
+ console.log('刷新微信支付二维码');
|
|
|
|
|
+ clearInterval(this.timer); // 清除定时器;
|
|
|
|
|
+ clearInterval(this.timerPayWxQRcode);
|
|
|
this.handlePayWxQRcode();
|
|
this.handlePayWxQRcode();
|
|
|
- }, 180000);
|
|
|
|
|
|
|
+ }, 60000);
|
|
|
}).catch(err => {
|
|
}).catch(err => {
|
|
|
this.fullscreenLoading = false;
|
|
this.fullscreenLoading = false;
|
|
|
console.log(err)
|
|
console.log(err)
|
|
@@ -142,7 +168,7 @@ export default {
|
|
|
orderNo: orderNo,
|
|
orderNo: orderNo,
|
|
|
}).then(res => {
|
|
}).then(res => {
|
|
|
let data = res.data.data;
|
|
let data = res.data.data;
|
|
|
- if (data != "订单未支付") { // 当查询到支付成功时
|
|
|
|
|
|
|
+ if (data == '支付成功') { // 当查询到支付成功时
|
|
|
this.$store.dispatch('GetUserInfo');
|
|
this.$store.dispatch('GetUserInfo');
|
|
|
this.$message({
|
|
this.$message({
|
|
|
type: 'success',
|
|
type: 'success',
|
|
@@ -180,6 +206,8 @@ export default {
|
|
|
payList().then(response => {
|
|
payList().then(response => {
|
|
|
this.rate = response.data.data.rate;
|
|
this.rate = response.data.data.rate;
|
|
|
this.payList = response.data.data.items;
|
|
this.payList = response.data.data.items;
|
|
|
|
|
+ this.integralMoney = response.data.data.items[0].integralMoney;
|
|
|
|
|
+ this.handlePayWxQRcode();
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
@@ -191,6 +219,28 @@ export default {
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
|
|
+::v-deep .el-dialog {
|
|
|
|
|
+ left: 50%;
|
|
|
|
|
+ top: 5%;
|
|
|
|
|
+ transform: translate(-50%, -5%);
|
|
|
|
|
+ margin: 0px !important;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+}
|
|
|
|
|
+::v-deep .el-dialog__title,::v-deep .el-dialog__headerbtn{
|
|
|
|
|
+ font-size: 24px;
|
|
|
|
|
+}
|
|
|
|
|
+::v-deep .el-dialog__header {
|
|
|
|
|
+ -webkit-box-shadow: 0 1px 4px 0 rgba(31, 45, 61, .12);
|
|
|
|
|
+ box-shadow: 0 1px 4px 0 rgba(31, 45, 61, .12);
|
|
|
|
|
+}
|
|
|
|
|
+::v-deep .el-dialog__body{
|
|
|
|
|
+ overflow: auto;
|
|
|
|
|
+ overflow-x: hidden;
|
|
|
|
|
+ max-height: 70vh!important;
|
|
|
|
|
+}
|
|
|
|
|
+::v-deep .el-dialog__footer {
|
|
|
|
|
+ border-top: 1px solid #d7d9dc;
|
|
|
|
|
+}
|
|
|
.gray {
|
|
.gray {
|
|
|
filter: blur(4px);
|
|
filter: blur(4px);
|
|
|
}
|
|
}
|
|
@@ -301,7 +351,15 @@ export default {
|
|
|
border-radius: 6px;
|
|
border-radius: 6px;
|
|
|
padding: 7px;
|
|
padding: 7px;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+.item-left .grayText{
|
|
|
|
|
+ width: 100px;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 50%;
|
|
|
|
|
+ top:50%;
|
|
|
|
|
+ transform:translate(-50%,-50%);
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+}
|
|
|
.item-right {
|
|
.item-right {
|
|
|
margin-left: 12px;
|
|
margin-left: 12px;
|
|
|
}
|
|
}
|