liveShop/pages/chainGoods/chainGoods.vue

<template>
	<view class="content">
		<view class="content">
			<!-- 顶部搜索 -->
			<navigator url="/pages/chainGoods/search">
				<view class="input-box flex">
					<view class="input-content flex">
						<!-- <view class="iconfont iconsearch"></view> -->
						<image src="https://zhibo.liuniu946.com/img/search.png" mode=""></image>
						<view class="input"><input disabled placeholder="商品搜索" /></view>
					</view>
				</view>
			</navigator>
			<!-- 顶部导航 -->
			<scroll-view scroll-x="true" class="class-box flex" :scroll-left="scrollLeft" :scroll-with-animation="true">
				<view @click="tabtap(item,idx)" class="item"  v-for="(item, idx) in tabTitle" :key="idx" >
					<view class="time" :class="{ action: idx == currentId }">{{ item.cate_name }}</view>
				</view>
			</scroll-view>
			</view>
			<swiper :current="currentId" class="list-Box" @change="swiperChange" duration="500">
				<swiper-item class="goodsList" v-for="(ls, idx) in tabTitle">
					<scroll-view scroll-y="true" class="list">
						<empty v-if="ls.dataList.length === 0"></empty>
						<view class="goods_item" v-for="(lss,ind) in ls.dataList" :key="ind" @click="navToDetailPage(lss)">
							<image :src="lss.image" mode=""></image>
							<view class="goods-details">
								<view class="title">
									{{ lss.store_name}}
								</view>
								<view class="price">
									<view class="purchasingPrice">
										<text class="tip">批发价</text>
										￥{{ lss.wholesaler_price}}
									</view>
									<view class="sellingPrice">
										<text class="tip">售价</text>
										￥{{lss.price}}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
	</view>
</template>

<script>
	import {
		getProducts
	} from '@/api/product.js';
	import {
		getList
	} from '@/api/category.js';
	import empty from '@/components/empty';
	export default {
		components: {
			empty
		},
		data() {
			return {
				page: 1,
				limit: 10,
				tabTitle: [], //导航栏格式
				loadingType: 'more', //加载更多状态
				currentId: 0, //一级选择id，
				actionClassInd: 0,
			}
		},
		computed: {
			// 计算左侧距离
			scrollLeft() {
				if (this.currentId > 1) {
					return this.itemWidht * (this.currentId - 1.5);
				} else {
					return 0;
				}
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			//头部导航栏点击事件
			tabtap(item,index) {
				this.currentId = index;
				this.actionClassInd = index
				let ls = this.tabTitle[this.actionClassInd];
				// 判断当前数据是否已经加载完毕
				if (ls.loadingType == 'more') {
					this.getDataList(ls);
				}
			},
			swiperChange(e) {
				this.currentId = e.target.current;
				this.getDataList(this.tabTitle[this.currentId], 'tabChange');
			},
			// 获取页面数据
			async loadData(type = 'add',loading) {
				let obj = this;
				let data = {
					page: obj.page,
					limit: obj.limit
				};
				//没有更多直接返回
				if (type === 'add') {
					if (obj.loadingType === 'nomore') {
						return;
					}
					obj.loadingType = 'loading';
				} else {
					obj.loadingType = 'more';
				}
				if (type === 'refresh') {
					// 清空数组
					obj.page = 1;
				}
				getList({})
					.then(({ data }) => {
						console.log('------',data);
						obj.tabTitle = data.map(e => {
							e.dataList = [];
							e.loadingType = 'more';
							e.page = 1;
							e.limit = 10;
							return e;
						});
						obj.currentId = 0;
						obj.getDataList(obj.tabTitle[0]);
						if (obj.tabTitle.length <= 4) {
							// 当数量小于等于4的时候自适应宽度
							obj.topNavWidth = 100 / obj.tabTitle.length + '%';
						} else {
							// 页面渲染完毕后加载scroll-view左侧距离
							obj.$nextTick(() => {
								obj.numClassWidht();
							});
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			// 跳转普通商品
			navToDetailPage(item) {
				console.log('-----item',item)
				uni.navigateTo({
					url: '/pages/product/product?id=' + item.id + '&wholesale=' + 1
				})
			},
			getDataList(item, type = 'add') {
				console.log('1997',item);
				const obj = this;
				const requestData = {
						page: item.page,
						limit: item.limit,
						cid: item.id,
						is_wholesale: 1,
					};
					// 判断数据是否加载中
					if (item.loadingType == 'nomore' || item.loadingType == 'loading') {
						return;
					}
					// 判断是否重新加载数据
					if(type=='refresh'){
						item.dataList=[];
					}
					// 设置数据加载中
					item.loadingType = 'loading';
					return new Promise((ok, erro) => {
						getProducts(requestData)
							.then(({ data }) => {
								data.forEach((sj,index) => {
									item.dataList.push(sj);
								})
								
								if (item.limit == data.length) {
									item.page++;
									item.loadingType = 'more';
								} else {
									item.loadingType = 'nomore';
								}
								if (type === 'refresh') {
									if (loading == 1) {
										uni.hideLoading();
									} else {
										uni.stopPullDownRefresh();
									}
								}
							})
							.catch(err => {
								console.log(err);
							});
					});
					
				},
				numClassWidht() {
					uni.createSelectorQuery()
						.select('.content')
						.fields(
							{
								size: true
							},
							data => {
								// 设置项目宽度
								// console.log(data);
								this.itemWidht = Math.floor((data.width / 750) * 187.5);
							}
						)
						.exec();
				},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		margin: 0;
		padding: 0;
	}
	.input-box {
		padding: 25rpx;
		background-color: #FE3D3D;
		height: 88rpx;
		margin-top: -1px;
		.iconsearch {
			font-size: 50rpx;
		}

		.input-content {
			border-radius: 99rpx;
			flex-grow: 1;
			padding: 4rpx 30rpx;
			background: #FFFFFF;

			image {
				width: 32rpx;
				height: 32rpx;
				margin: 14rpx 0;
			}

			.input {
				flex-grow: 1;
				color: #FF9090;

				input {
					font-size: 30rpx;
					color: #FF9090;
				}

				.input-placeholder {
					// height: 70rpx;
					color: #FF9090;
					margin-left: 14rpx;
				}
			}
		}

		.input-button {
			padding-left: 20rpx;
			font-size: $font-base;
			height: 100%;
		}
	}
.list-Box {
	height: calc(100vh - 136px);
	// height: 1027rpx;
	.list {
		height: 100%;
	}
}
.class-box {
	background: #FFFFFF;
	white-space: nowrap;
	height: 78rpx;
	.item {
		text-align: center;
		display: inline-block;
		color: $font-color-base;
		margin: 26rpx 34rpx 15rpx 29rpx;
		background-color: #ffffff;
		line-height: 1;
		.time {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			padding-bottom: 19rpx;
			&.action {
				color: $color-red;
				border-bottom: 4rpx solid #FF0000;
			}
		}
	}
}

	.goodsList {
		margin-top: 22rpx;
		width: 100%;
		background-color: #FFFFFF;
		padding: 0 24rpx;
		
		.goods_item:nth-last-child(1){
			border-bottom: none;
		}
		.goods_item {
			display: flex;
			align-items: center;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #F0f0f0;

			image {
				flex-shrink: 0;
				width: 146rpx;
				height: 146rpx;
				border-radius: 8rpx;
			}

			.goods-details {
				width: 100%;
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;

				.title {
					color: #333;
					font-size: 32rpx;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.price {
					margin-top: 48rpx;
					display: flex;
					justify-content: space-between;
					color: #ff0000;
					font-size: 34rpx;

					.purchasingPrice {
					}

					.sellingPrice {
						margin-right: 44rpx;
					}

					.tip {
						margin-bottom: 18rpx;
						margin-right: 6rpx;
						color: #999999;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>