239 lines
6.4 KiB
Vue
239 lines
6.4 KiB
Vue
|
<template>
|
|||
|
|
<view class="page flex flex-col">
|
|||
|
|
<view class="top flex align-center">
|
|||
|
|
<view style="font-size: 32rpx;width: 64rpx;flex-shrink: 0;">
|
|||
|
|
新酒上市
|
|||
|
|
</view>
|
|||
|
|
<view class="scroll-container">
|
|||
|
|
<view v-for="(it, index) in dataList" style="text-align: center;"
|
|||
|
|
:class="{active : currentMonthIndex == index}" @click="changeMonth(it, index)">
|
|||
|
|
<view style="font-size: 32rpx;">{{ it.month}}月</view>
|
|||
|
|
<view style="font-size: 20rpx;">共{{ it.beerCount}}款</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="container flex-1">
|
|||
|
|
<view class="flex justify-end">
|
|||
|
|
<view class="style-btn" @click="showStyle">
|
|||
|
|
<text>筛选</text>
|
|||
|
|
<image src="@/static/icons/filter.svg" style="width: 40rpx;height: 40rpx;"/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<scroll-view scroll-y style="height: 100%;width: 100%;">
|
|||
|
|
<view style="width: 100%;" v-for="it in currentMonth">
|
|||
|
|
<view v-if="it.launchDate" style="color: #0B0E26;font-size: 24rpx;margin-bottom: 8rpx;">
|
|||
|
|
<image src="@/static/icons/direct-right.svg" style="width: 28rpx;height: 28rpx;" mode=""></image>
|
|||
|
|
<text
|
|||
|
|
style="font-size: 36rpx;margin-left: 8rpx;">{{ it.launchDate.slice(8, 10)}}</text>/<text>{{ it.launchDate.slice(5, 7)}}</text>月
|
|||
|
|
</view>
|
|||
|
|
<view class="beerItem">
|
|||
|
|
<view class="beerCard flex align-center" @click="toBeer(it)">
|
|||
|
|
<image :src="it.cover" style="width: 144rpx;height: 204rpx;margin-right:20rpx;"></image>
|
|||
|
|
<view class="flex-1">
|
|||
|
|
|
|||
|
|
<view class="word-all margin-bottom-sm" style="color:#1E2019">
|
|||
|
|
{{it.beerName}}
|
|||
|
|
</view>
|
|||
|
|
<view class="word-all margin-bottom-sm"
|
|||
|
|
style="font-size: 24rpx;color: rgba(30, 32, 25, 0.8);">{{ it.beerStyles}}
|
|||
|
|
</view>
|
|||
|
|
<view class="word-all margin-bottom-sm" style="color:#1E2019">{{ it.brandName}}</view>
|
|||
|
|
</view>
|
|||
|
|
<image src="@/static/right-arrow.png" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;">
|
|||
|
|
</image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view style="width: 100%;color: #979797;margin-top: 60rpx;margin-bottom: 60rpx;text-align: center;">更多新品发布信息，敬请关注更新~</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="flex align-center justify-between tip">
|
|||
|
|
<text>开启新酒上枪通知，第一时间获取新酒资讯</text>
|
|||
|
|
<image src="@/static/add.png" style="width: 32rpx;height: 32rpx;"></image>
|
|||
|
|
</view> -->
|
|||
|
|
<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="32rpx 32rpx 0 0">
|
|||
|
|
<shaiXuan></shaiXuan>
|
|||
|
|
</uni-popup>
|
|||
|
|
<!-- <uni-popup ref="popup" type="right" background-color="#fff">
|
|||
|
|
<scroll-view scroll-y="true" style="height: 90%;">
|
|||
|
|
<view v-for="(item, index) in popularStyleList" :key="index" class="padding"
|
|||
|
|
@click="searchByStyle(item)">
|
|||
|
|
<view class="word-all" :class="{active: item.beerStyles == queryForm.style}" >{{ item.beerStyles}}</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
<view class="flex justify-center clearBtn" style="margin-top: 40rpx;" @click="clear">清除筛选</view>
|
|||
|
|
</uni-popup> -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
getLastSixMonth,
|
|||
|
|
getNewBeerListByMonth,
|
|||
|
|
popularStyle,
|
|||
|
|
} from "@/api/platform.js"
|
|||
|
|
import shaiXuan from '@/components/shaiXuan.vue';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
shaiXuan,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
dataList: [],
|
|||
|
|
currentMonth: [],
|
|||
|
|
currentMonthIndex: 0,
|
|||
|
|
popularStyleList: [],
|
|||
|
|
queryForm: {
|
|||
|
|
num: null
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.getPopularStyle()
|
|||
|
|
this.getLastSixMonthFun()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 获取热门风格
|
|||
|
|
getPopularStyle() {
|
|||
|
|
popularStyle().then(res => {
|
|||
|
|
console.log(res)
|
|||
|
|
this.popularStyleList = res.data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
changeMonth(item, index) {
|
|||
|
|
this.currentMonthIndex = index
|
|||
|
|
this.currentMonth = item.beers
|
|||
|
|
this.queryForm.num = index
|
|||
|
|
this.getNewBeerListByMonthFun()
|
|||
|
|
},
|
|||
|
|
getLastSixMonthFun() {
|
|||
|
|
getLastSixMonth().then(res => {
|
|||
|
|
console.log(res)
|
|||
|
|
this.dataList = res.data
|
|||
|
|
this.queryForm.num = 0
|
|||
|
|
this.getNewBeerListByMonthFun()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 跳转酒款详情
|
|||
|
|
toBeer(item) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/index/review?beerId=' + item.id
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
showStyle() {
|
|||
|
|
this.$refs.popup.open()
|
|||
|
|
},
|
|||
|
|
searchByStyle(item) {
|
|||
|
|
this.queryForm.style = item.beerStyles
|
|||
|
|
this.getNewBeerListByMonthFun()
|
|||
|
|
this.$refs.popup.close()
|
|||
|
|
},
|
|||
|
|
// 获取新酒列表
|
|||
|
|
getNewBeerListByMonthFun() {
|
|||
|
|
getNewBeerListByMonth(this.queryForm).then(res => {
|
|||
|
|
console.log(res)
|
|||
|
|
this.currentMonth = res.data
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
clear() {
|
|||
|
|
delete this.queryForm.style
|
|||
|
|
this.$refs.popup.close()
|
|||
|
|
this.getNewBeerListByMonthFun()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.page {
|
|||
|
|
height: 100vh;
|
|||
|
|
background: #F2F2F2;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
font-family: Roboto;
|
|||
|
|
.top {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 172rpx;
|
|||
|
|
// background: #3D3D3D;
|
|||
|
|
// color: #FFFFFF;
|
|||
|
|
color:#030303;
|
|||
|
|
background: #FFF;
|
|||
|
|
font-weight: 600;
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.scroll-container {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: row;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
color: #606060;
|
|||
|
|
.active {
|
|||
|
|
color: #FFC700;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
// height: calc(100vh - 182rpx); ;
|
|||
|
|
// // margin-top: -10rpx;
|
|||
|
|
// border-radius: 12rpx;
|
|||
|
|
// padding: 32rpx;
|
|||
|
|
// background: #F2F2F2;
|
|||
|
|
// padding-bottom: constant(safe-area-inset-bottom);
|
|||
|
|
// padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
height: calc(100vh - 172rpx - env(safe-area-inset-bottom)); // 扣除顶部高度和底部安全区域
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
background: #F2F2F2;
|
|||
|
|
overflow: hidden;
|
|||
|
|
.style-btn {
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
background: #D42E78;
|
|||
|
|
font-family: Roboto;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #FFF;
|
|||
|
|
padding: 12rpx 16rpx 12rpx 24rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.beerItem {
|
|||
|
|
// padding-left: 18rpx;
|
|||
|
|
// margin-left: 18rpx;
|
|||
|
|
// border-left: 4rpx dashed #FFF;
|
|||
|
|
|
|||
|
|
.beerCard {
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
padding: 24rpx 24rpx 20rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tip {
|
|||
|
|
padding: 0 30rpx 0 48rpx;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
background: rgba(254, 224, 52, 0.36);
|
|||
|
|
height: 64rpx;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: env(safe-area-inset-bottom);
|
|||
|
|
width: 100%;
|
|||
|
|
color: #5E5F60;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.active {
|
|||
|
|
color: #FFC700;
|
|||
|
|
}
|
|||
|
|
.clearBtn {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #5E5F60;
|
|||
|
|
}
|
|||
|
|
</style>
|