416 lines
12 KiB
Vue
416 lines
12 KiB
Vue
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
<u-navbar title="舌尖美食" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
||
|
|
title-size='36' height='36' id="navbar">
|
||
|
|
</u-navbar>
|
||
|
|
|
||
|
|
<!-- 美食榜头部 -->
|
||
|
|
<view class="ranking-header">
|
||
|
|
<view :class="tabindex == 0 ? 'active' : ''" @click="btntab(0)">
|
||
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ueH28fQ7rRVcvaMRuFOJ" mode="aspectFill"></image>
|
||
|
|
<text class="ranking-title">美食榜</text>
|
||
|
|
</view>
|
||
|
|
<view :class="tabindex == 1 ? 'active' : ''" @click="btntab(1)">
|
||
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/ueH28fQ7rRVcvaMRuFOJ" mode="aspectFill"></image>
|
||
|
|
<text class="ranking-title">招牌老店</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 美食列表 -->
|
||
|
|
<scroll-view @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black" v-if="tabindex == 0" class="food-list">
|
||
|
|
<view class="food-card" v-for="(food, index) in foodList" :key="index" @click="btnone(food)">
|
||
|
|
<view class="food-image">
|
||
|
|
<image :src="food.imageUrl" mode="aspectFill" class="image"></image>
|
||
|
|
</view>
|
||
|
|
<view class="food-content">
|
||
|
|
<text class="food-title">{{ food.name }}</text>
|
||
|
|
<text class="food-description">{{ food.description.length > 50 ? food.description.slice(0,50) + '...' : food.description }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
<!-- 招牌老店 -->
|
||
|
|
<scroll-view @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black" class="food-list" v-if="tabindex == 1">
|
||
|
|
<view class="store-card" v-for="(store, index) in storeList" :key="index">
|
||
|
|
<view class="card-title">
|
||
|
|
<text class="store-title">{{ store.name }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="store-image">
|
||
|
|
<image :src="store.picture" mode="aspectFill" class="image"></image>
|
||
|
|
<view class="image-overlay">
|
||
|
|
<view class="rating-section">
|
||
|
|
<view class="stars">
|
||
|
|
<text class="star" v-for="n in 5" :key="n">★</text>
|
||
|
|
</view>
|
||
|
|
<text class="rating-score">{{ store.rating }}</text>
|
||
|
|
<!-- <text class="rating-text">{{ store.ratingText }}</text> -->
|
||
|
|
<text class="review-count">{{ store.commentCount }}条</text>
|
||
|
|
</view>
|
||
|
|
<view class="price-section">
|
||
|
|
<text class="price">¥{{ store.capita }}/人</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="store-content">
|
||
|
|
<view class="store-info">
|
||
|
|
<view class="" style="display: flex;align-items: center;">
|
||
|
|
<text class="store-category">{{ store.description == null ? '' : store.description }}</text>
|
||
|
|
<text class="store-location">{{ store.address }}</text>
|
||
|
|
</view>
|
||
|
|
<text class="store-distance">{{ store.distance == null ? '' : store.distance }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
bgc: {
|
||
|
|
backgroundColor: "#fff",
|
||
|
|
},
|
||
|
|
tabindex:0,
|
||
|
|
foodList: [],
|
||
|
|
storeList: [
|
||
|
|
{
|
||
|
|
title: "老福鼎传统菜",
|
||
|
|
category: "老福鼎传统菜",
|
||
|
|
location: "福鼎市中心",
|
||
|
|
distance: "直线12km",
|
||
|
|
rating: "4.8",
|
||
|
|
ratingText: "超棒",
|
||
|
|
reviewCount: "2755",
|
||
|
|
price: "75",
|
||
|
|
image: "https://api.ccttiot.com/smartmeter/img/static/uRZsAt3nrWrxBPGrHFnz"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "铭鼎鲜牛肉火锅 (新时代商厦店)",
|
||
|
|
category: "潮汕牛肉火锅",
|
||
|
|
location: "福鼎市中心",
|
||
|
|
distance: "直线12km",
|
||
|
|
rating: "4.8",
|
||
|
|
ratingText: "超棒",
|
||
|
|
reviewCount: "2755",
|
||
|
|
price: "81",
|
||
|
|
image: "https://api.ccttiot.com/smartmeter/img/static/uRZsAt3nrWrxBPGrHFnz"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "老福鼎肉片 (一中店)",
|
||
|
|
category: "十年老店",
|
||
|
|
location: "福鼎市中心",
|
||
|
|
distance: "直线12km",
|
||
|
|
rating: "4.8",
|
||
|
|
ratingText: "超棒",
|
||
|
|
reviewCount: "2755",
|
||
|
|
price: "11",
|
||
|
|
image: "https://api.ccttiot.com/smartmeter/img/static/uRZsAt3nrWrxBPGrHFnz"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "大丰收脆鱼 (中汇广场店)",
|
||
|
|
category: "特色烤鱼",
|
||
|
|
location: "福鼎市中心",
|
||
|
|
distance: "直线12km",
|
||
|
|
rating: "4.8",
|
||
|
|
ratingText: "超棒",
|
||
|
|
reviewCount: "2755",
|
||
|
|
price: "68",
|
||
|
|
image: "https://api.ccttiot.com/smartmeter/img/static/uRZsAt3nrWrxBPGrHFnz"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
isRefreshing:false,
|
||
|
|
pageNum:1,
|
||
|
|
total:0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.getlist()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 请求美食榜列表
|
||
|
|
getlist(){
|
||
|
|
this.$u.get(`/app/dish/list?pageNum=${this.pageNum}&pageSize=20`).then((res) => {
|
||
|
|
if(res.code == 200){
|
||
|
|
this.total = res.total
|
||
|
|
if(this.pageNum == 1){
|
||
|
|
this.pageNum++
|
||
|
|
this.foodList = res.rows
|
||
|
|
}else{
|
||
|
|
this.pageNum++
|
||
|
|
this.foodList = this.foodList.concat(res.rows)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 请求招牌老店列表
|
||
|
|
getshop(){
|
||
|
|
this.$u.get(`/app/store/list?pageNum=${this.pageNum}&pageSize=20`).then((res) => {
|
||
|
|
if(res.code == 200){
|
||
|
|
this.total = res.total
|
||
|
|
if(this.pageNum == 1){
|
||
|
|
this.pageNum++
|
||
|
|
this.storeList = res.rows
|
||
|
|
}else{
|
||
|
|
this.pageNum++
|
||
|
|
this.storeList = this.storeList.concat(res.rows)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 点击切换tab
|
||
|
|
btntab(num){
|
||
|
|
this.tabindex = num
|
||
|
|
this.pageNum = 1
|
||
|
|
if(num == 0){
|
||
|
|
this.getlist()
|
||
|
|
}else{
|
||
|
|
this.getshop()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 上拉加载更多
|
||
|
|
handqixing() {
|
||
|
|
console.log('加载更多')
|
||
|
|
this.pageNum = 1
|
||
|
|
if(this.tabindex == 0){
|
||
|
|
this.getlist()
|
||
|
|
}else{
|
||
|
|
this.getshop()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 下拉刷新
|
||
|
|
onRefresh() {
|
||
|
|
this.isRefreshing = true //刷新动画
|
||
|
|
setTimeout(() => {
|
||
|
|
this.isRefreshing = false
|
||
|
|
this.pageNum = 1
|
||
|
|
if(this.tabindex == 0){ //判断请求的是推荐商家还是美食
|
||
|
|
this.getlist()
|
||
|
|
}else{
|
||
|
|
this.getshop()
|
||
|
|
}
|
||
|
|
}, 1000)
|
||
|
|
},
|
||
|
|
// 点击美食榜跳转详情
|
||
|
|
btnone(food){
|
||
|
|
console.log(1);
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/page_user/meishi/meishixq?id=' + food.id
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page {
|
||
|
|
// background: #fff;
|
||
|
|
}
|
||
|
|
.active{
|
||
|
|
font-weight: bold !important;
|
||
|
|
.ranking-title{
|
||
|
|
color: #262B37 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.page {
|
||
|
|
// background: #fff;
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 美食榜头部样式
|
||
|
|
.ranking-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 20rpx 30rpx;
|
||
|
|
background: #fff;
|
||
|
|
view{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-right: 50rpx;
|
||
|
|
}
|
||
|
|
image{
|
||
|
|
width: 48rpx;
|
||
|
|
height: 48rpx;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
}
|
||
|
|
.star-icon {
|
||
|
|
font-size: 32rpx;
|
||
|
|
margin-right: 16rpx;
|
||
|
|
}
|
||
|
|
.ranking-title {
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 美食列表样式
|
||
|
|
.food-list {
|
||
|
|
width: 750rpx;
|
||
|
|
height: 84vh;
|
||
|
|
padding-bottom: 30rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
// 美食卡片样式
|
||
|
|
.food-card {
|
||
|
|
margin: auto;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 14rpx;
|
||
|
|
margin-bottom: 30rpx;
|
||
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||
|
|
overflow: hidden;
|
||
|
|
width: 680rpx;
|
||
|
|
.food-image {
|
||
|
|
width: 100%;
|
||
|
|
height: 298rpx;
|
||
|
|
border-radius: 14rpx 14rpx 0 0;
|
||
|
|
overflow: hidden;
|
||
|
|
.image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.food-content {
|
||
|
|
padding: 30rpx;
|
||
|
|
.food-title {
|
||
|
|
display: block;
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #262B37;
|
||
|
|
margin-bottom: 16rpx;
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
.food-description {
|
||
|
|
display: block;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #666;
|
||
|
|
line-height: 1.6;
|
||
|
|
text-align: justify;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// 最后一个卡片底部间距
|
||
|
|
.food-card:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 招牌老店卡片样式
|
||
|
|
.store-card {
|
||
|
|
margin: auto;
|
||
|
|
border-radius: 14rpx;
|
||
|
|
margin-bottom: 30rpx;
|
||
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||
|
|
height: 360rpx;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
width: 680rpx;
|
||
|
|
// 卡片标题
|
||
|
|
.card-title {
|
||
|
|
padding: 30rpx 30rpx 20rpx;
|
||
|
|
background: rgba(0,0,0,.5);
|
||
|
|
.store-title {
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #fff;
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.store-image {
|
||
|
|
width: 100%;
|
||
|
|
height: 360rpx;
|
||
|
|
background: rgba(0,0,0,.5);
|
||
|
|
.image {
|
||
|
|
width: 100%;
|
||
|
|
height: 360rpx;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-overlay {
|
||
|
|
padding: 0 30rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: 128rpx;
|
||
|
|
.rating-section {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex: 1;
|
||
|
|
|
||
|
|
.stars {
|
||
|
|
display: flex;
|
||
|
|
margin-right: 16rpx;
|
||
|
|
|
||
|
|
.star {
|
||
|
|
color: #E7322C;
|
||
|
|
font-size: 28rpx;
|
||
|
|
margin-right: 4rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.rating-score {
|
||
|
|
color: #E7322C;
|
||
|
|
font-size: 56rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-right: 16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rating-text {
|
||
|
|
color: #E7322C;
|
||
|
|
font-size: 28rpx;
|
||
|
|
margin-right: 16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.review-count {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-section {
|
||
|
|
.price {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.store-content {
|
||
|
|
padding: 0 30rpx 30rpx;
|
||
|
|
|
||
|
|
.store-info {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: space-between;
|
||
|
|
.store-category {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #fff;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
margin-bottom: 8rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.store-location {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #fff;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
margin-bottom: 8rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.store-distance {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #fff;
|
||
|
|
margin-bottom: 8rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 最后一个招牌老店卡片底部间距
|
||
|
|
.store-card:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
</style>
|