jzmall_verify_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>{{ 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>
                <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.orderStatusVal}}</view>
				<view class="status-tips" v-if="orderInfo.orderStatusVal == '服务中'">服务预约成功，等待上门…</view>
				<view class="status-tips" v-else-if="orderInfo.orderStatusVal == '服务已完成'||orderInfo.orderStatusVal == '已取消'">期望下次为您提供更优质的服务！</view>
				<view class="status-tips" v-else>如有任何问题，请及时联系我们！</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==null?'':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="list-title">
					<view>预约信息</view>
					<view class="list-title-right">
						<view>预约券 {{dyDetails.length}}</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-for="(item, index) in dyDetails" :key="index">
					<!-- <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>
						</view>
						<!-- <view class="row">
							<text>上门时段：</text>
							{{ item.bookTime }}
						</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>
							</view>
							<view class="store-right" >
								<view>
									{{ item.id }}
								</view>
								<view @tap="copyOrder" class="copy-text" :data-id="item.id">复制</view>
							<!-- 	<image mode="aspectFit" class="copy-img"
									src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-order-copy.png" @tap="copyOrder"></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" v-if="item.status == 1 || item.status == 7 || item.acceptanceAble">
				
						<view v-if="item.status == 1 || item.status == 7"  @tap="goEditAppoint" :data-id="item.id"
							:data-status="item.status" :data-time="item.bookTime">
							修改预约
						</view>
								<!-- v-if="item.isCancel"  @tap="goCancelBook"-->
						<view  class="cancel-color" :data-id="item.id" v-if="item.isCancel"  @tap="goCancelBook"
						          :data-phone="item.shopPhone">取消预约</view>
						<view v-if="item.acceptanceAble" @tap="goReVisit" :data-id="item.id">服务验收</view>
						<!-- <view wx:if="{{item.acceptanceAble}}" bindtap="goComplain" data-id="{{item.id}}" data-phone="{{item.shopPhone}}">投诉建议</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"></image>
						<view class="info-right">
							<view class="info-main">
								<view class="product-name">{{ orderInfo.goodsName }}</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 class="price">
									¥
									<text style="font-size: 28rpx">{{ orderInfo.actualPrice }}</text>
								</view>
								</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-phone-new.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-message-blue.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="revertOrder" :data-id="orderInfo.id" v-if="orderInfo.canReverse"
						class="del">取消预约</view>
					<view @tap.stop.prevent="aftersaleOrder" :data-id="orderInfo.id"
						v-if="orderInfo.handleOption.refund" class="del">售后/退款</view>
					<!-- <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 :data-id="orderInfo.id" :data-sn="orderInfo.orderSn" :data-aid="orderInfo.addressId"
						:data-type="orderInfo.type" 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="buyAgain" :data-id="orderInfo.goodsId"
						v-if="orderInfo.handleOption.rebuy">再次购买</view>
				</view>
			</view>

			<!-- <view class="order-main-top">
     <view class="order-main-left">
         <view class="order-detail-status">
           {{orderInfo.orderStatusText}}
         </view>
         <view class="order-detail-des">
           服务中有任何问题 请联系客服哦
         </view>
     </view>
     <view class="order-main-right">
          <view class="service-times">
           <text class="current-times">{{orderInfo.servicedTimes}}</text>/{{orderInfo.serviceTimes}}
          </view>
          <view class="view-service" wx:if="{{!(orderInfo.orderStatus==101||orderInfo.orderStatus==102||orderInfo.orderStatus==103)}}" bindtap="viewService">
            查看服务
          </view>
     </view>

  </view>
  <view class="order-info">
    <view class="item">下单时间：{{orderInfo.addTime}}</view>
    <view class="item">订单编号：{{orderInfo.orderSn}}</view>
    <view class="item">订单留言：{{orderInfo.message}}</view>
    <view class="item-c">
      <view class="l">实付：
        <text class="cost">￥{{orderInfo.actualPrice}}</text>
      </view>
      <view class="r" wx:if="{{orderType!=1}}">
        <view class="btn active" bindtap="cancelOrder" wx:if="{{handleOption.cancel}}">取消订单</view>
        <view class="btn active" bindtap="payOrder" wx:if="{{handleOption.pay}}">去付款</view> 
        <view class="btn active" bindtap="aftersaleOrder" wx:if="{{handleOption.aftersale}}">申请售后</view> 
      </view>
    </view>
  </view>

  <view class="order-goods">
    <view class="h">
      <view class="label">商品信息</view>
      <view class="status">{{orderInfo.orderStatusText}}</view>
    </view>
    <view class="goods">
      <view class="item" wx:for="{{orderGoods}}" wx:key="id">
        <view class="img">
          <image src="{{item.picUrl}}"></image>
        </view>
        <view class="info">
          <view class="t">
            <text class="name">{{item.goodsName}}</text>
            <text class="number">x{{item.number}}</text>
          </view>
          <view class="attr">{{item.specifications}}</view>
          <view class="price">单价：￥{{item.price}}</view>
   
          <view class="btn active" wx:if="{{handleOption.rebuy}}">
            <navigator url="../../goods/goods?id={{item.goodsId}}">再次购买</navigator>
          </view>
        </view>
      </view>
    </view>

    <view class="order-bottom">
      <view class="address">
        <view class="t">
          <text class="name">{{orderInfo.consignee}}</text>
          <text class="mobile">{{orderInfo.mobile}}</text>
        </view>
        <view class="b">{{orderInfo.address}}</view>
      </view>
      <view class="total">
        <view class="t">
          <text class="label">商品合计：</text>
          <text class="txt">￥{{orderInfo.goodsPrice}}</text>
        </view>
  
        <view class="t">
          <text class="label">优惠：</text>
          <text class="txt">￥-{{orderInfo.couponPrice}}</text>
        </view>
      </view>
      <view class="pay-fee">
        <text class="label">实付：</text>
        <text class="txt">￥{{orderInfo.actualPrice}}</text>
      </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="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="onCancelClick">
		    <view class="title">
		      选择取消原因
		    </view>
		    <view class="remark-list">
		      <view class="remark-item" v-for="(item,index) in cancelList" :key="index" :data-id="item.id"
		        @tap.stop="cancelItemSelect">
		        <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="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: {
					id: '',
					orderSn: '',

					handleOption: {
						pay: '',
						book: '',
						cancel: '',
						refund: '',
						rebuy: ''
					},

					orderStatusVal: '',
					goodsName: '',
					skuName: '',
					servedTimes: '',
					picUrl: '',
					actualPrice: '',
					increaseSumPrice: '',
					unitDescribe: '',
					unitIncreaseNumber: '',
					serviceTimes: '',
					createTime: '',
					payChannel: '',
					orderPrice: '',
					discountPrice: '',
					canReverse: '',
					addressId: '',
					type: '',
					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',

				action: {
					status: '',
					createTime: '',
					content: ''
				},
				 cancelShow: false,
				    cancelDetailId: '',
				    cancelReason: '', //选中的取消原因项
					  cancelList: [{
					        id: 19,
					        value: "【个人原因】临时有事暂时不预约"
					      },
					      {
					        id: 20,
					        value: "【个人原因】先囤着以后再约"
					      },
					      {
					        id: 22,
					        value: "【个人原因】计划有变不需要了"
					      },
					      {
					        id: 21,
					        value: "【商家原因】保洁师无法上门服务"
					      },
					      {
					        id: 23,
					        value: "  其他"
					      }
					  
					    ],
			};
		},
		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: {
			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;
			},
			cancelTicketTips() {
				this.setData({
					ticketTips: false
				});
			},

			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: '加载中'
				});
				let that = this;
				util.request(api.OrderDetail, {
					orderId: that.orderId
				}).then(function(res) {
					if (res.errno === 0) {
						uni.hideLoading();
						// console.log(res.data);
						that.setData({
							orderInfo: res.data,
							dyDetails: res.data.dyDetails,
							afterSale: res.data.afterSale,
							payOverTime: res.data.payOverTime,
							remainTimes: res.data.serviceTimes - res.data.servedTimes
							// orderGoods: res.data.orderGoods,
							// handleOption: res.data.orderInfo.handleOption,
							// expressInfo: res.data.expressInfo
						});

						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);
								}
							});
						}
					}
				});
			},

			// “申请售后”点击效果
			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(e) {
				let id = e.currentTarget.dataset.id+'';
			
				uni.setClipboardData({
					data: id,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功',
									icon: 'success',
									duration: 2000
								});
							}
						});
					}
				});
			},

			//撤销
			revertOrder(e) {
				let id = e.currentTarget.dataset.id;
				let that = this;
				uni.showModal({
					title: '',
					content: '确认取消预约？',
					success: function(res) {
						if (res.confirm) {
							util.request(
								api.RevertVerify, {
									orderId: id
								},
								'GET'
							).then(function(res) {
								if (res.errno === 0) {
									uni.showToast({
										title: '操作成功！'
									});
									that.getOrderDetail();
								} else {
									util.showErrorToast(res.errmsg);
								}
							});
						}
					}
				});
			},

			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() - 7200 * 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 + '&goodsId=' + this.orderInfo.goodsId + '&type=2',
					success: (res) => {},
					fail: (res) => {}
				});
			},

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

			makeStorePhone(e) {
				uni.makePhoneCall({
					phoneNumber: e.currentTarget.dataset.phone
				});
			},
			  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() {
			    //无实际意义 防止冒泡
			
			  },
			    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: "提交成功"
			          });
					  that.getOrderDetail();
		
			  
			          that.setData({
			            cancelShow: false,
			          })
			        }
			      })
			    },
		}
	};
</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: 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: 24rpx 0;
		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: 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-top: 16rpx;
		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: 36rpx;
		border-top: 1rpx solid #EBEBEB;
	}

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

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

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

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

	.store-right view {
		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 40rpx ;
		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: 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: 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, #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;
	}

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

	.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;
	}
	
	/* 选择备注 */
	.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;
	
	}
	.appoint-overlay-wrapper {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, .7);
	  z-index: 999;
	}
</style>