jzmall_uni/pages/ucenter/orderDetail/orderDetail.vue

<template>
	<view>
		<!-- <sjs src="../../../utils/formatFuc.sjs" module="utils" /> -->
		<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>{{ 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>
				<view class="appoint-tag" @tap="goAppoint" v-if="orderInfo.handleOption.book">预约服务</view>
			</view> -->
			<view class="top-new" v-if="orderInfo.orderStatusVal != '未支付'">
				<image mode="aspectFit" class="top-bg-img"
					src="https://jzmall.lifejingzhi.com/file/jzmall-dy/detail-bg-01.png"></image>
				<image mode="aspectFit" class="top-bg-img2"
					src="https://jzmall.lifejingzhi.com/file/jzmall-dy/detail-bg-02.png"></image>
				<view class="status-val">{{orderInfo.bookDetailServiceTip.masterTipContent}}</view>
				<view class="status-tips">{{orderInfo.bookDetailServiceTip.secondTipContent}}</view>
				<view class="book-detail-tip" v-if="orderInfo.bookDetailServiceTip.tip">
					{{orderInfo.bookDetailServiceTip.tip}}
				</view>
				<!-- 				未付款                 如有任何问题，请及时联系我们！       
				用户取消             期望下次为您提供更优质的服务！  
				系统取消             期望下次为您提供更优质的服务！ 
				已取消(管理员)    期望下次为您提供更优质的服务！
				已付款              如有任何问题，请及时联系我们！
				申请退款           如有任何问题，请及时联系我们！
				已退款               如有任何问题，请及时联系我们 ！
				服务中               服务预约成功，等待上门…
				服务已完成         期望下次为您提供更优质的服务！  
				服务已完成(系统)     期望下次为您提供更优质的服务！ -->
			</view>

			<!-- 未预约服务 -->
			<view class="not-appoint-block" v-if="orderInfo.bookDetailServiceTip.canBookCount>=1">
				<view class="not-appoint-title">
					<view>未预约服务</view>
					<view class="not-appoint-times">剩余服务 {{orderInfo.bookDetailServiceTip.canBookCount}} 次</view>
				</view>
				<view class="not-appoint-btn" @tap="goAppoint">
					立即预约
				</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">
						<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">
			      	<view :class="'service-item-wrapper '+(item.statusVal=='服务已完成'?'finish-wrapper ':'')"	v-for="(item, index) in dyDetails" :key="index">
			      		  <view	:class="'list-title '+(item.isFold?'fold-title ':'')+(item.statusVal=='服务已完成'?'finish-title ':'')" @tap="toggleService" :data-index="index">
			      			<view class="list-title-left">
			      				<view>{{item.statusVal}}</view>
			      				<view class="item-appoint-time" v-if="item.isFold">{{item.bookTime}}</view>
			      			</view>
			      			<view class="list-title-right">
			      				<view v-if="item.serviceTimes"> {{item.serviceTimes}}</view>
			      				<image mode="aspectFit" class="arrow-white"
			      					src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-arrow-white.png">
			      			</view>
			      
			      		  </view>
			      		<view class="service-item" v-show="!item.isFold">
			      			<!-- <view class="service-title">
			      			<view class="sercive-name">服务{{ servciceName(index) }}</view>
			      			<view class="service-id">工单编号：{{ item.id }}</view>
			      			<view class="service-status">{{ item.statusVal }}</view>
			      		</view> -->
			      			<view class="service-title-new">
			      				<view class="title-text">
			      					<view>预约时间</view>
			      					<view class="service-status">{{ item.statusVal }}</view>
			      
			      				</view>
			      				<view class="main-text">
			      					{{ item.bookTime }}
			      				</view>
			      			</view>
			      			<view class="service-main">
			      				<view class="customer-info">
			      					<!-- 				<image mode="aspectFit"
			      					src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-map.png"></image> -->
			      					<view class="title-text">
			      						<view>上门信息</view>
			      					</view>
			      					<view class="customer-main">
			      						<view class="customer-address main-text">{{ item.serviceAddress }}</view>
			      						<view class="main-line main-text">
			      							<view>{{ item.customerName }}</view>
			      							<view class="phone">{{ item.customerPhone }}</view>
			      						</view>
			      						<!-- 			<view class="customer-address" v-if="item.addressName">{{ item.addressName }}</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="">
			      				<text>上门时段：</text>
			      				{{ item.bookTime }}
			      			</view>
			      			<view class="row" v-if="isShowPL">
			      				<text>服务内容：</text>
			      				{{ orderInfo.skuName }}
			      			</view>
			      			<view class="row">
			      				<text>预约备注：</text>
			      				{{ item.customerRemark }}
			      			</view> -->
			      			</view>
			      			<view class="service-remark-new">
			      				<view class="title-text">
			      					预约备注
			      
			      				</view>
			      				<view class="remark-text">
			      					{{ item.customerRemark }}
			      				</view>
			      
			      			</view>
			      			<view class="service-remark-wrapper">
			      				<view class="service-store" style="margin-bottom:10rpx;">
			      					<view class="store-left">
			      						<view>工单编号</view>
			      						<!-- 			<image mode="aspectFit"
			      						src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-store.png"></image>
			      					<view>{{ item.fraShopName }}</view> -->
			      					</view>
			      					<!-- <view class="store-right" @tap="makeStorePhone" :data-phone="item.shopPhone"> -->
			      					<view class="store-right">
			      						<view>
			      							{{ item.id }}
			      						</view>
			      						<view @tap="copyOrder" class="copy-text" :data-id="item.id">复制</view>
			      						<!-- 					<view>服务咨询</view>
			      					<image mode="aspectFit"
			      						src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-phone.png"></image> -->
			      					</view>
			      				</view>
			      				<view class="service-store">
			      					<view class="store-left">
			      						<!-- 	<image mode="aspectFit"
			      						src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-store.png"></image> -->
			      						<view>核销门店</view>
			      					</view>
			      					<view class="store-right">
			      						<view>{{ item.fraShopName }}</view>
			      						<image mode="aspectFit" @tap="makeStorePhone" :data-phone="item.shopPhone"
			      							src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-phone-new.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: #09afff' : 'background-color: rgb(193 194 195)'"
			      								class="timeline-marker"></view>
			      							<!-- <view wx:else style="background-color: rgb(193 194 195);border-radius: 50%; height: 15px;width: 15px;"></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">
			      				<view v-if="item.canModify" :data-id="item.id" @tap="showMsg" class="btn-msg">追加备注</view>
			      				<view v-if="item.canModify" @tap="goEditAppoint" :data-id="item.id"
			      					:data-status="item.status" :data-time="item.bookTime">
			      					修改预约
			      				</view>
			      
			      				<view v-if="item.acceptanceAble" @tap="goReVisit" :data-id="item.id">服务验收</view>
			      				<view v-if="item.isCancel" class="warning-color" @tap="goCancelBook" :data-id="item.id"
			      					:data-phone="item.shopPhone">取消预约</view>
			      			</view>
			      		</view>
			            </view>
			      			</view>	  
			
					<!-- 商品和订单信息 -->
					<view class="product-block">
						<view class="product-detail">
							<view class="profuct-info">
								<image mode="aspectFit" class="product-img" :src="orderInfo.picUrl + '?w=200'"></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-title">
							订单信息
						</view>
						<view class="order-top">
							<view class="topic">订单编号：</view>
							<view class="ordersn-wrapper">
								<view>
									{{ orderInfo.orderSn }}
								</view>
								<view class="copy-text" @tap="copyOrder" :data-id="orderInfo.orderSn">复制</view>
								<!-- <image mode="aspectFit" class="copy-img"
					src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-order-copy.png" @tap="copyOrder" :data-id="orderInfo.orderSn"></image> -->
							</view>
						</view>
						<view class="order-top">
							<view class="topic">下单时间：</view>
							<view>
								{{ orderInfo.createTime }}
							</view>
						</view>
						<view class="order-top">
							<view class="topic">支付方式：</view>
							<view>
								{{ orderInfo.payChannel }}
							</view>
						</view>
						<view class="order-top">
							<view class="topic">订单金额：</view>
							<view>
								{{ orderInfo.orderPrice }}
							</view>
						</view>
						<view class="order-top">
							<view class="topic">优惠金额：</view>
							<view>
								{{ orderInfo.discountPrice }}
							</view>
						</view>
						<view class="order-top">
							<view class="topic">实际付款：</view>
							<view>
								{{ orderInfo.actualPrice }}
							</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">
						<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://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-phone.png"
								@tap="makeStorePhone" data-phone="4009218987"></image>
						</view>
						<view class="contact-company" @tap="goIM">
							<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="order-operate-wrapper">
							<view @tap.stop.prevent="cancelOrder" v-if="orderInfo.handleOption.cancel"
								:data-id="orderInfo.id" class="del">取消订单</view>
					<!-- 		<view @tap.stop.prevent="aftersaleOrder" v-if="orderInfo.handleOption.refund"
								:data-id="orderInfo.id" class="del">申请退款</view> -->
								
							<!-- v-if="orderInfo.handleOption.refund" -->
							<!-- <view  data-id="{{orderInfo.id}}" data-sn="{{orderInfo.orderSn}}" data-aid="{{orderInfo.addressId}}"

        data-type="{{orderInfo.type}}" wx:if="{{orderInfo.handleOption.book}}" class="eval-btn">评价</view> -->

							<view v-if="orderInfo.handleOption.book" 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">立即支付</view>


						<view class="btn-rebuy" @tap.stop.prevent="buyAgain" :data-id="orderInfo.goodsId"
							v-if="orderInfo.orderStatusVal != '未支付'">再来一单</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" style="display: flex; justify-content: space-between">
							<view>订单备注</view>
							<view style="font-size: 18rpx; color: #09afff; margin-top: 18px">{{ message.length }}/50
							</view>
						</view>
						<textarea @input="bindMsgInput" placeholder="请输入订单备注信息,此信息会提醒到服务人员" :value="message"
							placeholder-style="font-size:26rpx;color:#666;" maxlength="50"
							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>
			
			<contact-mov :pageX="30" :pageY="420"></contact-mov>
			<view class="refund-order-overlay" v-if="refundTipShow">
				<view class="refund-order-dialog">
					<view class="refund-dia-tips">您遇到任何问题都可联系在线客服，我们将竭诚为您解决问题！</view>
					<view class="dia-btn-wrapper">
						<view class="dia-cancel-btn" @tap="refundOrder">继续退款</view>
						<view class="dia-conf-btn" @tap="goIM">联系在线客服</view>

					</view>
				</view>
			</view>
		
	</view>
	</view>
	</view>
</template>

<script>
	var util = require('../../../utils/util.js');
	var api = require('../../../config/api.js');
	import contactMov from '@/components/contact-mov';
	export default {
		components: {
			contactMov
		},
		data() {
			return {
				excludeAxb: '',

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

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

				orderInfo: {
					bookDetailServiceTip: {
						canBookCount: 0,
					},
					handleOption: {
						book: false,
						pay: '',
						cancel: '',
						refund: ''
					},

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

				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: '',

				//备注信息
				msgDetailId: '',

				//备注工单号
				cancelList: [{
						id: 19,
						value: '【个人原因】临时有事暂时不预约'
					},
					{
						id: 20,
						value: '【个人原因】先囤着以后再约'
					},
					{
						id: 22,
						value: '【个人原因】计划有变不需要了'
					},
					{
						id: 21,
						value: '【商家原因】保洁师无法上门服务'
					},
					{
						id: 23,
						value: '  其他'
					}
				],

				//取消页面
				cancelShow: false,

				cancelDetailId: '',
				cancelReason: '',

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

				action: {
					status: '',
					createTime: '',
					content: ''
				},
				refundTipShow: false,
				refundId: ''

			};
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			this.setData({
				orderId: options.id,
				orderType: options.orderType
			});
			// this.getOrderDetail();
		},
		onShow: function() {
			// 页面显示
			this.getOrderDetail();
			util.addLog(1, 7, 16, {
				orderId: this.orderId
			});
		},
		onPullDownRefresh() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载
			this.getOrderDetail();
			uni.hideNavigationBarLoading(); //完成停止加载
			uni.stopPullDownRefresh(); //停止下拉刷新
		},
		onReady: function() {
			// 页面渲染完成
		},
		onHide: function() {
			console.log('onHide');
			util.addLog(2, 7, 16, {
				orderId: this.orderId
			});
			// clearInterval(this.data.timer);
		},
		onUnload: function() {
			console.log('onunload');
			clearInterval(this.timer);
		},
		methods: {
			formatOverTime(time) {
				var minute = '00';
				var second = '00';
				if (time > 0) {
					minute = (Math.floor(time / 60) < 10 ? ('0' + Math.floor(time / 60)) : Math.floor(time / 60));
					second = (Number(time % 60).toFixed(0) < 10 ? ('0' + Number(time % 60).toFixed(0)) : Number(time % 60)
						.toFixed(0));
				}

				var result = "00:" + minute + ":" + second;

				return result;

			},
			servciceName(index) {
				var modelText = '';
				switch (index) {
					case 0:
						modelText = '一';
						break;
					case 1:
						modelText = '二';
						break;
					case 2:
						modelText = '三';
						break;
					case 3:
						modelText = '四';
						break;
					case 4:
						modelText = '五';
						break;
					case 5:
						modelText = '六';
						break;
					case 6:
						modelText = '七';
						break;
					case 7:
						modelText = '八';
						break;
					default:
						modelText = '';
				}
				return modelText;
			},
			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) => {
							item.isFold = true;
							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
						});
					}
				});
			},
			toggleService(e) {
				let index = e.currentTarget.dataset.index;
				let list = this.dyDetails;
				list[index].isFold = !list[index].isFold;
				this.setData({
					dyDetails: list
				})
			},

			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(e) {
				let detailId = e.currentTarget.dataset.id;
				let bookMsg = null;
				this.dyDetails.forEach((item) => {
					if (item.id == detailId) {
						bookMsg = item.customerRemark;
					}
				});
				this.setData({
					msgShow: true,
					msgDetailId: e.currentTarget.dataset.id,
					message: bookMsg ? bookMsg : this.message
				});
			},

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

			confirmMsg() {
				if (this.message == '') {
					util.showErrorToast('请输入备注');
					return;
				}
				let that = this;
				uni.showLoading({
					title: '提交中'
				});
				util.request(
					api.ServiceOrderBookMsg, {
						detailId: that.msgDetailId,
						message: that.message
					},
					'POST'
				).then(function(res) {
					uni.hideLoading();
					if (res.errno === 0) {
						uni.showToast({
							title: '提交成功'
						});
						//赋值给所有工单
						let dyDetails = that.dyDetails;
						dyDetails.forEach((item) => {
							item.isFold = true;
							if (item.id == that.msgDetailId) {
								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) => {
							detail.isFold = true;
							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();

						//获取预约开始时间
						res.data.dyDetails.forEach((item) => {
							item.isFold = true;
							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('支付失败');
							}
						});
					}
				});
			},

			// “取消订单”点击效果
			cancelOrder: function() {
				let that = this;
				let orderInfo = that.orderInfo;
				uni.showModal({
					title: '',
					content: '确定要取消此订单？',
					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);
								}
							});
						}
					}
				});
			},
			refundOrder: function() {
				this.setData({
					refundTipShow: false
				});

				uni.navigateTo({
					url: '/pages/ucenter/applyRefund/applyRefund?id=' + this.orderId
				});
			},
			// “申请售后”点击效果
			aftersaleOrder: function() {
				this.setData({
					refundTipShow: true,
				});

				// 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);
				// }
			},
			goIM() {
				this.setData({
					refundTipShow: false
				});
				console.info('goIm');
				uni.navigateTo({
					url: '/pages/chat/im/im'
				});
			},
			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(e) {
				let id = e.currentTarget.dataset.id + '';
				console.log(id);
				uni.setClipboardData({
					data: id,
					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) => {}
				});
			},

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

			makeStorePhone(e) {
				uni.makePhoneCall({
					phoneNumber: e.currentTarget.dataset.phone
				});
			},

			goIM() {
				console.info('goIm');
				uni.navigateTo({
					url: '/pages/chat/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; */
		padding: 0 0 180rpx;
		background: linear-gradient(210deg, rgba(123, 207, 255, 0.06) 0%, rgba(218, 218, 218, 0.28) 100%);
	}

	/* 未支付订单 */
	.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: linear-gradient(90deg, #ff9c49 0%, #ff8219 100%);
		border-radius: 28rpx;
		color: #f9f4f5;
		font-size: 24rpx;
		text-align: center;
	}

	/* 卡片 */
	.top-card {
		width: 702rpx;
		height: 224rpx;
		background: url('https://mall.zhaijieshi.cc/file/jzmall-dy/order-card-bg.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: #ff8219;
		font-size: 24rpx;
		text-align: center;
		font-weight: bold;
	}

	/* 退款工单 */
	.refund-order-module {
		margin-bottom: 24rpx;
		width: 750rpx;
		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;
		margin-bottom: 0;
	}

	.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: 28rpx 28rpx 0px 0px;
		width: 750rpx;
		/* padding: 0 24rpx; */
	}

	.service-item .service-title {
		height: 80rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #e0e0e0;
	}

	.service-item .service-title-new {
		height: 200rpx;
		padding: 50rpx 48rpx 0 38rpx;
		border-bottom: 1rpx solid #EBEBEB;
	}

	.title-text {
		display: flex;
		height: 40rpx;
		margin-bottom: 32rpx;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #999;
	}

	.title-text .service-status {
		font-weight: 600;
		color: #09AFFF;
	}

	.main-text {
		/* height: 40rpx; */
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
		line-height: 40rpx;
		letter-spacing: 1rpx;
	}

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

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

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

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

	.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: 32rpx; */
	}

	.main-line view.phone {
		/* color: #999999;
		font-size: 24rpx; */
		margin-left: 12rpx;
	}

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

	.service-main .row {
		/* height: 56rpx;
  line-height: 56rpx; */
		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;
		/* white-space: nowrap; */
	}

	.service-remark-wrapper {
		/* padding: 24rpx 0;
		border-top: 2rpx solid #e0e0e0; */
		padding: 36rpx;
		border-top: 1rpx solid #EBEBEB;
	}

	.service-store {
		/* height: 36rpx; */
		line-height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

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

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

	.store-left view {
		color: #999999;
		/* font-size: 26rpx;
		font-weight: bold; */
		font-size: 28rpx;
		white-space: nowrap;
		margin-right: 20rpx;
	}

	.store-right view {
		/* 	color: #666666;
		font-size: 24rpx; */
		color: #333333;
		font-size: 28rpx;
	}

	.store-right view.copy-text,
	.order-top view.copy-text {
		width: 76rpx;
		height: 30rpx;
		line-height: 30rpx;
		border-radius: 30rpx;
		text-align: center;
		background: #09AFFF;
		color: #fff;
		font-size: 20rpx;
		margin-left: 10rpx;
	}

	.ordersn-wrapper {
		display: flex;
		align-items: center;
	}

	.store-right image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 12rpx;
	}

	.service-remark-wrapper .service-remark {
		width: 652rpx;
		/* height: 56rpx; */
		line-height: 44rpx;
		background: #ebebeb;
		border-radius: 16rpx;
		color: #000000;
		padding: 8rpx 16rpx;
		/* white-space: nowrap;
text-overflow: ellipsis;*/
		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: 1rpx solid #EBEBEB;
		display: flex;
		justify-content: flex-end;
	}

	.service-operate view {
		width: 160rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 28rpx;
		text-align: center;
		color: #f9f4f5;
		font-size: 24rpx;
		background: linear-gradient(90deg, #00baff 0%, #008dff 100%);
		margin-left: 28rpx;
	}

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

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

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

	.product-img {
		width: 128rpx;
		height: 128rpx;
		border-radius: 8rpx;
		margin-right: 16rpx;
	}

	.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: #999999;
		font-size: 28rpx;
		margin: 10rpx 0;
		height: 40rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.product-name {
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
		font-size: 28rpx;
		/* padding-left: 20rpx;
	text-indent: -16rpx; */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 500rpx;
	}

	.info-right .other-info {
		color: #333333;
		font-size: 24rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.other-info .price {

		font-size: 24rpx;
	}

	.order-info {
		background: #ffffff;
		/* border-radius: 24rpx; */
		padding: 32rpx 36rpx 24rpx 36rpx;
	}

	.order-info .order-top {
		display: flex;
		align-items: center;
		height: 40rpx;
		margin-bottom: 10rpx;
		justify-content: space-between;
	}

	.order-info .order-title {
		height: 44rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		line-height: 44rpx;
		letter-spacing: 2rpx;
		margin-bottom: 16rpx;
	}

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

	.order-top view.topic {
		color: #999;
		margin-right: 16rpx;
	}

	.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: 32rpx 36rpx 30rpx 36rpx;
		margin-top: 16rpx;
	}

	.customer-service .title {
		height: 44rpx;
		line-height: 44rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
		letter-spacing: 2px;
	}

	.contact-store {
		border-bottom: 1rpx solid #ededed;
	}

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

	.contact-company {
		position: relative;
	}

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

	.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;
		background: #fff;
	}

	.order-operate-wrapper {
		/* height: 80rpx; */
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
		flex-wrap: wrap;
		/* border-top: 2rpx solid #E0E0E0; */
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

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

	.order-operate-wrapper>view.del {
		border: 2rpx solid #d8d8d8;
		/* color: #666666; */
		color: rgba(0, 0, 0, 0.85);
		background: #fff;
	}

	.order-operate-wrapper>view.appoint {
		background: linear-gradient(90deg, #00baff 0%, #008dff 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;
	}

	.btn-msg {
		border: 2rpx solid #d8d8d8;
		color: #666666 !important;
		background: #fff !important;
	}

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

	.top-new {
		position: relative;
		/* height: 208rpx; */
		width: 750rpx;
		padding: 48rpx 20rpx 0 38rpx;
		margin-bottom: 20rpx;
	}

	.book-detail-tip {
		font-size: 32rpx;
		color: #FA6400;
		line-height: 44rpx;
		letter-spacing: 2rpx;
		margin-top: 8rpx;
	}

	.top-bg-img {
		position: absolute;
		left: 10rpx;
		top: 14rpx;
		width: 90rpx;
		height: 90rpx;
		z-index: -10;
	}

	.top-bg-img2 {
		position: absolute;
		right: 38rpx;
		top: 54rpx;
		width: 110rpx;
		height: 110rpx;
		z-index: -10;
	}

	.top-new .status-val {
		height: 56rpx;
		line-height: 56rpx;
		font-size: 40rpx;
		font-weight: 600;
		color: #191919;
		letter-spacing: 2rpx;
		margin-bottom: 14rpx;
	}

	.top-new .status-tips {
		height: 44rpx;
		font-size: 32rpx;
		color: #999999;
		line-height: 44rpx;
		letter-spacing: 2rpx;
	}

	.service-list {
		/* background: #FF4447; */
		border-radius: 26rpx 26rpx 0px 0px;
		width: 750rpx;
	}

	.list-title {
		display: flex;
		align-items: center;
		height: 102rpx;
		font-size: 36rpx;
		color: #fff;
		padding: 0 46rpx 0 38rpx;
		justify-content: space-between;
	}

	.service-remark-new {
		padding: 38rpx;
		border-top: 1rpx solid #EBEBEB;
	}

	.service-remark-new .remark-text {
		min-height: 40rpx;
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
		line-height: 40rpx;
		letter-spacing: 1rpx;

	}

	.service-operate view.cancel-color {
		border: 1rpx solid #979797;
		color: #ACADB1;
		background: #fff;
		line-height: 54rpx;
	}

	.list-title-right {
		display: flex;
		align-items: center;
	}

	.arrow-white {
		width: 34rpx;
		height: 34rpx;
		margin-left: 26rpx;
		transform: rotate(0deg);
		transition: transform 0.3s;
	}

	.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: 560rpx;
		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 60rpx;
		box-sizing: border-box;
	}

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

	.blue-color {
		background: linear-gradient(90deg, #00baff 0%, #008dff 100%) !important;
	}

	.warning-color {
		background: linear-gradient(90deg, #af4318 0%, #c96405 100%) !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 #ff8219;
		text-align: center;
		font-size: 36rpx;
		color: #ff8219;
		margin: 0 auto;
		margin-top: 54rpx;
	}

	.service-item-wrapper {
		background: #00B4FF;
		margin-bottom: 14rpx;
	}

	.fold-title.list-title {
		height: 130rpx;
	}

	.list-title-left view {
		font-size: 32rpx;
	}

	.list-title-left view.item-appoint-time {
		font-size: 28rpx;
	}

	.fold-title.list-title .arrow-white {
		transform: rotate(-90deg);
		transition: transform 0.3s;
	}

	.finish-title.list-title {
		background: #E6F4FF;
		color: rgba(0, 0, 0, 0.25);
	}

	.service-item-wrapper.finish-wrapper {
		background: #E6F4FF;
	}

	.not-appoint-block {
		width: 750rpx;
		height: 220rpx;
		padding: 30rpx 20rpx;
		background: #73D13D;
		border-radius: 14rpx;
	}

	.not-appoint-title {
		height: 44rpx;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 18rpx;
		font-size: 32rpx;
		color: #fff;
	}

	.not-appoint-title .not-appoint-times {
		font-size: 28rpx;
	}

	.not-appoint-btn {
		width: 710rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #FFFFFF;
		border-radius: 72rpx;
		font-size: 28rpx;
		color: #00B4FF;
		text-align: center;
		margin-bottom: 24rpx;
	}

	/* 退款弹框 */
	.refund-order-overlay {
		width: 750rpx;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: 999;
		left:0;
		right:0;
	}

	.refund-order-dialog {
		width: 606rpx;
		height: 644rpx;
		border-radius: 14rpx;
		background: #ffffff;
		border-radius: 20rpx;
		position: relative;
		padding: 300rpx 30rpx 40rpx;
		background: url('https://jzmall.lifejingzhi.com/file/jzmall-dy/dia-bg-refund.png') no-repeat;
		background-color: #FFFFFF;
		background-size: 606rpx 210rpx;
	}

	.refund-dia-title {
		height: 56rpx;
		font-weight: bold;
		font-size: 40rpx;
		color: rgba(0, 0, 0, 0.85);
		line-height: 56rpx;
		text-align: center;
		margin: 60rpx 0 34rpx;
	}

	.refund-dia-tips {
		width: 540rpx;
		color: #333333;
		line-height: 46rpx;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.85);
		text-align: center;
		white-space: wrap;
		margin-bottom: 120rpx;
		font-weight: bold;
	}

	.dia-btn-wrapper {
		height: 94rpx;
		display: flex;
		justify-content: space-between;
	}

	.dia-cancel-btn {
		width: 248rpx;
		height: 94rpx;
		line-height: 94rpx;
		border-radius: 94rpx;
		border: 2rpx solid #0093FF;
		font-size: 32rpx;
		color: #0093FF;
		/* font-weight: bold; */
		text-align: center;
	}

	.dia-conf-btn {
		width: 258rpx;
		height: 94rpx;
		line-height: 94rpx;
		border-radius: 94rpx;
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
		background: #0093FF;
		text-align: center;
	}
</style>