cgc_WeChat/subPackages/user/gwc.vue

<template>
	<view class="bg">
		<view class="guanli" v-if="list && list.length>0" @click="guanli">{{operate}}</view>
		<view v-for="(item,index) in list" :key="index">
			<view class="goodBox" v-if="item.data && item.data.length > 0  ">
				<view class="title" v-if="item.data.some(v => v.flag == 1)">{{item.merchant_name}} ></view>
				<view class="goodItem" v-for="(goodItem,goodIndex) in item.data" :key="goodIndex"
					v-if="goodItem.flag != 0">
					<view class="noSelect" v-if="!goodItem.is_select" @click="changeSelect(goodItem)"></view>
					<view class="selectBox flex-around" v-else @click="changeSelect(goodItem)">
						<img src="https://static.ticket.sz-trip.com/cgc/images/order/dui.png">
					</view>
					<image :src="showImg(goodItem.specifications_image)" mode="aspectFill"
						@click="goDetails(goodItem.good_id)"></image>
					<view class="contentBox">
						<view class="title text-overflow">{{goodItem.good_name}}</view>
						<view class="subTitle text-overflow">{{goodItem.Specifications_name}}</view>
						<view class="priceBox flex-between">
							<view class="price">{{goodItem.Specifications_money / 100}}</view>
							<view class="flex-between" style="width: 165rpx;font-size: 29rpx;">
								<view :class="['jian', goodItem.num == 1 ? 'zhihui' : '']" @click="delNum(goodItem)">-
								</view>
								<view>{{goodItem.num}}</view>
								<view class="jia" @click="addNum(goodItem)">+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="loseGood" v-if="loseList && loseList.length>0">
			<view class="title flex-between">失效商品<span @click="delLoseGood('',1)">清空失效商品</span></view>
			<view class="goodItem" v-for="(goodItem,goodIndex) in loseList" :key="goodIndex">
				<view class="noSelect"></view>
				<image :src="showImg(goodItem.specifications_image)" mode="aspectFill"></image>
				<view class="contentBox">
					<view class="title text-overflow">{{goodItem.good_name}}</view>
					<view class="subTitle text-overflow">{{goodItem.Specifications_name}}</view>
					<view class="priceBox flex-between">
						<view class="price">{{goodItem.Specifications_money / 100}}</view>
						<view class="btn" @click="delLoseGood(goodItem.id,0)">删除</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 预定按钮 -->
		<view class="orderBox flex-between">
			<view class="priceBox">
				<!-- <view class="selectBox flex-around" v-if="allSelect" @click="changeAllSelect">
					<img src="https://static.ticket.sz-trip.com/cgc/images/order/dui.png" alt="">
				</view>
				<view class="noSelect" v-else @click="changeAllSelect"></view>全选 -->
				<span v-if="operate == '管理'">在线付:</span>
				<p v-if="operate == '管理'">￥{{getAllPrice()}}</p>
			</view>
			<view class="btn" @click="order" v-if="operate == '管理'">提交订单</view>
			<view class="btn" @click="delGood" v-else>删除</view>
		</view>

		<view class="noProduct" v-if="list.length == 0 && loseList.length == 0">
			暂无商品
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				operate: '管理',
				list: [],
				loseList: [],
				allSelect: false,
			}
		},
		onShow() {
			this.getShoppingList()
			this.allSelect = false
		},
		methods: {
			getShoppingList() {
				this.Post({
					is_post: 1,
					// lon: this.$store.state.user.location.lon || '120.63132',
					// lat: this.$store.state.user.location.lat || '31.30227'
				}, '/api/shopping/getShoppingList').then(res => {
					this.list = res.data.merchant
					this.loseList = []
					this.list.forEach(item => {
						item.data.forEach(items => {
							if (items.flag === 0) {
								this.loseList.push(items)
							}

						})
					})
					console.log('打印', this.loseList);
				})
			},
			// 管理
			guanli() {
				if (this.operate == '管理') {
					this.operate = '退出管理'
				} else {
					this.operate = '管理'
				}
				console.log(this.operate)
			},
			delNum(item) {
				if (item.num <= 1) {
					item.num = 1
					uni.showToast({
						title: '已经最少了，不能再减了',
						icon: 'none'
					})
				} else {
					item.num -= 1
					this.updateCart(item)
				}
			},
			addNum(item) {
				item.num += 1
				this.updateCart(item)
			},
			updateCart(item) {
				let that = this
				that.Post({
					s_id: item.id,
					num: item.num
				}, '/api/shopping/updateShopping').then(function(res) {
					if (res) {
						// that.$toast.clear()
					}
				})
			},
			// 更改选中状态
			changeSelect(item) {
				item.is_select = !item.is_select
				this.list.forEach(item => {
					let checkAll = item.data.findIndex(items => {
						return !items.is_select
					})
					if (checkAll == -1) {
						this.allSelect = true
					} else {
						this.allSelect = false
					}
				})
				this.$forceUpdate()
			},
			// 去商品详情
			goDetails(id) {
				uni.navigateTo({
					url: '/subPackages/techan/detail?id=' + id
				});
			},
			// 改变所有选中
			changeAllSelect() {
				this.allSelect = !this.allSelect
				this.list.forEach(item => {
					item.data.forEach(items => {
						if (this.allSelect) items.is_select = true
						else items.is_select = false
					})
				})
			},
			// 删除失效商品
			delLoseGood(id, index) {
				if (index == 0) {
					this.Post({
						s_id: id
					}, '/api/shopping/delShopping').then(res => {
						this.getShoppingList()
						this.$forceUpdate()
					})
				} else {
					let ids = []
					this.loseList.forEach(item => {
						ids.push(item.id)
					})
					this.Post({
						s_id: ids.toString()
					}, '/api/shopping/delShopping').then(res => {
						this.getShoppingList()
						this.$forceUpdate()
					})
				}
			},
			// 删除商品
			delGood() {
				let ids = []
				this.list.forEach(item => {
					item.data.forEach(items => {
						if (items.is_select == true) {
							ids.push(items.id)
						}
					})
				})
				this.Post({
					s_id: ids.toString()
				}, '/api/shopping/delShopping').then(res => {
					this.getShoppingList()
					this.$forceUpdate()
				})
			},
			// 获取总价
			getAllPrice() {
				let allPrice = 0
				this.list.forEach(item => {
					item.data.forEach(items => {
						if (items.is_select == true) {
							allPrice += items.Specifications_money * items.num
						}
					})
				})
				return (allPrice / 100).toFixed(2)
			},
			// 结算
			order() {
				let list = []
				let ids = []
				this.list.forEach(item => {
					item.data.forEach((items, index) => {
						if (items.is_select == true) {
							ids.push(items.merchant_id)
							list.push(items)
						}
					})
				})
				if (Array.from(new Set(ids)).length > 1) {
					uni.showToast({
						title: '请选择同一商户下的商品',
						icon: 'none'
					})
					return;
				}
				if (list.length == 0) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
					return;
				}
				console.log('list参数', list);
				this.$store.commit("changeOrderSCart", list)
				// this.gotoPath('/subPackages/order/eCartOrder')
				this.gotoPath('/subPackages/order/gwcOrder')
				// this.gotoPath('/subPackages/goods/goodsOrder')
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		width: 100%;
		min-height: 100vh;
		padding: 0 27rpx 200rpx;
		box-sizing: border-box;
		background-color: #F8F8F8;
	}

	.guanli {
		height: 76rpx;
		text-align: right;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 76rpx;
	}

	.goodBox {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto 27rpx;
		padding: 25rpx 20rpx;
		box-sizing: border-box;

		.title {
			font-size: 35rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.goodItem {
			width: 100%;
			height: 173rpx;
			margin-top: 46rpx;
			display: flex;

			.noSelect {
				width: 37rpx;
				height: 37rpx;
				border-radius: 50%;
				border: 2rpx solid #666666;
				box-sizing: border-box;
				margin-right: 25rpx;
				margin-top: 68rpx;
			}

			.selectBox {
				width: 37rpx;
				height: 37rpx;
				// background: linear-gradient(90deg, #FA2B66, #FF9834);
				// border-radius: 50%;
				margin-right: 25rpx;
				margin-top: 68rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			image {
				width: 173rpx;
				height: 173rpx;
				border-radius: 13rpx;
			}

			.contentBox {
				width: 400rpx;
				height: 173rpx;
				margin-left: 23rpx;

				.title {
					font-size: 31rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
				}

				.subTitle {
					font-size: 27rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #7C7C7C;
					margin-top: 13rpx;
				}

				.priceBox {
					margin-top: 35rpx;

					.price {
						font-size: 40rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FF2D3B;
					}

					.price:before {
						content: "￥";
						font-size: 27rpx;
					}

					.jian,
					.jia {
						width: 47rpx;
						height: 47rpx;
						background: #6CA5AA;
						border-radius: 50%;
						text-align: center;
						color: #FFFFFF;
						line-height: 47rpx;
					}
				}
			}
		}
	}

	.loseGood {
		width: 697rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto 27rpx;
		padding: 25rpx 20rpx;
		box-sizing: border-box;

		.title {
			font-size: 35rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;

			span {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #2791F7;
			}
		}

		.goodItem {
			width: 100%;
			height: 173rpx;
			margin-top: 46rpx;
			display: flex;
			color: #999999;

			.noSelect {
				width: 37rpx;
				height: 37rpx;
				border-radius: 50%;
				border: 2rpx solid #CCCCCC;
				background: #F1F1F1;
				box-sizing: border-box;
				margin-right: 25rpx;
				margin-top: 68rpx;
			}

			image {
				width: 173rpx;
				height: 173rpx;
				border-radius: 13rpx;
				margin-right: 23rpx;
			}

			.contentBox {
				width: 421rpx;
				height: 173rpx;

				.title {
					font-size: 31rpx;
					font-family: PingFang SC;
					font-weight: 500;
				}

				.subTitle {
					font-size: 27rpx;
					font-family: PingFang SC;
					font-weight: 400;
				}

				.priceBox {
					margin-top: 35rpx;

					.price {
						font-size: 40rpx;
						font-family: PingFang SC;
						font-weight: 500;
					}

					.price:before {
						content: "￥";
						font-size: 27rpx;
					}

					.btn {
						width: 125rpx;
						height: 53rpx;
						background: #999999;
						border-radius: 13rpx;
						text-align: center;
						line-height: 53rpx;
						font-size: 29rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.noProduct {
		width: 100%;
		height: 300rpx;
		text-align: center;
		line-height: 300rpx;
		color: #999999;
		font-size: 32rpx;
	}

	.orderBox {
		width: 750rpx;
		height: 151rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 16rpx 0px rgba(6, 0, 1, 0.1);
		padding: 0 27rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;

		.priceBox {
			display: flex;
			font-size: 27rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;

			span {
				font-size: 27rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-left: 20rpx;
			}

			p {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF2D3B;
				margin-top: -5rpx;
			}

			.noSelect {
				width: 41rpx;
				height: 41rpx;
				border-radius: 50%;
				border: 2rpx solid #666666;
				box-sizing: border-box;
				margin-right: 10rpx;
			}

			.selectBox {
				width: 41rpx;
				height: 41rpx;
				// background: linear-gradient(90deg, #FA2B66, #FF9834);
				border-radius: 50%;
				margin-right: 10rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.btn {
			width: 219rpx;
			height: 77rpx;
			background: #6CA5AA;
			border-radius: 39rpx;
			text-align: center;
			line-height: 77rpx;
			font-size: 33rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.zhihui {
		background: #E8E8E8 !important;
		color: #999999 !important;
	}
</style>