355 lines
11 KiB
Vue
355 lines
11 KiB
Vue
<template>
|
|
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
|
<view>
|
|
<view class="image-box">
|
|
<image style="width: 100%;height: 100%;" :src="dashesData.imageUrl"></image>
|
|
<!-- <image style="width: 100%;height: 100%;" src="../../static/images/code.png"></image> -->
|
|
</view>
|
|
<view class="menuContent">
|
|
<view class="menuInfo">
|
|
<view style="color:#DD7D3C;font-size: 36rpx;font-weight: 600;margin-bottom: 10px;margin-left: 20px;">￥{{(menuData.dishesDetailList[0].prefPrice/100).toFixed(2)}}</view>
|
|
<view style="width: 100%;height: 30px;display: flex;align-items: center;justify-content: space-between;">
|
|
<view style="font-size: 36rpx;font-weight: 600;margin-left: 20px;">{{dashesData.dishesName}}</view>
|
|
<view class="star-icon" style="display: flex;" @click="addCollect" v-if="dashesData.isFavorites==2">
|
|
<u-icon name="star" size="22" color="#ccc"></u-icon><text style="font-size: 30rpx;">收藏</text>
|
|
</view>
|
|
<view class="star-icon" style="display: flex;" @click="cancelCollect" v-if="dashesData.isFavorites==1">
|
|
<u-icon name="star-fill" size="22" color="#ff9900"></u-icon><text style="font-size: 30rpx;">已收藏</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="tab-navigation">
|
|
<Tabs :tabList="tabList" @changeTab="changeTab" />
|
|
</view>
|
|
<view class="tab-content">
|
|
<view class="info-box" v-if="hIndex==0">
|
|
<view style="margin-bottom: 20px;word-break: break-all;">
|
|
<text style="color: #959FA4;margin-right: 20px;">菜品简介</text>
|
|
<text style="word-break: break-all;">{{dashesData.intro||'-'}}</text>
|
|
</view>
|
|
<view style="margin-bottom: 20px;word-break: break-all;">
|
|
<text style="color: #959FA4;margin-right: 20px;">主料</text>
|
|
<text>
|
|
{{dashesData.mainMaterialStr||'-'}}
|
|
</text>
|
|
</view>
|
|
<view style="margin-bottom: 20px;word-break: break-all;">
|
|
<text style="color: #959FA4;margin-right: 20px;">辅料</text>
|
|
<text>
|
|
{{dashesData.subMaterialStr||'-'}}
|
|
</text>
|
|
</view>
|
|
<!-- <view style="margin-bottom: 20px;">
|
|
<text style="color: #959FA4;">口味</text>
|
|
<text style="margin-left: 20px;word-break: break-all;">-</text>
|
|
</view> -->
|
|
</view>
|
|
<view class="nutrition-box" v-if="hIndex==1">
|
|
<view class="nutrition-box-item">
|
|
<view>项目(份)</view>
|
|
<view>热量(份)</view>
|
|
<view>蛋白质(份)</view>
|
|
<view>脂肪(份)</view>
|
|
<view>碳水化合物(份)</view>
|
|
<view>膳食纤维(份)</view>
|
|
<view>胆固醇(份)</view>
|
|
<view>钙(份)</view>
|
|
<view>钠(份)</view>
|
|
</view>
|
|
<view class="nutrition-box-item">
|
|
<view>含量</view>
|
|
<view>{{dashesData.dishesDetailList[0].calories||'-'}}</view>
|
|
<view>{{dashesData.dishesDetailList[0].protein||'-'}}</view>
|
|
<view>{{dashesData.dishesDetailList[0].fat||'-'}}</view>
|
|
<view>{{dashesData.dishesDetailList[0].carbohydrate||'-'}}</view>
|
|
<view>{{dashesData.dishesDetailList[0].dietaryFiber||'-'}}</view>
|
|
<view>{{dashesData.dishesDetailList[0].cholesterol||'-'}}</view>
|
|
<view>{{dashesData.dishesDetailList[0].carotene||'-'}}</view>
|
|
<view>{{dashesData.dishesDetailList[0].calcium||'-'}}</view>
|
|
<view>{{dashesData.dishesDetailList[0].sodium||'-'}}</view>
|
|
</view>
|
|
<view class="nutrition-box-item">
|
|
<view>NRV%</view>
|
|
<view>{{dashesData.dishesDetailList[0].caloriesNrv||'-'}}</view>
|
|
<view>{{dashesData.dishesDetailList[0].proteinNrv||'-'}}</view>
|
|
<view>{{dashesData.dishesDetailList[0].fatNrv||'-'}}</view>
|
|
<view>{{dashesData.dishesDetailList[0].carbohydrateNrv||'-'}}</view>
|
|
<view>{{dashesData.dishesDetailList[0].dietaryFiberNrv||'-'}}</view>
|
|
<view>{{dashesData.dishesDetailList[0].cholesterolNrv||'-'}}</view>
|
|
<view>{{dashesData.dishesDetailList[0].caroteneNrv||'-'}}</view>
|
|
<view>{{dashesData.dishesDetailList[0].calciumNrv||'-'}}</view>
|
|
<view>{{dashesData.dishesDetailList[0].sodiumNrv||'-'}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="evaluate-box" v-if="hIndex==2">
|
|
<view style="width: 100%;height: 30vh;display: flex;justify-content: center;align-items: center;" v-if="totalCount==0">
|
|
暂无评论...
|
|
</view>
|
|
<view style="width: 92%;height: 30px;margin: 10rpx auto; display: flex;justify-content: space-between;align-items: center;" v-if="totalCount>0">
|
|
<text style="font-size: 28rpx;font-weight: bold;margin-left: 20rpx;">评价</text>
|
|
<text style="font-size: 24rpx;margin-left: 20rpx;" @click="goAllEvaluate">查看全部{{totalCount}}个></text>
|
|
</view>
|
|
<view style="width: 100%;height: 40vh;padding: 20rpx;" v-if="totalCount>0">
|
|
<view v-for="(item,index) in evaluaList" :key="index" v-if="index<3" style="width: 100%;height: auto;border-bottom: 1px solid #ccc;">
|
|
<view style="width: 94%;margin: 10rpx auto;display: flex;">
|
|
<view style="width: 100rpx;height: 100rpx;margin: 10rpx;">
|
|
<image :src="item.custPhotoUrl? item.custPhotoUrl:'../../static/images/user.png'" mode="" style="width: 100rpx;height: 100rpx;"></image>
|
|
</view>
|
|
<view style="width: 80%;height: 100rpx;">
|
|
<view style="width: 100%;display: flex;align-items: center;justify-content: space-between;margin-bottom: 20rpx;padding-top: 10rpx;">
|
|
<text>{{item.userName}}</text>
|
|
<text>{{item.evaluaTime}}</text>
|
|
</view>
|
|
<view style="display: flex;margin-bottom: 10rpx;">
|
|
<u-icon v-for="n in 5" :key="n" :name="n <= item.starLevel ? 'star-fill' : 'star-fill'"
|
|
:color="n <= item.starLevel ? '#ff9933' : '#ccc'" size="20"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;padding: 10rpx;padding-left: 20rpx;display: flex;align-items: center;" v-if="item.pictureList&&item.pictureList.length>0">
|
|
<view v-for="(imgItem,imgIndex) in item.pictureList" :key="imgIndex" style="margin-bottom: 10rpx;">
|
|
<image :src="imgItem" mode="" style="width: 100rpx;height: 100rpx;"></image>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;padding: 10rpx;padding-left: 20rpx;">
|
|
{{item.description||"该用户没做评价"}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { getMenudishesDetailAPI,addCollectionDishesAPI,delCollectionDishesAPI,getMenuEvaluaorderAPI } from '../../api/week-menu/index'
|
|
import Tabs from '@/pages/components/Tabs.vue'
|
|
export default {
|
|
components: { Tabs },
|
|
data() {
|
|
return {
|
|
fontValue:uni.getStorageSync('fontSize') || 8,
|
|
menuData:{},
|
|
dashesData:{},
|
|
tabList: ["菜品信息","营养信息","评价"],//tab列表
|
|
hIndex:0,
|
|
evaluaList:[],
|
|
totalCount:0
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
console.log(options)
|
|
this.menuData = JSON.parse(options.params)
|
|
this.getMenudishesDetail()
|
|
console.log(this.menuData)
|
|
this.getMenuEvaluaorderList()
|
|
},
|
|
methods: {
|
|
//获取菜品详情
|
|
async getMenudishesDetail(){
|
|
let param = {
|
|
"userId": uni.getStorageSync('userId'),
|
|
"dishesId": this.menuData.dishesDetailList[0].dishesId,
|
|
"detailId": this.menuData.detailId,
|
|
// "delFlag": 2
|
|
}
|
|
const res = await getMenudishesDetailAPI(param)
|
|
if(res.code==200){
|
|
this.dashesData = res.data;
|
|
if(this.dashesData.materialList&&this.dashesData.materialList.length>0){
|
|
let arr1=[]
|
|
let arr2=[]
|
|
this.dashesData.materialList.forEach(item=>{
|
|
if(item.materialType==1){ arr1.push(item.materialName) }
|
|
if(item.materialType==2){ arr2.push(item.materialName) }
|
|
})
|
|
this.dashesData.mainMaterialStr = arr1.join("、")
|
|
this.dashesData.subMaterialStr = arr2.join("、")
|
|
}else{
|
|
this.dashesData.mainMaterialStr = ""
|
|
this.dashesData.subMaterialStr = ""
|
|
}
|
|
this.$forceUpdate()
|
|
// this.$modal.msgError("收藏成功")
|
|
}
|
|
console.log(res)
|
|
},
|
|
//获取菜品评价
|
|
async getMenuEvaluaorderList(){
|
|
console.log(this.menuData)
|
|
let param = {
|
|
"pageNum": 1,
|
|
"pageSize": 10,
|
|
"mealId": this.menuData.dishesDetailList[0].dishesId,
|
|
}
|
|
const res = await getMenuEvaluaorderAPI(param)
|
|
if(res.code==200){
|
|
this.evaluaList = res.rows||[]
|
|
this.totalCount = res.total
|
|
}
|
|
console.log(res)
|
|
},
|
|
goAllEvaluate(){
|
|
console.log(this.menuData)
|
|
uni.navigateTo({
|
|
url: `/pages/weeklyMenu/evaluateCenter?params=${JSON.stringify(this.menuData)}`
|
|
})
|
|
},
|
|
changeTab(index) {
|
|
this.hIndex=index
|
|
console.log(this.hIndex)
|
|
},
|
|
//收藏
|
|
async addCollect(){
|
|
let param = {
|
|
"dishesId":this.dashesData.dishesDetailList[0].dishesId,
|
|
"userId":uni.getStorageSync('userId'),
|
|
"stallId":this.menuData.stallId
|
|
}
|
|
const res = await addCollectionDishesAPI(param)
|
|
console.log(res)
|
|
if(res.code==200){
|
|
// this.$modal.msgError("收藏成功")
|
|
uni.$u.toast('收藏成功')
|
|
this.getMenudishesDetail()
|
|
}
|
|
|
|
},
|
|
//取消收藏
|
|
async cancelCollect(){
|
|
let param = {
|
|
"dishesIds":[this.dashesData.dishesDetailList[0].dishesId],
|
|
// "userId":uni.getStorageSync('userId'),
|
|
}
|
|
const res = await delCollectionDishesAPI(param)
|
|
console.log(res)
|
|
if(res.code==200){
|
|
// this.$modal.msgError("收藏成功")
|
|
uni.$u.toast('取消收藏成功')
|
|
this.getMenudishesDetail()
|
|
}
|
|
}
|
|
|
|
// goMenuList(item){
|
|
// uni.navigateTo({
|
|
// url: `/pages/weeklyMenu/menuList?params=${JSON.stringify(item)}`
|
|
// })
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
min-height: 100%;
|
|
height: auto;
|
|
}
|
|
.image-box{
|
|
width: 100%;
|
|
height: 30vh;
|
|
// background-color: #666;
|
|
}
|
|
.menuContent{
|
|
width: 100%;
|
|
height: 64vh;
|
|
background-color: #fff;
|
|
// border-top-right-radius: 20px;
|
|
// border-top-left-radius: 20px;
|
|
// background-color: #DD7D3C;
|
|
// z-index: 999;
|
|
// margin-top: -2.5vh;
|
|
}
|
|
.menuInfo{
|
|
width: 94%;
|
|
margin: 10rpx auto;
|
|
height: auto;
|
|
}
|
|
.star-icon {
|
|
padding: 8px;
|
|
}
|
|
|
|
|
|
.tab-navigation {
|
|
display: flex;
|
|
background-color: white;
|
|
padding: 0px 16px 0 16px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.tab-content{
|
|
width: 94%;
|
|
margin: 10rpx auto;
|
|
height: 50vh;
|
|
.info-box{
|
|
width: 94%;
|
|
margin: 10rpx auto;
|
|
height: 100%;
|
|
}
|
|
.nutrition-box{
|
|
width: 94%;
|
|
margin: 10rpx auto;
|
|
height: 100%;
|
|
color: #959FA4;
|
|
// background-color: #DD7D3C;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
overflow-y: auto;
|
|
|
|
.nutrition-box-item{
|
|
width: 30%;
|
|
margin: 0 2%;
|
|
height: 100%;
|
|
text-align: center;
|
|
// background-color: #DD7D3C;
|
|
view{
|
|
margin-bottom: 10px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.content-left{
|
|
width: 20%;
|
|
height: 82vh;
|
|
}
|
|
.active2 {
|
|
color: #DD7D3C;
|
|
font-weight: bolder;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.content-right{
|
|
width: 80%;
|
|
height: 82vh;
|
|
}
|
|
.scroll-right-item{
|
|
width: 100%;
|
|
height: 300rpx;
|
|
// background-color: #959FA4;
|
|
}
|
|
.image {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 10rpx;
|
|
margin: 20rpx;
|
|
}
|
|
|
|
|
|
</style>
|