wangluohuoyun-app/pages/mine/evaluate.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  class="flex" style='align-items: center;'>
							<image style='width:60rpx;height:60rpx;margin-right: 10px;border-radius:50%;'
							 :src="item.ownerPortrait" mode=""></image>
							{{item.ownerAnonymous=='1'?'匿名评价':item.ownerName}}
						</view>
						<!-- <u-icon name="arrow-right" color="#ccc" size="18"></u-icon> -->
					</view>
					<view class="right gray999">
						{{item.createDate.split(' ')[0]}}
					</view>
				</view>
				<view class="flex align-center name-row">
					<view class="sj-row hz-name">
						打分：
					</view>
					<view class="xx">
						<start :value="item.satisfaction" :disabled="true" :is_score='true' :size="36" >
						</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>
				<!-- 
			<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="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 v-if='index!=list.length-1' 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', {
						evaluatoredId: this.userInfo.id,
						flag: 2,
						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.list[i].imgList = that.list[i].ownerUrl.split(',')
							}
							
							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) {
				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;

	}

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