front/pages/source/list.vue

<template>
	<view>
		<use-tabbar></use-tabbar>

		<view class="padding-area">
			<!-- 轮播区 -->
			<use-swiper v-if="fetch.ad && fetch.ad.focus && fetch.ad.focus.length > 0"
				:data="fetch.ad.focus"></use-swiper>

			<!-- 列表区 -->
			<view>
				<!-- 筛选区 -->
				<view class="navbar pos-f w-full dflex bg-main">
					<view class="nav-item dflex-c flex1 pos-r h-full" :class="{active: data.order == 0}"
						@click="order(0)">
						综合排序
					</view>
					<view class="nav-item dflex-c flex1 pos-r h-full" :class="{active: data.order == 1}"
						@click="order(1)">
						销量优先
					</view>
					<view class="nav-item dflex-c flex1 pos-r h-full" :class="{active: data.order >= 3}"
						@click="order(3)">
						<text>价格</text>
						<view class="">
							<view class="iconfont iconjiantou02 ft-dark dflex-c" :class="{active: data.order == 3}">
							</view>
							<view class="iconfont iconjiantou ft-dark dflex-c" :class="{active: data.order == 4}">
							</view>
						</view>
					</view>
				</view>
				
				<view class="tabs-wrapper" v-if="fetch.child && fetch.child.length > 0">
					<u-tabs :list="fetch.child" @click="loadChild" lineColor="#ff6b6b" activeColor="#ff6b6b" :activeStyle="{
				      color: '#303133',
				      fontWeight: 'bold',
				      transform: 'scale(1.05)'
				    }" :inactiveStyle="{
				      color: '#606266',
				      transform: 'scale(1)'
				    }" scrollable></u-tabs>
				</view>
				<!-- 商品列表区 -->
				<view class="source-area use-area"
					v-if="fetch.list && fetch.list.length > 0">
					<use-goods-list :data="fetch.list"></use-goods-list>
				</view>
				<view v-else class="empty-record">
					<u-empty mode="data"></u-empty>
				</view>
			</view>
			
			<use-copyright :title="fetch.channel.name" :desc="fetch.channel.desc"
				v-if="fetch && fetch.channel"></use-copyright>
			
		</view>
		<use-totop ref="usetop"></use-totop>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fetch: {},
				// 请求数据
				data: {
					id: 0,
					order: 0,
					search: '',
					show: 1,
				},
				type: 1,
				source: 1,
			};
		},
		onPageScroll(e) {
			this.$refs.usetop.change(e.scrollTop);
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData(1);
		},
		//加载更多
		onReachBottom() {
			this.loadData(2);
		},
		onLoad(options) {
			var title = '资源列表';
			if (options) {
				if (!options.id) {
					return this.Dever.goHome();
				}
				this.data['id'] = options.id;
				if (options.title) {
					title = options.title;
				}
				if (options.search) {
					this.data['search'] = options.search;
				}
				if (options.type) {
					this.type = options.type;
				}
				if (options.source) {
					this.data['source'] = options.source;
				}
			}
			uni.setNavigationBarTitle({
				title: title
			})
			this.data['show'] = 1;
			this.loadData(1);
		},
		methods: {
			loadData(page) {
				if (this.type == 2) {
					this.data['channel_id'] = this.data['id']
					this.DeverApi.page([page, 'list'], this, 'source.searchData', this.data);
				} else {
					this.DeverApi.page([page, 'list'], this, 'source.cate', this.data);
				}
			},
			
			loadChild(item) {
				this.data['id'] = item.id;
				this.data['show'] = 2;
				this.loadData(1)
			},

			order(value) {
				if (value == 3 && this.data.order == 3) {
					value = 4;
				}
				this.data.order = value;
				this.loadData(1);
			},
		},
	}
</script>

<style lang="scss">
	.padding-area {
		margin-top: 120rpx;
	}

	.navbar {
		position: fixed;
		top: calc(var(--status-bar-height) + 88rpx);
		left: 0;
		height: 100rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, .06);
		z-index: 10;
		background: #f5f5f5;

		.nav-item {
			color: $font-color-dark;
			font-size: 30rpx;

			&.active {
				font-size: 16px;
				font-weight: 700;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120rpx;
					height: 0;
					border-bottom: 4rpx solid $base-color;
				}
			}
		}

		.iconfont {
			width: 30rpx;
			height: 14rpx;
			font-size: 20rpx;
			line-height: 1;
			margin-left: 4rpx;
		}
	}
	
	.empty-record {
		text-align: center;
		padding: 60rpx 0;
	
		.empty-icon {
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 20rpx;
			opacity: 0.6;
		}
	
		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.tabs-wrapper {
		margin: 22rpx;
		padding: 12rpx 0;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
		overflow: hidden;
	}
</style>