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="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:1;position: relative;overflow: hidden;">
								<van-card style="width: 100%;"
									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">
								</van-card>
								<uninumberbox class="step" :min="1" :value="item.goods_num" :index="index" @eventChange="bindChange"></uninumberbox>
							</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;">
				<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) {
		if(options.store_id){
			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: (res) => {
					console.log(res);
					if(res.data.code==1000){
						this.nums = 0;
						this.listip = '删除' + '(' + this.nums + ')';
						this.prices=0;
						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;
					this.store = data.store;
					data.cart_list.forEach(item => {
						let arr = item.goods_name.split(' ');
						item.desarray = arr[0];
						item.descire = item.goods_name.replace(arr[0], '');
					});
					this.list =data.cart_list;
					console.log(this.list);
					this.loading = false;
				}
			});
		},
		// 返回上层
		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;
			});
			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: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.van-card {
	background-color: #fff !important;
	overflow: hidden;
}
.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 {
	left: auto !important;
	right: 0 !important;
}

.isdiaplay .van-submit-bar__text {
	visibility: hidden;
}
.isdiaplay {
	visibility: hidden;
}
</style>