xk-client-wx/pages/cate/index.vue

<template>
	<view class="container safe-area-inset-bottom">
		<!-- 搜索 -->
		<view class="search">
			<u-search placeholder="输入文章标题" bg-color="#F5f5f5" color="#DDDDDD" border-color="#F5f5f5"
				:show-action="false" maxlength="21" height="66" :clearabled="true" shape="round" v-model="keyword"
				@search="toSearch">
			</u-search>
		</view>

		<!-- 商品 -->
		<!-- //药品分类左 -->
		<view class="goods">
			<view class="goods_left" @touchmove.stop>
				<scroll-view scroll-y scroll-with-animation class="u-menu-scroll-view" :scroll-top="scrollTop"
					:scroll-into-view="itemId">
					<view v-for="(item,index) in categoryLists" :key="item.id" class="u-tab-item"
						:class="[num == item.id ? 'u-item-active' : '']" @tap.stop="changeStyle(item.id)"
						@click="handleCategory1(item.id,index)">
						<text class="u-line-1">{{item.name}}</text>
					</view>
				</scroll-view>
			</view>
			<!-- //药品分类右 -->
			<view class="goods_right">
				<!-- 药品 -->
				<view class="second">
					<!-- 商品列表 -->
					<view class="list" v-for="(item,index) in infoList" @click="toDetail(item.id)" :key="item.id">
						<view class="list_">
							<image :src="item.cover||'/static/xx/cp.png'" mode=""></image>
							<view class="list_title">
								{{item.title}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		categoriesList,
		articleList,
		addCart

	} from '../../request/api/api'
	export default {
		data() {
			return {
				keyword: "",
				scrollTop: 0, //tab标题的滚动条位置
				oldScrollTop: 0, // tab标题的滚动条旧位置
				current: 1, // 预设当前项的值
				num: 1,
				itemId: '', // 栏目右边scroll-view用于滚动的id
				categoryLists: [], //分类
				cid: 1, //分类一级id
				infoList: [],
				selectIndex: 0,
				arr: [], // 储存距离顶部高度的数组
				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
				show: false
			}
		},
		onLoad(op) {
			
		},
		methods: {
			// 搜索
			toSearch() {
				this.getList()
			},
			/*切换需要*/
			changeStyle(id) {
				this.num = id
			},
			// 详情
			toDetail(e) {
				uni.navigateTo({
					url: '/pages/cate/info-detail?id=' + e
				})
			},
			//点击药品一级分类e
			handleCategory1(e, index) {
				this.num = e
				this.cid = e
				this.getArticleList()
			},

			//获取药品分类
			getList() {
				categoriesList({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					// console.log(res, 'list');
					if (res.data.errcode == 0) {
						// console.log(res, 'res');
						this.categoryLists = res.data.data.list
						this.cid = res.data.data.map(x => x.id)
						this.num = res.data.data[0].id //初始选中
						// this.current = res.data.data[0].subs[0].id //初始选中2
					}
				})

				this.getArticleList()
			},
			// 文章列表
			getArticleList() {
				articleList({
					method: "get",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
						cid: this.cid
					}
				}).then((res) => {
					// console.log(res, 'list');
					if (res.data.errcode == 0) {
						this.infoList = res.data.data.list
						// console.log(res, 'list')
					}

				})
			}
		},
		mounted() {
			// this.getList();
		},
		onShow() {
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F6F9FB;
		width: 750rpx;
		max-height: 100%;
		min-height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);

		.search {
			width: 750rpx;
			background-color: #fff;
			height: 98rpx;
			margin: 0 auto;
			padding: 16rpx 30rpx;

			.u-search {
				width: 686rpx;
				height: 66rpx;
				margin: 0 auto;
			}
		}



		.goods {
			width: 750rpx;
			min-height: calc(100vh - 98rpx);
			display: flex;

			.goods_left {
				width: 184rpx;
				background: #fff;
				margin-right: 16rpx;

				.u-tab-item {
					width: 184rpx;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: bold;
					color: #9EA7B1;
				}

				.u-item-active {
					width: 184rpx;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					background: #F6F9FB;
					border-left: 4rpx solid #4175EE;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #232323;
				}
			}

			.goods_right {
				width: 530rpx;
				background: #F6F9FB;

				.second {
					width: 530rpx;
					text-align: center;
					margin-top: 20rpx;

					.list {

						.list_ {
							width: 500rpx;
							height: 246rpx;
							background: #FFFFFF;
							border-radius: 12rpx 12rpx 0rpx 0rpx;
							position: relative;
							margin: 10rpx auto;

							image {
								width: 100%;
								height: 100%;
								border-radius: 8rpx;
							}

							.list_title {
								width: 100%;
								position: absolute;
								left: 0%;
								bottom: 0;
								height: 92rpx;
								font-size: 22rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
								background: rgba(0, 0, 0, 0.4);
								display: flex;
								align-items: center;
								padding: 0 34rpx;
							}
						}


					}

				}
			}
		}
	}
</style>