340 lines
9.3 KiB
Vue
340 lines
9.3 KiB
Vue
<template>
|
||
<view class="container" v-if="loading">
|
||
<view class="banner-box">
|
||
<image src="/static/imgs/food-comment-banner.png" mode=""></image>
|
||
</view>
|
||
<view class="main">
|
||
<view class="tab-box">
|
||
<view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">菜品评价</view>
|
||
<view class="tab-item" :class="currentTabIndex == 2 ? 'active' : ''" @click="currentTabIndex = 2">食堂评价</view>
|
||
</view>
|
||
<view class="comment-list" v-if="list.length > 0">
|
||
<view class="comment-item" v-for="(item,index) in list" :key="index">
|
||
<view class="user-head">
|
||
<image v-if="item.wx_profile" :src="item.wx_profile" mode=""></image>
|
||
<image v-else src="/static/imgs/missing-face.png" mode=""></image>
|
||
</view>
|
||
<view class="fr-content">
|
||
<view class="date">{{item.ev_time}}</view>
|
||
<view class="name">{{item.name}}</view>
|
||
<!-- <text>打分{{item.startCount}}</text> -->
|
||
<!-- <view class="grade">
|
||
<image v-for="(grade,gradeIndex) in 1*item.grade" :key="gradeIndex" src="/static/imgs/star1.png" mode=""></image>
|
||
<image v-for="(grade,gradeIndex) in 5-item.grade" :key="gradeIndex+item.grade" src="/static/imgs/star0.png" mode=""></image>
|
||
</view> -->
|
||
<view class="comment-content">{{item.ev_content}}</view>
|
||
<view class="food-list">
|
||
<view class="food-item">{{item.value}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<content-none v-else :padTop="35"></content-none>
|
||
</view>
|
||
<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {getCommentList} from '@/common/api.js';
|
||
import {callbackRequest} from '@/common/util.js';
|
||
import loadMore from '@/components/loadMore.vue';
|
||
import contentNone from '@/components/contentNone.vue';
|
||
export default {
|
||
data() {
|
||
return {
|
||
loading:false,
|
||
page:1,
|
||
page1:1,
|
||
page2:1,
|
||
pageSize:10,
|
||
loadingType:0,//0-loading前；1-loading中；2-没有更多了
|
||
loadingType1:0,
|
||
loadingType2:0,
|
||
contentText: {
|
||
contentdown: "上拉加载更多",
|
||
contentrefresh: "正在加载...",
|
||
contentnomore: "没有更多数据了"
|
||
},
|
||
//wx_profile,ev_time,name,ev_content,value
|
||
commentList1:[
|
||
{
|
||
name: '1111',
|
||
ev_time: '2019-09-09 09:09',
|
||
ev_content: '还可以',
|
||
value: '满意',
|
||
// wx_profile: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
},
|
||
{
|
||
name: '李**',
|
||
ev_time: '2019-09-09 09:09',
|
||
ev_content: '还不错',
|
||
value: '一般',
|
||
// wx_profile: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
},
|
||
{
|
||
name: '王**',
|
||
ev_time: '2019-09-01 09:09',
|
||
ev_content: '还不错',
|
||
value: '满意',
|
||
// wx_profile: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
},
|
||
{
|
||
name: '赵**',
|
||
ev_time: '2019-09-01 09:09',
|
||
ev_content: '还不错',
|
||
value: '满意',
|
||
wx_profile: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
}
|
||
|
||
|
||
], // 菜品
|
||
commentList2:[{
|
||
name: '赵云',
|
||
ev_time: '2019-09-09 09:09',
|
||
ev_content: '还可以',
|
||
value: '满意',
|
||
// wx_profile: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
},
|
||
{
|
||
name: '刘邦',
|
||
ev_time: '2019-09-09 09:09',
|
||
ev_content: '还不错',
|
||
value: '一般',
|
||
// wx_profile: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
},
|
||
{
|
||
name: '关羽',
|
||
ev_time: '2019-09-01 09:09',
|
||
ev_content: '还不错',
|
||
value: '满意',
|
||
// wx_profile: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
},
|
||
{
|
||
name: '胡宇',
|
||
ev_time: '2019-09-01 09:09',
|
||
ev_content: '还不错',
|
||
value: '满意',
|
||
wx_profile: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
|
||
}
|
||
|
||
|
||
|
||
], // 食堂
|
||
list:[],
|
||
currentTabIndex:1,
|
||
};
|
||
},
|
||
components:{
|
||
loadMore,
|
||
contentNone
|
||
},
|
||
watch:{
|
||
currentTabIndex:function(newVal,oldVal){
|
||
if(newVal == 1 ){
|
||
if(this.commentList1.length == 0){
|
||
this.page = 1;
|
||
this.loadingType = 0;
|
||
this.initData();
|
||
}else{
|
||
this.list = this.commentList1
|
||
}
|
||
}else if(newVal == 2){
|
||
if(this.commentList2.length == 0){
|
||
this.page = 1;
|
||
this.loadingType = 0;
|
||
this.initData();
|
||
}else{
|
||
this.list = this.commentList2
|
||
}
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.initData();
|
||
},
|
||
methods:{
|
||
initData(){
|
||
let params = {
|
||
"method":getCommentList,
|
||
data:{
|
||
type:this.currentTabIndex,
|
||
pageSize:this.pageSize,
|
||
pageNum:this.page
|
||
}
|
||
}
|
||
callbackRequest(params)
|
||
.then(res => {
|
||
if(res.data.returnCode == 1){
|
||
let result = res.data.returnData || [];
|
||
// if(this.page == 1){
|
||
// if(this.currentTabIndex == 1){
|
||
// this.commentList1 = result;
|
||
// }else{
|
||
// this.commentList2 = result;
|
||
// }
|
||
// }
|
||
// else {
|
||
// if(result.length > 0){
|
||
// if(this.currentTabIndex == 1){
|
||
// this.commentList1 = [...this.commentList1,...result];
|
||
// this.loadingType1 = 0;
|
||
// }else{
|
||
// this.commentList2 = [...this.commentList2,...result];
|
||
// this.loadingType2 = 0;
|
||
// }
|
||
// }else {
|
||
// if(this.currentTabIndex == 1){
|
||
// this.loadingType1 = 2;
|
||
// }else{
|
||
// this.loadingType2 = 2;
|
||
// }
|
||
// }
|
||
// }
|
||
if(this.currentTabIndex == 1){
|
||
this.list = this.commentList1;
|
||
this.loadingType = this.loadingType1;
|
||
}else{
|
||
this.list = this.commentList2;
|
||
this.loadingType = this.loadingType2;
|
||
}
|
||
this.loading = true;
|
||
}
|
||
})
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
if(this.loadingType !== 0){
|
||
return false;
|
||
}
|
||
this.loadingType = 1;
|
||
if(this.currentTabIndex == 1){
|
||
this.page1 = this.page1+1;
|
||
this.page = this.page1;
|
||
}else{
|
||
this.page2 = this.page2+1;
|
||
this.page = this.page2;
|
||
}
|
||
this.initData();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '@/static/css/common.scss';
|
||
.container{
|
||
background: #f8f8f8;
|
||
min-height:100vh;
|
||
overflow: hidden;
|
||
.banner-box {
|
||
width: 100%;
|
||
height: 240upx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
border-radius: 30upx;
|
||
}
|
||
.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: 50%;
|
||
font-size: 30upx;
|
||
color: #e5f6ff;
|
||
text-align: center;
|
||
line-height: 70upx;
|
||
}
|
||
.active {
|
||
background: #fff;
|
||
color: #333;
|
||
border-radius: 10upx 10upx 0 0;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
.comment-list{
|
||
padding:30upx 30rpx 0;
|
||
background: #fff;
|
||
.comment-item{
|
||
overflow:hidden;
|
||
margin-bottom:20rpx;
|
||
.user-head{
|
||
float:left;
|
||
width:90upx;
|
||
height:90upx;
|
||
border-radius:50%;
|
||
image{
|
||
width:100%;
|
||
height:100%;
|
||
border-radius:50%;
|
||
}
|
||
}
|
||
.fr-content{
|
||
margin:0 0 0upx 110upx;
|
||
border-bottom:1px solid #f5f5f5;
|
||
padding-bottom:26upx;
|
||
.name{
|
||
font-size:28upx;
|
||
font-weight:bold;
|
||
line-height:44upx;
|
||
}
|
||
.date{
|
||
float:right;
|
||
font-size:26upx;
|
||
color:#666;
|
||
line-height:44upx;
|
||
}
|
||
.grade{
|
||
padding-bottom:10upx;
|
||
text{
|
||
display:inline-block;
|
||
font-size:26upx;
|
||
color:#666;
|
||
line-height:36upx;
|
||
vertical-align: top;
|
||
padding-right:20upx;
|
||
}
|
||
image{
|
||
width:36upx;
|
||
height:36upx;
|
||
margin-right:8upx;
|
||
vertical-align: top;
|
||
}
|
||
}
|
||
.comment-content{
|
||
font-size:26upx;
|
||
color:#666;
|
||
line-height:40upx;
|
||
}
|
||
.food-list {
|
||
padding: 10rpx 0 0;
|
||
overflow: hidden;
|
||
|
||
.food-item {
|
||
float: left;
|
||
margin-right: 10rpx;
|
||
font-size: 24rpx;
|
||
line-height: 30rpx;
|
||
color: $assistColor;
|
||
padding: 4rpx 16rpx;
|
||
border: 1px solid $assistColor;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|