tire_parts_shop_applets/pages/tabBar/classification.vue

<template>
	<view class="u-wrap">
		<view class="u-search-box">
			<u-tabs :list="tabbar" @click="click" lineColor="#fff" :activeStyle="{ color: '#fff' }"
				:inactiveStyle="{ color: '#ffffff80' }">></u-tabs>
			<view style="padding: 10rpx;">
				<u-search placeholder="请输入商品名称" :actionStyle="{ color: '#fff' }" v-model="name"
				@search="custom" @custom="custom" :animation="true"></u-search>
			</view>
		</view>
		<view class="u-menu-wrap">
			<view class="u-tab-view">
				<view v-for="(item,index) in tabbarTwo" :key="index" class="u-tab-item"
					:class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
					<text class="u-line-1" style="text-align: center;">{{item.cname}}</text>
				</view>
			</view>
			<scroll-view @scrolltolower="lowerBottom" scroll-y="true" class="scrollHeight" style="max-height: 100vh;">
				<view class="right-box">
					<view class="page-view">
						<view class="class-item">
							<!-- <view class="item-title">
								<text>{{item.type}}</text>
							</view> -->
							<view class="item-container">
								<view class="thumb" style="display: flex;justify-content: space-between;"
									v-for="(itemTwo, indexTwo) in dataList" :key="indexTwo"
									@click="selectProduct(itemTwo)">
									<view>
										<image v-for="(itemThree,indexThree) in itemTwo.filesList" :key="indexThree"
											v-if="itemThree.version === '0'" class="item-menu-image"
											:src="itemThree.url">
										</image>
									</view>
									<view style="margin-left: 10rpx;width: 368rpx;">
										<view class="thumb-text">
											{{itemTwo.cname}}
										</view>
										<view style="color: #707070;font-size: 24rpx;">{{itemTwo.mallPrice}}</view>
										<view style="color: #FD4B09;font-size: 24rpx;">库存:{{itemTwo.inventory}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore v-if="page.total !== 0" :status="status" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import {
		listAll,
		goodsList
	} from '@/api/tabBar/classification.js'
	export default {
		data() {
			return {
				current: 0, // 预设当前项的值
				tabbar: [],
				dataList: [],
				show: false,
				status: 'loadmore',
				filesList: [],
				tabbarTwo: [],
				name: '',
				page: {
					total: 0,
					size: 10,
					current: 1
				},
				search: {}
			}
		},
		onShow() {
			listAll().then(res => {
				this.tabbarTwo = res.data
				this.page = {
					total: 0,
					size: 10,
					current: 1
				}
				this.search = {
					brandId: this.tabbarTwo[this.current].id
				}
				this.dataList = []
				this.onSearch()
			})
		},
		methods: {
			selectProduct(item) {
				uni.$u.route('/pages/views/buyGoods/commodityDetails', {
					id: item.id
				});
			},
			lowerBottom(){
				this.status = 'loading'
				if (this.dataList.length < this.page.total) {
					this.page.current++
					this.onSearch()
				} else {
					this.status = 'nomore'
				}
			},
			custom(){
				this.current = -1
				this.page = {
					total: 0,
					size: 10,
					current: 1
				}
				this.search = {
					cname:this.name
				}
				this.dataList = []
				this.onSearch()
			},
			swichMenu(index) {
				this.current = index;
				this.page = {
					total: 0,
					size: 10,
					current: 1
				}
				this.search = {
					brandId: this.tabbarTwo[this.current].id
				}
				this.dataList = []
				this.onSearch()
			},
			onSearch() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				goodsList({
					size: this.page.size,
					current: this.page.current,
					...this.search
				}).then(res => {
					this.dataList = this.dataList.concat(res.data.records)
					this.page.total = res.data.total
					if (this.dataList.length == res.data.total) {
						this.status = 'nomore'
					}
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.submitBar {
		width: 100%;
		font-size: 32rpx;
		color: #000;
		text-align: center;
		// border-top: 1rpx solid #f2f2f6;
	}

	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	.u-search-box {
		padding: 10rpx;
		padding-top: 0;
		background-color: #FD4B09;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	.u-tab-view {
		width: 200rpx;
		overflow-x: scroll;
		white-space: nowrap;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;

		white-space: normal;
		word-break: break-all;
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		// display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid #FD4B09;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}

	.u-tab-view {
		height: 100%;
	}

	.right-box {
		width: 100%;
		background-color: rgb(250, 250, 250);
		padding-bottom: 20rpx;
	}

	.page-view {
		padding: 16rpx;
	}

	.class-item {
		// margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	// .class-item:last-child {
	// 	min-height: 100vh;
	// }

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-menu-name {
		font-weight: normal;
		font-size: 24rpx;
		color: $u-main-color;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;
	}

	.thumb-box {
		width: 33.33333%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 20rpx;
	}

	.thumb {
		width: 100%;
		align-items: center;
		margin: 10rpx auto;
	}

	.thumb-text {
		font-size: 26rpx;
		white-space: normal;
		word-break: break-all;
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.thumb ::v-deep .u-cell__body {
		padding: 20rpx 0;
	}

	.item-menu-image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 20rpx;
	}

	::v-deep .u-popup {
		flex: 0;
	}
</style>