<template>
	<view>
		<view class="container">
			<!-- 未支付 -->
			<view class="not-pay-module" v-if="payOverTime > 0">
				<view class="pay-amount">
					<image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-wallet.png">
					</image>
					<view>
						待支付，剩余
						<text>{{ utils.formatOverTime(payOverTime) }}</text>
					</view>
				</view>
				<view class="over-time">超过30分钟未支付,订单将自动取消</view>
				<view class="pay-now" @tap.stop.prevent="payOrder" :data-id="orderInfo.id" :data-sn="orderInfo.orderSn"
					v-if="orderInfo.handleOption.pay">立即支付</view>
			</view>

			<!-- 卡片 -->
			<view class="top-card" :tt-if="orderInfo.orderStatusVal != '未支付' && orderInfo.orderStatusVal != '已取消'">
				<view class="top-name">{{ orderInfo.goodsName }}</view>

				<view class="top-times">
					<view class="top-sku-name">{{ orderInfo.skuName }}</view>
					<view>
						剩余
						<text>{{ remainTimes }}</text>
						次
					</view>
					<view class="serviced-times">
						已服务
						<text>{{ orderInfo.servedTimes }}</text>
						次
					</view>
				</view>
				<view class="top-tips">预约后，将为您上门服务，详情请咨询客服。</view>
				<!-- tt-if="{{orderInfo.orderStatusVal!='服务已完成'}}" -->
				<view class="appoint-tag" :data-detail="orderInfo.detailId" @tap="goAppoint"
					v-if="orderInfo.handleOption.book">预约服务</view>
			</view>

			<!-- 退款工单 -->
			<view class="refund-order-module" v-if="afterSale">
				<view class="refund-title">
					<view class="title-text">退款工单</view>
					<view class="title-order">编号：{{ afterSale.afterSn }}</view>
					<view class="title-status">{{ afterSale.statusVal }}</view>
				</view>
				<view class="refund-main">
					<view class="row">
						<text>申请时间：</text>
						{{ afterSale.createTime }}
					</view>
					<view class="row" v-if="afterSale.refundTime != null">
						<text>退款时间：</text>
						{{ afterSale.refundTime }}
					</view>
					<view class="row">
						<text>退款原因：</text>
						{{ afterSale.typeVal }}
					</view>
					<view class="row">
						<text>详细原因：</text>
						{{ afterSale.reason }}
					</view>
				</view>
				<view class="refuse-remark-wrapper" v-if="afterSale.statusVal == '已拒绝'">
					<view class="refuse-remark">
						<text>已拒绝：</text>
						{{ afterSale.refusalRemark }}
					</view>
				</view>
				<view v-if="afterSale.statu == '1'" class="refund-operate">
					<view @tap="cancelRefund">取消退款</view>
				</view>
			</view>

			<!-- 工单列表 -->
			<view class="service-list" v-if="dyDetails.length > 0">
				<van-collapse :value="activeNames" @change="onChange">
					<view class="service-item" v-for="(item, index) in dyDetails" :key="index">
						<van-collapse-item :name="index" class="problem-item" content-class>
							<view slot="title">
								<view class="service-title">

									<view class="service-status">{{ item.statusVal }}

										<view class="appoint-time" style="color: #999;"
											v-if="!activeNames.includes(index)">
											上门时段：{{ item.bookTime }}
										</view>
									</view>
									<view class="sercive-name">服务{{ utils.servciceName(index) }}</view>
								</view>
							</view>

							<view class="service-num">
								<view class="service-id">工单编号：{{ item.id }}</view>

							</view>

							<view class="service-main">
								<view class="customer-info">
									<image mode="aspectFit" src="https://mall.zhaijieshi.cc/file/wx-huawang/dw.png">
									</image>
									<view class="customer-main">
										<view class="main-line">
											<view>{{ item.customerName }}</view>
											<view class="phone">{{ item.customerPhone }}</view>
										</view>
										<view class="customer-address" v-if="item.addressName">
											{{ item.addressName }}{{ item.serviceAddress }}
										</view>
										<!-- <view class="customer-address" v-else-if="">{{ item.serviceAddress }}</view> -->
									</view>
								</view>
								<view class="row" v-if="isShowPL">
									<text>开始时间：</text>
									{{ item.bookStartTime }}
								</view>
								<view class="row" v-else-if="" style="justify-content: space-between;">
									<view class="">
										<text>上门时段：</text>
										{{ item.bookTime }}
									</view>

									<view style="display: flex;color: #CEB399;float: right;"
										v-if="item.serviceInfoList[0].isHwAuth&&!item.isMultiWorker"
										@tap="goHwWorker(item.serviceInfoList[0].servantId)">
										<view class="m">花王认证</view>
										<view class="r" style="padding-top: 4rpx;">
											<van-icon name="arrow" color="#CEB399" />
										</view>
									</view>
								</view>
								<view class="row" v-if="isShowPL">
									<text>服务内容：</text>
									{{ orderInfo.skuName }}
								</view>
								<view class="several-people" v-if="item.isMultiWorker">
									<view class="title-tips">
										<view class="image">
											<image src="https://jzmall.lifejingzhi.com/file/jzmall-dy/dr.png"
												mode="aspectFill"></image>
										</view>

										<view class="tips-content">
											本单为多人上门服务，上门时段可能不同，请您留意
										</view>
									</view>

									<view class="product-one" v-for="(iitem,iindex) in item.serviceInfoList"
										:key="iindex">
										<view class="service-name">
											{{iitem.skillName}}
										</view>
										<view class="service-peoplenum">
											({{iitem.workerNum}}人)
										</view>
										<view class="service-time">
											{{iitem.bookTime}}
										</view>
										<view class="isHwAuth" style="display: flex;"
											v-if="iitem.isHwAuth" @tap="goHwWorker(iitem.servantId)">
											<view class="m" style="color: #CEB399;">花王认证</view>
											<view class="r" style="padding-top: 4rpx;">
												<van-icon name="arrow" color="#CEB399" />
											</view>
										</view>
									</view>
								</view>
								<view class="row">
									<text>预约备注：</text>
									{{ item.customerRemark }}
								</view>
							</view>

							<view class="service-remark-wrapper">
								<view class="service-store">
									<!-- <view class="store-left">
										<image mode="aspectFit"
											src="https://mall.zhaijieshi.cc/file/wx-huawang/fangzi.png"></image>
										<view>{{ item.fraShopName }}</view>
									</view> -->

									<view class="store-right" @tap="makeStorePhone" :data-phone="item.shopPhone">
										<view>服务咨询</view>

										<image mode="aspectFit"
											src="https://mall.zhaijieshi.cc/file/wx-huawang/dianhua.png"></image>
									</view>
								</view>

								<view class="service-remark" v-if="item.reminder">
									<text>提醒：</text>
									{{ item.reminder }}
								</view>
							</view>

							<view v-if="item.ticketVo" class="ticket">
								<view class="title">
									<view style="font-weight: 600">售后进度</view>
									<view class="comment" @tap="showTicketTips" :data-id="item.ticketVo.ticketId"
										v-if="item.ticketVo.isSatisfaction">评价售后</view>
								</view>

								<view class="timeline">
									<block v-for="(action, index1) in item.ticketVo.actions" :key="index1">
										<view class="timeline-event">
											<view
												:style="index == 0 ? 'background-color: #d77958' : 'background-color: rgb(193 194 195)'"
												class="timeline-marker"></view>
											<view class="timeline-event-copy">
												<view class="timeline-event-thumbnail">
													<text
														:class="index == 0 ? '' : 'timeline-text'">状态：{{ action.status }}</text>
													<text class="timeline-text">{{ action.createTime }}</text>
												</view>
												<view class="timeline-event-content">
													<text class="timeline-text">{{ action.content }}</text>
												</view>
											</view>
										</view>
									</block>
								</view>
							</view>

							<view class="service-operate"
								v-if="item.status == 1 || item.status == 7 || item.acceptanceAble">

								<view v-if="item.isCancel" class="del" @tap="goCancelBook" :data-id="item.id"
									:data-phone="item.shopPhone">取消预约</view>
								<view class="blue-color"
									v-if="orderInfo.orderStatus == 201 || orderInfo.orderStatus == 205 || orderInfo.orderStatus == 206 || orderInfo.orderStatus == 301"
									@tap="showMsg">
									追加备注
								</view>
								<view v-if="item.canModify" @tap="goEditAppoint" :data-id="item.id"
									class="warning-color" :data-status="item.status" :data-time="item.bookTime">
									修改预约
								</view>
								<view v-if="item.acceptanceAble" @tap="goReVisit" :data-id="item.id" class="yanshou">
									服务验收</view>

							</view>
						</van-collapse-item>


					</view>
				</van-collapse>
			</view>

			<!-- 商品和订单信息 -->
			<view class="product-block">
				<view class="product-detail">
					<view class="profuct-info">
						<image mode="aspectFit" class="product-img" :src="orderInfo.picUrl"></image>
						<view class="info-right">
							<view class="info-main">
								<view class="product-name">{{ orderInfo.goodsName }}</view>
								<view class="price">
									¥
									<text style="font-size: 24rpx">{{ orderInfo.actualPrice }}</text>
								</view>
							</view>
							<view class="sku-name" v-if="orderInfo.increaseSumPrice">
								<view>加购: {{ orderInfo.unitDescribe }}*{{ orderInfo.unitIncreaseNumber }}</view>
								<view>¥{{ orderInfo.increaseSumPrice }}</view>
							</view>
							<view class="sku-name">规格:{{ orderInfo.skuName }}</view>
							<view class="other-info">服务{{ orderInfo.serviceTimes }}次</view>
						</view>
					</view>
				</view>
				<!-- 过期退，随时退 -->
				<view v-if="payOverTime > 0" class="refund-tips-bar">
					<image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-checkred.png">
					</image>
					<view>过期退</view>
					<image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-checkred.png">
					</image>
					<view>随时退</view>
					<image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-checkred.png">
					</image>
					<view>0费用</view>
					<image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-checkred.png">
					</image>
					<view>全国百城连锁</view>
				</view>
			</view>
			<view class="order-info">
				<view class="order-top">
					<view class="topic">订单编号：</view>
					<view class="content">
						{{ orderInfo.orderSn }}
					</view>
					<image mode="aspectFit" class="copy-img"
						src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-order-copy.png" @tap="copyOrder"></image>
				</view>
				<view class="order-top">
					<view class="topic">下单时间：</view>
					<view class="content">
						{{ orderInfo.createTime }}
					</view>
				</view>
				<view class="order-top">
					<view class="topic">支付方式：</view>
					<view class="content">
						{{ orderInfo.payChannel }}
					</view>
				</view>
				<view class="order-bottom">
					<view class="order-price">
						<view class="topic">订单金额：</view>
						<view>¥{{ orderInfo.orderPrice }}</view>
					</view>
					<view class="coupon-price">
						<view class="topic">优惠金额：</view>
						<view>¥{{ orderInfo.discountPrice }}</view>
					</view>
					<view class="real-price">
						实际付款：
						<text>¥{{ orderInfo.actualPrice }}</text>
					</view>
				</view>
			</view>
			<!-- 客户服务 -->
			<view class="customer-service" @tap="goIm">
				<view class="title">客户服务</view>
				<view class="contact-store" v-if="payOverTime > 0">
					<view class="topic">联系门店</view>
					<view class="remark">预约、服务信息咨询</view>
					<image mode="aspectFit" src="https://mall.zhaijieshi.cc/file/wx-huawang/dianhua.png"
						@tap="makeStorePhone" data-phone="4009218987"></image>
				</view>
				<view class="contact-company">
					<view class="topic">总部客服</view>
					<view class="remark">订单咨询、投诉建议</view>
					<image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-kf.png">
					</image>
					<!-- <button class="contact-btn" open-type="contact">客服</button> -->
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="fixed-bottom">
				<view class="remain-content" v-if="orderInfo.showAppointmentAlert">
					还剩{{orderInfo.notAppointmentTimes}}次可约，请记得预约哦
				</view>
				<view class="order-operate-wrapper">
					<view @tap.stop.prevent="cancelOrder" v-if="orderInfo.handleOption.cancel" :data-id="orderInfo.id"
						class="del">取消订单</view>
					<view v-if="orderInfo.handleOption.book" :data-detail="orderInfo.detailId" class="appoint"
						@tap.stop.prevent="goAppoint">预约服务</view>
					<view @tap.stop.prevent="payOrder" :data-id="orderInfo.id" :data-sn="orderInfo.orderSn"
						v-if="orderInfo.handleOption.pay" style="background: #d77958;!important">立即支付</view>
					<!-- <view class="blue-color"
						v-if="orderInfo.orderStatus == 201 || orderInfo.orderStatus == 205 || orderInfo.orderStatus == 206 || orderInfo.orderStatus == 301"
						@tap="showMsg">
						追加备注
					</view> -->
				</view>
			</view>
		</view>
		<!-- 投诉建议弹框 -->
		<view class="goods-info-overlay" v-if="complainTips">
			<view class="goods-info-popup">
				<view class="popup-title">投诉建议</view>
				<view class="tips-title">电话：{{ shopPhone }}</view>
				<view style="padding: 0 20rpx 100rpx 32rpx; margin-top: -20rpx">对服务不满意或其他建议，请拨打投诉电话。</view>
				<view class="popup-bottom">
					<view class="btn-cancel" @tap="cancelComplain">取消</view>
					<view class="btn-conf" @tap="confComplain">拨打电话</view>
				</view>
			</view>
		</view>

		<!-- 客户追加备注弹框 -->
		<view class="appoint-overlay-wrapper" v-if="msgShow" @tap="onMsgClose"></view>
		<view class="remark-popup" v-if="msgShow">
			<view class="title">订单备注</view>
			<textarea @input="bindMsgInput" placeholder="请输入订单备注信息,此信息会提醒到服务人员" :value="message"
				placeholder-style="font-size:26rpx;color:#666;" maxlength="100" class="remark-textarea"></textarea>
			<view class="btn" @tap="confirmMsg">确定</view>
		</view>

		<!-- 售后投诉满意回收 -->
		<!-- 	<view class="goods-info-overlay" v-if="ticketTips">
			<view class="goods-info-popup">
				<view class="popup-title">售后评价</view>

				<view class="ticket-tips-content">你的售后问题是否已被解决？您对售后服务是否满意？请打分。</view>
				<view style="display: flex; justify-content: center">
					<image class="ticket-img" data-id="1" @tap="selectTicketValue"
						:src="'/static/images/new/' + (satisfaction == 0 ? 'star' : satisfaction == 2 || satisfaction == 1 ? 'star_red' : 'star_yellow') + '.png'">
					</image>
					<image class="ticket-img" data-id="2" @tap="selectTicketValue"
						:src="'/static/images/new/' + (satisfaction <= 1 ? 'star' : satisfaction == 2 ? 'star_red' : 'star_yellow') + '.png'">
					</image>
					<image class="ticket-img" data-id="3" @tap="selectTicketValue"
						:src="'/static/images/new/' + (satisfaction >= 3 ? 'star_yellow' : 'star') + '.png'"></image>
					<image class="ticket-img" data-id="4" @tap="selectTicketValue"
						:src="'/static/images/new/' + (satisfaction >= 4 ? 'star_yellow' : 'star') + '.png'"></image>
					<image class="ticket-img" data-id="5" @tap="selectTicketValue"
						:src="'/static/images/new/' + (satisfaction == 5 ? 'star_yellow' : 'star') + '.png'"></image>
				</view>

				<view class="ticket-tips">{{ satisfactionTips.tips }}</view>
				<view class="popup-bottom">
					<view class="btn-cancel" @tap="cancelTicketTips">取消</view>
					<view class="btn-conf" @tap="confTicketTips">立即提交</view>
				</view>
			</view>
		</view> -->

		<!-- 选择取消原因 -->
		<view class="appoint-overlay-wrapper remark-overlay" v-if="cancelShow" @tap="onCancelPopupClose">
			<view class="remark-select" @tap.stop.prevent="onCancelClick">
				<view class="title">选择取消原因</view>
				<view class="remark-list">
					<view class="remark-item" :data-id="item.id" @tap.stop.prevent="cancelItemSelect"
						v-for="(item, index) in cancelList" :key="index">
						<view class="remark-value">{{ item.value }}</view>

						<image mode="aspectFit"
							src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-select-popup.png" class="radio-img"
							v-if="cancelReason == item.id"></image>

						<image mode="aspectFit"
							src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-unselect-popup.png"
							class="radio-img" v-else></image>
					</view>
				</view>
				<view class="remark-conf-btn" @tap.stop.prevent="cancelItemConfirm">取消预约</view>
			</view>
		</view>
	</view>
</template>
<script module="utils" lang="wxs" src="@/utils/formatFuc.wxs"></script>
<script>
	var util = require('../../../utils/util.js');
	var api = require('../../../config/api.js');
	export default {
		data() {
			return {
				excludeAxb: '',

				//订单不包含安心包，才可以退款
				orderId: 0,

				payOverTime: 0,
				timer: '',
				remainTimes: '',

				orderInfo: {
					handleOption: {
						book: false,
						pay: '',
						cancel: ''
					},

					detailId: '',
					id: '',
					orderSn: '',
					orderStatusVal: '',
					goodsName: '',
					skuName: '',
					servedTimes: '',
					picUrl: '',
					actualPrice: '',
					increaseSumPrice: '',
					unitDescribe: '',
					unitIncreaseNumber: '',
					serviceTimes: '',
					createTime: '',
					payChannel: '',
					orderPrice: '',
					discountPrice: '',
					orderStatus: 0
				},

				dyDetails: [],
				afterSale: null,
				orderGoods: [],
				expressInfo: {},
				flag: false,
				handleOption: {},
				orderType: 0,

				//如果是1表示从引荐人的订单列表过来的，需要隐藏操作按钮
				shopPhone: '',

				complainTips: false,
				ticketTips: false,

				//投诉工单 处理结果回收
				ticketId: '',

				//投诉id
				satisfaction: 0,

				//投诉处理满意度
				satisfactionTips: {
					tips: ''
				},

				satisfactionLow: {
					tips: '非常抱歉，我们会立即安排专属客服跟进了解具体问题！',
					notice: '您的评价是对我们最大的鼓励和鞭策，感谢您的评价。'
				},

				satisfactionMid: {
					tips: '我们会持续了解问题，为您提供更好的服务',
					notice: '感谢您的评价，我们会持续收集顾客的建议，优化服务！'
				},

				satisfactionHigh: {
					tips: '感谢您的认可，我们将为您持续提供优质服务',
					notice: '感谢您的认可，我们将持续为您提供更加优质的服务！'
				},

				// star: '/static/images/new/star.png',
				// starYellow: '/static/images/new/star_yellow.png',
				// starRed: '/static/images/new/star_red.png',
				msgShow: false,

				//客户追加备注
				message: '',

				//备注信息
				cancelList: [{
						id: 19,
						value: '临时有事，暂时不预约'
					},
					{
						id: 20,
						value: '先屯着后面预约'
					},
					{
						id: 21,
						value: '服务商原因,保洁师无法上门'
					}
				],

				//取消页面
				cancelShow: false,

				cancelDetailId: '',
				cancelReason: '',

				//选中的取消原因项
				//是否台数的商品 直接显示上门时间和服务内容
				isShowPL: false,

				action: {
					status: '',
					createTime: '',
					content: ''
				},
				activeNames: [0]
			};
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			this.setData({
				orderId: options.id,
				orderType: options.orderType
			});
			// this.getOrderDetail();
		},
		onShow: function() {
			// 页面显示
			this.getOrderDetail();
		},
		onPullDownRefresh() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载
			this.getOrderDetail();
			uni.hideNavigationBarLoading(); //完成停止加载
			uni.stopPullDownRefresh(); //停止下拉刷新
		},
		onReady: function() {
			// 页面渲染完成
		},
		onHide: function() {
			console.log('onHide');
			// clearInterval(this.data.timer);
		},
		onUnload: function() {
			console.log('onunload');
			clearInterval(this.timer);
		},
		methods: {
			goHwWorker(servantId) {
				console.log("我的打印", servantId);
				uni.navigateTo({
					url: '/pages/ucenter/resumeDetail/resumeDetail?servantId=' + servantId
				});
			},
			onChange(event) {
				console.log("event.detail", event.detail);
				this.setData({
					activeNames: event.detail,
				});
			},
			cancelItemConfirm() {
				let that = this;
				if (that.cancelReason == '') {
					util.showErrorToast('请选择取消原因');
					return;
				}
				uni.showLoading({
					title: '提交中'
				});
				util.request(
					api.OrderBookCancel, {
						detailId: that.cancelDetailId,
						cancelReason: that.cancelReason
					},
					'POST'
				).then((res) => {
					uni.hideLoading();
					if (res.errno === 0) {
						uni.showToast({
							title: '取消成功'
						});
						let items = that.dyDetails;
						items.forEach((item) => {
							if (item.id == that.cancelDetailId) {
								item.isCancel = false;
								item.statusVal = '已取消';
								item.status = 6;
							}
						});
						this.setData({
							cancelShow: false,
							dyDetails: items,
							'orderInfo.handleOption.book': true,
							'orderInfo.detailId': res.data
						});
						this.getOrderDetail();
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						});
					}
				});
			},

			goCancelBook(e) {
				//取消工单预约
				this.setData({
					cancelDetailId: e.currentTarget.dataset.id,
					cancelShow: true
				});
			},

			cancelItemSelect(e) {
				this.setData({
					cancelReason: e.currentTarget.dataset.id
				});
			},

			onCancelPopupClose() {
				this.setData({
					cancelShow: false
				});
			},

			onCancelClick() {
				//无实际意义 防止冒泡
			},

			cancelTicketTips() {
				this.setData({
					ticketTips: false
				});
			},

			showMsg() {
				this.setData({
					msgShow: true
				});
			},

			onMsgClose() {
				this.setData({
					msgShow: false
				});
			},

			confirmMsg() {
				if (this.message == '') {
					util.showErrorToast('请输入备注');
					return;
				}
				let that = this;
				uni.showLoading({
					title: '提交中'
				});
				util.request(
					api.OrderMsg, {
						orderId: that.orderId,
						message: that.message
					},
					'POST'
				).then(function(res) {
					uni.hideLoading();
					if (res.errno === 0) {
						uni.showToast({
							title: '提交成功'
						});
						//赋值给所有工单
						let dyDetails = that.dyDetails;
						dyDetails.forEach((item) => {
							item.customerRemark = that.message;
						});
						that.setData({
							msgShow: false,
							dyDetails: dyDetails
						});
					}
				});
			},

			bindMsgInput(e) {
				this.setData({
					message: e.detail.value
				});
			},

			showTicketTips(e) {
				let ticketId = parseInt(e.currentTarget.dataset.id);
				this.setData({
					ticketTips: true,
					ticketId: ticketId
				});
			},

			selectTicketValue(e) {
				//点击星号
				let id = parseInt(e.currentTarget.dataset.id);
				this.setData({
					satisfaction: id
				});
				let tips = this.satisfactionLow;
				if (id >= 3 && id < 5) tips = this.satisfactionMid;
				else if (id == 5) {
					tips = this.satisfactionHigh;
				}
				this.setData({
					satisfactionTips: tips
				});
			},

			confTicketTips() {
				if (this.satisfaction == 0) {
					util.showErrorToast('请选择满意度');
					return;
				}
				let that = this;
				uni.showLoading({
					title: '提交中'
				});
				util.request(
					api.TicketSatisfaction, {
						id: that.ticketId,
						satisfaction: that.satisfaction
					},
					'POST'
				).then(function(res) {
					if (res.errno === 0) {
						uni.hideLoading();
						//隐藏弹框并设置工单为已评论过
						let dyDetails = that.dyDetails;
						dyDetails.forEach((detail) => {
							if (detail.ticketVo && detail.ticketVo.ticketId == that.ticketId) {
								detail.ticketVo.isSatisfaction = false;
								console.info('进入');
								console.info(detail);
							}
						});
						that.setData({
							ticketTips: false,
							dyDetails: dyDetails
						});
						uni.showToast({
							title: that.satisfactionTips.notice,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},

			expandDetail: function() {
				let that = this;
				this.setData({
					flag: !that.flag
				});
			},

			getOrderDetail: function() {
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
				let that = this;
				util.request(api.OrderDetail, {
					orderId: that.orderId
				}).then(function(res) {
					if (res.errno === 0) {
						uni.hideLoading();
						console.log(11);
						//获取预约开始时间
						res.data.dyDetails.forEach((item) => {
							if (item.bookTime) {
								item.bookStartTime = item.bookTime.substring(0, 16);
							}
						});
						that.setData({
							orderInfo: res.data,
							dyDetails: res.data.dyDetails,
							afterSale: res.data.afterSale,
							payOverTime: res.data.payOverTime,
							remainTimes: res.data.serviceTimes - res.data.servedTimes,
							message: res.data.message
							// orderGoods: res.data.orderGoods,
							// handleOption: res.data.orderInfo.handleOption,
							// expressInfo: res.data.expressInfo
						});
						//是否为按台服务的商品--按台服务商品 展示服务内容 通过关键字：空调、油烟机、洗衣机、冰箱
						if (
							res.data.goodsName.indexOf('空调') >= 0 ||
							res.data.goodsName.indexOf('油烟机') >= 0 ||
							res.data.goodsName.indexOf('洗衣机') >= 0 ||
							res.data.goodsName.indexOf('冰箱') >= 0
						) {
							that.setData({
								isShowPL: true
							});
						}
						if (that.payOverTime > 0) {
							let timer = setInterval(() => {
								let newTime = that.payOverTime - 1;
								if (newTime >= 0) {
									that.setData({
										payOverTime: newTime
									});
								} else {
									clearInterval(that.timer);
								}
							}, 1000);
							that.setData({
								timer: timer
							});
						}
					}
					// let excludeAxb = res.data.orderGoods.every(item => {
					//   return item.goodsSn != '1036016';
					// });
					// that.setData({
					//   excludeAxb: excludeAxb
					// });
				});
			},

			// “去付款”按钮点击效果
			payOrder: function() {
				let that = this;
				util.request(
					api.OrderPayCheck, {
						orderId: that.orderInfo.id
					},
					'POST'
				).then(function(res) {
					if (res.errno === 0) {
						const outOrderNo = res.data;
						console.log(res);
						uni.continueToPay({
							// orderId: this.data.orderId, // 内部订单号
							outOrderNo: outOrderNo,
							// 外部订单号 2个订单号必填一个
							success: (res) => {
								console.log(res);
								const {
									orderId,
									outOrderNo
								} = res;
								console.log('success res', res);
								console.log('orderId', orderId, 'outOrderNo', outOrderNo);
								uni.redirectTo({
									url: '/pages/ucenter/order/order'
								});
							},
							fail: (res) => {
								console.log(res);
								const {
									orderId,
									outOrderNo,
									errNo,
									errMsg,
									errLogId
								} = res;
								if (errLogId) {
									console.log('查询订单信息失败', errNo, errMsg, errLogId);
								}
								if (orderId || outOrderNo) {
									console.log('支付失败', errNo, errMsg, orderId, outOrderNo);
								}
								util.showErrorToast('支付失败');
							}
						});
					}
				});
			},

			payOrder() {
				let that = this;
				util.request(
					api.OrderPrepay, {
						orderId: this.orderId
					},
					'POST'
				).then(function(res) {
					if (res.errno === 0) {
						const payParam = res.data;
						console.log('支付过程开始');
						uni.requestPayment({
							timeStamp: payParam.timeStamp,
							nonceStr: payParam.nonceStr,
							package: payParam.packageValue,
							signType: payParam.signType,
							paySign: payParam.paySign,
							success: function(res) {
								console.log('支付过程成功');
								that.getOrderDetail();
							},
							fail: function(res) {
								console.log('支付过程失败');
								util.showErrorToast('支付失败');
							},
							complete: function(res) {
								console.log('支付过程结束');
							}
						});
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						});
					}
				});
			},

			// “取消订单”点击效果
			cancelOrder: function() {
				let that = this;
				let orderInfo = that.orderInfo;
				uni.showModal({
					title: '',
					content: '确定要取消此订单？',
					confirmColor: '#D77958',
					success: function(res) {
						if (res.confirm) {
							util.request(
								api.OrderCancel, {
									orderId: orderInfo.id
								},
								'POST'
							).then(function(res) {
								if (res.errno === 0) {
									uni.showToast({
										title: '取消订单成功'
									});
									util.redirect('/pages/ucenter/order/order');
								} else {
									util.showErrorToast(res.errmsg);
								}
							});
						}
					}
				});
			},

			// “取消订单并退款”点击效果
			refundOrder: function() {
				let that = this;
				let orderInfo = that.orderInfo;
				uni.showModal({
					title: '',
					content: '确定要取消此订单？',
					success: function(res) {
						if (res.confirm) {
							util.request(
								api.OrderRefund, {
									orderId: orderInfo.id
								},
								'POST'
							).then(function(res) {
								if (res.errno === 0) {
									uni.showToast({
										title: '取消订单成功'
									});
									util.redirect('/pages/ucenter/order/order');
								} else {
									util.showErrorToast(res.errmsg);
								}
							});
						}
					}
				});
			},

			// “删除”点击效果
			deleteOrder: function() {
				let that = this;
				let orderInfo = that.orderInfo;
				uni.showModal({
					title: '',
					content: '确定要删除此订单？',
					success: function(res) {
						if (res.confirm) {
							util.request(
								api.OrderDelete, {
									orderId: orderInfo.id
								},
								'POST'
							).then(function(res) {
								if (res.errno === 0) {
									uni.showToast({
										title: '删除订单成功'
									});
									util.redirect('/pages/ucenter/order/order');
								} else {
									util.showErrorToast(res.errmsg);
								}
							});
						}
					}
				});
			},

			// “待上门”点击效果
			confirmOrder: function() {
				let that = this;
				let orderInfo = that.orderInfo;
				uni.showModal({
					title: '',
					content: '确认上门服务？',
					success: function(res) {
						if (res.confirm) {
							util.request(
								api.OrderConfirm, {
									orderId: orderInfo.id
								},
								'POST'
							).then(function(res) {
								if (res.errno === 0) {
									uni.showToast({
										title: '确认上门成功！'
									});
									util.redirect('/pages/ucenter/order/order');
								} else {
									util.showErrorToast(res.errmsg);
								}
							});
						}
					}
				});
			},

			// “申请售后”点击效果
			aftersaleOrder: function() {
				uni.navigateTo({
					url: '/pages/ucenter/applyRefund/applyRefund?id=' + this.orderId
				});
				// 0没申请 1申请没审核 2 客服审核通过 3 退款成功 4审核拒绝 5 用户取消 6退款中
				// util.redirect('/pages/ucenter/aftersale/aftersale?id=' + this.data.orderId);
				// if (this.data.orderInfo.afterSaleStatus === 0||this.data.orderInfo.afterSaleStatus === 4) {
				//    wx.navigateTo({
				//   url:'/pages/ucenter/applyRefund/applyRefund?id=' + this.data.orderId ,

				// });
				// } else {
				//   util.redirect('/pages/ucenter/aftersaleDetail/aftersaleDetail?id=' + this.data.orderId);
				// }
			},

			viewService() {
				uni.navigateTo({
					url: '../serviceDetail/serviceDetail?orderId=' + this.orderId
				});
			},

			buyAgain(e) {
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/pages/goods/goods?id=' + id
				});
			},

			copyOrder() {
				uni.setClipboardData({
					data: this.orderInfo.orderSn,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '订单编号复制成功',
									icon: 'success',
									duration: 2000
								});
							}
						});
					}
				});
			},

			cancelRefund() {
				let that = this;
				let afterSale = that.afterSale;
				uni.showModal({
					title: '',
					content: '确认取消退款？',
					success: function(res) {
						if (res.confirm) {
							util.request(
								api.AftersaleCancel, {
									orderId: afterSale.orderId,
									id: afterSale.id
								},
								'POST'
							).then(function(res) {
								if (res.errno === 0) {
									uni.showToast({
										title: '操作成功！'
									});
									that.getOrderDetail();
								} else {
									util.showErrorToast(res.errmsg);
								}
							});
						}
					}
				});
			},

			goReVisit(e) {
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/pages/extra/newRevisit/newRevisit?id=' + id,
					success: (res) => {},
					fail: (res) => {}
				});
			},

			goComplain(e) {
				let phone = e.currentTarget.dataset.phone;
				this.setData({
					shopPhone: phone,
					complainTips: true
				});
			},

			cancelComplain() {
				this.setData({
					complainTips: false
				});
			},

			confComplain() {
				uni.makePhoneCall({
					phoneNumber: this.shopPhone
				});
			},

			goEditAppoint(e) {
				let id = e.currentTarget.dataset.id;
				let status = e.currentTarget.dataset.status;
				// if (status == 1) {
				//   let time = e.currentTarget.dataset.time;
				//   let str = time.substr(0, 16).replace(/-/g, '/');
				//   let isNear = new Date(str).getTime() - new Date().getTime() - 2 * 60 * 60 * 1000;
				//   console.log(isNear);
				//   if (isNear < 0) {
				//     wx.showToast({
				//       title: '服务时间小于2小时，不能修改预约',
				//       icon: 'none',
				//       duration: 2000
				//     });
				//     return false;
				//   }
				// }
				uni.navigateTo({
					url: '/pages/ucenter/appointOrder/appointOrder?serviceId=' + id + '&orderId=' + this.orderInfo
						.id,
					success: (res) => {},
					fail: (res) => {}
				});
			},
			makeStorePhone(e) {
				uni.makePhoneCall({
					phoneNumber: e.currentTarget.dataset.phone
				});
			},

			goAppoint(e) {
				let id = e.currentTarget.dataset.id;
				let detailId = e.currentTarget.dataset.detail;
				uni.navigateTo({
					url: '/pages/ucenter/appointOrder/appointOrder?orderId=' + this.orderId + '&serviceId=' +
						detailId
				});
			},

			goIm() {
				uni.navigateTo({
					url: '/pages/im/im'
				});
			}
		}
	};
</script>
<style>
	.order-info {
		padding-top: 25rpx;
		background: #fff;
		height: auto;
		overflow: hidden;
	}

	.item {
		padding-left: 30rpx;
		/* height: 42.5rpx; */
		line-height: 52rpx;
		font-size: 30rpx;
		color: #333;
	}

	.item-c {
		margin-left: 31.25rpx;
		border-top: 1px solid #f4f4f4;
		height: 103rpx;
		line-height: 103rpx;
	}

	.item-c .l {
		float: left;
	}

	.item-c .r {
		height: 103rpx;
		float: right;
		display: flex;
		align-items: center;
		padding-right: 16rpx;
	}

	.item-c .r .btn {
		float: right;
	}

	.item-c .cost {
		color: #b4282d;
	}

	.item-c .btn {
		line-height: 66rpx;
		border-radius: 5rpx;
		text-align: center;
		margin: 0 15rpx;
		padding: 0 20rpx;
		height: 66rpx;
	}

	.item-c .btn.active {
		background: #b4282d;
		color: #fff;
	}

	.order-goods {
		margin-top: 20rpx;
		background: #fff;
	}

	.order-goods .h {
		height: 93.75rpx;
		line-height: 93.75rpx;
		margin-left: 31.25rpx;
		border-bottom: 1px solid #f4f4f4;
		padding-right: 31.25rpx;
	}

	.order-goods .h .label {
		float: left;
		font-size: 30rpx;
		color: #333;
	}

	.order-goods .h .status {
		float: right;
		font-size: 30rpx;
		color: #b4282d;
	}

	.order-goods .item {
		display: flex;
		align-items: center;
		height: 190rpx;
		padding-right: 30rpx;
		border-bottom: 1px solid #f4f4f4;
		margin: 20rpx 0;
	}

	.order-goods .item:last-child {
		border-bottom: none;
	}

	.order-goods .item .img {
		height: 190rpx;
		width: 190rpx;
		background: #f4f4f4;
	}

	.order-goods .item .img image {
		height: 190rpx;
		width: 190rpx;
		border-radius: 10rpx;
	}

	.order-goods .item .info {
		flex: 1;
		height: 190rpx;
		margin-left: 20rpx;
	}

	.order-goods .item .t {
		margin-top: 8rpx;
		line-height: 34rpx;
		margin-bottom: 10rpx;
		display: flex;
		justify-content: space-between;
	}

	.order-goods .item .t .name {
		color: #333;
		font-size: 30rpx;
	}

	.order-goods .item .t .number {
		height: 34rpx;
		text-align: right;
		line-height: 34rpx;
		color: #666;
		font-size: 28rpx;
	}

	.order-goods .item .attr {
		height: 29rpx;
		line-height: 29rpx;
		margin-top: 10rpx;
		color: #666;
		margin-top: 10rpx;
		font-size: 25rpx;
	}

	.order-goods .item .price {
		display: block;
		float: left;
		height: 30rpx;
		line-height: 30rpx;
		color: #333;
		font-size: 28rpx;
		margin-top: 16rpx;
	}

	.order-goods .item .btn {
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 5rpx;
		text-align: center;
		display: block;
		float: right;
		margin: 0 15rpx;
		padding: 0 20rpx;
	}

	.order-goods .item .btn.active {
		background: #b4282d;
		color: #fff;
	}

	.order-bottom1 {
		margin-top: 20rpx;
		padding-left: 31.25rpx;
		height: auto;
		overflow: hidden;
		background: #fff;
	}

	.order-bottom .address {
		/* height: 128rpx; */
		padding-top: 25rpx;
		border-top: 1px solid #f4f4f4;
		border-bottom: 1px solid #f4f4f4;
	}

	.order-bottom .address .t {
		height: 35rpx;
		line-height: 35rpx;
		margin-bottom: 20rpx;
	}

	.order-bottom .address .name {
		display: inline-block;
		height: 35rpx;
		/* width: 140rpx; */
		line-height: 35rpx;
		font-size: 30rpx;
		margin-right: 40rpx;
	}

	.order-bottom .address .mobile {
		display: inline-block;
		height: 35rpx;
		line-height: 35rpx;
		font-size: 30rpx;
	}

	.order-bottom .address .b {
		/* height: 35rpx; */
		line-height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
		text-align: justify;
	}

	.order-bottom .total {
		height: 130rpx;
		padding-top: 20rpx;
		border-bottom: 1px solid #f4f4f4;
	}

	.order-bottom .total .t {
		height: 44rpx;
		line-height: 44rpx;
		margin-bottom: 10rpx;
		display: flex;
	}

	.order-bottom .total .label {
		width: 150rpx;
		display: inline-block;
		height: 35rpx;
		line-height: 35rpx;
		font-size: 30rpx;
	}

	.order-bottom .total .txt {
		flex: 1;
		display: inline-block;
		height: 35rpx;
		line-height: 35rpx;
		font-size: 30rpx;
	}

	.order-bottom .pay-fee {
		height: 81rpx;
		line-height: 81rpx;
	}

	.order-bottom .pay-fee .label {
		display: inline-block;
		width: 140rpx;
		color: #b4282d;
	}

	.order-bottom .pay-fee .txt {
		display: inline-block;
		width: 140rpx;
		color: #b4282d;
	}

	.order-express {
		margin-top: 20rpx;
		width: 100%;
		height: 100rpx;
		background: #fff;
	}

	.order-express .title {
		float: left;
		margin-bottom: 20rpx;
		padding: 10rpx;
	}

	.order-express .ti {
		float: right;
		width: 52rpx;
		height: 52rpx;
		margin-right: 16rpx;
		margin-top: 28rpx;
	}

	.order-express .t {
		font-size: 29rpx;
		margin-left: 10.25rpx;
		color: #a78845;
	}

	.order-express .b {
		font-size: 29rpx;
		margin-left: 10.25rpx;
		color: #a78845;
	}

	.order-express .traces {
		padding: 17.5rpx;
		background: #fff;
		border-bottom: 1rpx solid #f1e6cdcc;
	}

	.order-express .trace {
		padding-bottom: 17.5rpx;
		padding-top: 17.5rpx;
		background: #fff;
	}

	.order-express .acceptTime {
		margin-top: 20rpx;
		margin-right: 40rpx;
		text-align: right;
		font-size: 26rpx;
	}

	.order-express .acceptStation {
		font-size: 26rpx;
	}

	/* 订单详情顶部 */
	.order-main-top {
		height: 200rpx;
		background: url('https://mall.zhaijieshi.cc/file/jzmall/weixin/order-detail-bg.png') no-repeat center;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 0 20rpx;
		padding: 0 24rpx;
	}

	.order-main-top view,
	.order-main-top text {
		color: #fff;
		font-size: 28rpx;
	}

	.order-main-top .order-detail-status {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.order-main-right {
		text-align: right;
	}

	.order-main-right .view-service {
		width: 148rpx;
		height: 44rpx;
		line-height: 44rpx;
		border-radius: 44rpx;
		border: 1rpx solid #fff;
		text-align: center;
		margin: 10rpx 0 0;
	}

	.order-main-right .current-times {
		font-size: 40rpx;
		font-weight: bold;
	}

	page {
		height: 100%;
		width: 100%;
		background: #f4f4f4;
	}

	.container {
		padding: 24rpx 24rpx 180rpx;
	}

	/* 未支付订单 */
	.not-pay-module {
		padding: 28rpx 0 48rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.not-pay-module .pay-amount {
		height: 50rpx;

		display: flex;
		align-items: center;
	}

	.not-pay-module .pay-amount image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 12rpx;
	}

	.not-pay-module .pay-amount {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.not-pay-module .pay-amount text {
		color: #ff0000;
	}

	.not-pay-module .over-time {
		height: 36rpx;
		font-size: 26rpx;
		color: #333;
		margin: 26rpx 0 44rpx;
	}

	.not-pay-module .pay-now {
		width: 160rpx;
		height: 56rpx;
		line-height: 56rpx;
		background: #d77858;
		border-radius: 28rpx;
		color: #f9f4f5;
		font-size: 24rpx;
		text-align: center;
	}

	/* 卡片 */
	.top-card {
		width: 702rpx;
		height: 224rpx;
		background: url('https://mall.zhaijieshi.cc/file/wx-huawang/bj.png') no-repeat center;
		background-size: 100% 100%;
		padding: 20rpx 30rpx 24rpx;
		color: #fff;
		position: relative;
	}

	.top-name-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 44rpx;
		overflow: hidden;
	}

	.top-name {
		height: 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
		line-height: 44rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.top-sku-name {
		font-size: 24rpx;
		font-weight: bold;
		color: #fff;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex: 1;
	}

	.top-times {
		margin: 12rpx 0 54rpx;
		display: flex;
		height: 42rpx;
		align-items: center;
	}

	.top-times view {
		font-size: 24rpx;
		font-weight: bold;
	}

	.top-times view.serviced-times {
		margin-left: 20rpx;
	}

	.top-times view text {
		font-size: 30rpx;
	}

	.top-tips {
		height: 28rpx;
		line-height: 28rpx;
		font-size: 20rpx;
	}

	.appoint-tag {
		position: absolute;
		top: 136rpx;
		right: 0;
		width: 196rpx;
		height: 64rpx;
		line-height: 64rpx;
		background: linear-gradient(316deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
		border-radius: 32rpx 0rpx 0rpx 32rpx;
		color: #d77958;
		font-size: 24rpx;
		text-align: center;
		font-weight: bold;
	}

	/* 退款工单 */
	.refund-order-module {
		margin-top: 24rpx;
		width: 702rpx;
		background: #fff;
		border-radius: 24rpx;
		padding: 0 24rpx;
	}

	.refund-title {
		height: 80rpx;
		display: flex;
		align-items: center;

		border-bottom: 2rpx solid #e0e0e0;
	}

	.refund-title .title-text {
		color: #191919;
		font-size: 30rpx;
		font-weight: bold;
	}

	.refund-title .title-order {
		flex: 1;
		color: #666666;
		font-size: 24rpx;
		margin: 0 10rpx;
	}

	.refund-title .title-status {
		color: #fcc17c;
		font-size: 26rpx;
	}

	.refund-main {
		padding: 12rpx 0;
	}

	.refund-main .row {
		height: 56rpx;
		line-height: 56rpx;
		display: flex;
		color: rgba(0, 0, 0, 0.9);
		font-size: 26rpx;
		font-weight: bold;
	}

	.refund-main .row text {
		color: #666666;
		font-weight: normal;
	}

	.refuse-remark-wrapper {
		padding: 24rpx 0;
		border-top: 2rpx solid #e0e0e0;
	}

	.refund-order-module .refuse-remark {
		width: 652rpx;
		height: 56rpx;
		line-height: 56rpx;
		background: #ebebeb;
		border-radius: 16rpx;
		color: #000000;
		padding: 0 16rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.refund-order-module .refuse-remark text {
		color: #fe2b54;
		font-weight: bold;
	}

	.refund-operate {
		padding: 24rpx 0;
		border-top: 2rpx solid #e0e0e0;
		display: flex;
		justify-content: flex-end;
	}

	.refund-operate view {
		width: 160rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 28rpx;
		border: 2rpx solid #d8d8d8;
		text-align: center;
		color: #666666;
		font-size: 24rpx;
	}

	/* 工单列表 */
	.service-item {
		margin-top: 24rpx;
		background: #ffffff;
		border-radius: 24rpx;
		width: 702rpx;
		padding: 0 24rpx;
	}



	.service-item .service-title {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 10rpx;
		padding-left: 5rpx;
		color: #999;
	}

	.van-collapse-item__content {
		padding: 0 !important;
	}

	.van-cell {
		padding: 10rpx 0 !important;
	}

	.van-cell__right-icon-wrap {
		margin-top: 15rpx !important;
	}

	.service-item .service-num {
		height: 80rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #e0e0e0;
		border-top: 2rpx solid #e0e0e0;
		justify-content: space-between;
		padding-right: 58rpx;
		padding-left: 5rpx;
		color: #999;
	}

	.service-title .sercive-name {
		color: #999;
		font-size: 30rpx;
		font-weight: bold;
	}

	.service-title .service-id {
		color: #666666;
		font-size: 24rpx;
		flex: 1;
	}

	.service-title .service-status {
		color: #d77958;
		font-size: 26rpx;
	}

	.service-main {
		padding: 12rpx 0 16rpx;
	}

	.customer-info {
		display: flex;
		align-items: center;
	}

	.customer-info image {
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
	}

	.customer-info .customer-main {
		display: flex;
		padding: 18rpx 0 4rpx;
		flex-direction: column;
		flex: 1;
	}

	.main-line {
		display: flex;
		height: 44rpx;
		margin-bottom: 4rpx;
		align-items: center;
	}

	.main-line view {
		color: #333333;
		font-size: 30rpx;
	}

	.main-line view.phone {
		color: #999999;
		font-size: 22rpx;
		margin-left: 14rpx;
	}

	.customer-info .customer-address {
		color: #666666;
		line-height: 40rpx;
	}

	.service-main .row {
		display: flex;
		color: rgba(0, 0, 0, 0.9);
		font-size: 26rpx;
		font-weight: bold;
		align-items: center;
		margin: 10rpx 0;
	}

	.service-main .row text {
		color: #666666;
		font-weight: normal;
	}

	.service-remark-wrapper {
		padding: 24rpx 0;
		border-top: 2rpx solid #e0e0e0;
	}

	.service-store {
		height: 36rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.service-store>view {
		display: flex;
		height: 36rpx;
		align-items: center;
	}

	.store-left image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 16rpx;
	}

	.store-left view {
		color: rgba(0, 0, 0, 0.9);
		font-size: 26rpx;
		font-weight: bold;
	}

	.store-right view {
		color: #333;
		font-size: 24rpx;
		font-weight: bold;
	}

	.store-right image {
		width: 24rpx;
		height: 24rpx;
		margin-left: 16rpx;
	}

	.service-remark-wrapper .service-remark {
		width: 652rpx;
		/* height: 56rpx; */
		line-height: 44rpx;
		background: #ebebeb;
		border-radius: 16rpx;
		color: #000000;
		padding: 8rpx 16rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.service-remark text {
		color: #fe2b54;
		font-weight: bold;
	}

	.service-operate {
		padding: 24rpx 0;
		border-top: 2rpx solid #e0e0e0;
		display: flex;
		justify-content: flex-end;
	}

	.service-operate view {
		width: 160rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 28rpx;
		text-align: center;
		color: #999;
		font-size: 24rpx;
		margin-left: 28rpx;
	}

	/* 产品订单信息 */
	.product-block {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 24rpx;
		margin: 24rpx 0;
	}

	.product-block .title {
		height: 88rpx;
		line-height: 78rpx;
	}

	.profuct-info {
		height: 190rpx;
		display: flex;
		align-items: flex-start;
	}

	.product-img {
		width: 190rpx;
		height: 190rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.info-right {
		/* padding-top: 10rpx; */
		flex: 1;
	}

	.info-main {
		display: flex;
		height: 40rpx;
		align-items: center;
		justify-content: space-between;
		/* margin-bottom: 58rpx; */
	}

	.info-right .sku-name {
		color: #666666;
		font-size: 24rpx;
		margin: 15rpx 0 24rpx 0;
		height: 34rpx;
		line-height: 34rpx;
		display: flex;
		justify-content: space-between;
	}

	.product-name {
		line-height: 40rpx;
		font-size: 28rpx;
		/* padding-left: 20rpx;
    text-indent: -16rpx; */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 328rpx;
		font-weight: bold;
		color: rgba(0, 0, 0, 0.9);
	}

	.info-main .price {
		color: rgba(0, 0, 0, 0.9);
		font-size: 18rpx;
		font-weight: bold;
	}

	.info-right .other-info {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.9);
		line-height: 34rpx;
	}

	.order-info {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 20rpx 24rpx;
	}

	.order-info .order-top {
		display: flex;
		align-items: center;
		height: 36rpx;
		margin-bottom: 9rpx;
	}

	.order-top view {
		font-size: 26rpx;
		color: #333;
	}

	.order-top view.topic {
		color: #666;
		margin-right: 16rpx;
		font-size: 24rpx;
	}

	.order-top view.content {
		color: #191919;
		font-weight: bold !important;
		font-size: 24rpx;
	}

	.order-top .copy-img {
		width: 24rpx;
		height: 24rpx;
		margin-left: 20rpx;
	}

	.order-bottom {
		border-top: 2rpx solid #e0e0e0;
		margin-top: 14rpx;
		padding-top: 16rpx;
	}

	.order-price,
	.coupon-price {
		display: flex;
		align-items: center;
		height: 36rpx;
		margin-bottom: 6rpx;
		justify-content: space-between;
	}

	.order-price view,
	.coupon-price view {
		font-size: 26rpx;
		color: rgba(0, 0, 0, 0.9);
		font-weight: bold;
	}

	.order-price view.topic,
	.coupon-price view.topic {
		color: #666;
		margin-right: 16rpx;
		font-weight: normal;
	}

	.order-bottom .real-price {
		display: flex;
		align-items: center;
		height: 36rpx;
		justify-content: flex-end;
		font-size: 26rpx;
		font-weight: bold;
	}

	.order-bottom .real-price text {
		color: #ff004e;
		font-size: 26rpx;
	}

	/* 客户服务 */
	.customer-service {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 0 24rpx;
		margin-top: 36rpx;
	}

	.customer-service .title {
		height: 52rpx;
		line-height: 52rpx;
		color: #191919;
		font-size: 30rpx;
		font-weight: bold;
	}

	.contact-store {
		border-bottom: 2rpx solid #e0e0e0;
	}

	.contact-store,
	.contact-company {
		height: 92rpx;
		display: flex;
		align-items: center;
	}

	.contact-company {
		position: relative;
	}

	.customer-service image {
		width: 24rpx;
		height: 24rpx;
	}

	.customer-service .topic {
		color: rgba(0, 0, 0, 0.9);
		font-size: 26rpx;
	}

	.customer-service .remark {
		flex: 1;
		color: #666666;
		font-size: 20rpx;
		margin-left: 14rpx;
		padding-top: 4rpx;
	}

	.contact-btn {
		height: 40rpx;
		width: 40rpx;
		position: absolute;
		top: 26;
		bottom: 26;
		right: 0;
		z-index: 99;
		opacity: 0;
	}

	/* 底部按钮 */
	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 14rpx 24rpx 24rpx;
	}

	.order-operate-wrapper {
			background: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
		flex-wrap: wrap;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.order-operate-wrapper>view {
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		margin-left: 20rpx;
		width: 160rpx;
		height: 56rpx;
		line-height: 56rpx;
		background: linear-gradient(90deg, #ff9c49 0%, #ff8219 100%);
		border-radius: 56rpx;
		margin-top: 10rpx;
	}

	.order-operate-wrapper>view.del {
		border: 2rpx solid #d8d8d8;
		color: #666666;
		background: #fff;
	}

	.order-operate-wrapper>view.appoint {
		background: linear-gradient(90deg, #D77958 0%, #B24615 100%);
		;
	}

	.order-operate-wrapper view.eval-btn {
		border: 2rpx solid #ff8219;
		color: #ff8219;
		background: #fff;
	}

	.refund-tips-bar {
		height: 34rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
	}

	.refund-tips-bar image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 4rpx;
	}

	.refund-tips-bar view {
		font-size: 24rpx;
		margin-right: 16rpx;
		color: #666;
	}

	/* 投诉建议弹框 */
	.goods-info-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.goods-info-popup {
		width: 622rpx;
		border-radius: 24rpx;
		background: #fff;
		overflow: hidden;
	}

	.popup-title {
		height: 94rpx;
		line-height: 94rpx;
		text-align: center;
		color: #ffffff;
		font-size: 34rpx;
		background: url('https://mall.zhaijieshi.cc/file/jzmall-dy/verify-dy-title.png') no-repeat center center;
		background-size: 100% 100%;
		background-color: #008dff;
	}

	.tips-title {
		/* height: 180rpx; */
		line-height: 40rpx;
		padding: 34rpx 32rpx;
		font-weight: 600;
		color: #191919;
		font-size: 28rpx;
	}

	.goods-info-popup .goods {
		display: flex;
		padding: 24rpx 20rpx 22rpx 22rpx;
	}

	.goods .img image {
		height: 168rpx;
		width: 168rpx;
		overflow: hidden;
		border-radius: 8rpx;
	}

	.goods .info {
		height: 168rpx;
		flex: 1;
		padding-left: 18rpx;
	}

	.info-main {
		display: flex;
		height: 40rpx;
		align-items: center;
		justify-content: space-between;
	}

	.info .sku-name {
		color: #666666;
		font-size: 24rpx;
		margin: 12rpx 0;
		height: 34rpx;
		line-height: 34rpx;
	}

	.product-name {
		line-height: 40rpx;
		font-size: 28rpx;
		/* padding-left: 20rpx;
    text-indent: -16rpx; */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 310rpx;
		font-weight: bold;
		color: rgba(0, 0, 0, 0.9);
	}

	.info-main .price {
		color: rgba(0, 0, 0, 0.9);
		font-size: 24rpx;
		font-weight: bold;
	}

	.info .other-info {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.9);
		line-height: 34rpx;
	}

	.popup-bottom {
		height: 106rpx;
		padding: 14rpx 104rpx 34rpx;
		display: flex;
		justify-content: space-between;
	}

	.btn-cancel {
		height: 58rpx;
		line-height: 58rpx;
		border-radius: 58rpx;
		width: 162rpx;
		text-align: center;
		color: #0091ff;
		font-size: 24rpx;
		border: 2rpx solid #0091ff;
	}

	.btn-conf {
		height: 58rpx;
		line-height: 58rpx;
		border-radius: 58rpx;
		width: 162rpx;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		background: linear-gradient(270deg, #00baff 0%, #008dff 100%);
	}

	.ticket {
		padding: 10rpx 20rpx;
		margin-bottom: 10px;
		background-color: rgb(247 240 240);
		border-radius: 15rpx;
	}

	.ticket .title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.ticket .comment {
		color: #09afff;
		text-decoration: underline;
	}

	.timeline {
		margin: 44rpx auto 0rpx auto;
		position: relative;
		width: 100%;
	}

	.timeline::before {
		background-color: #6dd1c9;
		content: '';
		margin-left: -1rpx;
		position: absolute;
		top: 0rpx;
		left: 8px;
		width: 2rpx;
		bottom: -250rpx;
		height: calc(100% - 47rpx);
	}

	.timeline-event {
		position: relative;
	}

	.timeline-event-copy {
		padding: 32rpx 24rpx;
		position: relative;
		top: -47rpx;
		left: 42rpx;
		width: 536rpx;
		background-color: #ffffff;
		/* margin-bottom: 20rpx; */
		border-radius: 20rpx;
	}

	.timeline-event-icon {
		background-color: #ffffff00;
		outline: 0rpx solid #ff0000;
		display: block;
		margin: 0rpx 0rpx 0rpx 0rpx;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		width: 28rpx;
		height: 28rpx;
	}

	.timeline-event-thumbnail {
		color: #333;
		font-weight: bold;
		font-size: 30rpx;

		display: inline-flex;
		width: 100%;
		margin-bottom: 0rpx;
		align-items: center;
		justify-content: space-between;
	}

	.timeline-event-content {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.timeline-text {
		font-weight: 100;
		color: #a09494;
		font-size: 15px;
	}

	.timeline-marker {
		border-radius: 50%;
		height: 15px;
		width: 15px;
	}

	.ticket-tips {
		color: rgb(179 165 165);
		font-size: 13px;
		text-align: center;
		padding: 10px 0;
		margin-bottom: 10px;
		height: 27px;
	}

	.ticket-tips-content {
		padding: 0 20rpx 40rpx 32rpx;
		margin-top: 21px;
		font-size: 16px;
	}

	.ticket-img {
		height: 45px;
		width: 45px;
	}

	.appoint-overlay-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999;
	}

	.remark-text {
		font-size: 26rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 486rpx;
		padding-left: 40rpx;
		margin: 0 10rpx 0 20rpx;
		text-align: right;
	}

	.remark-popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 860rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0px 0px;
		padding: 40rpx 30rpx 50rpx;
		z-index: 9999;
	}

	.remark-popup .title {
		height: 30rpx;
		line-height: 30rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.remark-textarea {
		width: 690rpx;
		height: 240rpx;
		background: #f8f8f8;
		border-radius: 10rpx;
		padding: 20rpx 36rpx 36rpx 20rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		margin: 30rpx 0 330rpx;
		box-sizing: border-box;
	}

	.remark-popup .btn {
		width: 690rpx;
		height: 100rpx;
		background: #d77958;
		border-radius: 50rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		text-align: center;
		color: #fff;
	}

	.blue-color {
		color: #d77958 !important;
		;
		border: 1rpx solid #d77958 !important;
		background-color: #fff !important;
		;
	}

	.warning-color {
		background: linear-gradient(90deg, #af4318 0%, #c96405 100%) !important;
		color: #fff !important;
	}

	.yanshou {
		background: #CBAE92;
		color: #fff !important;
	}

	.appoint-overlay-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999;
	}

	/* 选择时间 */
	view.popup-wrapper {
		/* padding: 0 0 20rpx; */
		color: #333;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* height: 80%; */
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 9999;
		border-radius: 36rpx 36rpx 0rpx 0rpx;
		overflow: hidden;
	}

	view.popup-wrapper view.confirm-btn {
		background: #09afff;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 88rpx;
		text-align: center;
		color: #fff;
	}

	/* 选择备注 */
	.appoint-overlay-wrapper.remark-overlay {
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	.remark-select {
		width: 750rpx;
		padding: 0 24rpx 56rpx;
		background: #ffffff;
		border-radius: 24rpx 24rpx 0 0;
	}

	.remark-select .title {
		font-weight: 600;
		color: #191919;
		font-size: 30rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-bottom: 2rpx solid #e0e0e0;
	}

	.remark-item .remark-value {
		color: #191919;
		font-size: 26rpx;
		font-weight: bold;
		flex: 1;
		text-align: left;
	}

	.remark-list .remark-item {
		height: 84rpx;
		display: flex;
		border-bottom: 2rpx solid #e0e0e0;
		align-items: center;
	}

	.remark-item .radio-img {
		width: 26rpx;
		height: 26rpx;
	}

	.remark-conf-btn {
		width: 652rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 90rpx;
		border: 4rpx solid #d77958;
		text-align: center;
		font-size: 36rpx;
		color: #d77958;
		margin: 0 auto;
		margin-top: 54rpx;
	}

	.several-people {
		border-radius: 18rpx;
		background-color: #FFEEE2;
		width: 650rpx;
		margin: auto;
		padding: 16rpx;
	}

	.title-tips {
		display: flex;
	}

	.title-tips .tips-content {
		font-size: 16rpx;
		margin-left: 8rpx;
		color: #999;
		height: 36rpx;
		padding-top: 5rpx;
	}

	.title-tips .image {
		width: 51rpx;
		height: 36rpx;
	}

	.title-tips .image image {
		width: 100%;
		height: 100%;
	}

	.product-one {
		margin-top: 10rpx;
		display: flex;
		height: 40rpx;
		line-height: 40rpx;
		/* justify-content: space-between; */
	}

	.product-one .service-name {
		margin-right: 6rpx;
		font-size: 24rpx;
		width: 96rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.product-one .service-peoplenum {
		margin-right: 10rpx;
		font-size: 24rpx;
		    width: 50rpx;
		    white-space: nowrap;
	}

	.product-one .service-time {
		color: #000;
		font-size: 24rpx;
		width: 300rpx;
	}
	.remain-content{
		    height: 50rpx;
		    background-color: #FEEBD7;
		    color: #000;
		    line-height: 50rpx;
		    border-radius: 12rpx;
		    font-size: 24rpx;
		    font-weight: bold;
		    padding-left: 20rpx;
	}
</style>