jzmall_uni/pages/ucenter/orderDetail/orderDetailPay.vue

<template>
	<view>
		<!-- <sjs src="../../../utils/formatFuc.sjs" module="utils" /> -->
		<view class="container">
			<image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-sad.png" class="icon-sad">
			</image>
			<view class="top-slogan">
				您离好评率 <text>99%</text> 的家政服务仅剩 1 步
			</view>
			<view class="pay-time">
				{{ formatOverTime(payOverTime) }}
			</view>
			<view class="over-time">未完成支付将自动取消</view>
			<!-- 未支付 -->
			<!-- <view class="not-pay-module" v-if="payOverTime > 0">
				<image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-wallet.png">
				</image> 
				<view class="pay-time">
				{{ formatOverTime(payOverTime) }}
				</view>
				<view class="over-time">未完成支付将自动取消</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="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 class="price other-info" style="margin-top:8rpx;font-weight: bold;">
								¥{{ orderInfo.actualPrice }}
							</view>
						</view>
					</view>
				</view>
				<!-- 过期退，随时退 -->
				<view 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 class="coupon-block" v-if="orderInfo.discountPrice>0">
					<view>损失优惠</view>
					<view><text>{{orderInfo.discountPrice}}</text>元</view>
				</view>
			</view>
			<!-- v-if="orderInfo.handleOption.pay" -->
			<view @tap.stop.prevent="payOrder" :data-id="orderInfo.id" :data-sn="orderInfo.orderSn"
				v-if="orderInfo.handleOption.pay" class="pay-btn-new">继续支付</view>
			<view @tap="goIM" class="im-btn">咨询客服</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>
					
				</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" :data-id="orderInfo.id"
						v-if="orderInfo.handleOption.refund" class="del">售后/退款</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="buyAgain" :data-id="orderInfo.goodsId"
						v-if="orderInfo.orderStatusVal != '未支付'">再次购买</view>
				</view>
			</view> -->
		</view>
		<!-- 投诉建议弹框 -->
		<view class="goods-info-overlay" v-if="complainTips">
			<view class="goods-info-popup">
				<view class="popup-title">投诉建议</view>
				<view class="tips-title">电话：{{ shopPhone }}</view>
				<view style="padding: 0 20rpx 100rpx 32rpx; margin-top: -20rpx">对服务不满意或其他建议，请拨打投诉电话。</view>
				<view class="popup-bottom">
					<view class="btn-cancel" @tap="cancelComplain">取消</view>
					<view class="btn-conf" @tap="confComplain">拨打电话</view>
				</view>
			</view>
		</view>

		<!-- 客户追加备注弹框 -->
		<view class="appoint-overlay-wrapper" v-if="msgShow" @tap="onMsgClose"></view>
		<view class="remark-popup" v-if="msgShow">
			<view class="title" 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>
	</view>
</template>

<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: {
					discountPrice: 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: ''
				}
			};
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			this.setData({
				orderId: options.id,
				orderType: options.orderType
			});
			// this.getOrderDetail();
		},
		onShow: function() {
			// 页面显示
			this.getOrderDetail();
			util.addLog(1, 4, 1, {
				orderId: this.orderId
			});
		},
		onPullDownRefresh() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载
			this.getOrderDetail();
			uni.hideNavigationBarLoading(); //完成停止加载
			uni.stopPullDownRefresh(); //停止下拉刷新
		},
		onReady: function() {
			// 页面渲染完成
		},
		onHide: function() {
			console.log('onHide');
			util.addLog(2, 4, 2, {
				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) => {
							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
						});
					}else{
						uni.showToast({
						  title: res.errmsg,
						  icon: 'none',
						  duration: 2000
						});
					}
				});
			},

			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) => {
							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) => {
							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) => {
							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
					// });
				});
			},
			orderPrepay(){
				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('支付失败');
							}
						});
					}
				});
			},
			aliPrepay(){
				 uni.showLoading({
				     title: '加载中'
				 });
				 let that=this;
				 util.request(api.aliPrepay, {
				  orderId:this.orderInfo.id
				 }).then(function (res) {
				         if (res.errno === 0) {
				 			//是否跳转新支付结果页面
				 			let goNewPage=res.data.goNewPage;
				         
				           let tradeNo=res.data.payment.tradeNo;
				           let outOrderNo=res.data.payment.outTradeNo;
				           
				             my.tradePay({
				 				  tradeNO:tradeNo,
				                 success: (payres) => {
				 					
				                     uni.hideLoading();
				                     console.log('ali调起支付成功');
				                     console.log(payres);
				                      let resultCode=payres.resultCode;
				 							   if(resultCode=='9000'){
				 								uni.redirectTo({
				 									url: '/pages/ucenter/order/order'
				 								});
				 							   }else{
				 								 
				 								   uni.showModal({
				 								       title: '提示',
				 								       content: "未支付成功，"+payres.memo,
				 								       showCancel: false,
				 								   });
				 							   }
				                 
				                   
				                 },
				                 fail: (failres) => {
				 							  console.log(failres);
				 			
				                          uni.hideLoading();
				                    
				                 }
				             });
				         } else {
				 					  uni.hideLoading();
				             uni.showModal({
				                 title: '提醒',
				                 showCancel: false,
				                 content: res.errmsg
				             });
				         }
				     })
				     .catch((res) => {
				         uni.hideLoading();
				         util.showErrorToast(res.errmsg);
				     });
			},

			// “去付款”按钮点击效果
			payOrder: function() {
				util.addLog(1, 4, 16, {
					orderId: this.orderId
				});
				
				// #ifdef MP-TOUTIAO
				this.orderPrepay();
				// #endif
					// #ifdef MP-ALIPAY
				this.aliPrepay();
					// #endif
			
			},

			// “取消订单”点击效果
			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() {
				uni.setClipboardData({
					data: this.orderInfo.orderSn,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '订单编号复制成功',
									icon: 'success',
									duration: 2000
								});
							}
						});
					}
				});
			},

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

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

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

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

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

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

			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 {

		width: 100%;
		background: #E4F3FB;
	}

	.container {
		padding: 36rpx 20rpx 180rpx;
		background: #E4F3FB;
	}

	/* 未支付订单 */
	.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-top: 24rpx;
		width: 702rpx;
		background: #fff;
		border-radius: 24rpx;
		padding: 0 24rpx;
	}

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

		border-bottom: 2rpx solid #e0e0e0;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.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: 14rpx;
	}

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

	.service-store {
		height: 36rpx;
		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: rgba(0, 0, 0, 0.9);
		font-size: 26rpx;
		font-weight: bold;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.order-top view.topic {
		color: #666;
		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: 0 24rpx;
		margin-top: 36rpx;
	}

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

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

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

	.contact-company {
		position: relative;
	}

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

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

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

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

	/* 底部按钮 */
	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 14rpx 24rpx 24rpx;
		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: 8rpx;
		display: flex;
		align-items: center;
		background: #F9F9F9;
		height: 70rpx;
		justify-content: space-between;
	}

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

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

	.pay-btn-new {
		width: 710rpx;
		height: 94rpx;
		line-height: 94rpx;
		background: #FD2C55;
		border-radius: 12rpx;
		font-size: 32rpx;
		text-align: center;
		color: #fff;
		margin: 0 0 28rpx;
		font-weight: bold;
	}

	.im-btn {
		width: 710rpx;
		height: 94rpx;
		line-height: 94rpx;
		border-radius: 12rpx;
		border: 1rpx solid #FD2C55;
		color: #FD2C55;
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
	}

	.coupon-block {
		position: absolute;
		top: -24rpx;
		right: 36rpx;
		width: 130rpx;
		height: 180rpx;
		background: url('https://jzmall.lifejingzhi.com/file/jzmall-dy/detail-coupon-bg.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-top: 50rpx;
	}

	.coupon-block view {
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
		height: 50rpx;
		line-height: 50rpx;
		display: flex;
		align-items: flex-end;
	}

	.coupon-block view text {
		font-size: 40rpx;
		line-height: 50rpx;
		padding-bottom: 4rpx;
	}

	/* 投诉建议弹框 */
	.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;
	}

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

	.icon-sad {
		width: 136rpx;
		height: 136rpx;
		margin: 0 auto;
		margin-left: 288rpx;
	}

	.top-slogan {
		font-size: 32rpx;
		color: #253369;
		height: 60rpx;
		margin: 24rpx 0 12rpx;
		text-align: center;
		font-weight: bold;
	}

	.top-slogan text {
		font-size: 40rpx;
		color: #FA6400;
		margin: 0 4rpx 0 8rpx;
	}

	.pay-time {
		text-align: center;
		font-size: 28rpx;
		color: #FA6400;
		height: 40rpx;
		margin-bottom: 16rpx;
	}

	.over-time {
		text-align: center;
	}
</style>