sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
							<!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;
		}
		.allcheck {
			font-size: .3rem;
			line-height: 1rem;
			margin-left: -2.8rem;
		}
		.zmq-price {
		}
		.zmq-downOrder {
			width: 2rem;
			height: 1rem;
			background-color: #005AA9;
			color: #fff;
			float: right;
			line-height: 1rem;
			text-align: center;
			font-size: .3rem;
		}
	</style>
	<body>
		<div id="app" v-cloak>
			<div class="pageView gouwuche">
				<div class="gouwucheBackground" style="padding-bottom:.5rem">
					<div class="cardGouwuche" v-show="list.length > 0">
						<div class="item flex jlr a-center" v-for="(item,index) in list">
							<van-checkbox v-model="item.checked" style="z-index : 2222" v-on:change="getTotalMoney"></van-checkbox>
							<div class="flex jlr a-center" style="flex: 1; padding-left: 0.3rem;">
								<div class="image"><img src="img/tire.png">
								</div>
								<div class="infos flex col jlr">
									<div class="flex a-center jlr">
										<h2>{{ item.maktx }}</h2>
										<van-icon name="delete" size="0.3rem" v-on:click="delCarMatax(item.id)"></van-icon>
									</div>
									<div class="setp flex jlr">
										<div class="left flex a-center j-center" v-on:click="minusSign(index,0)">
											-
										</div>
										<div class="value flex a-center j-center">
											{{item.purchaseNumber ? item.purchaseNumber : 0}}
										</div>
										<div class="right flex a-center j-center" v-on:click="minusSign(index,1)">
											+
										</div>
									</div>
								</div>
							</div>
						</div>
<!--						<div class="cardFooter flex a-center jlr">
							<h4>优惠劵</h4>
							<div class="flex a-center gouwuquan">
								20元优惠卷 <i class="iconfont icon-right"></i>
							</div>
						</div>-->
					</div>
					<div v-show="list.length == 0" style="text-align:center">
						<img src="./image/noData.png" style="margin:2rem auto" />
					</div>
				</div>
			</div>
			<!-- 购物车 价格全选 -->
			<div class="zmq-flex">
				<van-checkbox v-model="allCheck" v-on:click="changeAllCheck"></van-checkbox>
				<p class="allcheck">
					全选
				</p>
				<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() {
			new Vue({
				el : '#app',
				data : {
					list : [],
					startTimeShow : false,
					startCurrentDate : new Date(),
					cartList : [], // 购物车详情
					allCheck : false, // 全选
					totalCount : 0, // 总价
					checked : false,

				},
				watch : {
//					"allCheck" : function(nw, ow) {
//						if (nw == false) {
//							this.list.map(function(cart, index) {
//								cart.checked = false;
//							})
//							this.totalCount = 0;
//						} else {
//							this.list.map(function(cart, index) {
//								cart.checked = true;
//							})
//						}
//					},
				},
				methods : {
					init : function() {
						this.userId = $api.getStorage('userid');
						this.status = $api.getStorage('status');
						this.getCarList();
					},
					//  获取购物车列表
					getCarList : function() {
						var url = "getCarListU", _this = this, data = {
							"storeId" : this.userId,
							"url" : "json",
							"type" : "body"
						};
						this.$post(url, data, function(ret) {
							if (ret.code == 0 || ret.code == '0') {
							    ret.data.map(function(store,index){
							       store.checked = false;
							    })
								_this.list = ret.data;
							}
						})
					},
					//  控制数量
					minusSign : function(index, type) {
						var number = this.list[index].purchaseNumber ? this.list[index].purchaseNumber : 0;
						if (type == 0) {
							// -
							if (number > 1) {
								this.$set(this.list[index], "purchaseNumber", (parseInt(number) - 1));
							}else{
								this.list[index].purchaseNumber=1;
								this.showToast("最少购买1件")
							}
						} else {
							this.$set(this.list[index], "purchaseNumber", (parseInt(number) + 1));
						}
						this.getTotalMoney();
						var data = {
								"url": "json",
								"type": "body",
								"id": this.list[index].id,
								"purchaseNumber": this.list[index].purchaseNumber
						}
						_this = this,
								url = "updateCarNum";
						this.$post(url, data, function(ret) {})
					},
					//  下单
					downOrder : function() {
						var count = 0, price = 0, hasChoose = new Array();
						this.list.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;
						}
						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') {
								api.toast({
									msg : '下单成功'
								});
								api.sendEvent({
								    name: 'refushCarList',
								});
								var msg = {
									  id : ret.msg
								}
								_this.getCarList();
								setTimeout(function() {
									  _this.goWin("orderInfo", "orderInfo_win.html", msg);
								}, 200);
							}
						})
					},
					//  控制购物车对应商品数量
					openTimer : function() {
						this.startTimeShow = true
					},
					startConfirm : function(e) {
						this.startTimeShow = false
					},
					/**
					 * 控制算出购物车的总金额
					 */
				    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;
				    },
				    /**
				     * 全选改变
				     */
				    changeAllCheck : function(){
				        if (this.allCheck == false) {
							this.list.map(function(cart, index) {
								cart.checked = false;
							})
							this.totalCount = 0;
						} else {
							this.list.map(function(cart, index) {
								cart.checked = 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: '删除成功',
											 });
											 api.sendEvent({
			 								    name: 'refushCarList',
			 								});
											 setTimeout(function(){
                           _this.getCarList();
											 },500)
										 }
				        })
				    }
				},
				filters : {
					timer : function(v) {
						if (v) {
							var y = v.getFullYear()
							var m = v.getMonth() + 1
							var d = v.getDate()
							return y + '-' + m + '-' + d
						} else {
							return '请选择'
						}
					}
				},
				mounted : function() {
					this.init();
				}
			})
		}
	</script>
</html>