616 lines
16 KiB
Vue
616 lines
16 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="banner-box">
|
||
<image src="/static/imgs/new-food-banner.png" mode=""></image>
|
||
</view>
|
||
<view class="main">
|
||
<view class="tab-box">
|
||
<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''" @click="currentTabIndex = 0">餐厅新品</view>
|
||
<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''" @click="currentTabIndex = 1">大众推荐</view>
|
||
<view class="tab-item" :class="currentTabIndex == 2 ? 'active_tab' : ''" @click="currentTabIndex = 2">个人推荐</view>
|
||
</view>
|
||
<view v-if="dateInfo">
|
||
<view class="time" v-if="currentTabIndex == 0">推荐时间: {{dateInfo.start_time1}} ~ {{dateInfo.end_time1}}</view>
|
||
<view class="time" v-else>投票时间: {{dateInfo.start_time2}} ~ {{dateInfo.end_time2}}</view>
|
||
</view>
|
||
<!-- 推荐菜品表单填写 -->
|
||
<view class="form-box" v-if="currentTabIndex == 0">
|
||
<view class="form-item">
|
||
<view class="label">菜品名称：</view>
|
||
<view class="ipt-box">
|
||
<input type="text" placeholder="请输入菜品名称" v-model="foodName">
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label">菜品类型：</view>
|
||
<view class="picker-box">
|
||
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
|
||
<picker class="picker" :range="kinds" @change="change(0,$event)">
|
||
<view>{{kinds[index]}}</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="form-item">
|
||
<view class="label">食材：</view>
|
||
<view class="ipt-box">
|
||
<input type="text" placeholder="请输入食材名称" v-model="materialName">
|
||
</view>
|
||
</view>
|
||
<view class="img-list">
|
||
<view class="title">菜品图片</view>
|
||
<view class="img-box">
|
||
<view class="img-item" v-for="(item,index) in imgs" :key="index">
|
||
<image class="remove-btn" @click="removeImg(index)" src="/static/icons/delete-icon.png" mode=""></image>
|
||
<image class="img" :src="item" mode=""></image>
|
||
</view>
|
||
<view class="img-item upload-btn" @click="chooseImg()" v-if="imgs.length < 1">
|
||
<image class="img" src="/static/imgs/tianjia-img.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="text-box">
|
||
<view class="title">推荐理由</view>
|
||
<view class="textarea-box">
|
||
<textarea value="" placeholder="请输入推荐理由" v-model="reason" />
|
||
</view>
|
||
</view>
|
||
<view class="btn">
|
||
<view class="sure-btn" @click="submit">提交</view>
|
||
</view>
|
||
</view>
|
||
<!-- 大众推荐 --><!-- picture,food_name,kinds,reason,vote_no-->
|
||
<view v-if="currentTabIndex == 1">
|
||
<view class="list-box" v-if="publicList.length > 0">
|
||
<view class="list-item" v-for="(item, index) in publicList" :key="item.id">
|
||
<view class="content">
|
||
<view class="image-box" >
|
||
<image mode="" :src="item.picture" />
|
||
</view>
|
||
<view class="fr-content">
|
||
<view class="text"><text>菜品名称:</text> {{item.food_name}}</view>
|
||
<view class="text"><text>菜品类型:</text> {{item.kinds}}</view>
|
||
<view class="text"><text>推荐理由:</text> {{item.reason}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="num-box">点赞数: <text class="num">{{item.vote_no}}</text></view>
|
||
<view class="vote-btn" v-if="item.is_vote == 0" @click="vote(index,item.id)">我想吃</view>
|
||
<view class="vote-btn" v-else-if="item.is_vote == 1">已点赞</view>
|
||
<view class="vote-btn bg-ccc" v-else>我想吃</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<content-none :padTop="30" v-else></content-none>
|
||
</view>
|
||
<!-- 个人推荐 -->
|
||
<view v-if="currentTabIndex == 2">
|
||
<view class="list-box" v-if="parsonFoodList.length > 0">
|
||
<view class="list-item" v-for="(item, index) in parsonFoodList" :key="item.id">
|
||
<view class="content">
|
||
<view class="image-box" >
|
||
<image mode="" :src="item.picture" />
|
||
</view>
|
||
<view class="fr-content">
|
||
<view class="text"><text>菜品名称:</text> {{item.food_name}}</view>
|
||
<view class="text"><text>菜品类型:</text> {{item.kinds}}</view>
|
||
<view class="text"><text>推荐理由:</text> {{item.reason}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="num-box">票数: <text class="num">{{item.vote_no}}</text></view>
|
||
<view class="vote-btn" v-if="item.is_vote == 0" @click="vote(index,item.id)">投票</view>
|
||
<view class="vote-btn" v-else-if="item.is_vote == 1">已投票</view>
|
||
<view class="vote-btn bg-ccc" v-else>投票</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<content-none :padTop="30" v-else></content-none>
|
||
</view>
|
||
|
||
</view>
|
||
<load-more v-show="currentTabIndex == 2" :loadingType="loadingType" :contentText="contentText"></load-more>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {alertTip,callbackRequest,getStorage,convertImgToBase64} from '@/common/util.js';
|
||
import {recommendFood,getRecommendFoodList,recommendFoodVote,getQueryDate} from '@/common/api.js';
|
||
import loadMore from '@/components/loadMore.vue';
|
||
import contentNone from '@/components/contentNone.vue';
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentTabIndex:0,
|
||
page:1,
|
||
pageSize:10,
|
||
loadingType:0,//0-loading前；1-loading中；2-没有更多了
|
||
contentText: {
|
||
contentdown: "上拉加载更多",
|
||
contentrefresh: "正在加载...",
|
||
contentnomore: "没有更多数据了"
|
||
},
|
||
index : 0,
|
||
kinds:['熟食','凉菜','热菜','蔬菜','主食','水果'],
|
||
foodName:'',//菜品名称
|
||
reason:'',//推荐理由
|
||
materialName:'',//食材名称
|
||
imgs:[],
|
||
userId:getStorage('userInfo').id,
|
||
foodList : [], //推荐菜列表
|
||
parsonFoodList:[{picture:"http://47.99.190.179:80/appImageDir/a68b13fe0bcf4ee1992ee32623055639.jpg",food_name:"猪蹄",kinds:"熟食",reason:"好吃的很",vote_no:"10",is_vote:"0"},
|
||
{picture:"http://47.99.190.179:80/appImageDir/42d0a21e68804c398ca3abb4bdc20314.jpg",food_name:"鱿鱼圈",kinds:"熟食",reason:"好吃的很",vote_no:"10"},
|
||
{picture:"http://47.99.190.179:80/appImageDir/e24e76afe4504821891c38aab8793e17.jpg",food_name:"熟食排骨",kinds:"熟食",reason:"好吃的很",vote_no:"10"},
|
||
{picture:"http://47.99.190.179:80/appImageDir/c88ee591bb5c4a228873a4a30020ae6d.jpg",food_name:"卤大肠",kinds:"熟食",reason:"好吃的很",vote_no:"10"},
|
||
{picture:"http://47.99.190.179:80/appImageDir/42d0a21e68804c398ca3abb4bdc20314.jpg",food_name:"鱿鱼圈",kinds:"熟食",reason:"好吃的很",vote_no:"10"}
|
||
|
||
|
||
|
||
|
||
|
||
],
|
||
publicList:[{picture:"/static/test/paojiaofz.jpg",food_name:"泡椒凤爪",kinds:"熟食",reason:"爱吃泡椒凤爪需要理由吗?嗯不需要!太好吃啦,推荐一波66666!",vote_no:"10",is_vote:"0"},
|
||
{picture:"/static/test/hongshaor.jpg",food_name:"红烧肉",kinds:"熟食",reason:"肥而不腻,我把肥肉都吃干净啦",vote_no:"10"},
|
||
{picture:"/static/test/xiaocaor.jpg",food_name:"小炒肉",kinds:"熟食",reason:"够辣,够味,很下饭很喜欢!",vote_no:"10"},
|
||
{picture:"/static/test/shizt.jpg",food_name:"狮子头",kinds:"熟食",reason:"肉很嫩,特好吃",vote_no:"10"},
|
||
{picture:"/static/test/dack.jpg",food_name:"烤鸭",kinds:"熟食",reason:"正宗北京烤鸭,皮很脆",vote_no:"10"}],
|
||
dateInfo:null,
|
||
}
|
||
},
|
||
watch:{
|
||
currentTabIndex:function(newVal,oldVal){
|
||
if(newVal == 1 && this.foodList.length == 0){
|
||
// this.page = 1;
|
||
// this.loadingType = 0;
|
||
// this.foodList = [];
|
||
this.initData();
|
||
}
|
||
}
|
||
},
|
||
components:{
|
||
loadMore,
|
||
contentNone
|
||
},
|
||
onLoad(){
|
||
this.getDate();
|
||
},
|
||
methods: {
|
||
//获取推荐菜列表
|
||
initData(){
|
||
let params = {
|
||
"method":getRecommendFoodList,
|
||
data:{
|
||
pageSize:this.pageSize,
|
||
pageNum:this.page,
|
||
userId:this.userId
|
||
}
|
||
}
|
||
callbackRequest(params)
|
||
.then(res => {
|
||
if(res.data.returnCode == 1){
|
||
if(this.page == 1){
|
||
this.foodList = res.data.returnData;
|
||
}else {
|
||
if(res.data.returnData.length > 0){
|
||
this.foodList = this.foodList.concat(res.data.returnData);
|
||
this.loadingType = 0;
|
||
}else {
|
||
this.loadingType = 2;
|
||
}
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
getDate(){
|
||
let params = {
|
||
"method":getQueryDate,
|
||
data:{
|
||
userId:this.userId
|
||
}
|
||
}
|
||
callbackRequest(params)
|
||
.then(res =>{
|
||
if(res.data.returnCode == 1){
|
||
this.dateInfo = res.data.returnData;
|
||
}
|
||
})
|
||
},
|
||
//选择菜品类型
|
||
change(type,e){
|
||
this.index = e.detail.value;
|
||
},
|
||
//上传图片
|
||
// chooseImg(){
|
||
// let _this = this;
|
||
// uni.chooseImage({
|
||
// count:3,
|
||
// success:res => {
|
||
// let param = "";
|
||
// let imgArr = res.tempFilePaths
|
||
// for (var i = 0; i < imgArr.length; i++) {
|
||
// param = imgArr[i];
|
||
// convertImgToBase64(param, function(base64) {
|
||
// console.log(base64);
|
||
// _this.imgs.push(base64)
|
||
// })
|
||
// }
|
||
// }
|
||
// })
|
||
// },
|
||
chooseImg() {
|
||
let _this = this;
|
||
uni.chooseImage({
|
||
count: 3,
|
||
success: res => {
|
||
let param = '';
|
||
let imgArr = res.tempFilePaths;
|
||
for (var i = 0; i < imgArr.length; i++) {
|
||
param = imgArr[i];
|
||
uni.compressImage({
|
||
src: param,
|
||
quality: 80,
|
||
success: res1 => {
|
||
plus.io.resolveLocalFileSystemURL( res1.tempFilePath,
|
||
function(entry){
|
||
var reader = null;
|
||
entry.file( function ( file ) {
|
||
reader = new plus.io.FileReader();
|
||
reader.onloadend = function ( e ) {
|
||
_this.imgs.push(e.target.result);
|
||
};
|
||
reader.readAsDataURL( file );
|
||
}, function ( e ) {
|
||
alert( e.message );
|
||
} )
|
||
},
|
||
function(e){
|
||
console.log(e)
|
||
}
|
||
);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//删除图片
|
||
removeImg(index){
|
||
this.imgs.splice(index,1);
|
||
},
|
||
//推荐菜提交
|
||
submit(){
|
||
if(!this.foodName){
|
||
alertTip('请输入菜品名称');
|
||
return false;
|
||
}else if(!this.materialName){
|
||
alertTip('请输入食材名称');
|
||
return false;
|
||
}else if(this.imgs.length == 0){
|
||
alertTip('请上传菜品图片');
|
||
return false;
|
||
}else if(!this.reason){
|
||
alertTip('请输入推荐理由');
|
||
return false;
|
||
}
|
||
let imgArr = [].concat(this.imgs);
|
||
let params = {
|
||
"method":recommendFood,
|
||
data:{
|
||
kinds:this.kinds[this.index],
|
||
foodName:this.foodName,
|
||
picture:imgArr.join('~'),
|
||
material:this.materialName,
|
||
reason:this.reason,
|
||
creator:this.userId
|
||
}
|
||
}
|
||
callbackRequest(params)
|
||
.then(res => {
|
||
if(res.data.returnCode == 1){
|
||
alertTip('提交成功','success',1500);
|
||
setTimeout(_ => {
|
||
this.imgs = [];
|
||
this.foodName = '';
|
||
this.reason = '';
|
||
this.materialName = '';
|
||
this.page = 1;
|
||
this.loadingType = 0;
|
||
this.foodList = [];
|
||
this.currentTabIndex = 1;
|
||
},1500)
|
||
}else {
|
||
alertTip(res.data.returnMsg);
|
||
}
|
||
})
|
||
},
|
||
// 投票操作
|
||
vote(index,id){
|
||
let params = {
|
||
"method":recommendFoodVote,
|
||
data:{
|
||
voteUser:this.userId,
|
||
featureId:id
|
||
}
|
||
}
|
||
uni.showModal({
|
||
content:'确认投票？',
|
||
success:res => {
|
||
if(res.confirm){
|
||
callbackRequest(params)
|
||
.then(res => {
|
||
if(res.data.returnCode == 1){
|
||
this.foodList.forEach((v,i) => {
|
||
if(i == index){
|
||
this.foodList[index].vote_no++;
|
||
this.foodList[index].is_vote = 1;
|
||
}else{
|
||
this.foodList[i].is_vote = 2;
|
||
}
|
||
})
|
||
alertTip('投票成功','success',2000);
|
||
}else {
|
||
alertTip(res.data.returnMsg)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
if (this.loadingType !== 0 || this.currentTabIndex == 0) {
|
||
return;
|
||
}
|
||
this.loadingType = 1;
|
||
this.page = this.page+1;
|
||
this.initData();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '@/static/css/common.scss';
|
||
.container{
|
||
min-height:100vh;
|
||
background: #f8f8f8;
|
||
overflow: hidden;
|
||
position: relative;
|
||
.banner-box {
|
||
width: 100%;
|
||
height: 240upx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.time{
|
||
font-size:28rpx;
|
||
color:#555;
|
||
height:90rpx;
|
||
line-height:90rpx;
|
||
text-align:center;
|
||
}
|
||
.main {
|
||
margin: 172upx 40upx 0;
|
||
position: relative;
|
||
z-index: 10;
|
||
.tab-box {
|
||
overflow: hidden;
|
||
border-radius: 10upx 10upx 0 0;
|
||
background: rgba(132, 149, 167, 0.8);
|
||
height: 70upx;
|
||
.tab-item {
|
||
float: left;
|
||
height: 70upx;
|
||
width: 33.3%;
|
||
font-size: 30upx;
|
||
color: #e5f6ff;
|
||
text-align: center;
|
||
line-height: 70upx;
|
||
}
|
||
.active_tab {
|
||
background: #fff;
|
||
color: #333;
|
||
border-radius: 10upx 10upx 0 0;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
.form-box{
|
||
// margin: 20upx;
|
||
.form-item{
|
||
overflow:hidden;
|
||
padding:22upx 30upx 22upx 20upx;
|
||
background: #fff;
|
||
border-bottom:1px solid #f8f8f8;
|
||
.label{
|
||
float:left;
|
||
width:160upx;
|
||
font-size:30upx;
|
||
color:#333;
|
||
font-weight:bold;
|
||
line-height:50upx;
|
||
text-align:right;
|
||
}
|
||
.ipt-box{
|
||
margin-left:170upx;
|
||
input{
|
||
width:100%;
|
||
height:50upx;
|
||
font-size:28upx;
|
||
color:#666;
|
||
line-height:50upx;
|
||
}
|
||
}
|
||
.picker-box{
|
||
margin-left:170upx;
|
||
overflow:hidden;
|
||
.arrow{
|
||
float:right;
|
||
width:16upx;
|
||
height:29upx;
|
||
margin-top:10upx;
|
||
}
|
||
.picker{
|
||
margin-right:40upx;
|
||
font-size:28upx;
|
||
line-height:50upx;
|
||
color:#666;
|
||
}
|
||
}
|
||
}
|
||
.img-list{
|
||
padding:0 0 14upx;
|
||
background: #fff;
|
||
margin-bottom:10upx;
|
||
.title{
|
||
font-size:28upx;
|
||
color:#333;
|
||
font-weight:bold;
|
||
line-height:40upx;
|
||
padding:25upx 30upx 0;
|
||
}
|
||
.img-box{
|
||
overflow:hidden;
|
||
padding-top:25upx;
|
||
.img-item{
|
||
float:left;
|
||
width:190upx;
|
||
height:190upx;
|
||
border:1px solid #ddd;
|
||
margin:0 0 20upx 26upx;
|
||
position:relative;
|
||
box-sizing: border-box;
|
||
.img{
|
||
display:block;
|
||
width:100%;
|
||
height:100%;
|
||
}
|
||
.remove-btn{
|
||
position:absolute;
|
||
top:-18upx;
|
||
right:-18upx;
|
||
width:44upx;
|
||
height:44upx;
|
||
z-index:2;
|
||
}
|
||
}
|
||
.upload-btn{
|
||
.img{
|
||
width:60upx;
|
||
height:60upx;
|
||
margin:60upx auto 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.text-box{
|
||
padding:0 0 30upx;
|
||
background: #fff;
|
||
margin-bottom:10upx;
|
||
.title{
|
||
font-size:28upx;
|
||
color:#333;
|
||
font-weight:bold;
|
||
line-height:40upx;
|
||
padding:25upx 30upx 0;
|
||
}
|
||
.textarea-box{
|
||
border:1px solid #f8f8f8;
|
||
padding:10upx;
|
||
margin:25upx 30upx 0;
|
||
textarea{
|
||
font-size:28upx;
|
||
color:#666;
|
||
line-height:34upx;
|
||
width:100%;
|
||
resize: none;
|
||
height:200upx;
|
||
}
|
||
}
|
||
}
|
||
.btn {
|
||
padding:0 0 30upx;
|
||
background: #fff;
|
||
margin-top: -10upx;
|
||
.sure-btn{
|
||
width:90%;
|
||
height:80upx;
|
||
font-size:28upx;
|
||
color:#fff;
|
||
text-align:center;
|
||
line-height:80upx;
|
||
border-radius:8upx;
|
||
background: #0066CC;
|
||
background:linear-gradient(to right, #ffc200,#ff9000);/*设置按钮为渐变颜色*/
|
||
margin-left: 5%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-box{
|
||
background: #fff;
|
||
.list-item{
|
||
border-bottom:10upx solid #f8f8f8;
|
||
padding:30upx 20upx;
|
||
.content{
|
||
overflow:hidden;
|
||
.image-box{
|
||
float:left;
|
||
width:200upx;
|
||
height:200upx;
|
||
image{
|
||
display:block;
|
||
width:100%;
|
||
height:100%;
|
||
}
|
||
}
|
||
.fr-content{
|
||
margin-left:220upx;
|
||
.text{
|
||
font-size:26upx;
|
||
color:#666;
|
||
line-height:40upx;
|
||
margin-bottom:10upx;
|
||
text{
|
||
float:left;
|
||
color:#333;
|
||
padding-right:10upx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bottom{
|
||
overflow:hidden;
|
||
padding:10upx 0upx 0;
|
||
.num-box{
|
||
float:left;
|
||
font-size:28upx;
|
||
color:#333;
|
||
line-height:40upx;
|
||
padding-top:20upx;
|
||
text{
|
||
color:#5fbf3d;
|
||
padding-left:4upx;
|
||
}
|
||
}
|
||
.vote-btn{
|
||
float:right;
|
||
width:160upx;
|
||
height:60upx;
|
||
background: #5fbf3d;
|
||
font-size:26upx;
|
||
color:#fff;
|
||
text-align:center;
|
||
line-height:60upx;
|
||
border-radius:4upx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|