LocalLivingServicesUniapp/pages/order/serviceOrder/orderDetail.vue

<template>
	<view class="order_detail">
		<view class="top">
		</view>
		<view class="head">
			<span class="cuIcon-back" @click="back"></span>
			<view class="case">
				订单详情
			</view>
		</view>
		<view class="over">
			<view class="status_box">
				<view class="status">
					{{form.status}}
				</view>
				<span>{{form.flowRecordList[0].content?form.flowRecordList[0].content:''}}</span>
			</view>
			<!-- 送车到站显示信息开始 -->
			<view class="car_data" v-if="form.checkType == 1">
				<view class="car_id">
					{{form.licenseNo}}
					<span>{{form.carType?form.carType:'小型轿车'}}</span>
				</view>
				<view class="model">
					{{form.brandModel}}
				</view>
				<view class="car_name">
					<span>用户姓名：{{form.contactsName}}</span>
					<view class="call" @click="callUser">
						<image src="/static/order/call.png" mode=""></image>
						联系客户
					</view>
				</view>
			</view>
			<!-- 送车到站显示信息结束 -->
			<!-- 上门取车显示信息开始 -->
			<view class="car_data" v-if="form.checkType == 0">
				<view class="car_id user_name">
					<span style="display: block;padding: 0px;">用户姓名：{{form.contactsName}}</span>
					<span class="call"  @click="callUser">
						<image src="/static/order/call.png" mode=""></image> 联系客户
					</span>
				</view>
				<view class="car_address">
					<view class="address">
						送/取车地址:{{form.carAddress}}
						<image src="/static/order/address.png" mode=""
							@click="navigation(form.userLongitude,form.userLatitude,form.carAddress)"></image>
					</view>
					<view class="car_license">
						车牌号:{{form.licenseNo}}
					</view>
				</view>
			</view>

			<!-- 上门取车显示信息结束 -->
			<!-- 救援显示信息开始 -->
			<view class="car_data" v-if="form.checkType > 20">
				<view class="name">
					<view class="user_name">
						用户姓名：{{form.contactsName}}
					</view>
					<view class="call" @click="callUser">
						<image src="/static/order/call.png" mode=""></image>
						联系客户
					</view>
				</view>
				<view class="address">
					<view class="location">
						<span style="font-weight: 600;">救援地址：</span>
						{{form.carAddress}}
					</view>
					<view class="go" @click="navigation(form.userLongitude,form.userLatitude,form.carAddress)">
						<image src="/static/order/address.png" mode=""></image>
						导航
					</view>
				</view>
				<view class="address" v-if="form.checkType==23" style="margin-top: 20rpx;">
					<view class="location">
						<span style="font-weight: 600;">送达地址：</span>
						{{form.deliveryAddr}}
					</view>
					<view class="go" @click="navigation(form.deliveryLongitude,form.deliveryLatitude,form.deliveryAddr)">
						<image src="/static/order/address.png" mode=""></image>
						导航
					</view>
				</view>
				<view class="car_id">
					车牌号：{{form.licenseNo}}
				</view>
			</view>
			<view class="product">
				<view class="fat_product">
					<view class="product_img">
						<image :src="form.productImage" mode=""></image>
					</view>
					<view class="product_name">
						{{form.productName}}
						<span><text>￥</text>{{!rightsId?0:form.price}}</span>
					</view>
				</view>
				<view class="sun_product">
					<view class="item" v-for="item in form.childrenOrder" :key="item.orderNo">
						<view class="sun_name">
							{{item.productName}}
						</view>
						<view class="sun_price">
							<span><text>￥</text>{{item.price}}</span>
							<view class="look" @click="lookDetail(item)">
								服务明细
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 时间轴区域 -->
			<view class="time_line">
				<u-time-line>
					<u-time-line-item node-top="2" v-for="(item,index) in form.flowRecordList" :key="index">
						<template v-slot:content>
							<view class="center">
								<view class="left_title">
									<view :class="index == 0?'title':''">
										{{item.content}}
									</view>
									<span>{{item.time}}</span>
								</view>
								<view class="button">
									<u-button size="mini" shape="square" v-if="index+1 == form.flowRecordList.length"
										@click="goLive">实况记录</u-button>
									<u-button size="mini" shape="square" v-if="item.content=='商户确认收车'"
										@click="goPhoto(checkType == 0 ? 1 : 2)">车辆交接照片</u-button>
									<u-button size="mini" shape="square" v-if="checkType== 1 && item.content=='检测完毕，等待用户取车'"
										@click="goPhoto(3)">服务照片</u-button>
									<u-button size="mini" shape="square" v-if="checkType== 0 && item.content=='检测完成，准备送车'"
										@click="goPhoto(3)">服务照片</u-button>
									<u-button size="mini" shape="square" v-if="item.content=='正在救援中'" @click="goPhoto(4)">现场照片</u-button>
									<u-button size="mini" shape="square" v-if="item.content=='等待用户确认'" @click="goPhoto(3)">服务照片</u-button>
								</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
			<!-- 订单信息区域 -->
			<view class="order_data">
				<view class="order_item">
					<view class="item_title">
						车辆信息
					</view>
					<view class="item_child">
						<span>车牌号：</span>
						<view class="center">
							{{form.licenseNo}}
						</view>

					</view>
					<view class="item_child" v-if="form.checkType<20">
						<span>车辆类型：</span>
						<view class="center">
							{{form.carType?form.carType:'小型轿车'}}
						</view>
					</view>
					<view class="item_child" v-if="form.checkType<20">
						<span>品牌型号：</span>
						<view class="center">
							{{form.brandModel}}
						</view>
					</view>
				</view>
				<view class="order_item">
					<view class="item_title">
						用户信息
					</view>
					<view class="item_child">
						<span>姓名：</span>
						<view class="center">
							{{form.contactsName}}
						</view>
					</view>
					<view class="item_child">
						<span>联系方式：</span>
						<view class="center">
							{{form.contactsPhone}}
						</view>
					</view>
				</view>
				<view class="order_item">
					<view class="item_title">
						商户信息
					</view>
					<view class="item_child">
						<span>商家名称：</span>
						<view class="center">
							{{form.merchantName}}
						</view>
					</view>
					<view class="item_child">
						<span>商家地址：</span>
						<view class="center">
							{{form.merAddress}}
						</view>
					</view>
					<view class="item_child">
						<span>联系方式：</span>
						<view class="center">
							{{form.merchantPhone}}
						</view>
					</view>
				</view>
				<view class="order_item" v-if="this.form.checkType == 1">
					<view class="item_title">
						站点信息
					</view>
					<view class="item_child">
						<span>站点名称：</span>
						<view class="center">
							{{form.inspectionStationName}}
						</view>
					</view>
					<view class="item_child">
						<span>站点地址：</span>
						<view class="center">
							{{form.detailedAddress}}
						</view>
					</view>
				</view>
				<view class="order_item">
					<view class="item_title">
						订单信息
					</view>
					<view class="item_child">
						<span>订单号：</span>
						<view class="center">
							{{form.orderNo}}
						</view>
					</view>
					<view class="item_child">
						<span>下单时间：</span>
						<view class="center">
							{{form.orderTime}}
						</view>
					</view>
					<view class="item_child" v-if="form.payTime">
						<span>付款时间：</span>
						<view class="center">
							{{form.payTime}}
						</view>
					</view>
				</view>
				<view class="order_item" v-for="item in form.childrenOrder" :key="item.orderNo">
					<view class="item_title">
						附订单信息
					</view>
					<view class="item_child">
						<span>订单号：</span>
						<view class="center">
							{{item.orderNo}}
						</view>
					</view>
					<view class="item_child">
						<span>下单时间：</span>
						<view class="center">
							{{item.date}}
						</view>
					</view>
					<view class="item_child" v-if="item.payTime">
						<span>付款时间：</span>
						<view class="center">
							{{item.payTime}}
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="btn">
			<view class="customer" @click="callService">
				联系客服
			</view>
			<view class="accept" @click="receive" v-if="form.checkType<20 &&form.statusCode == 2">
				接单
			</view>
			<view class="accept" @click.stop="receive" v-if="form.checkType>20 && form.flowStatus =='03'"
				style="margin-left: 16rpx;">
				接单
			</view>
			<view class="func" v-if="form.checkType == 1">
				<view class="accept" @click="collect" v-if="form.statusCode ==3 && form.flowStatus =='05'">
					确认收车
				</view>
				<view class="accept" @click="goProject" v-if=" form.statusCode ==4">
					添加收费服务
				</view>
				<view class="accept" @click="finish" v-if="form.statusCode ==4">
					检测完成
				</view>
				<view class="accept" @click="takeCar" v-if="form.flowStatus =='12'&& form.statusCode ==5">
					确认取车
				</view>
				<view class="accept" @click="evaluate" v-if=" form.flowStatus =='16'">
					去评价
				</view>
			</view>
			<view class="func" v-if="form.checkType==0">
				<view class="accept" @click="goGetCar" v-if="form.statusCode ==5 && form.flowStatus == 4">
					去取车
				</view>
				<view class="accept" @click="collect" v-if="form.statusCode ==5 && form.flowStatus == 5">
					确认取车
				</view>
				<view class="accept" @click="goProject" v-if=" form.statusCode ==4">
					添加收费服务
				</view>
				<view class="accept" @click="finish" v-if="form.statusCode ==4 && form.flowStatus==7 || form.flowStatus==8">
					检测完成
				</view>
				<view class="accept" @click.stop="goAlso" v-if="form.statusCode ==3 && form.flowStatus==12">
					去送车
				</view>
				<view class="accept" @click.stop="delivered" v-if="form.statusCode ==3&& form.flowStatus==13">
					车已送达
				</view>
				<view class="accept" @click.stop="evaluate" v-if=" form.flowStatus =='16' ">
					去评价
				</view>

			</view>
			<view class="func" v-if="form.checkType>20">
				<view class="accept" @click.stop="depart" v-if="form.flowStatus == '04'">
					出发
				</view>
				<view class="accept" @click.stop="arrive" v-if="form.flowStatus == '05'">
					到达现场
				</view>
				<view class="accept" @click.stop="help"
					v-if="(form.statusCode ==4 && form.flowStatus=='07' || form.flowStatus=='06'|| form.flowStatus=='08')">
					救援完成
				</view>
				<view class="accept" @click.stop="evaluate" v-if=" form.flowStatus =='12' ">
					去评价
				</view>
			</view>

		</view>
		<receive v-if="isSuccess" @cut="refresh" :titleCheckType="titleCheckType" />
		<upload :type="uptype" :taskId="taskId" v-if="isUpload" @cut="isUpload = false" @upSuccess="upSuccess" />
		<serviceDetail :subOrderId="subOrderId" @cut="isServiceDeatil =false" v-if="isServiceDeatil" />
		<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'
	export default {
		components: {
			receive,
			upload,
			serviceDetail,
			evaluate
		},
		data() {
			return {
				taskId: '',
				checkType: '',
				form: {},
				list: [],
				isSuccess: false,
				isUpload: false, //上传图片弹窗显隐
				uptype: '', //上传图片类型
				checkType: '', //上传图片修改状态用
				isServiceDeatil: false,
				subOrderId: '',
				iseEvaluate: false, //评论弹窗显隐
				userId: '', //传值给评论弹窗
				paramState: null,
				titleCheckType: null, //接单提示区分
				serveType: '', //服务类型
				rightsId: ''
			}
		},
		methods: {
			//返回
			back() {
				// uni.navigateBack({
				// 	delta: 1
				// });
				uni.switchTab({
					url: '/pages/order/index'
				})
			},
			//联系客户
			callUser() {
				uni.makePhoneCall({
					phoneNumber: this.form.contactsPhone,
					success: () => {
						uni.showToast({
							title: '正在拨号',
							icon: 'none'
						})
					},
					fail: (err) => {
						uni.showToast({
							title: '拨打失败: ' + err.errMsg,
							icon: 'none'
						})
					}
				})
			},
			//俩系客服
			callService() {
				uni.makePhoneCall({
					phoneNumber: this.form.custSerPhone,
					success: () => {
						uni.showToast({
							title: '正在拨号',
							icon: 'none'
						})
					},
					fail: (err) => {
						uni.showToast({
							title: '拨打失败: ' + err.errMsg,
							icon: 'none'
						})
					}
				})
			},
			refresh() {
				this.isSuccess = false
				this.getDeatil()
			},
			//获取详情
			getDeatil() {
				this.$http.get("/ts/merchant/details?taskId=" + this.taskId).then(res => {
					if (res.data.code == 200) {
						this.form = res.data.result
						console.log(this.form)
					}
				})
			},
			// 查看实况记录
			goLive() {
				uni.navigateTo({
					url: '/pages/order/serviceOrder/live?taskId=' + this.taskId + '&checkType=' + this.form.checkType
				})
			},
			// 查看图片
			goPhoto(type) {
				console.log(type)
				uni.navigateTo({
					url: '/pages/order/serviceOrder/photo?taskId=' + this.taskId + '&businessType=' + type
				})
			},
			// 接单
			receive() {
				this.titleCheckType = this.form.checkType
				let data = {
					taskId: this.taskId,
					checkType: this.checkType,
					paramState: '04',
					// serveType: '01'
				}
				this.form.checkType < 20 ? data.serveType = '01' : data.serveType = '02'
				this.$http.post("/ts/merchant/update/Serve", data).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.isSuccess = true
						this.getDeatil()
					}
				})
			},
			//收车上传照片
			collect() {
				this.paramState = '07'
				this.taskId = this.form.taskId
				this.checkType = this.form.checkType
				this.serveType = '01'
				//0 取车，1送车
				if (this.form.checkType == 0) {
					this.uptype = 1
				} else if (this.form.checkType == 1) {
					//客户送车，商户收车
					// if (this.form.statusCode == 3) {
					this.uptype = 2

					// }
				}
				this.isUpload = true
			},
			//送车到站————收车上传图片后修改状态
			upSuccess() {
				let data = {
					taskId: this.taskId,
					checkType: this.checkType,
					paramState: this.paramState, //商户上传图片成功
					// serveType: '01'
					serveType: this.serveType
				}

				this.$http.post("/ts/merchant/update/Serve", data).then(res => {
					if (res.data.code == 200) {
						this.isUpload = false
						this.getDeatil()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.message
						})
					}
				})
			},
			//检测完成上传检测图片
			finish() {
				this.paramState = '12'
				// this.taskId = item.taskId
				// this.checkType = item.checkType
				//0 取车，1送车
				this.uptype = 3
				this.isUpload = true
				// this.paramState = '12'
				this.serveType = '01'
				this.getDeatil()
			},
			//送车到站--确认取车
			takeCar(item) {
				let data = {
					taskId: this.form.taskId,
					checkType: this.form.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.getDeatil(page)
					}
				})
			},
			//跳转至服务项目页面
			goProject() {
				this.$http.get("/ts/merchant/addPaidServiceCheck?taskId=" + this.form.taskId).then(res => {
					console.log(res)
					if (res.data.result) {
						uni.navigateTo({
							url: '/pages/order/serviceOrder/project?checkType=' + this.form.checkType + '&taskId=' + this.form.taskId +
								'&orderNo=' + this.form.orderNo + '&productName=' + this.form.productName + '&type=' + 1
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '存在未支付服务项'
						})
					}
				})
			},
			
			//查看收费服务明细
			lookDetail(item) {
				this.subOrderId = item.orderNo
				this.isServiceDeatil = true
			},
			//评价弹窗显示
			evaluate() {
				this.iseEvaluate = true
				this.userId = this.form.userId
			},
			cutEvaluate() {
				this.iseEvaluate = false
				this.getDeatil()
			},
			//商户去取车
			goGetCar() {
				let data = {
					taskId: this.form.taskId,
					checkType: this.form.checkType,
					paramState: '05', //商户接单成功
					serveType: '01'
				}
				let that = this
				console.log(this.form)
				uni.openLocation({
					// longitude: Number(this.form.userLongitude),
					// latitude: Number(this.form.userLatitude),
					longitude: Number(this.form.userLongitude),
					latitude: Number(this.form.userLatitude),
					name: this.form.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
								that.getDeatil()

							}
						})
					},
					fail: function(error) {
						console.log(error)
					},
				})
			},
			//导航
			navigation(longitude, latitude, name) {
				console.log(this.form)
				// uni.openLocation({
				// 	longitude: Number(this.form.userLongitude),
				// 	latitude: Number(this.form.userLatitude),
				// 	name: this.form.carAddres, // 位置名称
				// 	// address: e.F_Address, // 位置地点
				// 	success: function(res) {
				// 		console.log('打开系统位置地图成功')
				// 	},
				// 	fail: function(error) {
				// 		console.log(error)
				// 	},
				// })
				uni.openLocation({
					longitude: Number(longitude),
					latitude: Number(latitude),
					name: name,
					// name: this.form.carAddress, // 位置名称
					// address: e.F_Address, // 位置地点
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					},
				})
			},
			goAlso() {
				let data = {
					taskId: this.form.taskId,
					checkType: this.form.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.getDeatil()
					}
				})
			},
			//商户点击车已送达
			delivered() {
				let data = {
					taskId: this.form.taskId,
					checkType: this.form.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.getDeatil()
					}
				})
			},
			//救援出发
			depart() {
				let data = {
					taskId: this.form.taskId,
					checkType: this.form.checkType,
					paramState: '05', //商户出发成功
					serveType: '02'
				}
				this.$http.post("/ts/merchant/update/Serve", data).then(res => {
					if (res.data.code == 200) {
						// this.isReceive = true
						this.getDeatil()
					}
				})

			},
			//救援到达现场
			arrive() {
				// this.taskId = this.form.taskId
				// this.checkType = this.form.checkType
				// this.uptype = 4 //道路救援
				// this.paramState = '06'
				// this.serveType = '02'
				// this.isUpload = true
				// this.getDeatil()
				let params = {
					taskId: this.form.taskId,
					checkType: this.form.checkType,
					uptype: 4, // 道路救援
					paramState: '06',
					serveType: '02',
					jumptype:1
					// isUpload: true
				}
				let queryString = Object.keys(params)
					.map(key => `${key}=${encodeURIComponent(params[key])}`)
					.join('&');
				uni.navigateTo({
					url: `/pages/order/arriveUpload?${queryString}`
				})
			},
			help() {
				this.taskId = this.form.taskId
				this.checkType = this.form.checkType
				this.uptype = 3
				this.isUpload = true
				this.paramState = '11'
				this.serveType = '02'
				this.getDeatil()
			},
		},
		onLoad(options) {		
			this.taskId = options.taskId
			this.checkType = options.checkType
			this.rightsId = options.rightsId
			this.getDeatil()
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.order_detail {
		width: 100vw;
		height: 100vh;
		background: #F8F8FA;
		display: flex;
		flex-direction: column;
		// overflow-y: auto;

		/*#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: #FFFFFF;
			position: relative;

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

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

		.over {
			padding: 0 24rpx;
			overflow-y: auto;
			flex: 1;

			.status_box {
				width: 100%;
				font-size: 36rpx;
				font-weight: 600;
				line-height: 42rpx;
				margin: 20rpx 0;

				span {
					font-size: 24rpx;
					color: #999999;
					line-height: 28rpx;
				}
			}

			.car_data {
				width: 100%;
				padding: 20RPX;
				background: #FFFFFF;
				border-radius: 12rpx;

				.car_id {
					font-size: 30rpx;
					font-weight: 600;

					span {
						display: inline-block;
						// width: 120rpx;
						padding: 0 24rpx;
						height: 40rpx;
						background: #F3F3F3;
						border-radius: 8rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #8D92A2;
						text-align: center;
						line-height: 40rpx;
						margin-left: 20rpx;
					}
				}

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

					span {
						width: auto;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 600;
						font-size: 30rpx;
						color: #333333;
						background: none;
						margin: 0;
					}

					.call {
						background: #F4F9FE;
						border-radius: 8rpx;
						padding: 6rpx 12rpx;
						font-size: 24rpx;
						color: #2D88F4;

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 8rpx;
						}
					}
				}

				.model {
					font-size: 26rpx;
					color: #666666;
					margin-top: 12rpx;
				}

				.car_name {
					border-top: 1px solid #eeeeee;
					padding-top: 16rpx;
					margin-top: 12rpx;
					font-size: 26rpx;
					font-weight: 600;
					color: #333333;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.call {
						background: #F4F9FE;
						border-radius: 8rpx;
						padding: 6rpx 12rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 8rpx;
						}
					}

				}

				.car_address {
					.address {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						image {
							width: 44rpx;
							height: 44rpx;
							margin-left: 18rpx;
						}
					}

					.car_license {
						font-weight: 600;
						font-size: 26rpx;
						color: #333333;
						margin-top: 12rpx;
					}
				}

				.name {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #eeeeee;
					padding-bottom: 14rpx;

					.user_name {
						font-weight: 600;
						font-size: 30rpx;
					}

					.call {
						width: 156rpx;
						height: 48rpx;
						background: #F4F9FE;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: #2D88F4;

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 8rpx;
						}
					}
				}

				.address {
					display: flex;
					align-items: start;
					justify-content: space-between;
					margin-top: 16rpx;
					margin-bottom: 12rpx;

					.location {
						font-size: 26rpx;
					}

					.go {
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 18rpx;
						color: rgba(45, 136, 244, 0.96);

						image {
							width: 44rpx;
							height: 44rpx;

						}
					}
				}

				.car_id {
					font-size: 26rpx;
				}
			}

			.product {
				width: 100%;
				background-color: #fff;
				margin-top: 16rpx;
				padding: 20rpx 32rpx;
				margin-bottom: 16rpx;

				.fat_product {
					width: 100%;
					display: flex;
					align-items: center;

					.product_img {
						width: 132rpx;
						height: 132rpx;
						border-radius: 12rpx;
						overflow: hidden;
						margin-right: 16rpx;

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

					.product_name {
						height: 132rpx;
						font-size: 28rpx;
						color: #333333;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

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

							text {
								font-size: 22rpx;
							}
						}
					}
				}

				.sun_product {
					width: 100%;
					// height: 126rpx;


					border-radius: 12rpx;
					margin-top: 20rpx;

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

					.sun_name {
						font-weight: 600;
						font-size: 26rpx;
					}

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

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

							tetx {
								font-size: 18rpx;
							}
						}

						.look {
							width: 144rpx;
							height: 48rpx;
							background: #FFFFFF;
							border-radius: 61rpx;
							border: 1px solid #2D88F4;
							font-size: 24rpx;
							color: #2D88F4;
							text-align: center;
							line-height: 48rpx;
						}
					}
				}


			}

			.time_line {
				background: #FFFFFF;
				border-radius: 16px;
				padding: 16rpx 32rpx;

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

					.left_title {
						font-weight: 600;

						.title {
							font-size: 28rpx;
							color: #2D88F4;
						}

						span {
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
			}

			.order_data {
				background-color: #FFFFFF;
				padding: 16rpx 32rpx;
				border-radius: 16rpx;
				margin-top: 16rpx;

				.order_item {
					border-bottom: 1px solid #EEEEEE;
					padding-bottom: 12rpx;
					margin-bottom: 16rpx;

					.item_title {
						font-weight: 600;
						font-size: 26rpx;
						color: #333333;

					}

					.item_child {
						margin-top: 12rpx;
						margin-right: 16rpx;
						display: flex;
						align-items: center;

						span {
							width: 130rpx;
							font-size: 26rpx;
							color: #666666;
						}

						.center {
							flex: 1;
						}
					}
				}
			}
		}

		.btn {
			width: 100%;
			height: 109rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: end;
			margin-top: 10rpx;
			font-size: 28rpx;
			padding-right: 24rpx;

			.customer {
				border-radius: 49rpx;
				border: 1px solid #2D88F4;
				padding: 14rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #2D88F4;
			}

			.accept {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 14rpx 32rpx;
				background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
				border-radius: 49rpx;
				margin: 0 24rpx;
				color: #FFFFFF;
			}

			.func {
				// flex: 1;
				display: flex;
				align-items: center;
				justify-content: end;

				.accept {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 14rpx 22rpx;
					background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
					border-radius: 49rpx;
					// margin: 0 24rpx;
					color: #FFFFFF;
				}
			}
		}



		::v-deep .u-dot {
			background-color: #2D88F4;
		}

	}
</style>