qzw_xcx/pages/index/cart.vue

<template>
	<view style="height: 100vh;background-color: #F5F5F5;">
		 <view class="titleright" @click="changeShop" v-if="isdelete">编辑</view>
		  <view class="titleright" @click="changeShop" v-else>取消</view>
		  <view v-if="list.length>0">
			  <scroll-view  style="height: 100vh;" class="floor-list"
			  		   :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
			  		   refresher-enabled="true">
			  		 <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_logo" 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.desarray[1]+'X'+item.goods_num"
			  			    :title="item.desarray[0]"
			  			    :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 style="text-align: center;color: #909399;"> 去买点什么</view>
			  </view>
		  </view>
		 <view style="position: fixed;bottom: 0;">
		 <van-submit-bar
		   :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>
		 </view>
		 
	</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 {
				ismax: 0,
				lengthnumber: 0,
				pricelist:[],
				pictureUrl: this.pictureUrl,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				store: {},
				ispull:　true,
				page:　1,
				store_id: 0,
				prices: 0,
				listip: '',
				isdelete: true,
				isAll: false,
				checkboxList:[],
				list:[]
			}
		},
		// 隐藏分享菜单
		onLoad: function (options) {
			console.log(options)
			this.store_id = options.store_id;
			this.listip = '结算'+ (this.lengthnumber);
			this.getshoplist();
	    },
		methods: {
			onClickButton(e) {
				let array = [];
				this.pricelist.forEach(item => {
				  array.push(item.goods_id)
				})
				let ids = array.toString();
				if(this.isdelete) {
					if(this.pricelist.length == 0) {
						this.$msg('请选择商品');
						return;
					}
					// 结算
					uni.navigateTo({
					   url: './sureBuy'  // 确认订单
					})
				}else {
					if(ids == '') {
						this.$msg('请选择删除商品');
						return;
					}
					// 删除
					this.deleteshop(ids);
				}
			},
			deleteshop(ids) {
				this.request({
					url: '/v2/order/cart_drop',
					method: 'post',
					data: {
						ids: ids,
						store_id: this.store_id
					},
					success: () => {
						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;
				console.log(this.lengthnumber)
				this.listip = this.isdelete ? "结算" + (this.lengthnumber) :'删除'+ (this.lengthnumber);
			},
			getshoplist() {
				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 => {
							 item.desarray = item.goods_name.split(' ')
						 })
						this.list = data.cart_list;
						this.store = data.store;
						//console.log(data.cart_list[0].goods_name.split(' '));
					}
				})
			},
			// 返回上层
			goback() {
					uni.navigateBack(); 
			},
			// 编辑
			deleteShop() {
				
			},
			// 数量累加
			bindChange(e) {
				 console.log(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
			  this.lengthnumber = this.pricelist.length;
			  this.listip = this.isdelete ? "结算" + (this.lengthnumber) :'删除'+ (this.lengthnumber);
			  this.checkoutprice();
			   },
			 // 计算价格 
			 checkoutprice() {
				 let total = 0;
				 console.log(this.pricelist)
				  this.pricelist.forEach(item =>　{
					  total += item.goods_price * item.goods_num;
				  })
				  this.prices = Number(total.toFixed(2))*100;
				  
			 },
			// 全选
			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;
					 this.lengthnumber = this.pricelist.length;
					 this.listip = this.isdelete ? "结算" + (this.lengthnumber) :'删除'+ (this.lengthnumber);
					 this.checkoutprice();
				}else {
					for (let i = 0, lenI = items.length; i < lenI; ++i) {
						 this.checkboxList = []
						  this.pricelist = this.list;
						  this.lengthnumber = 0;
						  this.listip = this.isdelete ? "结算" + (this.lengthnumber) :'删除'+ (this.lengthnumber);
						  this.checkoutprice();
					}
					
				}
				
			}
		}
	}
</script>

<style>
		
	.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;
		
	}
	.changewidth {
		color: #303133;
		font-size: 32upx;
		font-weight: 100!important;
		width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

	}
	.priceClass {
		color:#303133!important;
		font-weight: 100!important;
		font-size: 36upx;
	}
	.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;
	}
</style>