zd2.0/pages/shop/repair/clientReparirDetail.vue

<template>
	<view class="container padding-t-30">
		<view class="itemBox">
			<view v-if='item.car' class="flex item">
				<view class="title">
					报修车辆：
				</view>
				<view class="content">
					{{item.car.car_name}}
				</view>
			</view>
			<view class="flex item">
				<view class="title">
					维修单号：
				</view>
				<view class="content">
					{{id}}
				</view>
			</view>
			<view class="flex item" @click="openAddress(item)">
				<view class="title">
					维修地点：
				</view>
				<view class="content flex">
					<image class="icon" src="../../../static/icon/shopAddress.png" mode="widthFix"></image>
					<text class="margin-l-10">{{item.address}}</text>
				</view>
			</view>
			<view class="flex item" @click="openPhone(item.phone)">
				<view class="title">
					联系电话：
				</view>
				<view class="content flex">
					<image class="icon" src="../../../static/icon/shopPhone.png" mode="widthFix"></image>
					<text class="margin-l-10">
						{{item.phone}}
					</text>
				</view>
			</view>
			<view class="flex item">
				<view class="title">
					申报时间：
				</view>
				<view class="content">
					{{item.add_time}}
				</view>
			</view>
			<view class="flex item">
				<view class="title">
					故障概述：
				</view>
				<view class="content">
					{{item.content}}
				</view>
			</view>
			<view class="flex item" v-if="item.status>1">
				<view class="title">
					维修师傅：
				</view>
				<view class="content">
					{{item.processor_user.staff_name}}
				</view>
			</view>
			<view class="flex item" @click="openPhone(item.processor_user.phone)" v-if="item.status>1">
				<view class="title">
					师傅电话：
				</view>
				<view class="content flex">
					<image class="icon" src="../../../static/icon/shopPhone.png" mode="widthFix"></image>
					<text class="margin-l-10">
						{{item.processor_user.phone}}
					</text>
				</view>
			</view>
			<view class="flex item" v-if="item.status>1">
				<view class="title">
					处理结果：
				</view>
				<view class="content">
					{{item.processor_result}}
				</view>
			</view>
			<view class="flex item" v-if="item.status>1">
				<view class="title">
					处理时间：
				</view>
				<view class="content">
					{{item.processor_time}}
				</view>
			</view>
			<view class="item ">
				<view class="title">
					已传图片：
				</view>
				<view class="content margin-t-20">
					<image @click="showImage(ls)" v-for="(ls,ind) in item.images" class="img margin-r-20" :src="ls"
						mode="scaleToFill">
					</image>
				</view>
			</view>
		</view>
		<view class="order-item" v-if="item.status==3">
			<view class="masterWorker flex">
				<image class="imgUser" src="../../../static/error/missing-face.png" mode="scaleToFill"></image>
				<view class="padding-l-30">
					<view class="masterName">
						{{item.processor_user.staff_name}}
					</view>
					<view class="masterTime margin-t-20">
						完成时间： {{item.processor_time}}
					</view>
				</view>
			</view>
			<view class="flex_item zhil">
				<view>响应速度：</view>
				<view>
					<uni-rate :readonly='true' text="1" size="20" margin="10" :value="item.response_score" >
					</uni-rate>
				</view>
			</view>
			<view class="flex_item zhil">
				<view>技术评分：</view>
				<view>
					<uni-rate :readonly='true' text="1" size="20" margin="10" :value="item.skill_score" >
					</uni-rate>
				</view>
			</view>
			<view class="flex_item zhil">
				<view>服务态度：</view>
				<view>
					<uni-rate :readonly='true' text="1" size="20" margin="10" :value="item.attitude_score" >
					</uni-rate>
				</view>
			</view>
		</view>
		<view class="buttom flex" v-if="loadStatus==0">
			<view v-if="item.type==0" class="btn  success" @click="showPopup">
				安排人员前往
			</view>
			<view v-if="item.type==1&&item.processor_user" class="btn action" @click="showPopup">
				已安排{{item.processor_user.staff_name}}前往维修
			</view>
		</view>
		<view class="buttom flex" v-if="loadStatus==1&&item.status==1">
			<view class="btn  success" @click="onSetRw">
				处理任务
			</view>
		</view>
		<view class="buttom flex" v-if="loadStatus==1&&item.status==2">
			<view class="btn  action">
				已处理完成
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="alertBox">
				<view class="popupTitle">
					<text>安排维修人员</text>
					<image @click="outPopup" class="exitIcon" src="../../../static/icon/goodsExit.png" mode="widthFix">
					</image>
				</view>
				<scroll-view scroll-y="true" class="list">
					<view class="flex" v-for="(item,index) in mastList">
						<view class="avatarBox flex">
							<image class="avatar" :src="item.avatar" mode="scaleToFill"></image>
							<view class="padding-l-20 nameBox">
								<view class="name">
									{{item.staff_name}}
								</view>
								<view class="ordNum">
									进行中任务：100
								</view>
							</view>
						</view>
						<view class="alertButtom bgGree" @click="setKfOrder(item)">
							安排
						</view>
						<!-- <view class="alertButtom bgYellow"  v-if="item.type==0">
							更换
						</view> -->
						<!-- <view class="alertButtom bgGray"  v-if="item.type==3">
							取消
						</view> -->
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="popupImg" type="center">
			<image @click="hideShowImg" class="actionImgShow" :src="actionImg" mode="aspectFit"></image>
		</uni-popup>

		<uni-popup ref="popupDialog" type="dialog">
			<uni-popup-dialog mode="input" title='处理结果' confirmText='提交' placeholder="请输入处理结果" :duration="2000"
				@confirm="confirmSet">

			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script>
	import {
		questionInfo,
		adminKf,
		schedule_task,
		tasksave
	} from '@/api/shop.js';
	export default {
		data() {
			return {
				id: '', //保存orderid
				item: {},
				rateValue: [{
					text: '响应速度',
					value: 0,
				}, {
					text: '技术评分',
					value: 0,
				}, {
					text: '服务态度',
					value: 0,
				}],
				// 师父人数
				mastList: [],
				actionImg: '', //选中的图片
				loadStatus: 0, //默认可以查看安排维修按钮
			};
		},
		onLoad(opt) {
			if (opt.type) {
				this.loadStatus = opt.type;
			}
			this.id = opt.id;
			this.loadData();
			// 获取员工列表
			this.adminKf();
		},
		methods: {
			// 开始处理任务
			onSetRw() {
				this.$refs.popupDialog.open();
			},
			// 提交处理结果
			confirmSet(data) {
				if (!(data.trim())) {
					uni.showModal({
						title: '错误',
						content: '请输入处理结果',
						showCancel: false,
					});
					return
				}
				tasksave({
					id: this.item.id,
					processor_result: data,
				}).then((e) => {
					uni.showToast({
						title: e.msg
					})
					this.loadData();
					console.log(e);
				}).catch((e) => {
					console.log(e);
				})
			},
			// 拨打电话
			openPhone(item) {
				uni.makePhoneCall({
					phoneNumber: item //仅为示例
				});
			},
			// 显示图片弹窗
			showImage(item) {
				this.actionImg = item;
				this.$refs.popupImg.open();
			},
			// 隐藏图片显示弹窗
			hideShowImg() {
				this.$refs.popupImg.close();
			},
			// 安排维修人员
			setKfOrder(item) {
				const that = this;
				uni.showLoading({
					title: '安排中',
					mask: true
				});
				schedule_task({
					id: this.item.id,
					uid: item.uid
				}).then((e) => {
					uni.hideLoading()
					uni.showToast({
						title: e.msg
					});
					// 关闭弹窗
					that.outPopup();
					// 刷新页面
					that.loadData();
					console.log(e);
				}).catch((e) => {
					uni.hideLoading()
					uni.hideToast();
					uni.showModal({
						title: '错误',
						content: e.msg,
						showCancel: false,
					});
					console.log(e);
				})
			},
			// 员工列表
			adminKf() {
				adminKf().then((e) => {
					this.mastList = e.data;
					console.log(e);
				}).catch(() => {
					console.log(e);
				})
			},
			// 关闭弹窗
			outPopup() {
				this.$refs.popup.close()
			},
			loadData() {
				questionInfo({
					order_id: this.id
				}).then((e) => {
					this.item = e.data;
					this.item.images = this.item.images.split(',')
					this.item.type = e.data.status;
					console.log(e);
				}).catch((e) => {
					console.log(e);
				})
			},
			// 显示底部弹窗
			showPopup() {
				console.log('点击');
				if (this.item.type == 0) {
					this.$refs.popup.open()
				}
				if (this.item.type == 1) {
					uni.showModal({
						title: '提示',
						content: '已安排了工作人员无法重新安排',
						showCancel: false,
					});
				}
			}
		}
	};
</script>
<style lang="scss">
	.order-item {
		display: flex;
		flex-direction: column;
		padding: 30rpx 0;
		border-radius: 20rpx;
		background: #fff;
		margin: 0 $page-row-spacing;

		.masterWorker {
			padding: 0 30rpx;
			border-bottom: 1px solid $page-color-light;
			padding-bottom: 30rpx;
			justify-content: flex-start;

			.masterTime {
				font-size: 22rpx;
				color: $font-color-light;
			}

			.masterName {
				color: $font-color-base;
				font-size: 28rpx;
				font-weight: bold;
			}

			.imgUser {
				width: 120rpx;
				height: 120rpx;
				border-radius: 100rpx;
			}
		}

		.flex_item {
			margin: 0 30rpx;
			color: $font-color-base;
			font-size: $font-base;

			&.zhil {
				font-size: 28rpx !important;
				padding: 15rpx 0;
			}
		}
	}

	.actionImgShow {
		height: 100vh;
		width: 750rpx;
	}

	.alertBox {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background-color: #FFF;
		height: 1000rpx;

		.popupTitle {
			font-size: $font-lg;
			position: relative;
			font-weight: bold;
			line-height: 1;
			height: 130rpx;
			line-height: 130rpx;
			text-align: center;

			.exitIcon {
				width: 50rpx;
				position: absolute;
				top: 40rpx;
				right: 50rpx;
			}
		}

		.list {
			height: 870rpx;
			padding: 0 50rpx;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 100rpx;
			}

			.alertButtom {
				width: 160rpx;
				height: 60rpx;
				color: #FFFFFF;
				border-radius: 100rpx;
				font-size: 24rpx;
				line-height: 60rpx;
				text-align: center;

				&.bgGree {
					background-color: $color-green;
				}

				&.bgYellow {
					background-color: $uni-color-warning;
				}

				&.bgGray {
					background-color: $font-color-disabled;
				}
			}

			.nameBox {
				.name {
					font-size: $font-base;
					color: $font-base;
				}

				.ordNum {
					font-size: 22rpx;
					color: $font-color-light;
				}
			}
		}
	}

	.itemBox {
		margin: 0 $page-row-spacing;
		margin-bottom: $page-row-spacing;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding-top: 30rpx;
		padding-bottom: 10rpx;

		.item {
			justify-content: flex-start;
			padding: 30rpx;
			padding-top: 0;
			font-size: $font-base;

			.title {
				flex-shrink: 0;
				color: $font-color-base;
			}

			.content {
				color: $font-color-light;

				.img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 20rpx;
				}

				.icon {
					width: 32rpx;
				}
			}

		}
	}

	.buttom {
		justify-content: space-around;
		padding-top: 50rpx;

		.btn {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 99rpx;
			color: #FFFFFF;
			flex-grow: 1;
			margin: 0 30rpx;

			&.success {
				background-color: $color-green;
			}

			&.action {
				background-color: $font-color-disabled;
			}

			// &.warning {
			// 	background-color: $uni-color-warning;
			// }
		}

		.borderGray {
			border: 1px solid $font-color-disabled;
			color: $font-color-disabled;
		}

		.borderGreed {
			border: 1px solid $color-green;
			color: $color-green;
		}
	}
</style>