juipnet/Host/Views/Product/Routeros.cshtml

<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">&times;</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>