wangluohuoyun-huozhuapp/pages/order/driverDetail.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="driverList.avatarUrl" width="100rpx" height="100rpx" @click=""
						shape='circle'>
					</u--image>
					<view class="name">{{driverList.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">{{ping.zong}}</view>
			</view>
			<view class="flex item">
				<view class="pf-name">发运次数</view>
				<view class="pf-number">{{driverList.shipmentsNumber?driverList.shipmentsNumber:0}}</view>
			</view>
			<view v-if='total>=20' class="flex item">
				<view class="pf-name">好评率</view>
				<view class="pf-number">{{driverList.favorableRate?driverList.favorableRate:0}}%</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">
						{{ping.zong}}
					</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">累计发运{{total}}次</view>
					</view>
				</view>
				<view class="right">
					<view>{{driverList.favorableRate?driverList.favorableRate:0}}%</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="haoType == '' ? 'btn-active':'btn'" @click="btnChange('')">全部({{ping.haoPing+ping.chaPing}}})</view>
					<!-- <view :class="btnData == 2 ? 'btn-active':'btn'" @click="btnChange(2)">最新(1)</view> -->
					<view :class="haoType == 1 ? 'btn-active':'btn'" @click="btnChange(1)">好评({{ping.haoPing}})</view>
					<view :class="haoType == 2 ? 'btn-active':'btn'" @click="btnChange(2)">差评({{ping.chaPing}})</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.driverScoreObtained}}</view>
									<view class="">
										<start count="5" v-model="item.driverScoreObtained" 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='carMessage' v-if="tabIndex==1&&index==1">
				<view class='carMessage-item' v-for='(item,index) in hyDriverCarInfoList' :style="{'border-radius':(index!=hyDriverCarInfoList.length-1?'#ccc':'transparent')}">
					<view v-if='item.carCategory=="挂车"'>{{item.guaCarNumber}}</view>
					<view v-else>{{item.carNumber}}</view>
					<view v-if='item.carCategory=="挂车"' class="flex align-center">{{item.carType}} | 车长{{item.guaCarLong}}米 | 载重{{item.guaCarApprovedWeight}}吨</view>
					<view v-else class="flex align-center">{{item.carType}} | 车长{{item.carLong}}米 | 载重{{item.carApprovedWeight}}吨</view>
				</view>
				
			</view>
			<view class="carInfo" v-if="tabIndex==2&&index==1">
				<view style='text-align:center;'>
					累计发运{{driverList.shipmentsNumber?driverList.shipmentsNumber:0}}次<text v-if='total>=20'>，好评率{{driverList.favorableRate?driverList.favorableRate:0}}%</text>
				</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: {},
				haoType:'',
				columns: [
					['投诉', '举报']
				],
				list: [],
				list1: [{
					name: '司机',
				}, {
					name: '评价',
				}],

				list3:[],
				list4:[],
				ping:[],
				hyDriverCarInfoList:[],
				driverList:{},
				total:0
			};
		},
		onNavigationBarButtonTap(e) {
			console.log("success")
			this.show = true
		},
		onLoad(options) {
			// this.dataObj =JSON.parse(options.driver) 
			// console.log(this.dataObj)
			that = this
			// this.getList()
		},
		onShow(){
			var that=this
			
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'firstAuthentication'])
		},
		methods: {
			toPhone(){
				console.log(this.driverList.driverPhone)
				var that=this
				uni.makePhoneCall({
					phoneNumber: that.driverList.driverPhone,
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			confirmBtn(e) {
				console.log(e.value)
				if (e.value == '投诉') {
					uni.$u.route('/pages/order/fk', {
						val: JSON.stringify(this.driverList)
					});
				} else {
					uni.$u.route('/pages/order/jb', {
						val: JSON.stringify(this.driverList)
					});
				}
				this.show = false
			},
			cancel() {
				this.show = false
			},
			clickTap(index) {
				this.index = index
			},
			clickTab(index) {
				this.tabIndex = index
			},
			btnChange(num) {
				// debugger
				this.haoType = num
				this.upCallback({size:10,num:1})
				// this.getList()
			},
			upCallback(page) {
				var that =this
				that.$request.baseRequest('get', '/driverInfo/getDriver', {
						commonId:'2939c4c23ca14e4ab6f16d7a6b3f8d5e'
					}).then(res => {
						console.log(res.data)
						that.driverList=res.data
						if(res.data.hyDriverCarInfoList){
							for (var i = 0; i < res.data.hyDriverCarInfoList.length; i++) {
								res.data.hyDriverCarInfoList[i].carApprovedWeight=res.data.hyDriverCarInfoList[i].carApprovedWeight/1000
								res.data.hyDriverCarInfoList[i].guaCarApprovedWeight=res.data.hyDriverCarInfoList[i].guaCarApprovedWeight/1000
								res.data.hyDriverCarInfoList[i].carLong=res.data.hyDriverCarInfoList[i].carLong/1000
								res.data.hyDriverCarInfoList[i].guaCarLong=res.data.hyDriverCarInfoList[i].guaCarLong/1000
								res.data.hyDriverCarInfoList[i].carNumber = res.data.hyDriverCarInfoList[i].carNumber.replace(res.data.hyDriverCarInfoList[i].carNumber.substring(2, 6),
									"****")
								res.data.hyDriverCarInfoList[i].guaCarNumber = res.data.hyDriverCarInfoList[i].guaCarNumber.replace(res.data.hyDriverCarInfoList[i].guaCarNumber.substring(2, 6),
								"****")
							}
							that.hyDriverCarInfoList=res.data.hyDriverCarInfoList
						}
						that.$request.baseRequest('get', '/orderInfo/selectHaoPing', {
								commonId:that.driverList.commonId,
								evaluateFlag:1,
						
							}).then(res => {
								that.ping=res.data
							})
							.catch(res => {
								uni.$u.toast(res.message);
							});
						that.$request.baseRequest('get', '/evaluateInfo/selectEvaluateInfo', {
								evaluatoredId: that.driverList.commonId,
								flag: 2,
								haoType:that.haoType,
								searchType:1,
								
								pageSize: page.size,
								currentPage: page.num
							}).then(res => {
								if (page.num == 1) that.list = [];
								that.list = that.list.concat(res.data.records); //追加新数据
								that.total = res.data.total
								for (let i = 0; i < that.list.length; i++) {
									if (that.list[i].ownerUrl) {
										// that.list[i].imgList=[]
										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);
							});
					})
				
			},
			// 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;
	}
	.carMessage{
		background:#fff;border-radius: 20rpx;
		.carMessage-item{
			padding:40rpx;
		}
	}
	.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>