qzw_xcx/pages/index/cart.vue

<template>
	<view style="height: 100vh;background-color: #F5F5F5;">
		  <van-skeleton  :loading="loading">
		 <view  class="titleright" @click="changeShop" v-if="isdelete">编辑</view>
		  <view class="titleright" @click="changeShop" v-else>取消</view>
		  <view v-if="list.length>0" style="margin-bottom: 150upx;">
			  <scroll-view  style="height: 88vh;" class="floor-list"
			  		   :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
			  		    :refresher-enabled="false">
			  		 <view class="cart-list">
			  		  <view style="display: flex;align-items: center;padding: 20upx 36upx;
			  		   border-bottom: 1px solid #F5F5F5;">
			  			  <image :src="pictureUrl+'/uploads/home/store/'+store.store_id+'/'+store.store_banner" style="border-radius: 50%;
			  width: 50upx;height: 50upx;"></image>
			  			  <span style="padding-left: 8upx;">{{store.store_name}}</span>
			  		  </view>
			  		  
			  		  <view v-for="(item,index) in list" :key="index" class="shoplist" style="background-color: #fff;">
			  			  <view style="flex: 1;border-radius: 100%;">
			  				<van-checkbox-group :value="checkboxList" @change="checkboxChange()">
			  				    <van-checkbox  checked-color="#D9332E" :name="index"></van-checkbox>
			  				  </van-checkbox-group> 
			  			  </view>
			  			  <view style="flex: 15;">
			  			  <van-card
			  			    title-class="changewidth"
			  				price-class ="priceClass"
			  			    :price="item.goods_price"
			  			    :desc="item.descire+'X'+item.goods_num"
			  			    :title="item.desarray"
			  			    :thumb="pictureUrl + '/uploads/home/store/goods/' + item.goods_image.substr(0, item.goods_image.indexOf('\_')) + '/' + item.goods_image"
			  			  >
			  			    <view slot="footer">
			  				 <!-- <uninumberbox :min="1":isMax="item.number>=item.stock?true:false"
			  				 	:isMin="item.number===1":max="item.stock" :value="item.goods_num" @change="bindChange(item)"/> -->
			  				 <uninumberbox
			  				    class="step"
			  				 	:min="1" 
			  				 	:value="item.goods_num"
			  					:index="index"
			  					@eventChange="bindChange"
			  				 ></uninumberbox>
			  			    </view>
			  			  </van-card>
			  			  </view>
			  		  </view>
			  		 </view>
			  		 </scroll-view>
		  </view>
		  <view v-else>
			  <view style="margin: 120upx auto;text-align: center;">
				   <van-icon size="160rpx" color="#909399" name="cart-o" />
				   <view @click="gostore" style="text-align: center;
				   color: #909399;border: 1px solid #909399; padding: 5upx 10upx;
				   margin: 10upx auto;width: 150rpx;">
						去逛逛
				  </view>
			  </view>
		  </view>
		   
		 <view style="position: fixed;bottom: 0;border-top:1px solid #eee;height: 8vh;">
			 <!--    :price-class="isdelete? '':'isdiaplay' " -->
		 <van-submit-bar
			v-if="isdelete"
		   :price="prices"
		   :button-text="listip"
		   @submit="onClickButton"
		   :tip="true"
		 >
		 <van-checkbox checked-color="#D9332E" :value="isAll" shape="round" @change="onChange">
		  全选
		 </van-checkbox>
	
		 </van-submit-bar>
		 
		 <van-submit-bar
		   bar-class="betweenclass"	
		   v-if="!isdelete"
		   :button-text="listip"
		   @submit="onClickButton"
		   :tip="true"
		 >
		 <van-checkbox checked-color="#D9332E" :value="isAll" shape="round" @change="onChange">
		  全选
		 </van-checkbox>
		 	
		 </van-submit-bar>
		 
		 </view>
		 
		 </van-skeleton>
	</view>
</template>

<script>
	import uniNavBar from '@/component/uni-nav-bar/uni-nav-bar.vue'
	import uninumberbox  from '@/component/uinNumberCart.vue'
	export default {
		components: {
			uniNavBar,
			uninumberbox 
		},
		data() {
			return {
				firstloading: 0,
				loading: true,
				ismax: 0,
				lengthnumber: 0,
				pricelist:[],
				pictureUrl: this.pictureUrl,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				nums: 0,
				store: {},
				ispull:　true,
				page:　1,
				store_id: 0,
				prices: 0,
				listip: '',
				isdelete: true,
				isAll: false,
				checkboxList:[],
				list:[],
			}
		},
		// 隐藏分享菜单
		onLoad: function (options) {
			this.store_id = options.store_id;
			this.listip = "结算" + '(' + this.nums + ')';
			this.getshoplist();
	    },
		methods: {
			// 返回酒店
			gostore() {
				uni.navigateBack();
			},
			onClickButton(e) {
				let array = [];
				if(this.pricelist.length == 0) {
					if(this.isdelete) {
						this.$msg('请选择商品');
					}else {
						this.$msg('请选择删除商品');
					}
					return;
				}
				this.pricelist.forEach(item => {
				  array.push(item.goods_id)
				})
				let ids = array.toString();
				if(this.isdelete) {
					// 结算
					this.getorderId(); // 保存订单生成订单id 购买
				}else {
					this.deleteshop(ids);
				}
			},
			// 保存订单生成订单id
            getorderId() {
				let goods = [];
				let prices = this.prices;
				this.pricelist.forEach((item,index) => {
					 goods.push({});
					 goods[index].goods_id = item.goods_id;
					 goods[index].buy_num = item.goods_num;
				 })
				 this.request({
					 url:'/v1/order/save_og',
					 method: 'post',
					 data: {
						 store_id: this.store.store_id,
						 goods: JSON.stringify(goods)
					 },
					 success:(res) => {
						 if(res.data.code == 1000) {
							 let order_id = res.data.data.order_id;
							 let store = this.store.store_id;
							 uni.navigateTo({
							   url: `/pages/index/sureBuy?store=${store}&prices=${prices}&order_id=${order_id}`
							 });
						 }
						
					 }
				 })
			},
			// 购物车删除
			deleteshop(ids) {
				this.request({
					url: '/v2/order/cart_drop',
					method: 'post',
					data: {
						ids: ids,
						store_id: this.store_id
					},
					success: () => {
						this.nums = 0;
					    this.listip = "删除" + '(' + this.nums + ')';
						this.list = [];
						this.checkboxList = [];
						this.getshoplist();
					}
				})
			},
			// 滚动到顶部
			upper(e) {
				console.log("顶部")
			},
			
			// 滚到底部
			lower(e) {
				// this.page = this.page + 1;
				// if(this.ispull) {
				// 	this.getshoplist();
				// }
			},
			
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			changeShop() {
				this.isdelete = !this.isdelete;
				
				 this.listip = this.isdelete ? "结算" + '(' + this.nums + ')' :'删除'+ '(' + this.nums + ')';
			},
			getshoplist() {
				this.loading = true;
				this.request({
					url: '/v2/order/cart',
					method: 'post',
					data: {
						store_id: this.store_id,
						page: this.page
					},
					success: (res) => {
						let { data } = res.data;
						 data.cart_list.forEach(item => {
							 let arr = item.goods_name.split(' ');
							 item.desarray = arr[0];
							 item.descire = item.goods_name.replace(arr[0], '');
						 })
						if(data.cart_list.length < 10) {
							this.ispull = false;
						}
						this.list = this.list.concat(data.cart_list);
						this.store = data.store;
						if(this.firstloading == 0) {
							this.loading = false;
						}
						this.firstloading = 1;
					}
				})
			},
			// 返回上层
			goback() {
					uni.navigateBack(); 
			},
			
			// 数量累加
			bindChange(e) {
				 this.list[e.index].goods_num = e.number;
				 this.checkoutprice();
			},
			// 单选
			checkboxChange(e) {
			  this.checkboxList = []
			  e.detail.forEach((item, idx) => {
				  this.$set(this.checkboxList, idx, item)
			  })
			  let array = this.list;
			  let price = [];
			  this.checkboxList.forEach(item => {
				  price.push(array[item])
			  })
			  this.pricelist = price;
			  let num = 0;
			  this.pricelist.forEach(item => {
				  num += item.goods_num;
			  })
			  console.log(num);
			  this.nums = num;
			  this.lengthnumber = this.pricelist.length;
			   this.listip = this.isdelete ? "结算" + '(' + this.nums + ')' :'删除'+ '(' + this.nums + ')';
			  this.checkoutprice();
			   },
			 // 计算价格 
			 checkoutprice() {
				 let total = 0;
				 let num = 0
				  this.pricelist.forEach(item =>　{
					  total += item.goods_price * item.goods_num;
					  num += item.goods_num;
				  })
				  this.nums = num;
				  this.prices = Number(total.toFixed(2))*100;
				  this.listip = this.isdelete ? "结算" + '(' + this.nums + ')' :'删除'+ '(' + this.nums + ')';
				  
			 },
			// 全选
			onChange(a) {
				this.isAll = !this.isAll;
				let items = this.list;
				if(this.isAll) {
					items.forEach((item, idx) => {
						this.$set(this.checkboxList, idx, idx.toString())
					})
					 this.pricelist = this.list;
					 let num = 0
					 this.pricelist.forEach(item => {
					 				  num += item.goods_num;
					 })
					 this.nums = num;
					 this.listip = this.isdelete ? "结算" + '(' + this.nums + ')' :'删除'+ '(' + this.nums + ')';
					 this.checkoutprice();
				}else {
					for (let i = 0, lenI = items.length; i < lenI; ++i) {
						  this.checkboxList = [];
						  this.pricelist = [];
						  this.nums = 0;
						  this.listip = this.isdelete ? "结算" + '(' + this.nums + ')' :'删除'+ '(' + this.nums + ')';
						  this.checkoutprice();
					}
					
				}
				
			}
		}
	}
</script>

<style>
	.betweenclass {
		display: flex;
		justify-content: space-between!important;
	}
	.uniNavBar {
	  height: 100%;	
	}
	.cart-list {
		background-color: #fff;
		/* padding: 0 36upx; */
	}
	.titleright {
		text-align: right;
		padding: 10upx 30upx;
		background: #fff;
		border-bottom: 1px solid #eee;
		height: 4vh;
		
	}
	.changewidth {
		color: #303133;
		font-size: 32upx;
		font-weight: 100!important;
		width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

	}
	
	.van-card {
		background-color: #fff!important;
	}
    .shoplist {
		display: flex;
		padding: 0 35upx;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 25upx;
	}
		
	.checklabel {
		transform:scale(0.7);
		border-radius: 100%;
	}
	.checkboxteil {
		transform:scale(0.7);
		border-radius: 100%;
	}
	.uni-numbox {
		position: static!important;
		float: right;
	}
	
	.isdiaplay .van-submit-bar__text {
		visibility: hidden;
	}
	.isdiaplay {
		visibility: hidden;
	}
</style>