wangluohuoyun-huozhuapp/pages/carSource/driverSee.vue

<template>
	<view class="content">
		<view class="item3 flex align-center flex-space-between">
			<view class="flex align-center flex-space-between row1">
				<view class="flex align-center">
					<u--image :showLoading="true" :src="dataObj.avatarUrl" width="100rpx" height="100rpx" @click=""
						shape='circle'>
					</u--image>
					<view class="name">{{dataObj.driverName}}</view>
				</view>

				<view class="right flex s-row align-center phone">
					<view class="bgc flex flex-space-between">
						<u-icon class="phone" name="phone-fill" color="#2772FB" size="20" @click="toPhone"></u-icon>
						<view class="hz-name">联系司机</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 	<view class="row2 flex">
			<view class="flex item">
				<view class="pf-name">评分</view>
				<view class="pf-number">4.98</view>
			</view>
			<view class="flex item">
				<view class="pf-name">发运次数</view>
				<view class="pf-number">4.98</view>
			</view>
			<view class="flex item">
				<view class="pf-name">评价</view>
				<view class="pf-number">4.98</view>
			</view>
		</view> -->
		<view class="row3 flex">
			<view :class="index==1?'row3-active':''" @click="clickTap(1)">司机信息</view>
			<view :class="index==2?'row3-active':''" @click="clickTap(2)">评价</view>
			<!-- <u-tabs :list="list1" @click="click"></u-tabs> -->
		</view>
		<view class="carInfo" v-if="index==1">
			<view class="flex flex-center row4">
				<view class="title">
					<text class="item" :class="tabIndex==1?'item-active':1" @click="clickTab(1)">车辆信息</text>
					<text class="item" :class="tabIndex==2?'item-active':2" @click="clickTab(2)">发运记录</text>
				</view>
			</view>
		</view>
		<view v-show="index == 2" class="pl-style">
			<view class="pf flex-space-between flex">
				<view class="left flex align-center" style="margin-right: 20rpx;">
					<view class="pf-number1">
						4.8
					</view>
					<view>
						<!-- 	<view>
							<start count="5" v-model="zhpf" size="35" activeColor="#ffaa00" :size="18" :allowHalf='true'
								:readonly='true'>
							</start>
						</view> -->
						<view class="gray fontsize-24">累计发运150次</view>
					</view>
				</view>
				<view class="right">
					<view>98%</view>
					<view class="gray fontsize-24">好评率</view>
				</view>
			</view>
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				class="mescroll">
				<view class="flex flex-space-between">
					<view :class="btnData == '' ? 'btn-active':'btn'" @click="btnChange('')">全部({{list.length}})</view>
					<!-- <view :class="btnData == 2 ? 'btn-active':'btn'" @click="btnChange(2)">最新(1)</view> -->
					<view :class="btnData == 1 ? 'btn-active':'btn'" @click="btnChange(1)">好评({{list3.length}})</view>
					<view :class="btnData == 2 ? 'btn-active':'btn'" @click="btnChange(2)">差评({{list4.length}})</view>
				</view>
				<view class="evaluate_css" v-for="(item,index) in list">
					<view class="flex">
						<view class="row1 flex">
							<u--image :src="item.ownerPortrait?item.ownerPortrait:'../../static/images/mine/tx.png'"
								width='70rpx' height='70rpx' shape="circle">
							</u--image>
							<view class="right">
								<view class="evaluate_name">{{item.ownerName}}</view>
								<view class="evaluate_date m-top10">
									{{item.createDate?item.createDate.split(' ')[0]:''}}
								</view>
								<view class="flex m-top10">
									<view class="branch_css ">{{item.count}}</view>
									<view class="">
										<start count="5" v-model="item.count" size="35" activeColor="#ffaa00" :size="18"
											:allowHalf='true' :readonly='true'>
										</start>
									</view>
								</view>
								<view class="">
									{{item.driverContent}}
								</view>
								<view>
									<u--image v-for="(item,index) in item.imgList" :src="item" width='170rpx'
										height='170rpx' class="img-style">
									</u--image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<view class="row5">
			<view class="">
				<view v-if="tabIndex==1&&index==1" v-for="(items,index) in dataObj.driverCarInfoList" :key="index">
					<view class="">
						<view>{{items.carNumber}}</view>
						<view class="flex align-center">{{items.carType}} | 车长{{items.carLong/1000}}米 | 载重{{items.carApprovedWeight/1000}}吨</view>
					</view>
				</view>
				<view class="carInfo" v-if="tabIndex==2&index==1">
					<view>
						累计发运150次，好评率90%
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-picker :show="show" :columns="columns" :closeOnClickOverlay='true' @cancel='cancel' @close='cancel'
			@confirm='confirmBtn'></u-picker>
	</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 {
				btnData: '',
				tabIndex: 1,
				index: 1,
				show: false,
				objectInfo: {},
				columns: [
					['反馈', '举报']
				],
				list: [],
				list1: [{
					name: '司机',
				}, {
					name: '评价',
				}],

				list3: [],
				list4: [],
				dataObj: {},
				commonId: "",
			};
		},
		onNavigationBarButtonTap(e) {
			console.log("success")
			this.show = true
		},
		onLoad(options) {
			this.commonId = options.commonId
			console.log(this.dataObj)
			that = this
			this.getList()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'firstAuthentication'])
		},
		methods: {
			getList() {
				that.$request.baseRequest('get', '/driverInfo/getDriver', {
					commonId: this.commonId
				}).then(res => {
					this.dataObj = res.data
				})
			},
			confirmBtn(e) {
				console.log(e.value)
				if (e.value == '反馈') {
					uni.$u.route('/pages/order/fk', {
						val: JSON.stringify(this.dataObj)
					});
				} else {
					uni.$u.route('/pages/order/jb', {
						val: JSON.stringify(this.dataObj)
					});
				}
				this.show = false
			},
			cancel() {
				this.show = false
			},
			clickTap(index) {
				this.index = index
			},
			clickTab(index) {
				this.tabIndex = index
			},
			btnChange(num) {
				this.btnData = num
				this.upCallback({
					size:10,
					num:1,
				})
			},
			upCallback(page) {
				that.$request.baseRequest('get', '/evaluateInfo/selectEvaluateInfo', {
					evaluatoredId: this.dataObj.id,
					flag: 2,
					pageSize: page.size,
					// 1好2差
					haoType: 1,
					searchType:1,
					currentPage: page.num
				}).then(res => {
					if (page.num == 1) that.list3 = [];
					that.list3 = that.list3.concat(res.data.records); //追加新数据
				})
				that.$request.baseRequest('get', '/evaluateInfo/selectEvaluateInfo', {
					evaluatoredId: this.dataObj.id,
					flag: 2,
					pageSize: page.size,
					haoType: 2,
					searchType:1,
					currentPage: page.num
				}).then(res => {
					if (page.num == 1) that.list4 = [];
					that.list4 = that.list4.concat(res.data.records); //追加新数据
				})
				that.$request.baseRequest('get', '/evaluateInfo/selectEvaluateInfo', {
						evaluatoredId: this.dataObj.id,
						flag: 2,
						searchType: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++) {
							if (that.list[i].ownerUrl) {
								that.list[i].imgList = that.list[i].ownerUrl.split(',')
							}

							that.list[i].count = (Number(that.list[i].ownerCredit) + Number(that.list[i]
								.tranEfficiency) + Number(that.list[i].freightPayment) + Number(that.list[i]
								.serviceQuality) + 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);
					});
				that.$request.baseRequest('get', '/orderInfo/selectHaoPing', {
						commonId: this.userInfo.id,
						haoType: ''
					}).then(res => {

					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			// getList() {

			// 		debugger
			// 	this.$request.baseRequest('get', '/orderInfo/selectHaoPing', {
			// 			commonId: this.userInfo.id,
			// 			haoType:''
			// 		}).then(res => {
			// 			if (res.code == 200) {
			// 					this.dataObj = res.data

			// 			} else {
			// 				this.$refs.uToast.show({
			// 					type: 'error',
			// 					message: res.message,
			// 				})
			// 			}
			// 		})
			// 		.catch(res => {
			// 			uni.$u.toast(res.message);
			// 		});
			// },
		},
	}
</script>

<style lang="scss">
	.content {
		height: 100vh;
	}

	.item3,
	.row3 {
		background: white;
	}

	.name {
		font-size: 46rpx;
		font-weight: 500;
		margin-left: 20rpx;
	}

	.row1 {
		width: 100%;
		padding: 30rpx;
	}

	.phone {
		.bgc {
			background: #E5F0FE;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50rpx;
			padding: 10rpx 20rpx;
			align-items: center;
		}

		.hz-name {
			font-size: 26rpx;
			color: #2772FB;
		}

	}

	.row2 {
		padding: 0 20rpx;
		background: white;

		.item {
			margin-right: 20rpx;
		}

		.pf-name {
			color: #999999;
			margin-right: 10rpx;
		}

		.pf-number {
			color: #2772FB;
		}
	}

	.row3 {
		justify-content: space-around;
		padding: 40rpx 0;
	}

	.row3-active {
		font-weight: 700;
		position: relative;
	}

	.row3-active:before {
		font-weight: 700;
		content: '';
		position: absolute;
		bottom: -10rpx;
		width: 40rpx;
		height: 6rpx;
		background: #2772FB;
		left: 0;
		right: 0;
		margin: auto;
	}

	.row4 {
		.title {
			background: #EFF1F7;
			border-radius: 20rpx;
			margin-top: 20rpx;

			.item {
				display: inline-block;
				color: #AFB3BF;
				border-radius: 20rpx;
				padding: 4rpx 60rpx;
			}

			.item-active {
				background: white;
				color: #363636;
			}
		}
	}

	.row5 {
		padding: 20rpx;
	}

	.evaluate_css {
		margin-top: 30rpx;
		display: flex;
		width: 100%;
		padding-bottom: 40rpx;
		border-bottom: 1px solid #E6E6E6;

		.evaluate_name {}

		.branch_css {
			// margin: 0;
			margin-right: 20rpx;
		}

		.evaluate_date {}

		.row1 {
			.right {
				display: flex;
				flex-direction: column;
				margin-left: 40rpx;
			}
		}
	}

	.btn-active {
		background-color: #2772FB;
		color: white;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 20rpx;
	}

	.btn {
		background: #F8F9FB;
		color: #363636;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 20rpx;
	}

	.pl-style {
		padding: 40rpx;
		background: white;
	}

	.img-style {
		display: inline-block;
		margin-right: 20rpx;
	}

	.pf-number1 {
		color: #363636;
		font-size: 60rpx;
		margin-right: 30rpx;
	}

	.pf {
		margin-bottom: 20rpx;
	}
</style>