300 lines
6.2 KiB
Vue
300 lines
6.2 KiB
Vue
<template>
|
|
<view class="page">
|
|
<!-- 固定搜索栏 -->
|
|
<view class="fixed-search" :style="{ top: statusBaeHeight + 'px' }">
|
|
<SearchBar
|
|
:placeholders="'搜索酒款/品牌'"
|
|
:bgcolor="'#19367A'"
|
|
:borderRs="'0px 0px 24rpx 24rpx'"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 筛选栏 -->
|
|
<view class="content-container" style="margin-top: 120rpx;">
|
|
<view class="bg-white filter-bar" :style="{ borderRadius: '30rpx 30rpx 12rpx 12rpx' }">
|
|
<view class="choose-center bg-white">
|
|
<view class="flex align-center choose-navs">
|
|
<view class="" v-for="item in tabList" style="text-align: center;">
|
|
<view class="choose-navs-txt" @click="changeNavs(item.value)"
|
|
:class="actives==item.value?'actives':''">
|
|
{{item.label}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 专辑列表 -->
|
|
<view v-for="(item,i) in featurePageList" :key="i" class="bg-white">
|
|
<view class="flex justify-between align-center title-box" @click="toFeaturePage(item)">
|
|
<view class="flex-1 flex flex-col">
|
|
<text class="title">{{ item.pageName }}</text>
|
|
<text class="sub">{{ item.subTitle}}</text>
|
|
</view>
|
|
<image src="@/static/arrow-right.png" style="width: 48rpx;height: 48rpx;"></image>
|
|
</view>
|
|
<rowBeer :beers="item.beers" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getBannerList
|
|
} from '@/api/bar.js'
|
|
import {
|
|
listFeaturePage
|
|
} from '@/api/platform.js'
|
|
import commonTitle from '@/components/commonTitle.vue'
|
|
import rowBeer from '@/components/rowBeer.vue'
|
|
import SearchBar from '@/components/SearchBar.vue';
|
|
|
|
|
|
export default {
|
|
components: {
|
|
commonTitle,
|
|
rowBeer,
|
|
SearchBar,
|
|
},
|
|
data() {
|
|
return {
|
|
statusBaeHeight: 0,
|
|
featurePageList: [],
|
|
bgcolor: '#19367A',
|
|
tabList:[
|
|
{
|
|
label:'为您推荐',
|
|
value:'1'
|
|
},
|
|
{
|
|
label:'风格选酒',
|
|
value:'2'
|
|
},
|
|
{
|
|
label:'热门厂牌',
|
|
value:'3'
|
|
},
|
|
{
|
|
label:'新酒上市',
|
|
value:'4'
|
|
},
|
|
],
|
|
actives:'1',
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.statusBaeHeight = uni.getWindowInfo.statusBarHeight
|
|
this.getBannerListFun()
|
|
uni.showShareMenu({
|
|
menus: ['shareAppMessage', 'shareTimeline']
|
|
})
|
|
this.actives = '1'
|
|
},
|
|
onShow() {
|
|
this.actives = '1'
|
|
this.getFeaturePageListFun() // 专辑页列表
|
|
},
|
|
|
|
methods: {
|
|
changeNavs(ind){
|
|
this.actives = ind
|
|
if(ind == 2) {
|
|
uni.navigateTo({
|
|
url: '/pages/activityList/styleSelection'
|
|
})
|
|
}else if(ind == 3){
|
|
//pages/activityList/hotLabel
|
|
uni.navigateTo({
|
|
url: '/pages/activityList/hotLabel'
|
|
})
|
|
}else if(ind == 4){
|
|
//pages/activityList/hotLabel
|
|
uni.navigateTo({
|
|
url: '/pages/index/newBeer'
|
|
})
|
|
// uni.navigateTo({
|
|
// url: '/pagesActivity/newWine'
|
|
// })
|
|
// uni.navigateTo({
|
|
// url: '/pages/activityList/details'
|
|
// })
|
|
}
|
|
},
|
|
// 搜索
|
|
toSearch() {
|
|
uni.navigateTo({
|
|
url: '/pages/index/searchBeer'
|
|
})
|
|
},
|
|
// 查询广告弹窗 banner列表
|
|
getBannerListFun() {
|
|
this.ADList = []
|
|
this.homeBanner = []
|
|
this.bannerJoin = null
|
|
getBannerList().then(res => {
|
|
res.data.forEach(it => {
|
|
if (it.bannerType == 'homeAD') { // 开屏广告
|
|
this.ADList.push(it)
|
|
} else if (it.bannerType == 'homeJoin') { // 入驻
|
|
this.bannerJoin = it
|
|
} else if (it.bannerType == 'homeBanner') { // 首页banner
|
|
this.homeBanner.push(it)
|
|
}
|
|
|
|
})
|
|
|
|
let showHomeAD = uni.getStorageSync('showHomeAD')
|
|
if (!showHomeAD) {
|
|
|
|
this.$refs.ADRef.open()
|
|
|
|
}
|
|
|
|
})
|
|
},
|
|
// 关闭广告
|
|
closeAd() {
|
|
uni.setStorageSync('showHomeAD', true)
|
|
uni.setTabBarStyle({
|
|
backgroundColor: '#ffffff'
|
|
})
|
|
this.$refs.ADRef.close()
|
|
|
|
},
|
|
handleAD(item) {
|
|
this.closeAd()
|
|
if (item.bannerLink) {
|
|
uni.navigateTo({
|
|
url: item.bannerLink,
|
|
})
|
|
}
|
|
},
|
|
// 立即入驻
|
|
toJoin() {
|
|
if (!this.bannerJoin) return
|
|
uni.navigateTo({
|
|
url: this.bannerJoin.bannerLink,
|
|
})
|
|
},
|
|
// 跳转专辑页
|
|
toFeaturePage(item) {
|
|
uni.navigateTo({
|
|
url: `/pages/activityList/details`
|
|
})
|
|
},
|
|
// 查询专辑页列表
|
|
getFeaturePageListFun() {
|
|
listFeaturePage().then(res => {
|
|
this.featurePageList = res.data
|
|
})
|
|
},
|
|
// 跳转酒评页
|
|
toReview(it) {
|
|
uni.navigateTo({
|
|
url: "/pages/index/review?beerId=" + it.id
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
background: #F9F9F9;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.fixed-search {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1001; /* 提高导航栏层级 */
|
|
background-color: #19367A;
|
|
border-radius: 0 0 24rpx 24rpx;
|
|
|
|
/* 保持搜索栏原有圆角 */
|
|
:deep(.search-container) {
|
|
border-radius: 0 0 24rpx 24rpx !important;
|
|
}
|
|
}
|
|
|
|
.content-container {
|
|
padding-top: 0rpx;
|
|
}
|
|
|
|
/* 筛选导航栏 */
|
|
.filter-bar {
|
|
position: sticky;
|
|
top:80rpx;
|
|
z-index: 1000;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
|
margin-top: -40rpx;
|
|
padding-top: 40rpx;
|
|
}
|
|
|
|
.choose-center {
|
|
height: 112rpx;
|
|
width: 100%;
|
|
padding: 24rpx;
|
|
background: #FFFFFF;
|
|
|
|
.choose-navs {
|
|
// 导航选项的样式
|
|
font-family: Roboto;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
|
|
.choose-navs-txt {
|
|
// 导航选项文本的样式
|
|
width: 144rpx;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
border-radius: 12rpx;
|
|
background: #F9F9F9;
|
|
margin-right: 16rpx;
|
|
&.actives {
|
|
// 选中状态的样式
|
|
color: #FFF;
|
|
background: #D42E78;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.title-box {
|
|
padding: 24rpx 32rpx;
|
|
// margin-bottom: 24rpx;
|
|
// margin-top: 24rpx;
|
|
.title {
|
|
font-size: 32rpx;
|
|
color: #030303;
|
|
font-weight: 600;
|
|
line-height: 48rpx;
|
|
letter-spacing: normal;
|
|
margin-bottom: 8rpx;
|
|
max-width: 500rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.sub {
|
|
font-family: Roboto;
|
|
font-size: 24rpx;
|
|
font-weight: normal;
|
|
line-height: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
letter-spacing: normal;
|
|
color: #606060;
|
|
margin-bottom: 8rpx;
|
|
max-width: 500rpx;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
</style> |