<template>
	<view class="page1">
		<view class="swiper-container">
			<view class="swiper-page" v-if="currentIndex == 0">
				
				<view style="position: relative;height: 545rpx;">
					<view style="width:100%;height: 180rpx;position: fixed;top: 0;background: #fff;z-index: 90;" v-if="lastScrollTop>583"></view>
					<view style="position: absolute;top: 110rpx;left: 20rpx;z-index: 999;">
						<view @click="checkArea" v-if="areaName == ''">
							点击选择区域
							<uni-icons type="right" size="12" style="margin-left: 10rpx;"></uni-icons>
						</view>
						<view @click="checkArea" v-else>
							{{areaName}}
							<uni-icons type="right" size="12" style="margin-left: 10rpx;"></uni-icons>
						</view>
					</view>
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item>
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/eaae29a344a241b3b46e7b91882ca197.png" alt="" />
						</swiper-item>
						<swiper-item>
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/eaae29a344a241b3b46e7b91882ca197.png" alt="" />
						</swiper-item>
						<swiper-item>
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/eaae29a344a241b3b46e7b91882ca197.png" alt="" />
						</swiper-item>
					</swiper>
					<view class="order-msg-box">
						<view class="order-msg-left">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/bf2bb7f80e17428391c407aef769517a.png" alt="" />
						</view>
						<view class="order-msg-center">
							<view style="font-weight: 700;font-size: 30rpx;line-height: 60rpx;margin-top: 5%;">配送员正在赶往商家
							</view>
							<view style="font-size: 24rpx;">预计<text style="color: red;">12:03-12:30</text>送达</view>
						</view>
						<view class="order-msg-right" @tap="$refs.pagesPopup.open()">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/579569bfcc954f52baea06f6f11951be.png" alt="" />
						</view>
					</view>
					<view class="menu-box">
						<view class="menu-list" @tap="goDetail('1')">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/7690c4f897604fca804ea932bc3c1239.png" alt="" />
							<view class="menu-name">跑腿/快递</view>
						</view>
						<view class="menu-list" @tap="goDetail('2')" style="position: relative;">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/553230c20dea4e5c85f1e396058a7493.png" alt="" />
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1a02b40d853a4cfdb062fff44ec49e6a.png" alt=""
								style="position: absolute;top: -16rpx;right: 0;width: 88rpx;height: 36rpx;">
							<view class="menu-name">饭团</view>
						</view>
						<view class="menu-list" @tap="goDetail('3')">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/a2f41e2d45cb4d418d273f6e9ceafff0.png" alt="" />
							<view class="menu-name">农场</view>
						</view>
						<view class="menu-list" @tap="goDetail('4')">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/41cfb56caff4419b94b69d0f2303b602.png" alt="" />
							<view class="menu-name">扭蛋机</view>
						</view>
						<view class="menu-list" @tap="goDetail('5')">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/a083b7d159264bbc967034088fa7eb3a.png" alt="" />
							<view class="menu-name">ie浏览器</view>
						</view>
					</view>
					<view class="like-box">
						<view class="like-title">
							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e0c44bc9b69a46559d3aa4160d3cf4a5.png" alt="" />
							
						</view>
						
						<view class="like-content-box">
							<view class="like-left">
								<view class="like-content-title">
									<view style="width: 100%;font-weight: 700;">爆品拼团</view>
									<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/0eeb2e28f84a43a0aefddd8edb430d73.png" alt=""
										style="width: 140rpx;height: 64rpx;position: absolute;top: -16rpx;left: 40%;" />
									<img src="/static/images/img/yousanjiao.png" alt=""
										style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;">
								</view>
								<view class="like-content">
									<view class="content-list">
										<view class="list-img">
											<img src="/static/images/img/shangpintu.png" alt="">
											<view class="list-type">3人团</view>
										</view>
										<view class="list-product">
											<view class="list-name">

												<view class="list-text">炸鸡、薯片零食大礼包</view>
											</view>
											<view class="list-price" style="color: #00231C;">￥12.90</view>
											<view class="list-total">
												拼团<text style="color: red;">￥9.90</text>
											</view>
										</view>
									</view>
									<view class="content-list">
										<view class="list-img">
											<img src="/static/images/img/shangpintu.png" alt="">
											<view class="list-type">3人团</view>
										</view>
										<view class="list-product">
											<view class="list-name">

												<view class="list-text">炸鸡、薯片零食大礼包</view>
											</view>
											<view class="list-price" style="color: #00231C;">￥12.90</view>
											<view class="list-total">
												拼团<text style="color: red;">￥9.90</text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="like-left">
								<view class="like-content-title">
									<view style="font-weight: 700;">爆品拼团</view>
									<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/0eeb2e28f84a43a0aefddd8edb430d73.png" alt=""
										style="width: 140rpx;height: 64rpx;position: absolute;top: -16rpx;left: 40%;" />
									<img src="/static/images/img/yousanjiao.png" alt=""
										style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;">
								</view>
								<view class="like-content">
									<view class="content-list">
										<view class="list-img">
											<img src="/static/images/img/shangpintu.png" alt="">
											<view class="list-type">3人团</view>
										</view>
										<view class="list-product">
											<view class="list-name">

												<view class="list-text">炸鸡、薯片零食大礼包</view>
											</view>
											<view class="list-price" style="color: #00231C;">￥12.90</view>
											<view class="list-total">
												拼团<text style="color: red;">￥9.90</text>
											</view>
										</view>
									</view>
									<view class="content-list">
										<view class="list-img">
											<img src="/static/images/img/shangpintu.png" alt="">
											<view class="list-type">3人团</view>
										</view>
										<view class="list-product">
											<view class="list-name">

												<view class="list-text">炸鸡、薯片零食大礼包</view>
											</view>
											<view class="list-price" style="color: #00231C;">￥12.90</view>
											<view class="list-total">
												拼团<text style="color: red;">￥9.90</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="daimai-box" style="padding-bottom:180rpx;">
						<view class="daimai-tab" id="menuList" :style="{'top': (navBarHeight+46) + 'px','background':lastScrollTop>583?'#fff':''}">
							<view @tap="checkTab1('waimai')" style="flex: 1;">
								<view class="like-title"  style="position: relative;width: 160rpx;height: 50rpx;margin-top:10rpx;" v-if="checked == 'waimai'">
									<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4d3207adb25546f68ce4d3428e571867.png" alt="" style="width: 160rpx;height: 50rpx;" />
									<text style="position: absolute;top: 0;left: 60rpx;font-size: 30rpx;font-weight: 700;height: 50rpx;line-height: 40rpx;">（{{waimaiCount}}）</text>
								</view>
								<view style="font-size: 30rpx;font-weight: 700;margin-left: 20rpx;color: #777;" v-else>
									外卖({{waimaiCount}})
								</view>
							</view>
							<view @tap="checkTab1('kuaidi')" style="margin-left: 20rpx;flex: 1;">
								<view class="like-title" style="position: relative;width: 160rpx;height: 50rpx;margin-top:10rpx;" v-if="checked == 'kuaidi'">
									<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/aeff6530c1c4486e9c7d088522de0c98.png" alt="" style="width: 160rpx;height: 50rpx;">
									<text style="position: absolute;top: 0;left: 60rpx;font-size: 30rpx;font-weight: 700;height: 50rpx;line-height: 40rpx;">（{{kuaidiCount}}）</text>
								</view>
								<view style="font-size: 30rpx;font-weight: 700;margin-left: 20rpx;color: #777;" v-else>
									快递({{kuaidiCount}})
								</view>
							</view>
							<view @tap="checkTab1('paotui')" style="margin-left: 20rpx;flex: 1;">
								<view class="like-title" style="position: relative;width: 160rpx;height: 50rpx;margin-top:10rpx;" v-if="checked == 'paotui'">
									<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e2cccb5ad1534b2aaae9b2b67ed401b4.png" alt="" style="width: 160rpx;height: 50rpx;">
									<text style="position: absolute;top: 0;left: 60rpx;font-size: 30rpx;font-weight: 700;height: 50rpx;line-height: 40rpx;">（{{paotuiCount}}）</text>
								</view>
								<view style="font-size: 30rpx;font-weight: 700;margin-left: 20rpx;color: #777;" v-else>
									跑腿({{paotuiCount}})
								</view>
							</view>
							<view @tap="checkTab1('zhipai')" style="margin-left: 20rpx;flex: 1;" v-if="worker != null">
								<view class="like-title" style="position: relative;width: 160rpx;height: 50rpx;margin-top:10rpx;" v-if="checked == 'zhipai'">
									<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/2bfc2333818b47478572e4d1a430049a.png" alt="" style="width: 160rpx;height: 50rpx;">
									<text style="position: absolute;top: 0;left: 80rpx;font-size: 30rpx;font-weight: 700;height: 50rpx;line-height: 40rpx;">（{{zhipaiCount}}）</text>
								</view>
								<view style="font-size: 30rpx;font-weight: 700;margin-left: 20rpx;color: #777;" v-else>
									指派单({{zhipaiCount}})
								</view>
							</view>
						</view>
						<view class="title-sort" v-if="lastScrollTop>583" :style="{'top': (navBarHeight+76) + 'px'}">
							<view class="sort-member" style="position: relative;">
								<view @tap="checkAdd">
									取餐地址 <text style="font-size: 20rpx;">▼</text>
								</view>
								<view class="sort-value" v-if="isgetArea">
									<view class="sort-value1" v-for="(item,index) in getshopArea" :key="index"
										@tap="searchOrder('getarea',item)">{{item.title}}</view>
								</view>
							</view>
							<view class="sort-member" style="position: relative;">
								<view @tap="checkAdd1">
									送餐地址 <text style="font-size: 20rpx;">▼</text>
								</view>
								<view class="sort-value" v-if="isputArea">
									<view class="sort-value1" v-for="(item,index) in putshopArea" :key="index"
										@tap="searchOrder('putarea',item)">{{item.title}}</view>
								</view>
							</view>
							<view @tap="searchOrder('yongjin')" class="sort-member" style="border-radius: 60rpx" :style="{'background':checkYongjin==true?'rgba(138, 255, 67, 0.16)':'#eee','border':checkYongjin==true?'1px solid rgba(138, 255, 67, 1)':'0'}">
								佣金
							</view>
						</view>
						<view class="sort-text" v-if="lastScrollTop>583" :style="{'top': (navBarHeight+126) + 'px'}">
							<view style="display: flex; width: 100%;">
								<view @tap="searchOrder('delgetarea',item)" class="guize1-qusong" v-if="getAreaData.id != undefined">
									<view class="qusong1">
										取
									</view>
									<view class="qusong2">
										{{getAreaData.title}}
									</view>
								</view>
								<view @tap="searchOrder('delputarea',item)" class="guize1-qusong" v-if="putAreaData.id != undefined">
									<view class="qusong1">
										送
									</view>
									<view class="qusong2" style="background: rgba(209, 206, 255, 1);">
										{{putAreaData.title}}
									</view>
								</view>
							</view>
						</view>
						<view class="daimai-list">
							<view class="list-1" v-for="(item,index) in deliveryItem" :key="index" @tap="goDetail('search',item)">
								<view class="daoda-time">
									送达时间：{{item.mustFinishTime != null ? item.mustFinishTime : '' | formatHourMinute }}
								</view>
								<view class="order-page">
									<view class="maotou">
										#<text>{{item.numberCode != null ? item.numberCode : ''}}</text>
									</view>
									<view class="shangjia">
										<text style="font-weight: 700;">{{item.shopName != null ? item.shopName : ''}}</text>
										<view
											style="width: 32rpx;height: 30rpx;font-weight: 700;font-size: 20rpx;color: #fff;text-align: center;background: #00BFFF;border-radius: 10rpx;margin: 20rpx 0 0 10rpx;line-height: 30rpx;">
											祥
										</view>
									</view>
									<view class="shangpin">
										<view class="qu-song">
											<view class="qu-box">
												<view class='qu-tu'>
													<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1f77398a73454a6595c12a3c18731599.png" alt="" />
												</view>
												<view class="qu-text">
													<view class="qu-left">
														{{item.shopAddress != null ? item.shopAddress : ''}}
													</view>
													<view class="qu-right">
														<img @tap="makeCall(item.contactPhone)"
															src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png"
															alt="" style="width: 40rpx;height: 40rpx;" />
													</view>
												</view>
											</view>
											<view class="qu-box" style="margin-top:15rpx;">
												<view class='qu-tu'>
													<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d0764fb4138747769538cf1cafa3b017.png" alt="" />
												</view>
												<view class="qu-text">
													<view class="qu-left">
														{{item.receiverAddress != null ? item.receiverAddress : ''}}
													</view>
													<view class="qu-right">
														<img @tap="makeCall(item.receiverPhone)"
															src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png"
															alt="" style="width: 40rpx;height: 40rpx;" />
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="yongjin">
									<view style="width: 50%;color: #777;padding-left: 4%;display: flex;">
										配送佣金
										<view class="chaoda">
											超大/超重
										</view>
									</view>
									<view style="font-weight: 700;width: 50%;text-align: right;">
										￥{{(item.deliveryFee + item.deliveryFeeMarketplace).toFixed(2)}}
										<text style="color: #777;font-size: 22rpx;" v-if="item.deliveryFeeMarketplace > 0">（包含￥{{item.deliveryFeeMarketplace}}平台佣金）</text>
									</view>
								</view>
								<view class="beizhu" v-if="item.remark != null">
									备注：{{item.remark}}
								</view>
								<view class="qiangdan-btn" @tap="getOrder(item,index)">
									<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1b8b815302a34902ac79a76a469e4ee6.png" alt="">
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="swiper-page" v-show="currentIndex == 1">
				<de-livery ref="deLiveryPage"></de-livery>
			</view>
			<view class="swiper-page" v-show="currentIndex == 3">
				<post-list ref="postListPage"></post-list>
			</view>
			<view class="swiper-page" v-show="currentIndex == 4">
				<my-center ref="myCenterPage"></my-center>
			</view>
		</view>
		<!-- 弹出区域选择 -->
		<uni-popup ref="areaPopup" background-color="#fff">
			<view class="popup-area-content">
				<view class="popup-area-title">
					<text>请选择所属区域</text>
				</view>
				<view class="popup-area-container" v-for="(item,index) in areaList" :key="index" @tap="onClickArea(item)">
					<text style="display: inline-block">{{item.title}}</text>
				</view>
			</view>
		</uni-popup>
		<!-- 弹出区域选择 -->
		<uni-popup ref="pagesPopup" background-color="#fff">
			<view class="popup-area-content" style="height: 1200rpx;overflow: scroll;">
				<view class="popup-area-title">
					<text>查看页面</text>
				</view>
				<view class="popup-area-container" v-for="(item,index) in pages" :key="index" @tap="aaaaaaa(item)">
					<text style="display: inline-block">{{item.name}}</text>
				</view>
			</view>
		</uni-popup>
		<tab-bar :width="width" @tab-index="changeIndex" :currentIndex="currentIndex"></tab-bar>
	</view>
</template>
<script>
	import tabBar from "@/components/tab-bar/tab-bar.vue";
	import deLivery from "@/components/tab-bar/delivery.vue";
	import postList from "@/components/tab-bar/postList.vue";
	import myCenter from "@/components/tab-bar/myCenter.vue";
	export default {
		data() {
			return {
				pages:[{
					name:'发布订单评价111',
					url:'/package1/order/orderEvaluate'
				},{
					name:'优惠券列表111',
					url:'/package1/myCenter/couponList'
				},{
					name:'订单列表111',
					url:'/package1/order/orderList'
				},{
					name:'待成团页111',
					url:'/package1/order/pendGroup'
				},{
					name:'新增商品111',
					url:'/package1/myCenter/addGoods'
				},{
					name:'代买饭111',
					url:'/package1/buyFood/buyFood'
				},{
					name:'配送员列表111',
					url:'/package1/index/deliveryPersonList'
				},{
					name:'拼团商家详情111',
					url:'/package1/group/groupBuyDetail'
				},{
					name:'拼团单一商家111',
					url:'/package1/group/groupBuySingle'
				},{
					name:'拼团页111',
					url:'/package1/group/groupBuyList'
				},{
					name:'商家搜索页111',
					url:'/package1/group/searchGroup'
				},{
					name:'商家评价111',
					url:'/package1/group/shopEvaluate'
				},{
					name:'商品详情页111',
					url:'/package1/goods/goodsDetail'
				},{
					name:'订单详情111',
					url:'/package1/order/orderDetail'
				},{
					name:'订单支付页111',
					url:'/package1/order/orderConfirm'
				},{
					name:'商家注册111',
					url:'/package1/myCenter/myMerchant'
				},{
					name:'代取快递/跑腿111',
					url:'/package1/runErrand/runErrand'
				},{
					name:'兼职注册111',
					url:'/package1/myCenter/partTimeJobRegister'
				},{
					name:'支付页',
					url:'/package1/payment/payment'
				},{
					name:'帖子详情页',
					url:'/package1/post/postDetail'
				},{
					name:'地址列表',
					url:'/package1/myCenter/addressList'
				},{
					name:'我的钱包',
					url:'/package1/myCenter/wallet'
				},{
					name:'兼职主页',
					url:'/package1/myCenter/partTimeJob'
				},{
					name:'我的发布',
					url:'/package1/myCenter/myPost'
				},{
					name:'我的朋友',
					url:'/package1/myCenter/myFriend'
				},{
					name:'我的收藏',
					url:'/package1/myCenter/myCollect'
				},{
					name:'个人中心',
					url:'/package1/myCenter/myCenter'
				},{
					name:'商家注册',
					url:'/package1/myCenter/merchantRegister'
				},{
					name:'发布',
					url:'/package1/tabbar/release'
				},{
					name:'农场',
					url:'/package1/farm/farm'
				}],
				areaName:'',
				indicatorDots: false,
				autoplay: true,
				deliveryItem:[],
				interval: 4000,
				duration: 1000,
				latitude: 39.909, // 默认纬度，可以设为用户当前位置或配送员位置
				longitude: 116.39742, // 默认经度
				markers: [], // 标记点，可以包括配送员位置和用户位置
				polyline: [], // 路线，如果需要显示配送员路线
				currentIndex: 0,
				width: 0,
				dataTabList: [{
					name: '猜你喜欢',
					isCheck: true
				}, {
					name: '代买饭',
					isCheck: false
				}, {
					name: '代取快递/跑腿',
					isCheck: false
				}],
				dataList: [],
				areaList:[],
				waimaiCount:0,
				kuaidiCount:0,
				paotuiCount:0,
				zhipaiCount:0,
				searchForm:{
					hallOnly: true,
					status: 0,
					pageNum:1,
					getAreaId:'',
					putAreaId:'',
					order:'',
					regionId:'',
					deliveryType: 1,
					waimaiData: [],
					workerId: uni.getStorageSync('worker') ? uni.getStorageSync('worker').workerId : '',
					kuaidiData: []
				},
				checked:'waimai',
				navBarHeight: 0,
				menuListOffsetTop: 0,
				lastScrollTop: 0,
				worker:null,
				isSwitching: true,
				getAreaData:{},
				putAreaData:{},
				yongjin:false,
				isgetArea: false,
				isputArea:false,
				checkYongjin:false,
				getshopArea: [],
				putshopArea: []
			}
		},
		components: {
			tabBar,
			deLivery,
			postList,
			myCenter
		},
		filters: {
		  formatHourMinute(value) {
		    if (!value) return '';
		    // 使用原生 Date 处理
		    return new Date(value).toLocaleTimeString('zh-CN', { 
		      hour: '2-digit', 
		      minute: '2-digit',
		      hour12: false 
		    });
		  }
		},
		onPageScroll(e) {
			const scrollTop = e.scrollTop;
			const isScrollingUp = scrollTop < this.lastScrollTop;
			// 向上滑到靠近页面顶部时（背景头图区域），切换到上一个分类
			// 门槛用 80px：用户需要明确地滑回头部较大区域，避免误触发
			if (isScrollingUp && scrollTop < 80 && !this.isSwitching) {
				const currIdx = this.menuList.findIndex(m => m.checked);
				if (currIdx > 0) {
					this._switchCategory(currIdx - 1);
				}
			}
			this.lastScrollTop = scrollTop;
		},
		onReachBottom() {
			if (this.searchForm.pageNum < this.total) {
				this.searchForm.pageNum++;
				this.getProduct(this.searchForm.categoryId);
				return;
			}
		},
		onLoad() {
			
		},
		onShow() {
			let that = this
			uni.getSystemInfo({
				success: function(info) {
					that.width = info.screenWidth * 2;
				}
			});
			let worker = uni.getStorageSync('worker')
			if(worker != '' && worker != undefined && worker != null){
				this.worker = worker
			}
			// 获取用户当前位置
			this.getUserLocation();
			// 建立WebSocket连接或定时请求获取配送员位置
			this.getDeliveryLocation();
			if(!uni.getStorageSync('area')){
				this.checkArea()
			}else{
				if(uni.getStorageSync('area')){
					this.searchForm.regionId = JSON.parse(uni.getStorageSync('area')).id;
				}
				let area = JSON.parse(uni.getStorageSync('area'))
				this.areaName = area.title
				if(uni.getStorageSync('waimaiData')){
					let waimailist = uni.getStorageSync('waimaiData')
					if(waimailist.length > 0){
						for(let a = 0;a<waimailist.length;a++){
							let waimai = {
								getAreaId:waimailist[a].getAreaId,
								putAreaId:waimailist[a].putAreaId
							}
							this.searchForm.waimaiData.push(waimai)
						}
					}
				}
				if(uni.getStorageSync('kuaidiData')){
					let waimailist = uni.getStorageSync('kuaidiData')
					if(waimailist.length > 0){
						for(let a = 0;a<waimailist.length;a++){
							let waimai = {
								getAreaId:waimailist[a].getAreaId,
								putAreaId:waimailist[a].putAreaId
							}
							this.searchForm.kuaidiData.push(waimai)
						}
					}
				}
				this.getDelivery();
				this.getShopArea();
			}
			// 计算导航栏高度用于sticky offset：statusBarHeight + 40px内容区
			const info = uni.getSystemInfoSync();
			this.navBarHeight = info.statusBarHeight;
		},
		onReady() {
			// 记录分类栏相对页面的偏移量，用于上滑检测
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('#menuList').boundingClientRect(rect => {
					if (rect) this.menuListOffsetTop = rect.top + this.lastScrollTop;
				}).exec();
			}, 500);
		},
		methods: {
			// 内部切换方法：带isSwitching保护，防止程序化滚动期间闪回
			_switchCategory(index) {
				if (this.isSwitching) return;
				this.isSwitching = true;
				this.checkTab(index);
				// 400ms后解除锁（动画200ms，预留200ms缓冲）
				setTimeout(() => { this.isSwitching = false; }, 400);
			},
			getOrder(item,index){
				let data = {
					groupId:item.groupId ? item.groupId : '',
					deliveryId:item.id,
					workerId:uni.getStorageSync('worker') ? uni.getStorageSync('worker').workerId : '',
					regionId:JSON.parse(uni.getStorageSync('area')).id
				}
				let that = this
				this.tui.request("/mall/delivery/accept", "POST",data, false, true).then((res) => {
					that.loadStatus = 'nomore';
					if (res.code == 200) {
						that.deliveryItem.splice(index,1)
						that.tui.toast(res.message);
						if(item.deliveryType == 1){
							that.waimaiCount -= 1
						}else if(item.deliveryType == 2){
							that.kuaidiCount -= 1
						}else if(item.deliveryType == 3){
							that.paotuiCount -= 1
						}
						if(item.workerId != null && item.workerId != undefined && item.workerId != ''){
							that.zhipaiCount -= 1
						}
						that.$forceUpdate();
					} else {
						that.tui.toast(res.message);
						return;
					}
					uni.hideLoading();
				}).catch((res) => {});
			},
			getDelivery(){
				let that = this
				this.tui.request("/mall/delivery/page", "POST", this.searchForm, false, false).then((res) => {
					that.loadStatus = 'nomore';
					if (res.code == 200) {
						that.deliveryItem = res.result.records;
						if(res.result.orderCount != null){
							for(let i =0;i<res.result.orderCount.length;i++){
								console.log(res.result.orderCount[i])
								if(res.result.orderCount[i].deliveryType == 1){
									that.waimaiCount = res.result.orderCount[i].orderCount
								}else if(res.result.orderCount[i].deliveryType == 2){
									that.kuaidiCount = res.result.orderCount[i].orderCount
								}else if(res.result.orderCount[i].deliveryType == 3){
									that.paotuiCount = res.result.orderCount[i].orderCount
								}
								if(res.result.zhipaiCount != undefined && res.result.zhipaiCount != null){
									that.zhipaiCount = res.result.zhipaiCount
								}
							}
						}
						that.$forceUpdate();
					} else {
						that.tui.toast(res.message);
						return;
					}
					uni.hideLoading();
				}).catch((res) => {});
			},
			checkTab(index) {
				for (let i = 0; i < this.menuList.length; i++) {
					this.menuList[i].checked = (i === index);
				}
				// 重置分页
				this.searchForm.pageNum = 1;
				this.pageNum = 1;
				this.total = 1;
				this.productItem = [];
				// this.getProduct(this.menuList[index].id);
				// 滚动到正确位置：分类栏刚好吸顶在nav-bar下方
				// menuListOffsetTop - navBarHeight 使分类栏正好在sticky位置，首条商品可见
				const target = this.menuListOffsetTop - this.navBarHeight;
				uni.pageScrollTo({ scrollTop: target > 0 ? target : 0, duration: 200 });
			},
			//本方法展示所有已经完成页面，方便查找
			aaaaaaa(item){
				uni.navigateTo({
					url: item.url
				})
			},
			goDetail(type){
				let url = ''
				switch (type) {
					case '1':
						url = '/package1/runErrand/runErrand'
						break;
					case '2':
						url = '/package1/group/groupBuyList'
						break;
					case '3':
						url = '/package1/order/orderList'
						break;
					case '4':	
						url = '/package1/order/orderDetail'
						break;
				}
				uni.navigateTo({
					url: url
				})
			},
			onClickArea(item){
				uni.setStorageSync('area',JSON.stringify(item))
				this.searchForm.regionId = item.id
				this.getDelivery();
				this.getShopArea();
				let that = this
				that.tui.request("/worker/admin/add", "POST", {userId:uni.getStorageSync('id'),isChangeArea:0,region:item.id}, false, true).then((res) => {
					if (res.code == 200) {
						if(res.result != null){
							uni.setStorageSync('worker',res.result)
						}
					} else {
						that.tui.toast(res.message)
						return
					}
					uni.hideLoading()
				}).catch((res) => {})
				this.$refs.areaPopup.close()
			},
			checkArea(){
				this.tui.request("/app/shopArea/getByParentId/0", "get", {}, false, false).then((res) => {
					if (res.code == 200) {
						this.areaList = res.result
						this.$refs.areaPopup.open()
					} else {
						this.tui.toast(res.message)
					}
				})
			},
			getShopArea(){
				let that = this
				console.log(that.searchForm.regionId)
				that.tui.request("/app/shopArea/getByParentId/"+ that.searchForm.regionId, "GET", {}, false, true).then((res) => {
					if (res.code == 200) {
						if(res.result != null){
							that.getshopArea = res.result
							that.putshopArea = res.result
						}
					} else {
						that.tui.toast(res.message)
						return
					}
				}).catch((res) => {})
			},
			searchOrder(type, value) {
				if (type == 'getarea') {
					if(this.searchForm.getAreaId == value.id){
						this.searchForm.getAreaId = ''
						this.getAreaData = {}
					}else{
						this.searchForm.getAreaId = value.id
						this.getAreaData = value
					}
					this.isgetArea = !this.isgetArea
					// this.searchForm.shopArea = value
				} else if (type == 'putarea') {
					if(this.searchForm.putAreaId == value.id){
						this.searchForm.putAreaId = ''
						this.putAreaData = {}
					}else{
						this.searchForm.putAreaId = value.id
						this.putAreaData = value
					}
					this.isputArea = !this.isputArea
				}else if (type == 'yongjin') {
					this.checkYongjin = !this.checkYongjin
					if(this.checkYongjin){
						this.searchForm.order = 'deliveryFee'
					}else{
						this.searchForm.order = ''
					}
				}else if(type == 'delgetarea'){
					this.getAreaData = {}
				}else if(type == 'delputarea'){
					this.putAreaData = {}
				}
				this.getDelivery();
			},
			// 获取用户位置
			getUserLocation() {
				uni.getLocation({
					type: 'gcj02', // 返回国测局坐标，用于微信小程序地图组件
					success: (res) => {
						console.log('位置', res)
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						// 将用户位置添加到标记点
						this.markers.push({
							id: 0,
							latitude: res.latitude,
							longitude: res.longitude,
							title: '我的位置',
							iconPath: '/static/images/tabbar/fabu1.png', // 用户位置图标
							width: 30,
							height: 30
						});
					},
					fail: (err) => {
						console.log('获取位置失败', err);
					}
				});
			},
			checkTab1(type){
				this.checked = type
				if(type == 'waimai'){
					this.searchForm.deliveryType = 1
				}else if(type == 'kuaidi'){
					this.searchForm.deliveryType = 2
				}else if(type == 'paotui'){
					this.searchForm.deliveryType = 3
				}else if(type == 'zhipai'){
					this.searchForm.deliveryType = 4
				}
				this.getDelivery()
				this.$forceUpdate()
			},
			makeCall(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			// 获取配送员位置，这里假设使用WebSocket
			getDeliveryLocation() {
				// WebSocket连接，需要时放开
				// uni.connectSocket({
				//   url: "wss://www.example.com/socket",
				//   header: {
				//     "content-type": "application/json",
				//   },
				//   protocols: ["protocol1"],
				//   method: "GET",
				// });



				// 假设我们有一个WebSocket连接，这里用setInterval模拟定时获取
				// this.deliveryTimer = setInterval(() => {
				// 实际开发中，这里应该是从WebSocket推送或后端API获取
				// 模拟数据
				const deliveryLat = this.latitude;
				const deliveryLng = this.longitude;
				// 更新配送员位置标记
				// 先清除之前的配送员标记，假设配送员标记id为1
				this.markers = this.markers.filter(marker => marker.id !== 1);
				// 添加新的配送员标记
				this.markers.push({
					id: 1,
					latitude: deliveryLat,
					longitude: deliveryLng,
					title: '张三',
					iconPath: '/static/images/tabbar/fabu1.png', // 配送员图标
					width: 30,
					height: 30
				});
				// 将地图中心移动到配送员位置
				this.latitude = deliveryLat;
				this.longitude = deliveryLng;
				// }, 5000);
			},
			// 页面卸载时清除定时器
			onUnload() {
				if (this.deliveryTimer) {
					clearInterval(this.deliveryTimer);
				}
			},
			//微信支付测试
			wxPayment() {
				let that = this;
				this.tui.request("/api/wechat/pay/unified-order", "POST", {
					openid: uni.getStorageSync('miniProgramOpenid'),
					amount: 1, // 支付金额（分）
					description: '拼团订单',
					outTradeNo: 'ORDER_' + Date.now()
				}, false, false).then((res) => {
					if (res.code == 200) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.timeStamp,
							nonceStr: res.nonceStr,
							package: res.package,
							signType: res.signType,
							paySign: res.paySign,
							success: function(res2) {
								console.log('success:' + JSON.stringify(res2));
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					} else {
						this.tui.toast(res.message)
					}
				})
			},
			checkAdd() {
				this.isgetArea = !this.isgetArea
			},
			checkAdd1() {
				this.isputArea = !this.isputArea
			},
			//底部tab切换组件状态改变
			changeIndex(index) {
				let that = this;
				this.lastIndex = this.currentIndex
				this.currentIndex = index
				switch (index) {
					case 1:
						let worker = uni.getStorageSync('worker')
						if(worker == '' || worker == undefined || worker == null){
							this.tui.toast('您还没有注册兼职')
						}else{
							that.$refs.deLiveryPage.init()
						}
						break;
					case 2:
						uni.navigateTo({
							url: '/package1/tabbar/release'
						})
						break;
					case 3:
						that.$refs.postListPage.init()
						break;
					case 4:
						that.$refs.myCenterPage.init()
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		font-size: 28rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 28rpx;
	}

	.swiper-container {

		width: 100%;
		height: 100%;
	}

	.swiper-page {
		width: 100%;
		height: 100%;
	}

	.swiper {
		width: 100%;
		height: 500rpx;
		z-index: 99 !important;
	}

	.swiper img {
		width: 100%;
		height: 100%;
		z-index: 99 !important;
	}

	.order-msg-box {
		width: 95%;
		height: 146rpx;
		border-radius: 40rpx;
		border: 4rpx solid #A6FFEA;
		background: #fff;
		z-index: 99;
		position: absolute;
		left: 2.5%;
		bottom: 0;
		display: flex;
	}

	.order-msg-left {
		width: 20%;
		height: 100%;
	}

	.order-msg-left img {
		width: 75%;
		height: 65%;
		margin: 17% 0 0 15%;
	}

	.order-msg-center {
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: column;
		padding-left: 5%;
	}

	.order-msg-right {
		width: 30%;
		height: 100%;
	}

	.order-msg-right img {
		width: 80%;
		height: 56%;
		margin: 15% 0 0 10%;
	}

	.tabbar {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #eee;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 100;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		flex: 1;
		position: relative;
	}

	.tab-text {
		font-size: 28rpx;
		color: #666;
		transition: color 0.3s;
	}

	.tab-item.active .tab-text {
		color: #007aff;
		font-weight: bold;
	}

	.tab-indicator {
		position: absolute;
		bottom: 10rpx;
		width: 40rpx;
		height: 4rpx;
		background-color: #007aff;
		border-radius: 2rpx;
		animation: indicatorScale 0.3s ease;
	}

	@keyframes indicatorScale {
		0% {
			transform: scaleX(0.5);
			opacity: 0;
		}

		100% {
			transform: scaleX(1);
			opacity: 1;
		}
	}

	/* 滑动动画效果增强 */
	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 如果需要自定义滑动动画，可以添加以下样式 */
	.swiper-container .uni-swiper-wrapper {
		transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.menu-box {
		width: 100%;
		height: 160rpx;
		display: flex;
		margin-top: 80rpx;
	}

	.menu-list {
		flex: 1;
	}

	.menu-list img {
		width: 70%;
		height: 70%;
		display: block;
		margin: 0 auto;
	}

	.menu-name {
		text-align: center;
		font-size: 24rpx;
		font-weight: 700;
		margin-top: 15rpx;
	}

	.like-box,
	.daimai-box {
		width: 95%;
		margin: 20rpx auto;
	}

	.daimai-tab {
		display: flex;
		height: 60rpx;
		line-height: 60rpx;
		position: sticky;
		top:0;
		z-index:90;
	}
	
	.like-title {
		width: 218rpx;
		height: 64rpx;
	}

	.like-title img {
		width: 100%;
		height: 100%;
		background-size: 100%;
	}

	.like-content-box {
		height: 400rpx;
		background: url("https://jewel-shop.oss-cn-beijing.aliyuncs.com/6d65d349d68f40e7886c978190b6ea33.png") no-repeat;
		background-size: 100%;
		margin-top: 20rpx;
		display: flex;
	}

	.like-left {
		width: 45%;
		background: #fff;
		border-radius: 20rpx;
		height: 340rpx;
		margin: 50rpx 0 0 3.3%;
	}

	.like-content-title {
		width: 100%;
		height: 70rpx;
		position: relative;
		line-height: 70rpx;
		padding: 0 10rpx;
	}

	.like-content {
		display: flex;
		flex-direction: column;
	}

	.content-list {
		display: flex;
		margin-bottom: 10rpx;
	}

	.list-img {
		width: 37%;
		height: 120rpx;
		padding: 10rpx;
		position: relative;
	}

	.list-img img {
		width: 100%;
		height: 100%;
	}

	.list-product {
		width: 60%;
		padding-top: 4rpx;
	}

	.list-name {
		height: 60rpx;
		line-height: 28rpx;
	}

	.list-type {
		display: inline;
		font-size: 18rpx;
		padding: 4rpx 6rpx;
		background: #A6FFEA;
		border-radius: 5rpx;
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		font-weight: 700;
	}

	.list-text {
		display: inline;
		font-size: 22rpx;
		font-weight: 700;
	}

	.list-price {
		color: #777;
		font-size: 20rpx;
		text-decoration: line-through;
	}

	.list-total {
		font-size: 20rpx;
	}

	.list-1 {
		width: 98%;
		max-height: 640rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 20rpx auto 0;
		overflow: hidden;
	}

	.daoda-time {
		width: 200rpx;
		height: 48rpx;
		font-size: 24rpx;
		padding-left: 10rpx;
		font-weight: 700;
		border-radius: 10rpx;
		line-height: 48rpx;
		text-align: left;
		background: rgba(166, 255, 234, 0.3);
		margin: 20rpx 0 20rpx 20rpx;
	}

	.shangjia {
		width: 100%;
		height: 70rpx;
		margin: 0 auto;
		line-height: 70rpx;
		padding-left: 28rpx;
		display: flex;
	}

	.maotou {
		width: 90rpx;
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/a1584a13e9db4b6fbcc66890219d0018.png') no-repeat;
		height: 90rpx;
		background-size: 100%;
		position: absolute;
		top: -60rpx;
		right: 10rpx;
		text-align: center;
		line-height: 90rpx;
		font-weight: 900;
		font-size: 24rpx;
	}

	.order-page {
		width: 95%;
		position: relative;
		height: 200rpx;
		border-radius: 40rpx;
		border: 1px solid #A6FFEA;
		margin: 0 auto;
	}

	.shangjialogo {
		width: 40rpx;
		height: 40rpx;
		margin: 8rpx 20rpx 0 28rpx;

		img {
			width: 100%;
			height: 100%;
			background-size: 100%;
		}
	}

	.shangpin {
		display: flex;
	}

	.shangpintu {
		width: 120rpx;
		height: 120rpx;
		margin-left: 20rpx;

		img {
			width: 100%;
			height: 100%;
			background-size: 100%;
		}
	}

	.shangpinxinxi {
		padding: 0 20rpx;
		flex: 1;
	}

	.pinming {
		font-size: 24rpx;
		font-weight: 700;
	}

	.guige {
		font-size: 20rpx;
		height: 56rpx;
		line-height: 56rpx;
		color: #777;
	}

	.shuliang {
		font-size: 20rpx;
		display: flex;
		height: 40rpx;
		line-height: 40rpx;
		color: #777;
	}

	.qu-song {
		width: 95%;
		margin: 0 auto;
		font-size: 24rpx;
	}

	.qu-box {
		display: flex;
	}

	.qu-tu {
		width: 50rpx;
		height: 50rpx;

		img {
			width: 100%;
			height: 100%;
			background-size: 100%;
		}
	}

	.qu-text {
		display: flex;
		flex: 1;
		height: 50rpx;
		line-height: 50rpx;
	}

	.qu-left {
		width: 80%;
		padding-left: 10rpx;
	}

	.qu-right {
		width: 20%;
		text-align: right;
		padding-right: 10rpx;
		font-weight: 700;
	}

	.yongjin {
		height: 50rpx;
		display: flex;
		font-size: 24rpx;
		line-height: 50rpx;
		width: 95%;
		margin: 20rpx auto;
	}

	.qiangdan-btn {
		width: 95%;
		height: 100rpx;
		margin: 20rpx auto;

		img {
			width: 100%;
			height: 100%;
			background-size: 100%;
		}
	}
	.paotui-title{
		display: flex;
		flex: 1;
		line-height: 88rpx;
		text-align: right;
		padding-right: 20rpx;
	}
	.paotui-text{
		font-size: 28rpx;
		color: red;
		font-weight: bold;
		flex: 1;
	}
	.paotui-num{
		font-size: 24rpx;
		padding: 0 10rpx;
	}
	.popup-area-content {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		width: 500rpx;
		height: auto;
		background-color: #fff;
	}
	
	.popup-area-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
	}
	
	.popup-area-container {
		margin-top: 20rpx;
		height: 100rpx;
		border-radius: 20rpx;
		background: #088FEB;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid #eee;
		border-top: 1px solid #eee;
		color: #fff;
	}
	.chaoda{
		height: 30rpx;
		line-height: 30rpx;
		margin: 10rpx 0 0 20rpx;
		padding: 0 10rpx;
		background: rgba(255, 117, 88, 1);
		color: #fff;
		border-radius: 10rpx;
		font-size: 20rpx;
	}
	.beizhu{
		    width: 95%;
		    margin: 0 auto;
		    background: rgba(255, 117, 88, 0.08);
		    border: 1px solid rgba(255, 117, 88, 0.12);
		    border-radius: 20rpx;
		    height: 120rpx;
		    padding: 20rpx;
		    color: rgba(255, 57, 57, 1);
	}
	.title-sort {
		height: 100rpx;
		display: flex;
		position: sticky;
		top:0;
		z-index:90;
		background: #fff;
		padding-top:20rpx;
	}
	.sort-text{
		height: 70rpx;
		display: flex;
		position: sticky;
		top:0;
		z-index:90;
		background: #fff;
	}
	.sort-member {
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background: #eee;
		width: 24%;
		margin-left: 4%;
		border-radius: 10rpx;
	}
	
	.sort-value {
		width: 160rpx;
		height: auto;
		max-height: 300rpx;
		overflow: scroll;
		background: rgba(0, 0, 0, 0.7);
		position: absolute;
		top: 80rpx;
		right: 0;
		border-radius: 20rpx;
		color: #fff;
		font-size: 22rpx;
	}
	
	.sort-value1 {
		border-bottom: 1rpx solid #eee;
	}
	
	.guize1-qusong {
		display: flex;
		margin-left: 40rpx;
	}
	
	.qusong1 {
		width: 40rpx;
		height: 40rpx;
		background: rgba(0, 35, 28, 1);
		color: #fff;
		border-radius: 40rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 20rpx;
		z-index: 80;
	}
	
	.qusong2 {
		height: 40rpx;
		font-size: 24rpx;
		line-height: 38rpx;
		text-align: center;
		background: rgba(166, 255, 234, 0.5);
		padding: 0 20rpx;
		margin-left: -10rpx;
		font-weight: 700;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
	}
</style>