master

分支 (1)

管理

管理

master

mwxz_2_wap
/
money_shop.html

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="./assets/css/buy_food.css">
    <link rel="stylesheet" type="text/css" href="./assets/layui/layui.css"/>
    <link rel="stylesheet" type="text/css" href="./assets/css/public.css"/>
    <title>钻石商店</title>
    <style>@font-face {
        font-family: uc-nexus-iconfont;
        src: url(chrome-extension://pogijhnlcfmcppgimcaccdkmbedjkmhi/res/font_9qmmi8b8jsxxbt9.woff) format('woff'), url(chrome-extension://pogijhnlcfmcppgimcaccdkmbedjkmhi/res/font_9qmmi8b8jsxxbt9.ttf) format('truetype')
    }

    #type_list li {
        float: left;
        width: 20%;
        height: 2.2rem;
        text-align: center;
        border: 1px solid #000;
        border-radius: 0.2rem;
        line-height: 2.2rem;
        margin: 0px 1% 0.4rem 4%;
        box-sizing: border-box;
        color: #525252;
        position: relative;
    }

    #type_list .sel {
        background: url(./assets/images/iconfont-dagouxuanzhong.png);
        background-size: cover;
        height: 1rem;
        width: 1rem;
        position: absolute;
        right: 0;
        bottom: 0;
        display: none;
    }

    .layui-flow-more {
        display: none;
    }

    .person_wallet_recharge .ul li {
        float: left;
        width: 92%;
        height: 2.2rem;
        text-align: center;
        border: 1px solid #CCCCCC;
        border-radius: 0.2rem;
        line-height: 2.2rem;
        margin: 0px 1% 0.4rem 4%;
        box-sizing: border-box;
        color: #525252;
        position: relative;
    }

    .banner {
        width: 100%;
        height: 150px;
        background: #FFF1E8;
        margin-top: 2.5rem;
        margin-bottom: 0.5rem;
    }
    </style>
</head>
<body>
<!--头部  star-->
<header>
    <div class="_left" onclick="window.history.go(-1);" ><img src="../assets/images/header-back.gif"></div>
    <div class="_right" onclick="goUrl('/wap/res/index.html')"><img src="../assets/images/home.gif"></div>
    <div>钻石商店</div>
</header>
<!--头部 end-->
<div class="banner">
    <ul class="ul" id="type_list">

    </ul>
</div>
<!--充值列表-->
<div class="person_wallet_recharge">
    <ul class="ul" id="list_view">
    </ul>
</div>
<div id="alpha_cover" class="alpha-cover"></div>
<div class="loading" id="loading">
    <span class="loading-ring"></span>
</div>

<script id="list" type="text/html">
    {{#
    for(var i=0;i
    <d.length;i++){
    var vo = d[i];
    arr[vo.id] = vo;
    }}
    <li onclick="info({{vo.id}})">
        <h2>{{vo.name}}(售价:{{vo.gold}})</h2>
        <div class="sel"></div>
    </li>
    {{# }
    window.food_arr = arr;}}
</script>
<script id="type" type="text/html">
    {{#
    for(var i=0;i
    <d.length;i++){
    var vo = d[i];  }}
    <li onclick="ul_change($(this))" data-type="{{vo.id}}"><h2>{{vo.name}}</h2>
        <div class="sel"></div>
    </li>
    {{# }
    window.food_arr = arr;}}
</script>
<script src="./assets/js/config.js"></script>
<script src="./assets/js/jquery-1.8.2.min.js"></script>
<script src="./assets/layui/layui.js"></script>
<script src="./assets/js/public.js"></script>
<script src="./assets/js/jquery.cookie.js"></script>
<script>
    var arr = new Array;
    $(function () {
        is_login();
        get_type();
    });
    /*    function get_foods() {
     $.ajax({
     url: SiteUrl + 'index.php?g=Res&m=food&a=get_my_foods',
     dataType: 'JSON',
     type: 'POST',
     success: function (res) {
     layui.use('laytpl', function () {
     var laytpl = layui.laytpl;
     //使用方式跟独立组件完全一样
     var gettpl = document.getElementById('list').innerHTML;
     laytpl(gettpl).render(res, function (html) {
     document.getElementById('list_view').innerHTML = html;
     });
     });
     }
     });
     }*/

    function info(id) {
        var vo = arr[id];
        var html = vo.name;
        html += '<br>售价:' + vo['gold'];
        if (vo['old_gold'] > vo['gold']) {
            html += '&nbsp;原价:<del>' + vo['old_gold'] + '</del>';
        }
        html += '<br>介绍:' + vo['description'];
        if (vo['limit_type'] > 0 && vo['limit_num'] > 0) {
            var limit_time = vo['limit_type']=='1'?vo['limit_time'] +'小时':vo['limit_time'] + '天';
            html += '<br>限购:该商品' + limit_time + '限制购买' + vo['limit_num'] + '个';
        }
        html += '<br>购买<input id="num" type="text" placeholder="请输入购买数量" value="1" autocomplete="off" class="layui-input">';
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.open({
                title: '商品信息',
                offset: 't',
                content: html,
                btn: ['确认', '取消'],
                btn1: function () {
                    var num = $('#num').val();
                    loadingShow();
                    $.ajax({
                        url: SiteUrl + 'index.php?g=Res&m=Shop&a=buy',
                        data: {num: num, id: id,shop_type:1,key:key},
                        dataType: 'JSON',
                        type: 'POST',
                        success: function (res) {
                            loadingHide();
                            check_login(res);
                            msgTip(res['info']);
                            if (res['status'] == true) {
                                $('#level').find('li.current').click();
                            }
                        }
                    });
                }
            });
        });
    }

    function get_list() {
        layui.use('flow', function () {
            var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
            var flow = layui.flow;
            flow.load({
                elem: '#list_view' //指定列表容器
                , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                    var lis = [];
                    var type_id = $('#type_list li.current:first').attr('data-type');
                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    loadingShow();
                    $.getJSON(SiteUrl + 'index.php?g=Res&m=Shop&a=goods_list', {
                        page: page,
                        type_id: type_id,
                        shop_type: 1,
                        key:key
                    }, function (res) {
                        loadingHide();
                        check_login(res);
                        //假设你的列表返回在data集合中
                        layui.use('laytpl', function () {
                            var laytpl = layui.laytpl;
                            //使用方式跟独立组件完全一样
                            var gettpl = document.getElementById('list').innerHTML;
                            laytpl(gettpl).render(res.list, function (html) {
                                if (res['page'] == 1) {
                                    $('#list_view').empty();
                                }
                                $('#list_view').append(html);

//                                document.getElementById('list_view').innerHTML = html;
                            });
                        });
                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < res.page_num);
                    });
                }
            });
        });
    }

    function get_type() {
        layui.use('flow', function () {
            var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
            var flow = layui.flow;
            flow.load({
                elem: '#list_view' //指定列表容器
                , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                    var lis = [];
                    var level = $('#level li.current:first').attr('data-level');
                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    loadingShow();
                    $.getJSON(SiteUrl + 'index.php?g=Res&m=Shop&a=shop_type',{shop_type:1}, function (res) {
                        loadingHide();
                        //假设你的列表返回在data集合中
                        layui.use('laytpl', function () {
                            var laytpl = layui.laytpl;
                            //使用方式跟独立组件完全一样
                            var gettpl = document.getElementById('type').innerHTML;
                            laytpl(gettpl).render(res.list, function (html) {
                                if (res['page'] == 1) {
                                    $('#type_list').empty();
                                }
                                $('#type_list').append(html);
                                $('#type_list').find('li:first').click();

                            });
                        });
                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < res.page_num);
                    });
                }
            });
        });
    }
    function ul_change(a) {
        a.addClass('current');
        a.find('div.sel').show();
        a.siblings().removeClass('current');
        a.siblings().find('div.sel').hide();
        get_list();
    }
</script>


</body>
</html>