235 lines
6.0 KiB
Vue
235 lines
6.0 KiB
Vue
<template>
|
||
<view class="page flex flex-col">
|
||
<!-- <CustomNavBar title="风格选酒" :bgcolor="bgcolor"/> -->
|
||
|
||
<!-- <view class="" style="margin: 20rpx 0;font-size: 24rpx;color: #606060;padding-left: 32rpx;">
|
||
<view class="" >探索啤酒风味新边界</view>
|
||
</view> -->
|
||
<view class="container">
|
||
<scroll-view scroll-y style="height: 100%;width: 100%;">
|
||
<!-- 活动标题和描述 -->
|
||
<view class="activity-header">
|
||
<view class="activity-title">{{featureInfo.pageName || '专辑详情'}}</view>
|
||
<view class="activity-desc">{{featureInfo.subTitle || '探索啤酒风味新边界'}}</view>
|
||
</view>
|
||
|
||
<!-- 酒款列表 -->
|
||
<view class="beer-list">
|
||
<view class="beer-item" v-for="(item, index) in beerList" :key="index" @click="toBeer(item)">
|
||
<image class="beer-image" :src="item.cover" mode="aspectFill"></image>
|
||
<view class="beer-info">
|
||
<view class="beer-name">{{item.beerName}}</view>
|
||
<view class="beer-style">{{item.beerStyles}}</view>
|
||
<view class="beer-brand">{{item.brandName}}</view>
|
||
<view class="beer-rating">
|
||
<text>{{item.avgOverallRating || '4.9'}}</text>
|
||
<image src="@/static/vector.png" class="rating-icon"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="more-tip">更多新品发布信息，敬请关注更新~</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> -->
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getFeaturePage,
|
||
getBeerList
|
||
} from "@/api/platform.js"
|
||
export default {
|
||
components: {
|
||
},
|
||
data() {
|
||
return {
|
||
featureId: '',
|
||
featureInfo: {},
|
||
beerList: [],
|
||
queryForm: {
|
||
search: ''
|
||
},
|
||
bgcolor:'#19367A',
|
||
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
console.log('专辑详情页 onLoad options:', options)
|
||
if (options.id) {
|
||
this.featureId = options.id
|
||
console.log('专辑ID:', this.featureId)
|
||
this.getFeatureDetail()
|
||
} else {
|
||
console.error('未传递专辑ID')
|
||
uni.showToast({
|
||
title: '参数错误',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
onShow(){
|
||
// uni.showTabBar()
|
||
},
|
||
methods: {
|
||
// 获取专辑详情
|
||
async getFeatureDetail() {
|
||
try {
|
||
console.log('开始获取专辑详情，ID:', this.featureId)
|
||
const res = await getFeaturePage(this.featureId)
|
||
console.log('专辑详情接口返回数据:', res)
|
||
if (res.code === 200 && res.data) {
|
||
this.featureInfo = res.data
|
||
console.log('专辑详情数据:', this.featureInfo)
|
||
// 获取专辑相关的酒款列表
|
||
this.getBeerList()
|
||
} else {
|
||
console.error('获取专辑详情失败，返回码:', res.code)
|
||
uni.showToast({
|
||
title: '获取专辑详情失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('获取专辑详情失败:', error)
|
||
uni.showToast({
|
||
title: '获取专辑详情失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
|
||
// 获取酒款列表
|
||
async getBeerList() {
|
||
try {
|
||
// 使用专辑的关键词或ID来获取相关酒款
|
||
const params = {
|
||
featurePageId: this.featureId
|
||
}
|
||
console.log('开始获取酒款列表，参数:', params)
|
||
|
||
const res = await getBeerList(params)
|
||
console.log('酒款列表接口返回数据:', res)
|
||
if (res.code === 200 && res.data) {
|
||
this.beerList = res.data
|
||
console.log('酒款列表数据:', this.beerList)
|
||
} else {
|
||
console.error('获取酒款列表失败，返回码:', res.code)
|
||
uni.showToast({
|
||
title: '获取酒款列表失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} catch (error) {
|
||
console.error('获取酒款列表失败:', error)
|
||
uni.showToast({
|
||
title: '获取酒款列表失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
|
||
// 跳转到酒款详情
|
||
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: #FFFFFF;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-family: Roboto;
|
||
.container {
|
||
height: calc(100vh - 102rpx);
|
||
margin-top: -24rpx;
|
||
border-radius: 12rpx;
|
||
padding: 24rpx;
|
||
// 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> |