front/pages/source/content.vue

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

		<use-tabbar :tabbar="false"></use-tabbar>
		<view class="use-header dflex padding-lr-sm w-full bg-drak" >
			<!-- 头部组件 -->
			<view class="use-search dflex-b border-radius-lg padding-lr w-full">
				<u-input
				    :placeholder="searchTip"
				    border="none"
				    v-model="searchValue"
				  ></u-input>
				<view class="iconfont iconsousuo-01" @click="search"></view>
			</view>
		</view>

		<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="goContentInfo(item)">

							<view class="margin-left-sm pos-r flex-1">
								<view class="name-wrap">
								  <text class="clamp-2">{{ item.name }}</text>
								  <u-icon v-if="item.look == 2" name="lock" size="18"></u-icon>
								  <u-icon v-else-if="item.look >= 3" name="integral" size="18"></u-icon>
								</view>
								
								<!-- ✅ 价格行 -->
								<view class="price-box">
									<u--text type="info"  v-if="item.info" :lines="2" :size="12" :text="item.info"></u--text>
								</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 {
				searchTip: "请输入搜索关键字",
				searchValue: '',
				id: 0,
				cid: 0,
				fetch: {},
				top: 0,
				cate: 0
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.cid = options.cid;
			this.loadData();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadList(1);
		},
		//加载更多
		onReachBottom() {
			this.loadList(2);
		},
		methods: {
			// 加载数据
			loadData() {
				this.DeverApi.get(this, "source.content", {
					id: this.id,
					cid: this.cid,
				}, res => {
					this.loadList(1);
				});
			},
			search() {
				if (!this.searchValue) {
					return this.Dever.alert('请输入关键词');
				}
				this.loadList(1, this.searchValue);
			},
			loadTop(index) {
				this.top = index.index;
				this.loadList(1);
			},
			loadCate(tab) {
				this.cate = tab.index;
				this.loadList(1);
			},
			loadList(page, search) {
				if (!search) {
					search = ''
				}
				var id = this.fetch.top[this.top].id;
				if (id >= 0) {
					this.DeverApi.page([page, "list"], this, "source.contentList", {
						id: this.id,
						cid: this.cid,
						cate_id: id,
						search: search,
					});
				}
			},
			
			goContentInfo(item) {
				if (item.look == 2) {
					// 购买规格
					this.Dever.confirm(item.buy, () => {
						this.buy(item)
					});
				} else if (item.look >= 3) {
					this.Dever.confirm(item.score, () => {
						this.DeverApi.post('source.contentBuy', {id:item.id}, r => {
							this.Dever.success('付费成功', () => {
								this.Dever.location('source/content_info?id=' + item.id + '&title=' + item.name)
							})
						});
					});
				} else {
					this.Dever.location('source/content_info?id=' + item.id + '&title=' + item.name)
				}
			},
			
			buy(item) {
				if (!this.DeverApi.getToken()) {
					this.Dever.confirm('您需要登录才能继续操作', () => {
						this.Dever.goLogin();
					})
					return;
				}
				var detail = [{
					id: item.info_id,
					sku_id: item.sku_id,
					num: 1
				}]
				this.Dever.data('detail', {
					type: 'source',
					type_id: item.cate_id,
					detail: detail,
					//jump: 'source/content?id=' + item.info_id,
					jump: 'source/content_info?id=' + item.id + '&title=' + item.name,
				});
				this.Dever.location('order/create');
			},
		}
	};
</script>

<style lang="scss" scoped>
	.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;
	}
	.name-wrap {
	  display: flex;
	  align-items: center; /* 垂直居中 */
	}
	
	.use-header {
		height: 100rpx;
	}
	
	.use-search {
		height: 70rpx;
		line-height: 70rpx;
		background-color: #fff;
	
		text {
			color: #c0c0c0;
		}
	
		.iconfont {
			font-size: $font-base + 6upx;
			color: #c0c0c0;
		}
	}
</style>