wx-qhb/pages/cart/cart.vue

<template>
	<!-- 购物车 -->
	<view class="page" @click="num = ''">
		<u-navbar :safeAreaInsetTop="true" :placeholder="true">
			<view class="u-nav-slot" slot="left">
				<view class="">
					<text class="shopcart">{{ i18n.Shopping }}</text>
					<text class="sum">({{ goodsNum }})</text>
				</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="u-flex">
					<text @click="admin" v-if="success">{{ i18n.manage }}</text>
					<text @click="admin" v-else>{{ i18n.complete }}</text>
					<view class="" style="width: 200rpx"></view>
				</view>
			</view>
		</u-navbar>
		<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
			<view class="box" v-for="(item, idx) in goodsList" :key="idx">
				<view class="item">
					<view class="shopname u-flex">
						<image src="/static/mine/354.png" class="circle" mode="scaleToFill"
							@click="shopSelectAll(item.goods)" v-if="shop(item.goods)" />
						<image src="/static/mine/353.png" class="circle" mode="scaleToFill"
							@click="shopSelectAll(item.goods)" v-else />

						<image :src="item.image" style="width: 28rpx; height: 28rpx" mode=""></image>
						<text>{{ item.merchant_name }}</text>
						<image src="/static/express/next1.png" style="width: 32rpx; height: 32rpx" mode=""></image>
					</view>
					<u-swipe-action>
						<view class="u-flex" style="margin-top: 30rpx; width: 100%" v-for="(chid, index) in item.goods"
							:key="index">
							<u-swipe-action-item ref="show" :options="options2" @click="followOrdelete"
								:autoClose="true" :name="chid.cart.id"
								:disabled="chid.status == 'down' || chid.sku_item.length == 0">
								<!-- 				<view class="" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;background-color: rgba(255, 255, 255, 0.5);"></view> -->
								<u-checkbox shape="circle" :customStyle="{ marginBottom: '8px' }" :name="chid.cart.id"
									activeColor="#F83224"
									:disabled="chid.status == 'down' || chid.sku_item.length == 0">
								</u-checkbox>
								<view class="" style="
                    position: relative;
                    width: 172rpx;
                    height: 172rpx;
                    border-radius: 16rpx;
                  ">
									<image :src="chid.sku_item[0].image"
										style="width: 172rpx; height: 172rpx; border-radius: 20rpx" mode="">
									</image>
									<view class="down" v-if="chid.status == 'down' || chid.sku_item.length == 0">
										<view class="sold"> {{ i18n.offtheshelves }} </view>
									</view>
								</view>
								<view class="good" style="flex: 1; margin-left: 10rpx; width: 65%">
									<view class="goodname" v-if="language == 'zh-CN'">{{ chid.name_cn }}</view>
									<view class="goodname" v-if="language == 'en-US'">{{ chid.name_en }}</view>
									<view class="goodname" v-if="language == 'es-ES'">{{ chid.name_es }}</view>
									<view class="goodname" v-if="language == 'it-IT'">{{ chid.name_ita }}</view>
									<view class="goods" v-if="chid.sku_item.length > 0">
										<text v-if="language == 'zh-CN'">{{chid.sku_item[0].item}}</text>
										<text v-if="language == 'en-US'">{{chid.sku_item[0].item_en}}</text>  
										<text v-if="language == 'es-ES'">{{chid.sku_item[0].item_es}}</text>
										<text v-if="language == 'it-IT'">{{chid.sku_item[0].item_ita}}</text>
									</view>
									<view class="" style="margin-top: 21rpx">
										<view class="goodtab" v-for="itemLabel in chid.label_arr" :key="itemLabel.id">
											<text v-if="language == 'zh-CN'">{{ itemLabel.name_cn }}</text>
											<text v-if="language == 'en-US'">{{ itemLabel.name_en }}</text>
											<text v-if="language == 'es-ES'">{{ itemLabel.name_es }}</text>
											<text v-if="language == 'it-IT'">{{ itemLabel.name_ita }}</text>
										</view>
									</view>
									<view class="u-flex u-row-between" style="width: 100%; margin-top: 20rpx">
										<view class="" v-if="chid.sku_item.length > 0">
											<text class="money">¥</text>
											<text class="money" style="font-size: 30rpx">{{
                        chid.sku_item[0].discount_price.split(".")[0]    
                      }}</text>
											<text class="money">.{{
                          chid.sku_item[0].discount_price.split(".")[1]
                        }}</text>
											<text class="weight">{{ chid.sku_item[0].weight }}kg</text>
										</view>
										<view class="aaaaaa">
											<!-- <view class="delect" v-if='dele'>{{i18n.delete}}</view> -->
											<view class="" v-if="num == chid.cart.id && success">
												<!-- <u-number-box v-model="value" @change="valChange"></u-number-box> -->
												<u-number-box v-model="chid.cart.goods_num" @change="addOrReduce">
													<view slot="minus" class="minus">
														<u-icon name="minus" color="#B5B5B5" size="12"></u-icon>
													</view>
													<text slot="input" style="
                              width: 50px;
                              text-align: center;
                              font-size: 20rpx;
                            " class="input">{{ chid.cart.goods_num }}</text>
													<view slot="plus" class="plus">
														<u-icon name="plus" color="#B5B5B5" size="12"></u-icon>
													</view>
												</u-number-box>
											</view>
											<view class="num" v-if="
                          num != chid.cart.id &&
                          success &&
                          chid.status == 'normal' &&
                          chid.sku_item.length != 0
                        " @click.stop="num = chid.cart.id">
												x{{ chid.cart.goods_num }}
											</view>
											<view v-if="
                          success &&
                          (chid.status == 'down' || chid.sku_item.length == 0)
                        " class="del" @click="
                          followOrdelete({
                            index: 1,
                            name: chid.cart.id,
                          })
                        ">{{ i18n.delete }}</view>
										</view>
										<view v-if="success == false" class="icon delete-1" @click="
                        followOrdelete({
                          index: 1,
                          name: chid.cart.id,
                        })
                      ">
											<u-icon name="trash" color="#fff" size="20"></u-icon>
										</view>
									</view>
								</view>
							</u-swipe-action-item>
						</view>
					</u-swipe-action>
				</view>
			</view>
		</u-checkbox-group>
		<u-toast ref="uToast"></u-toast>
		<view class="" style="height: 260rpx"></view>
		<view class="back-top" @click="backTop">
			<image class="back-icon" src="../../static/mine/355.png" mode="scaleToFill" />
			<text class="back-text">{{ i18n.top }}</text>
		</view>
		<kj-tabbar ref="tabbar1" :value1="3" :success="success" @allSelect="allSelect" :goodsWeight="goodsWeight"
			:goodsPrice="String(goodsPrice.toFixed(2))" :goodsList="goodsList" :checkboxValue1="checkboxValue1"
			@selectDelete="selectDelete"></kj-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dele: true,
				success: true,
				shopitem: -1,
				checkboxValue1: [], //商品数组
				value: 0,
				all: [], //全选数组
				goodsList: [],
				selectall: -1,
				goodsNum: 0, //购物车商品数量
				num: false,
				goodsWeight: 0, //商品重量
				goodsPrice: 0, //商品价格
				tabarheight: "",
				removeProducts: 0, //已下架的商品数量
				language: "zh-CN",
			};
		},
		watch: {},
		computed: {
			i18n() {
				return this.$t("index");
			},
			options2() {
				var options = [{
						text: this.i18n.Shiftfocus,
						style: {
							backgroundColor: "#FFB115",
						},
					},
					{
						text: this.i18n.delete,
						style: {
							backgroundColor: "#F83224",
						},
					},
				];
				return options;
			},
		},
		onLoad() {
			const systemInfo = wx.getSystemInfoSync();
			const tab =
				systemInfo.screenHeight -
				systemInfo.safeArea.bottom +
				systemInfo.statusBarHeight;
			this.tabarheight = tab;
		},
		onShow() {
			this.goodsNum = 0; //购物车商品数量
			this.goodsWeight = 0; //商品重量
			this.goodsPrice = 0; //商品价格
			this.checkboxValue1 = [];
			this.getShopCarList();
			if (uni.getStorageSync("language") != "") {
				this.language = uni.getStorageSync("language");
			}
		},
		methods: {
			//返回顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0
					duration: 300, // 滚动动画的时长
				});
			},
			//商品下架之后的商品字体颜色
			getFontColor(status) {
				if (status == "down") {
					return "color:rgba(51, 51, 51, .6)";
				}
			},

			//关注商品 or 删除商品
			followOrdelete(e) {
				//关注商品
				if (e.index == 0) {
					this.goodsList.map((item) => {
						item.goods.map((items) => {
							if (e.name == items.cart.id) {
								console.log(items);
								uni.$u.http
									.post(`/api/interest/follow`, {
										interest_type: 0,
										interest_id: items.merchant_goods.id,
									})
									.then((res) => {
										this.$refs.show.forEach((item) => item.closeHandler(true));
										console.log(res);
										uni.showToast({
											title: "关注成功",
											icon: "none",
										});
									});
							}
						});
					});
				} else {
					//删除商品
					this.goodsList.map((item) => {
						item.goods.map((items) => {
							if (e.name == items.cart.id) {
								uni.$u.http
									.delete(`/api/cart?ids=${items.cart.id}`)
									.then((res) => {
										this.$refs.uToast.show({
											type: "default",
											title: this.i18n.defaultTheme,
											message: this.i18n.successfullydelete,
										});
										//删除后关闭滑动打开的单元格
										this.$refs.show.forEach((item) => item.closeHandler(true));
										this.getShopCarList();
									});
							}
						});
					});
				}
			},

			//多选删除
			selectDelete() {
				let goodsIdList = []; //筛选选中的商品id
				this.goodsList.map((item) => {
					item.goods.map((items) => {
						if (this.checkboxValue1.indexOf(items.cart.id) >= 0) {
							goodsIdList.push(items.cart.id);
						}
					});
				});
				uni.$u.http
					.delete(`/api/cart`, {
						ids: goodsIdList.join(","),
					})
					.then((res) => {
						this.$refs.uToast.show({
							type: "default",
							title: this.i18n.defaultTheme,
							message: this.i18n.successfullydelete,
						});
						this.checkboxValue1 = [];
						this.getShopCarList();
					});
			},

			shop(value) {
				let num = 0;
				value.map((item) => {
					if (this.checkboxValue1.indexOf(item.cart.id) >= 0) {
						num++;
					}
				});
				return num;
			},

			//获取排除下架的商品之后的商品数量
			getNormalGoodsNum(value) {
				let num = 0;
				value.map((item) => {
					if (item.status != "down") {
						num++;
					}
				});
				return num;
			},

			//修改购物车商品数量
			addOrReduce(n) {
				console.log(n);
				uni.$u.http
					.post(`/api/cart/num/${this.num}`, {
						goods_num: n.value,
						type: "",
					})
					.then((res) => {
						this.goodsPrice = 0;
						this.goodsWeight = 0;
						this.goodsList.map((item) => {
							item.goods.map((items) => {
								//判断是否有商品已被选中
								if (
									this.checkboxValue1.indexOf(items.cart.id) != -1 &&
									items.status != "down"
								) {
									this.goodsWeight +=
										items.sku_item[0].weight * items.cart.goods_num;
									this.goodsPrice +=
										Number(items.sku_item[0].discount_price) *
										items.cart.goods_num;
								}
							});
						});
					});
			},

			//店铺商品全选
			shopSelectAll(value) {
				this.goodsPrice = 0;
				this.goodsWeight = 0;
				//先判断存放选中的数组有没有选中的数据
				if (this.checkboxValue1.length == 0) {
					//没有数据则直接将选中店铺中的商品存入数组
					value.map((item) => {
						//商品下架不得选中
						if (item.status != "down") {
							this.checkboxValue1.push(item.cart.id);
						}
					});
				} else {
					if (
						this.shop(value) > 0 &&
						this.shop(value) == this.getNormalGoodsNum(value)
					) {
						value.map((item) => {
							//先判断选中的商品数组中该店铺商品是否已被选中，已被选中则取消选中
							if (this.checkboxValue1.indexOf(item.cart.id) >= 0) {
								this.checkboxValue1.splice(
									this.checkboxValue1.indexOf(item.cart.id),
									1
								);
							}
						});
					} else if (
						(this.shop(value) > 0 &&
							this.shop(value) != this.getNormalGoodsNum(value)) ||
						this.shop(value) == 0
					) {
						value.map((item) => {
							//先判断选中的商品数组中该店铺商品是否已被选中，未被选中则推入选中状态，商品下架不得选中
							if (
								this.checkboxValue1.indexOf(item.cart.id) == -1 &&
								item.status != "down"
							) {
								this.checkboxValue1.push(item.cart.id);
							}
						});
					}
				}
				if (this.checkboxValue1.length == this.goodsNum - this.removeProducts) {
					this.$refs.tabbar1.cancelAll();
				} else {
					this.$refs.tabbar1.cancelAll(this.i18n.Cancel);
				}

				//将选中的商品价格相加
				this.goodsList.map((item) => {
					item.goods.map((items) => {
						if (this.checkboxValue1.indexOf(items.cart.id) > -1) {
							this.goodsWeight += items.sku_item[0].weight * items.cart.goods_num;
							this.goodsPrice +=
								Number(items.sku_item[0].discount_price) * items.cart.goods_num;
						}
					});
				});
				this.shop(value);
			},
			admin() {
				console.log(this.checkboxValue1);
				this.success = !this.success;
			},
			valChange(e) {
				console.log("当前值为: " + e.value);
			},
			//全选
			checkAll(e) {
				console.log("all", e);
			},
			//购物车单选
			checkboxChange(n) {
				console.log(n);
				//首先将价格和商品重量重置
				this.goodsWeight = 0;
				this.goodsPrice = 0;
				this.checkboxValue1 = n;
				this.goodsList.map((item) => {
					item.goods.map((items) => {
						if (n.indexOf(items.cart.id) > -1) {
							this.goodsWeight += items.sku_item[0].weight * items.cart.goods_num;
							this.goodsPrice +=
								Number(items.sku_item[0].discount_price) * items.cart.goods_num;
						}
					});
				});
				//判断是否全部选中
				if (
					this.checkboxValue1.length == this.goodsNum - this.removeProducts &&
					this.goodsNum != 0
				) {
					this.$refs.tabbar1.cancelAll();
				} else if (
					this.checkboxValue1.length <
					this.goodsNum - this.removeProducts
				) {
					this.$refs.tabbar1.cancelAll(this.i18n.Cancel);
				}
			},
			//购物车全选
			allSelect() {
				const all = this.$refs.tabbar1.cancelAll(this.i18n.selectall);
				if (
					this.checkboxValue1.length == this.goodsNum - this.removeProducts &&
					all.length == 0
				) {
					return;
				}
				//判断是否已经全选，如已全选，则取消全选
				if (this.checkboxValue1.length == this.goodsNum - this.removeProducts) {
					this.checkboxValue1 = [];
					this.goodsPrice = 0;
					this.goodsWeight = 0;
				} else {
					this.goodsList.map((item) => {
						item.goods.map((items) => {
							//判断是否有商品已被选中
							if (
								this.checkboxValue1.indexOf(items.cart.id) == -1 &&
								items.status != "down"
							) {
								this.checkboxValue1.push(items.cart.id);
								this.goodsWeight +=
									items.sku_item[0].weight * items.cart.goods_num;
								this.goodsPrice +=
									Number(items.sku_item[0].discount_price) * items.cart.goods_num;
							}
						});
					});
				}
			},
			//获取购物车数据
			getShopCarList() {
				this.goodsNum = 0;
				uni.$u.http.get(`/api/cart`).then((res) => {
					this.goodsList = res.data;
					//循环店铺，获取购物车商品数量
					this.goodsList.map((item) => {
						this.goodsNum += item.goods.length;
						item.goods.map((items) => {
							if (items.status == "down") {
								this.removeProducts++;
							}
						});
					});
				});
			},
		},
		// mounted() {
		//   this.getShopCarList();
		// },
	};
</script>

<style lang="scss" scoped>
	.page {
		position: relative;

		.back-top {
			position: fixed;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 88rpx;
			height: 88rpx;
			background-color: #fff;
			border-radius: 50%;
			bottom: 280rpx;
			right: 20rpx;
			z-index: 1000;

			.back-icon {
				width: 32rpx;
				height: 30rpx;
			}

			.back-text {
				font-size: 20rpx;
				color: #555;
			}
		}
	}

	.sold {
		width: 108rpx;
		height: 36rpx;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 18rpx;
		// padding: 0 14rpx;
		text-align: center;
		box-sizing: border-box;
		line-height: 36rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #ffffff;
		font-style: normal;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -18rpx;
		margin-left: -54rpx;
	}

	.aaaaaa {
		float: right;
	}

	.u-row-between {
		// flex-direction: row-reverse;
		position: relative;
	}

	.delect {
		// width: 68rpx;
		height: 44rpx;
		line-height: 44rpx;
		border-radius: 22rpx;
		border: 1rpx solid #ff1515;
		padding: 0 14rpx;
		box-sizing: border-box;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #ff1515;
		text-align: center;
		font-style: normal;
	}

	.allweight {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #333333;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}

	.sum {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #333333;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}

	.summon {
		font-family: JDZhengHT, JDZhengHT;
		font-weight: 400;
		font-size: 24rpx;
		color: #ff1515;
		line-height: 30rpx;
		text-align: left;
		font-style: normal;
	}

	.settle {
		width: 176rpx;
		height: 68rpx;
		background: #f83224;
		border-radius: 38rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 68rpx;
		text-align: center;
		font-style: normal;
		margin-left: 20rpx;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		background: #f83224;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dle {
		width: 136rpx;
		height: 60rpx;
		border-radius: 38rpx;
		border: 1rpx solid #979797;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		line-height: 60rpx;
		text-align: center;
		font-style: normal;
	}

	::v-deep .u-swipe-action-item__content {
		flex-direction: row !important;
	}

	::v-deep .u-swipe-action-item__right__button__wrapper {
		width: 32px;
		word-wrap: break-word;
		font-size: 20rpx !important;
	}

	::v-deep .u-swipe-action-item__right__button__wrapper__text {
		word-wrap: break-word;
	}

	::v-deep .u-swipe-action-item {
		width: 100% !important;
	}

	::v-deep .u-swipe-action-item__right {
		top: 2rpx !important;
		right: 2rpx !important;
		bottom: 2rpx !important;
	}

	.bottom {
		width: 750rpx;
		height: 100rpx;
		background: #ffffff;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.num {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		border: 1rpx solid rgba(151, 151, 151, 0.4);
		font-family: HarmonyOS_Sans;
		font-size: 20rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: center;
		font-style: normal;
	}

	.del {
		width: 68rpx;
		height: 44rpx;
		text-align: center;
		line-height: 44rpx;
		border: 2rpx solid #f83224;
		color: #f83224;
		font-size: 20rpx;
		border-radius: 22rpx;
		position: absolute;
		right: 10rpx;
	}

	.box {
		padding: 0rpx 24rpx 20rpx;
		margin-top: 20rpx;
		box-sizing: border-box;

		.item {
			padding: 36rpx 20rpx;
			box-sizing: border-box;
			width: 702rpx;
			// height: 556rpx;
			background: #ffffff;
			border-radius: 16rpx;

			.money {
				font-family: HarmonyOS_Sans_Medium;
				font-size: 20rpx;
				color: #ff1515;
				line-height: 26rpx;
				text-align: left;
				font-style: normal;
			}

			.weight {
				font-family: SFPro, SFPro;
				font-weight: 400;
				font-size: 20rpx;
				color: #333333;
				line-height: 24rpx;
				text-align: left;
				font-style: normal;
				margin-left: 12rpx;
			}

			.goodtab {
				// width: 96rpx;
				height: 32rpx;
				border-radius: 4rpx;
				border: 1rpx solid #ff1515;
				padding: 2rpx 8rpx;
				box-sizing: border-box;
				text-align: center;
				line-height: 32rpx;
				display: inline;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #ff1515;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				margin-right: 6rpx;
			}

			.goods {
				// width: 284rpx;
				height: 40rpx;
				background: #f4f4f4;
				border-radius: 8rpx;
				display: inline;
				text-align: center;
				line-height: 40rpx;
				margin-top: 20rpx;
				padding: 6rpx 12rpx;
				box-sizing: border-box;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #555555;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}

			.goodname {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				white-space: nowrap;
				width: 100%;
			}

			.shopname {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;

				.circle {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.shopcart {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #222222;
		line-height: 50rpx;
		text-align: right;
		font-style: normal;
	}

	.sum {
		font-family: HarmonyOS_Sans;
		font-size: 22rpx;
		color: #333333;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}

	.down {
		position: absolute;
		top: 0;
		left: 0;
		background-color: #c7c7c7;
		opacity: 0.7;
		width: 100%;
		height: 100%;
		z-index: 10000;
		border-radius: 20rpx;
	}
</style>