sailun
/
sailun-shop


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
							<!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-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') {
							if (!ret.message) {
								api.toast({
									msg: '下单成功'
								});
								api.sendEvent({
									name: 'refushCarList',
								});
								var msg = {
									id: ret.msg
								}
								_this.getCarList();
								setTimeout(function () {
									_this.goWin("orderInfo", "orderInfo_win.html", msg);
								}, 200);
							} else {
								api.toast({
									msg: ret.message
								});
							}
						}
					})
				},
				//  控制购物车对应商品数量
				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>