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="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.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">{{list.length}}</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="objectInfo.cargoOwner">所属企业</view>
				<view class="enterprise_title" v-if="!objectInfo.cargoOwner">个人货主，暂未代理企业</view>
				<view class="enterprise_name" v-if="objectInfo.cargoOwner">{{objectInfo.cargoOwner}}</view>
			</view>
		</view>
		<!-- 评价信息 -->
			<view v-if="indexBtn == 2" class="pl-style">
				<view class="flex flex-space-between">
					<view :class="btnData == 1 ? 'btn-active':'btn'" @click="btnChange(1)">全部(1)</view>
					<view :class="btnData == 2 ? 'btn-active':'btn'" @click="btnChange(2)">最新(1)</view>
					<view :class="btnData == 3 ? 'btn-active':'btn'" @click="btnChange(3)">好评(1)</view>
					<view :class="btnData == 4 ? 'btn-active':'btn'" @click="btnChange(4)">差评(1)</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">{{objectInfo.driverName}}</view>
								<view class="evaluate_date m-top10">{{objectInfo.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
										:src="objectInfo.cargoOwnerPortrait?objectInfo.cargoOwnerPortrait:'../../static/images/mine/tx.png'"
										width='70rpx' height='70rpx'>
									</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 {
				list:[],
				dataObj:{},
				show: false,
				columns: [
					['反馈', '举报']
				],
				id: "",
				objectInfo: {},
				indexBtn: 1,
				btnData: 1
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'firstAuthentication'])
		},
		onShow() {

		},
		onLoad(options) {
			that = this
			this.objectInfo = options
			console.log(options)
		},
		onNavigationBarButtonTap(e) {
			console.log("success")
			this.show = true
		},
		methods: {
			selectTypeClose() {
				this.show = false
			},
			upCallback(page) {
				
				this.getList()
				that.$request.baseRequest('get', '/evaluateInfo/selectEvaluateInfo', {
						ownerId: this.objectInfo.commonId,
						flag: 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].driverUrl){
								that.list[i].imgList = that.list[i].driverUrl.split(',')
							}
							
							that.list[i].count = (Number(that.list[i].driverCredit) + Number(that.list[i]
								.tranEfficiency) + Number(that.list[i].tranSafety) + Number(that.list[i]
								.serviceQuality) + Number(that.list[i].satisfaction)) / 25 * 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.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);
					});
			},
			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.btnData = num
				this.getList()
			}
		}
	}
</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: #2772FB;
		position: relative;
	}

	.switchbtn1:before {
		width: 20px;
		height: 3px;
		content: '';
		position: absolute;
		bottom: -7px;
		background: #2772FB;
		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: #2772FB;
		}

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

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

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