GuangYuYuan-app/pages/my/js_order.vue

<template>
	<view class="order">
		<view class="orderStatus">
			<view v-for="(item,index) in status" :class="checkedIndex === index ? 'active' : ''" :key="index"
				@click="statusTap(item.code,index)">{{item.info}}
			</view>

		</view>
		<!-- <view class="list"> -->
		<mescroll-uni class="list" :fixed="false" ref="mescrollRef" @up="getList" @init="mescrollInit">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="lTitle" @click="goDetails(item.cId)">
					<view style="font-weight: bold;">上门时间：{{item.dtCreateTime}}</view>
					<!-- <view class="status">{{item.nStatus === 0 ? "待接单" : item.nStatus === 1 ? "服务中": item.nStatus === 2 ? "待评价": item.nStatus === 3 ? "已完成": item.nStatus === -1 ? "待付款" : item.nStatus === -2 ? "已取消" :'已拒绝'}}</view>-->
					<view class="status">{{item.statusName}}</view>
				</view>
				<view class="cont" @click="goDetails(item.cId)">

					<view>客户：{{item.cNickName}}</view>
					<view>项目：{{item.cGoods[0].cTitle}}</view>
				</view>
				<!-- <view class="cont" @click="goDetails(item.cId)">
					<view>订单金额：</view>
					<view style="color: #333;font-weight: bold;">￥{{item.totalPrice}}</view>
				</view> -->
				<view class="cont" @click="goDetails(item.cId)">
					<view>下单时间：{{item.dtCreateTime}}</view>
					<!-- <view style="color: #333;font-weight: bold;">￥{{item.totalPrice}}</view> -->
				</view>
				<!-- <view class="btn" v-if="item.nStatus < 1"> -->
				<view class="btn">
					<view class="count_down">
						<span>￥</span>{{item.totalPrice}}
						<!-- 剩余<u-count-down :timestamp="item.remainingTime" @end="getList"  v-if="item.dtCreateTime>0"></u-count-down> -->
					</view>
					<view class="button">
						<!-- <view class="btn" v-if="item.nStatus === 0"> -->
						<view class="" v-if="item.nStatus === 0">

							<text class="refuse" @click="refuse(item.cId)">拒绝接单</text>
							<text class="pay" @click="scheduling(item.cId)">接单</text>
						</view>
						<view v-if="item.nStatus === 1">
							<text class="pay" @click="depart(item.cId,item.orderNo)">出发</text>
						</view>
						<view v-if="item.nStatus === 6">
							<text class="pay" @click="arriveOderLocation(item.cId,item.orderNo)">到达</text>
						</view>
						<view v-if="item.nStatus === 2">
							<text class="pay" @click="enterService(item.cId,item.orderNo)">开始服务</text>
						</view>
						<view v-if="item.nStatus === 3">
							<text class="pay" @click="complete(item,item.cId,item.orderNo)">完成订单</text>
						</view>
						<!-- </view> -->
						<!-- 	<text class="cancel" @click="cancle(item.cId)" v-if="item.nStatus > -2 && item.nStatus < 1">取消订单</text>
						<text class="pay" @click="nowYuyue(item,item.cId,item.dTotalMoney,item.remainingTime)"
							v-if="item.nStatus == -1 && item.nStatus < 1 ">支付订单</text>
						<text class="pay" @click="goEvaluate(item)" v-if="item.nStatus == 4">去评价</text>
						<text class="pay" @click="deleteOrder(item.cId)" v-if="item.nStatus <= -2 || item.nStatus == 5">删除订单</text> -->
					</view>
				</view>
				<!-- <view class="btn" v-if="item.nStatus <= -2 || item.nStatus == 5">
						<text @click="deleteOrder(item.cId)">删除订单</text>
					</view> -->
			</view>
			<!-- 			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="lTitle" @click="goDetails(item.cId)">
					<view style="font-weight: bold;">下单时间：{{item.dtCreateTime}}</view>
					<view class="status">{{item.statusName}}</view>
				</view>
				<view class="cont" @click="goDetails(item.cId)">
					<view>商家：{{item.js.cName}}</view>
					<view>项目：{{item.cGoods[0].cTitle}}</view>
				</view>
				<view class="cont" @click="goDetails(item.cId)">
					<view>订单金额：</view>
					<view style="color: #333;font-weight: bold;">￥{{item.totalPrice}}</view>
				</view>
				<view class="btn" v-if="item.nStatus === 0">
					<span @click="scheduling(item.cId)">接单</span>
					<span @click="refuse(item.cId)">拒绝接单</span>
				</view>
				<view class="btn" v-if="item.nStatus === 1">
					<span @click="depart(item.cId,item.orderNo)">出发</span>
				</view>
				<view class="btn" v-if="item.nStatus === 6">
					<span @click="arriveOderLocation(item.cId,item.orderNo)">到达</span>
				</view>
				<view class="btn" v-if="item.nStatus === 2">
					<span @click="enterService(item.cId,item.orderNo)">开始服务</span>
				</view>
				<view class="btn" v-if="item.nStatus === 3">
					<span @click="complete(item,item.cId,item.orderNo)">完成订单</span>
				</view>

			</view> -->
			<!-- </view> -->
		</mescroll-uni>
		<view class="refuse_popup" v-if="isRefuse">
			<view class="histroy">
				<view class="title">
					请输入拒绝接单原因
				</view>
				<view class="content">
					<input type="text" maxlength="10" v-model="reasonRefusal" placeholder="请输入拒绝原因,最多10个字" />
				</view>
				<view class="btn_box">
					<view class="btn" @click="cancel">
						取消
					</view>
					<view class="btn success" @click="refuseSubmit">
						提交
					</view>
				</view>
			</view>
		</view>
		<view class="arrive" v-if="isArrive">
			<view class="photo_box">
				<view class="title">
					到达地点
				</view>
				<view class="photo">
					<view class="small_title">
						请拍摄到达地点主要建筑物
					</view>
					<view class="upload_box">
						<u-upload class="upload_popup" :action="uploadUrl" capture="camera" :file-list="arrivalPhoto"
							@on-success="photograph" @on-remove="remove" :header="header" :max-count="1" accept="image/*" :show-upload-list="false"/>
					</view>

				</view>
				<view class="btn_box">
					<view class="cancel" @click="isArrive = false">
						取 消
					</view>
					<view class="btn" @click="arrive">
						提 交
					</view>
				</view>
			</view>
		</view>
		<view class="arrive" v-if="isSchedule">
			<view class="photo_box">
				<view class="title">
					结束原因
				</view>
				<view class="photo">
					<view class="small_title">
						提前结束，请填写原因
					</view>
					<!-- <input type="text" placeholder="请输入提前结束原因" v-model="timeoutCause" /> -->
					<view class="textarea">

						<textarea placeholder="请输入提前结束原因" type="textarea" v-model="timeoutCause"
							style="width: 100%;height: 100%;font-size: 26rpx;" id="" cols="30" rows="10"></textarea>
					</view>

				</view>
				<view class="btn_box">
					<view class=" cancel" @click="isSchedule = false">
						取 消
					</view>
					<view class="btn" @click="reasonSubmit">
						提 交
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		statusList,
		orderDeatails,
		getInfo,
		engineDetail,
		confirmOrder,
		takeOrder,
		arriveOderLocation,
		enterService,
		refuse,
		depart,
		imgUpload,
		reach,
		confirm
	} from '../../api/index.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				isRefuse: false,
				reasonRefusal: '',
				refusecId: '',
				status: [],
				checkedIndex: 0,
				list: [],
				nStatus: 0,
				money: 0,
				dTotalMoney: 0,
				jsId: '',
				isArrive: false,
				arrivePhoto: '',
				fileList: [],
				// uploadUrl: 'https://test.baoxianzhanggui.com/nightFragrance/common/upload',
				uploadUrl:'https://city.baoxianzhanggui.com/nightFragrance/common/upload',
				arrivalPhoto: [],
				form: {},
				isSchedule: false,
				timeoutCause: '',
				cId: '',
				orderNo: ''
			}
		},
		methods: {
			refuse(cId) {
				this.isRefuse = true
				this.refusecId = cId
			},
			refuseSubmit() {
				var data = {
					cId: this.refusecId,
					reasonRefusal: this.reasonRefusal.trim()
				}
				if (data.reasonRefusal == '') {
					uni.showToast({
						title: '拒绝原因不能为空',
						icon: 'none'
					})
					return
				}
				refuse(data).then(res => {
					if (res.data.code == 200) {
						this.list = []
						uni.showToast({
							title: '已拒绝',
							icon: 'none'
						})
						// this.getList()
						this.mescroll.resetUpScroll()
						this.isRefuse = false,
							this.reasonRefusal = ''
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			cancel() {
				this.isRefuse = false
				this.reasonRefusal = ''
			},
			// 开始服务
			enterService(cId, orderNo) {
				var data = {
					cId: cId
				}
				enterService(data).then(res => {
					if (res.data.code == 200) {
						// this.list = []
						// this.getList()
						this.mescroll.resetUpScroll()
						uni.showToast({
							title: '服务中',
						})
						this.$router.go(0)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			//出发
			depart(cId, orderNo) {
				console.log('+++++++')
				let that = this
				uni.getLocation({
					type: 'wgs84',
					isHighAccuracy: true,
					accuracy: 'best',
					success: (res) => {
						let data = {
							cId: cId,
							departLatitude: res.latitude,
							departLongitude: res.longitude
						}
						depart(data).then(res => {
							if (res.data.code == 200) {
								uni.showToast({
									title: '已出发',
								})
								that.$router.go(0)
							} else {
								uni.showToast({
									title: res.data.msg,
								})
								that.$router.go(0)
							}
						})
					},
					fail: (res) => {}
				});
			},
			// 到达
			arriveOderLocation(cId, orderNo) {
				this.isArrive = true
				this.form.cId = cId
				this.form.orderNo = orderNo
				let that = this
				uni.getLocation({
					type: 'wgs84',
					isHighAccuracy: true,
					accuracy: 'best',
					success: (res) => {
						that.form.arrivalLatitude = res.latitude
						that.form.arrivalLongitude = res.longitude
					},
					fail: (res) => {}
				});
			},
			//上传到达图片
			photograph(response) {
				this.form.arrivalPhoto = response.fileName
			},
			remove(index) {
				this.arrivalPhoto.splice(index, 1);
			},
			//提交到达拍照
			arrive() {
				if (!this.form.arrivalPhoto) {
					uni.showToast({
						title: '请上传到达照片',
						icon: 'none'
					})
					return
				} else {
					reach(this.form).then(res => {
						this.isArrive = false
						if (res.data.code == 200) {
							uni.showToast({
								title: '已到达',
								icon: 'none'
							})
							// this.getList()
							// this.mescroll.resetUpScroll()
							this.$router.go(0)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
				}
			},
			//接单
			scheduling(cId) {
				var data = {
					cId: cId
				}
				takeOrder(data).then(res => {
					if (res.data.code == 200) {
						// this.list = []
						uni.showToast({
							title: '已接单',
						})
						// this.getList()
						this.$router.go(0)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			//完成订单
			complete(item, cId, orderNo) {
				this.cId = cId
				this.orderNo = orderNo
				const now = new Date(+new Date() + 8 * 3600 * 1000);
				const isoDateTime = now.toISOString(); // ISO 8601 格式
				let nowtime = new Date(isoDateTime.slice(0, 19))
				let starttime = new Date(item.startTime) //开始时间
				let differenceInMs = nowtime - starttime //剩余时间
				let differenceInMinutes = differenceInMs / (1000 * 60);
				if (differenceInMinutes > item.cGoods[0].nMinute) {
					var id = {
						cId: cId,
						orderNo: orderNo
					}
					let that = this
					uni.showModal({
						title: '提示',
						content: '确认服务完成？',
						success: function(res) {
							if (res.confirm) {
								confirmOrder(id).then(res => {
									if (res.data.code == 200) {
										// this.list =[]
										uni.showToast({
											title: '已完成',
										})
										// location.reload(true);
										that.$router.go(0)
										// this.getList()
									} else {
										uni.showToast({
											title: res.data.msg,
										})
										// location.reload(true);
										// that.$router.go(0)
									}
								})
							}
						}
					});
				} else {
					this.isSchedule = true
				}
			},
			//填写提前结束原因
			reasonSubmit() {
				let data = {}
				data.cId = this.cId
				data.orderNo = this.orderNo
				data.timeoutCause = this.timeoutCause
				if (data.timeoutCause == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写提前完成原因',
					})
					return
				} else {

					confirm(data).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '已完成',
							})
							location.reload(true);
						} else {
							uni.showToast({
								title: res.data.msg,
							})
						}
					})
				}
			},
			getList(page) {
				var openid = {
					cJsId: this.jsId,
					nStatus: this.nStatus,
					current: page.num,
					size: page.size,
				}
				orderDeatails(openid).then(res => {
					var charToRemove = "T";
					res.data.data.records.forEach(element => {
						element.dtCreateTime = element.dtCreateTime.replace(charToRemove, ' ')
					});
					this.mescroll.endSuccess(res.data.data.records.length);
					this.list = this.list.concat(res.data.data.records)

				})
			},
			statusTap(code, index) {
				this.checkedIndex = index,
					this.list = []
				this.nStatus = code
				// this.getList()
				this.mescroll.resetUpScroll()
			},
			getStatus() {
				statusList().then(res => {
					this.status = res.data.data,
						this.nStatus = ''
				})
			},
			goDetails(cId) {
				uni.navigateTo({
					// url: '../../order/detail/detail?name=商户订单&cid=' + e.currentTarget.dataset.id,
					url: '../order/order_detail?name=商户订单&cid=' + cId
				})
			},
			getInfo() {
				getInfo().then(res => {
					this.money = res.data.data.dBalance
				})
			},
			// 商户详情
			getDetails() {
				var that = this
				var openid = {
					cOpenId: uni.getStorageSync('wx_copenid')
				}
				engineDetail(openid).then(res => {
					this.jsId = res.data.data.id
					this.getStatus();
				})
			},
		},
		mounted() {
			// 在页面加载时获取Token，可以从本地缓存中获取
			this.token = uni.getStorageSync('access-token'); // 假设token保存在本地缓存中
			this.mescroll.optDown.use = false
		},
		computed: {
			header() {
				return {
					Authorization: `tf: ${this.token}`, // 携带Token的请求头
				};
			},
		},
		onLoad() {
			this.checkedIndex = 0
			this.getInfo()
			this.getDetails()
			this.mescroll.resetUpScroll()
		}
	}
</script>

<style lang="scss" scoped>
	/* pages/order/order.wxss */
	.order {
		background-color: rgb(248, 248, 248);
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: fixed;

		.arrive {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			position: fixed;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.photo_box {
				width: 630rpx;
				// height: 652rpx;
				background-color: #fff;
				// padding: 50rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				border-radius: 24rpx;
				overflow: hidden;

				.title {
					width: 100%;
					height: 92rpx;
					background: #E6F8F7;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.photo {
					width: 100%;
					flex: 1;
					overflow: hidden;
					padding: 40rpx 32rpx;
					box-sizing: border-box;

					.small_title {
						width: 100%;
						font-size: 28rpx;
						text-align: center;
					}

					.textarea {
						width: 566rpx;
						height: 292rpx;
						background: #F8F8F8;
						border-radius: 16rpx;
						padding: 20rpx 24rpx;
						box-sizing: border-box;
						margin-top: 32rpx;
						font-size: 26rpx;
					}

					.upload_box {
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 32rpx;
						// margin-bottom: 40rpx;
					}
				}

				.btn_box {
					width: 100%;
					height: 116rpx;
					background: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: space-around;
					border-top: 2rpx solid #EEEEEE;

					.btn {
						width: 225rpx;
						height: 68rpx;
						// height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						background: linear-gradient(90deg, #1AD7CE 0%, #21C9C1 100%);
						border-radius: 44rpx;
						color: #fff;
					}

					.cancel {
						width: 225rpx;
						height: 68rpx;
						border-radius: 106rpx;
						border: 2rpx solid #BBBBBB;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}

	.refuse_popup {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;

		.histroy {
			width: 70%;
			height: 160px;
			margin-top: 500rpx;
			background-color: #fff;
			border-radius: 10px;
			padding: 20px;
			box-sizing: border-box;

			.title {
				width: 100%;
				// padding: 10px ;
				text-align: center;
				box-sizing: border-box;
				margin-bottom: 50rpx;
			}

			.content {
				margin-bottom: 20px;

				input {
					display: block;
					border-bottom: 1px solid #ccc;
				}
			}

			.btn_box {
				width: 100%;
				display: flex;
				justify-content: space-around;

				.btn {
					width: 30%;
					height: 30px;
					background-color: #c8c9cc;
					text-align: center;
					line-height: 30px;
					border-radius: 5px;
				}

				.success {
					background: linear-gradient(to right, #35c99d, #27aea7);
					color: #fff;
				}
			}
		}
	}

	.orderStatus {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 30rpx;
		// padding: 20rpx 0;
		box-sizing: border-box;
		z-index: 999;
		background: radial-gradient(circle, #fcfdff, #fcfdff);

		view {
			padding: 0px 10rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding-bottom: 12rpx;
			// border-radius: 8rpx;
		}

		.active {
			font-size: 30rpx;
			color: #03C8BE;
			font-weight: 400;
			// background-color: #2cb7d4;
			border-bottom: 1px solid #03C8BE;
		}
	}

	.list {
		flex: 1;
		overflow-y: auto;
		background: linear-gradient(180deg, #C1FFF8 0%, #B8FFF3 34%, #F5FFFF 100%);
		padding: 32rpx;
		box-sizing: border-box;

		.item {
			// margin: 0 20rpx;
			width: 100%;
			// height: 292rpx;
			padding: 24rpx 32rpx;
			margin-bottom: 10rpx;
			font-size: 28rpx;
			margin-bottom: 28rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0px 4px 12px 0px rgba(88, 209, 187, 0.1);
			border-radius: 24px 24px 24px 24px;

			.lTitle {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #eeeeee;
				margin-bottom: 10rpx;
				padding-bottom: 20rpx;
				font-size: 28rpx;

				.status {
					color: #03C8BE;
				}
			}

			.cont {
				color: rgb(162, 162, 162);
				font-size: 26rpx;
				// display: flex;
				// justify-content: space-between;
				line-height: 45rpx;
			}

			.btn {
				height: 48rpx;
				// text-align: right;
				// padding-top: 20rpx;
				margin-top: 20rpx;
				// margin-bottom: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.count_down {
					// width: 41%;
					// text-align: left;
					font-size: 26rpx;
					color: #F53E54;

					span {
						font-size: 20rpx;
					}
				}

				.button {
					display: flex;
					align-items: center;

					.pay {
						display: inline-block;
						background-color: rgb(46, 188, 215);
						color: #fff;
						margin-left: 20rpx;
						padding: 5rpx 30rpx;
						height: 48rpx;
						line-height: 48rpx;
						background: linear-gradient(135deg, #1AD8CF 0%, #21C8C0 100%);
						border-radius: 98rpx 98rpx 98rpx 98rpx;
					}

					.refuse {
						// width: 152rpx;
						display: inline-block;
						padding: 5rpx 30rpx;
						height: 48rpx;
						height: 48rpx;
						border-radius: 98rpx;
						background: linear-gradient(135deg, #FD8997 0%, #ED5769 100%);
						color: #fff;
					}
				}


			}
		}
	}

	.nodate {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 200rpx 0;
		text-align: center;

		image {
			width: 300rpx;
			margin-bottom: 30rpx;
		}
	}
</style>