web-retail-h5/pages/specialArea/list.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
	<view class="content">
		<backIcon :diff="diff"></backIcon>
		<view class="index_header">
			<view>{{ titLabel }}</view>
		</view>
		<view class="shareImg" v-if="specialArea == 7" @click="goShare">
			<u-icon name="share-square" size="24" color="#005BAC"> </u-icon>
		</view>
		<view class="shareImg1" v-if="specialArea == 1" @tap="changeCountry">
			<img :src="pkCountryImg" alt="" />
			<u-icon name="arrow-down" color="#999"></u-icon>
		</view>
		<u-scroll-list :indicator="false" v-if="itemChildren.length > 1" class="tabList_a">
			<view class="tab">
				<view v-for="(item, index) in itemChildren" :key="index" @click="setSpecial(item)" v-show="item.isShow"
					:class="[specialArea == item.value ? 'actTab' : 'tab_i']">
					<view>{{ item.label }}</view>
				</view>
			</view>
		</u-scroll-list>
		<view class="index_btm">
			<view class="index_l">
				<view v-for="item in oneList" :class="['classIfy', oneId == item.pkId ? 'actOne' : '']" @click="
            (oneId = item.pkId),
              getAllGoods(item.pkId),
              getClassIfyTwo(item.pkId)
          " :key="item.pkId">{{ item.classifyName }}</view>
			</view>
			<view class="index_r">
				<u-scroll-list :indicator="false" class="tabList">
					<view class="tab">
						<view v-for="(item, index) in twoList" :key="index"
							@click="(twoId = item.pkId), getAllGoods1(item.pkId)"
							:class="[twoId == item.pkId ? 'actTab' : 'tab_i']">
							<view>{{ item.classifyName }}</view>
							<!-- <view :class="[twoId == item.pkId ? 'heng' : 'heng1']"></view> -->
						</view>
					</view>
				</u-scroll-list>
				<view class="search">
					<u--input placeholder="请输入商品名称" placeholderStyle="font-size:14px;" prefixIcon="search"
						shape="circle" v-model="waresName" border="none" @confirm="getAllGoods1()"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</view>
				<view class="goodList">
					<view v-for="item in goodList" :key="item.waresCode" class="goodList_i" @tap="goDetails(item)">
						<view class="fly" v-show="item.preSaleStatus == 3 || item.isSale == 1"></view>
						<img :src="item.cover1" class="cover" alt="" />
						<view class="goodList_ir">
							<view>
								<span class="qzbq" v-if="item.prefixLabelTarget != undefined">{{
                  item.prefixLabelTarget.label
                }}</span>
								{{ item.waresName }}
							</view>
							<view class="pv"
								v-if="specialArea != 18 && specialArea != 13&& specialArea != 31&& specialArea != 10">
								业绩:{{ item.waresAchieve | numberToCurrency }}
							</view>
							<view class="pv" v-if="specialArea ==10">
								积分可抵扣:{{ item.deductMoney | numberToCurrency }}
							</view>
							<view class="pv" v-if="specialArea == 31&&userInfo.isMakerSpace == 0">
								业绩:{{ item.waresAchieve | numberToCurrency }}
							</view>
							<view class="pv" v-if="specialArea == 13">
								BV:{{ item.assAchieve | numberToCurrency }}
							</view>
							<!-- <view class="pv"> 销量:{{ item.sales | seles }} </view> -->
							<view class="goodList_ib">
								<view v-if="specialArea == 31&&userInfo.isMakerSpace == 1">
									{{ item.vipPrice | numberToCurrency | isLocal }}
								</view>
								<view v-if="(specialArea == 31&&userInfo.isMakerSpace == 0)||specialArea !=31">
									{{ item.waresPrice | numberToCurrency | isLocal }}
								</view>
								<img @click.stop="addCar(item)"
									v-show="item.preSaleStatus != 3 && item.isSale != 1&&specialArea != 31"
									src="@/static/images/cart.png" alt="" />
								<img @click.stop="addCar(item)"
									v-show="item.preSaleStatus != 3 && item.isSale != 1&&specialArea == 31&&userInfo.isMakerSpace == 0"
									src="@/static/images/cart.png" alt="" />
							</view>
							<!-- <view class="pv" v-show="specialArea == 31"> 统一零售价:{{ item.retailPrice| numberToCurrency | isLocal}} </view> -->
						</view>
					</view>
					<view class="zhan"></view>
				</view>
			</view>
		</view>
		<u-picker :show="isCountry" @cancel="isCountry = false" @confirm="sureCountry" :columns="countryList"
			keyName="label"></u-picker>
		<selSpaceGoods ref="selSpaceGoods" @getCar="getCatLength"></selSpaceGoods>
		<cartBall ref="cart" :carLength="shopCarLength" :specialArea="specialArea"></cartBall>
	</view>
</template>

<script>
	import backIcon from "@/components/backIcon.vue";
	import cartBall from "@/components/cartBall.vue";
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import * as api from "@/config/goods";
	import clTabbar from "@/components/cl-tabbar.vue";
	import selSpaceGoods from "@/components/selSpaceGoods.vue";

	export default {
		components: {
			"cl-tabbar": clTabbar,
			backIcon,
			cartBall,
			selSpaceGoods,
		},
		computed: {},
		filters: {
			seles(value) {
				if (value > 999) {
					return 999 + "+";
				} else {
					return value;
				}
			},
		},
		data() {
			return {
				specialArea: 1,
				oneList: [],
				oneId: "",
				twoList: [],
				twoId: "",
				goodList: [],
				titLabel: "",
				itemChildren: [],
				diff: 0,
				shopCarLength: false,
				userInfo: {},
				pkCountry: 1,
				pkCountryLabel: "",
				pkCountryImg: "",
				countryList: [],
				isCountry: false,
				waresName: "",
			};
		},
		onLoad(options) {
			console.log('%c [ options ]-25', 'font-size:13px; background:#cb38d2; color:#ff7cff;', options)
			if (JSON.parse(options.children).length > 0) {
				let arr = [];
				if (options.childArea) {
					this.specialArea = options.childArea;
					// this.diff = 1
				} else {
					JSON.parse(options.children).forEach((item) => {
						if (item.isShow) {
							arr.push(item.value);
						}
					});
					this.specialArea = arr[0];
					// this.diff = 0
				}
				if (options.diff) {
					this.diff = options.diff;
				}
			} else {
				this.specialArea = options.specialArea;
			}

			this.titLabel = options.label;
			let tempArr = JSON.parse(options.children);
			if (this.specialArea != 18) {
				api.menuList().then((res) => {
					tempArr = tempArr.filter(item => res.data.find(ctem => ctem.menuKey == item.name));
					this.itemChildren = tempArr;
				});
			}
			// 修改标题
			uni.setNavigationBarTitle({
				title: this.titLabel,
				success: () => {},
			});
			// 获取一级分类并获取商品列表
			// this.getClassIfy()

			this.userInfo = uni.getStorageSync("User");
			console.log('%c [ this.userInfo ]-242', 'font-size:13px; background:#cb38d2; color:#ff7cff;', this.userInfo)
			if (this.specialArea == 1) {
				if (uni.getStorageSync("pkCountry")) {
					this.pkCountry = uni.getStorageSync("pkCountry");
				} else {
					this.pkCountry = this.userInfo.pkSettleCountry;
					uni.setStorageSync("pkCountry", this.pkCountry + "");
				}
			} else {
				this.pkCountry = this.userInfo.pkSettleCountry;
			}
			this.setSpecial({
				value: this.specialArea
			});
		},
		onShow() {
			let that = this;
			uni.$on("returnData", function(data) {
				that.specialArea = data.value;
				that.setSpecial({
					value: data.value
				});
			});
			// 获取国家
			this.getJScountry();
			this.$nextTick(() => {
				this.$refs.cart.getCar()
			})
		},
		onHide() {
			this.$refs.cart.close()
			this.setSmallCarLength(0)
		},
		beforeDestroy() {
			console.log('beforeDestroy........?')
			this.setSmallCarLength(0)
		},
		methods: {
			...mapActions(['setSmallCarLength', 'setShopCarLength']),
			changeCountry() {
				this.isCountry = true;
			},
			sureCountry(e) {
				const {
					value
				} = e;
				this.pkCountry = value[0].id;
				this.pkCountryLabel = value[0].label;
				this.pkCountryImg = value[0].img;
				this.isCountry = false;
				uni.setStorageSync("pkCountry", this.pkCountry + "");
				// 获取分类一级
				this.getClassIfy();
				this.$refs.cart.getCar();
			},
			getJScountry() {
				api.currencyList().then((res) => {
					let data = res.data.map((item) => {
						return {
							img: item.nationalFlag2,
							id: item.pkId,
							label: item.shortName,
						};
					});
					this.countryList = [data];
					this.countryList[0].forEach((item) => {
						if (item.id == this.pkCountry) {
							this.pkCountryLabel = item.label;
							this.pkCountryImg = item.img;
						}
					});
				});
			},
			goShare() {
				uni.navigateTo({
					url: "/pages/specialArea/share?specialArea=7",
				});
			},
			setSpecial(item) {
				if (item.value == 21) {
					// uni.navigateTo({
					//   url:
					//     '/pages/specialArea/haIndex?label=' +
					//     this.titLabel +
					//     '&specialArea=21&children=' +
					//     JSON.stringify(this.itemChildren),
					// })
				} else {
					this.specialArea = item.value;
					this.getClassIfy();
				}
			},
			addCar(item) {
				let carList = {
					pkCountry: this.pkCountry,
					specialArea: item.specialArea,
					number: 1,
					waresCode: item.waresCode,
					productGroup: item.productGroup,
				};
				if (
					item.isMakerGift == 2 &&
					(item.specialArea == 1 || item.specialArea == 3)
				) {
					this.$refs.selSpaceGoods.getData(carList);
				} else {
					api.addShopping(carList).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '购物车添加成功',
								icon: "success",
								mask: true,
							});
							setTimeout(() => {
								this.$store
									.dispatch("getCarLength", this.specialArea)
									.then((res) => {
										this.shopCarLength = res.data.smallCount;
									});
							}, 200);
						}
					});
				}
			},
			getCatLength() {
				this.$store.dispatch("getCarLength", this.specialArea).then((res) => {
					this.shopCarLength = res.data.smallCount;
				});
			},
			getClassIfy() {
				api
					.classifyList({
						pkCountry: this.pkCountry,
						specialArea: this.specialArea,
						hierarchy: 0,
					})
					.then((res) => {
						res.data.unshift({
							classifyName: '全部',
							pkId: "",
						});
						this.oneList = res.data;
						this.oneId = this.oneList[0]?this.oneList[0].pkId : '';
						this.getClassIfyTwo(this.oneList[0].pkId);
						this.getAllGoods(this.oneList[0].pkId);
					});
			},
			// 获取分类二级
			getClassIfyTwo(pkId) {
				api
					.classifyList({
						specialArea: this.specialArea,
						pkParent: pkId,
						hierarchy: 1,
						pkCountry: this.pkCountry,
					})
					.then((res) => {
						res.data.unshift({
							classifyName: '全部',
							pkId: pkId,
						});
						this.twoList = res.data;
						this.twoId = pkId;
					});
			},
			getAllGoods(id) {
				api
					.getAllGoods({
						pkCountry: this.pkCountry,
						specialArea: Number(this.specialArea),
						pkAreaClassify: id ? id : "",
					})
					.then((res) => {
						this.goodList = res.data;
						this.goodList.forEach((item) => {
							if (item.waresName.length > 11) {
								item.waresName = item.waresName.substring(0, 11) + "...";
							}
						});
					});
			},
			getAllGoods1(id) {
				api
					.getAllGoods({
						pkCountry: this.pkCountry,
						specialArea: this.specialArea,
						waresName: this.waresName,
						pkAreaClassify: id ? id : this.oneId,
					})
					.then((res) => {
						this.goodList = res.data;
						this.goodList.forEach((item) => {
							if (item.waresName.length > 11) {
								item.waresName = item.waresName.substring(0, 11) + "...";
							}
						});
					});
			},
			goDetails(item) {
				if (item.preSaleStatus != 3 && item.isSale != 1) {
					uni.navigateTo({
						url: "/pages/specialArea/details?waresCode=" +
							item.waresCode +
							"&specialArea=" +
							item.specialArea,
					});
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.index_header {
		background: #fff;
		font-size: 18px;
		font-family: PingFang SC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		text-align: center;
		padding: 10px 0;
	}

	.content {
		background: #f9f9f9;
		height: 93vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.tabList_a {}

	.index_btm {
		flex: 1; // display: flex;

		.index_l {
			width: 198rpx;
			padding: 10rpx 0;
			font-size: 11px;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			position: absolute;
			height: 86vh;
			background: #f2f2f2;
		}

		.index_r {
			// flex: 1;
			background: #fff;
			margin-left: 198rpx; // padding: 20rpx;
			// display: flex;
		}
	}

	.classIfy {
		padding: 20rpx 20rpx;
		margin: 20rpx 0;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		
	}

	.actOne {
		// border-left: 6rpx solid #005BAC;
		color: #fff;
		background: #005BAC;
	}

	.tab {
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		margin-top: 20rpx;
		
	}

	.tab_i {
		// width: 120rpx;
		text-align: center;
		font-size: 14px;
		font-weight: 600;
		color: #999999;
		margin-right: 28rpx;
		white-space: nowrap;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f6f6f6;
		color: #666;
		border-radius: 200rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 1;
		height: 58rpx;
		box-sizing: border-box;
	}

	.actTab {
		// width: 120rpx;
		text-align: center;
		font-size: 14px;
		font-family: PingFang SC-Semibold, PingFang SC;
		font-weight: 600;
		// color: #005BAC;
		background-color: #005BAC;
		color: #fff;
		margin-right: 28rpx;
		white-space: nowrap;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 200rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 1;
		height: 58rpx;
		box-sizing: border-box;
	}

	.heng {
		width: 24px;
		height: 2px;
		background: #005BAC;
		border-radius: 1px 1px 1px 1px;
		margin-top: 4rpx;
	}

	.heng1 {
		width: 24px;
		height: 2px;
		background: f9f9f9;
		border-radius: 1px 1px 1px 1px;
		margin-top: 4rpx;
	}

	.heng2 {
		width: 24px;
		height: 2px;
		background: f9f9f9;
		border-radius: 1px 1px 1px 1px;
		margin-top: 4rpx;
	}

	::v-deep .u-scroll-list {
		padding-bottom: 10rpx;
	}

	.zhan {
		height: 200px;
	}

	.goodList {
		padding: 0 20rpx;
		height: 95vh;
		overflow-y: auto;

		.goodList_i {
			display: flex;
			border-bottom: 1px solid #eee;
			padding: 20rpx 0;
			position: relative;

			.goodList_ir {
				margin-left: 20rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;

				.goodList_ib {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #f82c1a;

					img {
						width: 56rpx;
						height: 56rpx;
					}
				}
			}

			.fly {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				background: #eee;
				opacity: 0.5;
			}
		}

		.cover {
			width: 152rpx;
			height: 152rpx;
			background: #ffffff;
			border: 1px solid #eeeeee;
			border-radius: 10rpx;
		}
	}

	.pv {
		font-size: 22rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.shareImg {
		position: fixed;
		margin: 14rpx 24rpx;
		z-index: 9999;
		right: 20rpx;
		top: 5rpx;
	}

	.shareImg1 {
		position: fixed;
		margin: 14rpx 24rpx;
		z-index: 1;
		right: 10rpx;
		top: 10rpx;
		display: flex;
		align-items: center;

		img {
			width: 40rpx;
			height: 30rpx;
			margin-right: 20rpx;
		}
	}

	.qzbq {
		background: #d61820;
		border-radius: 2px 2px 2px 2px;
		font-size: 10px;
		// font-family: PingFang SC-Semibold, PingFang SC;
		// font-weight: 600;
		color: #ffffff;
		padding: 0px 5px;
		margin-right: 5px;
	}

	.search {
		margin: 10rpx 20rpx;
		padding: 10rpx;
		background: #eeeeee;
		border-radius: 20px;
		font-size: 14px;
	}
</style>