GuangYuYuan-app/pages/order/order_detail.vue

<template>
	<view class="details">
		<view class="content">
			<view class="order_status">
				<view class="status_center">
					<view class="status">
						订单{{details.statusName}}
						<text class="money">
							￥<text>{{details.dTotalMoney}}</text>
						</text>
					</view>
					<view class="time" v-if="nStatus == -3">
						拒绝原因: {{details.reasonRefusal}}
					</view>
					<view class="time" v-else>
						上门时间:{{details.reachTime}}
					</view>
					<view class="merchant">
						服务商家：{{details.js.cNickName}}<br />
						<text>商家电话：{{details.jsPhone}}</text>
					</view>
				</view>
			</view>
			<view class="orderinfo">
				<view class="order_box">
					<view class="title"><text></text> 服务项目</view>
					<view class="project" v-for="(item,index) in details.cGoods" :key="index">
						<view class="project_left">
							<img :src="$globalData.publicUrl + item.cCover" alt="" />
						</view>
						<view class="project_right">
							<text class="name">项目名称：{{item.cTitle}}</text>
							<text class="price"> 项目单价：{{item.dPrice}}</text>
							<view class="total">
								数量：{{item.number}}
								<span class="total_price">￥{{details.totalPrice}}</span>
							</view>
						</view>
					</view>
				</view>

				<!-- <view v-for="(item,index) in details.cGoods" :key="index" class="items">
					<view class="img">
						<image :src="$globalData.publicUrl + item.cCover" mode=""></image>
					</view>
					<view class="right">
						<view class="">
							项目名称：{{item.cTitle}}
						</view>
						<view class="">
							项目单价：{{item.dPrice}}
						</view>
						<view class="">
							数量：{{item.number}}
						</view>
					</view>
				</view>
				<view class="conts">合计：{{details.totalPrice}}</view> -->
			</view>
			<!-- 			<view class="box1">
				<view class="imgs">
					<image src="../../static/order/deimg.jpg" mode="widthFix" />
				</view>
				<view class="box1cont">
					<view class="title">订单{{details.statusName}}</view>
					<view class="moneytime" v-if="!details.reasonRefusal == ''">
						拒绝原因: {{details.reasonRefusal}}
					</view>
					<view class="moneytime">
						<view class="time">下单日期: {{dtCreateTime}}</view>
						<view class="money">￥{{details.dTotalMoney}}</view>
					</view>
				</view>
			</view> -->
			<view class="orderinfo">
				<view class="order_box order_detail">
					<view class="title"><text></text> 订单信息</view>
					<view class="cont"><text class="left_title">客户姓名：</text>
						<text>{{details.cName}}</text>
					</view>
					<view class="cont">
						<text class="left_title">客户电话：</text>
						<text class="right_content" @click="dial(details.cPhone)">{{details.cPhone}}
						</text>
					</view>
					<view class="cont"><text class="left_title">服务商家：</text> <text
							class="right_content">{{details.js.cNickName}}</text></view>
					<view class="cont" v-if="!dtCreateTime1 == ''"><text class="left_title">下单时间：</text>
						<text>{{dtCreateTime1}}</text>
					</view>
					<view class="cont" v-if="!acceptanceTime == ''"><text class="left_title">接单时间：</text>
						<text>{{acceptanceTime}}</text>
					</view>
					<view class="cont" v-if="!reachTime == ''"><text class="left_title">到达时间：</text> <text>{{reachTime}}</text>
					</view>
					<view class="cont" v-if="!startTime == ''"><text class="left_title">开始服务时间：</text> <text>{{startTime}}</text>
					</view>
					<view class="cont" v-if="!endTime == ''"><text class="left_title">完成订单时间：</text> <text>{{endTime}}</text>
					</view>
					<view class="cont"><text class="left_title">车费详情：</text> <text>{{details.fare || 0}}元</text></view>
					<view class="cont"><text class="left_title">服务地址：</text> <text> {{details.address}}</text></view>
				</view>
			</view>
			<view class="sub_box">
				<view class="cancel">
					取消订单
				</view>
				<!-- 	<view class="edit_time">
					修改上门时间
				</view> -->
			</view>
			<view class="orderinfo" v-if="name == '商户订单'">
				<view class="title">客户标签</view>
				<view class="comment_box">
					<view class="comment" v-for="(item,index) in userCommentList" :key="index">
						{{item.text}}
					</view>
				</view>
			</view>

			<!-- <view style="height: 300rpx;"></view> -->
		</view>
		<view v-if="name == '商户订单'">
			<view class="btnbox" v-if="details.nStatus === 0">
				<!-- <view @click="scheduling((details.cId))">了解客户</view> -->
				<view @click="scheduling((details.cId))">接单</view>
				<view @click="refuse((details.cId))">拒绝接单</view>
			</view>
			<view class="btnbox" v-if="details.nStatus === 1">
				<view @click="depart(details.cId,details.orderNo)">出发</view>
			</view>
			<view class="btnbox" v-if="details.nStatus === 6">
				<view @click="arriveOderLocation(details.cId,details.orderNo)">到达</view>
			</view>
			<view class="btnbox" v-if="details.nStatus === 2">
				<view @click="enterService(details.cId,details.orderNo)">开始服务</view>
			</view>
			<view class="btnbox" v-if="details.nStatus === 3">
				<view @click="complete(details.cId,details.orderNo)">完成订单</view>
			</view>
			<view class="btnbox" v-if="details.nStatus === 4">
				<view @click="appraise(details,details.cId,details.orderNo)">评价顾客</view>
			</view>
		</view>
		<view v-else>
			<view class="btnbox" v-if="details.nStatus === -1">
				<!-- <view @click="nowYuyue(details.cId,details.dTotalMoney)">支付订单</view> -->
			</view>
			<view class="btnbox" v-if="details.nStatus === -2">
				<view @click="deleteOrder(details.cId)">删除订单</view>
			</view>
			<view class="btnbox" v-if="details.nStatus === 4">
				<view @click="commentOrder(details.orderNo,details.cJsId,details.cId,details.js.cNickName)">评价订单</view>
			</view>
			<view class="btnbox" v-if="details.nStatus === 3">
				<view @click="bookNow(typelevel,details.cJsId)">升级</view>
				<view @click="bookNow(typeTime,details.cJsId)">加钟</view>
			</view>
		</view>
		<!-- 录音弹框 -->
		<view class="recording" v-if="recordShow">
			<view class="recording_content">
				<view class="btn">
					<view @click="cancle">取消</view>
					<view @click="saveRecord">保存</view>
				</view>
				<view class="content">
					<view class="time">{{recordTime}}</view>
					<view class="Playparse" @click="pauseRecord" v-if="isRecording">
						<image src="../../static/identify/rec1.png" mode="" />
					</view>
					<view class="Playparse" @click="startRecord" v-else>
						<image src="../../static/identify/rec2.png" mode="" />
					</view>
				</view>
			</view>
		</view>
		<!-- 加单弹框 -->
		<view class="dialog" v-if="dialogShow && projects.length>0">
			<view class="closebox" @click="closeDialog"></view>
			<view class="dialog_content">
				<view class="lists" v-for="(item,index) in projects" :key="index">
					<view class="imgs">
						<image :src="publicUrl + item.cCover" mode="" />
					</view>
					<view class="right">
						<view class="list_title">
							<view class="title">{{item.cTitle}}</view>
							<view class="time">{{item.nMinute}}分钟</view>
						</view>
						<view class="price">
							<view class="money">￥{{item.dPrice}}</view>
							<view class="counter">
								<view @click="decrease(index)">-</view>
								<text>{{ item.number }}</text>
								<view @click="increase(index)">＋</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="now" @click="nowYuyue(details.orderNo,details.cJsId)" ><text>立即预约</text></view>
		</view>
		<view class="refuse_popup" v-if="isRefuse">
			<view class="histroy">
				<view class="title">
					请输入拒绝接单原因
				</view>
				<view class="center">
					<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 class="photo_box">
				<view class="photo">
					<u-upload class="upload_popup" :action="uploadUrl" :file-list="arrivalPhoto" @on-success="photograph"
						@on-remove="remove" :header="header" :max-count="1" />
				</view>
				<view class="btn_box">
					<view class="btn" @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 {
		orderDeatails,
		getInfo,
		payoff,
		delOrder,
		confirmOrder,
		alertOrder,
		engineerDetails,
		speedOrder,
		addOrder,
		takeOrder,
		arriveOderLocation,
		updateOrder,
		project,
		enterService,
		refuse,
		depart,
		userComment,
		reach,
		confirm
	} from '../../api/index.js'
	export default {
		data() {
			return {
				cAddress: '',
				id: '',
				details: '',
				dtCreateTime: '',
				dtCreateTime1: '',
				acceptanceTime: '',
				reachTime: '',
				startTime: '',
				endTime: '',
				dTotalMoney: 0,
				money: 0,
				name: '',
				orderShow: true,
				// 录音
				hours: 0, // 小时
				minute: 0, // 分钟
				second: 0, // 秒钟
				recorderManager: null,
				recordTime: '00:00:00',
				isRecording: false,
				isPaused: false,
				audioFilePath: '',
				timer: null,
				recordShow: false,
				// 加单
				dialogShow: false,
				projects: [],
				soundFile: '',
				ifOnceClick: true,
				ordertype: null,
				typelevel: 2, //升级
				typeTime: 1, //加钟
				// publicUrl: 'https://test.baoxianzhanggui.com/nightFragrance/', //图片前缀
				publicUrl: 'https://city.baoxianzhanggui.com/nightFragrance/', //图片前缀
				isRefuse: false,
				reasonRefusal: '', //拒单原因
				refusecId: '',
				userCommentList: [],
				form: {},
				isArrive: false,
				// uploadUrl: 'https://test.baoxianzhanggui.com/nightFragrance/common/upload',
				uploadUrl:'https://city.baoxianzhanggui.com/nightFragrance/common/upload',
				isSchedule: false,
				timeoutCause: ''
			}
		},
		onLoad(options) {
			this.id = options.cid
			this.name = options.name
			this.getDetails()
			this.token = uni.getStorageSync('access-token'); // 假设token保存在本地缓存中

		},
		computed: {
			header() {
				return {
					Authorization: `tf: ${this.token}`, // 携带Token的请求头
				};
			},
		},
		methods: {
			userComment(cOpenId) {
				let data = {}
				data.openId = cOpenId
				userComment(data).then(res => {
					this.userCommentList = res.data.data.records
				})
			},
			dial(cPhone) {
				uni.makePhoneCall({
					phoneNumber: cPhone //仅为示例
				})
			},
			deleteOrder(cId) {
				var that = this
				var id = {
					cId: e
				}
				uni.showModal({
					title: '提示',
					content: '确定删除订单吗？',
					showCancel: true, // 是否显示取消按钮
					success(res) {
						if (res.confirm) {
							delOrder(id).then(res => {
								if (res.data.code == 200) {
									// that.getList()
									that.$router.go(0)
									uni.showToast({
										title: '删除订单成功！',
										icon: 'none'
									})
									// setTimeout(() => {
									// 	this.list = []
									// 	this.getList()
									// }, 100)
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			arriveOderLocation(cId, orderNo) {
				console.log('+++++')
				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.$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) {
						uni.showToast({
							title: '已接单',
						})
						this.$router.go()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			//拒单
			refuse(cId) {
				this.isRefuse = true
				this.refusecId = cId
			},
			refuseSubmit() {
				var data = {
					cId: this.refusecId,
					reasonRefusal: this.reasonRefusal.trim()
				}
				if (data.reasonRefusal == '') {
					uni.showToast({
						title: '拒绝原因不能为空',
					})
					return
				}
				refuse(data).then(res => {
					if (res.data.code == 200) {
						this.list = []
						uni.showToast({
							title: '已拒绝',
						})
						// this.getList()
						this.isRefuse = false,
							this.reasonRefusal = ''
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			cancel() {
				this.isRefuse = false
				this.reasonRefusal = ''
			},
			//出发
			depart(cId, orderNo) {
				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.getList()
							} else {
								uni.showToast({
									title: res.data.msg,
								})
								that.getList()
							}
						})
					},
					fail: (res) => {}
				});
			},
			// complete(cId, orderNo) {
			// 	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.$router.go(0)
			// 						// that.list =[]
			// 						uni.showToast({
			// 							title: '已完成',
			// 						})
			// 						uni.navigateTo({
			// 							url: '/pages/my/js_order'
			// 						})
			// 						that.getList()
			// 					} else {
			// 						uni.showToast({
			// 							title: res.data.msg,
			// 						})
			// 					}
			// 				})

			// 				// this.list = []
			// 				// this.getList();

			// 			}
			// 		}
			// 	});
			// },
			//完成订单
			complete(cId, orderNo) {
				console.log(this.details)
				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(this.details.startTime) //开始时间
				let differenceInMs = nowtime - starttime //剩余时间
				let differenceInMinutes = differenceInMs / (1000 * 60);
				if (differenceInMinutes > this.details.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,
							})
						}
					})
				}
			},
			enterService(cId, orderNo) {
				var data = {
					cId: cId
				}
				enterService(data).then(res => {
					if (res.data.code == 200) {
						// this.list = []
						// this.getList()
						this.getDetails()
						uni.showToast({
							title: '服务已开始',
						})
						this.$router.go(0)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			//报警
			alert(orderNo) {
				var data = {
					orderNo: orderNo
				}
				alertOrder(data).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '已报警！',
						})
						this.getDetails()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			commentOrder(orderNo, cJsId, cId, cName) {
				uni.navigateTo({
					url: './comment?orderNo=' + orderNo + '&cJsId=' + cJsId + '&cId=' + cId + '&cName=' + cName
				})
			},
			//获取订单详情
			getDetails() {
				var id = {
					cId: this.id
				}
				orderDeatails(id).then(res => {
					var charToRemove = "T";
					if (res.data.code == 200) {
						this.details = res.data.data.records[0],
							this.userComment(this.details.cOpenId)
						this.dtCreateTime = res.data.data.records[0].dtCreateTime.slice(0, 10),
							this.dtCreateTime1 = res.data.data.records[0].dtCreateTime.replace(charToRemove, ' '),

							// let acceptancetime = res.data.data.records[0].dtCreateTime.slice(0, 10)
							this.acceptanceTime = res.data.data.records[0].acceptanceTime.replace(charToRemove, ' '),

							this.reachTime = res.data.data.records[0].reachTime.replace(charToRemove, ' '),
							this.startTime = res.data.data.records[0].startTime.replace(charToRemove, ' '),
							this.endTime = res.data.data.records[0].endTime.replace(charToRemove, ' '),
							this.cAddress = JSON.parse(res.data.data.records[0].cAddress).address + '(' + JSON.parse(res.data.data
								.records[0].cAddress).address + ')' + res.data.data.records[0].atlasAdd
						var status = res.data.data.records[0].nStatus
						if (status == 2 || status == 3) {
							// this.setData({
							this.orderShow = true
							// })
						} else {
							// this.setData({
							this.orderShow = false
							// })
						}
					}
				})
			},
			bookNow(type, id) {
				this.ordertype = type
				this.projects = []
				var id = {
					id: id
				}
				engineerDetails(id).then(res => {
					res.data.data.projects.forEach(element => {
						if ((this.details.dTotalMoney < element.dPrice) && type == 2) {
							element.number = 0
							this.projects.push(element)
						}else if(type == 1){
							element.number = 0
							this.projects.push(element)
						}
					});
					if(this.projects.length == 0){
						uni.showToast({
							icon:'none',
							title:'暂无可升级订单'
						})
					}
					// details:res.data.data,
					// this.projects = res.data.data.projects,
					console.log(this.projects)
					this.dialogShow = true,
						this.orderId = res.data.data.cId
				})
			},
			//升级订单+1
			increase(idx) {
				this.projects[idx].number++;
			},
			decrease(idx) {
				this.projects[idx].number--;
			},
			nowYuyue(orderNo, cJsId) {
				var that = this
				// if()
				const allCountsZero = this.projects.every(item => item.number === 0);
				if (allCountsZero) {
					wx.showToast({
						title: '请先选择项目！',
						duration: 1000,
						icon: 'none',
					})
					return
				} else {
					// console.log(this.data.projects,"project")
					var list = []
					this.projects.forEach(element => {
						if (element.number > 0) {
							element.sum = element.number * element.dPrice
							list.push(element)
						}
					});
					var total = 0
					for (let i = 0; i < list.length; i++) {
						total += list[i].sum;
					}
					var data = {
						orderType: this.ordertype,
						cJsId: cJsId,
						cGoods: list,
						cOpenId: uni.getStorageSync('wx_copenid'),
						dTotalMoney: total,
						parentNo: orderNo
					}
					speedOrder(data).then(res => {
						if (res.data.code == 200) {
							uni.navigateTo({
								url: '../identify/pay_order?orderNo=' + res.data.data.orderNo,
							})
						} else {}
					})
				}
			},
			closeDialog() {
				this.dialogShow = false
			},
			appraise(details, cId, orderNo) {
				uni.navigateTo({
					url: './comment?orderNo=' + orderNo + '&cJsId=' + details.cJsId + '&name=' + details.js.cName + '&cId=' +
						details.cId + '&title=' + '商户' + '&cOpenId=' + details.cOpenId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.details {
		position: relative;
		height: 100vh;
		overflow: hidden;
		background: #F7FFFF;

		.content {
			height: 100vh;
			overflow-y: scroll;

			.order_status {
				width: 100%;
				height: 364rpx;
				background: linear-gradient(90deg, #91F5F0 0%, #13E4DA 100%);
				padding: 28rpx 32rpx 24rpx;
				box-sizing: border-box;

				.status_center {
					width: 100%;
					background: #E5FDFB;
					box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.1);
					border-radius: 16rpx;
					border: 2rpx solid #BCE7E5;
					padding: 24rpx;
					box-sizing: border-box;

					.status {
						font-weight: 700;
						font-size: 38rpx;
						color: #2F3437;
						line-height: 45rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.money {
							font-weight: 400;
							font-size: 28rpx;
							color: #F53E54;
							// line-height: 24rpx;
							display: flex;
							align-items: center;

							text {
								font-weight: 700;
								font-size: 44rpx;
								color: #F53E54;
								// line-height: 24rpx;
							}
						}
					}

					.time {
						width: 100%;
						margin-top: 12rpx;
						font-size: 30rpx;
						color: #069E96;
						line-height: 35rpx;
						margin-bottom: 20rpx;
					}

					.merchant {
						width: 100%;
						height: 136rpx;
						background: #FFFFFF;
						box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.1);
						border-radius: 16rpx;
						padding: 20rpx;
						box-sizing: border-box;
						font-size: 28rpx;
						color: #333333;

						text {
							display: inline-block;
							margin-top: 16rpx;
						}
					}
				}
			}

			.box1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				border-bottom: 20rpx solid #fcfcfc;

				.imgs {
					border-radius: 10rpx;
					height: 180rpx;
					overflow: hidden;

					image {
						width: 280rpx;
						height: 180rpx;
					}
				}

				.box1cont {
					flex: 1;
					padding-left: 30rpx;

					.title {
						font-size: 36rpx;
						font-weight: bold;
						display: flex;
						align-items: center;
					}

					.moneytime {
						display: flex;
						justify-content: space-between;
						padding-top: 40rpx;
						color: #808080;

						.money {
							font-size: 32rpx;
							color: #ff0000;
							font-weight: bold;
						}

						.time {
							// color: #333;
							font-size: 26rpx;
						}
					}

				}
			}

			.orderinfo {
				width: 100%;
				margin-top: 28rpx;
				padding: 0px 32rpx;
				box-sizing: border-box;

				.order_box {
					width: 100%;
					background: linear-gradient(35deg, #FFFFFF 0%, #E4FFFD 100%);
					box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.1);
					border-radius: 16rpx;
					padding: 24rpx;
					box-sizing: border-box;

					.title {
						font-size: 32rpx;
						font-weight: bold;
						color: #2F3437;
						display: flex;
						align-items: center;

						text {
							display: inline-block;
							width: 6rpx;
							height: 34rpx;
							background-color: #20CBC2;
							margin-right: 12rpx;
						}
					}

					.project {
						height: 160rpx;
						margin-top: 24rpx;
						display: flex;
						align-items: center;

						.project_left {
							margin-right: 40rpx;

							img {
								width: 160rpx;
								height: 160rpx;
							}
						}

						.project_right {
							flex: 1;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							text {
								display: block;
							}

							.name {
								font-weight: 700;
								font-size: 28rpx;
								color: #333333;
								line-height: 33rpx;
							}

							.price {
								font-size: 28rpx;
								color: #666666;
								line-height: 33rpx;
								margin: 16rpx 0px;
							}

							.total {
								width: 100%;
								font-size: 28rpx;
								color: #666666;
								line-height: 33rpx;
								display: flex;
								justify-content: space-between;

								.total_price {
									display: inline-block;
									font-weight: 700;
									font-size: 32rpx;
									color: #333333;
									line-height: 38rpx;
								}
							}
						}
					}
				}

				.order_detail {
					background: #fff;
				}

				.orderA {
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding-top: 30rpx;

					view {
						font-size: 32rpx;

						image {
							width: 80rpx;
							height: 80rpx;
							margin-right: 30rpx;
						}
					}
				}



				.conts_price {
					display: flex;
					justify-content: space-between;
				}

				.cont {
					font-size: 28rpx;
					line-height: 40rpx;
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;

					.left_title {
						width: 170rpx;
						font-size: 28rpx;
					}

					text {
						// width: 498rpx;
						// color: #dddbdb;
						padding-left: 20rpx;
						// font-size: 32rpx;
					}
				}

				.items {
					border-bottom: 1px solid #f9f9f9;
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;

					.img {
						width: 250rpx;
						height: 200rpx;
						border-radius: 20rpx;
						overflow: hidden;

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

					.right {
						height: 200rpx;
						flex: 1;
						padding-left: 50rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}
				}

				.conts {
					font-size: 36rpx;
					color: #ff0000;
					font-weight: bold;
					padding: 30rpx 0;
					text-align: right;
				}

				.comment_box {
					display: flex;
					padding: 10rpx;
					box-sizing: border-box;

					.comment {
						background-color: #ccc;
						margin-right: 10px;
						padding: 10rpx;
						border-radius: 10rpx;
						font-size: 30rpx;
					}
				}
			}
		}

		.btnbox {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			border-top: 1px solid #fdfdfd;
			// padding-top: 20rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			view {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				background-color: #2ebdd9;
				color: #fff;
				// width: 47%;
				height: 50%;
				// margin:0 auto;
				padding: 15rpx 30px;
				border-radius: 50px;
			}
		}

		.recording {
			background-color: rgba(0, 0, 0, .5);
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;

			.recording_content {
				width: 100%;
				height: 60%;
				position: absolute;
				bottom: 0;
				background-color: #fff;

				.btn {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 30rpx;
				}

				.time {
					font-size: 70rpx;
					font-weight: bold;
					text-align: center;
					padding: 200rpx 0;
				}

				.Playparse {
					text-align: center;

					image {
						width: 80rpx;
						height: 80rpx;
					}
				}
			}

		}

		.dialog {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .5);
			z-index: 10;
			transition: transform 0.3s ease-out;

			.closebox {
				height: calc(50vh - 60rpx);
				width: 100%;
			}

			.now {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				text-align: center;
				height: 100rpx;
				background-color: #f7f8fa;
				padding-top: 10rpx;

				text {
					display: inline-block;
					height: 80rpx;
					line-height: 80rpx;
					width: 90%;
					background-color: #2cb8d4;
					color: #fff;
					border-radius: 50rpx;
				}
			}

			.dialog_content {
				background-color: #fff;
				position: absolute;
				bottom: 0;
				width: calc(100% - 60rpx);
				height: 50vh;
				overflow-y: scroll;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				padding: 30rpx;
				background-color: #f3f3f3;
				padding-bottom: 100rpx;

				.lists {
					background-color: #fff;
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					padding: 20rpx 10rpx;
					border-radius: 10rpx;

					.imgs {
						width: 240rpx;
						height: 160rpx;
						border-radius: 20rpx;
						overflow: hidden;

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

					.right {
						flex: 1;
						padding-left: 30rpx;

						.list_title {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.title {
								font-size: 34rpx;
								font-weight: bold;
							}

							.time {
								font-size: 24rpx;
							}
						}

						.price {
							padding-top: 50rpx;
							display: flex;
							justify-content: space-between;

							.money {
								font-size: 42rpx;
								color: #e61b1b;
								font-weight: bold;
							}

							.counter {
								display: flex;

								view {
									width: 60rpx;
									height: 60rpx;
									line-height: 60rpx;
									background-color: #f7f8fa;
									text-align: center;
									border-radius: 60rpx;
									font-size: 50rpx;
								}

								text {
									width: 100rpx;
									text-align: center;
									line-height: 60rpx;
								}
							}
						}
					}
				}
			}
		}

		.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;
				}

				.center {
					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;
					}
				}
			}
		}

		.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;
					}
				}
			}
		}

		.sub_box {
			width: 100%;
			height: 116rpx;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;

			position: fixed;
			bottom: 0;

			.cancel {
				width: 315rpx;
				height: 76rpx;
				border-radius: 106rpx;
				border: 2rpx solid #BBBBBB;
				font-size: 32rpx;
				color: #999999;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.edit_time {
				width: 315rpx;
				height: 76rpx;
				border-radius: 106rpx;
				border: 2rpx solid #00B8B0;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #00B8B0;
			}
		}
	}
</style>