wangluohuoyun-huozhuapp/pages/order/evaluationRecord.vue

<template>
	<view class="content">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" class="mescroll">
			<view class="content-list" v-for="(item,index) in list" :key='index'>
				<view class="top flex flex-space-between">
					<view  class="left flex">
						<view>
							{{item.orderNumber}}
						</view>
						<u-icon name="arrow-right" color="#ccc" size="18"></u-icon>
					</view>
					<view class="right gray999">
						{{item.createDate.split(' ')[0]}}
					</view>
				</view>
				<view style='font-size:14px;' class="flex align-center name-row">
					<view class="driver">
						司机
					</view>
					<view>{{item.driverName}}</view>
				</view>
				<view class="flex align-center name-row">
					<view class="sj-row hz-name">
						司机信用:
					</view>
					<view class="xx">
						<start :count="count" v-model="item.driverCredit" size="35" activeColor="#ffaa00" :size="18"
							:allowHalf='true' :readonly='true'>
						</start>
					</view>
				</view>
				<view class="flex align-center name-row">
					<view class="sj-row hz-name">
						运输效率:
					</view>
					<view class="xx">
						<start :count="count" v-model="item.tranEfficiency" size="35" activeColor="#ffaa00" :size="18"
							:allowHalf='true' :readonly='true'>
						</start>
					</view>
				</view>
				<view class="flex align-center name-row">
					<view class="sj-row hz-name">
						运输安全:
					</view>
					<view class="xx">
						<start :count="count" v-model="item.tranSafety" size="35" activeColor="#ffaa00" :size="18"
							:allowHalf='true' :readonly='true'>
						</start>
					</view>
				</view>
				<view class="flex align-center name-row">
					<view class="sj-row hz-name">
						服务质量:
					</view>
					<view class="xx">
						<start :count="count" v-model="item.serviceQuality" size="35" activeColor="#ffaa00" :size="18"
							:allowHalf='true' :readonly='true'>
						</start>
					</view>
				</view>
				<view class="flex align-center name-row">
					<view class="sj-row hz-name">
						满意度:
					</view>
					<view class="xx">
						<start :count="count" v-model="item.satisfaction" size="35" activeColor="#ffaa00" :size="18"
							:allowHalf='true' :readonly='true'>
						</start>
					</view>
				</view>
				<!-- <view class="gray999 xy-row">
					<view class='item'>
						司机信用：{{item.driverCredit}}星
					</view>
					<view class='item'>
						运费效率：{{item.tranEfficiency}}星
					</view>
					<view class='item'>
						运输安全：{{item.tranSafety}}星
					</view>
					<view class='item'>
						服务质量：{{item.serviceQuality}}星
					</view>
					<view class='item'>
						满意度：{{item.satisfaction}}星
					</view>
				</view> -->
				<!-- 
			<view class="xkuang">
				<view style="display: flex;" class="flex-space-between" v-for="(item,index) in rate">
					<view class="ziti">{{item.name}}</view>
					<start :count="item.count" style="margin-top: 15px; margin-left: 50px;" size="35"
						activeIcon="heart-fill" inactiveIcon="heart" activeColor="#ffaa00" v-model="item.value1">
					</start>
				</view>
			</view> -->
				<view class="pl-style">
					{{item.ownerContent}}
				</view>
				<view class="color2979ff flex">
					<view @click="clickZK(item)">展开</view>
					<u-icon name="arrow-down" color="#2979ff" size="18" v-if="item.isOpen"></u-icon>
					<u-icon name="arrow-up" color="#2979ff" size="18" v-else></u-icon>
				</view>
				<view v-if="item.isOpen" class="img-content">
					<u--image :showLoading="true" :src="item1" width="80px" height="80px" class="img"
						v-for="(item1,index) in item.imgList"></u--image>
				</view>
				<u-line class="line"></u-line>
				<view class="gray999">
					{{item.ownerAnonymous==1?"匿名评价":''}}
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	var that
	import {
		mapState
	} from 'vuex';
	import start from '../../common/components/uni-rate.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			start
		},
		data() {
			return {
				imgList: [],
				list: [],
				isOpen: true,
				count: '5',
				value: '3',
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				rate: [{
						name: "司机信用",
						count: "5",
						value1: '5',
					},
					{
						name: "运输效率",
						count: "5",
						value1: '3',
					},
					{
						name: "运输安全",
						count: "5",
						value1: '5',
					},
					{
						name: "服务质量",
						count: "5",
						value1: '2',
					}, {
						name: "满意度",
						count: "5",
						value1: '1',
					}
				],
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'firstAuthentication'])
		},
		onLoad() {
			that = this
		},
		methods: {
			upCallback(page) {
				that.$request.baseRequest('get', '/evaluateInfo/selectEvaluateInfo', {
						evaluatorId: this.userInfo.id,
						flag: 1,
						pageSize: page.size,
						currentPage: page.num
					}).then(res => {
						if (page.num == 1) that.list = [];
						that.list = that.list.concat(res.data.records); //追加新数据
						for (let i = 0; i < that.list.length; i++) {
							that.$set(that.list[i],'isOpen',false)
							if(that.list[i].ownerUrl){
								that.$set(that.list[i],'imgList',that.list[i].ownerUrl.split(','))
							}else{
								that.list[i].imgList = []
							}
							
							that.list[i].count = (Number(that.list[i].driverCredit) + Number(that.list[i]
								.tranEfficiency) + Number(that.list[i].tranSafety) + Number(that.list[i]
								.serviceQuality) + Number(that.list[i].satisfaction)) / 25 * 5
						}
						that.mescroll.endBySize(res.data.records.length, res.data.total);
						uni.hideLoading()
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			clickZK(item) {
				that.$set(item,'isOpen',!item.isOpen)
				// item.isOpen = !item.isOpen
			},
			getList() {

			},
		},

	}
</script>

<style lang="scss">
	.ziti {
		color: #909090;
		margin-top: 23px;
	}

	.xkuang {
		margin-top: 20px;
		background-color: #FAFAFA;
		padding-left: 30px;
	}

	.content-list {
		margin: 20rpx;
		padding: 20rpx;
		background: white;
		border-radius: 20rpx;

	}
	.driver{
		background:rgb(255, 170, 0);
		color:#fff;font-size:28rpx;padding:8rpx;
		border-radius: 10rpx;
		margin-right:10rpx;
	}
	.hz-name {
		color: #999;
		margin-right: 10rpx;
	}

	.gray999 {
		color: #999;
	}

	.name-row {
		margin: 20rpx 0;
	}

	.item {
		margin-right: 20rpx;
		font-size: 26rpx;
		display: inline-block;
	}

	.xy-row {
		margin-bottom: 40rpx;
	}

	.pl-style {
		margin-bottom: 40rpx;
	}

	.color2979ff {
		color: #2979ff;
	}

	.img-content {
		margin-top: 20rpx;

		.img {
			display: inline-block;
			margin-right: 10rpx;
			border-radius: 20rpx;
		}

	}

	.line {
		margin: 20rpx 0 !important;
	}
</style>