Jingde-town-wechat-uniapp/pages/index/index.vue

<template>
	<view class="page">
		
		<view class="banner">
			<uv-swiper
			:list="bannerList" 
			indicator
			height="420rpx"
			indicatorStyle="bottom: 100rpx;"
			keyName="imageContent"></uv-swiper>
			
			<view class="top">
				<view class="search">
					<uv-search 
					placeholder="请输入搜索文章" 
					:showAction="false"
					search-icon-size="40rpx"
					@search="search"
					v-model="keyword"></uv-search>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="grid">
				<uv-grid :border="false"
				:col="4">
					<uv-grid-item 
					v-for="(item,index) in baseList"
					@click="$utils.navigateTo(item.path)"
					:key="index">
						<image class="grid-icon" :src="item.icon" mode="aspectFill"></image>
						<text class="grid-text">{{item.title}}</text>
					</uv-grid-item>
				</uv-grid>
			</view>
			
			<view class="index_box">
				
				<view class="image-box"
				@click="$utils.navigateTo('/pages_order/service/newsList')">
					<image :src="config_new_image || configList.config_new_image"
					class="image" mode="aspectFill"></image>
					
					<view class="image-text">
						申遗新闻
					</view>
				</view>
				
				<view class="index_box_grid"
				@click="$utils.navigateTo('/pages_order/service/carefree')">
					<text class="text">无忧服务</text>
					<image class="icon" src="/static/image/home/g8a.png" mode="aspectFill"></image>
				</view>
			</view>
			
			<view class="video-title">
				<!-- 视频中的景徳镇 -->
				精彩推荐
			</view>
			
			<scenicSpot ref="videoList"/>
			
			<!-- <view class="list">
				<newsItem
				v-for="(item, index) in 10"
				:key="index"
				:item="item"
				/>
			</view> -->
			
		</view>
		
		
		<PrivacyAgreementPoup/>
		
		<tabber select="0"/>
	</view>
</template>

<script>
	import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
	import scenicSpot from '@/components/list/scenicSpot.vue'
	import newsItem from '@/components/list/newsItem.vue'
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['configList']),
		},
		components : {
			PrivacyAgreementPoup,
			scenicSpot,
			newsItem,
		},
		data() {
			return {
				baseList : [
					{
						icon : '/static/image/home/g1.png',
						title : '申遗历程',
						path : '/pages_order/service/applyRelic',
					},
					{
						icon : '/static/image/home/g2.png',
						title : '遗产概况',
						path : '/pages_order/service/situation',
					},
					// {
					// 	icon : '/static/image/home/g3.png',
					// 	title : '遗产讲述',
					// 	path : '/pages_order/service/tellList?type=tell',
					// },
					// {
					// 	icon : '/static/image/home/g4.png',
					// 	title : '达人同游',
					// 	path : '/pages_order/service/tellList?type=travel',
					// },
					// {
					// 	icon : '/static/image/home/g5.png',
					// 	title : '遗产路径',
					// 	path : '/pages_order/service/heritagePath',
					// },
					// {
					// 	icon : '/static/image/home/g6.png',
					// 	title : '我要跟拍',
					// 	path : '/pages_order/service/following' ,
					// },
					// {
					// 	icon : '/static/image/home/g7.png',
					// 	title : '非遗体验',
					// 	path : '/pages_order/service/experience',
					// },
					
					{
						icon : '/static/image/home/g9.png',
						title : '文创好物',
						path : '/pages_order/product/productList',
					},
					{
						icon : '/static/image/home/g10.png',
						title : '我要帮助',
						path : '/pages_order/service/help',
					},
					// {
					// 	icon : '/static/image/home/g8.png',
					// 	title : '无忧服务',
					// 	path : '/pages_order/service/carefree',
					// },
					// {
					// 	icon : '/static/image/home/g6.png',
					// 	title : '申遗新闻',
					// 	path : '/pages_order/service/newsList',
					// },
				],
				bannerList: [
					// {
					// 	url: 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img',
					// }, 
					// {
					// 	url: 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img',
					// }, 
					// {
					// 	url: 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img',
					// },
				],
				productList: [],
				keyword : '',
				config_new_image : '',
			}
		},
		onLoad() {
			uni.$on('getConfig', state => {
				this.config_new_image = state.configList.config_new_image
			})
		},
		onPullDownRefresh(){
			this.$refs.videoList.queryVideoList()
			this.queryBannerList()
		},
		onShow() {
			this.$refs.videoList.queryVideoList()
			this.queryBannerList()
		},
		//滚动到屏幕底部
		onReachBottom() {
			// this.$refs.videoList.loadMoreData()
		},
		methods: {
			queryBannerList(){
				this.$api('queryBannerList', {
					bannerCategoryType : 0,
				},res => {
					uni.stopPullDownRefresh()
					if(res.code == 200){
						this.bannerList = res.result
					}
				})
			},
			search(){
				this.keyword = ''
				uni.navigateTo({
					url: '/pages_order/service/applyRelic?keyword=' + this.keyword
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page{
		.banner{
			position: relative;
			.top{
				position: absolute;
				top: var(--status-bar-height);
				left: 0;
				padding-top: 30rpx;
				display: flex;
				width: 100%;
				flex-direction: column;
				align-items: center;
				.search{
					width: 400rpx;
					margin-left: -100rpx;
					/deep/ .uv-search__content__icon{
						padding: 30rpx 0;
					}
				}
				.title{
					image{
						width: 600rpx;
						height: 300rpx;
					}
				}
			}
		}
		.content{
			position: relative;
			margin-top: -60rpx;
			.grid{
				padding-bottom: 30rpx;
				background-color: #fff;
				border-radius: 60rpx;
				box-shadow: 0 0 10rpx 10rpx #00000013;
				.grid-icon{
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
					margin-top: 30rpx;
				}
				.grid-text{
					font-size: 24rpx;
					font-weight: 900;
				}
			}
			
			.index_box{
				display: flex;
				padding: 10rpx 20rpx;
				gap: 30rpx;
				align-items: center;
				.image-box{
					position: relative;
					height: 200rpx;
					width: 470rpx;
					color: #fff;
					.image{
						position: absolute;
						z-index: -1;
						height: 100%;
						width: 100%;
						border-radius: 10rpx;
					}
					.image-text{
						display: flex;
						justify-content: center;
						align-items: center;
						height: 100%;
						width: 100%;
						background-color: rgba(0, 0, 0, 0.2);
						font-size: 34rpx;
						font-weight: 900;
					}
				}
				.index_box_grid{
					width: 200rpx;
					height: 200rpx;
					background-color: $uni-color;
					border-radius: 10rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 16rpx;
					.text{
						color: #fff;
					}
					.icon{
						width: 100rpx;
						height: 100rpx;
					}
				}
			}
			
			.video-title{
				padding: 15rpx 20rpx;
				background-color: $uni-color;
				color: #fff;
				font-weight: 900;
				font-size: 28rpx;
				margin: 0 20rpx;
				width: fit-content;
				border-radius: 20rpx;
			}
			.list{
				display: flex;
				flex-wrap: wrap;
			}
		}
	}
</style>