sailun
/
sailun-shop


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815
							<!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" />
    <link rel="stylesheet" type="text/css" href="css/countdown.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>
    <script src="js/countdown.js"></script>
    <title></title>
</head>
<style>
    .box-main {
        position: relative;
        top: -4rem;
        padding-top: .5rem;
    }
    .aui-bar {
        text-align: center;
        height: 1.5rem;
    }

    .card {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
    }

    .card-list {
        width: 7rem;
        background-color: #fff;
        border-radius: .3rem;
        display: flex;
        flex-direction: column;
    }

    .card-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /* border-bottom: 1px solid #F1F1F1; */
        margin: 0 .2rem;
        padding: .2rem 0;
    }

    .card-group {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid #F1F1F1;
        margin: 0 .2rem;
        padding: .2rem 0;
    }
    .card-group .times{
        display: flex;
        align-items: center;
        color: #fb5609;
        font-size: .23rem;
        flex-direction: row;
    }
    .card-box:last-child {
        border-bottom: 0px solid #F1F1F1;
    }

    .card-list-left {
        display: flex;
        flex-direction: row;
    }

    .card-check {
        display: flex;
        align-items: center;
        margin: 0 .2rem;
    }

    .card-logo {
        margin-right :.2rem;
       display: flex;
       align-items:center;
        
    }
    .card-img {
        margin: .2rem .2rem .2rem 0rem;
    }

    .card-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: .2rem 0;
    }

    .card-title {
        width: 3.5rem;
    }

    .card-title-p {
        font-size: .3rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .xiangou{
        display: flex;
        flex-direction: row;
      
    }
    .xiangou .title{
        font-size: .23rem;
        margin-right: .2rem;
        margin-left: .2rem;
        color: #797979;
    }
    .shop-add-left {
        display: flex;
        font-size: .28rem;
        flex-direction: row;
        justify-content: space-between;
    }


    .shop-add-left input {
        width: .6rem;
        border: 1px solid rgba(229, 229, 229, 1);
        text-align: center;
    }
    .shop-add-left .qty{
         display: flex;
         align-items:center;
    }
    .price{
        color: #fb5609;
        font-size:.4rem;
    }
    .price .icon{
        font-size: .25rem;
    }
    .but-sub {
        border-top: 1px solid rgba(229, 229, 229, 1);
        border-left: 1px solid rgba(229, 229, 229, 1);
        border-bottom: 1px solid rgba(229, 229, 229, 1);
        width: .45rem;
        text-align: center;
        border-top-left-radius: .05rem;
        border-bottom-left-radius: .05rem;
    }

    .but-add {
        border-top: 1px solid rgba(229, 229, 229, 1);
        border-right: 1px solid rgba(229, 229, 229, 1);
        border-bottom: 1px solid rgba(229, 229, 229, 1);
        width: .45rem;
        text-align: center;
        border-top-right-radius: .05rem;
        border-bottom-right-radius: .05rem;
    }

    .card-del {
        margin: .3rem;
        width: .3rem;
        height: .3rem;
    }

    .card-del img {
        width: .3rem;
        height: .3rem;
    }

    .settle {
        position: absolute;
        bottom: 0;
        background-color: #fff;
        width: 100%
    }

    .settle-main {
        display: flex;
        justify-content: space-between;
        margin: .15rem 0;
    }

    .settle-left {
        margin: 0 .2rem;
        display: flex;
        flex-direction: row;
    }

    .settle-right {
        display: flex;
        flex-direction: row;
    }

    .settle-compute {
        color: rgba(0, 159, 233, 1);
        display: flex;
        align-items: center;
        margin: 0 .2rem;
    }

    .settle-button {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 158, 232, 1);
        border-radius: .5rem;
        height: .6rem;
        width: 2rem;
        color: #fff;
        margin: 0 .2rem;
    }

    .color-c2c2c2 {
        background-color: #C2C2C2;
    }

    .settle-check {
        display: flex;
        align-items: center;
    }

    .check-text {
        margin-left: .2rem;
        display: flex;
        align-items: center;
        color: rgba(102, 102, 102, 1);
    }

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

    .upwarp-nodata {
        display: none !important;
    }

    .mescroll {
        position: relative;
        height: 85%;
    }
    .whitebar{
        background-color:#ffffff !important;
        color: #333333;
    }

</style>

<body>
    <div id="app" style="background-color:#F5F5F5" v-cloak>
        <header class="aui-bar aui-bar-nav  " id="aui-header" style="background-color:#ffffff !important;color: #333333">
            <div>
                <div class="aui-title" id="aui-title">
                    购物车
                </div>
                <!-- <div
                    style="display:flex;justify-content:flex-end;font-size:.3rem;align-items:center;margin-right:.2rem;">
                    <div v-on:click="setEdit" v-show="inEdit">
                        编辑
                    </div>
                    <div v-on:click="getEdit" v-show="outEdit">
                        完成
                    </div>
                </div> -->
                <!-- <div v-on:click="getEdit" v-show="outEdit" style="display:flex;justify-content:flex-end;font-size:.3rem;align-item:center;margin-right:.2rem;">
                  完成
                </div> -->
            </div>
        </header>
        <div class="banner" style="background-image: none !important">
        </div>  
        <div class="box-main mescroll-touch-y mescroll" id="mescroll">
            <div class="card-main">
                <div class="card"> 
                    <div class="card-list" v-show="Shopcarts.length > 0">
                        <div class="card-group">
                            <div class="card-list-left">
                                    <div class="card-check">
                                    <van-checkbox></van-checkbox>
                                    </div>
                                    <div class="card-logo " >
                                        <img src="image/factory_logo.png" style="height:.28rem;width:.36rem"/>
                                    </div>
                                    <div class="card-title" style="width: 2rem !important">
                                        <p class="card-title-p"> 工厂直营</p>
                                    </div> 
                                </div>
                                <div class="times">
                                    <div> 距离结束</div> 
                                    <div id="time"></div>
                                </div>
                            </div>
                            <div class="card-box"  v-for="(item,index) in Shopcarts" :key="index"  > 
                            <div class="card-list-left">
                                <div class="card-check">
                                    <span>
                                        <van-checkbox v-model="item.checked" v-on:change="numCheck(item)">
                                        </van-checkbox>   
                                         
                                    </span>
                                </div>
                                <div class="card-img"  v-on:click="showdetail(item)" >
                                        <img   src="image/cart_goods.png"
                                        style="width:2rem;height:2rem">
                                    <!-- <img v-if="item.productImage==null" src="img/nothing.png"
                                        style="width:1.8rem;height:1.8rem">
                                    <img v-else :src="item.productImage" style="width:1.8rem;height:1.8rem"> -->
                                </div>
                                <div class="card-text" >
                                    <div class="card-title"  v-on:click="showdetail(item)">
                                        <p class="card-title-p">{{ item.maktx }}</p>
                                    </div>
                                    <div class="xiangou"  v-on:click="showdetail(item)">
                                        <div>
                                                <img src="image/xiangou.png" style="height:.25rem;width:.25rem">
                                        </div>
                                        <div class="title">限购5件</div>
                                        <div><img src="image/coupon.png" style="height: .3rem;width:1.3rems"></div>
                                    </div>
                                    <div class="shop-add-left">
                                        <div class="price"  v-on:click="showdetail(item)">
                                            <span class="icon">￥</span>240.88
                                        </div>
                                        <div>
                                        <van-stepper v-model="item.purchaseNumber" input-width=".6rem" button-size=".4rem"
                                            integer min="0" max="999" v-on:change="inputNum(item)"     /> 
                                    </div>
                                </div>
                            </div> 
                        </div>
                      
                    </div>
                    <div v-show="Shopcarts.length == 0" style="text-align:center">
                            <img src="./image/noData.png" style="margin:2rem auto" />
                        </div>
                </div>
            </div>
        </div>

        <div class="settle">
            <div class="settle-main">
                <div class="settle-left">
                    <div class="settle-check">
                        <van-checkbox v-model="allCheck" v-on:click="changeAllCheck"></van-checkbox>
                    </div>
                    <div class="check-text">
                        全选
                    </div>
                </div>
                <div class="settle-right">
                    <div class="settle-compute" ref="updateTotal">
                        总计： {{totalSumAll}}
                    </div>
                    <div class="settle-button" v-show="inEdit" v-on:click="showPopup">
                      提交订单
                    </div>
                    <!-- <div class="settle-button color-c2c2c2" v-show="outEdit" v-on:click="allDelCart()">
                        删除
                    </div> -->
                </div>
            </div>
        </div>
        <!-- <van-popup v-model="show" closeable position="bottom" :style="{ height: '40%' }">
           
            <div style="display:flex;justisfy-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 style="position: fixed;bottom: .2rem;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="./js/qrcode.min.js"></script>
<script type="text/javascript" src="../script/aui-scroll.js"></script>
<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">
     
    apiready = function () {
        api.parseTapmode();
        var header = $api.byId('aui-header');
        $api.fixStatusBar(header);
        // api.addEventListener({
        //             name:'resume'
        //         },function(ret,err){ 
                
        //           alert('已转到前台，需要刷新列表和爆款时间');
        //         });
        new Vue({
            el: '#app',
            data: {
                
                checkBox: [],
                inEdit: true,
                outEdit: false,
                Shopcarts: [],
                total: '',
                allCheck: false,
                current: 1,
                size: 10,  
                frist: 1,
                totalPages: 1,
                hasOther: false,
                mescroll: '',
                show: false,
                addresslist: [],
                radio: '',
            },
            methods: {
                init: function () {
                    this.userId = $api.getStorage('userid'); 
                   // this.storeId = $api.getStorage('userid');
                    this.loginId = $api.getStorage('loginid');
                    this.status = $api.getStorage('status');
                    this.getShopCart();
                    var _this = this;
                    this.addEvent("refreshshopcart", function () {
                        _this.getShopCart();
                        _this.show = false;
                    });
                    
                },
                configs: function () {
                    var _this = this;
                    this.frist = 2;
                    
                   
                    this.configDownAndPull("mescroll", function (mescroll) {
                        _this.mescroll = mescroll;
                        _this.current = 1;
                        _this.getShopCart(mescroll);
                    }, function (mescroll) {
                        if (_this.current < _this.totalPages) {
                            _this.current = _this.current + 1;
                            _this.getShopCart(mescroll, 1);
                        } else {
                            mescroll.endSuccess(_this.size, false);
                        }
                    })
                },
                addMore: function () {
                    var _this = this;
                    if (_this.current < _this.totalPages) {
                        _this.current = _this.current + 1;
                        _this.getCouponList(_this.mescroll, 1);
                    } else {
                        _this.hasOther = true;
                    }
                },
                /**
				 * 删除购物车中的物料
				 */
				delCarMatax: function (id) {
					var url = "delCarMataxU", _this = this;
					var data = {
						"id": id,
						"url": "json",
						"type": "body"
					}
					this.$post(url, data, function (ret) {
						if (ret.code == 0 || ret.code == '0') {
							api.toast({
								msg: '删除成功',
							});
						 
							  setTimeout(function () {
                                 _this.getShopCart();
							  }, 500)
						}
					})
                },
                showdetail:function(item){
                    this.goWin("product", "product.html");
                },
                inputNum: function (item) {
                    if (item.purchaseNumber==0){
                        this.delCarMatax(item.id);
                    }
                    else  if (item.purchaseNumber != '') { 
                        var data = {
						"url": "json",
						"type": "body",
						"id": item.id,
						"purchaseNumber": item.purchaseNumber
					}
					_this = this,
					url = "updateCarNum";
					this.$post(url, data, function (ret) { })
                    }
                },
                setEdit: function () {
                    if (this.inEdit) {
                        this.inEdit = false;
                        this.outEdit = true;
                    } else {
                        this.inEdit = true;
                        this.outEdit = false;
                    }
                },
                getEdit: function () {
                    if (this.outEdit) {
                        this.outEdit = false;
                        this.inEdit = true;
                    } else {
                        this.inEdit = false;
                        this.outEdit = true;
                    }
                },
                getShopCart: function (mescroll) {
                    var url = "getCarListU",
                     _this = this, 
                     data = {
						"storeId": this.userId,
						"url": "json",
						"type": "body"
                    };
                    setTimeout(function () {
                        if (mescroll) {
                            mescroll.endSuccess();
                        }
                    }, 1000);
                    //console.log(JSON.stringify(data));
                    this.$post(url, data, function (ret) {
						if (ret.code == 0 || ret.code == '0') {
							ret.data.map(function (store, index) {
								store.checked = false;
							})
                            
                            _this.Shopcarts = _this.current == 1 ? ret.data : _this.Shopcarts.concat(ret.data);
                           // console.log(JSON.stringify(ret.data));
                            _this.totalPages = ret.data.pages;
                            if (mescroll) {
                                mescroll.endSuccess(_this.size, true)
                            }
                            if (_this.frist == 1) {
                                _this.$nextTick(function () {
                                    _this.configs();
                                })
                            }
						}
					})
                   
                },
                changeAllCheck: function () {
                    if (this.allCheck == false) {
                        this.Shopcarts.map(function (cart, index) {
                            cart.checked = false;
                        })
                    } else {
                        this.Shopcarts.map(function (cart, index) {
                            cart.checked = true;
                        })
                    }
                },
                numCheck: function (item) {
                    var i = 0;
                    this.Shopcarts.forEach(function (item) {
                        if (item.checked === true) i++
                    })
                    if (i != this.Shopcarts.length) {
                        this.allCheck = false
                    } else {
                        this.allCheck = true
                    }
                },
                delCart: function (item) {
                    var arr = [];
                    var add = item.mainId;
                    arr.push(add);
                    var data = {
                        "url": "json",
                        "type": "body",
                        "ids": arr,
                    },
                        _this = this,
                        url = "delCart";
                    _this.showModal('温馨提示', '是否确认删除？', ["取消", "确认"], function (res) {
                        if (res == 2) {
                            _this.$post(url, data, function (ret) {
                                if (ret.code == 0 || ret.code == '0') {
                                    _this.showToast("已成功删除")
                                } else {
                                    _this.showToast("删除失败")
                                }
                                setTimeout(function () {
                                    _this.getShopCart();
                                }, 200)
                            })
                        }
                    })

                },
                showPopup: function () {
                    var count = 0, price = 0, hasChoose = new Array();
					this.Shopcarts.map(function (cart, index) {
						if (cart.checked == true) {
							price = price + (parseInt(cart.purchaseNumber) ? parseInt(cart.purchaseNumber) : 0) * 1;
							count = count + (parseInt(cart.purchaseNumber) ? parseInt(cart.purchaseNumber) : 0);
							hasChoose.push({
								"id": cart.id,
								"storeId": cart.storeId,
								"purchaseNumber": cart.purchaseNumber,
								"cartType": cart.cartType,
								"kunnr": cart.kunnr,
								"matnr": cart.matnr,
								"maktx": cart.maktx,
								"brand": cart.brand,
								"spec": cart.spec,
								"pattern": cart.pattern
							});
						}
					})
					if (hasChoose.length == 0) {
						api.toast({ msg: '至少选择一件商品' });
						return;
					}
                     
                    this.goWin("confirmOrder", "confirmOrderInfo_win.html",{
									data: hasChoose
								} );
                   // 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 () {
                    var hasChoose = [];
                    this.Shopcarts.map(function (cart, index) {
                        if (cart.checked == true) {
                            hasChoose.push({
                                "mainId": cart.mainId,
                                "productId": cart.productId,
                                "storeId": cart.storeId,
                                "cartQty": cart.cartQty,
                                "cartType": cart.cartType,
                                "status": cart.status,
                                "productIntroduction": cart.productIntroduction,
                                "brand": cart.brand,
                                "spec": cart.spec,
                                "pattern": cart.pattern,
                                "createTime": cart.createTime,
                                "productPrice": cart.productPrice,
                                "isDelete": cart.isDelete,
                                "productImage": cart.productImage,
                                "size": null,
                                "current": null
                            });
                        }
                    })
                    if (this.radio == "") {
                        this.showToast('请选择收货地址');
                        return;
                    }
                    var data = {
                        "url": "json",
                        "type": "body",
                        "bizIntegralCartDtoList": hasChoose,
                        "shopId": this.storeId,
                        "receiptAddressId": this.radio
                    },
                        _this = this,
                        url = "addOrder";
                    _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.allCheck = false;
                                        _this.show = false;
                                        setTimeout(function () {
                                            _this.goWin('annal', 'annal_win.html');
                                        }, 1000);
                                    } else {
                                        api.toast({
                                            msg: ret.message
                                        });
                                        _this.allCheck = false;
                                        _this.show = false;
                                        return
                                    }
                                } else {
                                    _this.showToast("下单失败")
                                }
                                setTimeout(function () {
                                    _this.getShopCart();
                                }, 200)
                            })
                        } else {
                            _this.show = false;
                        }
                    })

                },
                allDelCart: function () {
                    var arr = [];
                    this.Shopcarts.map(function (cart, index) {
                        if (cart.checked == true) {
                            arr.push(cart.mainId);
                        }
                    })
                    if (arr.length == 0) {
                        this.showToast('至少选择一件商品');
                        return;
                    }
                    var data = {
                        "url": "json",
                        "type": "body",
                        "ids": arr,
                    },
                        _this = this,
                        url = "delCart";
                    _this.showModal('温馨提示', '是否确认删除？', ["取消", "确认"], function (res) {
                        if (res == 2) {
                            _this.$post(url, data, function (ret) {
                                if (ret.code == 0 || ret.code == '0') {
                                    _this.showToast("已成功删除")
                                    _this.allCheck = false
                                } else {
                                    _this.showToast("删除失败")
                                }
                                setTimeout(function () {
                                    _this.getShopCart();
                                    _this.current = 1;
                                }, 200)
                            })
                        }
                    })

                }, 
                downTime:function(){
                    var o = {
                        el : 'time',
                        st : 0,
                        ed : 5400000,
                        hh: 'hh',
                        mm: 'mm',
                        ss: 'ss',
                        ms: 'ms'
                    }
                    var d = new countdown(o);
                    d.downsElement();                
                }
            },
            watch: {

            },
            computed: {
                totalSumAll: function () {
                    var totalSumAll = 0;
                    // this.Shopcarts.map(function (cart, index) {
                    //     if (cart.checked == true) {
                    //         totalSumAll += cart.productPrice * Number(cart.cartQty)
                    //     }
                    // })
                    return totalSumAll
                },
                
            },
            mounted: function () {
                this.init();
               // this.downTime();
            }
        })
    }
</script>

</html>