jzhw_uni/pages/ucenter/order/order.vue

<template>
	<view>
		<view class="poster" v-if="myqr_show">
			<view>
				<image :src="myqr_url" :style="'width:' + myqr_width + 'rpx;'" mode="widthFix"></image>
				<view class="tool">
					<view>
						<button open-type="share" class="share-btn">
							<image class="img" style="width: 85rpx; margin-right: 25rpx" mode="widthFix"
								src="/static/static/images/share/p_dy.png"></image>
						</button>
					</view>
					<view>
						<image class="img" mode="widthFix" @tap="goSaveQrcode" src="/static/images/share/p_save.png">
						</image>
					</view>
				</view>
				<view style="text-align: center">
					<image class="closeImg" @tap="hidePoster" src="/static/images/share/close.png"></image>
				</view>
			</view>
		</view>

		<view class="appoint-tabs-wrapper">
			<view :class="'appoint-tab-item ' + (showType == 0 ? 'active' : '')" data-tab="0" @tap="onTabChange">全 部
			</view>
			<view :class="'appoint-tab-item ' + (showType == 1 ? 'active' : '')" data-tab="1" @tap="onTabChange">待支付
			</view>
			<view :class="'appoint-tab-item ' + (showType == 2 ? 'active' : '')" data-tab="2" @tap="onTabChange">待服务
			</view>
			<view :class="'appoint-tab-item ' + (showType == 3 ? 'active' : '')" data-tab="3" @tap="onTabChange">售后
			</view>
		</view>

		<view class="container" :style="'filter:blur(' + myqr_blur + 'rpx)'">
			<view class="no-order" v-if="orderList.length <= 0">
				<view class="c">
					<text>还没有任何订单呢</text>
				</view>
			</view>

			<view class="orders">
				<view class="order" v-for="(item, index) in orderList" :key="index">
					<view class="h">
						<view class="l"
							v-if="item.orderStatusVal == '待预约' || item.orderStatusVal == '服务中' || item.orderStatusVal == '服务已完成'">
							已支付</view>
						<view class="l" v-else>{{ item.orderStatusVal }}</view>
						<view class="r"
							v-if="item.orderStatusVal == '待预约' || item.orderStatusVal == '服务中' || item.orderStatusVal == '服务已完成'">
							{{ item.orderStatusVal }}
						</view>
						<view class="r" v-else></view>
					</view>

					<!-- open-type="redirect" -->

					<navigator :url="'../orderDetail/orderDetail?id=' + item.id">
						<view class="goods">
							<view class="img">
								<image :src="item.picUrl"></image>
							</view>
							<view class="info">
								<!-- <view class="info-orderSn" >订单编号: {{item.orderSn}}</view> -->
								<view class="info-main">
									<text class="product-name">{{ item.goodsName }}</text>
									<text class="price">¥{{ item.orderPrice }}</text>
								</view>
								<view class="sku-name" v-if="item.increaseSumPrice">
									<view>加购: {{ item.unitDescribe }}*{{ item.unitIncreaseNumber }}</view>
									<view>¥{{ item.increaseSumPrice }}</view>
								</view>
								<view class="sku-name">规格:{{ item.skuName }}</view>
								<text class="other-info">服务{{ item.serviceTimes }}次</text>
					
								<view v-if="item.payOverTime > 0" class="over-time">
									{{ utils.formatOverTime(item.payOverTime) }} 后订单关闭</view>
							</view>

						</view>
					</navigator>

					<view class="b">
						<view class="l">
							<text>实付款：￥{{ item.actualPrice }}</text>
						</view>
					</view>

					<!-- 提醒 -->

					<view class="status-tips" v-if="item.orderStatusVal == '已退款'">
						<image mode="aspectFit"
							src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-refund-tips.png"></image>
						<view class="tips-title">已退款</view>
						<view>已按照原支付路径退回</view>
					</view>

					<view class="status-tips" v-if="item.orderStatusVal == '服务已完成'" :data-id="item.id" @tap="goCheck">
						<image mode="aspectFit"
							src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-customer-msg.png"></image>
						<view class="tips-title">服务验收：</view>
						<view>服务已完成，请评价</view>
					</view>

					<view class="customer-msg" v-if="item.customerServiceReminder">
						<view class="msg-title">提醒：</view>
						<view class="msg-text">{{ item.customerServiceReminder }}</view>
					</view>

					<view class="customer-msg" v-if="item.ticketStatus == 1">
						<view class="msg-title">提醒：</view>
						<view class="msg-text">您的售后工单正在处理中，请耐心等待</view>
					</view>

					<view class="customer-msg" v-if="item.ticketStatus == 2" :data-id="item.id" @tap="orderDetail">
						<view class="msg-title">提醒：</view>
						<view class="msg-text">您的售后工单已完成，可以去评价了哦</view>
					</view>

					<!-- 操作事件 -->

					<view class="order-operate-wrapper">
						<!-- <view catchtap="deleteOrder" wx:if="{{item.handleOption.delete}}" data-id="{{item.id}}" class="del">删除订单
          </view> -->
						<view @tap.stop.prevent="cancelOrder" v-if="item.handleOption.cancel" :data-id="item.id"
							class="del">取消订单</view>
						<view @tap.stop.prevent="refundOrder" :data-id="item.id" v-if="item.handleOption.refund"
							class="del">售后/退款</view>

						<!-- <view  data-id="{{item.id}}" data-sn="{{item.orderSn}}" data-aid="{{item.addressId}}"
          data-type="{{item.type}}" wx:if="{{item.handleOption.book}}" class="eval-btn">评价</view> -->

						<!-- 抖音评价  20231007屏蔽 by leo 启用工单上的服务验收
        <rate-button class="eval-btn" order-id="{{item.orderSn}}" bind:init="handleInit" bind:success="handleSuccess" bind:error="handleError" />-->
						<!-- <view  catchtap="confirmOrder" wx:if="{{item.handleOption.confirm}}" data-id="{{item.id}}">待上门</view> -->
						<!-- <view  catchtap="refundOrder" wx:if="{{item.handleOption.refund&&item.goodsList[0].goodsSn!='1036016'}}" data-id="{{item.id}}">申请退款</view> -->
						<!-- <view  data-id="{{item.goodsList[0].goodsId}}" catchtap="shareFriendOrCircle" >分享商品</view> -->
						<view @tap.stop.prevent="goAppoint" :data-id="item.id" :data-sn="item.orderSn"
							:data-aid="item.addressId" v-if="item.handleOption.book" :data-detail="item.detailId"
							class="appoint">
							预约服务
						</view>

						<view @tap.stop.prevent="cancelAppoint" :data-serid="item.bookedDetailId" :data-id="item.id"
							:data-times="item.serviceTimes" v-if="item.handleOption.canCancelBook" class="del">
							取消预约
						</view>
						<view @tap="modifyAppoint" :data-id="item.id" :data-serid="item.bookedDetailId"
							:data-times="item.serviceTimes" :data-sn="item.orderSn" :data-aid="item.addressId"
							:data-type="item.type" v-if="item.handleOption.canModify" class="warning-color">
							修改预约
						</view>

						<view @tap.stop.prevent="payOrder" :data-id="item.id" :data-sn="item.orderSn"
							v-if="item.handleOption.pay">立即支付</view>
						<view class="btn-rebuy" @tap="buyAgain" :data-id="item.goodsId"
							v-if="item.orderStatusVal != '未支付'">再次购买</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 修改预约/预约 -->
		<view class="refund-order-overlay" v-if="appointDiaShow">
			<view class="refund-order-dialog refund-order-dia-success">
				<image src="https://mall.zhaijieshi.cc/file/wx-huawang/g.png" mode="" class="title-icong"></image>
				<view class="refund-dia-title">请选择您要修改的服务</view>
				<view class="modify-list">
					<view class="modify-item" @tap="switchSer" :data-serid="item.id"
						v-for="(item, index) in serModifyList" :key="index">
						<image src="https://mall.zhaijieshi.cc/file/wx-huawang/dian2.png" mode="aspectFit"
							v-if="item.id == serviceId"></image>

						<image src="https://mall.zhaijieshi.cc/file/wx-dy/radio-unselect.png" mode="aspectFit" v-else>
						</image>

						<view :class="item.id == serviceId ? 'current-modify' : ''">{{ item.bookTime }}</view>
					</view>
				</view>
				<view class="dia-btn-wrapper">
					<view class="dia-cancel-btn" @tap="appointModifyConf">确定</view>
				</view>
			</view>
			<image @tap="closeModify" src="https://jzmall.lifejingzhi.com/file/mall-uni/icon-close.png"
				class="modify-close"></image>
		</view>
		<!-- 选择取消原因 -->
		<!-- 第一步 -->
		<view class="appoint-overlay-wrapper remark-overlay" v-if="cancelFirstShow" @tap="onCancelPopupCloseFir">
			<view class="remark-select" @tap.stop.prevent="onCancelClick">
				<view class="title" style="text-align: left">请选择要取消的服务</view>
				<view class="remark-list ser-list">
					<view :class="'remark-item ser-item ' + (item.id == serviceId ? 'current-ser' : '')"
						:data-id="item.id" @tap="switchSer" :data-serid="item.id" style="justify-content: flex-start"
						v-for="(item, index) in serModifyList" :key="index">
						<image mode="aspectFit" src="https://mall.zhaijieshi.cc/file/wx-huawang/dian2.png"
							class="radio-img" v-if="item.id == serviceId"></image>

						<image mode="aspectFit" src="https://mall.zhaijieshi.cc/file/wx-huawang/dian1.png"
							class="radio-img" v-else></image>

						<view :class="'remark-value ' + (item.id == serviceId ? 'current-cancel' : '')">
							{{ item.bookTime }}</view>

						<view class="ser-right">已预约</view>
					</view>
				</view>
				<view class="remark-conf-btn" @tap.stop.prevent="cancelFirstConfirm">下一步</view>
			</view>
		</view>

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

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

						<image mode="aspectFit"
							src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-unselect-popup.png"
							class="radio-img" v-else></image>
					</view>
				</view>
				<view class="remark-conf-btn" @tap.stop.prevent="cancelItemConfirm">取消预约</view>
			</view>
		</view>
	</view>
</template>
<script module="utils" lang="wxs" src="@/utils/formatFuc.wxs"></script>
<script>
	var util = require('../../../utils/util.js');
	var api = require('../../../config/api.js');
	var app = getApp();
	export default {
		data() {
			return {
				timer: '',
				orderList: [],
				showType: 0,
				page: 1,
				limit: 10,
				totalPages: 1,
				myqr_show: false,
				//我的分享二维码
				myqr_url: null,
				myqr_blur: 0,
				//背景模糊值
				myqr_width: 0,
				hasLogin: false,
				goodsId: '',
				tipsList: [],
				refundTipShow: false,
				refundId: '',
				serModifyList: [],
				serviceId: '',
				appointOrderId: '',
				appointDiaType: '',
				//1修改预约 2取消预约
				appointDiaShow: false,
				cancelShow: false,
				cancelList: [{
						id: 19,
						value: '【个人原因】临时有事暂时不预约'
					},
					{
						id: 20,
						value: '【个人原因】先囤着以后再约'
					},
					{
						id: 22,
						value: '【个人原因】计划有变不需要了'
					},
					{
						id: 21,
						value: '【商家原因】保洁师无法上门服务'
					},
					{
						id: 23,
						value: '  其他'
					}
				],
				cancelReason: '',
				cancelFirstShow: false
			};
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			if (options.tab) {
				this.setData({
					showType: options.tab
				});
			}
		},
		onHide: function() {
			console.log('onHide');
			clearInterval(this.timer);
		},
		onUnload: function() {
			console.log('onunload');
			clearInterval(this.timer);
		},
		onReachBottom() {
			if (this.totalPages > this.page) {
				this.setData({
					page: this.page + 1
				});
				this.getOrderList();
			} else if (this.orderList.length > 0) {
				uni.showToast({
					title: '没有更多订单了',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
		},
		onReady: function() {
			// 页面渲染完成
		},
		onShow: function() {
			// 页面显示
			this.setData({
				orderList: [],
				page: 1
			});
			// wx.pageScrollTo({
			//   scrollTop: 0,
			//   duration: 1000,
			// });
			this.getOrderList();
		},
		methods: {
			getOrderList() {
				uni.showLoading({
					title: '加载中'
				});
				let that = this;
				util.request(api.OrderList, {
					showType: that.showType,
					page: that.page,
					limit: that.limit
				}).then((res) => {
					uni.hideLoading();
					if (res.errno === 0) {
						console.log(res.data);
						that.setData({
							orderList: that.orderList.concat(res.data.data.orders),
							totalPages: res.data.pages
						});
						clearInterval(this.timer);
						// 如果有未支付订单,倒计时定时器
						let isHasOver = this.orderList.some((item) => {
							return item.payOverTime > 0;
						});
						console.log(isHasOver);
						if (isHasOver) {
							let timer = setInterval(() => {
								let list = this.orderList;
								let newList = [];
								list.forEach((item) => {
									let obj = item;
									if (item.payOverTime > 0) {
										obj.payOverTime = item.payOverTime - 1;
									}
									newList.push(obj);
								});
								this.setData({
									orderList: newList
								});
							}, 1000);
							this.setData({
								timer: timer
							});
						}
					}
				});
			},

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

			switchTab: function(event) {
				let showType = event.currentTarget.dataset.index;
				this.setData({
					orderList: [],
					showType: showType,
					page: 1,
					// limit: 10,
					totalPages: 1
				});
				this.getOrderList();
			},

			onTabChange(e) {
				// let showType = e.detail.name;
				let showType = e.currentTarget.dataset.tab;
				this.setData({
					orderList: [],
					showType: showType,
					page: 1,
					// limit: 10,
					totalPages: 1
				});
				this.getOrderList();
			},

			appointServiceOld(e) {
				let id = e.currentTarget.dataset.id;
				let addressId = e.currentTarget.dataset.aid;
				let type = e.currentTarget.dataset.type;
				if (type && type == 5) {
					uni.navigateTo({
						url: '/pages/ucenter/coupon/couponGoods?id=1'
					});
					return;
				}
				if (addressId == null || addressId == 0) {
					uni.navigateTo({
						url: '/pages/ucenter/appointOrder/appointOrder?orderId=' + id
					});
				} else {
					//买约分离 没有地址的预约
					uni.navigateTo({
						url: '/pages/ucenter/serviceDetail/serviceDetail?orderId=' + id
					});
				}
			},

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

			qrtouchstart: function() {
				this.setData({
					myqr_blur: 0,
					myqr_show: false
				});
			},

			shareFriendOrCircle: function(e) {
				// let that = this;
				// if (!app.globalData.hasLogin) {
				//   wx.navigateTo({
				//     url: "/pages/auth/login/login"
				//   });
				//   return;
				// }
				// //获取分享id 用来追踪链接
				// //引荐人和非引荐人的 链接不同
				// let imgUrl = that.data.goods.shareWxUrl ? that.data.goods.shareWxUrl : that.data.goods.gallery[0];
				// var path = '/pages/goods/goods?id=' + that.data.id + '&rId=' + that.data.userInfo.id;
				// if (that.data.userInfo.isDis) { //是引荐人
				//   path = '/pages/goods/goods?id=' + that.data.id + '&shareId=' + that.data.wxShareId;
				// }
				// this.hidePoster();
				// return {
				//   title: that.data.goods.name,
				//   desc: that.data.myqr_ads,
				//   path: path,
				//   imageUrl: imgUrl
				// }
			},

			// 保存分享图
			saveShare: function() {
				let that = this;
				uni.showLoading({
					title: '图片保存中'
				});
				console.log(that);
				uni.downloadFile({
					url: that.myqr_url,
					success: function(res) {
						console.log(res);
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(res) {
								uni.hideLoading();
								uni.showModal({
									title: '存图成功',
									content: '图片成功保存到相册了，可以分享到朋友圈了',
									showCancel: false,
									confirmText: '好的',
									confirmColor: '#a78845',
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
											that.setData({
												myqr_show: false,
												myqr_blur: 0
											});
										}
									}
								});
							},
							fail: function(res) {
								uni.hideLoading();
								uni.showModal({
									title: '警告',
									content: '不授权无法保存',
									showCancel: false
								});
								that.setData({
									myqr_show: false,
									myqr_blur: 0
								});
							}
						});
					},
					fail: function(res) {
						uni.hideLoading();
						console.log(res);
					}
				});
			},

			// “去付款”按钮点击效果
			payOrder: function(e) {
				let that = this;
				let id = e.currentTarget.dataset.id;
				let ordern = e.currentTarget.dataset.sn;
				util.request(
					api.OrderPayCheck, {
						orderId: 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);
									console.log('订单号' + outOrderNo);
									// wx.navigateTo({
									//   url: '/pages/ucenter/orderDetail/orderDetail?id='+outOrderNo
									// });
								}

								util.showErrorToast('支付失败');
							}
						});
					}
				});
			},

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

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

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

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

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

			refundOrderOld: function(e) {
				let id = e.currentTarget.dataset.id;
			},

			refundOrder: function(e) {
				let id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/pages/ucenter/applyRefund/applyRefund?id=' + id
				});
			},

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

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

			handleInit(event) {
				const {
					status
				} = event.detail;
				console.log(status);
			},

			handleSuccess(event) {
				const {
					result
				} = event.detail;
				// 团购订单不支持查看评价，此时可决定按钮是否展示
				console.log(result);
			},

			handleError(event) {
				const {
					errMsg,
					errNo
				} = event.detail;
				// errNo（错误码，对应某种具体报错原因）
				// errMsg（报错信息）
				console.log(errMsg, errNo);
			},

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

			switchSer(e) {
				let serid = e.currentTarget.dataset.serid;
				this.setData({
					serviceId: serid
				});
			},

			appointModifyConf() {
				if (this.serviceId == '' || this.serviceId == null) {
					uni.showToast({
						title: '请选择要修改的服务',
						icon: 'none'
					});
					return false;
				} else {
					this.setData({
						appointDiaShow: false
					});
					uni.navigateTo({
						url: '/pages/ucenter/appointOrder/appointOrder?orderId=' + this.appointOrderId +
							'&serviceId=' + this.serviceId
					});
				}
			},

			closeModify() {
				this.setData({
					appointDiaShow: false
				});
			},

			modifyAppoint(e) {
				let id = e.currentTarget.dataset.id;
				let serid = e.currentTarget.dataset.serid;
				let times = e.currentTarget.dataset.times;
				this.setData({
					appointOrderId: id
				});
				if (times > 1) {
					this.setData({
						appointDiaShow: true,
						serviceId: ''
					});
					util.request(
						api.getBooked, {
							orderId: id
						},
						'GET'
					).then((res) => {
						if (res.errno === 0) {
							this.setData({
								serModifyList: res.data
							});
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/ucenter/appointOrder/appointOrder?orderId=' + id + '&serviceId=' + serid
					});
				}
			},

			onCancelClick() {},

			cancelAppoint(e) {
				let id = e.currentTarget.dataset.id;
				let serid = e.currentTarget.dataset.serid;
				let times = e.currentTarget.dataset.times;
				this.setData({
					appointOrderId: id
				});
				if (times > 1) {
					this.setData({
						cancelFirstShow: true,
						serviceId: ''
					});
					util.request(
						api.getBooked, {
							orderId: id
						},
						'GET'
					).then((res) => {
						if (res.errno === 0) {
							this.setData({
								serModifyList: res.data
							});
						}
					});
				} else {
					this.setData({
						cancelShow: true,
						serviceId: serid
					});
				}
			},

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

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

			onCancelPopupCloseFir() {
				this.setData({
					cancelFirstShow: false
				});
			},

			cancelFirstConfirm() {
				if (this.serviceId == '' || this.serviceId == null) {
					uni.showToast({
						title: '请选择要取消的服务',
						icon: 'none'
					});
					return false;
				}
				this.setData({
					cancelFirstShow: false,
					cancelShow: true
				});
			},

			cancelItemConfirm() {
				let that = this;
				if (that.cancelReason == '') {
					util.showErrorToast('请选择取消原因');
					return;
				}
				uni.showLoading({
					title: '提交中'
				});
				util.request(
					api.OrderBookCancel, {
						detailId: this.serviceId,
						cancelReason: this.cancelReason
					},
					'POST'
				).then((res) => {
					uni.hideLoading();
					if (res.errno === 0) {
						uni.showModal({
						    title: '提示',
						    content: '您已成功取消预约',
						    showCancel: false,
						   confirmColor: '#D77958',
						    confirmText: '确定',
						    success: function (res) {
						    }
						});
						uni.showToast({
							title: '提交成功'
						});
						this.setData({
							cancelShow: false,
							orderList: [],
							page: 1
						});
						this.getOrderList();
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						});
					}
				});
			},

			goSaveQrcode() {
				console.log('占位：函数 goSaveQrcode 未声明');
			},

			hidePoster() {
				console.log('占位：函数 hidePoster 未声明');
			}
		}
	};
</script>
<style>
	page {
		/* height: 100%; */
		width: 100%;
		background: #f4f4f4;
	}

	.orders-switch {
		width: 100%;
		background: #fff;
		height: 84rpx;
	}

	.orders-switch .item {
		display: inline-block;
		height: 82rpx;
		width: 18%;
		padding: 0 15rpx;
		text-align: center;
	}

	.orders-switch .item .txt {
		display: inline-block;
		height: 82rpx;
		padding: 0 20rpx;
		line-height: 82rpx;
		color: #9a9ba1;
		font-size: 30rpx;
		width: 170rpx;
	}

	.orders-switch .item.active .txt {
		color: #ab956d;
		border-bottom: 4rpx solid #ab956d;
	}

	.no-order {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.no-order .c {
		width: 100%;
		height: auto;
		padding-top: 400rpx;
	}

	.no-order .c text {
		margin: 0 auto;
		display: block;
		width: 258rpx;
		height: 29rpx;
		line-height: 29rpx;
		text-align: center;
		font-size: 29rpx;
		color: #999;
	}

	.orders {
		height: auto;
		width: 750rpx;
		/* overflow: hidden; */
		padding: 0 24rpx;
		margin-top: 110rpx;
	}

	.order {
		background: #fff;
		padding: 0 24rpx 24rpx 24rpx;
		border-radius: 24rpx;
		margin-bottom: 24rpx;
	}

	.order .h {
		height: 72rpx;
		border-bottom: 2rpx solid #e0e0e0;
		color: #191919;
		font-size: 28rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.order .goods {
		display: flex;
		/* align-items: center; */
		padding: 24rpx 0 0;
		position: relative;
	}

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

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

	.order .goods .info {
		height: 145.83rpx;
		flex: 1;
		padding-left: 20rpx;
	}

	.info-orderSn {
		font-size: 28rpx;
		font-weight: bold;
	}

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

	.info .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: 24rpx;
		font-weight: bold;
	}

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

	.order .goods .status {
		width: 105rpx;
		color: #b4282d;
		font-size: 25rpx;
	}

	.order .b {
		height: 44rpx;
		line-height: 44rpx;
		/* border-top: 1px solid #f4f4f4; */
		font-size: 26rpx;
		color: #666;
		text-align: right;
	}

	.order .b text {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.9);
		font-weight: bold;
	}

	.order .b .r {
		float: right;
	}

	.order .b .btn {
		margin-top: 19rpx;
		height: 64.5rpx;
		line-height: 64.5rpx;
		text-align: center;
		padding: 0 20rpx;
		border-radius: 5rpx;
		font-size: 28rpx;
		color: #fff;
		background: #b4282d;
	}

	.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: 10rpx 0 12rpx;
		margin: 20rpx 0 0;
	}

	/* .order-operate-wrapper::after {
    content: '';
    flex: auto;
  } */
	.order-operate-wrapper>view {
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		margin-left: 20rpx;
		width: 145rpx;
		height: 44rpx;
		line-height: 44rpx;
		background: #C0A182;
		border-radius: 56rpx;
		margin-top: 10rpx;
	}

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

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

	.myqr {
		position: fixed;
		z-index: 999;
		width: 100%;
		text-align: center;
		height: auto;
		padding-top: 50rpx;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.myqr .cancel {
		width: 60rpx;
		height: 60rpx;
		margin-top: 30rpx;
		margin-left: 480rpx;
	}

	.myqr .img {
		width: 480rpx;
	}

	.myqr .btn {
		width: 120rpx;
		height: 120rpx;
		line-height: 120rpx;
		margin-top: 20rpx;
		padding: 30rpx;
		background: #ffffff;
		border-radius: 60rpx;
	}

	/* 会员卡蒙层的样式 */
	.poster {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background-color: #333333d1;
		/* padding: 0rpx 80rpx; 
    padding-top: 20%;*/
		z-index: 99;
		height: 100%;
		text-align: center;
		justify-content: center;
		align-items: center;
		display: flex;
	}

	.title {
		color: #fff;
		margin: 20rpx 0;
		font-size: 30rpx;
	}

	.ads {
		margin: 10rpx 0rpx;
		color: #fff;
	}

	.tool {
		display: flex;
		text-align: center;
		justify-content: baseline;
		width: 100%;
		margin-top: 20rpx;
	}

	.tool view {
		flex: 1;
	}

	.img {
		width: 99rpx;
	}

	.closeImg {
		width: 57rpx;
		height: 57rpx;
	}

	.share-btn {
		background-color: transparent;
	}

	.share-btn::after {
		border: none;
	}

	.m-card {
		width: 100%;
		height: 230rpx;
		margin: 20rpx 0;
	}

	.m-card image {
		width: 100%;
		height: 230rpx;
	}

	.appoint-tabs-wrapper {
		height: 88rpx;
		display: flex;
		align-items: center;
		line-height: 88rpx;
		justify-content: space-around;
		position: fixed;
		left: 0;
		right: 0;
		top: 0rpx;
		background: #fff;
		z-index: 99;
	}

	.appoint-tab-item {
		font-weight: bold;
		font-size: 30rpx;
		color: #191919;
		/* width:80rpx; */
	}

	.appoint-tab-item.active {
		color: #FF0101;
		/* border-bottom:4rpx solid #09afff; */
	}

	.detail-btn {
		width: 148rpx;
		text-align: center;
		line-height: 60rpx;
		text-align: center;
		font-size: 26rpx;
		color: #00b9ff;
		margin-top: -20rpx;
		/* margin-left:340rpx; */

		width: 170rpx;
		height: 60rpx;
		background: #ffffff;
		border: 2rpx solid #00b9ff;
		border-radius: 60px;
		float: right;
	}

	.status-tips {
		height: 56rpx;
		background: #ebebeb;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding: 0 0 0 16rpx;
		margin-top: 24rpx;
	}

	.status-tips image {
		width: 36rpx;
		height: 32rpx;
	}

	.status-tips view {
		font-size: 24rpx;
		color: #2e3333;
	}

	.status-tips .tips-title {
		color: #191919;
		font-weight: bold;
		margin: 0 16rpx;
	}

	.customer-msg {
		background: #ebebeb;
		border-radius: 10rpx;
		display: flex;
		padding: 12rpx 16rpx;
		margin-top: 24rpx;
	}

	.customer-msg .msg-title {
		color: #fe2b54;
		font-weight: bold;
		font-size: 24rpx;
		white-space: nowrap;
	}

	.customer-msg .msg-text {
		line-height: 34rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 24rpx;
		color: #000000;
	}

	.over-time {
		position: absolute;
		top: 170rpx;
		right: 0;
		line-height: 40rpx;
		color: #ad0000;
		font-size: 28rpx;
	}

	.eval-btn {
		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;
		border: 2rpx solid #ff8219;
		color: #ff8219;
		background: #fff;
	}

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

	.tips-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx 0rpx 0;
		margin-bottom: 20rpx;
	}

	.tips-item-title {
		display: flex;
		height: 40rpx;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		padding: 0 32rpx;
	}

	.item-title-left {
		display: flex;
		align-items: center;
	}

	.item-title-left image {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.item-title-left text {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.item-title-right {
		height: 34rpx;
		background: #ffffff;
		border-radius: 4rpx;
		border: 1rpx solid #5fb306;
		padding: 0 8rpx;
		line-height: 34rpx;
		font-size: 22rpx;
		color: #5fb306;
	}

	.tips-item-line {
		display: flex;
		height: 44rpx;
		margin-bottom: 20rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
	}

	.tips-item-line .line-left {
		font-size: 28rpx;
		color: #999999;
	}

	.tips-item-line .line-right {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		width: 500rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	.line-right text {
		color: #5fb306;
	}

	.tips-item-content {
		background: #ff4447;
		border-radius: 0rpx 0rpx 14rpx 14rpx;
		padding: 24rpx 24rpx 24rpx 32rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
	}

	.order-devide {
		height: 40rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 4rpx;
	}

	.order-devide .line {
		width: 290rpx;
		height: 1rpx;
		background: #979797;
	}

	.order-devide .devide-text {
		font-size: 28rpx;
		color: #999999;
	}

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

	.refund-order-dialog {
		width: 606rpx;
		height: 644rpx;
		border-radius: 14rpx;
		background: #ffffff;
		border-radius: 20rpx;
		position: relative;
		padding: 300rpx 30rpx 40rpx;
		background: url('https://mall.zhaijieshi.cc/file/wx-huawang/bj3.png') no-repeat;
		background-color: #ffffff;
		background-size: 606rpx 210rpx;
	}

	.refund-order-dialog.refund-order-dia-success {
		padding: 200rpx 30rpx 40rpx;
		background-image: url('https://mall.zhaijieshi.cc/file/wx-huawang/bj3.png');
		height: auto;
		background-size: 100% 28%;
	}

	.title-icong {
		width: 129rpx;
		height: 91rpx;
		position: absolute;
		top: 60rpx;
		left: 240rpx;
	}

	.refund-order-dia-success .dia-btn-wrapper {
		justify-content: center;
	}

	.refund-order-dia-success .dia-cancel-btn {
		width: 484rpx;
		font-weight: bold;
		border: 2rpx solid #d77958;
		color: #d77958;
	}

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

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

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

	.dia-cancel-btn {
		width: 248rpx;
		height: 94rpx;
		line-height: 94rpx;
		border-radius: 94rpx;
		border: 2rpx solid #d77958;
		font-size: 32rpx;
		color: #d77958;
		text-align: center;
	}

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

	.modify-list {
		margin: 0 0 44rpx;
		max-height: 400rpx;
		overflow-y: scroll;
	}

	.modify-item {
		height: 46rpx;
		margin-bottom: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 46rpx;
	}

	.modify-item image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 16rpx;
	}

	.modify-item view {
		font-size: 32rpx;
		color: #999;
	}

	.modify-item view.current-modify {
		color: #d77958;
		/* font-weight: bold; */
	}

	.modify-close {
		width: 80rpx;
		height: 80rpx;
		margin-top: 58rpx;
	}

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

	/* 选择备注 */
	.appoint-overlay-wrapper.remark-overlay {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999;
	}

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

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

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

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

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

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

	.remark-list .remark-item.ser-item {
		border: #d77958 1rpx solid;
		border-radius: 12px;
		height: 130rpx;
		padding: 0 30rpx;
		margin-bottom: 24rpx;
	}

	.remark-list .remark-item.ser-item.current-ser {
		background: #FEEBD7;
		border: none;
	}

	.remark-item.ser-item .remark-value {
		color: #d77958;
		font-size: 29rpx;
		font-weight: normal;
		flex: 1;
	}

	.remark-item.ser-item view {
		color: #d77958;
		font-size: 32rpx;
		font-weight: normal;
	}

	.remark-item.ser-item.current-ser .remark-value {
		color: #d77958;
	}

	.remark-item.ser-item.current-ser view {
		color: #d77958;
	}

	.remark-item.ser-item .radio-img {
		width: 30rpx;
		height: 30rpx;
		margin-right: 26rpx;
	}

	.ser-right {
		text-align: right;
	}

	.remark-list.ser-list {
		min-height: 500rpx;
		max-height: 800rpx;
		overflow-y: scroll;
	}
</style>