bonus
/
hz-zhhq-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
hz-zhhq-app/pages/foodComment/foodComment.vue

340 lines
9.3 KiB
Vue
Raw Normal View History

first commit
2025-01-22 10:53:47 +08:00
<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>