hz-zhhq-app/pages/management/cars-management-sl.vue

<template>
	<view>
		<view class="container">
			<view class="banner-box">
				<image src="/static/imgs/ycsq.jpg" mode=""></image>
			</view>
			<view class="main">
				<view class="tab-box">
					<view class="tab-item" :class="currentTabIndex == 0 ? 'active_tab' : ''" @click="currentTabIndex = 0">理发评价</view>
					<view class="tab-item" :class="currentTabIndex == 2 ? 'active_tab' : ''" @click="currentTabIndex = 2">洗车评价</view>
					<view class="tab-item" :class="currentTabIndex == 1 ? 'active_tab' : ''" @click="currentTabIndex = 1">用车评价</view>
				</view>
				<!-- 理发评价 -->
				<!-- applicant_name,satisfied_level,comment_content -->
				<view class="reservation-box" v-if="currentTabIndex == 0">
					<view class="comment-item" v-for="(item, index) in haircutM" :key="index">
						<view class="user-head">
							<image v-if="item.userHead" :src="item.userHead" mode=""></image>
							<image v-else src="/static/imgs/missing-face.png" mode=""></image>
						</view>
						<view class="fr-content">
							<view class="date">{{ item.date }}</view>
							<view class="name">{{ item.applicant_name }}</view>
							<!-- <view class="grade">
								<image v-for="(grade, gradeIndex) in 3" :key="gradeIndex" src="/static/imgs/star1.png" mode=""></image>
								<image v-for="(grade, gradeIndex) in 2" :key="gradeIndex" src="/static/imgs/star0.png" mode=""></image>
							</view> -->
							<view class="comment-content">{{ item.comment_content }}</view>
							<view class="food-list">
								<view class="food-item">很满意</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 洗车评价 -->
				<view v-if="currentTabIndex == 2">
					<view class="comment-item" v-for="(item, index) in washList" :key="index">
						<view class="user-head">
							<image v-if="item.userHead" :src="item.userHead" mode=""></image>
							<image v-else src="/static/imgs/missing-face.png" mode=""></image>
						</view>
						<view class="fr-content">
							<view class="date">{{ item.date }}</view>
							<view class="name">{{ item.userName }}</view>
							<!-- <view class="grade">
                				<image v-for="(grade, gradeIndex) in 3" :key="gradeIndex" src="/static/imgs/star1.png" mode=""></image>
                				<image v-for="(grade, gradeIndex) in 2" :key="gradeIndex" src="/static/imgs/star0.png" mode=""></image>
                			</view> -->
							<view class="comment-content">{{ item.content }}</view>
							<view class="food-list">
								<view class="food-item">很满意</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 用车评价 -->
				<view v-if="currentTabIndex == 1">
					<view class="comment-item" v-for="(item, index) in commentList" :key="index">
						<view class="user-head">
							<image v-if="item.userHead" :src="item.userHead" mode=""></image>
							<image v-else src="/static/imgs/missing-face.png" mode=""></image>
						</view>
						<view class="fr-content">
							<view class="date">{{ item.date }}</view>
							<view class="name">{{ item.userName }}</view>
							<!-- <view class="grade">
								<image v-for="(grade, gradeIndex) in 3" :key="gradeIndex" src="/static/imgs/star1.png" mode=""></image>
								<image v-for="(grade, gradeIndex) in 2" :key="gradeIndex" src="/static/imgs/star0.png" mode=""></image>
							</view> -->
							<view class="comment-content">{{ item.content }}</view>
							<view class="food-list">
								<view class="food-item">很满意</view>
								<view class="date">{{ item.reason }}</view>
							</view>
						</view>
					</view>
				</view>
				<load-more v-if="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDate,
		alertTip,
		callbackRequest,
		getStorage,
		regPhone,
		formatDate
	} from '@/common/util.js';
	import {
		getAllDept,
		initWashCar,
		applyWashCar,
		getMyWashCarList
	} from '@/common/api.js';
	import loadMore from '@/components/loadMore.vue';
	import contentNone from '@/components/contentNone.vue';
	export default {
		data() {
			return {
				page: 1,
				pageSize: 10,
				loadingType: 0, //0-loading前；1-loading中；2-没有更多了
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				userId: getStorage('userInfo').id,
				currentTabIndex: 0,
				deptList: [], //部门列表applicant_name,satisfied_level,comment_content
				departmentIndex: 0, //选择的部门下标
				washList: [{
						userName: '1111',
						date: '2019-09-09 09:09',
						content: '还可以',
						value: '0',
						// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					},
					{
						userName: '李**',
						date: '2019-09-09 09:09',
						content: '还不错',
						value: '0',
						// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					},
					{
						userName: '王**',
						date: '2019-09-01 09:09',
						content: '还不错',
						value: '0',
						// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					},
					{
						userName: '赵**',
						date: '2019-09-01 09:09',
						content: '还不错',
						value: '0',
						userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					},
				],
				haircutM: [{
						applicant_name: '222',
						date: '2019-09-09 09:09',
						comment_content: '还可以',
						value: '0',
						// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					},
					{
						applicant_name: '汪**',
						date: '2019-09-09 09:09',
						comment_content: '还可以',
						value: '0',
						// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					},
					{
						applicant_name: '汪**',
						date: '2019-09-09 09:09',
						comment_content: '还可以',
						value: '0',
						// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					},
					{
						applicant_name: '汪**',
						date: '2019-09-09 09:09',
						comment_content: '还可以',
						value: '0',
						// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					}
				],
				commentList: [{
						userName: '赵**',
						date: '2019-09-09 09:09',
						content: '还可以',
						value: '0',
						reason: "公务办事",
						// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					},
					{
						userName: '李**',
						date: '2019-09-09 09:09',
						content: '还不错',
						value: '0',
						reason: "出差接站",
						// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					},
					{
						userName: '王**',
						date: '2019-09-01 09:09',
						content: '还不错',
						value: '0',
						reason: "公务办事",
						// userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					},
					{
						userName: '赵**',
						date: '2019-09-01 09:09',
						content: '还不错',
						value: '0',
						reason: "出差送站",
						userHead: 'http://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaELTWTXb6GG8T1ZMzKv6mombq1H1TtB7f9uMUP04tgfLgzU56joxozHqO9QSPId0Fqcs5daDKI0iaVQ/132'
					}
				],
				reservationList: [{
						timeQ: '2019-09-09 09:09',
						rerson: '公务办事',
						numeberOfCar: '4',
						userName: '张三',
						apply_time: '2020-01-06 16:18:43',
						concatUserName: '张三',
						concatPhone: '15220161881',
						conmentStatus: '1'
					},
					{
						timeQ: '2019-10-09 09:09',
						rerson: '出差送站',
						numeberOfCar: '2',
						userName: '李四',
						apply_time: '2020-10-09 17:18:43',
						concatUserName: '李四',
						concatPhone: '12220161881',
						conmentStatus: '0'
					},
					{
						timeQ: '2019-11-09 09:09',
						rerson: '出差接站',
						numeberOfCar: '1',
						userName: '张飞',
						apply_time: '2020-11-09 17:18:43',
						concatUserName: '张飞',
						concatPhone: '13320161881',
						conmentStatus: '0'
					},
					{
						timeQ: '2019-12-09 09:09',
						rerson: '公务接待',
						numeberOfCar: '3',
						userName: '王思',
						apply_time: '2020-12-09 17:18:43',
						concatUserName: '王思',
						concatPhone: '19920161881',
						conmentStatus: '0'
					}
				],
				formatDate: formatDate
			};
		},
		components: {
			loadMore,
			contentNone
		},
		onLoad(option) {},
		watch: {
			currentTabIndex: function(newVal, oldVal) {
				// if(newVal == 1 ){
				// 	if(this.haircutM.length == 0){
				// 		this.page = 1;
				// 		this.loadingType = 0;
				// 		this.initData();
				// 	}else{
				// 		this.list = this.commentList1
				// 	}
				// }else if(newVal == 2){
				// 	if(this.commentList.length == 0){
				// 		this.page = 1;
				// 		this.loadingType = 0;
				// 		this.initData();
				// 	}else{
				// 		this.list = this.commentList2
				// 	}
				// }else if(newVal == 3){
				// 	if(this.washList.length == 0){
				// 		this.page = 1;
				// 		this.loadingType = 0;
				// 		this.initData();
				// 	}else{
				// 		this.list = this.commentList2
				// 	}
				// }
			}
		},
		methods: {
			// initData() {
			// 	let params = {
			// 		method: initWashCar,
			// 		data: {
			// 			applyDate: this.date[this.chooseDateIndex].tiems,
			// 			userId: this.userId
			// 		}
			// 	};
			// 	callbackRequest(params).then(res => {
			// 		if (res.data.returnCode == 1) {
			// 		}
			// 	});
			// },
		},
		onReachBottom() {
			// if (this.loadingType !== 0 || this.currentTabIndex != 1) {
			// 	return;
			// }
			// this.loadingType = 1;
			// this.page = this.page + 1;
			// this.getReservationRecord();
		}
	};
</script>

<style lang="scss">
	@import '@/static/css/common.scss';

	.container {
		position: relative;
		overflow: hidden;
		min-height: 100vh;
		background: #f8f8f8;

		.banner-box {
			width: 100%;
			height: 240upx;
			position: absolute;
			top: 0;
			left: 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.main {
			margin: 172upx 40upx 0;
			position: relative;
			z-index: 10;

			.tab-box {
				overflow: hidden;
				border-radius: 10upx 10upx 0 0;
				background: rgba(132, 149, 167, 0.8);
				height: 70upx;

				.tab-item {
					float: left;
					height: 70upx;
					width: 33.3%;
					font-size: 30upx;
					color: #e5f6ff;
					text-align: center;
					line-height: 70upx;
				}

				.active_tab {
					background: #fff;
					color: #333;
					border-radius: 10upx 10upx 0 0;
					font-weight: bold;
				}
			}

			.reservation-box {
				background: #fff;

				.time-box {
					overflow: hidden;
					padding-top: 20rpx;

					.time-item {
						float: left;
						width: 196rpx;
						margin: 0 0rpx 20rpx 20rpx;
						font-size: 26rpx;
						text-align: center;
						line-height: 32rpx;
						padding: 10rpx 0;
						position: relative;
						border: 1px solid #ccc;
						box-sizing: border-box;

						.time-text {
							color: #666;

							text {
								padding: 0 6rpx;
								color: #00c277;
							}

							.color-666 {
								color: #666;
							}
						}

						.icon {
							position: absolute;
							right: 0;
							bottom: 0;
							width: 36rpx;
							height: 36rpx;
							display: none;
						}
					}

					.active {
						border: 1px solid #00c277;

						.icon {
							display: block;
						}
					}
				}

				.form-box {
					// padding: 20upx 30upx 50upx;
					background: #fff;

					.form-item {
						overflow: hidden;
						border-bottom: 1px solid #eee;
						padding: 30upx;

						.label {
							float: left;
							width: 150upx;
							font-size: 28upx;
							color: #333;
							font-weight: bold;
							line-height: 50upx;
						}

						.ipt-box {
							margin-left: 160upx;

							input {
								width: 100%;
								height: 50upx;
								line-height: 50upx;
								font-size: 26upx;
								color: #666;
							}
						}

						.select {
							.arrow {
								float: right;
								width: 16upx;
								height: 29upx;
								margin-top: 10upx;
							}

							.picker {
								height: 50upx;
								line-height: 50upx;
								font-size: 26upx;
								color: #666;
							}
						}
					}

					.form-item:last-child {
						border-bottom: 0px;
					}
				}

				/* 评论 */
				.evaluate {
					padding-top: 30upx;
					border-top: 1px solid #eee;
				}

				.evaluate .title {
					font-size: 28upx;
					color: #333;
					font-weight: bold;
					line-height: 40upx;
					padding: 0 30rpx 30rpx;
				}

				.evaluate .evaluate_item {
					border-bottom: 1px solid #eeeeee;
					padding: 0 0 30upx 50upx;
				}

				.evaluate .evaluate_item:last-child {
					border: none;
				}

				.evaluate .evaluate_item .user {
					padding: 20upx 0;
				}

				.evaluate .evaluate_item .user .username {
					font-size: 28rpx;
					color: #666;
					display: inline-block;
					vertical-align: top;
					padding-right: 20upx;
				}

				.evaluate .evaluate_item .user span image {
					width: 40upx;
					height: 40upx;
					margin-right: 5upx;
				}

				.evaluate .evaluate_item .text {
					font-size: 28upx;
					color: #666;
					line-height: 40upx;
				}
			}
		}

		.scroll-view {
			padding-top: 30upx;
			white-space: nowrap;
			width: 100%;
			height: 120upx;

			.time-item-box {
				padding: 0 10upx;
				margin: 0 16upx;
				display: inline-block;

				.time {
					display: block;
					width: 100%;
					font-size: 28upx;
					color: #666;
				}

				.week {
					display: block;
					width: 100%;
					font-size: 28upx;
					color: #666;
				}
			}

			.time-active {
				.time {
					color: #00c277;
				}

				.week {
					color: #00c277;
				}
			}
		}
	}

	.list-box {
		.detail {
			// margin-top: 10upx;
			margin-bottom: 14upx;
			background: #ffffff;
			border-radius: 4upx;
		}

		.detail_header {
			padding: 15upx 30upx;
			border-bottom: 1px solid #eee;
		}

		.detail_header .blueSign {
			height: 30upx;
			width: 10upx;
			background: #00c277;
			display: inline-block;
			margin: 10upx 14upx 0 0;
		}

		.detail_header .font-tilte {
			display: inline-block;
			font-size: 28upx;
			color: #333;
			line-height: 50upx;
			vertical-align: top;
		}

		.detail_header .font-result {
			display: inline-block;
			float: right;
			font-size: 26upx;
			color: #00c277;
			line-height: 50upx;
			vertical-align: top;
		}

		.detail_msg {
			padding: 20upx 30upx;
			overflow: hidden;
		}

		.detail_msg .info-item {
			margin-bottom: 10upx;
			font-size: 28upx;

			text {
				display: inline-block;
				width: 140upx;
			}

			.infoSpan {
				width: auto;
				font-size: 28upx;
				color: #666;
			}
		}

		.comment-btn {
			float: right;
			font-size: 24upx;
			border-radius: 10upx;
			color: #fff;
			line-height: 50upx;
			text-align: center;
			min-width: 140upx;
			background-color: #00c277;
		}

		.comment-yc {
			float: left;
			font-size: 24upx;
			border-radius: 10upx;
			color: #fff;
			line-height: 50upx;
			text-align: center;
			min-width: 140upx;
			background-color: #00c277;
		}
	}

	.comment-item {
		overflow: hidden;
		margin-top: 20rpx;

		.user-head {
			float: left;
			width: 90upx;
			height: 90upx;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.fr-content {
			margin: 0 0 0upx 110upx;
			border-bottom: 1px solid #f5f5f5;
			padding-bottom: 26upx;

			.name {
				font-size: 28upx;
				font-weight: bold;
				line-height: 44upx;
			}

			.date {
				float: right;
				font-size: 26upx;
				color: #666;
				line-height: 44upx;
			}

			.grade {
				padding-bottom: 10upx;

				text {
					display: inline-block;
					font-size: 26upx;
					color: #666;
					line-height: 36upx;
					vertical-align: top;
					padding-right: 20upx;
				}

				image {
					width: 36upx;
					height: 36upx;
					margin-right: 8upx;
					vertical-align: top;
				}
			}

			.comment-content {
				font-size: 26upx;
				color: #666;
				line-height: 40upx;
				margin: 6upx;
			}

			.food-list {
				padding: 10rpx 0 0;
				overflow: hidden;

				.food-item {
					float: left;
					margin-right: 10rpx;
					font-size: 24rpx;
					line-height: 30rpx;
					color: $assistColor;
					padding: 4rpx 16rpx;
					border: 1px solid $assistColor;
				}
			}
		}
	}
</style>