junzitang/pages/classification/CateFour.vue

<template>
	<view :class="['qn-page-' + theme]">
		<view class="tabs-view" v-if="tlist.length">
			<u-tabs
				height="70"
				inactive-color="#2A2A2A"
				:active-color="primaryColor"
				:bar-style="{ borderRadius: '0', height: '4rpx', backgroundColor: primaryColor }"
				:list="tlist"
				name="title"
				font-size="28"
				:is-scroll="true"
				:current="cate_current"
				@change="cateChange($event)"
			></u-tabs>
		</view>
		<view class="clearfix main-cont" :style="mainStyle">
			<view class="float_left">
				<scroll-view scroll-y class="left-aside">
					<view v-for="(item, index) in flist" :key="index" class="f-item ellipsis" :class="{ active: item.id === one_id }" @click="tabtap(item, 1)">
						<view v-if="item.id === one_id" class="active-line primary-bg"></view>
						{{ item.title }}
					</view>
				</scroll-view>
			</view>
			<view class="float_right">
				<view class="search-view">
					<view class="search-li" @click="changeSearch('zh')">综合</view>
					<view class="search-li" @click="changeSearch('xl')">
						销量
						<view class="arrow-icon arrow-up"><u-icon name="arrow-up-fill" :color="sortt === 1 ? primaryColor : '#6c6c6c'" size="10"></u-icon></view>
						<view class="arrow-icon arrow-down"><u-icon name="arrow-down-fill" :color="sortt === 2 ? primaryColor : '#6c6c6c'" size="10"></u-icon></view>
					</view>
					<view class="search-li" @click="openKey('show_brand')">
						<text style="margin-right: 10rpx;">品牌</text>
						<u-icon color="#6c6c6c" name="arrow-down" size="20"></u-icon>
					</view>
					<view class="search-li" @click="openKey('show_support')">
						<text style="margin-right: 10rpx;">其他</text>
						<u-icon color="#6c6c6c" name="arrow-down" size="20"></u-icon>
					</view>
				</view>
				<!-- 品牌选择 -->
				<view class="cate-down-view" v-if="show_brand">
					<view class="search-pop">
						<view class="head-view clearfix">
							<text class="float_left">商品品牌</text>
							<view class="float_right" @click.stop="closeKey('show_brand')"><u-icon color="#8f8f8f" size="28" name="arrow-down"></u-icon></view>
						</view>
						<view class="cate-cont">
							<block v-for="(item, index) in brand_list" :key="index">
								<view class="cate-li ellipsis" :class="[brandId_zc.indexOf(item.id) > -1 ? 'primary-btn-pain' : '']" @click.stop="brandChange(item.id)">
									{{ item.title }}
								</view>
							</block>
						</view>
						<view class="btn-ul">
							<view class="btn-li primary-btn-pain" @click="resetBrand">重置</view>
							<view class="btn-li primary-bg" @click="confirmBrand">确认</view>
						</view>
					</view>
				</view>
				<!-- 商品服务选择 -->
				<view class="cate-down-view" v-if="show_support">
					<view class="search-pop">
						<view class="head-view clearfix">
							<text class="float_left">商品服务</text>
							<view class="float_right" @click.stop="closeKey('show_support')"><u-icon color="#8f8f8f" size="28" name="arrow-down"></u-icon></view>
						</view>
						<view class="cate-cont">
							<block v-for="(item, index) in support_list" :key="index">
								<view class="cate-li ellipsis" :class="[supplier_zc.indexOf(item.id) > -1 ? 'primary-btn-pain' : '']" @click.stop="supportChange(item.id)">
									{{ item.servicesName }}
								</view>
							</block>
						</view>
						<view class="btn-ul">
							<view class="btn-li primary-btn-pain" @click="resetSupport">重置</view>
							<view class="btn-li primary-bg" @click="confirmSupport">确认</view>
						</view>
					</view>
				</view>
				<!-- 三级下拉菜单 -->
				<view class="cate-down-view" @click="changeThreeCate(false)" v-if="show_cate">
					<view @click.stop="changeThreeCate(true)">
						<view class="head-view clearfix">
							<text class="float_left">{{ two_cate }}</text>
							<view class="float_right" @click.stop="changeThreeCate(false)"><u-icon color="#8f8f8f" size="28" name="arrow-down"></u-icon></view>
						</view>
						<view class="cate-cont">
							<view
								v-for="(item, index) in three_cate"
								:key="index"
								class="cate-li"
								:class="[three_id === item.id ? 'primary-btn-pain' : '']"
								@click.stop="threeCateChange(item)"
							>
								{{ item.title }}
							</view>
						</view>
					</view>
				</view>
				<view class="right-aside clearfix">
					<view class="three-cate" v-if="three_cate.length">
						<scroll-view :scroll-x="true" class="three-cate-scroll">
							<view
								v-for="(item, index) in three_cate"
								:key="index"
								:class="[three_id === item.id ? 'primary-btn-pain' : '']"
								class="cate-li"
								@click="threeCateChange(item)"
							>
								{{ item.title }}
							</view>
						</scroll-view>
						<view class="down-btn" @click="changeThreeCate(true)"><u-icon color="#8f8f8f" size="28" name="arrow-down"></u-icon></view>
					</view>

					<!-- 循环item出来为对象 -->
					<scroll-view
						class="right-aside-scroll"
						:style="goodsScrollHeight"
						scroll-y
						lower-threshold="100px"
						@scrolltolower="lower"
						v-if="shoppingList.length > 0"
						:scroll-top="scroll_top_num"
					>
						<view class="goods-li" v-for="(item, index) in shoppingList" :key="index">
							<GoodsItem :isList="true" :item="item" @addCart="addCard(item.id)"></GoodsItem>
						</view>
						<u-loadmore margin-top="20" v-if="shoppingList.length" :status="loading_status" />
					</scroll-view>
					<Aempty text="没有商品" src="https://onlineimg.qianniao.vip/search.png" v-else></Aempty>
				</view>
			</view>
			<AddCardModel :selAddress="selAddressD" @close="cardModelPopChange" :isShow="is_add_show" :goodsId="goods_id" />
		</view>
	</view>
</template>

<script>
import GoodsItem from '@/components/GoodsItem.vue';
import Login from '@/components/Login.vue';
import AddCardModel from '@/components/AddCardModel';

export default {
	components: {
		AddCardModel,
		GoodsItem,
		Login
	},

	data() {
		return {
			show_support: false,
			show_brand: false,
			show_cate: false,
			cate_current: 0,
			is_add_show: false,
			goods_id: 0,
			loading_status: 'loadmore',
			isShow: false,
			scroll_top_num: 0,
			sizeCalcState: false,
			tabScrollTop: 0,
			currentId: 1,
			flist: [],
			slist: [],
			shoppingList: [],
			tlist: [],
			priceInfo: [],
			before_cartNum: 0,
			page: 1,
			pageSize: 10,
			pageTotal: 0,
			selAddressD: {},
			three_cate: [],
			two_cate: '',
			three_id: 0,
			one_id: 0,
			brandId_zc: [],
			brand_list: [], // 商品品牌列表
			support_list: [], // 商品服务列表
			supplier_zc: [],
			support: [], //商品服务
			brandId: [], // 品牌多选
			// sort 是js保留字段，所以定义为 sortt
			sortt: '' // 销量 1是从大到小，2是从小到大, 默认不传
		};
	},
	props: {
		isLogin: {
			type: Boolean,
			default: true
		},
		selAddress: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	computed: {
		cartNum() {
			return this.$store.state.cartNum;
		},
		// 判断手机是否有刘海
		isBang() {
			return this.$_utils.modelmes();
		},
		mainStyle() {
			return `paddingTop: ${this.tlist.length > 0 ? '0' : '12rpx'};height: calc(100vh - 112rpx - ${this.isBang ? '84px' : '50px'} - ${
				this.tlist.length > 0 ? '80rpx' : '0rpx'
			})`;
		},
		goodsScrollHeight() {
			return `height:${this.three_cate.length ? 'calc(100% - 62rpx - 90rpx)' : 'calc(100% - 62rpx)'}`;
		},
		userId() {
			return this.$store.state.userStatus.id;
		}
	},
	watch: {
		selAddress(val) {
			this.selAddressD = val;
		},
		'$store.state.locationObj'(val) {
			if (JSON.stringify(val) === '{}') {
				return;
			}
			this.shoppingList = [];
			this.pageSize = 10;
			this.getGoodsByCategory();
		},
		async isLogin(Nval) {
			this.tlist = [];
			if (Nval) {
				this.shoppingList = [];
				this.pageSize = 10;
				await this.getAllCategory();
				await this.getGoodsByCategory();
			}
		}
	},
	async created() {
		await this.getAllCategory();
		await this.getAllGoodsSupport();
		await this.getAllBrand();
	},
	methods: {
		changeSearch(tag) {
			if (tag === 'zh') {
				this.brandId = [];
				this.sortt = '';
				this.support = [];
			} else if (tag === 'xl') {
				if (this.sortt === 2) {
					this.sortt = 1;
				} else {
					this.sortt = 2;
				}
			}
			this.page = 1;
			this.getGoodsByCategory();
		},
		// 选择品牌
		brandChange(id) {
			const index = this.brandId_zc.indexOf(id);
			if (index > -1) {
				this.brandId_zc.splice(index, 1);
			} else {
				this.brandId_zc.push(id);
			}
		},
		confirmBrand() {
			this.brandId = this.brandId_zc;
			this.page = 1;
			this.getGoodsByCategory();
			this.closeKey('show_brand');
		},
		// 选择服务
		supportChange(id) {
			const index = this.supplier_zc.indexOf(id);
			if (index > -1) {
				this.supplier_zc.splice(index, 1);
			} else {
				this.supplier_zc.push(id);
			}
		},
		resetBrand() {
			this.brandId = [];
			this.page = 1;
			this.getGoodsByCategory();
			this.closeKey('show_brand');
		},
		resetSupport() {
			this.support = [];
			this.page = 1;
			this.getGoodsByCategory();
			this.closeKey('show_support');
		},
		confirmSupport() {
			this.support = this.supplier_zc;
			this.page = 1;
			this.getGoodsByCategory();
			this.closeKey('show_support');
		},
		openKey(key) {
			if (key === 'show_support') {
				this.supplier_zc = this.$u.deepClone(this.support);
			} else {
				this.brandId_zc = this.$u.deepClone(this.brandId);
			}
			this[key] = true;
		},
		closeKey(key) {
			this[key] = false;
		},
		// 打开购物车
		cardModelPopChange(obj) {
			this.is_add_show = false;
		},
		// 加入购物车
		addCard(id) {
			this.goods_id = id;
			this.is_add_show = true;
		},
		changeThreeCate(show) {
			this.show_cate = show;
		},
		// 分类列表 getAllCategory
		getAllCategory() {
			this.$u.api
				.getAllCategory({
					userCenterId: this.userId || 0
				})
				.then(data => {
					this.flist = data.data;
					if (data.data.length) {
						this.tlist = data.data[0].children || [];
						this.currentId = data.data[0].id;
						this.one_id = data.data[0].id;
						// 二级菜单添加全部按钮
						if (this.tlist.length) {
							this.tlist.unshift({
								title: '全部',
								id: data.data[0].id,
								pid: 0
							});
						}
					}
					this.getGoodsByCategory();
				});
		},
		// 上拉加载
		lower(e) {
			if (this.pageTotal / this.pageSize > this.page) {
				this.page += 1;
				this.getGoodsByCategory();
			}
		},
		// 获取商品列表
		getGoodsByCategory() {
			this.loading_status = 'loading';
			this.isShow = false;
			this.$u.api
				.getGoodsByCategory({
					categoryId: this.three_id || this.currentId,
					page: this.page,
					pageSize: this.pageSize,
					brandId: this.brandId,
					sort: this.sortt,
					support: this.support
				})
				.then(data => {
					this.scroll_top_num = 1;
					const goods = data.data.map(item => {
						return {
							...item,
							isShow: false
						};
					});
					if (this.page === 1) {
						this.shoppingList = goods;
					} else {
						this.shoppingList = this.shoppingList.concat(goods);
					}
					this.pageTotal = data.pageTotal;
					this.loading_status = this.$_utils.loadStatus(this.page, this.pageSize, this.pageTotal);
				});
		},
		//一级分类点击
		tabtap(item, lever) {
			this.currentId = item.id;
			this.changeThreeCate(false);

			if (lever === 1) {
				this.one_id = item.id;
				// 一级菜单
				this.cate_current = 0;
				const tlist = this.flist.find(cate => cate.id === item.id);
				this.tlist = tlist.children || [];
				// 二级菜单添加全部按钮
				if (this.tlist.length && !this.tlist.find(cate => cate.title === '全部')) {
					this.tlist.unshift({
						title: '全部',
						id: item.id
					});
				}
				this.three_id = 0;
				this.three_cate = [];
			} else if (lever === 2) {
				// 二级菜单
				this.two_cate = item.title;
				// 三级分类
				this.three_cate = item.children || [];
				// 三级分类添加全部按钮
				if (this.three_cate.length && !this.three_cate.find(cate => cate.title === '全部')) {
					this.three_cate.unshift({
						title: '全部',
						id: item.id
					});
				}
				this.three_id = item.id;
			}

			this.page = 1;
			this.shoppingList = [];
			this.$nextTick(() => {
				this.scroll_top_num = 0;
			});
			// 商品列表的切换
			this.getGoodsByCategory();
			// 品牌列表切换
			this.getAllBrand();
		},
		cateChange(index) {
			this.cate_current = index;
			// 商品列表的切换
			this.tabtap(this.tlist[index], 2);
		},
		threeCateChange(row) {
			this.three_id = row.id;
			this.tabtap(row, 3);
		},
		// 商品服务
		async getAllGoodsSupport() {
			await this.$u.api
				.getAllGoodsSupport({
					page: 1,
					pageSize: 100
				})
				.then(res => {
					this.support_list = res.data;
				});
		},
		// 商品品牌
		async getAllBrand() {
			await this.$u.api
				.getAllBrand({
					page: 1,
					pageSize: 999,
					categoryId: this.three_id || this.currentId
				})
				.then(res => {
					this.brand_list = res.data;
				});
		}
	}
};
</script>

<style lang="scss">
.tabs-view {
	border-bottom: 1px solid #eeeeee;
	font-weight: 510;
}
.main-cont {
	overflow: hidden;
	.float_left {
		height: 100%;
		.left-aside {
			width: 182upx;
			height: 100%;
			background-color: #f5f6f7;

			.f-item {
				-webkit-line-clamp: 1;
				width: 100%;
				height: 80upx;
				line-height: 80rpx;
				margin: 13rpx 0;
				text-align: center;
				font-size: 28upx;
				color: #4b4b4b;
				position: relative;
				&.active {
					color: #000000;
					font-weight: bold;
					background-color: #ffffff;
				}
				.active-line {
					position: absolute;
					left: 22rpx;
					top: 50%;
					transform: translateY(-50%);
					height: 24upx;
					width: 4upx;
					border-radius: 4rpx;
				}
			}
		}
	}
	.float_right {
		height: 100%;
		position: relative;
		.search-view {
			display: flex;
			font-size: 24rpx;
			text-align: center;
			line-height: 60rpx;
			border-bottom: 1px solid #eeeeee;
			.search-li {
				flex: 4;
				position: relative;
				.arrow-icon {
					/* #ifdef H5 */
					transform: scale(0.5, 0.5);
					/* #endif */
					position: absolute;
					right: 20rpx;
					color: #6c6c6c;
				}

				.arrow-down {
					top: 6rpx;
				}
				.arrow-up {
					bottom: 14rpx;
				}
			}
		}
		.cate-down-view {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 999;
			.head-view {
				line-height: 86rpx;
				font-size: 24rpx;
				color: #666666;
				background-color: #ffffff;
				padding: 0 24rpx;
			}
			.cate-cont {
				display: flex;
				flex-wrap: wrap;
				max-height: 420rpx;
				overflow: auto;
				background-color: #ffffff;
				.cate-li {
					text-align: center;
					display: inline-block;
					width: 150rpx;
					border: 1px solid #c6c6c6;
					height: 48rpx;
					line-height: 48rpx;
					font-size: 24rpx;
					margin-left: 24rpx;
					border-radius: 66rpx;
					margin-bottom: 20rpx;
					-webkit-line-clamp: 1;
				}
			}
		}
		.right-aside {
			position: relative;
			height: 100%;
			width: 568upx;
			overflow: hidden;
			background-color: #ffffff;
			.three-cate {
				position: relative;
				.three-cate-scroll {
					padding: 20rpx 0;
					width: 100%;
					white-space: nowrap;
					.cate-li {
						padding: 0 20rpx;
						display: inline-block;
						font-size: 20rpx;
						margin-left: 10rpx;
						border: 1px solid #c6c6c6;
						border-radius: 50rpx;
						height: 50rpx;
						line-height: 50rpx;
						&:last-child {
							margin-right: 60rpx;
						}
					}
				}
				.down-btn {
					position: absolute;
					background-color: #ffffff;
					width: 60rpx;
					text-align: center;
					right: 0;
					top: 0;
					height: 90rpx;
					line-height: 90rpx;
				}
			}
			.right-aside-scroll {
				height: 100%;
				.goods-li {
					border-bottom: 1px solid #f4f5f6;
				}
			}
			.nullSty {
				font-size: 26upx;
				text-align: center;
				vertical-align: middle;
				color: #999;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				image {
					width: 240upx;
					height: 160upx;
					margin-bottom: 30upx;
				}
			}
		}
	}
}
.search-pop {
	background-color: #ffffff;
	padding-bottom: 20rpx;
	.btn-ul {
		display: flex;
		padding-top: 20rpx;
		.btn-li {
			flex: 2;
			margin: 0 30rpx;
			border: 1px solid $uni-color-primary;
			border-radius: 8rpx;
			line-height: 50rpx;
			font-size: 24rpx;
			text-align: center;
		}
	}
}
</style>