front/pages/source/channel.vue

<template>
	<view class="page" v-if="fetch && fetch.top">

		<use-tabbar></use-tabbar>
		<use-header :search-tip="searchTip" :search-auto="searchAuto" :searchId="id" :source="2"
			@search="search"></use-header>

		<view class="category">
			<!-- 左侧滚动分类 -->
			<scroll-view class="left" scroll-y>
				<u-sidebar v-model="top" @change="loadTop" :activeBold="true" lineColor="#ff6b6b" activeColor="#ff6b6b"
					activeBgColor="#ffffff00">
					<u-sidebar-item v-for="(item, index) in fetch.top" :key="index" :label="item.name"
						:value="item.id"></u-sidebar-item>
				</u-sidebar>
			</scroll-view>

			<!-- 右侧商品区域 -->
			<view class="right">
				<!-- tabs 固定 -->
				<view class="small-tabs-wrapper bg-main border-radius margin-bottom-sm padding-8">
					<u-tabs lineColor="#ff6b6b" activeColor="#ff6b6b" :list="fetch.top[top].cate" :activeStyle="{
			            color: '#303133',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }" @click="loadCate" scrollable></u-tabs>
				</view>

				<!-- 商品列表滚动 -->
				<scroll-view class="goods-list" scroll-y v-if="fetch.list && fetch.list.length > 0">
					<view class="use-hover" v-for="(item, index) in fetch.list" :key="index">
						<view class="goods border-radius padding bg-main"
							@click="Dever.location('source/info?id=' + item.id + '&title=' + item.name)">
							<view class="goods-left pos-r">
								<image class="border-radius-sm" :src="item.cover" mode="aspectFill"></image>
								<view v-if="item.tag" class="use-tag pos-a pos-top bg-base scale-08">
									{{ item.tag }}
								</view>
							</view>
							<view class="margin-left-sm pos-r flex-1">
								<text class="clamp-2">{{ item.name }}</text>
								<!-- ✅ 价格行 -->
								<view class="price-box">
									<template v-if="item.price && item.price > 0">
										<text class="price">{{ item.price_text }}</text>
										<text class="m-price" v-if="item.m_price > 0">{{ item.m_price_text }}</text>
									</template>
									<template v-else>
										<u--text type="info"  v-if="item.info" :lines="2" :size="12" :text="item.info"></u--text>
										<text v-else class="price free-tag">免费</text>
										<text class="m-price" v-if="item.m_price > 0">{{ item.m_price_text }}</text>
									</template>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view v-else>
					<u-empty mode="data" :marginTop="100"></u-empty>
				</view>
			</view>
		</view>

		<use-copyright :title="fetch.channel.name" :desc="fetch.channel.desc"
			v-if="fetch && fetch.channel"></use-copyright>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchAuto: true,
				searchTip: "请输入搜索关键字",
				id: 0,
				fetch: {},
				top: 0,
				cate: 0
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.loadData();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadGoods(1);
		},
		//加载更多
		onReachBottom() {
			this.loadGoods(2);
		},
		methods: {
			// 加载数据
			loadData(callback) {
				this.DeverApi.get(this, "source.channel", {
					channel_id: this.id
				}, res => {
					this.loadGoods(1);
				});
			},
			search() {
				console.log("home search");
			},
			loadTop(index) {
				this.top = index.index;
				this.loadGoods(1);
			},
			loadCate(tab) {
				this.cate = tab.index;
				this.loadGoods(1);
			},
			loadGoods(page) {
				var id = this.fetch.top[this.top]?.cate[this.cate]?.id;
				if (id) {
					this.DeverApi.page([page, "list"], this, "source.cate", {
						id: id,
						show: 2,
					});
				}
			}
		}
	};
</script>

<style>
	.page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
		background: #f5f5f5;
	}

	.use-header {
		height: 96rpx;
	}

	.category {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.left {
		width: 198rpx;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background-color: #f5f5f5;
	}

	.right {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #fff;
	}

	.small-tabs-wrapper {
		padding: 8rpx;
		margin-bottom: 12rpx;
		background: #fff;
	}

	.goods-list {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-left: 4rpx;
		padding-right: 18rpx;
	}

	.goods {
		display: flex;
		padding-bottom: 14rpx;
	}

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

	.use-tag {
		border-top-left-radius: 8rpx;
		border-bottom-right-radius: 8rpx;
		line-height: 1;
		padding: 8rpx 12rpx;
		font-size: 20rpx;
		background-color: #ff6b6c;
		color: #fff;
	}

	.price-box {
		margin-top: 20rpx;
	}

	.price {
		font-size: 32rpx;
		font-weight: bold;
		color: #ff6b6b;
		line-height: 1;
		flex-shrink: 0;
		/* 不让价格被挤压 */
	}

	.m-price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
		line-height: 1;
		flex-shrink: 0;
		/* 不让原价被挤压 */
	}

	.price-desc {
		font-size: 24rpx;
		color: #666;
	}



	/* 免费标签 */
	.free-tag {
		color: #4caf50;
		background-color: #e6f5ea;
		padding: 4rpx 10rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
		line-height: 1;
	}
</style>