sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
							<!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/aui.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>
    [v-cloak] {
        display: none;
    }

    .tabbb {
        background-color: #00a0ea;
        display: flex;
        justify-content: center;
        position: relative;
        top: -2px
    }

    .aui-tab-item {
        color: #fff;
        margin: 0 .25rem;
    }

    .intab-active {
        color: #ffffff;
        border-bottom: 2px solid #ffffff;
    }

    .ShopCard {
        background-color: #ffffff;
        margin: 0 0 .25rem 0;
        padding: .1rem;
    }

    .ShopButton {
        position: fixed;
        bottom: 0;
        display: flex;
        width: 100%;
        height: 1rem;
    }

    .ShopButtonAdd {
        background: linear-gradient(90deg, rgba(255, 208, 30, 1) 0%, rgba(255, 137, 23, 1) 100%);
        color: #ffffff;
        display: flex;
        justify-content: center;
        flex-grow: 1;
        align-items: center;
    }

    .ShopButtonBuy {
        background: linear-gradient(90deg, rgba(255, 96, 52, 1) 0%, rgba(238, 10, 36, 1) 100%);
        color: #ffffff;
        display: flex;
        justify-content: center;
        flex-grow: 1;
        align-items: center;
    }

    .ShopDetails-title {
        color: #E01212;
        border-bottom: 2px solid #E01212;
        width: 2.5rem;
        height: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .ShopDetails {
        background-color: #ffffff;
        padding: .1rem 0;
        margin: 0 0 .5rem 0;
    }

    .shop-add {
        display: flex;
        justify-content: space-between;
        ;
        align-items: center;
        color: #999999
    }

    .shop-add-left {
        display: flex;
    }

    .guige {
        background-color: #ffffff;
        margin: 0 0 .5rem 0;
        padding: .25rem;
        display: flex;
        justify-content: space-between;
    }

    .buttom-buy {
        background-color: #E01212;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: .5rem;
        width: 70%;
        height: .75rem;
    }

    .mescroll {
        position: relative;
    }
</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 class="tabbb">
                        <div class="aui-tab-item tapmode " v-for="(item,index) in activeList"
                            v-bind:class="index==activeId?'intab-active':''" v-on:click="getId(index)">{{item.name}}
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <div style="height:86%;overflow-y:scroll;">
            <div v-show="activeId==0">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-if="images.length==0"
                        style="display:flex;justify-content:center;align-items:center"><img src="img/nothing.png"
                            style="width:4rem;height:4rem;margin:1rem 0"></van-swipe-item>
                    <van-swipe-item v-else v-for="(item,index) in images" :key="index"><img :src="item.productImage">
                    </van-swipe-item>
                </van-swipe>
                <div class="ShopCard">
                    <div style="margin:.05rem 0">
                        {{list.productName}}
                    </div>
                    <div style="margin:.05rem 0;color:#999999">
                        库存：{{list.productQtyStock}}
                    </div>
                    <div class="shop-add">
                        <div style="margin:.05rem 0;color:#E01212">
                            {{list.productPrice}}个积分
                        </div>
                        <div class="shop-add-left">
                            采购数量：
                            <van-stepper v-model="defaultCount" input-width=".6rem" button-size=".4rem" integer min="1"
                                max="999" v-on:change="inputNum()" />
                            <!-- <div class="but-sub" v-on:click="subQuantity()">-</div>
                            <input type="number" v-model="defaultCount" v-on:input="inputNum()" v-on:Blur="outBlur()">
                            <div class="but-add" v-on:click="addQuantity()">+</div> -->
                        </div>
                    </div>
                </div>
                <div class="guige">
                    <div style="display:flex">
                        规格：
                        <div style="width:1.5rem">
                            {{list.productSpecs}}
                        </div>
                    </div>
                    <div style="display:flex">
                        花纹：
                        <div v-if="list.productRemarks==''" style="width:1.5rem">
                            {{list.productRemarks}}
                        </div>
                        <div v-else style="width:1.5rem">
                            ——
                        </div>
                    </div>
                    <div style="width:2rem">
                        层级：——
                    </div>
                </div>
            </div>
            <div style="background-color:#ffffff;display: flex;justify-content:center;margin: 0 0 .5rem 0;">
                <div class="ShopDetails-title">
                    商品详情
                </div>
            </div>
            <div class="ShopDetails" v-if="list.productItem" v-html="list.productItem">
            </div>
            <div class="ShopDetails" v-else>
                <div style="text-align:center;color:#ccc">
                    暂无数据
                </div>
            </div>
        </div>
        <div class="ShopButton">
            <div class="ShopButtonAdd" v-on:click="addShopCart">
                加入购物车
            </div>
            <div class="ShopButtonBuy" v-on:click="showPopup">
                立即下单
            </div>
        </div>
        <van-popup v-model="show" closeable position="bottom" :style="{ height: '40%' }">
            <div v-if="addresslist.length!=0" style="margin-top:.8rem;height:65%" class="mescroll-touch-y mescroll">
                <van-radio-group v-model="radio" v-for="(ab,index) in addresslist" :key="index"
                    style="padding:.25rem .5rem">
                    <van-radio :name="ab.mainId">
                        <div>
                            <div>
                                {{ab.contactsName}}
                            </div>
                            <div style="font-size:.25rem">
                                {{ab.province}}{{ab.city}}{{ab.county}}{{ab.address}}
                            </div>
                        </div>
                    </van-radio>
                </van-radio-group>
            </div>
            <div v-else>
                <div style="display:flex;justify-content:center;margin-top:.8rem;color:#ccc">
                    暂无收货地址
                </div>
                <div style="display:flex;justify-content:center;margin-top:.8rem;color:#00a0ea" v-on:click="goaddress">
                    点击去添加
                </div>
            </div>

            <div style="position: fixed;bottom: .5rem;width:100%;display:flex;justify-content:center">
                <div class="buttom-buy" v-on:click="addOrder">
                    立即下单
                </div>
            </div>

        </van-popup>
    </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 () {
        var productId = api.pageParam.productId;
        api.parseTapmode();
        var header = $api.byId('aui-header');
        $api.fixStatusBar(header);
        new Vue({
            el: '#app',
            data: {
                activeList: [{
                    name: "商品"
                }, {
                    name: "详情"
                }],
                activeId: 0,
                productId: productId,
                list: "",
                images: [],
                defaultCount: 1,
                show: false,
                addresslist: [],
                radio: ''
            },
            methods: {
                init: function () {
                    this.getProductImage();
                    this.storeId = $api.getStorage('userid');
                    this.status = $api.getStorage('status');
                },
                getId: function (index) {
                    this.activeId = index;
                },
                inputNum: function () {
                    if (this.defaultCount > 999) {
                        this.showToast("最多购买999件")
                        this.defaultCount = "999";
                    } else if (this.defaultCount < 0) {
                        this.showToast("最少购买1件")
                        this.defaultCount = "1";
                    }
                },
                getProductImage: function () {
                    var _this = this,
                        url = "getProductImage",
                        data = {
                            "productId": this.productId,
                            "type": 'body',
                            "url": 'json'
                        }
                    this.$post(url, data, function (ret) {
                        if (ret.code == 0) {
                            _this.list = ret.productItem;
                            _this.images = ret.image;
                        }
                    });
                },
                addShopCart: function () {
                    if (this.status == 3) {
                        api.alert({
                            title: '系统提示',
                            msg: '门店已冻结,请找相关业务经理解冻！',
                        }, function (ret, err) {
                        });
                        return;
                    }
                    if (this.list.productQtyStock == 0) {
                        api.toast({
                            msg: '很抱歉，当前商品暂时缺货'
                        });
                        return
                    }
                    var data = {
                        "url": "json",
                        "type": "body",
                        "productId": this.list.mainId,
                        "storeId": this.storeId,
                        "cartQty": this.defaultCount,
                        "cartType": "0",
                        "productIntroduction": this.list.productName,
                        "spec": this.list.productSpecs,
                        "productPrice": this.list.productPrice,
                        "productImage": this.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: '成功加入购物车'
                                });
                                _this.defaultCount = 1;
                            } else {
                                api.toast({
                                    msg: ret.message
                                });
                            }
                        }
                    })
                },
                showPopup: function () {
                    if (this.status == 3) {
                        api.alert({
                            title: '系统提示',
                            msg: '门店已冻结,请找相关业务经理解冻！',
                        }, function (ret, err) {
                        });
                        return;
                    }
                    if (this.list.productQtyStock == 0) {
                        api.toast({
                            msg: '很抱歉，当前商品暂时缺货'
                        });
                        return
                    }
                    this.show = true;
                    var data = {
                        "url": "json",
                        "type": "body",
                        "storeId": this.storeId,
                        "addressType": "1",
                        "isDel": 0
                    },
                        _this = this,
                        url = "getReceiptAddress";
                    this.$post(url, data, function (ret) {
                        if (ret.code == 0 || ret.code == '0') {
                            _this.addresslist = ret.list;
                            for (var i = 0; i < _this.addresslist.length; i++) {
                                if (_this.addresslist[i].beDefault == 1) {
                                    _this.radio = _this.addresslist[i].mainId
                                } else {
                                    _this.radio = _this.addresslist[0].mainId
                                }
                            }
                        }
                    })
                },
                addOrder: function () {
                    if (this.radio == "") {
                        api.toast({
                            msg: '请选择收货地址'
                        });
                        return
                    }
                    var data = {
                        "url": "json",
                        "type": "body",
                        "productId": this.list.mainId,
                        "storeId": this.storeId,
                        "cartQty": this.defaultCount,
                        "productImage": this.list.productImage,
                        "mainId": this.radio,
                    },
                        _this = this,
                        url = "immediatelyOrder";
                    _this.showModal('温馨提示', '是否确认下单？', ["取消", "确认"], function (res) {
                        if (res == 2) {
                            _this.$post(url, data, function (ret) {
                                if (ret.code == 0 || ret.code == '0') {
                                    if (!ret.message) {
                                        _this.showToast("成功下单");
                                        _this.show = false;
                                        setTimeout(function () {
                                            _this.goWin('annal', 'annal_win.html');
                                        }, 1000);
                                    } else {
                                        api.toast({
                                            msg: ret.message
                                        });
                                        _this.show = false;
                                    }

                                } else {
                                    _this.showToast("下单失败")
                                }
                            })

                        }
                    })
                },
                goaddress: function () {
                    this.goWin('address', 'address_win.html');
                    this.show = false
                }
            },
            mounted: function () {
                this.init();
            },
        })
    }
</script>

</html>