point-app/pages/market/index.vue

<template>
	<mobile-frame :frameStyle="frameStyle" @toPath="toPath">
		<view class="main">
			<view class="top" v-if="list.length !=0">
				<view class="text_1">
					<checkbox class="checkbox" @click="selectAll(false)" :checked="isAll">全选</checkbox>
				</view>
				<view class="text_2" v-if="num==0" @click="edit(1)">编辑</view>
				<view class="text_2" v-if="num==1" @click="edit(0)">完成</view>
			</view>
			<view class="one" v-if="!user._id">
				<view class="logo">
					<text class="iconfont icon-gouwuche"></text>
				</view>
				<view class="one_1">
					您还没有登录
				</view>
				<view class="btn">
					<button type="primary" size="mini" @click="toCommon('/pages/login/index')">去登录</button>
				</view>
			</view>
			<view class="one" v-if="list.length==0">
				<view class="logo">
					<text class="iconfont icon-gouwuche"></text>
				</view>
				<view class="one_1">
					购物车空空如也~
				</view>
				<view class="btn">
					<button type="primary" size="mini" @click="toCommon('/pages/home/index')">去逛逛</button>
				</view>
			</view>
			<view class="two">
				<scroll-view scroll-y="true" class="scroll-view">
					<view class="list-scroll-view">
						<checkbox-group name="checkbox" @change="marketChange">
							<view class="lists" v-for="(item, index) in list" :key="index">
								<view class="list">
									<view class="title">
										<checkbox :value="item.id" :checked="item.check">
											{{item.title}}
										</checkbox>
									</view>
									<checkbox-group name="checkbox" @change="goodsChange">
										<view class="content" v-for="(item, indexs) in item.goods" :key="indexs">
											<view class="box">
												<checkbox :value="item.id" :checked="item.check" />
											</view>
											<view class="img">
												<image src="../../static/logo.png"></image>
											</view>
											<view class=" one_1" v-if="num==0">
												<view class="name">{{item.name}}</view>
												<view class="info">
													<view class="title_1" v-if="item.kg">
														<text>规格:{{item.kg}}</text>
													</view>
												</view>
											</view>
											<view class="money" v-if="num==0">
												<view>¥{{item.money}}</view>
												<view>x{{item.num}}</view>
											</view>
											<view class="num" v-if="num==1">
												<uni-number-box @change="changeValue(item)" name="num" value="item"
													:min="1" v-model="item.num" />
											</view>
											<view class="del" v-if="num==1">
												<text class="iconfont icon-del-copy" @click="toDel(item)"></text>
											</view>
										</view>
									</checkbox-group>
								</view>
							</view>
						</checkbox-group>
					</view>
				</scroll-view>
			</view>
			<view class="foot" v-if="list.length !=0">
				<view class="total">总价：<text>￥{{totalMoney}}(不含运费)</text></view>
				<view class="btn">
					<button type="primary" size="mini" @click="toSettle()" v-if="num==0">提交订单</button>
					<button type="primary" size="mini" @click="toDel()" v-if="num==1">删除</button>
				</view>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				frameStyle: {
					useBar: true
				},
				user: {
					_id: '001'
				},
				list: [{
					id: '001',
					title: '商品1店铺',
					goods: [{
						id: '00001',
						name: '商品商品商品商品商品1',
						money: 50.00,
						num: 2,
						kg: '1.5L',
					}, {
						id: '00002',
						name: '商品商品商品商品商品2',
						money: 150.00,
						num: 2,
						kg: '13.5L',
					}, ]
				}, {
					id: '002',
					title: '商品1店铺',
					goods: [{
						id: '00003',
						name: '商品商品商品商品商品1',
						money: 50.00,
						num: 2,
						kg: '1.5L',
					}, {
						id: '00004',
						name: '商品商品商品商品商品2',
						money: 150.00,
						num: 2,
						kg: '13.5L',
					}, ]
				}, ],
				isAll: false,
				// 编辑/完成按钮传的数字
				num: 0,
				totalMoney: 0,
			};
		},
		onShow: function() {
		},
		methods: {
			toPath(e) {
				if (e && e.route) uni.redirectTo({
					url: `/${e.route}`
				})
			},
			// 转换金额
			showMoney(money) {
				const that = this;
				let moneys = `${money}`.split(".");
				if (moneys.length == 1) {
					money = money + ".00";
				} else if (moneys.length == 2) {
					money = money + "0";
				}
				return money;
			},
			// 编辑
			edit(num) {
				const that = this;
				that.$set(that, `num`, num)
			},
			//全选
			selectAll(e) {
				const that = this;
				const list = that.list;
				const isAll = that.isAll;
				let data = [];
				for (const val of list) {
					let a = isAll ? false : true;
					val.check = a;
					for (let s of val.goods) {
						s.check = a
					}
					data.push(val);
				}
				that.$set(that, `list`, data)
				// 计算总额
				that.countMoney();
				// 赋值是否全选
				that.$set(that, `isAll`, isAll ? false : true)
			},
			// 选择店铺
			marketChange(e) {
				const that = this;
				const list = this.list;
				const {
					value
				} = e.detail;
				for (const p1 of list) {
					let p2 = value.find((i) => i == p1.id);
					let a = p2 ? true : false;
					p1.check = a;
					for (let s of p1.goods) {
						s.check = a
					}
				}
				that.$set(that, `list`, list);
				that.marketAllChange();
				// 计算总额
				that.countMoney();
			},
			//店铺全部选择true，全选自动选择，
			marketAllChange() {
				const that = this;
				let list = that.list;
				for (let val of list) {
					if (val.check == true) {
						that.$set(that, `isAll`, true)
					} else {
						that.$set(that, `isAll`, false)
					}
				}
				that.$set(that, `list`, list)
				// 计算总额
				that.countMoney();
			},
			//选择商品
			goodsChange(e) {
				const that = this;
				let list = that.list;
				const {
					value
				} = e.detail;
				let shop = list.find(f => f.goods.find(i => value.find(s => s == i.id)))
				if (shop) {
					for (let val of shop.goods) {
						let p2 = value.find((i) => i == val.id);
						if (p2) val.check = true;
						else val.check = false;
					}
				} else {
					list = list.map(i => {
						i.goods = i.goods.map(g => ({
							...g,
							check: false
						}))
						return i;
					})
				}
				that.$set(that, `list`, list)
				that.goodsAllChange(value);
				// 计算总额
				that.countMoney();
			},
			//商品全部选择true，店铺自动选择，
			goodsAllChange(value) {
				const that = this;
				let list = that.list;
				let shop = list.find(f => f.goods.find(i => value.find(s => s == i.id)))
				if (shop) {
					for (let val of shop.goods) {
						if (val.check == true) {
							shop.check = true;
						} else {
							shop.check = false;
						}
					}
				} else {
					list = list.map(i => {
						i.goods = i.goods.map(g => ({
							...g,
							check: false
						}))
						return i;
					})
				}
				// 计算总额
				that.countMoney();
			},
			// 加减商品数量
			changeValue(value) {
				const that = this;
				const list = that.list;
				for (const val of list) {
					for (let s of val.goods) {
						if (s.id == value.id) {
							s.num = value.num
						}
					}
				}
				that.$set(that, `list`, list)
				// 计算总额
				that.countMoney(list);
			},
			// 删除
			toDel(e) {
				const that = this;
				const list = that.list;
				let shop = list.find(f => f.goods.find(i => i.check == true))
				if (shop) {
					uni.showModal({
						title: '提示',
						content: '确认要删除这些商品吗？',
						success: async function(res) {
							if (res.confirm) {}
						}
					});
				} else if (e.id) {
					uni.showModal({
						title: '提示',
						content: '是否确认删除该商品',
						success: async function(res) {
							if (res.confirm) {}
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '请选择要删除的商品',
						success: async function(res) {
							if (res.confirm) {}
						}
					});
				}
			},
			// 计算总额
			countMoney() {
				const that = this;
				const list = this.list;
				let totalMoney = 0;
				// 渲染结束执行下面方法
				that.$nextTick(() => {
					for (const val of list) {
						for (let s of val.goods) {
							if (s.check == true) {
								let total = Number(s.money) * Number(s.num);
								totalMoney += Number(total);
							}
						}
					}
					that.$set(that, `totalMoney`, totalMoney.toFixed(2))
				})

			},
			// 去结算
			toSettle() {},
		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 92vh;
		background-color: var(--footColor);

		.top {
			display: flex;
			flex-direction: row;
			background-color: var(--mainColor);
			height: 35px;
			margin: 0 0 4px 0;
			padding: 5px 4vw;

			.text_1 {
				flex-grow: 1;
				line-height: 30px;
			}

			.text_2 {
				line-height: 35px;
			}
		}

		.one {
			text-align: center;
			margin: 2vw 0;

			.logo {
				margin: 10vw 0 2vw 0;

				.iconfont {
					font-size: 35vw;
				}
			}


			.one_1 {
				margin: 3vw 0;
			}

			button {
				background-color: var(--ff0Color);
			}
		}

		.two {
			position: relative;
			flex-grow: 1;
			margin: 0 2vw;

			.list {
				background-color: var(--mainColor);
				margin: 2vw 0 2vw 0;
				padding: 2vw 3vw;
				border-radius: 4px;

				.title {
					border-bottom: 1px solid var(--fcColor);
					padding: 0 0 2vw 0;
					font-size: var(--font18Size);
				}

				.content {
					display: flex;
					flex-direction: row;
					padding: 3vw 0;
					font-size: var(--font16Size);
					border-bottom: 1px dashed var(--fcColor);

					.box {
						line-height: 20vw;
					}

					.img {
						width: 20vw;
						height: 20vw;
						border-radius: 2vw;
						border: 1px solid var(--fcColor);

						image {
							width: 20vw;
							height: 20vw;
						}
					}

					.one_1 {
						margin: 2.5vw;
						flex-grow: 1;

						.info {
							width: 100%;
							display: flex;
							flex-direction: row;

							.title_1 {
								font-size: 12px;
								color: #666;
								margin-top: 10px;

								text {
									background-color: #eee;
									padding: 5px;
								}
							}
						}
					}

					.money {
						margin-top: 2vw;
						text-align: right;
						flex-grow: 1;
					}

					.num {
						margin: 6vw 4vw;
						font-size: 20px;
					}

					.del {
						margin: 6vw 0;
						text-align: right;
						flex-grow: 1;
					}
				}
			}
		}

		.foot {
			background-color: var(--fffColor);
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			height: 44px;
			padding: 0 0 0 6vw;
			border-right: 1px solid var(--f99Color);

			.total {
				flex-grow: 1;
				display: flex;
				align-content: flex-end;
				line-height: 40px;

				text {
					color: var(--ff0Color);
				}
			}

			.btn {

				button {
					width: 30vw;
					height: 44px;
					line-height: 44px;
					border-radius: 0px;
					background-color: var(--ff0Color);
					text-align: center;
					font-weight: normal;
					font-size: var(--font15Size);
					color: var(--fffColor);
				}
			}
		}

	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}

	// 复选框样式
	checkbox .wx-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border-color: var(--f99Color);
		background-color: var(--mainColor);
	}

	// 复选框选中样式
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border-color: var(--ff0Color);
		background-color: var(--ff0Color);
	}

	// 复选框选中之后对号的样式
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		color: var(--fffColor);
	}
</style>