sailun
/
sailun-shop


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
							<!DOCTYPE html>
<html class="">
<!--STATUS OK-->

<head>
    <meta name="referrer" content="always" />
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <meta name="description" content="">
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
    <link rel="stylesheet" type="text/css" href="css/vant-ui.css" />
    <link rel="stylesheet" type="text/css" href="css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script type="text/javascript" src="../script/aui-tab.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/vant-ui.js"></script>
    <script src="js/main.js"></script>
    <title></title>
</head>
<style>
    .card-main {
        position: relative;
        top: -3.5rem;
        height: 100%
    }

    .card {
        display: flex;
        justify-content: center;
        height: 100%
    }

    .card-left {
        background-color: #EBEBEB;
        width: 1.5rem;
        border-top-left-radius: .3rem;
    }

    .type-list {
        padding: .1rem 0;
        font-size: .3rem;
        display: flex;
        justify-content: center;
        color: #333333;
    }

    .type-active {
        background-color: #fff;
    }

    .card-right {
        background-color: #fff;
        border-top-right-radius: .3rem;
        width: 5.5rem;
    }

    .shop-list {
        display: flex;
        padding: .2rem .15rem;
    }

    /*.shop-img {
        width: 1.5rem;
        height: 1.5rem;
        background-color: #000
    }*/

    .shop-list-right {
        display: flex;
        flex-direction: column;
        width: 3.4rem;
        justify-content: space-between;
        padding-left: .1rem;
    }

    .shop-title {
        display: flex;
        color: #333333;
    }

    .shop-title-p {
        font-size: .28rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        width: 3.4rem;
    }

    .shop-integral {
        display: flex;
        align-items: flex-end;
    }

    .shop-integral-left {
        font-size: .25rem;
        width: 1.4rem;
        color: #666666;
    }

    .shop-integral-right {
        font-size: .25rem;
        color: #333333;
    }

    .shop-add {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }

    .shop-add-right {
        font-size: .25rem;
        color: #fff;
        background-color: #0098E2;
        padding: .05rem .1rem;
        border-radius: .1rem;
    }

    [v-cloak] {
        display: none;
    }
</style>

<body>
    <div id="app" style="background-color:#F5F5F5">
        <header class="aui-bar aui-bar-nav aui-bar-info" id="aui-header">
            <div>
                <a class="aui-btn aui-btn-info aui-pull-left" tapmode onclick="closeWin()"> <span
                        class="aui-iconfont aui-icon-left"></span> </a>
                <div class="aui-title" id="aui-title">
                    积分商城
                </div>
                <a class="aui-btn aui-btn-info aui-pull-right" tapmode v-on:click="inSearchPage()"> <span
                        class="aui-iconfont aui-icon-search"></span> </a>
            </div>
        </header>
        <div class="banner">
        </div>
        <div class="card-main">
            <div class="card">
                <div class="card-left" style="height:90%;overflow-y:scroll;padding-bottom:1rem;" v-cloak>
                    <div v-bind:class="index==activeId?'type-active':''" class="type-list"
                        v-for="(item,index) in typeList" :key="index" v-on:click="getId(item,index);getshopLists(item)">
                        {{item.categoryName}}
                    </div>
                </div>
                <div class="card-right" style="height:90%;overflow-y:scroll;padding-bottom:1rem;" v-cloak>
                    <div style="display:flex;align-items:flex-end;margin:.1rem 0 0 .1rem" v-if="this.activeId==0">
                        <div style="font-weight:800;margin-left:.1rem">
                            热销
                        </div>
                        <div style="font-size:.25rem;color:#7C7C7C;padding-bottom:.03rem;margin-left:.1rem">
                            大家都换，才是真的好用
                        </div>
                    </div>
                    <div v-if="shopList.length!=0">
                        <div class="shop-list" v-for="(list,index) in shopList" :key="index">
                            <div class="shop-img" v-on:click="inDetails(list)">
                                <img v-if="list.productImage==null" src="img/nothing.png"
                                    style="width:1.8rem;height:1.8rem">
                                <img v-else :src="list.productImage" style="width:1.8rem;height:1.8rem">
                            </div>
                            <div class="shop-list-right">
                                <div v-on:click="inDetails(list)">
                                    <div class="shop-title">
                                        <p class="shop-title-p">{{list.productName}}</p>
                                    </div>
                                </div>
                                <div class="shop-add">
                                    <div class="shop-add-left">
                                        <div style="color:#333333;font-size:.25rem;">
                                            剩余库存：{{list.productQtyStock}}
                                        </div>
                                        <div style="color:#FF0000;font-size:.25rem;margin-top:.1rem">
                                            {{list.productPrice}}积分
                                        </div>

                                        <!-- <van-stepper v-model="list.defaultCount" input-width=".6rem" button-size=".4rem" integer min="1" max="999" v-on:change="inputNum(list)" /> -->
                                        <!-- <div class="but-sub" v-on:click="subQuantity(list)">-</div>
                                      <input type="number" v-model="list.defaultCount" v-on:input="inputNum(list)" v-on:Blur="outBlur(list)">
                                      <div class="but-add" v-on:click="addQuantity(list)">+</div> -->
                                    </div>
                                    <div class="shop-add-right" v-on:click="addShopCart(list)">
                                        加入购物车
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else style="display:flex;justify-content:center;color:#ccc;padding-top:1.5rem">
                        暂无商品
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>
<link rel="stylesheet" href="./mescroll/mescroll.min.css">
<script type="text/javascript" src="./mescroll/mescroll.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/httpRequest.js"></script>
<script type="text/javascript" src="../script/vue_plugins.js"></script>
<script type="text/javascript">
    function closeWin() {
        api.closeWin({});
    }
    apiready = function () {
        api.parseTapmode();
        var header = $api.byId('aui-header');
        $api.fixStatusBar(header);
        new Vue({
            el: '#app',
            data: {
                typeList: [],
                shopList: [],
                activeId: 0
            },
            methods: {
                init: function () {
                    this.getTypes();
                    this.getshopLists();
                    this.storeId = $api.getStorage('userid');
                    this.status = $api.getStorage('status');
                    // this.verifyBusiness();
                    var _this = this;
                    this.addEvent("refreshindex", function () {
                        _this.getshopLists();
                        _this.activeId = 0
                    });
                },
                verifyBusiness: function () {
                    var data = {
                        "storeId": this.storeId,
                        "url": "json",
                        "type": "body"
                    },
                        _this = this,
                        url = "verifyBusiness";
                    this.$postuser(url, data, function (ret) {
                        if (ret.code == 500) {
                            api.alert({
                                title: '系统提示',
                                msg: ret.msg,
                            }, function (ret, err) {
                                if (ret) {
                                    _this.goWin("license_win", "license_win.html", {})
                                }

                            });
                        }

                    })
                },
                getTypes: function () {
                    var data = {
                        "url": "json",
                        "type": "body"
                    },
                        _this = this,
                        url = "getTypes";
                    this.$post(url, data, function (ret) {
                        _this.typeList = ret.productCategory;
                    })
                },
                getshopLists: function (item) {
                    if (!item) {
                        var data = {
                            "url": "json",
                            "type": "body",
                            "mainId": 0
                        },
                            _this = this,
                            url = "getshopLists";
                        this.$post(url, data, function (ret) {
                            _this.shopList = ret.product;
                        })
                    } else {
                        var data = {
                            "url": "json",
                            "type": "body",
                            "mainId": item.mainId
                        },
                            _this = this,
                            url = "getshopLists";
                        this.$post(url, data, function (ret) {
                            _this.shopList = ret.product;
                        })
                    }
                },
                getId: function (item, index) {
                    this.activeId = index;
                },
                addShopCart: function (list) {
                    if (this.status == 3) {
                        api.alert({
                            title: '系统提示',
                            msg: '门店已冻结,请找相关业务经理解冻！',
                        }, function (ret, err) {
                        });
                        return;
                    }
                    if (list.productQtyStock == 0 || list.productQtyStock == null) {
                        api.toast({
                            msg: '很抱歉，当前商品暂时缺货'
                        });
                        return
                    }
                    var data = {
                        "url": "json",
                        "type": "body",
                        "productId": list.mainId,
                        "storeId": this.storeId,
                        "cartQty": 1,
                        "cartType": "0",
                        "productIntroduction": list.productName,
                        "spec": list.productSpecs,
                        "productPrice": list.productPrice,
                        "productImage": list.productImage
                    },
                        _this = this,
                        url = "addShopCart";
                    this.$post(url, data, function (ret) {
                        if (ret.code == 0 || ret.code == '0') {
                            if (!ret.message) {
                                api.toast({
                                    msg: '成功加入购物车'
                                });
                            } else {
                                api.toast({
                                    msg: ret.message
                                });
                            }
                        }
                    })
                },
                inDetails: function (list) {
                    this.goWin('integral_details', 'integral_details.html', {
                        productId: list.mainId
                    });
                },
                inSearchPage: function () {
                    this.goWin('integral_search', 'integral_search.html');
                }
            },
            mounted: function () {
                this.init();
            },
        })
    }
</script>

</html>