wxd / MEIDD_MSCP_PHP

<include file="public/layout"/>
<link href="__PUBLIC__/static/css/index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="__PUBLIC__/static/js/qrcode.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/md5.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/mchat_global.js"></script>
<style>
    .showmain {
       width: 98%; margin: 0 auto;
    }

    .modu {
        margin: 0 auto;
        text-align: center;
        font-size: 14px;
        line-height: 26px;
    }

    .modu p {
        margin-top: 10px
    }

    .modutd {
        width: 130px;
        height: 65px;
        margin-left: 5px;
        float: left;
        position: relative
    }

    .tdgray {
        background: #e3e3e3;
    }

    .bdr {
        border: 1px solid red;
        position: relative;
        top: -1px
    }

    .ribot {
        position: absolute;
        right: 0;
        bottom: 0
    }

    .kfnum {
        margin: 0
    }

    .kfnum em.th-line {
        text-decoration: line-through;
        color: grey;
        font-size: 14px;
    }

    .showmain table {


    }

    .showmain table td {line-height: 40px;
    }
    .widthclass{ width: 93%; margin: 0 auto; }



    .border1{  border-radius: 5px;  border: #ccc solid 1px; border-right:none;}
    .bg1{ background-color: #f2f2f2}
    .border_r{ border-right: #f2f2f2 solid 1px;}
    .bigfont{ font-size: 18px; font-weight:bold;}
    .bg2{ background-color: #e3af64;}
    .bg21{ background-color: #d6a560;color: #fff}
    .bg22{ background-color: #e3af64; color: #fff}

    .bg3{ background-color: #cd8843;}
    .bg31{ background-color: #c38242;color: #fff}
    .bg32{background-color: #cd8843;color: #fff}
    .kfnum{

        width: 200px; height:90px; background-color: #fff; border:#f2f2f2 solid 2px;
        line-height: 26px; margin-right: 20px;
    }
    .kfnum.on {
        border: 2px #e7bc87 solid;
    }
    .kfnum em {
        color: #e6bb84;
        font-size: 28px;
    }

    .ware_more ul li em {
        font-size: 26px;
        color: #e6bb84;
    }
</style>
<div class="showmain">
    <div class="modu">
        <p style="font-size: 18px;color: #111;text-align: left;font-weight: bold;">尊敬的美得得用户：</p>
        <p style="text-align: left; padding-left: 40px; font-size: 16px;">美得得·手店小程序-依托微信获取更多流量以及潜在用户，一触即达。是一种无需安装、关注即可使用，实现了应用触手可及、操作0门槛；
        </p>
    </div>
    <div style="clear:both"></div>


    <!---支付界面--->
    <div class="laybox" style="margin-top: 25px">
        <dl style="text-align: center;color: #333;">
            <dd style="float:left; padding-right: 30px; padding-top: 10px;">
                <foreach name="price_arr" key="k" item="v">
                    <if condition="$v.money gt 0">
                        <div class="kfnum" flag="{$v.money}" num="{$v.user_num}" rem="{$v.remark}"
                             pid="{$v.id}" type="{$v.type}" onclick="setkfnum(this)"  >
                            <div class="">
                                <em>{$v.money}</em>元/年
                            </div>
                            <div class="">
                                <em class="th-line">{$v.market_money}元/年</em>
                            </div>
                            <div style="width:90%; margin:0 auto;border-top:#c9c9c9 solid 1px;">
                            <div style="font-size: 20px; font-weight: bold; margin-top: 5px;">{$v.title}</div>
                            </div>
                            <img class="ribot" src="__PUBLIC__/static/images/ribot1.png" alt="">
                        </div>
                        <else/>
                        <if condition="$v.type eq 1">
                            <div class="kfnum" style="width: 180px; height:110px; ">
                                <div class="">
                                    <em>面谈</em>
                                </div>
                                <div>{$v.title}</div>
                                <img class="ribot" src="__PUBLIC__/static/images/ribot1.png" alt="">
                            </div>
                            <else/>
                            <div class="kfnum" onclick="freeTast()">
                                <div class="">
                                    <em>免费</em>
                                </div>
                                <div>免费体验{$v.user_num}人</div>
                                <img class="ribot" src="__PUBLIC__/static/images/ribot1.png" alt="">
                            </div>
                        </if>
                    </if>
                </foreach>
            </dd>


            <dd id="pic_dd" style="float:left; padding-left: 50px;">
                <div class="ware_ewm">
                    <div id="ewm_box" class="ewm" style="width: 130px; height: 130px;"></div>
                    <!--<img id="ewm_box" class="ewm" src="" alt="">-->
                    <span class="sjbox lt"></span>
                    <span class="sjbox rt"></span>
                    <span class="sjbox lb"></span>
                    <span class="sjbox rb"></span>
                </div>

                <div class="ware_more">
                    <ul>
                        <li>支付金额：<em id="buy_money"></em>&nbsp;元</li>
                        <li>到期时间：<em style="color: black;font-size:16px;">
                            {$t_end_time}
                        </em></li>
                        <li>
                            <span class="wx payment" flag="WEIXIN"></span>
                            <span class="zfb payment" flag="ALIPAY"></span>
                        </li>
                        <li style="color:#e6bb84;">支付完成之前不要关闭此窗体</li>
                    </ul>
                </div>
            </dd>


        </dl>
    </div>

    <div style="clear:both"></div>


<div class="widthclass border1">
    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="line-height:28px;border-radius:5px;" >
        <tbody>
        <tr>
            <td  align="center" width="10%" class="border_r bigfont" >
                功能项目
            </td>
            <td  align="center" width="50%" class="bigfont" >
                产品与服务简述
            </td>
            <!--<td width="15%" align="center" class="bigfont bg2">-->
                <!--<div  style="color:#fff">基础版</div>-->
                <!--<div style="color:#fff; ">￥999/年</div>-->

            <!--</td>-->
            <td width="15%" align="center" class="bigfont bg3">
                <div style="color:#fff">营销版</div>
                <div style="color:#fff; ">￥1999/年</div>

            </td>

        </tr>

        <tr class="bg1">
            <td  align="center" width="10%">操作简便</td>
            <td align="center">无需扫码关注，实现快速交易转化</td>
            <!--<td align="center"  class="bg21">√</td>-->
            <td align="center"  class="bg31">√</td>
        </tr>
        <tr>
            <td  align="center" width="10%" class="border_r">附近推荐</td>
            <td align="center">针对附近5公里范围内用户推广，更加容易被用户知悉</td>
            <!--<td align="center" class="bg22">√</td>-->
            <td align="center" class="bg32">√</td>
        </tr>
        <tr class="bg1">
            <td  align="center" width="10%" >信息一体化</td>
            <td align="center">针对会员信息线上线下信息同步</td>
            <!--<td align="center"  class="bg21">√</td>-->
            <td align="center"  class="bg31">√</td>
        </tr>
        <tr>
            <td  align="center" width="10%"  class="border_r">数据查询</td>
            <td align="center">会员可通过小程序，查询各自消费信息，做到消费信息透明化</td>
            <!--<td align="center" class="bg22">√</td>-->
            <td align="center" class="bg32">√</td>
        </tr>
        <tr class="bg1">
            <td  align="center" width="10%">商品分享</td>
            <td align="center">商城商品一键分享生成商品分享图</td>
            <!--<td align="center" class="bg21">×</td>-->
            <td align="center"  class="bg31">√</td>
        </tr>
        <tr>
            <td  align="center" width="10%"  class="border_r">促销活动</td>
            <td align="center">针对线上商城进行活动方案设置</td>
            <!--<td align="center" class="bg22">×</td>-->
            <td align="center" class="bg32">√</td>
        </tr>
        <tr class="bg1">
            <td  align="center" width="10%"  class="border_r">优惠券</td>
            <td align="center">线上优惠券领取，促进商品购买</td>
            <!--<td align="center" class="bg21">×</td>-->
            <td align="center"  class="bg31">√</td>
        </tr>
        <tr>
            <td  align="center" width="10%"  class="border_r">会员权益体系</td>
            <td align="center">会员分级管理，充分凸显会员权益，注重会员服务管理，真正实现千人千权益</td>
            <!--<td align="center" class="bg22">×</td>-->
            <td align="center" class="bg32">√</td>
        </tr>
        <tr class="bg1">
            <td  align="center" width="10%">自定义模板</td>
            <td align="center">简单易操作，省时省力，制作属于商家的个性模板，可随时修改，第一时间宣传最新活动</td>
            <!--<td align="center" class="bg21">×</td>-->
            <td align="center"  class="bg31">√</td>
        </tr>
        <tr>
            <td  align="center" width="10%"  class="border_r">商品秒杀</td>
            <td align="center">通过线上秒杀活动，吸客引流提升销售业绩</td>
            <!--<td align="center" class="bg22">×</td>-->
            <td align="center" class="bg32">√</td>
        </tr>
        <tr class="bg1">
            <td  align="center" width="10%">天天拼单</td>
            <td align="center">拼单方式多样性：商家团、会员团、阶梯团等拼单方式吸引顾客提升销售业绩</td>
            <!--<td align="center" class="bg21">×</td>-->
            <td align="center"  class="bg31">√</td>
        </tr>



        </tbody>
    </table>
</div>
    <Div class="widthclass">
        <p style="text-align: left; line-height: 30px; padding-top: 20px; margin-bottom: 50px">
            <b>详细特点如下：</b><br/>
            ①小程序具有5公里免费推广特性，是与美妆门店现有的公众号信息关联；<br/>
            ②小程序在用户的角度上出发，更加容易被用户获取，省去关注步骤，方便用户的操作习惯实现快速交易转化；<br/>
            ③线上线下信息同步，包含会员记录、商品信息；<br/>
            ④用户在线轻松下单，购买信息即时同步；<br/>
            ⑤会员积分、消费清单随时随地即刻查询，消费记录全透明。</p>
    </Div>


</div>
<script>
    //---默认选择价格最低的---
    $(function () {
        var minprice = 0;
        $('.kfnum').each(function () {
            var flag = $(this).attr('flag');
            if (flag != undefined && minprice == 0) {
                minprice = flag;
                var ob = this;
                //   $("#sele_remark").text($(ob).attr('rem'));

                $(".kfnum").removeClass('on');
                $(ob).addClass('on');

                var type = $(ob).attr('type');
                if (type != 2) {
                    var money = $(ob).attr('flag');
                    var num = $(ob).attr('num');
                    if (ucount != "")
                        num = num - parseInt(ucount);
                    pid = $(ob).attr('pid');

                    $("#buy_money").text(money);
                    $("#enablenum1").text(num);

                    $("#ewm_box img").attr('src', '');//清空二维码
                    $(".payment").removeClass("on");

                    //默认微信支付
                    $('.wx.payment').click();
                    $("#pic_dd").show();
                } else {
                    $("#pic_dd").hide();
                }


                return false;
            }
        });
    });

    /*--支付--*/
    var QRCode = new QRCode(document.getElementById("ewm_box"), {
        width: $('#ewm_box').width(),
        height: $('#ewm_box').height(),
    });
    var trxNo = '';
    var payUrl = '';
    var recharge_no = '';
    var bankOrderNo = '';
    var pay_qurl = '{:pay_qurl}';
    var pid = 0;
    var ucount = "{$ucount}";

    //支付方式
    $(document).on("click", ".payment", function () {
        $(".payment").removeClass("on");
        $(this).addClass("on");
        $("#ewm_box img").attr('src', '');//清空二维码
        trxNo = '';
        payUrl = '';
        recharge_no = '';
        bankOrderNo = '';
        create_QRCode(this);
    });

    //数量改变金额
    $('#buy_num').on('input propertychange', function () {
        if (!$('#buy_num').readOnly) {
            var num = $('#buy_num').val();
            if (num == '' || isNaN(parseInt(num))) {
                num = 0;
            }
            $('#buy_num').val(parseInt(num));
            $('#buy_money').text($('#buy_num').val() * dis_price);
            $('#enablenum1').text(dis_num);
            $('#enablenum2').text(dis_num + parseInt(num));

        }
        $(".payment").removeClass("on");
        $("#ewm_box img").attr('src', '');//清空二维码

    });

    //选择购买项目
    function setkfnum(ob) {

        //    $("#sele_remark").text($(ob).attr('rem'));

        $(".kfnum").removeClass('on');
        $(ob).addClass('on');
        pid = $(ob).attr('pid');

        var type = $(ob).attr('type');
//        if(type!=2) {
        var money = $(ob).attr('flag');
        var num = $(ob).attr('num');
        if (ucount != "")
            num = num - parseInt(ucount);


        $("#buy_money").text(money);
        $("#enablenum1").text(num);

        $("#ewm_box img").attr('src', '');//清空二维码
        $(".payment").removeClass("on");

        $("#pic_dd").show();
        //默认选择微信
        $('.wx.payment').click();
//        }else{
//            $("#pic_dd").hide();
//        }

    }
    ;

    //生成二维码
    function create_QRCode(obj) {
        if (pid == 0) {
            layer.alert('请选择购买的价格!', {icon: 6, time: 3000});
            return;
        }
        var payway = $(obj).attr('flag');
        var data = {
            'buy_num': 1,//数量
            'payWay': payway,
            'type': 11,  //小程序
            'pid': pid
        };
        var shadow = layer.msg('加载中...', {
            icon: 16,
            shade: [0.5, '#f5f5f5'],
            scrollbar: false,
            offset: '150px',
            time: 0
        });
        var r = ajax_return('{:url("Index/Create_QRCode")}', data, false, 'post', 2);
        if (r['code'] == 1) {
            trxNo = r['trxNo'];              //流水号
            payUrl = r['payUrl'];            //支付链接
            recharge_no = r['orderNo'];      //传入orderNo
            bankOrderNo = r['bankOrderNo'];  //银行订单号=流水号
            QRCode.makeCode(payUrl);         //生成二维码
            $("#ewm_box").attr('title', '');
            setTimeout(function () {
                layer.close(shadow);
            }, 500)
        }
        else {
            layer.close(shadow);
        }
    }

    //定时校验支付状态，支付成功时关闭支付layer
    var T = window.setInterval("submit_wx()", 1000);
    function submit_wx() {
        if (bankOrderNo != '') {
            /*-----------
             //支付状态查询
             var arr = ajax_return('/index.php/admin/index/recharge_query?bankOrderNo=' + bankOrderNo, '', true, 'GET', 2);
             //客户支付完成
             if (arr['code'] == 0) {
             //支付完成&&处理完成
             if (arr['data']['status'] == 100) {
             clearInterval(T);
             trxNo = '';
             payUrl = '';
             recharge_no = '';
             bankOrderNo = '';
             parent.layer.closeAll();
             parent.fxcallback();
             }
             }----*/
            $.ajax({
                url: '/index.php/admin/index/recharge_query?bankOrderNo=' + bankOrderNo,
                dataType: 'json',
                success: function (v) {
                    if (v.code == 0) {
                        //支付完成&&处理完成
                        if (v.data.status == 100) {
                            clearInterval(T);
                            trxNo = '';
                            payUrl = '';
                            recharge_no = '';
                            bankOrderNo = '';
                            window.location.href = '/index.php/Admin/Weapp/settings'
                            clearInterval(T);
                        }
                    }
                }
            });
        }
    }

    function freeTast() {
        if (confirm('您确定要免费体验吗？')) {
            var shadow = layer.msg('加载中...', {
                icon: 16,
                shade: [0.5, '#f5f5f5'],
                scrollbar: false,
                offset: '150px',
                time: 0
            });
            $.ajax({
                type: 'get',
                url: '/index.php/admin/index/free_tast',
                dataType: 'json',
                success: function (data) {
                    layer.close(shadow);
                    if (data.code == 1) {
                        layer.alert('您提交体验成功!', {icon: 6, time: 3000});
                    } else {
                        layer.alert(data.msg, {icon: 6, time: 3000});
                    }
                }
            });
        }
    }
</script>