Homestay_manage_app/packageShang/pages/tabbar/category.vue

<template>
	<view class="wh-full">
		<view class="top-bg">
			<!-- <view class="top-kuang">
				<view class="top-title">分类</view>
			</view>
			<view style="width: 100%;height: 26rpx;"></view> -->
			<!-- 头部组件 -->
			<use-header :fixed="headerFixed" :placeholder="headerPlaceholder" :search-tip="searchTip" :search-auto="searchAuto"></use-header>
		</view>

		<!-- 分类 -->
		<view class="category dflex-s h-full padding-top-big" v-for="item in fdatas" :key="item.id">
			<!-- 左侧一级分类 -->
			<view class="h-full left">
				<scroll-view scroll-y class="h-full">
					<view  class="item dflex-c" v-for="item in fdatas" :key="item.id"
						:class="{ active: item.id === cid }" @click="fSelect(item)">{{ item.name }}</view>
				</scroll-view>
			</view>

			<!-- 右侧 1二级分类 2商品列表 -->
			<scroll-view class="h-full right bg-main" scroll-with-animation scroll-y :scroll-top="top"
				:style="{ height: scrollHeight }" @scroll="onScroll">
				<!-- 右侧二级分类 -->
				<view class="dflex-s dflex-wrap-w" v-if="mode == 1">
					<view class="item padding-bottom-sm dflex dflex-flow-c" v-if="list.pid == cid"
						v-for="(list, listindex) in sdatas" :key="listindex" @click="togoodslist(list)">
						<image :lazy-load="true" :src="list.icon"></image>
						<text class="tac clamp margin-top-sm">{{ list.name }}</text>
					</view>
				</view>

				<!-- 右侧分类对应商品列表 -->
				<view v-if="mode == 2">
					<!-- 空白页 -->
					<use-empty v-if="empty" e-style="round" tip="无商品数据"></use-empty>

					<view v-else class="padding-lr" v-for="(list, listindex) in goodsDatas" :key="listindex"
						@click="togoods(list)">
						<view class="goods border-radius-sm padding margin-bottom-sm bg-main"
							style="padding-bottom: 15rpx;">
							<view class="goods-left">
								<image mode="aspectFill" :lazy-load="true" :src="list.imgs"></image>
							</view>
							<view class="margin-left-sm pos-r">
								<text class="clamp-2">{{ list.name }} {{ list.name_pw }}</text>
								<view class="pos-a price-box w-full">
									<text class="price">{{ list.price }}</text>
									<text class="m-price">{{ list.marketPrice }}</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 上拉加载更多 -->
					<use-loadmore v-if="!empty && hasmore" :type="loadmoreType"></use-loadmore>
					<!-- 置顶 -->
					<use-totop ref="usetop" bottom="150" :style="{ marginBottom: navHeight + 'px' }" @to="totop"></use-totop>
				</view>
			</scroll-view>
		</view>

		<!-- 切换模式 1二级分类 2商品列表 -->
		<!-- <view class="fixed-top" :style="{ marginBottom: navHeight + 'px' }" @click="changeMode">
			<text class="iconfont iconpailie" v-if="mode == 1"></text>
			<text class="iconfont iconpailie02" v-if="mode == 2"></text>
		</view> -->
		<!-- <tabbar :current-page="1"></tabbar> -->
	</view>
</template>

<script>
	import {
		goodsCate
	} from '../../utils/api_category.js'
	import {
		goodslistlimit
	} from '../../utils/api_home.js'
	import useHeader from '../../components/use-header/use-header.vue'
	import useEmpty from '../../components/use-empty/use-empty.vue'
	import useLoadmore from '../../components/use-loadmore/use-loadmore.vue'
	import useTotop from '../../components/use-totop/use-totop.vue'
	// import tabbar from '../tabbar.vue'
	const _goods = 'usemall-goods'
	const _goodscategory = 'usemall-goods-category'
	export default {
		components:{
			useHeader,
			useEmpty,
			useLoadmore,
			useTotop,
			// tabbar
		},
		data() {
			return {
				// 1分类列表 2商品列表
				mode: 1,
				// 兼容支付宝 height 显示 bug
				scrollHeight: '100%',

				// 头部参数
				headerPlaceholder: 0,
				headerFixed: !0,
				searchAuto: !0,
				searchTip: '请输入搜索关键字',

				// 当前选中分类ID
				cid: 0,
				// 一级数据
				fdatas: [
				],
				// 二级数据
				sdatas: [],

				// 商品列表
				goodsDatas: [],
				empty: false,
				hasmore: 0,
				loadmoreType: 'nomore',
				// 商品请求数据
				reqdata: {
					rows: 20,
					page: 1
				},

				top: 0,
				scrollTop: 0,
				navHeight: 0
			};
		},
		watch: {
			goodsDatas(e) {
				// 监听数据，呈现空白页
				let empty = e.length === 0;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		},
		onPageScroll(e) {
			//this.scrollTop = e.scrollTop;
			// this.$refs.usetop.change(e.scrollTop);
		},
		onLoad(option) {
			// #ifdef MP-ALIPAY
			// this.scrollHeight = (this.$env.windowHeight - this.$env.sis.titleBarHeight) + 'px';
			// #endif

			// 获取存储的模式
			// this.mode = uni.getStorageSync('category.mode') || 1;

			this.cid = option.cid;
			this.loadData(() => {
				if (this.mode == 2) {
					// 加载商品数据
					this.loadGoodsDatas()
				}
			});
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.loadData(() => {
				uni.stopPullDownRefresh();
			});
		},
		methods: {
			loadData(callback) {
				//商品分类树形列表
				let _self = this;
				_self.fdatas = []
				goodsCate().then((res) => {
					if (res.success) {
						res.data.forEach(data => {
							_self.fdatas.push(data)
						})		
						if (res.data.length > 0) {
							// _self.cid = _self.fdatas[0].id;
							// _self.sdatas=_self.fdatas[0].childCategory
							for(var i=0;i<_self.fdatas.length;i++){
								if(_self.cid==_self.fdatas[i].id){
									_self.sdatas=_self.fdatas[i].childCategory
								}
							}
						}
						if (typeof callback === 'function') {
							// 数据加载完成回调函数
							callback();
						}
					}else{
						_self.$message.warning('没有符合条件的数据！')
					}
				})
			},
			// 加载商品数据
			loadGoodsDatas() {
				let _self = this;
				if (_self.mode != 2) {
					return;
				}
				// 根据当前 cid 加载商品数据列表
				_self.reqdata.cid = _self.cid;
				_self.goodsDatas=[]
				var data='?categoryId='+_self.reqdata.cid+'&categoryLevel=1'
				goodslistlimit(data).then((res) => {
					if (res.success) {
						var total=res.data.totalCount
						data='categoryId='+_self.reqdata.cid+'&categoryLevel=1&pageSize='+total
						goodslistlimit(data).then((res) => {
							if (res.success) {
								res.data.list.forEach(data => {
									_self.goodsDatas.push(data)
								})
							}else{
								_self.$message.warning('没有符合条件的数据！')
							}
						})
					}
				})
			},
			totop(e) {
				this.top = e.scrollTop
				this.$nextTick(function() {
					this.top = 0
				});
			},
			// 一级分类
			fSelect(item) {
				for(var i=0;i<this.fdatas.length;i++){
					if(item.id==this.fdatas[i].id){
						this.sdatas=this.fdatas[i].childCategory
					}
				}
				this.cid = item.id;
				this.loadGoodsDatas();
			},
			// 切换模式 1分类模式 2商品模式
			changeMode() {
				this.mode = this.mode == 1 ? 2 : 1;

				this.loadGoodsDatas();
			},
			// 跳转商品详情
			togoods(item) {
				this.$api.togoods({
					id: item.id
				});
			},
			// 跳转商品列表
			togoodslist(item) {
				this.$api.togoodslist({
					cid: item.id,
					level:item.level,
					keyword:''//item.name
				});
			},
		},
		mounted() {
			// #ifdef H5 || MP-360
			this.navHeight = 50;
			// #endif
		}
	};
</script>

<style lang="scss">
	@import url('/packageShang/components/iconfont/iconfont.css');
	@import url('/packageShang/common/common.scss');
	page {
		height: 100%;
		background-color: $page-color-base;
	}
	// 顶部背景
	.top-bg{
		width: 100%;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		
		.top-kuang{
			width: 100%;
			height: 176rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 2rpx 0px rgba(236, 236, 236, 1);
			.top-title{
				padding: 106rpx 0 0 0rpx;
				text-align: center;
				font-size: 36rpx;
				font-weight: 500;
				line-height: 52rpx;
				color: rgba(0, 0, 0, 1);
			}
		}
	}

	.category {
		overflow: hidden;

		.left {
			width: 200rpx;
			background-color: $page-color-base;

			.item {
				height: 100rpx;
				color: $font-color-base;
				position: relative;

				&.active {
					color: $uni-color-primary;
					background: #fff;

					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						height: 36rpx;
						width: 8rpx;
						background-color: $uni-color-primary;
						opacity: 0.8;
					}
				}
			}
		}

		.right {
			flex: 1;
			overflow: hidden;
			display: block;

			.item {
				flex-shrink: 0;
				width: 33.33%;
				font-size: $font-sm + 2upx;
				color: #666;

				image {
					width: 130rpx;
					height: 130rpx;
				}
			}
		}
	}

	.goods {
		display: flex;

		.goods-left {
			image {
				width: 120rpx;
				height: 120rpx;
			}
		}

		.price-box {
			bottom: 0;
		}
	}
</style>