sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
							<!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/vant-ui.css" />
	<link rel="stylesheet" type="text/css" href="css/iconfont.css">
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<script src="js/vue.js"></script>
	<script src="js/vant-ui.js"></script>
	<script src="js/main.js"></script>
	<title></title>
</head>
<style>
	.zmq-flex {
		display: flex;
		position: fixed;
		width: 100%;
		height: 1rem;
		background-color: #fff;
		left: 0;
		bottom: 0;
		z-index: 2222;
		justify-content: space-between;
		padding-left: .2rem;
	}

	.total {
		font-size: .3rem;
        line-height: 1rem;
	}
    

	.zmq-downOrder {
		width: 2rem;
		height: 1rem;
		background-color: #005AA9;
		color: #fff;
		float: right;
		line-height: 1rem;
		text-align: center;
		font-size: .3rem;
    }
    .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-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /* border-bottom: 1px solid #F1F1F1; */
        margin: 0 .2rem;
        padding: .2rem 0;
    }
    .card-box:last-child {
        border-bottom: 0px solid #F1F1F1;
    }

    .card-list-left {
        display: flex;
        flex-direction: row;
    }
    .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;
    }
    .shop-add-left {
        display: flex;
        font-size: .28rem;
        flex-direction: row;
        align-items: center;
    }

    .address {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: .3rem;
        align-items: center;
        
    }

    .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;
         color: #333333;
         padding-left: .2rem;
    }
    .price{
        color: #fb5609;
        font-size:.4rem;
    }
    .price .icon{
        font-size: .25rem;
    }
    .card-logo {
        margin-right :.2rem;
       display: flex;
       align-items:center;
        
    }
</style>

<body>
	<div id="app" v-cloak>
           
		<div class="pageView gouwuche"  > 
            <div class="card" style="margin-top: .2rem">
                <div class="card-list">
                    <div class="card-box">
                        <div class="address" >
                            <div style="display: flex;  flex-direction: row;" > 
                                <div><van-icon name="location" /> </div>
                                <div style="font-size:.25rem;margin-left: .15rem;margin-right: .15rem" id="addressInfo"></div>
                            </div> 
                            <div  v-on:click="goaddress">
                                <img src="image/024.png" style="width: .19rem;height: .35rem;">
                            </div>
                        </div>
                            
                    </div>
                </div>
            </div>
            <div class="card"> 
                   
                <div class="card-list">
                    <div class="card-group">
                        <div class="card-list-left">    
                            <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> 
                    <div class="card-box"  v-for="(item,index) in list" :key="index"> 
                        <div class="card-list-left">
                            
                            <div class="card-img">
                                    <img   src="image/cart_goods.png"
                                    style="width:2rem;height:2rem">
                                
                            </div>
                            <div class="card-text">
                                <div class="card-title">
                                    <p class="card-title-p">{{ item.maktx }}</p>
                                </div>
                                
                                <div class="shop-add-left">
                                    <div class="price">
                                        <span class="icon">￥</span>240.88
                                    </div>
                                    <div>
                                        <div class="qty">x{{ item.purchaseNumber }} </div>
                                   
                                </div>
                            </div>
                        </div> 
				         </div>  
                    </div>
                </div>
            </div>
        </div>
		<!-- 购物车 价格全选 -->
		<div class="zmq-flex">
		 <div class="total">
             合计
         </div>
			<div style="display: flex;line-height: 1rem;padding-left: .1rem">
				<div class="zmq-downOrder" v-on:click="downOrder">
					立即下单
				</div>
			</div>
		</div>
	</div>
</body>
<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 () {
        var data = api.pageParam.data;
        api.addEventListener({
            name:'refresh_order_address'
        },function(ret){ 
            this.address=ret.value;
            //$forceUpdate();
            var title=this.address.contactsName+" " +this.address.contactsTel+" "  +this.address.province+" "+this.address.city+" "+this.address.county+" "+this.address.address;
            $api.text($api.byId("addressInfo"), title);

        });
		new Vue({
			el: '#app',
			data: {
                list:data,
                address:{
                    "province":11
                }
			},
			 
			methods: {
				init: function () {
					this.userId = $api.getStorage('userid');
					this.status = $api.getStorage('status');
					//this.getCarList();
                    //获取默认地址
                    if(this.address.mainId){
                        var title=this.address.contactsName+" " +this.address.contactsTel+" "  +this.address.province+" "+this.address.city+" "+this.address.county+" "+this.address.address;
                         $api.text($api.byId("addressInfo"), title);

                    }
                    else {
                        $api.text($api.byId("addressInfo"), "请选择收货地址");
                    }
				},
                goaddress: function () {
                    this.goWin('address_new', 'address_new_win.html');
                     
                },
				//  下单
				downOrder: function () {
					var count = 0, price = 0, hasChoose = new Array();
					this.list.map(function (cart, index) {
						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;
					}
					// if (this.status == 3) {
					// 	api.alert({
					// 		title: '系统提示',
					// 		msg: '门店已冻结,请找相关业务经理解冻！',
					// 	}, function (ret, err) {
					// 	});
					// 	return;
					// }
					var data = {
						"retailerId": this.userId,
						"amount": count,
						"orderType": "0",
						"bizCartDtoList": hasChoose,
						"type": "body",
						"url": "json"
					}, _this = this, url = "downOrderU";
					this.$post(url, data, function (ret) {
						if (ret.code == 0 || ret.code == '0') {
							if (!ret.message) {
								api.toast({
									msg: '下单成功'
								});
								api.sendEvent({
									name: 'refreshshopcart',
								});
                                //api.closeWin({});
								var msg = {
                                    id: ret.msg,
                                    type:'1'
								} 
								//_this.getCarList();
								setTimeout(function () {
									 _this.goWin("orderInfo", "orderInfo_win.html", msg);  
								}, 200);
							} else {
								api.toast({
									msg: ret.message
								});
							}
						}
					})
				},
				 
				/**
				 * 控制算出购物车的总金额
				 */
				getTotalMoney: function () {
					var totalCount = 0;
					var isok = true;
					this.list.map(function (cart, index) {
						if (cart.checked == true) {
							totalCount = totalCount + (parseInt(cart.purchaseNumber) ? parseInt(cart.purchaseNumber) : 0) * 1;
						} else {
							isok = false;
						}
					})
					if (isok == true) {
						this.allCheck = true;
					} else {
						this.allCheck = false;
					}
					this.totalCount = totalCount;
				},
			 
			},
			filters: {
				 
			},
			mounted: function () {
				 this.init();
			}
		})
	}
</script>

</html>