wangluohuoyun-app/pages/order/cargoOwnerSee.vue

<template>
	<view class="center">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			class="mescroll">
		<view class="center_top">
			<view class="flex">
				<u--image
					:src="objectInfo.cargoOwnerPortrait?objectInfo.cargoOwnerPortrait:'../../static/images/mine/tx.png'"
					width='170rpx' height='170rpx' shape="circle">
				</u--image>
				<view class="name">{{objectInfo.cargoOwnerName}}</view>
				<image src="../../static/qy@2x.png" mode="widthFix" class="title_css" v-show="objectInfo.cargoOwner=='企业货主'">
				</image>
				<view class="feedback_css"></view>
			</view>
		</view>
		<view class="pf-row flex">
			<view class="flex">
				<view class="text">评分</view>
				<view class="number">{{dataObj.zong}}</view>
			</view>
			<view class="flex">
				<view class="text">发运次数</view>
				<view class="number">{{dataObj.countFa}}</view>
			</view>
			<!-- <view class="flex">
				<view class="text">好评率</view>
				<view class="number">{{dataObj.haoPingLv}}</view>
			</view> -->
			<view class="flex">
				<view class="text">评价</view>
				<view class="number">{{totalPL}}</view>
			</view>
		</view>

		<u-line></u-line>
		<view class="flex">
			<view class="switchbtn" @click="switchsubmit(1)" :class="indexBtn == 1 ? 'switchbtn1':''">货主信息</view>
			<view class="switchbtn" @click="switchsubmit(2)" :class="indexBtn == 2 ? 'switchbtn1':''">评价</view>
		</view>
		<!-- 货主信息 -->
		<view v-if="indexBtn == 1" class="enterprise">
			<view>
				<view class="enterprise_title" v-if="companyList.length>0">所属企业:</view>
				<view class="enterprise_title" v-else>个人货主，暂未代理企业</view>
				<view v-for='item in companyList'>
					{{item.company?item.company:item.companyName}}
				</view>
			<!-- 	<view class="enterprise_name" v-if="companyList.length>0">{{objectInfo.cargoOwner}}</view> -->
			</view>
		</view>
		<!-- 评价信息 -->
		<view v-if="indexBtn == 2" class="pl-style">
			<view class="pf flex-space-between flex">
				<view class="left flex align-center" style="margin-right: 20rpx;">
					<view class="pf-number">
						{{dataObj.zong}}
					</view>
					<view>
						<view>
							<start count="5" v-model="dataObj.zong" size="35" activeColor="#ffaa00" :size="18" :allowHalf='true'
								:readonly='true'>
							</start>
						</view>
						<view class="gray fontsize-24">累计发运{{dataObj.countFa}}次</view>
					</view>
				</view>
				<view v-if='dataObj.haoPing>20' class="right">
					<view>{{dataObj.haoPingLv}}%</view>
					<view class="gray fontsize-24">好评率</view>
				</view>
			</view>
				<view class="flex flex-space-between">
					<view :class="btnData == '' ? 'btn-active':'btn'" @click="btnChange('')">全部({{totalPL}})</view>
					<!-- <view :class="btnData == 2 ? 'btn-active':'btn'" @click="btnChange(2)">最新</view> -->
					<view :class="btnData == 1 ? 'btn-active':'btn'" @click="btnChange(1)">好评({{dataObj.haoPing}})</view>
					<view :class="btnData == 2 ? 'btn-active':'btn'" @click="btnChange(2)">差评({{dataObj.chaPing}})</view>
				</view>
				<view class="evaluate_css" v-for="(item,index) in list">
					<view class="flex">
						<view class="row1 flex">
							<u--image
								:src="objectInfo.cargoOwnerPortrait?objectInfo.cargoOwnerPortrait:'../../static/images/mine/tx.png'"
								width='70rpx' height='70rpx' shape="circle">
							</u--image>
							<view class="right">
								<view class="evaluate_name">{{item.driverName}}</view>
								<view class="evaluate_date m-top10">{{objectInfo.createDate.split(' ')[0]}}</view>
								<view class="flex m-top10">
									<view class="branch_css ">{{item.ownerScoreObtained}}</view>
									<view class="">
										<start count="5" v-model="item.ownerScoreObtained" size="35" activeColor="#ffaa00" :size="18"
											:allowHalf='true' :disabled='true'>
										</start>
									</view>
								</view>
								<view class="">
									{{item.driverContent}}
								</view>
								<view style='flex-wrap: wrap;' class='flex'>
									<u--image style='margin:7rpx;border:1px solid #ccc;' v-for="(item1,index) in item.imgList" @click='ylImg(item.imgList)' :src="item1" width='170rpx'
										height='170rpx'>
									</u--image>
								</view>
							</view>
						</view>
					</view>
				</view>
		</view>
		<u-picker :show="show" :columns="columns" :closeOnClickOverlay='true' @close='selectTypeClose'
			@cancel='selectTypeClose' @confirm='confirmBtn'></u-picker>
		<u-toast ref="uToast"></u-toast>
		
		</mescroll-body>
	</view>
</template>

<script>
	var that
	import start from '../../common/components/uni-rate.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState
	} from 'vuex';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			start
		},
		data() {
			return {
				zhpf: '5',
				list: [],
				dataObj: {},
				show: false,
				columns: [
					['投诉', '举报']
				],
				id: "",
				objectInfo: {},
				haoType:'',
				companyList:[],
				commonId:'',
				indexBtn: 1,
				btnData: '',
				totalPL:'0'
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'firstAuthentication'])
		},
		onShow() {

		},
		onLoad(options) {
			that = this
			this.commonId=options.cargoCommonId
			this.objectInfo = options
			this.objectInfo.orderId=this.objectInfo.id
			console.log(options)

			this.getList()
		},
		onNavigationBarButtonTap(e) {
			console.log("success")
			this.show = true
		},
		methods: {
			ylImg(src) {
				uni.previewImage({
					urls: src,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			selectTypeClose() {
				this.show = false
			},
			upCallback(page) {
				console.log(this.commonId,11111111)
				this.$request.baseRequest('get', '/cargoOwnerCompInfo/cargoOwnerList', {
						commonId: this.commonId
					}).then(res => {
						console.log(res)
						// 可用企业货主
						this.companyList = []
						// 自己法人
						// let _self = res.data.companyInfoList
						let _self = res.data.hyCompanyInfoList
						//代理货主
						// let _dlhz = res.data.cargoOwnerCompInfoList
						let _dlhz = res.data.hyCargoOwnerCompInfoList
						if (!_dlhz) _dlhz = []
						if (!_self) _self = []
						if (_self.length > 0) {
							for (let i = 0; i < _self.length; i++) {
								if (_self[i].status == '已认证') {
									this.companyList.push(_self[i])
								}
							}
						}
						if (_dlhz.length > 0) {
							for (let i = 0; i < _dlhz.length; i++) {
								if (_dlhz[i].status == '已认证') {
									this.companyList.push(_dlhz[i])
								}
							}
						}
						console.log(this.companyList)
						this.$forceUpdate()
					})
					.catch(res => {});
				that.$request.baseRequest('get', '/evaluateInfo/selectEvaluateInfo', {
						evaluatoredId: this.objectInfo.cargoCommonId,
						flag: 2,
						haoType:this.haoType,
						searchType:2,
						pageSize: page.size,
						currentPage: page.num
					}).then(res => {
						if (page.num == 1) that.list = [];
						that.list = that.list.concat(res.data.records); //追加新数据
						if(this.haoType==''){
							that.totalPL = res.data.total
						}
						for (let i = 0; i < that.list.length; i++) {
							if (that.list[i].driverUrl) {
								that.list[i].imgList = that.list[i].driverUrl.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() {
				this.$request.baseRequest('get', '/orderInfo/selectHaoPing', {
						commonId: this.objectInfo.cargoCommonId,
						evaluateFlag: 2
					}).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);
					});
			},
			switchsubmit(num) {
				this.indexBtn = num
				this.getList()
			},
			confirmBtn(e) {
				console.log(e.value)
				if (e.value == '投诉') {
					uni.$u.route('/pages/goodSource/fk', {
						val: JSON.stringify(this.objectInfo),
						type:1
					});
				} else {
					uni.$u.route('/pages/goodSource/jb', {
						val: JSON.stringify(this.objectInfo),
						type:1
					});
				}
				this.show = false
			},
			btnChange(num) {
				this.haoType=num
				this.btnData = num
				this.getList()
				this.upCallback({size:10,num:1})
			}
		}
	}
</script>

<style lang="scss">
	.center {
		padding: 40rpx;
	}

	.center_top {
		.name {
			margin: 40rpx;
			font-size: 48rpx;
			font-weight: 600;
		}

		.title_css {
			width: 50rpx;
			height: 50rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 50rpx;
			margin-top: 44rpx;
		}

		.feedback_css {
			margin-top: 44rpx;
			margin-left: 50px;
		}
	}

	.switchbtn {
		margin-right: 40rpx;
		margin-top: 20rpx;
		font-weight: 600;
	}

	.switchbtn1 {
		color: #F5BA3C;
		position: relative;
	}

	.switchbtn1:before {
		width: 20px;
		height: 3px;
		content: '';
		position: absolute;
		bottom: -7px;
		background: #F5BA3C;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	.enterprise {
		margin-top: 30rpx;

		.enterprise_title {
			font-weight: 700;
			margin-top: 80rpx;
		}

		.enterprise_name {
			margin-top: 10rpx;
		}

		.recordInfo {
			margin-top: 20rpx;
			font-weight: 600;
		}
	}

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

	.pf-row {
		margin: 20rpx 0;

		.text {
			color: #999;
			margin-right: 20rpx;
		}

		.number {
			color: #F5BA3C;
		}

		.flex {
			margin-right: 20rpx;
		}
	}

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

	.btn-active {
		background-color: #F5BA3C;
		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;
	}

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

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