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> |