repairForMiniProgram/pages/index/index.vue

<template>
	<view>
		<view>
			<!-- 头部 -->
			<view class="head">

				<!-- 定位 -->
				<view class="location" v-if="studentCampus">
					所属校区：{{studentCampus}}
				</view>

				<!-- 公告 -->
				<view class="notice">
					<view class="notice-content" style="margin-top: 16rpx;">
						<view class="notice-first">公告<image src="../../static/horn.svg" mode=""></image>：<text
								class="notice-second" selectable space="nbsp">{{notices}}</text></view>
					</view>
				</view>
			</view>

			<!-- 跳转导航 -->
			<view class="nav">
				<navigator url="../list/list" class="nav1">
					<image src="../../static/repair.svg"></image>
					<view>前往报修</view>
				</navigator>
				<navigator url="../personal-information/personal-information" class="nav2">
					<image src="../../static/person.svg"></image>
					<view>修改信息</view>
				</navigator>
			</view>

			<!-- 报修订单 -->
			<view class="content">
				<!-- 导航与报修单间的灰色背景 -->
				<view class="point"></view>
				<view class="list-text" v-if="Studentlist.length!==0">
					----报修订单----
				</view>
				<view class="list-text" v-else>
					----暂无数据----
				</view>

				<!-- 订单 -->
				<view class="content-list" v-for="(item,index) in Studentlist" :key="index"
					@click="handleLookInfo(item)">
					<text class="num">订单号：{{item.orderId}}</text>
					<text class="newList">{{item.orderStatus==0?'等待后台分配':''}} </text> <!-- 新订单 -->
					<text class="waitList">{{item.orderStatus==1?'等待维修工接单':''}} </text> <!-- 待接单 -->
					<text class="readyList">{{item.orderStatus==2?'维修工已接单':''}} </text> <!-- 已接单 -->
					<text class="finishList">{{item.orderStatus==3?'维修完成':''}} </text> <!-- 维修完成 -->
					<text class="refuseList">{{item.orderStatus==4?'已退单':''}} </text> <!-- 已退单 -->
					<view class="list">
						<view>
							故障类型：{{item.repairsFault.faultName}}
						</view>
						<view>
							维修人员：{{item.repairsWork.workName==null?"等待分配":item.repairsWork.workName}}
						</view>
						<view>
							提交时间：{{item.orderCommitTime}}
						</view>
						<view>
							{{item.orderStatus==3?'完成时间：':'预约时间：'}}{{item.orderStatus==3?item.orderCompleteTime:item.orderExpectedTime}}
						</view>
					</view>
					<button @click.stop="appraise(item)" v-if="item.orderStatus == 3 && item.orderAdvice == null"
						style="width: 185rpx; height: 36rpx; background-color:rgba(42, 130, 228, 1); color: white;font-size: 24rpx; border-radius: 32rpx;">
						维修后评价
					</button>
					<view class="sug">{{(item.orderStatus == 3 && item.orderAdvice !== null)?'已评价':''}}</view>
					<button class="sug_left" v-if="item.orderStatus == 0" @click.stop="handleDelete(item)">撤回订单</button>
				</view>

				<view class="isOver" v-if="flag">
					----我是有底线的----
				</view>
			</view>
		</view>

		<!-- 查看详情弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup_view" v-if="info">
				<view class="popup_title">订单信息</view>
				<view class="popup_item">订单号：{{info.orderId}}</view>
				<view class="popup_item">报修类型：{{info.repairsFault.faultName}}</view>
				<view class="popup_item">宿舍楼栋：{{info.repairsStudent.dormNumber}}</view>
				<view class="popup_item">提交时间：{{info.orderCommitTime}}</view>
				<view class="popup_item">预约时间：{{info.orderExpectedTime}}</view>
				<view class="popup_item">联系电话：{{info.repairsStudent.studentPhone}}</view>
				<view class="popup_item">备选电话：{{info.repairsStudent.studentOtherPhone}}</view>
				<view class="popup_item" v-if="info.orderBack">退回原因：{{info.orderBack}}</view>
				<view class="popup_item" v-if="info.orderAdvice">修后评价：{{info.orderAdvice}}</view>
				<view class="popup_img">
					<text>故障图片：</text>
					<image v-for="(item,index) in info.orderImages" :key="index"
						:src="item?item:'../../static/no-image.gif'" mode="aspectFit" @click="handleBig(index)"></image>
				</view>
			</view>
		</uni-popup>

		<!-- 图片放大弹窗 -->
		<uni-popup ref="popup2">
			<view class="popup_view" v-if="info" style="padding: 0px;">
				<image v-for="(item,index) in info.orderImages" :key="index"
					:src="item?item:'../../static/no-image.gif'" v-if="index==activeIndex">
				</image>
			</view>
		</uni-popup>

		<!-- 修改评价遮罩层 -->
		<view class="box" v-if="dialogShow">
			<view id="dialog">
				<view class="replace">
					修改评价
				</view>
				<view class="uni-textarea">
					<textarea v-model="inputcontent" placeholder-style="color:rgba(229, 229, 229, 0.7)" cols="20"
						row="2" placeholder="请输入内容" />
				</view>
				<view class="cancle" @click="cancle">
					取消
				</view>
				<view class="agree" @click="agree">
					确定
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 6,
				total: "",
				dialogShow: false,
				flag: false,
				notices: "",
				Studentlist: [],
				value: [],
				inputcontent: '',
				orderId: null,
				info: null,
				activeIndex: null,
				studentCampus: null,
			}
		},
		onLoad() {
			let res = uni.getStorageSync("student")
			if (res.studentCampus == 0) {
				this.studentCampus = "黄家湖校区"
			} else if (res.studentCampus == 1) {
				this.studentCampus = "墨轩湖校区"
			}
			this.getNotice()
			this.getStudentlist()
		},

		methods: {
			// 获取最新公告数据
			async getNotice() {
				let res = await this.$myRequest({
					method: "post",
					url: `/notice/releaseNotice`,
				})
				// console.log(res)
				if (res.status == 200) {
					this.notices = res.data.noticeContent
				} else {
					console.log("获取最新公告数据失败")
				}
			},

			// 获取学生订单
			async getStudentlist() {
				let res = await this.$myRequest({
					method: "post",
					url: `/order/queryAllOrderByStudentId?pageNum=${this.pageNum}&pageSize=${this.pageSize}`
				})
				// console.log(res)
				if (res.status == 200) {
					this.total = res.data.total
					this.Studentlist = [...this.Studentlist, ...res.data.list]
					uni.hideLoading()
				} else {
					console.log("获取订单数据失败")
				}
			},

			// 下拉刷新
			onPullDownRefresh() {
				this.flag = false
				this.Studentlist = []
				this.pageNum = 1
				this.getStudentlist()
				this.getNotice()
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			// 上拉加载+结尾语句显示
			onReachBottom() {
				if (this.Studentlist.length < this.total) {
					uni.showLoading({
						title: "数据加载中"
					})
					this.pageNum++
					this.getStudentlist()
				} else {
					this.flag = true
				}
			},
			// 点击维修后评价按钮回调
			appraise(item) {
				this.dialogShow = true
				this.inputcontent = ''
				this.orderId = item.orderId
			},
			// 弹窗确定按钮回调
			agree() {
				if (this.inputcontent == '') {
					uni.showToast({
						title: '请输入内容',
						icon: 'none',
						duration: 2000,
					})
				} else {
					this.dialogShow = false
					this.getsuggest()
				}
			},

			// 弹窗取消按钮回调
			cancle() {
				this.dialogShow = false
				this.inputcontent = ''
				uni.showToast({
					title: '已取消评价',
					icon: 'none',
					duration: 2000
				})
			},

			// 修后评价请求
			async getsuggest() {
				let res = await this.$myRequest({
					method: "post",
					url: `/order/updateOrderAdvice?orderAdvice=${this.inputcontent}&orderId=${this.orderId}`,
				})
				// console.log(res)
				if (res.status == 200) {
					uni.showToast({
						title: "评价成功",
						icon: "success"
					})
					this.Studentlist = []
					this.pageNum = 1
					uni.pageScrollTo({
						scrollTop: 0
					});
					this.getStudentlist()
				} else {
					console.log("修后评价请求失败")
				}
			},

			// 查看详情回调
			async handleLookInfo(item) {
				this.info = null
				this.$refs.popup.open()
				if (item.orderStatus == 0 || item.orderStatus == 4) {
					let res = await this.$myRequest({
						method: "post",
						url: `/order/queryByOrderIdNotWork?orderId=${item.orderId}`,
					})
					// console.log(res)
					this.$nextTick(() => {
						this.info = res.data
						this.info.orderImages = this.info.orderImages.split(";")
					})
				} else {
					let res = await this.$myRequest({
						method: "post",
						url: `/order/queryByOrderId?orderId=${item.orderId}`,
					})
					// console.log(res)
					this.$nextTick(() => {
						this.info = res.data
						this.info.orderImages = this.info.orderImages.split(";")
					})
				}
			},

			// 点击图片放大
			handleBig(index) {
				this.activeIndex = index
				this.$refs.popup2.open()
			},

			// 撤回订单请求
			handleDelete(item) {
				uni.showModal({
					title: '提示',
					content: '确定撤回订单吗？',
					success: async (res) => {
						if (res.confirm) {
							let res = await this.$myRequest({
								url: `/order/deleteOrderById?orderId=${item.orderId}`,
								method: "post"
							})
							// console.log(res)
							if (res.status == 200) {
								uni.showToast({
									title: "撤回成功",
									icon: "success"
								})
								this.Studentlist = []
								this.pageNum = 1
								uni.pageScrollTo({
									scrollTop: 0
								});
								this.getStudentlist()
							} else {
								uni.showToast({
									title: "撤回失败",
									icon: "error"
								})
							}
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}
		},
	}
</script>

<style lang="scss">
	#dialog {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 80%;
		height: 180px;
		text-align: center;
		margin: auto;
		background-color: white;
		border-radius: 10px;
	}

	textarea {
		height: 100px;
		width: 90%;
		margin-top: 5px;
		margin-left: 5%;
		text-align: left;
		border: 1px solid rgba(229, 229, 229, 0.62);
		font-size: 14px;
	}

	.box {
		position: fixed;
		top: 0;
		left: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
	}

	.replace {
		width: 100%;
		height: 16%;
		margin-top: 4%;
		font-size: 28rpx;
		color: rgba(80, 80, 80, 1);
	}

	.cancle {
		position: absolute;
		top: 78%;
		width: 50%;
		height: 22%;
		line-height: 2;
		background-color: white;
		border-radius: 0 0 0 16rpx;
		border-top: 1px solid rgba(229, 229, 229, 0.62);
		border-right: 1px solid rgba(229, 229, 229, 0.62);
	}

	.agree {
		position: absolute;
		top: 78%;
		width: 50%;
		height: 22%;
		right: 0;
		line-height: 2;
		background-color: white;
		border-top: 1px solid rgba(229, 229, 229, 0.62);
		border-left: 1px solid rgba(229, 229, 229, 0.62);
		border-radius: 0 0 16rpx 0;
	}

	.head {
		position: relative;
		height: 350rpx;
		background-color: rgba(42, 130, 228, 1);
		border-radius: 0rpx 0rpx 20rpx 20rpx;
	}

	.location {
		position: absolute;
		top: 38rpx;
		left: 260rpx;
		font-size: 24rpx;

		color: rgba(255, 255, 255, 1);
	}

	.notice {
		position: absolute;
		margin-top: 126rpx;
		margin-left: 18rpx;
		/* top: 63px;
		left: 11px; */
		width: 716rpx;
		height: 110rpx;
		font-size: 24rpx;
		background-color: rgba(255, 255, 255, 0.21);
		border-radius: 22rpx 20rpx 20rpx 20rpx;
	}

	.notice-first {
		margin-left: 20rpx;
		color: rgba(255, 255, 255, 1);
	}

	.notice-first image {
		height: 28rpx;
		width: 28rpx;
		font-size: 28rpx;
		vertical-align: bottom;
	}

	.notice-second {
		float: right;
		margin-right: 48rpx;
		color: rgba(255, 255, 255, 1);
		width: 76%;
		height: 70rpx;
	}

	.nav {
		position: absolute;
		top: 282rpx;
		width: 718rpx;
		height: 236rpx;
		margin-left: 16rpx;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 28rpx 28rpx 0rpx 0rpx;
	}

	.nav1 image {
		position: absolute;
		left: 218rpx;
		top: 70rpx;
		width: 48rpx;
		height: 48rpx;
		font-size: 48rpx;
	}

	.nav1 view {
		position: absolute;
		left: 200rpx;
		top: 136rpx;
		font-size: 24rpx;
	}

	.nav2 image {
		position: absolute;
		left: 450rpx;
		width: 48rpx;
		height: 48rpx;
		font-size: 48rpx;
		top: 72rpx;
	}

	.nav2 view {
		position: absolute;
		left: 426rpx;
		top: 136rpx;
		font-size: 24rpx;
	}

	.nav .nav1 {
		width: 108rpx;
		height: 120rpx;
		margin-top: 64rpx;
		margin-left: 186rpx;
	}

	.nav .nav2 {
		width: 108rpx;
		height: 120rpx;
		margin-top: -126rpx;
		margin-left: 420rpx;
	}

	.content {
		margin-top: 170rpx;
		height: 1200rpx;
		background-color: rgba(255, 255, 255, 1);
	}

	.point {
		height: 14rpx;
		background-color: rgba(229, 229, 229, 0.62);
	}

	.list-text {
		margin-top: 30rpx;
		font-size: 24rpx;
		text-align: center;
		color: rgba(80, 80, 80, 0.27);
	}

	.content-list {
		position: relative;
		height: 290rpx;
		margin-top: 22rpx;
		padding-left: 20rpx;
		font-size: 24rpx;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		background-color: rgba(229, 229, 229, 0.62);
	}

	.num {
		float: left;
		margin-left: 14rpx;
		margin-top: 18rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: rgba(42, 130, 228, 1);
	}

	.newList {
		float: right;
		margin-top: 20rpx;
		margin-right: 32rpx;
		color: rgba(255, 141, 26, 1);
	}

	.readyList {
		float: right;
		margin-top: 20rpx;
		margin-right: 4rpx;
		color: rgba(212, 48, 48, 1);
	}

	.waitList {
		float: right;
		margin-top: 20rpx;
		margin-right: 4rpx;
		color: rgba(212, 48, 48, 1);
	}

	.finishList {
		float: right;
		margin-top: 20rpx;
		margin-right: 4rpx;
		color: yellowgreen;
	}

	.refuseList {
		float: right;
		margin-top: 20rpx;
		margin-right: 4rpx;
		color: rgba(212, 48, 48, 1);
	}

	.list {
		float: left;
		margin-left: -328rpx;
		margin-top: 72rpx;
		font-size: 28rpx;
	}

	.content-list button {
		position: absolute;
		bottom: 20rpx;
		right: 42rpx;
		line-height: 36rpx;
	}

	.content-list .sug {
		position: absolute;
		bottom: 30rpx;
		right: 42rpx;
		color: #333333;
	}

	.content-list .sug_left {
		position: absolute;
		bottom: 16rpx;
		left: -450rpx;
		width: 160rpx;
		height: 36rpx;
		font-size: 24rpx;
		border-radius: 32rpx;
		background-color: orange;
	}

	.isOver {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 24rpx;
		color: rgba(80, 80, 80, 0.27);
	}

	.popup_view {
		box-sizing: border-box;
		width: 600rpx;
		height: 860rpx;
		padding: 50rpx;
		overflow-y: auto;

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

		.popup_title {
			font-size: 20px;
		}

		.popup_item {
			margin: 20rpx 0;
		}

		.popup_img {
			display: flex;

			image {
				margin: 0 6rpx;
				width: 100rpx;
				height: 200rpx;
				background-color: #eee;
			}
		}
	}
</style>