dajiankang-uniapp/pages/cate/cate.vue

<template>
	<view class="u-wrap">
		<wd-search @search="search" @clear="clear" placeholder-left placeholder="搜一搜药品名称" hide-cancel :customStyle="{ background: '#799675', height: '80rpx' }" />
		<view class="u-menu-wrap">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view">
				<view
					v-for="(item, index) in goodsCate"
					:key="index"
					class="u-tab-item"
					:class="[current == index ? 'u-tab-item-active' : '']"
					:data-current="index"
					@tap.stop="swichMenu(index, item.id)"
				>
					<text class="u-line-1">{{ item.name }}</text>
				</view>
			</scroll-view>

			<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList" :paging-style="{ 'background-color': '#FFF' }">
				<view class="right-box">
					<view class="page-view">
						<view class="page-view_item" v-for="(item, index) in dataList" :key="index" @click="toGoods(item.id)">
							<image :src="item.cover" mode="aspectFill"></image>
							<view style="flex: 1">
								<view class="page-view_item_title">{{ item.name }}</view>
								<view class="page-view_item_info">{{ item.specs }}</view>
								<view class="page-view_item_price">
									<view class="page-view_item_price_left">￥{{ item.currentPrice }}</view>
									<view class="page-view_item_price_right">￥{{ item.originalPrice }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</z-paging>

			<!-- 		
			<scroll-view scroll-y class="right-box">
				<view class="page-view">
					<view class="page-view_item" v-for="(item, index) in goodsList" :key="index" @click="toGoods(item.id)">
						<image :src="item.cover" mode="aspectFill"></image>
						<view style="flex: 1">
							<view class="page-view_item_title">{{ item.name }}</view>
							<view class="page-view_item_info">{{ item.specs }}</view>
							<view class="page-view_item_price">
								<view class="page-view_item_price_left">￥{{ item.originalPrice }}</view>
								<view class="page-view_item_price_right">￥{{ item.currentPrice }}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view> -->
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import api from '@/api/index';
const current = ref<number>(0);
const goodsCate = ref([]);
const goodsList = ref([]);
const paging = ref(null);
const dataList = ref([]);
const goodsCateId = ref(null);
const name = ref('');
// interface goodsCateType {
// 	list: Array;
// 	total: number;
// }

onLoad(() => {
	api.goodsCate().then((res: any) => {
		goodsCate.value = res.list;
		goodsCateId.value = res.list[0].id;
	});
});

const queryList = (pageNo, pageSize) => {
	if (!goodsCateId.value) {
		api.goodsCate().then((res: any) => {
			goodsCate.value = res.list;
			goodsCateId.value = res.list[0].id;
			api.goodsPage({ pageNo, pageSize, categoryId: goodsCateId.value, name: name.value })
				.then((res: any) => {
					paging.value.complete(res.list);
				})
				.catch((res) => {
					paging.value.complete(false);
				});
		});
	} else {
		api.goodsPage({ pageNo, pageSize, categoryId: goodsCateId.value, name: name.value })
			.then((res: any) => {
				paging.value.complete(res.list);
			})
			.catch((res) => {
				paging.value.complete(false);
			});
	}
};

const toGoods = (e) => {
	uni.navigateTo({
		url: `/pages/goods/goods?id=${e}`
	});
};

const clear = () => {
	name.value = '';
	paging.value.reload();
};

const search = (e) => {
	name.value = e.value;
	paging.value.reload();
};

let swichMenu = (index, id) => {
	current.value = index;
	goodsCateId.value = id;
	paging.value.reload();
	// api.goodsPage({ categoryId: id }).then((res) => {
	// 	goodsList.value = res.list;
	// });
};
</script>

<style lang="scss" scoped>
.u-wrap {
	height: calc(100vh);
	/* #ifdef H5 */
	height: calc(100vh - var(--window-top));
	/* #endif */
	display: flex;
	flex-direction: column;
}

.u-search-box {
	padding: 18rpx 30rpx;
}

.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: #799675;
	margin-left: 10rpx;
}

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

.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;
}

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

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

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

.right-box {
	width: 550rpx;
	flex: 1;
	background-color: #fff;
	// background-color: rgb(250, 250, 250);
}

.page-view {
	padding: 16rpx;

	&_item {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
		image {
			width: 160rpx;
			height: 160rpx;
			margin-right: 22rpx;
			border-radius: 18rpx;
		}
		&_title {
			font-size: 28rpx;
			font-weight: bold;
			color: #232323;
		}

		&_info {
			font-weight: 400;
			font-size: 24rpx;
			color: #232323;
			margin: 20rpx 0;
		}

		&_price {
			display: flex;
			align-items: center;
			&_left {
				font-weight: bold;
				font-size: 38rpx;
				color: #ff2929;
				margin-right: 35rpx;
			}
			&_right {
				font-size: 24rpx;
				color: #999999;
				text-decoration-line: line-through;
			}
		}
	}
}

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

.item-title {
	font-size: 26rpx;
	color: #000;
	font-weight: bold;
}

.item-menu-name {
	font-weight: normal;
	font-size: 24rpx;
	color: #000;
}

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

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

.item-menu-image {
	width: 120rpx;
	height: 120rpx;
}
</style>