软路由

This commit is contained in:
“wanyongkang”
2022-03-23 17:09:36 +08:00
parent 986c10a6d6
commit 073b9ea518
7 changed files with 254 additions and 129 deletions

View File

@@ -34,7 +34,7 @@
<p>颜色分类</p>
</div>
<div class="col-md-10">
<img v-for="(item,index) in list" width="10%" v-on:click="select(index)" :src="item.src" class="show-img">
<img v-for="(item,index) in price_list" width="10%" v-on:click="select(index)" :src="item.src" class="show-img">
</div>
</div>
@@ -181,107 +181,35 @@
<!-- 支付弹窗开始 -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">微信扫码支付</h5>
</div>
<div class="modal-body" id="qrcode_s" style="margin: 0 auto;">
</div>
<div class="modal-footer">
<button type="button" v-on:click="verifyed" class="btn btn-primary">我已付款</button>
</div>
</div>
</div>
</div>
</div>
<div id="alipay"></div>
<script src="~/js/vue.js"></script>
<script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
list: [
{
name:'2.4G版本',
describe:'发射2个2.4G信号',
src:'https://gd4.alicdn.com/imgextra/i4/2212500574675/O1CN017OCrcu1kPCJIPP8C6_!!2212500574675.jpg_400x400.jpg'
},{
name:'百兆5G双频版',
describe:'发射10个WIFI',
src:'https://gd4.alicdn.com/imgextra/i3/2212500574675/O1CN01HDA8FQ1kPCJNLES0m_!!2212500574675.jpg_400x400.jpg'
},{
name:'百兆5G双频版',
describe:'发射20个WIFI',
src:'https://gd3.alicdn.com/imgextra/i2/2212500574675/O1CN01XcUrSJ1kPCJCp94iI_!!2212500574675.jpg_400x400.jpg'
},{
name:'百兆5G双频版',
describe:'发射30个WIFI',
src:'https://gd4.alicdn.com/imgextra/i4/2212500574675/O1CN018UFiF61kPCJLg936k_!!2212500574675.jpg_400x400.jpg'
},{
name:'百兆5G双频版',
describe:'发射40个WIFI',
src:'https://gd4.alicdn.com/imgextra/i2/2212500574675/O1CN015GmSuk1kPCJNLBMl9_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G双频版',
describe:'发射10个WIFI',
src:'https://gd4.alicdn.com/imgextra/i1/2212500574675/O1CN01kuymIU1kPCJBKQ5K1_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G双频版',
describe:'发射20个WIFI',
src:'https://gd2.alicdn.com/imgextra/i3/2212500574675/O1CN01kaoNxg1kPCJBKQcan_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G双频版',
describe:'发射30个WIFI',
src:'https://gd1.alicdn.com/imgextra/i2/2212500574675/O1CN010VprRs1kPCJG5ks8l_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G双频PRO版',
describe:'发射20个WIFI',
src:'https://gd1.alicdn.com/imgextra/i3/2212500574675/O1CN01m7Ula01kPCJcYFbGC_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G双频PRO版',
describe:'发射30个WIFI',
src:'https://gd4.alicdn.com/imgextra/i3/2212500574675/O1CN01pM3llf1kPCJZmfXWK_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G双频PRO版',
describe:'发射40个WIFI',
src:'https://gd4.alicdn.com/imgextra/i4/2212500574675/O1CN01blV7JL1kPCJcWJgyY_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G双频PRO版',
describe:'发射50个WIFI',
src:'https://gd2.alicdn.com/imgextra/i1/2212500574675/O1CN019vxI6U1kPCJaMSKtt_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G尊享版',
describe:'发射20个WIFI',
src:'https://gd3.alicdn.com/imgextra/i3/2212500574675/O1CN01N6wq7X1kPCJBKRYnT_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G尊享版',
describe:'发射30个WIFI',
src:'https://gd4.alicdn.com/imgextra/i2/2212500574675/O1CN01muNaGW1kPCJJP3Z1a_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G尊享版',
describe:'发射40个WIFI',
src:'https://gd2.alicdn.com/imgextra/i3/2212500574675/O1CN01h38DsV1kPCJMaXLcy_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G尊享版',
describe:'发射50个WIFI',
src:'https://gd1.alicdn.com/imgextra/i1/2212500574675/O1CN01MGzcpA1kPCJJrW7yG_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G旗舰版',
describe:'发射20个WIFI',
src:'https://gd2.alicdn.com/imgextra/i3/2212500574675/O1CN01EQ9eR71kPCJCpBl16_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G旗舰版',
describe:'发射30个WIFI',
src:'https://gd2.alicdn.com/imgextra/i2/2212500574675/O1CN01klBoyU1kPCJLg5IEJ_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G旗舰版',
describe:'发射40个WIFI',
src:'https://gd3.alicdn.com/imgextra/i1/2212500574675/O1CN01aLq1eo1kPCJLg7N87_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G旗舰版',
describe:'发射50个WIFI',
src:'https://gd4.alicdn.com/imgextra/i4/2212500574675/O1CN01zvFxAQ1kPCJMaY1ED_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G旗舰版',
describe:'发射80个WIFI',
src:'https://gd2.alicdn.com/imgextra/i4/2212500574675/O1CN01jK07Fa1kPCJFVjR03_!!2212500574675.jpg_400x400.jpg'
},{
name:'千兆5G旗舰版',
describe:'发射100个WIFI',
src:'https://gd1.alicdn.com/imgextra/i3/2212500574675/O1CN01DdOPmM1kPCJHFrtcS_!!2212500574675.jpg_400x400.jpg'
}
],
price_list:[],
product_info:{
id:0,
@@ -301,38 +229,34 @@
},
created: function () {
this.select(0);
let data = {
cookie:document.cookie
}
var flag = {};
$.ajax({
type: 'POST',
url: 'http://php-api.juip.com/ros/Buyer/getBuyerInfo',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
async:false,
success: function (res) {
if (res) {
flag.name = res.name;
flag.phone = res.phone;
flag.address = res.address;
}
}
});
this.user_info = flag;
},
methods: {
select(i) {
let data = {
cookie:document.cookie
}
if (data.cookie.indexOf("token") != -1) {
var flag = {};
$.ajax({
type: 'POST',
url: 'http://juip.wyk/ros/Buyer/getBuyerInfo',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
beforeSend: function(xhr) {
xhr.withCredentials = true;
},
crossDomain: true,
async:false,
success: function (res) {
if (res) {
flag.name = res.name;
flag.phone = res.phone;
flag.address = res.address;
}
}
});
this.user_info = flag;
}
this.product_info.src = this.list[i].src;
this.product_info.describe = this.list[i].describe;
var temp = [];
@@ -340,7 +264,7 @@
$.ajax({
type: 'GET',
url: 'http://juip.wyk/ros/index/getList',
url: 'http://php-api.juip.com/ros/index/getList',
dataType: "json",
async:false,
success: function (res) {
@@ -350,6 +274,8 @@
this.price_list = temp;
}
this.product_info.src = this.price_list[i].src;
this.product_info.describe = this.price_list[i].describe1;
this.product_info.id = this.price_list[i].id;
this.product_info.name = this.price_list[i].name;
this.product_info.price = this.price_list[i].price;
@@ -371,7 +297,7 @@
}
$.ajax({
type: 'POST',
url: 'http://juip.wyk/ros/Buyer/getBuyerInfo',
url: 'http://php-api.juip.com/ros/Buyer/getBuyerInfo',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
@@ -392,7 +318,7 @@
}
$.ajax({
type: 'POST',
url: 'http://juip.wyk/ros/Buyer/updateBuyerInfo',
url: 'http://php-api.juip.com/ros/Buyer/updateBuyerInfo',
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
@@ -412,17 +338,17 @@
},
pay() {
let url = 'http://juip.wyk/ros/order/wxpay';
let url = 'http://php-api.juip.com/ros/order/wxpay';
switch(this.pay_type) {
case '1':
url = 'http://juip.wyk/ros/order/wxpay';
url = 'http://php-api.juip.com/ros/order/wxpay';
break;
case '2':
url = 'http://juip.wyk/ros/order/alipay';
url = 'http://php-api.juip.com/ros/order/alipay';
break;
case '3':
url = 'http://juip.wyk/ros/order/balancepay';
url = 'http://php-api.juip.com/ros/order/balancepay';
break;
}
@@ -448,13 +374,30 @@
crossDomain: true,
success: function (res) {
if (res.code == 1) {
alert('修改成功!');
$("#qrcode_s").html('');
new QRCode(document.getElementById("qrcode_s"), {
text: res.data,
width : 300,
height : 300
});
$('#staticBackdrop').modal('show');
} else if (res.code == 2) {
document.getElementById("alipay").innerHTML=res.data;
document.forms['alipaysubmit'].submit();
@* window.location.href = '/user/rosorder'; *@
} else if (res.code == 3) {
@* window.location.href = '/user/rosorder'; *@
} else {
alert('付款失败!请联系客服!');
}
}
});
},
verifyed() {
$('#staticBackdrop').modal('hide');
@* window.location.href = '/user/rosorder'; *@
}
}
})