front/pages/source/home.vue

<template>
	<view class="box-sizing-b w-full">
		<use-tabbar></use-tabbar>
		<!-- 头部组件 -->
		<use-header :search-tip="searchTip" :search-auto="searchAuto" :searchId="id" :source="1"
			@search="search"></use-header>

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

		<!-- 滚动区 -->
		<view class="move-area use-area margin-lr-sm" v-if="fetch.ad && fetch.ad.notice && fetch.ad.notice.length > 0">
			<u-notice-bar :text="fetch.ad.notice" direction="row" bgColor="#fff" color="#000"></u-notice-bar>
		</view>

		<!-- 分类区 -->
		<view class="category-area use-area margin-lr-sm dgrid"
			v-if="fetch.ad && fetch.ad.nav && fetch.ad.nav.length > 0">
			<view class="category-item dflex dflex-flow-c margin-bottom-sm" v-for="(item, index) in fetch.ad.nav"
				:key="index" @click="(e) => Dever.location(fetch.ad.nav[e].link)">
				<image class="margin-bottom-xs" lazy-load :src="item.info"></image>
				<text class="tac clamp">{{ item.title }}</text>
			</view>
		</view>
		<view class="tabs-wrapper" v-if="fetch.top && fetch.top.length > 0">
			<u-tabs :list="fetch.top" @click="loadTop" lineColor="#ff6b6b" activeColor="#ff6b6b" :activeStyle="{
			  color: '#303133',
			  fontWeight: 'bold',
			  transform: 'scale(1.05)'
			}" :inactiveStyle="{
			  color: '#606266',
			  transform: 'scale(1)'
			}" scrollable></u-tabs>
		</view>
		<!-- 精选推荐 -->
		<use-info v-if="fetch.ad && fetch.ad.info && fetch.ad.info.length > 0 && fetch.ad.info[0]"
			:info="fetch.ad.info[0]"></use-info>



		<!-- 资源分类 -->
		<view v-if="fetch.cate && fetch.cate.length > 0" v-for="(item, index) in fetch.cate" :key="index">
			<view class="source-area use-area">
				<!-- 列表标题 -->
				<use-list-title :title="item.name" size="32" fwt="600" color="#333" :index="index"
					@goto="Dever.location('source/list?id=' + item.id + '&title=' + item.name)"></use-list-title>

				<use-goods-list :data="item.list"></use-goods-list>
			</view>
			<use-info v-if="fetch.ad && fetch.ad.info && fetch.ad.info.length > 0 && fetch.ad.info[index+1]"
				:info="fetch.ad.info[index+1]"></use-info>
		</view>

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

		<use-totop ref="usetop"></use-totop>
		
		<!--
		<view class="fixed-swiper">
			<view class="" @click="toYuyue">
				<image src="https://img20.360buyimg.com/jdcms/s480x480_jfs/t1/234533/3/36568/214409/67d7da40F3d017a82/842a9f77bc14485c.jpg" mode="widthFix" class="image"></image>
			</view>
			<view class="fixed-swiper-close" @click="closefixedSwiper()">
				<text class="gui-icons gui-block icon icon-">&#xe610;</text>
			</view>
		</view>
		-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 头部参数
				searchAuto: !0,
				searchTip: '请输入搜索关键字',
				id: 0,
				top_id: 0,
				fetch: {},
			};
		},
		onPageScroll(e) {
			this.$refs.usetop.change(e.scrollTop);
		},
		onPullDownRefresh() {
			this.loadData();
		},
		onLoad(options) {
			this.id = options.id;
			this.top_id = 0;
			
		},
		onShow() {
			this.loadData();
		},
		methods: {
			// 加载数据
			loadData() {
				this.DeverApi.get(this, 'source.home', {
					channel_id: this.id,
					top_id: this.top_id,
				});
			},
			loadTop(item) {
				this.top_id = item.id;
				this.loadData()
			},
			// 搜索回调函数
			search() {
				console.log('home search');
			},
		}
	};
</script>

<style lang="scss">
	/* 分类区 */
	.category-area {
		padding-top: 28rpx;
		padding-left: 28rpx;
		padding-right: 28rpx;
		gap: 9px;
		grid-template-columns: repeat(5, 1fr);

		.category-item {
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
		}

		image {
			border-radius: 50%;
			width: 96rpx;
			height: 96rpx;
		}
	}
	.tabs-wrapper {
		margin-top: 28rpx;
		margin-bottom: 28rpx;
	}
	
	.fixed-swiper {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	
	.fixed-swiper-close {
		margin-top: 50rpx;
		color: #fff;
		font-size: 35rpx;
		border: 1px solid #fff;
		padding: 10rpx;
		border-radius: 100%;
	}
</style>