VIP32/购物商城/project/pages/shop/shop.vue

<template>
	<view class="shop">
		<van-cell :title="defaultAddr == '' ? '默认地址' : defaultAddr" is-link url="/pages/list/list" />
		<!-- 购物车卡片 -->
		<view class="list" v-for="(item,index) in shopList" :key="index">
			<van-row v-for="(item1,index1) in item.shopCartItemDiscounts[0].shopCartItems" :key="index1">
				<van-col span="2" class="checkbox1">
					<van-checkbox @click.native="basketIdThing" @change="selfChoose" :value="item1.isChecked" :data-select="item1.basketId"></van-checkbox>
				</van-col>
				<van-col span="22">
					<view class="title">{{item1.shopName}}</view>
					<van-card :num="item1.prodCount" :price="item1.price" :desc="item1.skuName" :title="item1.prodName"
						:thumb="item1.pic">
						<template slot="footer">
							<van-stepper :disable-input="true" :value="item1.prodCount" @change="onChange1" :data-param1="item1" />
						</template>
					</van-card>
				</van-col>
			</van-row>
		</view>
		<view class="empty"></view>
		<!-- 提交栏 -->
		<van-submit-bar :price="totlePrice" label="合计" button-text="提交订单" @submit="onSubmit">
			<van-checkbox :value="checkAll" @change="AllThing" class="all">全选</van-checkbox>
			<text class='clear' @click="clearList">清空</text>
		</van-submit-bar>

	</view>
</template>

<script>
	import {
		getAddressList
	} from "@/api/address.js";
	import {
		shopMain,
		delAll,
		totalPay,
		changeItem
	} from '@/api/shop.js';
	export default {
		data() {
			return {
				addressList: [], //所有地址
				defaultAddr: "",
				shopList: [], //购物车商品数组
				checkAll: false, //全选
				totlePrice: 0,//总价
				confirm:{
					basketId: 0,
					prodId: 0,
					skuId: 0,
					shopId: 0,
					count: 0,
					distributionCardNo: ""
				},
				basketIdList:[],//选中项的id
				counts:1
			}
		},
		onShow() {
			this.init();
			this.checkAll = false;
			this.totlePrice = 0;
		},
		methods: {
			// 单选
			selfChoose(event) {
				let shop = this.shopList[0].shopCartItemDiscounts[0].shopCartItems;
				setTimeout(()=>{
					if(this.basketIdList.length == shop.length) {
						this.checkAll = true;
					} else {
						this.checkAll = false;
					}
				},200)
				shop.forEach(item => {
					if(item.basketId == event.currentTarget.dataset.select) {
						item.isChecked = event.detail;
					}
				})
				// 强制更新
				this.$forceUpdate() 
			},
			// 单选点击事件
			basketIdThing(event) {
				if(event) {
					let ids =  event.currentTarget.dataset.select;
					this.basketIdList.push(ids);
					this.basketIdList = this.end(this.basketIdList)
				this.total(this.basketIdList);
				} else {
					this.basketIdList = [];
				}
			},
			// 列表过滤
			end(item) {
					for(var i=0;i<item.length;i++) {
						for(var j = i+1;j<item.length;j++) {
							if(item[i] == item[j]) {
								item.splice(j,1);
								item.splice(i,1);
								i--;
								break;
							}
						}
					}
				return item;
			},
			// 初始化方法
			async init() {
				let {
					data
				} = await getAddressList();
				this.addressList = data;
				for (let item in this.addressList) {
					if (this.addressList[item].commonAddr === 1) {
						let str = this.addressList[item];
						this.defaultAddr = str.province + " " + str.city + " " + str.area + " " + str.addr;
					}
				}
				let result = await shopMain({});
				this.shopList = result.data;
				this.shopList[0].shopCartItemDiscounts[0].shopCartItems.map((obj) => {
					obj.isChecked = false;
					return;
				})
			},
			// 步进器数值联动
			onChange1(event) {
				let value = event.detail;
				
				let item1 = event.currentTarget.dataset.param1;
				
				this.shopList[0].shopCartItemDiscounts[0].shopCartItems.forEach((item) => {
					if(item.basketId === item1.basketId) {
						item.prodCount = value;
					}
				})
				if(item1.prodCount == value) {
					return;
				}
				if(item1.prodCount > value) {
					this.counts = -1;
				}
				if(item1.prodCount < value) {
					this.counts = 1;
				}
				this.onStepper(item1);
			},
			// 全选
			AllThing(event) {
				this.checkAll = event.detail;
				this.basketIdList = [];
				let shop = this.shopList[0].shopCartItemDiscounts[0].shopCartItems;
				if(this.checkAll) {
					shop.forEach((obj) => {
						obj.isChecked = true;
						this.basketIdList.push(obj.basketId);
					})
					this.total(this.basketIdList)
				} else {
					shop.forEach((obj) => {
						obj.isChecked = false;
						this.basketIdList = [];
					})
					this.total(this.basketIdList)
				}
			},
			// 购物车添加修改后赋值
			onStepper(item) {
				this.confirm.basketId = item.basketId;
				this.confirm.prodId = item.prodId;
				this.confirm.skuId = item.skuId;
				this.confirm.shopId = item.shopId;
				this.confirm.count = this.counts;
				changeItem(this.confirm).then(res => {
					if(item.isChecked) {
						this.total(this.basketIdList)
					}
				}).catch(err => {
					console.log(err,'失败')
				})
			},
			// 计算价格
			total(item) {
				totalPay(item).then(res => {
					this.totlePrice = res.data.totalMoney * 100;
				}).catch(err => {
					console.log(err,'失败')
				})
			},
			// 清除购物车商品
			async clearList() {
				let result = await delAll(this.basketIdList);
				if(result.code == "00000") {
					uni.showToast({
						title:"清除成功",
						icon:"success",
						duration: 3000
					})
					this.checkAll = false;
					this.totlePrice = 0;
					this.init();
				}
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.list {
		padding: 20rpx;
	}

	::v-deep .van-col--2 {
		margin-top: 6rem;
	}

	.van-row {

		.van-col {
			.title {
				display: inline-block;
				height: 2.5rem;
				text-align: left;
				width: 100%;
				margin-top: 1rem;
				font-weight: 600;
			}

			.van-card {
				background-color: #fff;
			}
		}
	}
	.all {
		font-size: 36rpx;
	}
	.empty {
		height: 100rpx;
	}
	.clear {
		margin-left: 15rpx;
	}
</style>