|
|
@@ -10,13 +10,13 @@
|
|
|
<div class="payBox-content">
|
|
|
<div class="payBox-content-list">
|
|
|
<div class="item" :class="{ 'actived': selected == index ? true : false }"
|
|
|
- v-for="(item, index) in payList" :key="index" @click="changePay(item.price, index)">
|
|
|
+ v-for="(item, index) in payList" :key="index" @click="changePay(item.integralMoney, index)">
|
|
|
<div class="itemUp">
|
|
|
- <div style="font-size: 24px;">{{ item.name }}</div>
|
|
|
+ <div style="font-size: 24px;">{{ item.integral }}</div>
|
|
|
<div style="font-size: 12px;font-weight: 400;margin-left: 2px;">积分</div>
|
|
|
</div>
|
|
|
<div class="itemDown">
|
|
|
- 需支付 {{ item.price }}元
|
|
|
+ 需支付 {{ item.integralMoney }}元
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-popover placement="top" width="300" v-model="visible">
|
|
|
@@ -58,7 +58,7 @@
|
|
|
<div class="item-right">
|
|
|
<div class="up">
|
|
|
<div>应付金额</div>
|
|
|
- <div style="color: #fe2c55;margin-left: 8px;">¥ {{ price }}</div>
|
|
|
+ <div style="color: #fe2c55;margin-left: 8px;">¥ {{ integralMoney }}</div>
|
|
|
</div>
|
|
|
<div class="center">
|
|
|
<img style="height: 18px;" src="../assets/icon/weixinPay.png" alt="weixinpay">
|
|
|
@@ -86,44 +86,46 @@ export default {
|
|
|
timer: null,
|
|
|
fullscreenLoading: false,
|
|
|
money: '',
|
|
|
- price: 1,
|
|
|
+ integralMoney: 1,
|
|
|
visible: false,
|
|
|
selected: 0,
|
|
|
+ orderNo: undefined,
|
|
|
+ rate:undefined,
|
|
|
payList: [
|
|
|
{
|
|
|
id: 1,
|
|
|
- name: "10",
|
|
|
- price: 1,
|
|
|
+ integral: "10",
|
|
|
+ integralMoney: 1,
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
- name: "50",
|
|
|
- price: 5,
|
|
|
+ integral: "50",
|
|
|
+ integralMoney: 5,
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
- name: "100",
|
|
|
- price: 10,
|
|
|
+ integral: "100",
|
|
|
+ integralMoney: 10,
|
|
|
},
|
|
|
{
|
|
|
id: 1,
|
|
|
- name: "10",
|
|
|
- price: 1,
|
|
|
+ integral: "10",
|
|
|
+ integralMoney: 1,
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
- name: "50",
|
|
|
- price: 5,
|
|
|
+ integral: "50",
|
|
|
+ integralMoney: 5,
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
- name: "100",
|
|
|
- price: 10,
|
|
|
+ integral: "100",
|
|
|
+ integralMoney: 10,
|
|
|
},
|
|
|
{
|
|
|
id: 1,
|
|
|
- name: "10",
|
|
|
- price: 1,
|
|
|
+ integral: "10",
|
|
|
+ integralMoney: 1,
|
|
|
},
|
|
|
],
|
|
|
url:'www.baidu.com'
|
|
|
@@ -132,7 +134,8 @@ export default {
|
|
|
created() {
|
|
|
this.getPayList();
|
|
|
this.$nextTick (function () {
|
|
|
- this.qrcode(this.url);
|
|
|
+ this.handlePayWxQRcode()
|
|
|
+ // this.qrcode(this.url);
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -150,23 +153,23 @@ export default {
|
|
|
colorLight: '#fff'
|
|
|
});
|
|
|
},
|
|
|
- handlePayWxQRcode(row) { // 获取微信支付二维码
|
|
|
+ handlePayWxQRcode() { // 获取微信支付二维码
|
|
|
getWxPayCode({ // 这里根据不同的后端接口去修改
|
|
|
- totalFee: row.totalAmount * 100,
|
|
|
- outTradeNo: row.orderSn,
|
|
|
+ integral: this.integralMoney*this.rate,
|
|
|
+ totalFee: this.integralMoney,
|
|
|
}).then(res => {
|
|
|
- this.qrcode(res.data.url); // 例如:res.data.url 的值为 "weixin://wxpay/bizpayurl?pr=......",根据这个值生成相对应的微信支付二维码
|
|
|
+ this.fullscreenLoading = false;
|
|
|
+ this.qrcode(res.data.payUrl); // 例如:res.data.url 的值为 "weixin://wxpay/bizpayurl?pr=......",根据这个值生成相对应的微信支付二维码
|
|
|
this.timer = setInterval(() => { // 通过定时器每间隔一会去请求查询微信支付状态(具体参数根据项目需要而定)
|
|
|
- this.handleQueryWxPayStatus(row, res.data.outTradeNo);
|
|
|
+ this.handleQueryWxPayStatus(res.data.orderNo);
|
|
|
}, 1000);
|
|
|
})
|
|
|
},
|
|
|
- handleQueryWxPayStatus(row, sn) { // 查询微信支付状态
|
|
|
+ handleQueryWxPayStatus(orderNo) { // 查询微信支付状态
|
|
|
queryWxPayStatus({ // 这里根据不同的后端接口去修改
|
|
|
- totalFee: row.totalAmount * 100,
|
|
|
- outTradeNo: sn,
|
|
|
+ orderNo: orderNo,
|
|
|
}).then(res => {
|
|
|
- if (res.data.paySuccess) { // 当查询到支付成功时
|
|
|
+ if (res.data.tradeState == "SUCCESS") { // 当查询到支付成功时
|
|
|
this.$message({
|
|
|
type: 'success',
|
|
|
message: '支付成功!'
|
|
|
@@ -180,26 +183,31 @@ export default {
|
|
|
this.money = '';
|
|
|
},
|
|
|
confirm() {
|
|
|
+ clearInterval(this.timer);
|
|
|
this.visible = false;
|
|
|
- this.price = this.money;
|
|
|
+ this.integralMoney = this.money;
|
|
|
this.fullscreenLoading = true;
|
|
|
- setTimeout(() => {
|
|
|
- this.fullscreenLoading = false;
|
|
|
- }, 2000);
|
|
|
+ this.handlePayWxQRcode()
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.fullscreenLoading = false;
|
|
|
+ // }, 2000);
|
|
|
},
|
|
|
- changePay(price, index) {
|
|
|
+ changePay(integralMoney, index) {
|
|
|
+ clearInterval(this.timer);
|
|
|
this.money = '';
|
|
|
this.selected = index;
|
|
|
- this.price = price;
|
|
|
+ this.integralMoney = integralMoney;
|
|
|
this.fullscreenLoading = true;
|
|
|
- setTimeout(() => {
|
|
|
- this.fullscreenLoading = false;
|
|
|
- }, 2000);
|
|
|
+ this.handlePayWxQRcode()
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.fullscreenLoading = false;
|
|
|
+ // }, 2000);
|
|
|
},
|
|
|
getPayList() {
|
|
|
- // payList().then(response => {
|
|
|
- // this.payList = response.data;
|
|
|
- // })
|
|
|
+ payList().then(response => {
|
|
|
+ this.rate = response.data.rate;
|
|
|
+ this.payList = response.data.items;
|
|
|
+ })
|
|
|
},
|
|
|
},
|
|
|
beforeDestroy() {
|