364 lines
9.5 KiB
Vue
364 lines
9.5 KiB
Vue
|
<template>
|
|||
|
|
<view class="page flex flex-col">
|
|||
|
|
<!-- <CustomNavBar title="风格选酒" :bgcolor="bgcolor"/> -->
|
|||
|
|
<view>
|
|||
|
|
<Sieving
|
|||
|
|
ref="daDropdown"
|
|||
|
|
:dropdownMenu="dropdownMenuList"
|
|||
|
|
themeColor="#333"
|
|||
|
|
@confirm="handleConfirm"
|
|||
|
|
@close="handleClose"
|
|||
|
|
@open="handleOpen">
|
|||
|
|
<!-- <template v-slot:slot2="{item,index}">
|
|||
|
|
<view style="padding: 20px">
|
|||
|
|
自定义插槽内容，更多业务
|
|||
|
|
<button @click="$refs.daDropdown.closeMenuPopup()">关闭</button>
|
|||
|
|
</view>
|
|||
|
|
</template> -->
|
|||
|
|
</Sieving>
|
|||
|
|
</view>
|
|||
|
|
<view class="" style="margin: 20rpx 0;font-size: 24rpx;color: #606060;padding-left: 32rpx;">
|
|||
|
|
<view class="" @click="showStyle">共{{}}款在售酒款</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="container flex-1">
|
|||
|
|
|
|||
|
|
<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: #979797;font-size: 24rpx;margin-bottom: 8rpx;">
|
|||
|
|
<text
|
|||
|
|
style="font-size: 36rpx;">{{ 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="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="flex-1"> -->
|
|||
|
|
<view class="word-all" :class="{active: item.beerStyles == queryForm.style}" >{{ item.beerStyles}}</view>
|
|||
|
|
<!-- <view class="sub">全系列{{item.popular}}款产品在售</view> -->
|
|||
|
|
<!-- </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 CustomNavBar from '@/components/CustomNavBar.vue'
|
|||
|
|
import Sieving from '@/components/sieving/index.vue'
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
CustomNavBar,
|
|||
|
|
Sieving
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
dataList: [],
|
|||
|
|
currentMonth: [],
|
|||
|
|
currentMonthIndex: 0,
|
|||
|
|
popularStyleList: [],
|
|||
|
|
queryForm: {
|
|||
|
|
num: null
|
|||
|
|
},
|
|||
|
|
bgcolor:'#19367A',
|
|||
|
|
dropdownMenuList: [
|
|||
|
|
{
|
|||
|
|
title: '类型',
|
|||
|
|
type: 'cell',
|
|||
|
|
prop: 'god1',
|
|||
|
|
showAll: true,
|
|||
|
|
showIcon: true,
|
|||
|
|
value: '2', // 默认内容2
|
|||
|
|
options: [
|
|||
|
|
{ label: '综合排序', value: '1' },
|
|||
|
|
// { label: '下拉列表项1', value: '1', suffix: '可插入副标题' },
|
|||
|
|
{ label: '好评最多', value: '2' },
|
|||
|
|
{ label: '距离最近', value: '3' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
title: '口味',
|
|||
|
|
type: 'filter',
|
|||
|
|
prop: 'god4',
|
|||
|
|
// 默认选中单选2、多选2、3、滑动30
|
|||
|
|
value: { ft1: '2', ft2: ['2', '3'], ft3: 30 },
|
|||
|
|
options: [
|
|||
|
|
{
|
|||
|
|
title: '口味（单选）',
|
|||
|
|
type: 'radio',
|
|||
|
|
prop: 'ft1',
|
|||
|
|
options: [
|
|||
|
|
{ label: '酱香', value: '1' },
|
|||
|
|
{ label: '麻辣', value: '2' },
|
|||
|
|
{ label: '特辣', value: '3' },
|
|||
|
|
{ label: '微微辣', value: '4' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '配菜（可多选）',
|
|||
|
|
type: 'checkbox',
|
|||
|
|
prop: 'ft2',
|
|||
|
|
options: [
|
|||
|
|
{ label: '香菜', value: '1' },
|
|||
|
|
{ label: '辣椒', value: '2' },
|
|||
|
|
{ label: '折耳根', value: '3' },
|
|||
|
|
{ label: '蒜泥', value: '4' },
|
|||
|
|
{ label: '耗油', value: '5' },
|
|||
|
|
{ label: '精品牛肉酱', value: '6' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '糖度',
|
|||
|
|
type: 'slider',
|
|||
|
|
prop: 'ft3',
|
|||
|
|
componentProps: {
|
|||
|
|
min: 0,
|
|||
|
|
max: 100,
|
|||
|
|
step: 1,
|
|||
|
|
showValue: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '区域',
|
|||
|
|
type: 'picker',
|
|||
|
|
prop: 'god5',
|
|||
|
|
showAll: true,
|
|||
|
|
showIcon: true,
|
|||
|
|
field: {
|
|||
|
|
label: 'label',
|
|||
|
|
value: 'value',
|
|||
|
|
children: 'children',
|
|||
|
|
},
|
|||
|
|
value: ['2', '2-2'], // 默认选中 级联X22
|
|||
|
|
options: [{
|
|||
|
|
label: '广东省',
|
|||
|
|
value: '1',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
label: '佛山市',
|
|||
|
|
value: '1-1',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '深圳市',
|
|||
|
|
value: '1-2',
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '海南省',
|
|||
|
|
value: '2',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
label: '海口市',
|
|||
|
|
value: '2-1',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '儋州市',
|
|||
|
|
value: '2-2',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '三亚市',
|
|||
|
|
value: '2-3',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '浙江省',
|
|||
|
|
value: '3',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
label: '杭州市',
|
|||
|
|
value: '3-1',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '宁波市',
|
|||
|
|
value: '3-2',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '嘉兴市',
|
|||
|
|
value: '3-3',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
}],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '日期',
|
|||
|
|
type: 'daterange',
|
|||
|
|
prop: 'god6',
|
|||
|
|
// 默认选中 2022-01-01到2022-02-01
|
|||
|
|
value: { start: '2022-01-01', end: '2022-02-01' },
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// title: '插槽',
|
|||
|
|
// type: 'slot2',
|
|||
|
|
// prop: 'god2',
|
|||
|
|
// showArrow: true,
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// title: '排序',
|
|||
|
|
// type: 'sort',
|
|||
|
|
// prop: 'god3',
|
|||
|
|
// value: 'asc', // 默认升序
|
|||
|
|
// },
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
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()
|
|||
|
|
},
|
|||
|
|
handleConfirm(v, selectedValue) {
|
|||
|
|
console.log('当前项: ', v)
|
|||
|
|
console.log('---------------')
|
|||
|
|
console.log('全部项目(所有): ', selectedValue)
|
|||
|
|
},
|
|||
|
|
handleClose(v, callbackMenuList) {
|
|||
|
|
// console.log('handleClose ==>', v, callbackMenuList)
|
|||
|
|
},
|
|||
|
|
handleOpen(v) {
|
|||
|
|
// console.log('handleOpen ==>', v)
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.page {
|
|||
|
|
height: 100vh;
|
|||
|
|
background: #F2F2F2;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
.container {
|
|||
|
|
height: calc(100vh - 182rpx);
|
|||
|
|
margin-top: -24rpx;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
background: #F2F2F2;
|
|||
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
.style-btn {
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
background: #39E5B1;
|
|||
|
|
font-family: Roboto;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #0B0E26;
|
|||
|
|
padding: 6rpx 10rpx;
|
|||
|
|
}
|
|||
|
|
.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>
|