350 lines
7.2 KiB
Vue
350 lines
7.2 KiB
Vue
<template>
|
|
<view class="page">
|
|
<!-- 顶部导航栏 -->
|
|
<u-navbar title="福鼎名宴" :border-bottom="false" :background="bgc" back-icon-color="#000" title-color='#000'
|
|
title-size='36' height='46' id="navbar">
|
|
</u-navbar>
|
|
|
|
<!-- 头部背景区域 -->
|
|
<view class="header-section">
|
|
<image class="header-bg" :src="headerBgImage" mode="aspectFill"></image>
|
|
</view>
|
|
|
|
<!-- 分类选择卡片 -->
|
|
<view class="category-card">
|
|
<scroll-view class="category-scroll" scroll-x scroll-with-animation :show-scrollbar="false">
|
|
<view class="category-scroll-content">
|
|
<view
|
|
class="category-item"
|
|
v-for="(item, index) in categoryList"
|
|
:key="index"
|
|
@click="selectCategory(item,index)">
|
|
<!-- <text class="category-area" :class="{ active: selectedCategoryId === item.id }">{{ item.area }}</text> -->
|
|
<text class="category-name" :class="{ active: selectedCategoryId === index }">{{ item.title == undefined ? '--' : item.title}}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 主内容区 -->
|
|
<view class="contbox">
|
|
<view class="jianjie">
|
|
{{xqobj.description}}
|
|
</view>
|
|
<view class="caipin">
|
|
<view class="caipintit">
|
|
<image src="https://api.ccttiot.com/hnpOnLNi28B8f5f2167f898cc9aec1f326af594dabb5.png" mode=""></image> 菜品介绍
|
|
</view>
|
|
<view class="caipincont" style="margin-top: 22rpx;">
|
|
<u-parse :html="xqobj.content"></u-parse>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#fff",
|
|
},
|
|
headerBgImage: 'https://api.ccttiot.com/JSROZpwFSyVx91ab0bf61fbd9a83e99660dde3d4fa35.png',
|
|
// 分类列表
|
|
categoryList: [],
|
|
selectedCategoryId: 0, // 默认选中第一个
|
|
allBanquetList: [],
|
|
hasMore: false,
|
|
pageNum: 1,
|
|
id:'',
|
|
xqobj:{}
|
|
}
|
|
},
|
|
computed: {
|
|
// 根据选中的分类过滤名宴列表
|
|
banquetList() {
|
|
if (!this.selectedCategoryId) {
|
|
return this.allBanquetList
|
|
}
|
|
return this.allBanquetList.filter(item => item.id === this.selectedCategoryId)
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getbq()
|
|
},
|
|
methods: {
|
|
// 请求分裂标签
|
|
getbq(){
|
|
this.$u.get(`/app/article/list?pageNum=1&pageSize=999&type=7`).then(res =>{
|
|
if(res.code == 200){
|
|
this.id = res.rows[0].id
|
|
this.goToBanquetDetail()
|
|
this.categoryList = res.rows.map(item => {
|
|
if(item.title) {
|
|
item.title = item.title.replace(/\\x22/g, '').replace(/^["']|["']$/g, '')
|
|
}
|
|
return item
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 选择分类
|
|
selectCategory(item,index) {
|
|
this.selectedCategoryId = index
|
|
},
|
|
// 加载更多
|
|
loadMore() {
|
|
if (this.hasMore) {
|
|
// 这里可以添加加载更多逻辑
|
|
console.log('加载更多')
|
|
}
|
|
},
|
|
// 跳转到名宴详情
|
|
goToBanquetDetail(item) {
|
|
this.$u.get(`/app/article/detail/${this.id}`).then(res =>{
|
|
if(res.code == 200){
|
|
this.xqobj = res.data
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.contbox{
|
|
width: 702rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(0,0,0,0.1);
|
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
|
margin: auto;
|
|
padding: 32rpx 28rpx;
|
|
.jianjie{
|
|
font-size: 24rpx;
|
|
color: #3D3D3D;
|
|
border-bottom: 1rpx solid #D8D8D8;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
.caipintit{
|
|
margin-top: 22rpx;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #1EC28B;
|
|
display: flex;
|
|
align-items: center;
|
|
image{
|
|
width: 31rpx;
|
|
height: 33rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.page {
|
|
width: 100%;
|
|
background: #F5F5F5;
|
|
padding-bottom: 50rpx;
|
|
}
|
|
// 头部区域
|
|
.header-section {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 400rpx;
|
|
|
|
.header-bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
// 分类选择卡片
|
|
.category-card {
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin: -40rpx 30rpx 30rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
position: relative;
|
|
z-index: 10;
|
|
height: 80rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.category-scroll {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
.category-scroll-content {
|
|
display: inline-flex;
|
|
padding: 0 20rpx;
|
|
.category-item {
|
|
flex-shrink: 0;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 140rpx;
|
|
margin-right: 40rpx;
|
|
|
|
&:last-child {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.category-area {
|
|
font-size: 28rpx;
|
|
color: #4CAF50;
|
|
margin-bottom: 12rpx;
|
|
font-weight: 500;
|
|
&.active {
|
|
color: #004D34 !important;
|
|
}
|
|
}
|
|
|
|
.category-name {
|
|
font-size: 26rpx;
|
|
color: #4CAF50;
|
|
position: relative;
|
|
padding-bottom: 8rpx;
|
|
|
|
&.active {
|
|
color: #004D34 !important;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 60rpx;
|
|
height: 4rpx;
|
|
background: #004D34;
|
|
border-radius: 2rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 主内容区
|
|
.content-scroll {
|
|
width: 100%;
|
|
height: calc(100vh - 400rpx - 88rpx);
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
background: #F5F5F5;
|
|
}
|
|
|
|
// 名宴列表
|
|
.banquet-list {
|
|
width: 100%;
|
|
|
|
.banquet-item {
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 30rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
|
|
.banquet-image-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 400rpx;
|
|
overflow: hidden;
|
|
|
|
.banquet-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.banquet-tag {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
background: rgba(76, 175, 80, 0.9);
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
|
|
.tag-text {
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.banquet-info {
|
|
padding: 30rpx;
|
|
|
|
.banquet-name {
|
|
display: block;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #262B37;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.banquet-desc {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
line-height: 1.6;
|
|
margin-bottom: 20rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.banquet-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.banquet-price {
|
|
font-size: 32rpx;
|
|
color: #4CAF50;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.banquet-location {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
|
|
.location-icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 加载更多提示
|
|
.load-more-tip {
|
|
text-align: center;
|
|
padding: 40rpx 0;
|
|
|
|
.tip-text {
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.no-more {
|
|
text-align: center;
|
|
padding: 40rpx 0;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.no-data {
|
|
text-align: center;
|
|
padding: 100rpx 0;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
</style> |