sadjv3_user/pages/order/index.vue

<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view class="content" style="background-color: #f7f7f7;">
		<view class="sticky-tabs">
			<!-- <u-tabs :list="tabs" :is-scroll="true" :current="tabIndex" @change="tabChange" active-color="#333333"
				inactive-color="#333333"></u-tabs> -->
				<view class="sticky-tabs-list" v-for="(item,index) in tabs" :key="index" @click="tabChange(index)">
					<image :src="item.Aurl" mode="" v-if="tabIndex==index"></image>
					<image :src="item.Surl" mode="" v-else></image>
					<span :class="[tabIndex==index?'spanL':'spanH']">{{item.name}}</span>
				</view>
		</view>
		<!-- 数据列表 -->
		<view v-if="goods.length > 0" class="pay-margin bg ding-view" v-for="(item,index) in goods" :key='index'
			@click="goNav('/my/order/pay?ordersId='+item.ordersId,item)" style="border-radius: 20rpx;padding: 36rpx;">
			<view class="flex justify-between">
				<view class="flex align-center profile-img">
					<image src="../../static/logo.png" style="width: 55rpx;height: 55rpx;border: 1px solid#d7f2ee;border-radius: 50%;">
					</image>
					<view class="margin-left-xs ">{{item.artificerName}}</view>
				</view>
				<view v-if="item.status ==1"><span class="status-num">{{item.ordersNo}}</span><span class="status-button-a">待支付</span></view>
				<view v-if="item.status ==2"><span class="status-num">{{item.ordersNo}}</span><span class="status-button-b">待服务</span></view>
				<view v-if="item.status ==3"><span class="status-num">{{item.ordersNo}}</span><span class="status-button-c">待评价</span></view>
				<view v-if="item.status ==4"><span class="status-num">{{item.ordersNo}}</span><span class="status-button-d">已取消</span></view>
				<view v-if="item.status ==5"><span class="status-num">{{item.ordersNo}}</span><span class="status-button-e">已完成</span></view>
				<view v-if="item.status ==6"><span class="status-num">{{item.ordersNo}}</span><span class="status-button-f">服务中</span></view>
				<view v-if="item.status ==7"><span class="status-num">{{item.ordersNo}}</span><span class="status-button-h">技师出发</span></view>
				<view v-if="item.status ==8"><span class="status-num">{{item.ordersNo}}</span><span class="status-button-i">技师到达</span></view>
				<view v-if="item.status ==9"><span class="status-num">{{item.ordersNo}}</span><span class="status-button-g">待确认</span></view>
				<view  v-if="item.status ==10"><span class="status-num">{{item.ordersNo}}</span><span class="status-button-h">待补单</span></view>

				<!-- <view class="u-tips-color">{{item.createTime}}</view> -->
			</view>
			<view class="margin-top-sm" style="width: 100%;height: 1rpx;background: #f7f7f7;"></view>
			<view class=" u-flex u-p-t-30" >
				<view class="u-m-r-10">
					<u-avatar
						:src="item.ordersMassageList[0].massageType?item.ordersMassageList[0].massageType.massageImg: item.ordersMassageList[0].userPackageDetail.massageImg"
						mode="square" size="100" style="height: 155rpx;width: 155rpx;flex: 0 0 155rpx;">
					</u-avatar>
				</view>
				<view class="u-flex-1" style="margin-left: 20rpx;">
					<view class="text-bold u-line-1">
						<view class=" text-lg "
							style="font-size: 32rpx;margin-top: 0rpx;display: inline-block;width: 470rpx; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
							{{item.ordersMassageList[0].massageType?item.ordersMassageList[0].massageType.title:item.ordersMassageList[0].userPackageDetail.title}}
						</view>
					</view>
					<view class="u-font-13 u-tips-color justify-between title-font" style="margin-top: 14rpx;">
						<text class="title-font">预约时间：</text><text class="value-font">{{item.serveTime}}</text>
					</view>
					<view class="flex-sub u-font-13" style="color: #999999;">
						<text class="title-font">实付金额：</text><text class="text-xl text-bold" style="color: #FF1200;">￥{{item.payMoneyTotal}}</text>
					</view>
				</view>

			</view>
			<view class="flex u-p-t-20 justify-between align-center" style="justify-content: flex-end; margin-top: 20rpx;">
				<view class="flex text-right" style="flex-direction: column;width: 100%;">
					<view class="showBtn" v-if="item.status ==1">
						<u-button
							:custom-style="customStyle" shape="circle" :plain="true"
							 class="btns xianshi"
							@click="cancelOrder(item)">
							取消订单
						</u-button>
						<!-- <u-button
							v-if="item.btnShow == 'true'" :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/payModifyDzhifu?ordersId='+item.ordersId,item,'修改')" class="btns xianshi">
							修改订单
						</u-button> -->
						<!-- 升级去支付 -->
						<u-button v-if="item.isSupplement=='2'" :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/payShengji?ordersId='+item.ordersId,item)" class="btns">
							去支付
						</u-button>
						<!-- 不是升级 去支付 -->
						<u-button  v-if="item.isSupplement!='2'" :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/pay?ordersId='+item.ordersId,item)" class="btns">
							去支付
						</u-button>

					</view>
					<view class="showBtn" v-if="item.status ==2">
						<u-button
							:custom-style="customStyle" shape="circle" :plain="true"
							 class="btns xianshi"
							@click="cancelOrder(item)">
							取消订单
						</u-button>
						<u-button
							v-if="item.btnShow == 'true'" :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/payModifyDzhifu?ordersId='+item.ordersId,item,'修改')" class="btns xianshi">
							修改订单
						</u-button>
						<u-button :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/pay?ordersId='+item.ordersId,item)" class="btnsH xianshi">
							联系客服
						</u-button>
					</view>
					<view class="showBtn" v-if="item.status ==3">
						<u-button :custom-style="customStyle1" class="btns xianshi" shape="circle" :plain="true"
							@click="goNav('/my/order/feedback?artificerId='+item.artificerId+'&ordersId='+item.ordersId,item)">
							待评价
						</u-button>
						<u-button :custom-style="customStyle1" shape="circle"  class="btns xianshi" :plain="true"
							@click="goToushu('/my/order/complain?ordersId='+item.ordersId + '&byUserId=' + item.artificerUserId + '&byuserName=' + item.artificerName)" >
							去投诉
						</u-button>
						<u-button :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/pay?ordersId='+item.ordersId,item)" class="btnsH xianshi">
							联系客服
						</u-button>
					</view>
					<view class="showBtn" v-if="item.status ==4">
						<u-button :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/pay?ordersId='+item.ordersId,item)" class="btnsH xianshi">
							联系客服
						</u-button>
					</view>
					<view class="showBtn" v-if="item.status ==5">
						<u-button :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/pay?ordersId='+item.ordersId,item)" class="btnsH xianshi">
							联系客服
						</u-button>
					</view>
					<view class="showBtn" v-if="item.status==6" :style="{'justify-content':item.status ==6||item.status ==1?'space-between':'flex-end'}">
						<view class="gengduo" @click.stop="gengBtn(index)" v-show="item.status ==6||item.status ==1">
							更多
						</view>
						<view class="gengduoShow">
							<u-button
								v-if="item.addNum==null&&item.isSupplement==null&&item.isSupplement!=2"
								:custom-style="customStyle" shape="circle" :plain="true"
								 class="btns"
								@click="goNav('/my/order/pay?ordersId='+item.ordersId,item)">
								服务升级
							</u-button>

							<u-button :custom-style="customStyle1" class="btns" shape="circle" :plain="true"
									@click="goNav('/my/wallet/index?artificerId='+item.artificerId+'&ordersId='+item.ordersId,item)">
								充值
							</u-button>
							<u-button v-if="item.addNum ==null" :custom-style="customStyle1" class="btns" shape="circle" :plain="true"
									@click="goNav('/my/order/pay?ordersId='+item.ordersId,item)">
								加钟
							</u-button>
						</view>
						<view class="showBtn-view" v-if="gengBtnShow==true" :style="gengNum==index?{display:'inline-block'}:{display:'none'}">
							<view @click="goNav('/my/order/pay?ordersId='+item.ordersId,item)" class="gengduoBtn">
								联系客服
							</view>
							<view v-if="item.addNum==null&&item.oldOrdersId==null"
								@click="cancelOrder(item)" class="gengduoBtn">
								取消订单
							</view>
							<view @click="goToushu('/my/order/complain?ordersId='+item.ordersId + '&byUserId=' + item.artificerUserId + '&byuserName=' + item.artificerName)" class="gengduoBtn">
								去投诉
							</view>
							<view v-if="item.earlyFinishReason==null" @click="goNav('/my/order/pay?ordersId='+item.ordersId)" class="gengduoBtn">
								提前结束
							</view>
							<!-- <u-button :custom-style="customStyle1" shape="circle" :plain="true"
								@click="goNav('/my/order/pay?ordersId='+item.ordersId)" class="btnsH xianshi">
								联系客服
							</u-button> -->
							<!-- <u-button v-if="item.oldOrdersId==null && item.addNum==null" :custom-style="customStyle1" class="btns" shape="circle" :plain="true"
									@click="goNav('/my/order/pay?ordersId='+item.ordersId,item)">
								服务升级
							</u-button>
							<u-button :custom-style="customStyle1" shape="circle"  class="btns xianshi" :plain="true" @click="goNav('/my/order/complain?id='+item.ordersId)" >
								去投诉
							</u-button>
							<u-button :custom-style="customStyle1" class="btns" shape="circle" :plain="true"
								@click="toggle('center',item)">
								提前结束
							</u-button> -->
						</view>
					</view>
					<view class="showBtn" v-if="item.status ==7">
						<u-button
							:custom-style="customStyle" shape="circle" :plain="true"
							 class="btns xianshi"
							@click="cancelOrder(item)">
							取消订单
						</u-button>
						<u-button
							v-if="item.btnShow == 'true'" :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/payModifyDzhifu?ordersId='+item.ordersId,item,'修改')" class="btns xianshi">
							修改订单
						</u-button>
						<u-button :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/pay?ordersId='+item.ordersId,item)" class="btnsH xianshi">
							联系客服
						</u-button>
					</view>
					<view class="showBtn" v-if="item.status ==8">
						<u-button
							:custom-style="customStyle" shape="circle" :plain="true"
							 class="btns xianshi"
							@click="cancelOrder(item)">
							取消订单
						</u-button>
						<u-button
							v-if="item.btnShow == 'true'" :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/payModifyDzhifu?ordersId='+item.ordersId,item,'修改')" class="btns xianshi">
							修改订单
						</u-button>
						<u-button :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/pay?ordersId='+item.ordersId,item)" class="btnsH xianshi">
							联系客服
						</u-button>
					</view>
					<view class="showBtn" v-if="item.status ==9">
						<u-button
							:custom-style="customStyle" shape="circle" :plain="true"
							 class="btns xianshi"
							@click="cancelOrder(item)">
							取消订单
						</u-button>
						<u-button v-if="item.refusalContent" :custom-style="customStyle1" shape="circle" :plain="true"
							@click="toggleQ('center',item)"  class="btns xianshi">
							拒单详情
						</u-button>
						<u-button :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/pay?ordersId='+item.ordersId,item)" class="btnsH xianshi">
							联系客服
						</u-button>
					</view>
					<view class="showBtn" v-if="item.status ==10">
						<u-button
							:custom-style="customStyle" shape="circle" :plain="true"
							 class="btns xianshi"
							@click="cancelOrder(item)">
							取消订单
						</u-button>
						<u-button v-if="item.packageType=='104'||item.packageType=='105'||item.packageType=='106'" :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/payModifyDd?ordersId='+item.ordersId,item)" class="btns xianshi">
							立即预约
						</u-button>
						<u-button v-else :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/payModifyDd?ordersId='+item.ordersId,item)" class="btns xianshi">
							立即预约
						</u-button>
						<u-button :custom-style="customStyle1" shape="circle" :plain="true"
							@click="goNav('/my/order/pay?ordersId='+item.ordersId,item)" class="btnsH xianshi">
							联系客服
						</u-button>
					</view>

				</view>
			</view>
		</view>
		<view>
			<!-- 确认拒绝 -->
			<uni-popup ref="popupQ" background-color="#fff">
				<view class="popup-content">
					<view class="popup-head">
						<span>确认拒单</span>
						<span @click="closePopupQ(type)">x</span>
					</view>
					<view class="popup-mian">
						<view  class="popup-mian-textarea">
							{{qurenJd.refusalContent}}
						</view>
						<view class="popup-mian-btn">
							<span @click="TuiPopup(type,'1')">
								同意
							</span>
							<span @click="TuiPopup(type,'3')">
								全额退款
							</span>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view>
			<!-- 提前结束 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<view class="popup-head">
						<span>请输入提前结束的原因</span>
						<span @click="closePopup(type)">x</span>
					</view>
					<view class="popup-mian">
						<textarea placeholder="请输入提前结束服务原因" @input="textareaInp" class="popup-mian-textarea" name="" id="" cols="30" rows="10"></textarea>
						<view class="popup-mian-btn">
							<span @click="closePopup(type)">
								取消
							</span>
							<span @click="tiqian('center')">
								确定
							</span>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<empty v-if="goods.length == 0"></empty>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import mescrollBody from "@/components/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";
	import empty from '@/components/empty.vue'
	// 调用手机系统权限
	// #ifdef APP-PLUS
	import permision from "@/components/permission.js";
	// #endif
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			mescrollBody,
			meTabs,
			empty
		},
		data() {
			return {
				showDetails: [],
				tiqianData:[],
				qurenJd:[],
				btnShow:'',
				gengBtnShow:false,
				gengBtnHeid:false,
				gengNum:0,
				type:'center',
				goods: [], // 数据列表
				game: [],
				tabs: [{
					name: '全部',
					Aurl:'../../static/order_icon/order_icon1-1.png',
					Surl:'../../static/order_icon/order_icon1.png',
					status: '0'
				}, {
					name: '待支付',
					Aurl:'../../static/order_icon/order_icon2-2.png',
					Surl:'../../static/order_icon/order_icon2.png',
					status: '1'
				}, {
					name: '待服务',
					Aurl:'../../static/order_icon/order_icon3-3.png',
					Surl:'../../static/order_icon/order_icon3.png',
					status: '2'
				}, {
					name: '待补单',
					Aurl:'../../static/order_icon/order_icon4-4.png',
					Surl:'../../static/order_icon/order_icon4.png',
					status: '10'
				},{
					name: '技师出发',
					Aurl:'../../static/order_icon/order_icon10-10.png',
					Surl:'../../static/order_icon/order_icon10.png',
					status: '7'
				}, {
					name: '技师到达',
					Aurl:'../../static/order_icon/order_icon5-5.png',
					Surl:'../../static/order_icon/order_icon5.png',
					status: '8'
				}, {
					name: '服务中',
					Aurl:'../../static/order_icon/order_icon6-6.png',
					Surl:'../../static/order_icon/order_icon6.png',
					status: '6'
				}, {
					name: '待评价',
					Aurl:'../../static/order_icon/order_icon7-7.png',
					Surl:'../../static/order_icon/order_icon7.png',
					status: '3'
				}, {
					name: '已取消',
					Aurl:'../../static/order_icon/order_icon8-8.png',
					Surl:'../../static/order_icon/order_icon8.png',
					status: '4'
				}, {
					name: '已完成',
					Aurl:'../../static/order_icon/order_icon9-9.png',
					Surl:'../../static/order_icon/order_icon9.png',
					status: '5'
				}],
				tabIndex: 0, // tab下标
				page: 1,
				limit: 10,
				userId: 0,
				status: 1,
				nickName: '',
				avatar: '',
				customStyle: {
					color: '#999999',
					border: '4rpx solid #999999',
					border: "8rpx",
					width: '180rpx',
					height: '60rpx',
					margin: "0 0 0 20rpx",
					fontSize: '26rpx'
				},
				customStyle1: {
					color: '#FFFFFF',
					backgroundColor: '',
					border: "8rpx",
					width: '180rpx',
					height: '60rpx',
					margin: "0 0 0 10rpx",
					fontSize: '26rpx'
				},
				yhqxSel: '否',
				latitude: '43.86487',
				longitude: '',
				// customStyle: {
				// 	color: '#1789FD',
				// 	backgroundColor: '#1E1F31',
				// 	border: "8rpx",
				// 	width: '180rpx',
				// 	height: '54rpx',
				// 	margin: "0 0 0 20rpx"
				// }
				earlyFinishReason:'',
				currentDate:new Date()

			}
		},
		computed: {
		    getCurrentTime() {
			  const hours = this.currentDate.getHours().toString().padStart(2, '0');
		      const minutes = this.currentDate.getMinutes().toString().padStart(2, '0');
		      return `${hours}:${minutes}`;
		    }
		},
		onLoad() {
			this.userId = uni.getStorageSync('userId')
			this.nickName = uni.getStorageSync('nickName');

		},
		onShow() {
			this.yhqxSel = this.$queue.getData("yhqxSel");
			let SelectIndex = this.$queue.getData('SelectIndex');
			if (SelectIndex) {
				this.tabIndex = SelectIndex;
				this.$queue.remove('SelectIndex')
			}

			let token = this.$queue.getData('token');
			if (token) {
				uni.showLoading({
					title: '加载中...'
				})
				this.getOrderList()
			} else {
				uni.navigateTo({
					url: '/pages/public/login'
				});
			}
		},
		methods: {
			taocanDaiBd(url,item){
				this.$queue.setData('getJishi','');
				this.$queue.setData('xiangmu',item);
				uni.navigateTo({
					url:url
				})
			},
			goToushu(url){//去投诉
				uni.navigateTo({
					url:url
				})
			},
			goNav(url,item,text) {
				this.$queue.setData('xiangmu',item);
				this.$queue.setData('getJishi','')
				console.log(item);
				if(item.isSupplement=='2'){//如果有订单有升级 那就去升级订单详情
					if(item.addNum||item.isSupplement=='2'){
						uni.navigateTo({
							url:'/my/order/payShengji?ordersId='+item.ordersId
						})
					}

				}else if(item.addNum&&item.isSupplement!='2'){
					uni.navigateTo({
						url:'/my/order/payJaZ?ordersId='+item.ordersId
					})
				}else if(text=='修改'){
					uni.navigateTo({
						url:'/my/order/payModifyDzhifu?ordersId='+item.ordersId
					})
				}else{
					uni.navigateTo({
						url:url
					})
				}
			},
			timeToMilliseconds(timeStr) {
			  // 分割时分为数组
			  let parts = timeStr.split(':');
			  // 确保时和分是数字
			  if (parts.length === 2 && !isNaN(parseInt(parts[0])) && !isNaN(parseInt(parts[1]))) {
			    // 将时和分转换为整数
			    let hours = parseInt(parts[0]);
			    let minutes = parseInt(parts[1]);
			    // 计算并返回毫秒数
			    return (hours * 60 + minutes) * 60 * 1000;
			  } else {
			    // 如果格式不正确，返回0或抛出错误
			    return 0; // 或者 throw new Error('Invalid time format');
			  }
			},
			//获取列表数据
			getOrderList() {
				let curTab = this.tabs[this.tabIndex].status
				this.gengBtnShow=false;
				let data = {
					status: curTab,
					page: this.page,
					limit: this.limit
				}
				// selectOrdersList
				this.$Request.get('/app/artificer/selectAppOrdersList', data).then(res => {
					if (res.code == 0) {
						uni.hideLoading();
						if (this.page == 1) this.goods = []; //如果是第一页需手动制空列表
						this.goods = [...this.goods, ...res.data.list]; //追加新数据
						var timestamp = this.timeToMilliseconds(this.getCurrentTime);
						var twoTime=2* 60 * 60 * 1000;
						var time='';

						for(var i=0;i<this.goods.length;i++){
							time=this.timeToMilliseconds(this.goods[i].serveTime.slice(11, 16))
							if(time - timestamp>twoTime){
								this.$set(this.goods[i], 'btnShow', 'true')
							}else{
								this.$set(this.goods[i], 'btnShow', 'false')
							}

						}
						console.log("this.goods[i].serveTime.slice(15, 16)",this.goods)
					}

				}).catch(() => {
					//联网失败, 结束加载

				});
			},

			gengBtn(index){//更多按钮
				// console.log("inex=====",index)
				this.gengNum=index;
				this.gengBtnShow=!this.gengBtnShow
			},
			closePopupQ(type){//提前结束    关闭弹出框
				this.type = type
				this.$refs.popupQ.close(type);
			},
			toggleQ(type,item) {//确认拒单 弹出框
				this.qurenJd=item;

				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popupQ.open(type)
			},
			TuiPopup(typeTxte,type,id){//确认拒单 全额退款.同意按钮   关闭弹出框
				var that=this;
				that.type = typeTxte
				let data = {
					ordersId: that.qurenJd.ordersId?that.qurenJd.ordersId:id.ordersId,
					isAuto: '0',
					type: type
				}
				that.$Request.post('/app/artificer/cancelSupplementOrders', data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title:'操作完成！'
						})
						that.getOrderList()
						that.$refs.popupQ.close(typeTxte);
					}else{
						uni.showToast({
							icon:'error',
							title:res.msg
						})
					}

				}).catch(() => {
					//联网失败, 结束加载
				});
			},

			closePopup(type){//提前结束    关闭弹出框
				this.type = type
				this.$refs.popup.close(type);
			},
			textareaInp(e){//提前结束 输入框
				this.earlyFinishReason=e.detail.value;
				console.log("earlyFinishReason",this.earlyFinishReason)
			},
			tiqian(type){//提前结束 确认按钮
				var that=this;
				that.type = type;
				if(that.earlyFinishReason){
					uni.getLocation({
						type: 'wgs84',
						success: function (resa) {
							var longitude=resa.longitude;
							var latitude=resa.latitude;
							console.log('当前位置的经度：' + resa.longitude);
							console.log('当前位置的纬度：' + resa.latitude);
							let data = {
								ordersId: that.tiqianData.ordersId,
								accomplishLongitude:longitude,
								accomplishLatitude:latitude,
								earlyFinishReason: that.earlyFinishReason,
							}

							that.$Request.post('/app/artificer/accomplishOrders', data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title:'操作完成！'
									})
									that.getOrderList()
									that.$refs.popup.close(type);
									uni.switchTab({
										url:'/pages/order/index'
									})
								}else{
									console.log('shibai：' + longitude);
									console.log('shibai：' + latitude);
									uni.showToast({
										icon:'error',
										title:res.msg
									})
								}

							}).catch(() => {
								//联网失败, 结束加载
							});

						},
							fail: function(e) {
								// #ifdef H5
									uni.showToast({
										title:'获取地址失败！'
									})
								// #endif
								// #ifdef APP-PLUS
								that.checkPermission();
								// #endif
							}
					});

				}else{
					uni.showToast({
						icon:'error',
						title:'请输入提前结束原因！'
					})
				}

			},
			toggle(type,item) {//提前结束 弹出框
				this.tiqianData=item;
				this.type = type;
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type);
			},
			async checkPermission() {
				let status = permision.isIOS ? await permision.requestIOS('location') : await permision.requestAndroid(
					'android.permission.ACCESS_FINE_LOCATION');
				if (status === null || status === 1) {
					status = 1;
				} else if (status === 2) {
					uni.showModal({
						content: "系统定位已关闭",
						confirmText: "确定",
						showCancel: false,
						success: function(res) {}
					})
				} else if (status.code) {
					uni.showModal({
						content: status.message
					})
				} else {
					uni.showModal({
						title: '定位服务已关闭',
						content: "您需要打开定位权限，否则我们将无法获得到您附近的项目服务，导致我们无法为您提供服务，请到>设置>隐私>定位服务>中开启【盛安到家】定位权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				return status;
			},


			// 切换菜单
			tabChange(index) {
				uni.showLoading({
					title: '加载中...'
				})
				this.tabIndex = index
				// this.goods = []; // 置空列表,显示加载进度条
				this.page = 1
				this.getOrderList()
			},
			cancelOrders(data){//取消订单
				let that = this
				that.$Request.post('/app/artificer/deleteOrders', data).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						that.page = 1;
						uni.showToast({
							title:'操作成功！'
						})
						that.getOrderList()
					} else {
						that.$queue.showToast(res.msg);
					}
				})
			},
			// 取消订单待确认
			cancelOrder(e) {
				let that = this
				let data = {
					ordersId: e.ordersId
				}
				//取消订单扣费
				that.$Request.post('/app/artificer/cancelOrdersMoney', data).then(resa => {
					uni.hideLoading();
					if (resa.code == 0) {
						that.page = 1;
						uni.showModal({
							title: '温馨提示',
							content: '是否确认取消订单？' + resa.data,
							success: function(res) {
								if (res.confirm) {
									that.cancelOrders(data)
									that.$queue.showLoading('取消中...')

								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else {
						that.$queue.showToast(res.msg);
					}
				})

			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
				this.page = 1;
				this.getOrderList();
			},
			// 完成订单
			cancel(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认完成订单吗?',
					success: function(res) {
						if (res.confirm) {
							let data = {
								ordersId: e.ordersId,
							}
							that.$queue.showLoading('提交中...')
							that.$Request.post('/app/artificer/accomplishOrders', data).then(res => {
								uni.hideLoading();
								if (res.code == 0) {
									that.page = 1
									that.getOrderList()
								} else {
									that.$queue.showToast(res.msg);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//删除
			delOrder(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除订单吗?',
					success: function(res) {
						if (res.confirm) {
							let data = {
								ordersId: e.ordersId,
							}
							that.$queue.showLoading('删除中...')
							that.$Request.post('/app/artificer/removeOrders', data).then(res => {
								uni.hideLoading();
								if (res.code == 0) {
									uni.showToast({
										name: "删除成功"
									})
									that.page = 1
									that.getOrderList()
								} else {
									that.$queue.showToast(res.msg);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getOrderList();
			// console.log("asd",this.totalCount)
			// if (this.totalCount==undefined&&this.orderList!='') {
			// 	uni.showToast({
			// 		title: '已经到底了~',
			// 		icon: 'none'
			// 	})
			// }
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getOrderList();
			setTimeout(d => {
				uni.stopPullDownRefresh();
			}, 2000)
		},
	}
</script>

<style lang="scss" scoped>
	.pay-margin{
	margin: 20rpx 20rpx;
	}
	.gengduoShow{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.gengduoBtn{
		height:70rpx;
		line-height: 70rpx;
		border-bottom: 1px solid #f2f2f2;
		padding: 0 20rpx;
		color: #666666;
		text-align: center;
	}
	.content{
		padding-bottom: 100px;
	}
	.xianshi{
		margin: 0px 5px 0px 0px !important;
	}
	/deep/.u-size-default{
		margin-top: 5px !important;
	}
	/deep/.justify-between{
		height: 54rpx;
	}
	.gengduo{
		font-weight: 400;
		color: #7D7D7D;
		margin-top: 20rpx;
	}
	.profile-img{
		margin-top: -20rpx;

	}
	.ding-view{
		position: relative;
	}
	.showBtn-view{
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		background-color: #ffffff;
		padding: 10px;
		bottom:90rpx;
		left:50rpx;
		box-shadow: 0px 0px 3px 0px #b5b5b5;
		border-radius: 10rpx;
	}
	.showBtn-view:before {
		position: absolute;
		left: 20rpx;
		bottom:-12rpx;
		width: 20rpx;
		height: 20rpx;
		background: #ffffff;
		margin-top: -2px;
		border-right: 1px solid #e5e5e5;
		border-bottom: 1px solid #e5e5e5;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		content: '';
	}
	.showBtn{
		margin: 35rpx 0;
		width: 103%;
		display: flex;
		flex-direction: row;
		align-items: right;
		justify-content: right;
	}

	.popup-mian-btn span:nth-child(1){
		background: linear-gradient(90deg, #FE912E, #FF9970);
	}
	.popup-mian-btn span:nth-child(2){
		background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
	}
	.popup-mian-btn span{
		width: 247rpx;
		height: 77rpx;
		line-height: 77rpx;
		text-align: center;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFEFE;
		border-radius: 39rpx;
	}
	.popup-mian-btn{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}
	.popup-mian-textarea{
		width: 525.69rpx;
		height: 211.81rpx;
	}
	.popup-mian{
		width: 88%;
		display: flex;
		flex-direction: column;
		margin: 5px auto 0px auto;
	}
	.popup-head span:nth-child(2){
		width: 50rpx;
		height: 50rpx;
		line-height: 19px;
		text-align: center;
		font-size: 24px;
		color: #15AB8D;
		border-radius: 50%;
		border: 3px solid #15AB8D;
	}
	.popup-head span:nth-child(1){
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	.popup-head{
		width: 100%;
		height: 99.38rpx;
		background-color: rgba(21, 171, 141, 0.09);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
	}
	.popup-content{
		width: 613rpx;
		height: 479rpx;
		background: #FFFFFF;
		border-radius: 56rpx;
		display: flex;
		flex-direction: column;
	}
	/deep/.btnsH{
		background: #fff !important;
		// border: 1px solid #d7d7d7 !important;
		color: #d7d7d7 !important;
		width: 164rpx !important;
		height: 47rpx !important;
		line-height: 47px !important;
		border-radius: 23rpx !important;
		font-size: 30rpx!important;
		}
	/deep/.btns{
		background: #fff !important;
		// border: 1px solid #019C88 !important;
		color: #019c88 !important;
		width: 164rpx !important;
		border-radius: 23rpx !important;
		font-size: 30rpx!important;
	}
	.text-green span:nth-child(1){
		font-weight: 400;
		font-size: 25rpx;
		color: #7D7D7D;
		margin-right: 3px;
	}
	.text-green span:nth-child(2){
		font-weight: 400;
		font-size: 25rpx;
		color: #7D7D7D;
		margin-right: 10px;
	}
	/deep/.margin-top-sm{
		margin-top: 3px;
	}
	.sticky-tabs {
		width: 100%;
		z-index: 990;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px;
		position: sticky;
		top: var(--window-top);
		flex-wrap: wrap;
		align-content: flex-start;
		background: #fff;
		border-bottom: 1px solid #f7f7f7;
		//background:url('../../static/background-img4.png') bottom;
		//background-repeat: no-repeat;
		//background-size: 100% 100%;
	}
	.sticky-tabs-list image{
		width: 52.08rpx;
		height: 50.69rpx;
	}
	.spanH{
		color: #666;
	}
	.spanL{
		color: #019C88;
	}
	.sticky-tabs-list span{
		font-weight: bold;
		font-size: 26rpx;
		margin-top: 3px;
	}
	.sticky-tabs-list{
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 10px;

	}
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/


	// 使用mescroll-uni,则top为0
	.mescroll-uni,
	/deep/.mescroll-uni {
		.sticky-tabs {
			top: 0;
		}
	}

	.demo-tip {
		padding: 18upx;
		font-size: 24upx;
		text-align: center;
	}
	/deep/uni-page-body{
		height: 100%;
		background-color: #F7F7F7;
	}
	page {
		height: 100%;
		background-color: #F7F7F7;
	}

	.bg {
		background-color: #FFFFFF;
	}
	.margin-left-xs{
		font-size: 32rpx;
		font-weight: bold;
		color: #111111;
	}
	.status-button{
		font-weight: bold;
		color: #019c88;
		font-size: 31rpx;
	}
	.status-button-a{
		font-weight: bold;
		color: #ff932a;
	}
	.status-button-b{
		font-weight: bold;
		color: #7446fc;
	}
	.status-button-d{
		font-weight: bold;
		color: #888888;
	}
	.status-button-e{
		font-weight: bold;
		color: #999999;
	}
	.status-button-f{
		font-weight: bold;
		color: #019c88;
	}
	.status-button-g{
		font-weight: bold;
		color: #e04f3c;
	}
	.status-button-h{
		font-weight: bold;
		color: #965fb9;
	}
	.status-button-i{
		font-weight: bold;
		color: #002ea4;
	}
	.status-button-g{
		font-weight: bold;
		color: #43b943;
	}
	.status-button-h{
		font-weight: bold;
		color: #1bcada;
	}
	.status-num{
		margin-right: 15rpx;
	}
	.title-font{
		font-size: 30rpx;
		color: #666666;
	}
	.value-font{
		font-size: 30rpx;
		color: #333333;
	}
</style>