sailun
/
sailun-shop


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="../../css/shopcar.css">	
		<link rel="stylesheet" type="text/css" href="../../css/html.css">
		<script type="text/javascript" src="../../script/auto-size.js"></script>
		<style>
			body, html {
				padding-bottom: 1rem;
			}
			.lb {
				display: flex;
				display: -webkit-flex;
			}
			.down {
				background-color: #007f86 !important;
			}
			.lb .mid {
				width: 70%;
			}
			.aui-choose {
				width: 40px;
				height: 40px;
			}
			.delete, .cancel {
				width: 49.68% !important;
				margin-left: 1px;
			}
			.delete {
				background-color: #009944 !important;
			}
			.cancel {
				background-color: #b5b6b6 !important;
			}
			.aui-checkbox-div {
				text-align: center;
				margin-right: 0px;
				margin-top: 0px;
			}
			.zmq-padding-doneBtn {
				margin-top: 8px;
			}
			.fix_bottom .zjq {
				margin-top: 10px;
			}
			[v-cloak] {
				display: none;
			}
			.zmq-img-nodata {
			    margin-top: 2rem;
			}
			.aui-radio, .aui-checkbox {
			    width: 0.8rem !important;
			    height: 0.8rem !important;
			}
		</style>
	</head>
	<body><!-- v-on:click="lookInfo(item.id)" -->
		<div id="app" v-cloak>
			<img v-show="shopCarList.length == 0" src="../../image/nodata.png" class="zmq-img-nodata"/>
			<div class="lb zmq-width-90 zmq-radius-5 zmq-padding-left-10" v-for="(item,index) in shopCarList">
				<img v-lazy ="item.materialDto.simpleImgPath" class="spt" />
				<div class="mid">
					<p class="name">
						{{item.materialDto.materialName}}
					</p>
					<p class="color zmq-text-msg">
						{{item.materialDto.brand}}
					</p>
					<div class="jj">
						<span class="jia" v-on:click.stop="changeNum('-',index,item.amount)">-</span>
						<input class="num" v-bind:value="item.amount">
						<span class="jian" v-on:click.stop="changeNum('+',index,item.amount)">+</span>
					</div>
				</div>
				<div v-show="edit == true" class="aui-checkbox-div zmq-position-absolute" v-on:click="chooseThis(item.checked,index)">
					<span class="aui-checkbox" v-bind:class="item.checked == true ? 'check' : ''" class="check">
						<input type="checkbox" class="input_check" checked="checked"/>
						<label for="check1"></label> 
					</span>
				</div>
			</div>
			<div class="fix_bottom" v-if="edit == false">
				<div class="zjq zmq-flex zmq-width-70 zmq-flex-end">
					<p class="p1 zmq-flex-1 zmq-line-1">
						合计: {{shopCarList.length}} 条记录
					</p>
					<!--<p class="zmq-flex-1 zmq-line-1">
						总共: <em class="zmq-text-msg">{{totalNum}}</em> 件商品
					</p>-->
				</div>
				<a v-on:click="downOrder"> <em class="zmq-bg-noraml zmq-text-white zmq-float-right zmq-padding-doneBtn zmq-margin-right-10 zmq-radius-5 zmq-position-absolute">生成订单</em> </a>
			</div>
			<div class="fix_bottom" v-else>
				<a id="js" class="delete" v-on:click="deleteCar">删除所选</a>
				<a id="js" class="cancel" v-on:click="cancel">取消</a>
			</div>
		</div>
		<script src="../../script/api.js" type="text/javascript"></script>
		<script type="text/javascript" src="../../script/vue.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" src="../../script/vue-lazyload.js"></script>
		<script type="text/javascript">
			apiready = function() {
				new Vue({
					el : '#app',
					data : {
						// 获取列表
						getShopCarUrl : 'shopCarListUrl',
						//  购物车列表
						shopCarList : [],
						retariler_id : '',
						//  下单
						downOrderUrl : 'downOrderUrl',
						//  总件数
						totalNum : 10,
						//  删除购物车
						deleteUrl : 'deleteCars',
						//  是否编辑购物和
						edit : false,
						//  获取购物车类型 1普通订单  0活动订单
						tabIndex : 1,
					},
					methods : {
						init : function() {
							var _this = this;
							this.retariler_id = $api.getStorage("retailerid");
							//  点击编辑购物车
							this.addEvent("editCar", function(ret) {
								_this.edit = !_this.edit;
							})
							this.getCarM();
							this.configHeaderRefush(function() {
								_this.getCarM();
							})
							this.addEvent("refushCar12",function(ret){
							     _this.tabIndex = ret.value.index;
							     _this.getCarM();
							})
						},
						//  获取购物车
						getCarM : function() {
							var _this = this;
							var data = "?retailer_id="+ this.retariler_id + '&cart_type=' + this.tabIndex;
							this.$getadd(this.getShopCarUrl,data, function(ret) {
								if (ret.list.length > 0) {
									_this.shopCarList = ret.list;
									_this.agentId = ret.list[0].agentId;
									var totalNum = 0;
									//  循环取出件数
									ret.list.map(function(item, index) {
										totalNum += item.amount;
									})
									_this.totalNum = totalNum;
								}else{
								   _this.shopCarList = ret.list;
								}
							});
						},
						//  查看详情
						lookInfo : function(id) {
							if (this.edit == true) {
								return;
							}
							var param = {
								id : id
							}
							this.goWin('storeInfo_win', '../store/storeInfo_win.html', param);
						},
						//  改变数目
						changeNum : function(type, index, amout) {
							if (type == '+') {
								this.$set(this.shopCarList[index], "amount", amout + 1);
								this.totalNum = this.totalNum + 1;
							} else {
								if (amout > 1) {
									this.$set(this.shopCarList[index], "amount", amout - 1);
									this.totalNum = this.totalNum - 1;
								}
							}
						},
						//  开始下单  {"retailerId":"212","amounr":100,"bizCartDtoList":[{"id":121...},{"id":12..}] 这里把购物车的列表给我}
						downOrder : function() {
						    if(this.shopCarList.length == 0){
						       api.toast({
	                               msg:'暂无商品'
                               });
                               return;
						    }
							var data = {
								retailerId : this.retariler_id,
								amount : this.totalNum,
								bizCartDtoList : this.shopCarList,
//								agentId : this.agentId,
								orderType : (this.tabIndex == "1" ? 0 : 1),
								url : 'json',
								type : 'body',
							}, url = this.downOrderUrl, _this = this;
							this.$post(url, data, function(ret) {
								if (ret.code == 0) {
									_this.showToast("下单成功");
									_this.sendEvent("refushCar");
									setTimeout(function() {
									    _this.totalNum = 0;
										_this.getCarM();
									}, 200);
								}
							});
						},
						//  编辑选择这个商品
						chooseThis : function(check, index) {
							var checked = check == true ? false : true;
							this.$set(this.shopCarList[index], "checked", checked);
						},
						//  删除购物车记录
						deleteCar : function() {
							var chooseid = new Array();
							this.shopCarList.map(function(item, index) {
								if (item.checked == true) {
									chooseid.push(item.id);
								}
							});
							if (chooseid.length == 0) {
								return;
							}
							var data = {
								id : chooseid,
								url : 'json',
								type : 'body',
								yy : 'keng'
							}, url = this.deleteUrl, _this = this;
							this.$post(url, data, function(ret) {
								if (ret.code == 0) {
									_this.showToast("删除购物车记录成功");
									_this.sendEvent("refushCar");
									setTimeout(function() {
										_this.getCarM();
									}, 200);
								}
							});
						},
						// 取消雄安但
						cancel : function() {
							this.edit = false;
						}
					},
					mounted : function() {
					    Vue.use(VueLazyload,{
				        preLoad: 1.3,
                        error: '../../image/noimg.png',
                        loading: '../../image/load.gif',
                        attempt: 1,
				    });
						this.init();
					}
				})
			}
			
		</script>
	</body>
</html>