shop-uniapp-240426/pages/home/home.vue

<template>
	<view>
		<view class="bg" :style="{display : isSearch ? 'block' : 'none'}"></view>
		<view class="flex">
			<view
			class="languageUpdate"
			>
				<languageUpdate color="#fff"/>
			</view>
			<view class="search">
				<u-search
				v-model="searchKey"
				:showAction="false"
				@change="changeSearch"
				style="position: relative;z-index: 999999999;"
				:placeholder="$t('page.home.searchPlaceholder')">
				</u-search>
				<!-- <u-overlay :show="isSearch"></u-overlay> -->
				<!-- <view @tap.stop :class="{'product-box' : true, 'product-box-active' : isSearch && searchList.length}">
					<productList :list="searchList"/>
				</view> -->
			</view>
			
			<u-scroll-list class="classList">
				<view
				class="classList-item"
				:style="{color : class_id == item.id ? '#0f0' : '#fff'}"
				v-for="(item, index) in classList" 
				:key="index" @click="toProductList(item)">
					{{item.title}}
				</view>
			</u-scroll-list>
		</view>
		
		
		<view class="swipe" :style="{display : isSearch ? 'block' : 'none'}">
			<u-swiper
				:list="banner"
				indicator
				keyName="image"
				indicatorMode="line"
				circular
			></u-swiper>
		</view>
		
		<u-notice-bar
		bgColor="#fff"
		color="#e3392f"
		:text="notice.keyVal"
		class="notice" :style="{display : isSearch ? 'block' : 'none'}"></u-notice-bar>
		
		<view class="product" :style="{display : isSearch ? 'block' : 'none'}">
			<view class="title">
				<text>{{ $t('page.home.product.flash-sales') }}</text>
			</view>
			<view class="productFlashSales">
				<view class="productFlashSales-top">
					<!-- <productFlashSales :list="shopPage.records"/> -->
					<productFlashSales :list="productFlashSales"/>
				</view>
				<!-- <view class="productFlashSales-bottom">
					{{ $t('page.home.product.View-more-flash-sales') }}
				</view> -->
			</view>
		</view>
		
		<view class="active-image" :style="{display : isSearch ? 'block' : 'none'}" v-if="IndexImage.keyImage">
			<img style="border-radius: 10px;" width="100%" v-for="(item,index) in IndexImage.keyImage.split(',')" :src="item" alt="" />
		</view>
		
		<view class="product">
			<view class="title">
				<text>{{ $t('page.home.product.title1') }}</text>
				<!-- <u-icon name="arrow-right" size="17"></u-icon> -->
			</view>
			<productList :list="searchList"/>
		</view>
	</view>
</template>

<script>
	import productList from '@/components/product/productList.vue'
	import languageUpdate from '@/components/base/languageUpdate.vue'
	import productFlashSales from '@/components/product/productFlashSales.vue'
	export default {
		components : {
			productList,
			languageUpdate,
			productFlashSales
		},
		computed : {
			searchList(){
				if(this.shopPage){
					return this.shopPage.filter(n => {
						return !this.searchKey || n.title.includes(this.searchKey)
					})
				}
				return []
			}
		},
		data() {
			return {
				notice : {
					keyVal : ''
				},
				isSearch : true,
				searchKey : '',
				bgColor : '#000',
				banner: [],
				classList : [],
				productFlashSales : [],
				shopPage : [],
				IndexImage : {},
				class_id : undefined,
			}
		},
		onShow(){
			this.getData()
		},
		methods: {
			getData(){
				this.request('getBanner').then(res => {
					this.banner = parseList(res.result)
				})
				
				this.request('getNotice').then(res => {
					this.notice = res.result || {}
				})
				
				this.request('getIndexImage').then(res => {
					this.IndexImage = res.result || {};
				})
				
				this.request('getClassList').then(res => {
					res.result.unshift({
						title : this.$t('page.home.all'),
					})
					this.classList = parseList(res.result);
				})
				
				this.getProduct()
				
				this.request('getShopHost').then(res => {
					this.productFlashSales = parseList(res.result)
				})
			},
			getProduct(id){
				this.request('getShopPage', {},
					{
						"classId": id,
						"pageSize":999, 
						"currentPage": 0
					}
				)
				.then(res => {
					this.shopPage = parseList(res.result.records);
				})
			},
			toProductList(item){
				// uni.navigateTo({
				// 	url: '/pages/productList/productList?title=' + item.title + '&id=' + item.id
				// })
				this.class_id = item.id
				this.getProduct(item.id)
				this.isSearch = !this.searchKey && !this.class_id
			},
			SearchBlur(){
				setTimeout(() => this.isSearch = true, 200)
			},
			changeSearch(){
				this.isSearch = !this.searchKey && !this.class_id
			}
		}
	}
</script>

<style lang="scss" scoped>
.bg{
	background-color: #E3392F;
	height: 220px;
	width: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	position: absolute;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
}

.languageUpdate{
	height: 50px;
	display: flex;
	padding: 0 10px;
}
.flex{
	padding: 0 10px;
	padding-top: 10px;
	position: sticky;
	top: 0;
	z-index: 99;
	background-color: #E3392F;
	::v-deep .u-scroll-list__indicator {
	    display: none !important;
	}
	.search{
		position: relative;
		margin-bottom: 20px;
		.product-box{
			position: absolute;
			top: 110%;
			left: -10px;
			width: 100vw;
			z-index: 99;
			height: 0;
			overflow: hidden;
			overflow-y: auto;
			z-index: 999999999;
		}
		.product-box-active{
			height: auto;
			min-height: 200px;
			max-height: calc(100vh - 50px);
		}
	}
	.classList{
		.classList-item{
			flex-shrink: 0;
			color: #fff;
			white-space: nowrap;
			padding: 0 10px;
			padding-bottom: 10px;
			font-size: 26rpx;
		}
	}
}
.swipe{
	width: 100%;
	padding: 0 10px;
	box-sizing: border-box;
	z-index: 6;
}
.notice{
	margin: 10px;
	border-radius: 15px;
	border: 1px solid #FCDEB2;
}
.productFlashSales{
	border-radius: 10px;
	margin: 10px;
	background-color: #fff;
	box-shadow: 1px 1px 1px 1px #00000005;
	.productFlashSales-top{
		
	}
	.productFlashSales-bottom{
		border-top: 1px solid #00000024;
		margin: 10px;
		padding: 15px;
		text-align: center;
		color: #666666;
		font-size: 26rpx;
	}
}
.active-image{
	margin: 20px 10px;
}
.product{
	.title{
		border-left: 5px solid #E3392F;
		margin: 10px;
		padding: 0 5px;
		display: flex;
		font-weight: 900;
		align-items: center;
		justify-content: space-between;
		color: #E3392F;
	}
}
</style>