货主评价

pages/goodSource/cargoOwnerSee.vue

@@ -1,116 +1,121 @@
 <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>
+		<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="flex">
+			<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'>
-					<view style="color: #999999;margin: 20rpx;">{{item.company?item.company:item.companyName}}</view>
+				<view class="flex">
+					<view class="text">评价</view>
+					<view class="number">{{totalPL}}</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}}
+
+			<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>
-							<start count="5" v-model="dataObj.zong" size="35" activeColor="#ffaa00" :size="18" :allowHalf='true'
-								:readonly='true'>
-							</start>
+						<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="gray fontsize-24">累计发运{{dataObj.countFa}}次</view>
+						<!-- 	<view class="enterprise_name" v-if="companyList.length>0">{{objectInfo.cargoOwner}}</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 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="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 :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 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>
-		
+			</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>
@@ -138,12 +143,12 @@
 				],
 				id: "",
 				objectInfo: {},
-				haoType:'',
-				companyList:[],
-				commonId:'',
+				haoType: '',
+				companyList: [],
+				commonId: '',
 				indexBtn: 1,
 				btnData: '',
-				totalPL:'0'
+				totalPL: '0'
 			}
 		},
 		computed: {
@@ -154,7 +159,7 @@
 		},
 		onLoad(options) {
 			that = this
-			this.commonId=options.commonId
+			this.commonId = options.commonId
 			this.objectInfo = options
 			console.log(options)
 
@@ -183,7 +188,7 @@
 				this.show = false
 			},
 			upCallback(page) {
-				console.log(this.commonId,11111111)
+				console.log(this.commonId, 11111111)
 				this.$request.baseRequest('get', '/cargoOwnerCompInfo/cargoOwnerList', {
 						commonId: this.commonId
 					}).then(res => {
@@ -219,14 +224,14 @@
 				that.$request.baseRequest('get', '/evaluateInfo/selectEvaluateInfo', {
 						evaluatoredId: this.objectInfo.commonId,
 						flag: 2,
-						haoType:this.haoType,
-						searchType: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==''){
+						if (this.haoType == '') {
 							that.totalPL = res.data.total
 						}
 						for (let i = 0; i < that.list.length; i++) {
@@ -282,10 +287,13 @@
 				this.show = false
 			},
 			btnChange(num) {
-				this.haoType=num
+				this.haoType = num
 				this.btnData = num
 				this.getList()
-				this.upCallback({size:10,num:1})
+				this.upCallback({
+					size: 10,
+					num: 1
+				})
 			}
 		}
 	}
@@ -293,13 +301,23 @@
 
 <style lang="scss">
 	.center {
-		padding: 40rpx;
+		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;
-			font-size: 48rpx;
+			// margin: 40rpx 30rpx;
+			font-size: 46rpx;
 			font-weight: 600;
 		}
 
@@ -313,13 +331,20 @@
 		}
 
 		.feedback_css {
-			margin-top: 44rpx;
-			margin-left: 50px;
+			width: 124rpx;
+			height: 58rpx;
+			background: #2772FB;
+			border-radius: 29rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			color: #fff;
+			font-size: 28rpx;
 		}
 	}
 
 	.switchbtn {
-		margin-right: 40rpx;
+		margin-right: 117rpx;
 		margin-top: 20rpx;
 		font-weight: 600;
 	}
@@ -347,6 +372,7 @@
 		.enterprise_title {
 			font-weight: 700;
 			margin-top: 80rpx;
+			font-size: 28rpx;
 		}
 
 		.enterprise_name {
@@ -366,14 +392,22 @@
 		padding-bottom: 40rpx;
 		border-bottom: 1px solid #E6E6E6;
 
-		.evaluate_name {}
+		.evaluate_name {
+			font-size: 26rpx;
+		}
 
 		.branch_css {
 			// margin: 0;
 			margin-right: 20rpx;
+			font-size: 22rpx;
+			color: #878787;
 		}
 
-		.evaluate_date {}
+		.evaluate_date {
+			font-size: 22rpx;
+			font-weight: 400;
+			color: #999999;
+		}
 
 		.row1 {
 			.right {
@@ -386,18 +420,24 @@
 
 	.pf-row {
 		margin: 20rpx 0;
+		display: flex;
+		padding: 0 53rpx;
+
 
 		.text {
 			color: #999;
 			margin-right: 20rpx;
+			font-size: 22rpx;
 		}
 
 		.number {
 			color: #2772FB;
+			font-size: 28rpx;
 		}
 
 		.flex {
 			margin-right: 20rpx;
+			align-items: center;
 		}
 	}
 
@@ -413,6 +453,8 @@
 		align-items: center;
 		justify-content: center;
 		padding: 10rpx 20rpx;
+		font-size: 24rpx;
+		margin-right: 16rpx;
 	}
 
 	.btn {
@@ -423,15 +465,29 @@
 		align-items: center;
 		justify-content: center;
 		padding: 10rpx 20rpx;
+		font-size: 24rpx;
+		margin-right: 16rpx;
 	}
 
 	.pf-number {
 		color: #363636;
-		font-size: 60rpx;
+		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>