You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
279 lines
6.0 KiB
279 lines
6.0 KiB
<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>
|