408 lines
17 KiB
Plaintext
408 lines
17 KiB
Plaintext
<style>
|
||
.show-img:hover{
|
||
border: 1px solid red;
|
||
}
|
||
</style>
|
||
<div id="app" class="container" style="padding:20px;">
|
||
<div class="row" style="padding: 10px;">
|
||
<div class="col-md-5">
|
||
<img :src="product_info.src" class="img-rounded">
|
||
</div>
|
||
<div class="col-md-7">
|
||
<h2>ros千兆软路由一拖100矩阵抖音快手单机单多ip魔硬软改工作室试玩</h2>
|
||
<div style="background-color: #FFF2E8;padding:10px;">
|
||
<div class="row">
|
||
<div class="col-md-2">
|
||
<p>商品信息</p>
|
||
<p>价格</p>
|
||
<p>会员价</p>
|
||
</div>
|
||
<div class="col-md-7">
|
||
<p style="font-weight: bold;font-size:15px;">{{product_info.name}}</p>
|
||
<p style="text-decoration:line-through">￥{{product_info.lineprice}}</p>
|
||
<p style="font-weight: bold;font-size:20px;">￥{{product_info.price}}</p>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<p style="font-weight: bold;font-size:15px;">{{product_info.describe}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row" style="padding:10px;">
|
||
<div class="col-md-2">
|
||
<p>颜色分类</p>
|
||
</div>
|
||
<div class="col-md-10">
|
||
<img v-for="(item,index) in price_list" width="10%" v-on:click="select(index)" :src="item.src" :id="'show'+index" class="show-img">
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row" style="margin-bottom: 10px;">
|
||
<div class="col-md-2">
|
||
<p>数量</p>
|
||
</div>
|
||
<div class="col-md-10">
|
||
<div class="input-group">
|
||
<span class="input-group-btn" style="width: auto;">
|
||
<button class="btn btn-default" v-on:click="re_num" type="button">-</button>
|
||
</span>
|
||
<input type="text" style="width: 30%;" v-model="num" class="form-control" oninput="if(value < 1 ){value = 1}" placeholder="0">
|
||
<span class="input-group-btn" style="width: auto;float:left;">
|
||
<button class="btn btn-default" v-on:click="add_num" type="button">+</button>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-2">
|
||
<p>收货人</p>
|
||
</div>
|
||
<div class="col-md-9">
|
||
{{user_info.name}}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-2">
|
||
<p>电话号码</p>
|
||
</div>
|
||
<div class="col-md-9">
|
||
{{user_info.phone}}
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-2">
|
||
<p>收货地址</p>
|
||
</div>
|
||
<div class="col-md-9">
|
||
{{user_info.address}}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row" style="padding-bottom: 10px;">
|
||
<div class="col-md-2">
|
||
支付方式：
|
||
</div>
|
||
<div class="col-md-9 ">
|
||
<input id="zhifubaopay_s" v-model="pay_type" type="radio" name="OPayType" value="2" checked> <label for="zhifubaopay_s"><img src="~/img/zfb.png">支付宝支付</label>
|
||
<input id="weixinpay_s" v-model="pay_type" type="radio" name="OPayType" value="1" > <label for="weixinpay_s"><img src="~/img/wx.png">微信支付</label>
|
||
<input id="UseAccountAmount" v-model="pay_type" type="radio" name="OPayType" value="3"> <label for="UseAccountAmount">余额支付</label>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="button" class="btn btn-default" v-on:click="pay">立即购买</button>
|
||
<button type="button" class="btn btn-default" v-on:click="buyer_info" >修改收货信息</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row" style="border-top: 1px solid #ccc;padding:10px;text-align:center;">
|
||
<div class="col-md-4">
|
||
<p>品牌：Mikrotik</p>
|
||
<p>售后服务: 店铺三包</p>
|
||
<p>无线传输速率: 1000Mbps</p>
|
||
<p>是否无线: 是</p>
|
||
<p>中小企业办公 专业游戏路由</p>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<p>型号: AC2</p>
|
||
<p>USB接口数量: 1个</p>
|
||
<p>无线传输速度: 1167M</p>
|
||
<p>上市时间: 2012-08-22</p>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<p>成色: 全新</p>
|
||
<p>有线传输率: 千兆端口</p>
|
||
<p>无线网络支持频率: 2.4G&5G</p>
|
||
<p>版本类型: 中国大陆</p>
|
||
<p>保修期: 1年</p>
|
||
</div>
|
||
</div>
|
||
<div class="row" style="border-top: 1px solid #ccc;padding:10px;text-align:center;">
|
||
<img src="https://img.alicdn.com/imgextra/i4/2212500574675/O1CN01wafh2y1kPCJDN8MJc_!!2212500574675.jpg">
|
||
<img src="https://img.alicdn.com/imgextra/i3/2212500574675/O1CN01SZlrSv1kPCJLg6IdD_!!2212500574675.jpg">
|
||
<img src="https://img.alicdn.com/imgextra/i2/2212500574675/O1CN01AN2oHM1kPCJMaZYrN_!!2212500574675.jpg">
|
||
<img src="https://img.alicdn.com/imgextra/i4/2212500574675/O1CN01FU7zN01kPCJJrXXJO_!!2212500574675.jpg">
|
||
<img src="https://img.alicdn.com/imgextra/i4/2212500574675/O1CN01RYiT0X1kPCJFZqcIn_!!2212500574675.jpg">
|
||
<img src="https://img.alicdn.com/imgextra/i2/2212500574675/O1CN01K3pAdS1kPCJFZr5Pv_!!2212500574675.jpg">
|
||
<img src="https://img.alicdn.com/imgextra/i2/2212500574675/O1CN01fLjEYo1kPCJMaaMkj_!!2212500574675.jpg">
|
||
<img src="https://img.alicdn.com/imgextra/i1/2212500574675/O1CN01TN50Rn1kPCJCp9gBl_!!2212500574675.jpg">
|
||
|
||
<img src="https://img.alicdn.com/imgextra/i1/2212500574675/O1CN018Iy0Xg1kPCJJP5Zn5_!!2212500574675.jpg">
|
||
<img src="https://img.alicdn.com/imgextra/i2/2212500574675/O1CN01fQQIT81kPCJLg5xrB_!!2212500574675.png">
|
||
<img src="https://img.alicdn.com/imgextra/i3/2212500574675/O1CN01oAjpI01kPCJGyE0JZ_!!2212500574675.png">
|
||
<img src="https://img.alicdn.com/imgextra/i3/2212500574675/O1CN01unvVq91kPCJFZq52D_!!2212500574675.png">
|
||
<img src="https://img.alicdn.com/imgextra/i3/2212500574675/O1CN018e4Rp71kPCJ6eSuNX_!!2212500574675.png">
|
||
<img src="https://img.alicdn.com/imgextra/i2/2212500574675/O1CN01C9ksp71kPCJNLAteD_!!2212500574675.jpg">
|
||
<img src="https://img.alicdn.com/imgextra/i2/2212500574675/O1CN01C9ksp71kPCJNLAteD_!!2212500574675.jpg">
|
||
<img src="https://img.alicdn.com/imgextra/i3/2212500574675/O1CN01OZQ5Ep1kPCJG5ksBp_!!2212500574675.jpg">
|
||
</div>
|
||
|
||
|
||
|
||
<div class="modal fade" id="myModal" style="top: 20%;" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h4 class="modal-title" id="myModalLabel">修改收货信息</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form class="form-horizontal" role="form">
|
||
<div class="form-group">
|
||
<label for="firstname" class="col-sm-2 control-label">收货人</label>
|
||
<div class="col-sm-10">
|
||
<input type="text" class="form-control" v-model="user_info.name" placeholder="请输入收货人">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="lastname" class="col-sm-2 control-label">电话</label>
|
||
<div class="col-sm-10">
|
||
<input type="text" class="form-control" v-model="user_info.phone" placeholder="请输入电话">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="lastname" class="col-sm-2 control-label">地址</label>
|
||
<div class="col-sm-10">
|
||
<input type="text" class="form-control" v-model="user_info.address" placeholder="请输入地址">
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||
<button type="button" v-on:click="update_userinfo" class="btn btn-primary">提交更改</button>
|
||
</div>
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal -->
|
||
</div>
|
||
|
||
<!-- 支付弹窗开始 -->
|
||
|
||
<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://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
|
||
<script type="text/javascript">
|
||
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data: {
|
||
price_list:[],
|
||
product_info:{
|
||
id:0,
|
||
name:'',
|
||
describe:'',
|
||
src:'',
|
||
price:0,
|
||
lineprice:0,
|
||
},
|
||
num: 1,
|
||
user_info:{
|
||
name:'',
|
||
phone:'',
|
||
address:'',
|
||
},
|
||
pay_type:'2'
|
||
},
|
||
created: function () {
|
||
this.select(0);
|
||
let data = {
|
||
cookie:document.cookie
|
||
}
|
||
|
||
var flag = {};
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: 'https://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) {
|
||
|
||
var temp = [];
|
||
|
||
$(".show-img").css("border","1px solid white");
|
||
$("#show"+i).css("border","1px solid red");
|
||
|
||
if (this.price_list.length<1){
|
||
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: 'https://php-api.juip.com/ros/index/getList',
|
||
dataType: "json",
|
||
async:false,
|
||
success: function (res) {
|
||
temp = res;
|
||
}
|
||
});
|
||
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;
|
||
this.product_info.lineprice = this.price_list[i].lineprice;
|
||
},
|
||
add_num() {
|
||
this.num++;
|
||
},
|
||
re_num() {
|
||
this.num--;
|
||
if (this.num<=0) {
|
||
this.num = 1;
|
||
}
|
||
},
|
||
buyer_info() {
|
||
|
||
let data = {
|
||
cookie:document.cookie
|
||
}
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: 'https://php-api.juip.com/ros/Buyer/getBuyerInfo',
|
||
dataType: "json",
|
||
contentType: "application/json",
|
||
data: JSON.stringify(data),
|
||
beforeSend: function(xhr) {
|
||
xhr.withCredentials = true;
|
||
},
|
||
crossDomain: true,
|
||
success: function (res) {
|
||
$('#myModal').modal('show');
|
||
}
|
||
});
|
||
},
|
||
update_userinfo() {
|
||
|
||
let data = {
|
||
cookie:document.cookie,
|
||
user_info: this.user_info
|
||
}
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: 'https://php-api.juip.com/ros/Buyer/updateBuyerInfo',
|
||
dataType: "json",
|
||
contentType: "application/json",
|
||
data: JSON.stringify(data),
|
||
beforeSend: function(xhr) {
|
||
xhr.withCredentials = true;
|
||
},
|
||
crossDomain: true,
|
||
success: function (res) {
|
||
if (res.code == 1) {
|
||
alert('修改成功！');
|
||
$('#myModal').modal('hide');
|
||
} else {
|
||
alert('修改失败！');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
pay() {
|
||
|
||
let url = 'https://php-api.juip.com/ros/order/wxpay';
|
||
|
||
switch(this.pay_type) {
|
||
case '1':
|
||
url = 'https://php-api.juip.com/ros/order/wxpay';
|
||
break;
|
||
case '2':
|
||
url = 'https://php-api.juip.com/ros/order/alipay';
|
||
break;
|
||
case '3':
|
||
url = 'https://php-api.juip.com/ros/order/balancepay';
|
||
break;
|
||
}
|
||
|
||
|
||
let data = {
|
||
cookie:document.cookie,
|
||
data: {
|
||
product_id:this.product_info.id,
|
||
username:this.user_info.name,
|
||
phone:this.user_info.phone,
|
||
address:this.user_info.address,
|
||
}
|
||
}
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: url,
|
||
dataType: "json",
|
||
contentType: "application/json",
|
||
data: JSON.stringify(data),
|
||
beforeSend: function(xhr) {
|
||
xhr.withCredentials = true;
|
||
},
|
||
crossDomain: true,
|
||
success: function (res) {
|
||
if (res.code == 1) {
|
||
|
||
$("#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) {
|
||
alert("购买成功");
|
||
@* window.location.href = '/user/rosorder'; *@
|
||
} else {
|
||
alert('付款失败！请联系客服！');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
verifyed() {
|
||
$('#staticBackdrop').modal('hide');
|
||
@* window.location.href = '/user/rosorder'; *@
|
||
}
|
||
}
|
||
})
|
||
</script> |