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>
|