152 lines
3.8 KiB
Vue
152 lines
3.8 KiB
Vue
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
<view class="top flex justify-start">
|
||
|
|
<view class="tag" :class="{'active': queryForm.orderByColumn == 'beer_reviews_count'}" @click="changeTab(0)">人气蹿升</view>
|
||
|
|
<view class="tag" @click="changeTab(1)">品牌筛选</view>
|
||
|
|
<view class="tag" :class="{'active': queryForm.orderByColumn == 'create_time'}" @click="changeTab(2)">上市时间</view>
|
||
|
|
<view class="tag" :class="{'active': queryForm.orderByColumn == 'beer_overall_rating'}" @click="changeTab(3)">评分</view>
|
||
|
|
</view>
|
||
|
|
<scroll-view scroll-y style="height: calc(100vh - 110rpx);width: 100%;padding: 24rpx 0;" @scrolltolower="pageChange">
|
||
|
|
|
||
|
|
|
||
|
|
<view class="beerCard flex align-center" v-for="it in beers" @click="toBeer(it)">
|
||
|
|
<image :src="it.cover" style="width: 144rpx;height: 204rpx;margin-right:20rpx;border-radius: 12rpx;">
|
||
|
|
</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">
|
||
|
|
<image :src="it.brandLogo" style="width: 30rpx;height: 30rpx;margin-right: 12rpx;">
|
||
|
|
</image>
|
||
|
|
{{ it.brandName}}
|
||
|
|
</view>
|
||
|
|
<!-- <view style="margin-bottom: 18rpx;font-size: 30rpx;color: #5F5F63;">{{ beer.brandName}}</view> -->
|
||
|
|
<text style="border-radius: 16rpx;background: #F5F5F5;padding: 8rpx 16rpx;color: #5F5F63;">
|
||
|
|
<text class="cuIcon-favorfill" style="font-size: 30rpx;color: #FFBC11;"></text>
|
||
|
|
{{ it.beerOverallRating}}
|
||
|
|
</text>
|
||
|
|
<text style="color: #5F5F63;margin-left: 16rpx;">{{it.beerReviewsCount}} 条评论</text>
|
||
|
|
</view>
|
||
|
|
<image src="@/static/right-arrow.png" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;">
|
||
|
|
</image>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
getBeerByStyle,
|
||
|
|
} from "@/api/platform.js"
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
beerStyles: '',
|
||
|
|
beers: [],
|
||
|
|
total: 0,
|
||
|
|
queryForm: {
|
||
|
|
pageNum: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
orderByColumn: 'beer_reviews_count',
|
||
|
|
breweryId: '',
|
||
|
|
style: ''
|
||
|
|
}
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad({
|
||
|
|
beerStyles
|
||
|
|
}) {
|
||
|
|
this.queryForm.style = beerStyles
|
||
|
|
this.searchByStyle()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
changeTab(index) {
|
||
|
|
this.queryForm.pageNum = 1
|
||
|
|
this.beers = []
|
||
|
|
|
||
|
|
switch (index){
|
||
|
|
case 0:
|
||
|
|
this.queryForm.orderByColumn = 'beer_reviews_count'
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
this.queryForm.orderByColumn = ''
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
this.queryForm.orderByColumn = 'create_time'
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
this.queryForm.orderByColumn = 'beer_overall_rating'
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
this.searchByStyle()
|
||
|
|
},
|
||
|
|
searchByStyle() {
|
||
|
|
getBeerByStyle(this.queryForm).then(res => {
|
||
|
|
console.log(res)
|
||
|
|
this.total = res.total
|
||
|
|
this.beers = res.rows
|
||
|
|
})
|
||
|
|
},
|
||
|
|
toBeer(item) {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/index/review?beerId=' + item.id
|
||
|
|
})
|
||
|
|
},
|
||
|
|
pageChange() {
|
||
|
|
if (this.beers.length < this.total) {
|
||
|
|
this.queryForm.pageNum++
|
||
|
|
this.searchByStyle()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.page {
|
||
|
|
width: 100%;
|
||
|
|
background: #F2F2F2;
|
||
|
|
|
||
|
|
.top {
|
||
|
|
width: 100%;
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 16rpx 30rpx;
|
||
|
|
.tag {
|
||
|
|
color: #606060;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
width: 134rpx;
|
||
|
|
height: 64rpx;
|
||
|
|
line-height: 64rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 24rpx;
|
||
|
|
background-color: #F9F9F9;
|
||
|
|
margin-right: 16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.active {
|
||
|
|
background-color: #39E5B1;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
border-bottom:1px solid #E7E7E7;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.beerCard {
|
||
|
|
border-radius: 12rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
padding: 24rpx 24rpx;
|
||
|
|
margin: 0 30rpx 24rpx;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|