370 lines
9.4 KiB
Vue
370 lines
9.4 KiB
Vue
<template>
|
||
<view class="hzIndex">
|
||
<hzHeader title="食堂评价"></hzHeader>
|
||
<view class="hzContent">
|
||
<view class="main">
|
||
<view class="tab-box">
|
||
<view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">全部评价<view class="activeLine" v-if="currentTabIndex == 0"></view></view>
|
||
<view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">我的评价<view class="activeLine" v-if="currentTabIndex == 1"></view></view>
|
||
</view>
|
||
<view class="list-box" v-if="currentTabIndex == 0">
|
||
<view class="comment-list" v-if="list.length > 0">
|
||
<view class="comment-item" v-for="(item,index) in list" :key="index">
|
||
<view class="hearder">
|
||
<view class="user-head">
|
||
<image src="/static/imgs/missing-face.png" mode=""></image>
|
||
</view>
|
||
<view class="hearder-text">
|
||
<view class="name">{{item.USER_NAME}}</view>
|
||
<view class="date">{{item.TIME}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="fr-content">
|
||
<view class="stars-rating">
|
||
<stars-rating :starsIndex="item.averageScore" :isEditStars="false" @starsClick="evaluateStar(1,$event)"></stars-rating>
|
||
<!-- <stars-rating :starsIndex="starsIndex2" :isEditStars="false" @starsClick="evaluateStar(1,$event)"></stars-rating> -->
|
||
</view>
|
||
<view class="comment-content">{{item.EVALUATE}}</view>
|
||
<view class="photo-list" v-if="item.PHOTO.length>0">
|
||
<image class="photo-item" v-for="(itemImg,imgIndex) in item.PHOTO" :key="imgIndex" v-if="itemImg.PHOTO!=''" :src="itemImg.PHOTO" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list-box" v-if="currentTabIndex == 1">
|
||
<view class="comment-list" v-if="list1.length > 0">
|
||
<view class="comment-item" v-for="(item,index) in list1" :key="index">
|
||
<view class="hearder">
|
||
<view class="user-head">
|
||
<image src="/static/imgs/missing-face.png" mode=""></image>
|
||
</view>
|
||
<view class="hearder-text">
|
||
<view class="name">{{item.USER_NAME}}</view>
|
||
<view class="date">{{item.TIME}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="fr-content">
|
||
<view class="stars-rating">
|
||
<stars-rating :starsIndex="item.averageScore" :isEditStars="false" @starsClick="evaluateStar(1,$event)"></stars-rating>
|
||
<!-- <stars-rating :starsIndex="starsIndex2" :isEditStars="false" @starsClick="evaluateStar(1,$event)"></stars-rating> -->
|
||
</view>
|
||
<view class="comment-content">{{item.EVALUATE}}</view>
|
||
<view class="photo-list" v-if="item.PHOTO.length>0">
|
||
<image class="photo-item" v-for="(itemImg,imgIndex) in item.PHOTO" :key="imgIndex" v-if="itemImg.PHOTO!=''" :src="itemImg.PHOTO" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<content-none v-if="currentTabIndex == 0 && list.length == 0" :padTop="20"></content-none>
|
||
<content-none v-if="currentTabIndex == 1 && list1.length == 0" :padTop="20"></content-none>
|
||
</view>
|
||
</view>
|
||
<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import starsRating from '@/components/starsRating';
|
||
import {getEvaluate} from '@/common/api.js';
|
||
import { callbackRequest, alertTip, getStorage,formatDate,formatImgUrl,vbPicture } from '@/common/util.js';
|
||
import loadMore from '@/components/loadMore.vue';
|
||
import contentNone from '@/components/contentNone.vue';
|
||
export default {
|
||
data() {
|
||
return {
|
||
// formatImgUrl:formatImgUrl,
|
||
vbPicture:vbPicture,
|
||
// 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: "没有更多数据了"
|
||
},
|
||
userId: getStorage('userInfo').userId,
|
||
list:[],
|
||
list1:[],
|
||
currentTabIndex:0,
|
||
starsIndex:1,
|
||
starsIndex2:2,
|
||
|
||
};
|
||
},
|
||
components:{
|
||
loadMore,
|
||
contentNone,
|
||
starsRating
|
||
},
|
||
watch:{
|
||
currentTabIndex:function(newVal,oldVal){
|
||
if(newVal == 0 ){
|
||
this.page = 1;
|
||
this.loadingType = 0;
|
||
this.initData();
|
||
|
||
}else if(newVal == 1){
|
||
this.page = 1;
|
||
this.loadingType = 0;
|
||
this.initData();
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.initData();
|
||
},
|
||
methods:{
|
||
evaluateStar() {
|
||
console.log(...arguments)
|
||
console.log(arguments[0])
|
||
let starstype = arguments[0]
|
||
if(starstype==1){
|
||
this.starsIndex1 = arguments[1];
|
||
}if(starstype==2){
|
||
this.starsIndex2 = arguments[1];
|
||
}if(starstype==3){
|
||
this.starsIndex3 = arguments[1];
|
||
}if(starstype==4){
|
||
this.starsIndex4 = arguments[1];
|
||
}if(starstype==5){
|
||
this.starsIndex5 = arguments[1];
|
||
}
|
||
},
|
||
initData(){
|
||
var data = {};
|
||
if(this.currentTabIndex==0){
|
||
data = {
|
||
userId: this.userId,
|
||
type:'',
|
||
pageSize:this.pageSize,
|
||
pageNum:this.page
|
||
// type:"1"
|
||
// orgId:getStorage('userInfo').department_id
|
||
};
|
||
}else{
|
||
data = {
|
||
userId: this.userId,
|
||
type:'1',
|
||
pageSize:this.pageSize,
|
||
pageNum:this.page
|
||
};
|
||
}
|
||
let params = {
|
||
"method":getEvaluate,
|
||
data:data
|
||
}
|
||
callbackRequest(params)
|
||
.then(res => {
|
||
if(res.data.returnCode == 1){
|
||
let result = res.data.returnData || [];
|
||
result.forEach((item,index)=>{
|
||
let len = 5;
|
||
let sum = Number(item.CANTEEN_SCORE)+Number(item.DINING_SCORE)+Number(item.HEALTH_SCORE)+Number(item.RECIPE_SCORE)+Number(item.VARIETY_SCORE)
|
||
result[index]['averageScore']= Number(sum / len) ;
|
||
})
|
||
console.log(result)
|
||
if(this.page == 1){
|
||
this.list1 = [];
|
||
this.list = [];
|
||
if(this.currentTabIndex == 1){
|
||
this.list1 = [];
|
||
this.list1 = result;
|
||
}else{
|
||
this.list = [];
|
||
this.list = result;
|
||
}
|
||
} else {
|
||
if(result.length > 0){
|
||
if(this.currentTabIndex == 1){
|
||
this.list1 = [...this.list1,...result];
|
||
this.loadingType = 0;
|
||
}else{
|
||
this.list = [...this.list,...result];
|
||
this.loadingType = 0;
|
||
}
|
||
}else {
|
||
if(this.currentTabIndex == 1){
|
||
this.loadingType = 2;
|
||
}else{
|
||
this.loadingType = 2;
|
||
}
|
||
}
|
||
}
|
||
// console.log(this.list)
|
||
// this.loading = true;
|
||
}
|
||
})
|
||
},
|
||
formatImgUrl(url){
|
||
let oldUrl = url||"";
|
||
let imgName = oldUrl.split("webImageDir")[1];
|
||
let newUrl = 'http://127.0.0.1:'+uni.getStorageSync("ZHHQ_HZ_PORT")+'/webImageDir'+imgName;
|
||
console.log(newUrl,'newUrl');
|
||
return newUrl;
|
||
}
|
||
},
|
||
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';
|
||
|
||
.main {
|
||
margin: 180upx 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: 80upx;
|
||
margin-bottom: 20upx;
|
||
.tab-item {
|
||
float: left;
|
||
height: 70upx;
|
||
width: 30%;
|
||
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;
|
||
}
|
||
.activeLine{
|
||
background: linear-gradient( 90deg, #50CBA1 0%, #06AEA6 100%), #5685F2;
|
||
border-radius: 10upx;
|
||
width: 60upx;
|
||
height: 10upx;
|
||
}
|
||
}
|
||
|
||
.comment-list{
|
||
padding:30upx 30rpx 0;
|
||
background: #fff;
|
||
|
||
.comment-item{
|
||
overflow:hidden;
|
||
margin-bottom:20rpx;
|
||
.hearder{
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.user-head{
|
||
// float:left;
|
||
width:90upx;
|
||
height:90upx;
|
||
border-radius:50%;
|
||
image{
|
||
width:100%;
|
||
height:100%;
|
||
border-radius:50%;
|
||
}
|
||
}
|
||
.hearder-text{
|
||
font-size: 24upx;
|
||
margin-left: 40upx;
|
||
.name{
|
||
font-size:28upx;
|
||
font-weight:bold;
|
||
line-height:44upx;
|
||
}
|
||
.date{
|
||
color:#666;
|
||
line-height:44upx;
|
||
}
|
||
}
|
||
}
|
||
.fr-content{
|
||
margin:0 0 0upx 30upx;
|
||
border-bottom:2px solid #f5f5f5;
|
||
padding-bottom:26upx;
|
||
|
||
.photo-list{
|
||
margin-top: 20upx;
|
||
|
||
.photo-item{
|
||
width: 180upx;
|
||
height: 180upx;
|
||
border: 1px solid #ddd;
|
||
margin: 0 6upx;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
.stars-rating{
|
||
margin: 10upx 90upx;
|
||
}
|
||
.comment-content{
|
||
margin-top: 20upx;
|
||
// float: right;
|
||
word-break: break-all;
|
||
font-size:30upx;
|
||
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>
|