LocalLivingServicesUniapp/pages/order/index.vue

<template>
	<view class="order">
		<view class="fix">

			<view class="top"></view>
			<view class="head">
				<view class="case">
					<view class="select_type">
						<div class="tab-item" :class="tabIndex == 0?'active':''"
							@click="getList(servicePage),tabIndex=0;productName='';productStatus=0;">普通订单</div>
						<div class="tab-item" :class="tabIndex == 1?'active':''"
							@click="getserviceList(servicePage),tabIndex=1;productName='';productStatus=0;">服务订单</div>
					</view>
				</view>

			</view>
			<view class="manage">
				<view class="search">
					<image src="/static/index/search.png" mode=""></image>
					<u-input type="text" v-model="merchantUserInfo" placeholder="请输入关键词" />
					<span @click="searchList">搜索</span>
				</view>
				<view class="action " @click="selectTime">
					<view class="cuIcon-filter"></view>
				</view>
			</view>

			<view class="select" v-if="tabIndex == 0">
				<view class="type" :class="currentIndex == index?'active':''" v-for="(item,index) in typeList" :key="index"
					@click="selectType(item,index)">
					{{item.name}}
				</view>
			</view>
			<view class="select" v-if="tabIndex == 1">
				<view class="type" :class="currentIndex == index?'active':''" v-for="(item,index) in statusList" :key="index"
					@click="selectSeiviceType(item,index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<mescroll-uni class="list" :fixed="false" ref="mescrollRef" @up="getList" @init="mescrollInit" :use="false"
			v-if="tabIndex ==0">
			<view class="order_item" v-for="(item,index) in orderList" :key="item.id" @click="geDetail(item)">
				<view class="order_id">
					<view class="id_left">
						订单编号：{{item.orderId}}
					</view>
					<view class="id_right" v-if="item.stateCode ==5">
						<!-- {{item.state}} -->
						待付款
					</view>
					<view class="id_right" v-if="item.stateCode ==0" style="color: #ff9900;">
						待使用
					</view>
					<view class="id_right" v-if="item.stateCode == 4" style="color:#449AFF ;">
						退款/售后
					</view>
					<view class="id_right" v-if="item.stateCode ==1">
						已使用
					</view>
				</view>
				<view class="order_product">
					<view class="img">
						<image :src="item.productImage" mode=""></image>
					</view>
					<view class="name">
						{{item.productName}}
						<span>￥{{item.orderPrice}}</span>
					</view>
					<view class="ticket" v-if="item.isUseRights">
						<image src="/static/product/ticket.png" mode=""></image>
					</view>
				</view>
				<view class="time">
					<view class="time_left">
						顾客于{{item.buyTime}}
					</view>
					<view class="time_right" @click.stop="goRecord(item)" v-if="item.auditType =='0'">
						去处理
					</view>
				</view>
			</view>
		</mescroll-uni>
		<!-- 服务订单 -->
		<mescroll-uni class="list" :fixed="false" ref="mescrollRef" @up="getserviceList" @init="mescrollInit" :use="false"
			v-if="tabIndex == 1">
			<view class="service_order" v-for="item in serviceList" :key="item.orderNo" @click="goDetail(item)">
				<view class="item_title">
					<span>订单编号：{{item.orderNo}}</span>
					<span>{{item.status}}</span>
				</view>
				<view class="car_id">
					{{item.licenseNo}}
					<span>{{item.checkType==0?'上门取车':'送车到站'}}</span>
				</view>
				<view class="name">
					{{item.productName}}
					<span @click.stop="goGetCar(item)" v-if="item.checkType == 0">取车地点</span>
				</view>
				<view class="time">
					<span>{{item.date}}</span>
					<span> <text>￥</text> {{item.price}}</span>
				</view>
				<view class="btn_box">
					<view class="btn">
						实况记录
					</view>
					<view class="btn" style="margin-left: 16rpx;">
						联系客服
					</view>
					<view class="btn border">
						联系客户
					</view>
					<view class="btn join" @click.stop="receive(item)" v-if="item.statusCode ==2" style="margin-left: 16rpx;">
						接单
					</view>
					<!-- 送车到站按钮区域开始item.checkType==1 -->
					<view class="" v-if="item.checkType==1" style="flex:1;display: flex;justify-content: space-around;">
						<view class="btn join" @click.stop="collect(item)" v-if="item.statusCode ==3">
							确认收车
						</view>
						<view class="btn join" @click.stop="finish(item)" v-if="item.statusCode ==4">
							检测完成
						</view>
						<view class="btn join" @click.stop="takeCar(item)" v-if="item.statusCode ==5 && item.flowStatus =='12'">
							确认取车
						</view>
						<view class="btn join" @click.stop="evaluate(item)"
							v-if="(item.statusCode ==6 || item.statusCode ==5) && item.flowStatus !=='17' ">
							去评价
						</view>
					</view>
					<!-- 送车到站按钮区域结束
					上门取车按钮区域开始item.checkType==0 -->
					<view class="" v-if="item.checkType == 0" style="flex:1;display: flex;justify-content: space-around;">
						<view class="btn join" @click.stop="goGetCar(item)" v-if="item.statusCode ==5 && item.flowStatus == 4">
							去取车
						</view>
						<view class="btn join" @click.stop="collect(item)" v-if="item.statusCode ==5 && item.flowStatus == 5">
							确认取车
						</view>
						<view class="btn join" @click.stop="finish(item)"
							v-if="item.statusCode ==4 && item.flowStatus==7 || item.flowStatus==8">
							检测完成
						</view>
						<view class="btn join" @click.stop="goAlso(item)" v-if="item.statusCode ==3 && item.flowStatus==12">
							去送车
						</view>
						<view class="btn join" @click.stop="delivered(item)" v-if="item.statusCode ==3&& item.flowStatus==13">
							车已送达
						</view>
						<view class="btn join" @click.stop="evaluate(item)"
							v-if="(item.statusCode ==6 || item.statusCode ==5) && item.flowStatus !=='17' ">
							去评价
						</view>
					</view>
					<!-- 上门取车按钮区域结束 -->
				</view>
				<view class="add_service" @click.stop="addService(item)" v-if="item.statusCode==4 ||item.statusCode==3 ">
					<span>添加收费服务</span>
				</view>
				<view class="child_order">
					<view class="row" v-for="row in item.children" :key="row.orderNo">
						<view class="row_title">
							<span>订单编号：{{row.orderNo}}</span>
							<span class="row_status">{{row.status}}</span>
						</view>
						<view class="row_name">
							{{row.productName}}
						</view>
						<view class="row_price">
							<span><text>￥</text>{{row.price}}</span>
							<view class="row_detail" @click.stop="lookDetail(row)">
								服务明细
							</view>
						</view>
						<view class="row_time">
							{{row.date}}
						</view>
						<view class="row_btn" @click.stop="editProject(row)"
							v-if="row.statusCode == '0' || row.statusCode == '11' ">
							<span>修改收费服务</span>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		<rangTime ref="rangTime" :mode="mode" :isYear="true" @onSubmit="onEndTimeChange" @cut="cutPopup" />
		<receive @cut="isReceive =false" v-if="isReceive" />
		<serviceDetail :subOrderId="subOrderId" @cut="cutsubOrderId" v-if="isServiceDeatil" />
		<upload :type="uptype" :taskId="taskId" v-if="isUpload" @cut="isUpload = false" @upSuccess="upSuccess" />
		<evaluate :userId="userId" :taskId="taskId" v-if="iseEvaluate" @cut="cutEvaluate" />
	</view>

</template>

<script>
	import receive from '../order/components/receiveOrder.vue'
	import upload from '../order/components/upload.vue'
	import evaluate from '../order/components/evaluate.vue'
	import serviceDetail from '../order/components/serviceDetail.vue'
	import rangTime from '../../components/dengrq-datetime-picker/dateSelector/index.vue'
	export default {
		components: {
			rangTime,
			receive,
			serviceDetail,
			upload,
			evaluate
		},
		data() {
			return {
				search: '',
				mode: 1,
				currentIndex: 0,
				merchantId: '',
				buyStartTime: '',
				buyEndTime: '',
				typeList: [{
						type: '',
						name: '全部'
					},
					{
						type: 5,
						name: '待付款'
					},
					{
						type: 0,
						name: '待使用'
					},
					{
						type: 1,
						name: '已使用'
					},
					{
						type: 4,
						name: '售后'
					}
				],
				statusList: [{
						type: '',
						name: '全部'
					},
					{
						type: 1,
						name: '待接单'
					},
					{
						type: 2,
						name: '服务中'
					},
					{
						type: 3,
						name: '已完成'
					},
					{
						type: 4,
						name: '售后'
					}
				],
				ststusCode: '', //审车策划状态
				orderList: [],
				state: '',
				merchantUserInfo: '',
				upOption: {
					page: {
						num: 0,
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				tabIndex: 0,
				serviceList: [],
				isReceive: false, //接单成功弹窗
				isServiceDeatil: false, //服务明细弹窗
				isUpload: false, //上传图片弹窗显隐
				uptype: '', //上传图片类型
				taskId: '', //上传图片传值
				checkType: '', //上传图片修改状态用
				subOrderId: '', //服务明细传递数据
				paramState: '', //上传完图片修改状态
				serveType: '', //服务类型
				iseEvaluate: false, //评价弹窗显隐
				userId: '', //评论用户id
				servicePage: {
					num: 1,
					size: 10
				}
			}
		},
		methods: {
			selectTime() {
				this.$refs.rangTime.open()
				uni.hideTabBar()
			},
			onEndTimeChange(val) {
				if (this.tabIndex == 0) {
					this.orderList = []
					this.buyStartTime = val.startDate
					this.buyEndTime = val.endDate
					let page = {
						num: 1,
						size: 10
					}
					this.getList(page)
				} else {

				}

			},
			cutPopup() {
				this.isYear = false
				uni.showTabBar()
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			InputBlur(e) {
				this.search = e.detail.value
			},
			//普通订单
			selectType(item, index) {
				this.currentIndex = index
				this.state = item.type
				this.orderList = []
				// this.mescroll.resetUpScroll();
				let page = {
					num: 1,
					size: 10
				}
				this.getList(page)
			},
			//服务订单
			selectSeiviceType(item, index) {
				this.currentIndex = index
				this.statusCode = item.type
				this.serviceList = []
				let page = {
					num: 1,
					size: 10
				}
				this.getserviceList(page)
				// this.mescroll.resetUpScroll();
			},
			searchList() {
				if (this.tabIndex == 0) {
					let page = {
						num: 1,
						size: 10
					}
					this.orderList = []
					this.getList(page)
				} else {

				}

			},
			//跳转至订单详情页
			goRecord(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/order/record?orderId=' + item.orderId
				})
			},
			//跳转至服务订单详情页
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/order/serviceOrder/orderDetail?taskId=' + item.taskId + '&checkType=' + item.checkType
				})
			},
			getList(page) {
				let data = {
					merchantId: this.merchantId,
					pageSize: page.size,
					pageNo: page.num,
					state: this.state,
					merchantUserInfo: this.merchantUserInfo,
					buyStartTime: this.buyStartTime,
					buyEndTime: this.buyEndTime
				}
				this.$http.post("/app/order/locaOrder/list", data).then(res => {
					this.orderList = this.orderList.concat(res.data.result.records)
					this.mescroll.endSuccess(res.data.result.records.length, res.data.result.total);
					uni.showTabBar()
				}).catch(() => {
					this.mescroll.endErr()
				})
			},
			geDetail(item) {
				uni.navigateTo({
					url: '/pages/order/details?orderId=' + item.orderId
				})
			},
			//获取服务订单列表
			getserviceList(page) {
				let data = {
					merchantId: this.merchantId,
					pageSize: page.size,
					pageNo: page.num,
					status: this.statusCode
				}
				this.$http.post("/ts/merchant/serviceOrder", data).then(res => {
						this.serviceList = this.serviceList.concat(res.data.result.records)
						this.mescroll.endSuccess(res.data.result.records.length, res.data.result.total);
					})
					.catch(() => {
						this.mescroll.endErr()
					})

			},
			// 接单
			receive(item) {
				console.log(item)
				let data = {
					taskId: item.taskId,
					checkType: item.checkType,
					paramState: '04', //商户接单成功
					serveType: '01'
				}
				this.$http.post("/ts/merchant/update/Serve", data).then(res => {
					if (res.data.code == 200) {
						this.isReceive = true
						let page = {
							num: 1,
							size: 10
						}
						this.getserviceList(page)
					}
				})
			},
			//收车上传照片
			collect(item) {
				console.log(item)
				this.taskId = item.taskId
				this.checkType = item.checkType
				//0 取车，1送车
				if (item.checkType == 0) {
					//收车
					if (item.statusCode == 5) {
						this.uptype = 1
					} else if (item.statusCode == 4) {
						this.uptype = 3
					}
				} else if (item.checkType == 1) {
					//客户送车，商户收车
					if (item.statusCode == 3) {
						this.uptype = 2
					} else {
						this.uptype = 3
					}
				}
				this.isUpload = true
				// this.upSuccess('07','01')
				this.paramState = '07'
				this.serveType = '01'
			},
			//送车到站————检测完成
			upSuccess() {

				let data = {
					taskId: this.taskId,
					checkType: this.checkType,
					paramState: this.paramState, //商户上传图片成功
					serveType: this.serveType
				}
				this.$http.post("/ts/merchant/update/Serve", data).then(res => {
					if (res.data.code == 200) {
						this.isUpload = false
						let page = {
							num: 1,
							size: 10
						}
						this.getserviceList(page)
					}
				})
			},
			//检测完成上传检测图片
			finish(item) {
				console.log(item)
				this.taskId = item.taskId
				this.checkType = item.checkType
				//0 取车，1送车
				if (item.checkType == 0) {
					if (item.statusCode == 5) {
						this.uptype = 1
					}

				} else if (item.checkType == 1) {
					//客户送车，商户收车
					if (item.statusCode == 4) {
						this.uptype = 3

					}
				}
				this.isUpload = true
				this.paramState = '12'
				this.serveType = '01'
			},
			//送车到站--确认取车
			takeCar(item) {
				console.log(item)
				let data = {
					taskId: item.taskId,
					checkType: item.checkType,
					paramState: '14', //
					serveType: '01'
				}
				this.$http.post("/ts/merchant/update/Serve", data).then(res => {
					if (res.data.code == 200) {
						this.isUpload = false
						let page = {
							num: 1,
							size: 10
						}
						this.getserviceList(page)
					}
				})
			},
			//评价弹窗显示
			evaluate(item) {
				console.log(item)
				this.iseEvaluate = true
				this.taskId = item.evaluate
				this.userId = item.userId
				uni.hideTabBar()
			},
			//评价弹窗隐藏
			cutEvaluate() {
				this.iseEvaluate = false
				uni.showTabBar()
			},
			//查看收费服务明细
			lookDetail(item) {
				this.subOrderId = item.orderNo
				this.isServiceDeatil = true
				uni.hideTabBar()
			},
			//修改服务明细
			editProject(row) {
				console.log(row)
				uni.navigateTo({
					url: '/pages/order/serviceOrder/project?orderNo=' + row.orderNo + '&checkType=' + row.checkType +
						'&taskId=' + row.taskId + '&productName=' + row.productName +
						'&type=' + 0
				})
			},
			cutsubOrderId() {
				this.isServiceDeatil = false
				uni.showTabBar()
			},
			//商户去取车
			goGetCar(item) {
				console.log(item)
				let data = {
					taskId: item.taskId,
					checkType: item.checkType,
					paramState: '05', //商户接单成功
					serveType: '01'
				}
				let that = this
				// uni.navigateTo({
				// 		url: (window.location.href = `https://uri.amap.com/navigation?to=${item.userLongitude},${item.userLatitude},${item.carAddress}&mode=car&policy=1&src=https://gawl.gazhcs.com/wap/index.html&callnative=0`)
				// })
				uni.openLocation({
					longitude: Number(item.userLongitude),
					latitude: Number(item.userLatitude),
					name: item.carAddres, // 位置名称
					// address: e.F_Address, // 位置地点
					success: function(res) {
						console.log('打开系统位置地图成功')
						that.$http.post("/ts/merchant/update/Serve", data).then(res => {
							if (res.data.code == 200) {
								// this.isReceive = true
								let page = {
									num: 1,
									size: 10
								}
								that.getserviceList(page)
							}
						})
					},
					fail: function(error) {
						console.log(error)
					},
				})
			},
			//添加收费服务
			addService(item) {
				uni.navigateTo({
					url: '/pages/order/serviceOrder/project?checkType=' + item.checkType + '&taskId=' + item.taskId +
						'&orderNo=' + item.orderNo + '&productName=' + item.productName + '&type=' + 1
				})
			},
			//去送车修改状态
			goAlso(item) {
				let data = {
					taskId: item.taskId,
					checkType: item.checkType,
					paramState: '13', //商户点击去送车
					serveType: '01'
				}
				this.$http.post("/ts/merchant/update/Serve", data).then(res => {
					if (res.data.code == 200) {
						let page = {
							num: 1,
							size: 10
						}
						this.getserviceList(page)
					}
				})
			},
			//商户点击车已送达
			delivered(item) {
				let data = {
					taskId: item.taskId,
					checkType: item.checkType,
					paramState: '14', //商户点击车已送达
					serveType: '01'
				}
				this.$http.post("/ts/merchant/update/Serve", data).then(res => {
					if (res.data.code == 200) {
						let page = {
							num: 1,
							size: 10
						}
						this.getserviceList(page)
					}
				})
			}
		},
		mounted() {
			this.mescroll.optDown.use = false
			// this.getList()
		},
		onShow() {
			let that = this
			uni.getStorage({
				key: 'login_user_info',
				success: function(res) {
					that.merchantId = res.data.merchantId
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		width: 100%;
		height: 100vh;
		background: #F7F8FC;
		display: flex;
		flex-direction: column;
		position: fixed;

		.fix {
			width: 100%;
			height: auto;
			background: #ffffff;
			position: sticky;
			top: 0px;
			border-bottom: 1px solid #EEEEEE;

			/*#ifdef APP-PLUS*/
			.top {
				width: 100%;
				height: var(--status-bar-height);
				background: #FFFFFF;
			}

			/*#endif*/
			.head {
				width: 100%;
				height: 112rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;
				background: #fff;
				position: relative;
				background: #FFFFFF;

				.cuIcon-back {
					font-size: 40rpx;
					margin-right: 40rpx;
				}

				.case {
					width: 100%;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					font-size: 36rpx;
					font-weight: 600;

					.select_type {
						display: flex;
						justify-content: space-around;

						.tab-item {
							position: relative;
							padding: 18rpx 0;
							cursor: pointer;
							color: #333;
							font-weight: 400;
							font-size: 28rpx;
						}

						.tab-item.active {
							color: #449AFF;
							font-weight: 600;
						}

						.tab-item.active::after {
							content: '';
							position: absolute;
							bottom: -28px;
							left: 35%;
							width: 38rpx;
							height: 100%;
							background: url(/static/product/tab-act.png) no-repeat;
							background-size: contain;
						}
					}

				}

				// .action {
				// 	position: absolute;
				// 	right: 24rpx;
				// }
			}

			.manage {
				display: flex;
				align-items: center;
				width: 100%;
				padding: 0 24rpx;

				.search {
					width: 93%;
					height: 55rpx;
					background: #F7F8FC;
					border-radius: 12rpx;
					padding: 0rpx 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-right: 20rpx;
					// margin: 16rpx auto 0px;

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

					input {
						// height: 36rpx;
						font-size: 26rpx;
					}

					span {
						font-size: 26rpx;
						color: #333333;
					}
				}
			}

			.select {
				width: 100%;
				height: 85rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0px 24rpx;
				background-color: #FFFFFF;

				.type {
					height: 54rpx;
					padding: 8rpx 12rpx;
					background: #F2F3F5;
					border-radius: 8rpx;
				}

				.active {
					background: #ECF5FF;
					color: #2D88F4;
				}
			}
		}

		.list {
			flex: 1;
			width: 100%;
			overflow-y: auto;
			padding-bottom: var(--window-bottom);

			.order_item {
				width: 100%;
				background-color: #fff;
				padding: 20rpx 40rpx;
				margin-bottom: 20rpx;

				.order_id {
					width: 100%;
					height: 41rpx;
					font-size: 26rpx;
					color: #8B91A4;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.id_right {}
				}

				.order_product {
					width: 100%;
					height: 132rpx;
					display: flex;
					margin: 10rpx 0px;

					.img {
						width: 132rpx;
						height: 132rpx;
						border-radius: 12rpx;
						overflow: hidden;

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

					.name {
						height: 100%;
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;
						font-size: 28rpx;
						color: #000000;

						span {
							font-size: 22rpx;
							color: #F0761D;
						}
					}

					.ticket {
						image {
							width: 50rpx;
							height: 50rpx;
						}
					}

					.schedule {
						width: 15%;
					}
				}

				.time {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;

					.time_left {
						font-size: 24rpx;
						color: #8A91A8;
					}

					.time_right {
						width: 126rpx;
						height: 50rpx;
						background: rgba(240, 118, 29, 0.05);
						border-radius: 8rpx;
						border: 1px solid #F0761D;
						font-size: 26rpx;
						color: #F0761D;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.service_order {
				background: #FFFFFF;
				padding: 22rpx 32rpx;
				margin-bottom: 20rpx;

				.item_title {
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin-bottom: 22rpx;

					span {
						font-size: 26rpx;
						color: #8B91A4;
					}
				}

				.car_id {
					font-size: 30rpx;
					color: #333333;
					font-weight: 600;
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;

					span {
						width: 120rpx;
						height: 40rpx;
						background: #FDF6F2;
						border-radius: 8rpx;
						font-size: 24rpx;
						line-height: 40rpx;
						color: #FD4912;
						text-align: center;
						margin-left: 16rpx;
					}
				}

				.name {
					width: 100%;
					height: 62rpx;
					background: linear-gradient(90deg, #F8F9FB 0%, #FBFCFD 100%);
					border-radius: 12rpx;
					padding: 12rpx;
					font-size: 26rpx;
					color: #333333;
					font-weight: 600;
					margin-bottom: 8rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					span {
						display: inline-block;
						width: 152rpx;
						height: 50rpx;
						background: rgba(240, 118, 29, 0.05);
						border-radius: 35rpx;
						border: 1px solid #F0761D;
						font-size: 26rpx;
						color: #F0761D;
						text-align: center;
						line-height: 50rpx;
					}
				}

				.time {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					color: #8A91A8;

					span {
						text {
							font-size: 16rpx;
						}

						color: #FD4912;
					}
				}

				.btn_box {
					display: flex;
					align-items: center;
					justify-content: end;
					margin-top: 20rpx;

					.btn {
						height: 51rpx;
						padding: 6rpx 24rpx;
						border-radius: 61rpx;
						font-size: 26rpx;
						border: 1px solid #CCCCCC;
						display: flex;
						align-items: center;
					}

					.border {
						border: 1px solid #2D88F4;
						color: #2D88F4;
						margin-left: 16rpx;
					}

					.join {
						background: #2D88F4;
						color: #FFFFFF;
						border: none;
					}
				}

				.add_service {
					width: 100%;
					height: 100rpx;
					background: linear-gradient(180deg, #EEF7FF 0%, #F6FBFF 100%);
					border-radius: 12rpx;
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					span {
						width: 204rpx;
						height: 50rpx;
						background: linear-gradient(90deg, #53A2FF 0%, #2589FF 100%);
						border-radius: 49rpx;
						font-size: 26rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.child_order {
					width: 100%;

					border-radius: 12rpx;

					margin: 20rpx 0px;

					.row {
						margin-bottom: 20rpx;
						background: linear-gradient(180deg, #EEF7FF 0%, #F6FBFF 100%);
						padding: 10rpx 12rpx;

						.row_title {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 26rpx;
							color: #8B91A4;
							margin-bottom: 20rpx;

							.row_status {
								font-size: 28rpx;
								color: #FF9900;
							}
						}

						.row_name {
							font-size: 26rpx;
							color: #333333;
							margin-bottom: 7rpx;
							font-weight: 600;
						}

						.row_price {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 7rpx;

							span {
								font-size: 26rpx;
								color: #FD4912;
								font-weight: 600;

								text {
									font-size: 16rpx;
								}
							}

							.row_detail {
								padding: 6rpx 24rpx;
								background: #FFFFFF;
								border-radius: 61rpx;
								border: 1px solid #2D88F4;
								font-size: 24rpx;
								color: #2D88F4;
								display: flex;
								align-items: center;
								justify-content: space-between;
							}
						}

						.row_time {
							font-size: 22rpx;
							color: #888888;
							margin-bottom: 16rpx;
						}

						.row_btn {
							display: flex;
							align-items: center;
							justify-content: end;

							span {
								width: 204rpx;
								height: 50rpx;
								background: #2D88F4;
								border-radius: 8rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 26rpx;
								color: #FFFFFF;
							}
						}
					}
				}
			}
		}
	}
</style>