[vue] 購物車界面模板效果

1、效果圖如下：

2、代碼.vue文件: 使用的 ui 框架 vant

2.1 組件：

<template>
	<div class="cart flex flex-col">
		<div class="flex-auto scroll">
			<div class="warp">
				<div class="goods-card" v-for="(val, key) in cartList" :key="key">
					<div class="goods-title flex flex-align-center">
						<van-checkbox icon-size="13px" v-model="val.checked" class="checkbox" @click="onShopNameSel(key)"></van-checkbox>
						<van-icon name="shop-o" />
						<span>{{ val.name }}</span>
						<van-icon name="arrow" class="color-label" />
					</div>
					<div class="content-card" v-for="(v, k) in val.list" :key="k">
						<div class="flex flex-align-center">
							<van-checkbox icon-size="13px" v-model="v.checked" class="checkbox" @click="onShopChildrenSel(key, k)"></van-checkbox>
							<div class="img-box"><img :src="v.imgUrl" /></div>
							<div class="info-box flex-auto">
								<div class="van-ellipsis title">{{ v.name }}</div>
								<div class="unit color-label">{{ v.specs }}</div>
								<div class="price color-red">￥{{ v.price }}</div>
								<div class="btn">x{{ v.num }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer-box flex flex-align-center">
			<van-checkbox icon-size="13px" v-model="allChecked" class="checkbox" @click="onGoodsAllChecked">全選</van-checkbox>
			<div class="flex-auto">
				商品總金額:
				<em class="color-red">￥{{ allMoney }}</em>
				<van-button type="warning" size="small" round>提交({{ allNum }})</van-button>
			</div>
		</div>
	</div>
</template>

2.2 邏輯：

<script>
import { getCartList } from '@/pages/mock';
export default {
	name: 'carts',
	data() {
		return {
			cartList: [],
			allMoney: 0,
			allNum: 0,
			allChecked: false
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			getCartList(res => (this.cartList = res));
		},
		onShopNameSel(index) {
			let list = this.cartList[index]['list'],
				len = list.length;
			if (this.cartList[index]['checked']) {
				for (let i = 0; i < len; i++) {
					list[i]['checked'] = false;
				}
			} else {
				for (let i = 0; i < len; i++) {
					list[i]['checked'] = true;
				}
			}
			this.cartList[index]['checked'] = !this.cartList[index]['checked'];
			this.isAllChecked();
			this.setCallMethods();
		},
		onShopChildrenSel(key, k) {
			let list = this.cartList[key]['list'],
				len = list.length;
			if (list[k]['checked']) {
				this.cartList[key]['checked'] = false;
				this.allChecked = false;
				list[k]['checked'] = !list[k]['checked'];
			} else {
				list[k]['checked'] = !list[k]['checked'];
				let flag = true;
				for (let i = 0; i < len; i++) {
					if (list[i]['checked'] == false) {
						flag = false;
						break;
					}
				}
				flag == true ? (this.cartList[key]['checked'] = true) : (this.cartList[key]['checked'] = false);
			}
			this.isAllChecked();
			this.setCallMethods();
		},
		onGoodsAllChecked() {
			let flag = true;
			if (this.allChecked) {
				flag = false;
			}
			for (let i = 0, len = this.cartList.length; i < len; i++) {
				this.cartList[i]['checked'] = flag;
				let list = this.cartList[i]['list'];
				for (let k = 0, len1 = list.length; k < len1; k++) {
					list[k]['checked'] = flag;
				}
			}
			this.allChecked = !this.allChecked;
			this.setAllMoney();
			this.setAllNum();
		},
		isAllChecked() {
			let flag = true;
			for (let i = 0, len = this.cartList.length; i < len; i++) {
				if (this.cartList[i]['checked'] == false) {
					flag = false;
					break;
				}
			}
			flag == true ? (this.allChecked = true) : (this.allChecked = false);
		},
		setAllMoney() {
			this.setCompute(this, 'allMoney', 'money', this.cartList);
		},
		setAllNum() {
			this.setCompute(this, 'allNum', 'num', this.cartList);
		},
		setCompute(_this, attr = 0, type, arr = []) {
			_this[attr] = 0;
			for (let i = 0, len = arr.length; i < len; i++) {
				let list = arr[i]['list'];
				list.map((item, index) => {
					if (list[index]['checked']) {
						type === 'money' ? (_this[attr] += parseFloat(item.price) * parseFloat(item.num)) : (_this[attr] += parseFloat(item.num));
					}
				});
			}
		},
		setCallMethods() {
			this.setAllMoney();
			this.setAllNum();
		}
	}
};
</script>

2.3 樣式：

/**
公用樣式 
.flex {display: flex}
.flex-col {flex-direction: column;}
.flex-align-center {align-items: center;}
.flex-auto {flex: 1}
.scroll {overflow: auto;}
**/
<style lang="less" scoped>
.cart {
	height: calc(100% - 46px);
	overflow: hidden;
	.warp {
		padding: 10px;
		.goods-card {
			border-radius: 5px;
			background-color: white;
			overflow: hidden;
			margin-bottom: 10px;
			.goods-title {
				background-color: white;
				padding: 0 10px;
				height: 35px;
				line-height: 35px;
				font-size: 14px;
				i {
					font-size: 15px;
					margin-right: 3px;
				}
				.checkbox {
					padding-right: 10px;
				}
			}
			.content-card {
				width: 100%;
				padding: 10px 10px 0;
				.checkbox {
					padding-right: 10px;
				}
				.img-box {
					width: 77px;
					height: 77px;
					img {
						border-radius: 5px;
						width: 100%;
						height: 100%;
					}
				}
				.info-box {
					font-size: 13px;
					line-height: 24px;
					padding-left: 8px;
					flex-shrink: 0;
					overflow: hidden;
					position: relative;
					.unit {
						color: #858685;
						background-color: #eeeeee;
						display: inline-block;
						padding: 0px 5px;
					}
					.btn {
						position: absolute;
						right: 0;
						bottom: 0;
						color: #858685;
					}
				}
				&:last-of-type {
					margin-bottom: 0px;
					padding-bottom: 10px;
				}
			}
			&:last-of-type {
				margin-bottom: 0px;
			}
		}
	}
	.footer-box {
		padding: 0 10px;
		border-top: 1px solid #f0f0f0;
		height: 50px;
		line-height: 50px;
		text-align: right;
		background-color: white;
		font-size: 14px;
		color: #a8a8a8;
		.checkbox {
			padding-left: 10px;
		}
		.color-black {
			color: #333333;
		}
		& /deep/ .van-checkbox__label {
			font-size: 12px !important;
			color: #666666;
		}
		button {
			margin-left: 10px;
		}
	}
}
</style>

3、模擬數據格式

export function getCartList(callback) {
	callback([{
			name: '北海新城',
			checked: false,
			shopId: 1,
			list: [{
					imgUrl: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1483742938,2606568470&fm=111&gp=0.jpg',
					name: '這些魚是哪裏',
					specs: '11.2-1斤',
					price: 6,
					num: 1,
					checked: false,
					id: 11
				},
				{
					imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579245868422&di=05c3ba0fcaf83497f23dfb245af6077f&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F20%2F43%2F01300000414379126295437960262.jpg',
					name: '深海魚',
					specs: '11.2-1斤',
					price: 2,
					num: 2,
					checked: false,
					id: 12
				}
			]
		},
		{
			name: '北海老城',
			checked: false,
			shopId: 2,
			list: [{
					imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579245868422&di=ff68ee19c2fdce2c75e19fa9a9cf593a&imgtype=0&src=http%3A%2F%2Fcaipubaodian.oss-cn-hangzhou.aliyuncs.com%2Fd%2Ffile%2Fmenu%2Fjiankangyinshi%2F2014-03-06%2F333ddf7ba0ed6edf2133440bac7f93b1.jpg',
					name: '鯉 魚',
					specs: '11.2-1斤',
					price: 1,
					num: 5,
					checked: false,
					id: 21
				},
				{
					imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579245868421&di=64756b8436f8c7801aa33ed3e499a651&imgtype=0&src=http%3A%2F%2Fdpic.tiankong.com%2F72%2Fsh%2FQJ8162411372.jpg',
					name: '彩色,魚,遊動,鯉魚',
					specs: '11.2-1斤',
					price: 2,
					num: 10,
					checked: false,
					id: 22
				},
				{
					imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579245868421&di=64756b8436f8c7801aa33ed3e499a651&imgtype=0&src=http%3A%2F%2Fdpic.tiankong.com%2F72%2Fsh%2FQJ8162411372.jpg',
					name: '彩色',
					specs: '11.2-1斤',
					price: 2,
					num: 10,
					checked: false,
					id: 23
				}
			]
		}
	])
}