wangluohuoyun-huozhuapp/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 style='align-items: center;' class="left flex">
						<u--image :showLoading="true" :src="item.driverPortrait" width="100rpx" height="100rpx" @click=""
							shape='circle'>
						</u--image>
						{{item.driverName}}
				</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 :count="count" v-model="item.ownerCredit" size="35" activeColor="#ffaa00" :size="18" :allowHalf='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.freightPayment" size="35" activeColor="#ffaa00" :size="18" :allowHalf='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.comprehensiveSatisfaction" size="35" activeColor="#ffaa00" :size="18" :allowHalf='true'>
					</start>
				</view>
			</view>
			<!-- <view class="gray999 flex xy-row">
				<view class='item'>
					信用：{{item.ownerCredit}}星
				</view>
				<view class='item'>
					运费支付：{{item.freightPayment}}星
				</view>
				<view class='item'>
					综合：{{item.comprehensiveSatisfaction}}星
				</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.driverContent}}
			</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 {
				list:[],
				// isOpen: false,
				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.list[i].isOpen=false
							this.$set(that.list[i],'isOpen',false)
							that.$set(that.list[i],'imgList',that.list[i].driverUrl.split(','))
							// that.list[i].imgList = that.list[i].driverUrl.split(',')
							that.list[i].count = (Number(that.list[i].ownerCredit) + Number(that.list[i]
								.freightPayment) + Number(that.list[i].comprehensiveSatisfaction)) / 15 * 5
						}
						that.mescroll.endBySize(res.data.records.length, res.data.total);
						
						uni.hideLoading()
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			clickZK(item) {
				this.$set(item,'isOpen',!item.isOpen)

				console.log(item)
			},
		},

	}
</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;
	}

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