wangluohuoyun-app/pages/goodSource/cargoOwnerSee.vue

<template>
	<view class="center">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" class="mescroll">
			<view class="center_top">
				<view class="left">
					<u--image
						:src="objectInfo.cargoOwnerPortrait?objectInfo.cargoOwnerPortrait:'../../static/images/mine/tx.png'"
						width='172rpx' height='172rpx' 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>
				<!-- <view class="feedback_css">+关注</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="pj-view">
				<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'>
							<view style="color: #999999;margin: 20rpx;">{{item.company?item.company:item.companyName}}
							</view>
						</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 class="pf-number-right">
								<start count="5" v-model="dataObj.zong" size="35" activeColor="#ffaa00" :size="18"
									:allowHalf='true' :readonly='true'>
								</start>
								<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">
						<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='68rpx' height='68rpx' 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="" style="font-size: 28rpx;">
										{{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>
			</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.commonId
			this.objectInfo = options
			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.commonId,
						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.commonId,
						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)
					});
				} else {
					uni.$u.route('/pages/goodSource/jb', {
						val: JSON.stringify(this.objectInfo)
					});
				}
				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 0;
	}

	.center_top {
		padding: 0 53rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;
		}

		.name {
			// margin: 40rpx 30rpx;
			font-size: 46rpx;
			font-weight: 600;
		}

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

		.feedback_css {
			width: 124rpx;
			height: 58rpx;
			background: #F5BA3C;
			border-radius: 29rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 28rpx;
		}
	}

	.switchbtn {
		margin-right: 117rpx;
		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;
			font-size: 28rpx;
		}

		.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 {
			font-size: 26rpx;
		}

		.branch_css {
			// margin: 0;
			margin-right: 20rpx;
			font-size: 22rpx;
			color: #878787;
		}

		.evaluate_date {
			font-size: 22rpx;
			font-weight: 400;
			color: #999999;
		}

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

	.pf-row {
		margin: 20rpx 0;
		display: flex;
		padding: 0 53rpx;


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

		.number {
			color: #F5BA3C;
			font-size: 28rpx;
		}

		.flex {
			margin-right: 20rpx;
			align-items: center;
		}
	}

	.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;
		font-size: 24rpx;
		margin-right: 16rpx;
	}

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

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

	.pf-number-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 80rpx;
	}

	.pf {
		margin-bottom: 20rpx;
	}

	.pj-view {
		padding: 0 53rpx;
		font-size: 30rpx;
	}
</style>