<template>
	<view class="home-page" :style="{'--bgCloor':bgColor}">
		<view class="positon positonFixed" :style="{ backgroundImage: `url(${topBgImage})` }">
			<view class="location-cont" @click.stop="goMap">
				<image src="/static/images/home/loc_icon.png" mode="aspectFit" class="position-icon"></image>
				<text class="location-text">{{ address }}</text>
				<image class="more_address" src="/static/images/home/right.png" />
			</view>

			<!-- 顶部搜索栏和定位 -->
			<view class="header" @click="goToSearch">
				<view class="search-input">搜索你想要的内容</view>
				<view class="btn_search">搜索</view>
			</view>
		</view>
		<view class="bgImage" :style="{ backgroundImage: `url(${topBgImage})` }">
			<view class="positon" style="visibility: hidden">
				<view class="location-cont" @click.stop="goMap">
					<image
						src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ef03746a-95da-48e2-81a2-8c1a25a9579d"
						mode="aspectFit" class="position-icon"></image>
					<text class="location-text">{{ address }}</text>
				</view>

				<!-- 顶部搜索栏和定位 -->
				<view class="header" @click="goToSearch">
					<view class="search-input">搜索你想要的内容</view>
					<image src="/static/images/search.png" mode="aspectFit" class="search-icon"></image>
				</view>
			</view>

			<image class="bgText" mode="aspectFit" src="/static/images/home/bgtext.png" />
			<!-- 服务图标区 -->
			<view class="classList" :style="{background:classBg?`transparent`:`#fff`}">
				<view class="service-icons" v-if="classModel==1" :style="{ backgroundImage: `url(${classBg})` }">
					<view class="icon-item" v-for="(item, i) in serviceIconList" :key="item.id"
						@click="goToClass(item.id, item.title)">
						<image :class="{ icon: true, bigIcon: i < 5 }" :src="i < 5 ? item.big_photo : item.head_photo">
						</image>
						<text class="icon-text">{{ item.title }}</text>
					</view>

					<view class="icon-item" @click="goRecruit" v-if="recruitObj.state == 1">
						<image :class="{ icon: true, bigIcon: serviceIconList.length + 1 < 5 }" :src="
                serviceIconList.length + 1 < 5
                  ? recruitObj.big_photo
                  : recruitObj.photo
              "></image>
						<text class="icon-text">招募</text>
					</view>
				</view>

				<view class="service-icons" v-else-if="classModel==2" :style="{ backgroundImage: `url(${classBg})` }">
					<view class="icon-item" v-for="(item, i) in serviceIconList" :key="item.id"
						@click="goToClass(item.id, item.title)">
						<image class="icon2" :src="item.big_photo">
						</image>
						<text class="icon-text">{{ item.title }}</text>
					</view>

					<view class="icon-item" @click="goRecruit" v-if="recruitObj.state == 1">
						<image class="icon2" :src="recruitObj.big_photo"></image>
						<text class="icon-text">招募</text>
					</view>
				</view>

			</view>

			<!-- <view class="qiehuan" v-if="cardNum > 2">
      <view
        class="qiehuan-item"
        v-for="(cardItem, CardI) in cardNum"
        :class="CardI == nowCardI ? 'qiehuanA' : ''"
        :key="CardI"
      >
      </view> -->
		</view>

		<!-- 预约方式按钮 -->
		<view class="reserve-card flex-row-center" v-if="SelfState==1">
			<image class="reserve-card-img1" :src="reserves[8]" @click="goToself">
			</image>
			<view class="reserve-card-right">
				<image class="reserve-card-img2" :src="reserves[9]" @click="goToAppointment"></image>
				<image class="reserve-card-img3" :src="reserves[10]" @click="goToStoreList"></image>
			</view>
		</view>
		<view class="reserve-card flex-row-center-between" v-if="SelfState==2">
			<image class="reserve-card-img2" style="margin-bottom: 0;" :src="reserves[9]" @click="goToAppointment">
			</image>
			<image class="reserve-card-img3" style="margin-bottom: 0;" :src="reserves[10]" @click="goToStoreList">
			</image>
		</view>
		<!-- <view class="appointment-buttons" v-if="SelfState==2">
			<view class="button-item" @click="goToAppointment()">
				<image class="button-icon" src="/static/images/home/left_icon.png">
				</image>
				<view class="button-right">
					<text class="button-text">预约到家</text>
					<text class="button-desc">快速预约</text>
				</view>
				<image class="more_icon" src="/static/images/home/right_gary.png" />
			</view>
			<view class="button-item">
				<image class="button-icon" src="/static/images/home/right_icon.png">
				</image>
				<view class="button-right">
					<text class="button-text" @click="goToStoreList()">到店服务</text>
					<text class="button-desc">上千家店</text>
				</view>
				<image class="more_icon" src="/static/images/home/right_gary.png" />
			</view>
		</view> -->

		<!-- <view @click="goLottery">抽奖测试</view> -->
		<image v-if="activity" :src="activity.enter_img" class="home-Lottery" @click="goLottery" mode="widthFix  ">
		</image>

		<!-- 拼团 -->
		<hotCard v-if="teamBuyList.length" :info="teamBuyList" @toMore="goGroupBuy" @goDetail="goGroupDetail"
			:bg="reserves[14]" :titleImg="reserves[12]" :lsBg="reserves[13]"></hotCard>

		<!-- 热门区 -->
		<view class="nav-list" :style="{'--checkCloor':check_cloor,'--noCheckCloor':no_check_cloor}">
			<view class="nav-item" @click="changeNavActive(0)">
				<text class="nav-tit nav_split" :class="{ 'nav-color': navActive == 0 }">精选服务</text>
				<view class="nav-active" v-if="navActive == 0"></view>
			</view>
			<view class="nav-item" @click="changeNavActive(1)">
				<text class="nav-tit" :class="{ 'nav-color': navActive == 1 }">严选门店</text>
				<view class="nav-active" v-if="navActive == 1"></view>
			</view>
			<view class="nav-item" @click="changeNavActive(2)">
				<text class="nav-tit" :class="{ 'nav-color': navActive == 2 }">臻选手艺人</text>
				<view class="nav-active" v-if="navActive == 2"></view>
			</view>
		</view>

		<view v-if="navActive == 2">
			<syrCard :syrList="syrList" @syr-click="goToSyr" />
		</view>
		<!-- 产品列表区 -->
		<view class="pro-list" v-if="navActive == 0">
			<serviceCard :services="syrserverlist" @service-click="goToDetail" />
		</view>
		<!-- 周边服务列表 -->
		<view v-if="navActive == 1">
			<sjCard :shop-list="shopList" @service-click="goToDetail" @go-artisan="goToShop" />
		</view>
		<!-- 周边服务列表 -->

		<view v-if="isLoading" class="loading">加载中...</view>
		<view v-else class="loading">～暂时只有这些了～</view>

		<!-- 获取权限提示匡内容 -->
		<view class="permission" :class="{ transform: isShowPer }">
			<view class="per-tit">美融融plus 对精确定位权限申请说明</view>
			<view class="per-cont">便于您使用该功能获取您附近的手艺人以及店铺下的服务内容。</view>
		</view>
		<upload-app-vue></upload-app-vue>

		<!-- 自定义TabBar -->
		<TabBar :selected="0"></TabBar>
	</view>
</template>

<script>
	import TabBar from "@/components/tabbar/tabbar.vue"
	import hotCard from "@/components/hot-card/hot-card.vue";
	import request from "../../utils/request";
	import serviceCard from "./components/serviceCard.vue";
	import syrCard from "./components/syrCard.vue";
	import sjCard from "./components/sjCard.vue";
	export default {
		components: {
			serviceCard,
			hotCard,
			syrCard,
			sjCard,
			TabBar,
		},
		data() {
			return {
				activity: null, //转盘活动数组
				reserves: {
					8: "",
					9: "",
					10: "",
					12: "",
					13: "",
					14: "",
				},
				classBg: "",
				classModel: "1", //分类样式1 大小图模式   2相同图模式
				bgColor: "",
				check_cloor: "#e8101e",
				no_check_cloor: "#333333",
				abilityImg: [],
				topBgImage: "/static/images/home/topbgimage.png",
				// address: '请开启位置权限',
				address: "黄骅市人民政府",
				granted: false,
				isEnabled: "",
				serviceIconAll: [],
				serviceIconList: [],
				recruitObj: [], //招聘信息
				SelfState: 2, //自营专区开关状态1开方 2不开放
				cardNum: 0,
				nowCardI: 0,
				bannerList: [],
				syrserverlist: [],
				isLoading: true,
				hotList: [],
				isRefreshing: false,
				navActive: 0, // 默认精选服务
				latitude: "38.366667",
				longitude: "117.333333",
				shopList: [],
				syrList: [],
				servers_region: "河北省-沧州市-黄骅市",
				tips: "加载中",
				isNeedLocation: true, // 是否需要检查定位
				isCheckingLocation: false, // 是否开始检查定位
				hasCheckedLocation: false, // 是否已经检查过定位
				queryData: {
					page: 1,
					limit: 4,
				},
				isShowPer: false, // 是否显示权限说明
				teamBuyList: [], // 拼团列表
			};
		},
		onLoad() {

			uni.hideTabBar();
			let that = this;
			//获取网络状态,存储是否开启网络
			let isnNetwork;
			// #ifndef MP-WEIXIN
			isnNetwork = uni.getStorageSync("isnNetwork");
			// #endif
			// #ifdef MP-WEIXIN
			isnNetwork = wx.getStorageSync("isnNetwork");
			// #endif
			if (isnNetwork) {
				that.getActivity()
				that.getLocationCont();
				that.getTopBgImage();
				that.getHeadImgBatch()
			} else {
				uni.getNetworkType({
					success: function(res) {
						console.log(res.networkType);
						if (res.networkType == "none") {
							//监听网络变化
							uni.onNetworkStatusChange(function(res) {
								console.log(res.isConnected);
								console.log(res.networkType);
								if (res.isConnected) {
									// 页面加载逻辑
									that.getActivity()
									that.getLocationCont();
									that.getTopBgImage();
									that.getHeadImgBatch()
									uni.offNetworkStatusChange(() => {});
									uni.setStorageSync("isnNetwork", 1);
								}
							});
						} else {
							// 页面加载逻辑
							that.getActivity()
							that.getLocationCont();
							that.getTopBgImage();
							that.getHeadImgBatch()
							uni.setStorageSync("isnNetwork", 1);
						}
					},
				});
			}
		},
		onPullDownRefresh() {
			this.queryData.page = 1;
			this.getCont();
			if (this.longitude != "" && this.latitude != "") {
				this.getTeamBuy();
			}
			//刷新自营
			let addressRes = uni.getStorageSync("userAdrees") || getApp().globalData.addressRes;
			this.getSelfState(addressRes)
			this.getActivity()
		},
		onReachBottom() {
			if (!this.isLoading) return;
			this.queryData.page = this.queryData.page + 1;
			this.getBottomList();
		},
		onShow() {
			//如果有经纬度刷新拼团列表
			if (this.longitude != "" && this.latitude != "") {
				this.getTeamBuy();
			}
			//刷新自营
			// let addressRes = uni.getStorageSync("userAdrees") || getApp().globalData.addressRes;
			// this.getSelfState(addressRes)
		},
		watch: {
			address(newVal, oldVal) {
				if (newVal !== oldVal) {
					//刷新自营
					let addressRes = uni.getStorageSync("userAdrees") || getApp().globalData.addressRes;
					this.getSelfState(addressRes)
				}
			},
		},
		methods: {
			// async getActivityDetails(id) {
			// 	await request.post("/user/lottery/getActivityDetails", {
			// 		id: id
			// 	}).then(async (res) => {
			// 		if (res.code == 200) {
			// 			let url = await  this.getImagePath(res.data.back_img)
			// 			console.log(111111,url)
			// 		}
			// 	});
			// },
			getActivity() {
				request.post("/user/lottery/getActivity").then((res) => {
					if (res.code == 200) {
						this.activity = res.data
						this.getImagePath([res.data.back_img, res.data.lottery_img])
					}
				});
			},
			goLottery() {
				let isLogin = uni.getStorageSync('accessToken') ? true : false;
				if (!isLogin) {
					uni.showModal({
						title: '登录提醒',
						content: '您暂未登录，无法使用抽奖功能，是否前去登录？',
						confirmColor: '#F1AC66',
						success(e) {
							if (e.confirm) {
								uni.navigateTo({
									url: '/pages/blogPopup/blogPopup'
								});
							}
						}
					})
					return;
				};
				uni.navigateTo({
					url: `/pages/lottery/index?activity_id=${this.activity.id}`
				})
			},
			//批量获取图片
			async getHeadImgBatch() {
				let defalut = {
					8: "/static/images/tab/reserve1.png",
					9: "/static/images/tab/reserve2.png",
					10: "/static/images/tab/reserve3.png",
					12: "/static/images/shop/pintuan/tjt.png",
					13: "/static/images/shop/pintuan/bottomBj.png",
					14: "/static/images/shop/pintuan/bj3.png",
				}
				let ids = "8,9,10,12,13,14"
				try {
					let res = await request.post("/user/poster/getHeadImgBatch", {
						ids
					});
					if (res.code == 200) {
						this.reserves[8] = res.data?.list[8] || defalut[8]
						this.reserves[9] = res.data?.list[9] || defalut[9]
						this.reserves[10] = res.data?.list[10] || defalut[10]
						this.reserves[12] = res.data?.list[12] || defalut[12]
						this.reserves[13] = res.data?.list[13] || defalut[13]
						this.reserves[14] = res.data?.list[14] || defalut[14]
					} else {
						this.reserves = defalut
					}
				} catch (exceptionVar) {
					this.reserves = defalut
				}

			},
			goRecruit() {
				uni.navigateTo({
					url: `/pages/recruit/recruit`,
				});
			},
			//获取头部背景图片
			async getTopBgImage() {
				let res = await request.post("/user/getHeadImg", {});
				if (res.code == 200) {
					if (res.data?.photo) {
						this.topBgImage = res.data?.photo + '?time=666'
					}
					if (res.data?.back_cloor) {
						this.bgColor = res.data?.back_cloor
					}
					if (res.data?.check_cloor) {
						this.check_cloor = res.data?.check_cloor
					}
					if (res.data?.no_check_cloor) {
						this.no_check_cloor = res.data?.no_check_cloor
					}
				}
			},

			//跳转到拼团详情页面
			goGroupDetail(id) {
				uni.navigateTo({
					url: `/pages/groupBuy/detail?id=${id}`,
				});
			},
			//跳转到拼团列表页面
			goGroupBuy() {
				uni.navigateTo({
					url: "/pages/groupBuy/list",
				});
			},
			//获取拼团列表
			async getTeamBuy() {
				let queryData = {
					userLngz: this.longitude,
					userLat: this.latitude,
					page: 1,
					limit: 3,
				};
				await request.post("/user/teamBuy/list", queryData).then((res) => {
					this.teamBuyList = res.data;
				});
			},
			// 将角度转换为弧度
			rad(d) {
				return (d * Math.PI) / 180;
			},
			//计算两点间距离
			getDistance(lat1, lng1, lat2, lng2, kilometreFlag = false) {
				// 将经纬度从角度转换为弧度
				const radLat1 = this.rad(lat1);
				const radLat2 = this.rad(lat2);

				// 计算纬度和经度的差值（弧度）
				const a = radLat1 - radLat2;
				const b = this.rad(lng1) - this.rad(lng2);

				// 使用哈弗辛公式计算两点间的球面距离
				let s =
					2 *
					Math.asin(
						Math.sqrt(
							Math.pow(Math.sin(a / 2), 2) +
							Math.cos(radLat1) *
							Math.cos(radLat2) *
							Math.pow(Math.sin(b / 2), 2)
						)
					);

				// 乘以地球半径（6378.137公里）得到距离（公里）
				s = s * 6378.137;

				// 根据单位标识返回不同单位和精度的结果
				if (kilometreFlag) {
					// 返回公里单位，保留1位小数
					s = s.toFixed(1) + "km";
				} else {
					// 返回米单位，四舍五入取整
					s = Math.round(s * 1000).toFixed(0) + "m";
				}
				return s;
			},
			navigator(url) {
				uni.navigateTo({
					url: url,
				});
			},
			//坐标转换
			convert(item) {
				let data = {
					key: "30b7eb1a1b2f88edc085b9b3ee9a2188",
					locations: `${item.longitude},${item.latitude}`,
					coordsys: "gps",
				};

				return new Promise((resolve, reject) => {
					uni.request({
						url: "https://restapi.amap.com/v3/assistant/coordinate/convert",
						method: "GET",
						data: data,
						success(res) {
							resolve(res.data);
						},
					});
				});
			},
			async getLocation() {
				let that = this;
				let userAdrees = uni.getStorageSync("userAdrees");
				try {
					if (uni.getStorageSync('setVersion').DeviceBrand == 'ios') {
						uni.getLocation({
							type: 'wgs84',
							geocode: true,
							isHighAccuracy: true,
							success: async function(res) {
								let convert = await that.convert(res)
								let locations = convert.locations.split(',')
								res.longitude = locations[0]
								res.latitude = locations[1]
								await that.getAddress(res)
								uni.setStorageSync("isLocation", true)
							},
							fail(err) {
								console.log(err)
								uni.setStorageSync("isLocation", false)
							}
						})
					} else {
						uni.getLocation({
							type: 'gcj02',
							geocode: true,
							success: async function(res) {
								await that.getAddress(res)
								uni.setStorageSync("isLocation", true)
							},
							fail(err) {
								console.log(err)
								uni.setStorageSync("isLocation", false)
							}
						})
					}
				} catch (err) {
					console.log("err", err);
				} finally {

				}
			},
			//改变address的值
			async getAddress(item) {
				let that = this
				let data = {
					key: '30b7eb1a1b2f88edc085b9b3ee9a2188',
					location: `${item.longitude},${item.latitude}`,
					page: 1,
					offset: 1
				}
				await uni.request({
					url: 'https://restapi.amap.com/v5/place/around',
					method: "GET",
					data: data,
					success(res) {
						let nowCity = res.data.pois[0]
						if (nowCity) {
							let searchCity = {
								'center': nowCity.location,
								'name': nowCity.cityname,
							}
							that.city = searchCity
							uni.setStorageSync('searchCity', searchCity)
						}
						that.updateAddress(nowCity)
						getApp().updateAddress(nowCity);
					}
				})
				
			},
			updateAddress(item) {
				let location = item.location.split(",");
				this.latitude = location[1];
				this.longitude = location[0];
				this.address = item.name;
				this.servers_region = `${item.pname}-${item.cityname}-${item.adname}`;
				this.getCont();
			},
			async getLocationCont() {
				try {
					this.isLoading = true;
					// 获取banner
					const bannerRes = await request.post("/user/getbannerlist");
					this.bannerList = bannerRes.data;

					// 获取服务图标
					const serviceRes = await request.post("/user/firstclass");
					this.classModel = serviceRes.model
					this.classBg = serviceRes.back_img
					this.serviceIconAll = serviceRes.data;
					this.cardNum = Math.ceil(this.serviceIconAll.length / 10);
					this.sortPage(0);

					//获取招聘图标
					request.post("/user/getRecruitment").then((res) => {
						this.recruitObj = res.data;
					});
					if (uni.getStorageSync("isLocation")) {
						await this.getLocation();
					}
					let addressRes = {};
					let userAdrees = uni.getStorageSync("userAdrees");
					if (userAdrees) {
						addressRes = userAdrees.addressRes;
					} else {
						addressRes = getApp().globalData.addressRes;
					}
					//获取自营专区开关状态
					this.getSelfState(addressRes);

					// 获取位置信息
					this.handelLocationCont(addressRes);
				} catch (error) {
					console.error("获取数据失败:", error);
					const addressRes = getApp().globalData.addressRes;
					this.handelLocationCont(addressRes);
					// uni.showToast({
					// 	title: '获取数据失败',
					// 	icon: 'none'
					// });
				}
			},
			//获取自营专区开关状态
			async getSelfState(addressRes) {
				console.log("addressRes：", addressRes);
				await request
					.post("/user/serversSelf/getSelfState", {
						city: addressRes.cCode,
					})
					.then((res) => {
						if (res.code == 200) {
							this.$nextTick(() => {
								this.SelfState = res.data.self_state;
							})

						}
					});
			},
			//处理定位后数据并获取首页数据
			async handelLocationCont(addressRes) {
				this.latitude = addressRes.latitude;
				this.longitude = addressRes.longitude;
				this.address = addressRes.address.poiName || addressRes.address.street;
				this.servers_region =
					`${addressRes.address.province}-${addressRes.address.city}-${addressRes.address.district}`;
				getApp().globalData.latitude = addressRes.latitude;
				getApp().globalData.longitude = addressRes.longitude;
				getApp().globalData.address =
					addressRes.address.poiName || addressRes.address.street;
				getApp().globalData.servers_region =
					`${addressRes.address.province}-${addressRes.address.city}-${addressRes.address.district}`;
				// getApp().globalData.servers_region = `河北省-沧州市-黄骅市`

				// 获取热门服务  this.servers_region
				const hotRes = await request.post("/user/hotlist", {
					servers_region: this.servers_region,
				});
				this.hotList = hotRes.data;
				await this.getTeamBuy();
				await this.getCont();

				// 获取到家服务列表
				// const syrRes = await request.post("/user/syrlist", {
				// 	userLngz: this.longitude,
				// 	userLat: this.latitude,
				// 	servers_region: this.servers_region,
				// 	page: 1,
				// 	limit: 4,
				// });
				// this.syrList = syrRes.data;
				// if (syrRes.count == this.syrList.length) {
				// 	this.isLoading = false;
				// }
			},
			async getCont() {
				try {
					this.isLoading = true;
					// this.navActive = 2;
					// 获取热门服务  this.servers_region

					const hotRes = await request.post("/user/hotlist", {
						servers_region: this.servers_region,
					});
					this.hotList = hotRes.data;

					if (this.navActive == 0) {
						let queryData = {
							userLngz: this.longitude,
							userLat: this.latitude,
						};
						queryData.servers_region = this.servers_region;
						queryData.page = this.queryData.page;
						queryData.limit = this.queryData.limit;
						// 加载 到家精选
						request.post("/user/getsyrserverlist", queryData).then((res) => {
							this.syrserverlist = res.data;
							uni.stopPullDownRefresh();
							if (res.count == this.syrserverlist.length) {
								this.isLoading = false;
							}
						});
					} else if (this.navActive == 1) {
						let queryData = {};
						// 加载 周边服务
						queryData = {
							userLngz: this.longitude,
							userLat: this.latitude,
							servers_region: this.servers_region,
							page: this.queryData.page,
							limit: this.queryData.limit,
						};
						request
							.post("/user/getsjserverlist", queryData)
							.then((res) => {
								this.shopList = res.data;
								uni.stopPullDownRefresh();
								if (res.count == this.shopList.length) {
									this.isLoading = false;
								}
							})
							.catch((err) => {
								console.log(err);
							});
					} else if (this.navActive == 2) {
						let queryData = {};
						// 加载 精选手艺人
						queryData = {
							servers_region: this.servers_region,
							page: this.queryData.page,
							limit: this.queryData.limit,
							userLngz: this.longitude,
							userLat: this.latitude,
						};
						request
							.post("/user/syrlist", queryData)
							.then((res) => {
								this.syrList = res.data;
								uni.stopPullDownRefresh();
								if (res.count == this.syrList.length) {
									this.isLoading = false;
								}
							})
							.catch((err) => {
								console.log(err);
							});
					}
				} catch (error) {
					console.error("获取数据失败:", error);
					uni.showToast({
						title: "获取数据失败",
						icon: "none",
					});
				}
			},
			// 分页
			sortPage(num) {
				let that = this;
				that.serviceIconList = that.serviceIconAll.slice(
					num * 10,
					(num + 1) * 10
				);
			},
			// 修改service的card
			changeService(event) {
				if (event.detail.source == "touch") {
					this.nowCardI = event.detail.current;
					this.sortPage(this.nowCardI);
				}
			},
			// 查看详情
			goToDetail(item) {
				if (item.team_buy && Object.keys(item.team_buy).length != 0) {
					uni.navigateTo({
						url: `/pages/groupBuy/detail?id=${item.id}`,
					});
				} else {
					uni.navigateTo({
						url: `/pages/service/detail?id=${item.id}`,
						// url: `/pages/detail-ceshi/detail-ceshi?id=${item.id}`
					});
				}
			},
			// 修改请求类别 到家精选 周边服务
			changeNavActive(i) {
				this.navActive = i;

				this.isLoading = true;
				this.queryData.page = 1;
				if (i == 0) {
					let queryData = {
						userLngz: this.longitude,
						userLat: this.latitude,
					};
					queryData.servers_region = this.servers_region;
					queryData.page = this.queryData.page;
					queryData.limit = this.queryData.limit;
					// 加载 到家精选
					request.post("/user/getsyrserverlist", queryData).then((res) => {
						this.syrserverlist = res.data;
						if (res.count == this.syrserverlist.length) {
							this.isLoading = false;
						}
					});
				} else if (i == 1) {
					let queryData = {};
					// 加载 周边服务
					queryData = {
						userLngz: this.longitude,
						userLat: this.latitude,
						servers_region: this.servers_region,
						page: this.queryData.page,
						limit: this.queryData.limit,
					};
					request
						.post("/user/getsjserverlist", queryData)
						.then((res) => {
							this.shopList = res.data;
							if (res.count == this.shopList.length) {
								this.isLoading = false;
							}
						})
						.catch((err) => {
							console.log(err);
						});
				} else if (i == 2) {
					let queryData = {};
					queryData = {
						servers_region: this.servers_region,
						page: this.queryData.page,
						limit: this.queryData.limit,
						userLngz: this.longitude,
						userLat: this.latitude,
					};
					// 加载 精选手艺人
					// queryData.servers_region = this.servers_region;
					// queryData.page = this.queryData.page;
					// // queryData.page = 3;
					// queryData.limit = this.queryData.limit;
					request
						.post("/user/syrlist", queryData)
						.then((res) => {
							this.syrList = res.data;
							let that = this;
							if (res.count == this.syrList.length) {
								this.isLoading = false;
							}
						})
						.catch((err) => {
							console.log(err);
						});
				}
			},
			handelDistance(data) {
				let that = this;
				data.forEach((item) => {
					let globalData;
					// #ifndef MP-WEIXIN
					globalData = uni.getStorageSync("globalData");
					// #endif
					// #ifdef MP-WEIXIN
					globalData = wx.getStorageSync("globalData");
					// #endif

					if (globalData) {
						item.distance = that.getDistance(
							item.latitude,
							item.longitude,
							globalData.latitude,
							globalData.longitude,
							true
						);
					} else {
						item.distance = that.getDistance(
							item.latitude,
							item.longitude,
							getApp().globalData.latitude,
							getApp().globalData.longitude,
							true
						);
					}
				});
			},
			getBottomList() {
				let queryData = {
					userLngz: this.longitude,
					userLat: this.latitude,
				};
				if (this.navActive == 0) {
					queryData.servers_region = this.servers_region;
					queryData.page = this.queryData.page;
					queryData.limit = this.queryData.limit;
					// 加载 到家精选
					request.post("/user/getsyrserverlist", queryData).then((res) => {
						this.syrserverlist = [...this.syrserverlist, ...res.data];
						if (res.count == this.syrserverlist.length) {
							this.isLoading = false;
						}
					});
				} else if (this.navActive == 1) {
					// 加载 周边服务
					queryData = {
						userLngz: this.longitude,
						userLat: this.latitude,
						servers_region: this.servers_region,
						page: this.queryData.page,
						limit: this.queryData.limit,
					};
					request
						.post("/user/getsjserverlist", queryData)
						.then((res) => {
							this.shopList = [...this.shopList, ...res.data];
							if (res.count == this.shopList.length) {
								this.isLoading = false;
							}
						})
						.catch((err) => {
							console.log(err);
						});
				} else if (this.navActive == 2) {
					// 加载 精选手艺人
					queryData = {
						servers_region: this.servers_region,
						page: this.queryData.page,
						limit: this.queryData.limit,
						userLngz: this.longitude,
						userLat: this.latitude,
					};
					request
						.post("/user/syrlist", queryData)
						.then((res) => {
							this.syrList = [...this.syrList, ...res.data];
							if (res.count == this.syrList.length) {
								this.isLoading = false;
							}
						})
						.catch((err) => {
							console.log(err);
						});
				}
			},
			goToself() {
				uni.navigateTo({
					url: `/pages/selfOperated/serveList`,
				});
			},
			// 预约到家
			goToAppointment() {
				uni.navigateTo({
					url: `/pages/service/appointment`,
				});
			},
			goToStoreList() {
				uni.navigateTo({
					url: "/pages/service/store-list",
				});
			},
			goToClass(id, title) {
				uni.navigateTo({
					url: "/pages/service/class?id=" + id + "&title=" + title,
				});
			},
			// 去搜索
			goToSearch() {
				uni.navigateTo({
					url: `/pages/search/search-history`,
				});
			},

			// 显示权限说明弹窗
			showPermissionDialog(title, content) {
				return new Promise((resolve) => {
					uni.showModal({
						title,
						content,
						confirmText: "去开启",
						success(res) {
							resolve(res.confirm);
						},
					});
				});
			},
			// 去地图页面
			async goMap() {
				uni.navigateTo({
					url: "/pages/address/newSearch",
				});
			},
			// 去店铺主页
			goToShop(id) {
				uni.navigateTo({
					url: "/pages/user/store-detail?id=" + id,
				});
			},
			// 去手艺人主页
			goToSyr(item) {
				uni.navigateTo({
					url: "/pages/user/syr-detail?id=" + item.id,
				});
			},
		},
	};
</script>

<style lang="scss">
	.home-page {
		padding-bottom: 30rpx;
		min-height: 100vh;
		background: var(--bgCloor);
	}

	.positon {
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		padding-bottom: 12rpx;
		background-position: 0 0;
		background-size: 100%;

		.more_address {
			width: 10rpx;
			height: 18rpx;
		}
	}

	.positonFixed {
		position: fixed;
	}

	.header {
		width: 700rpx;
		height: 68rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		margin: 13rpx 24rpx 0rpx;
		background-color: #fff;
		border-radius: 34rpx;
		padding: 0 4rpx 0 30rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 99;
	}

	.location-cont {
		margin: 0 24rpx;
		margin-top: 12rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		z-index: 9;
	}

	.location-logo {
		font-size: 36rpx;
		font-weight: 400;
		color: #000000;
		margin-right: 16rpx;
	}

	.position-icon {
		width: 23rpx;
		height: 26rpx;
		margin-right: 6rpx;
	}

	.location-text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		margin-right: 10rpx;
		color: #ffffff;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
		/* 1. 强制文本不换行 */
		white-space: nowrap;
		/* 2. 隐藏超出容器的内容 */
		overflow: hidden;
		/* 3. 超出部分显示省略号 */
		text-overflow: ellipsis;
		/* 可选：设置容器宽度（根据需求调整） */
		max-width: 400rpx;
		/* 例如固定宽度，或使用 max-width 自适应 */
	}

	.search-input {
		flex: 1;
		color: #333333;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 26rpx;
		// width: 200rpx; 不生效
		border: none;
	}

	.search-icon {
		width: 30rpx;
		height: 32rpx;
		margin-left: 30rpx;
	}

	.banner {
		height: 256rpx;
		border-radius: 20rpx;
		margin: 0 24rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.05);
	}

	.swiper {
		height: 256rpx;
		width: 702rpx;
	}

	.banner-image {
		height: 256rpx;
		width: 702rpx;
		background-color: #fff;
	}

	.appointment-buttons {
		margin-top: 20rpx;
		gap: 14rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.more_icon {
			width: 10rpx;
			height: 18rpx;
		}
	}

	.button-item {
		box-sizing: border-box;
		padding: 0 24rpx 0 30rpx;
		width: 338rpx;
		height: 118rpx;
		text-align: center;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.05);
	}

	.button-icon {
		width: 70rpx;
		height: 70rpx;
	}

	.button-right {
		flex: 1;
		padding-left: 20rpx;
	}

	.button-text {
		width: 100%;
		display: block;
		color: #333333;
		font-weight: 500;
		font-size: 30rpx;
		margin-bottom: 2rpx;
		text-align: left;
	}

	.button-desc {
		width: 100%;
		display: block;
		font-size: 22rpx;
		color: #8c8c8c;
		text-align: left;
	}

	.recruitment {
		margin: 32rpx 24rpx 0;
		border-radius: 20rpx;
		overflow: hidden;
		width: 700rpx;
		height: 240rpx;
		background-color: #fff;
	}

	.recruitment-img {
		width: 700rpx;
		height: 240rpx;
		background-color: #fff;
	}

	.recommend {
		height: 300rpx;
		border-radius: 20rpx;
		background-color: #fff;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 16rpx;
		box-sizing: border-box;
		margin: 0 24rpx 32rpx;
	}

	.recommend-item {
		width: 316rpx;
	}

	.recommend-tit {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 12rpx;
	}

	.recommend-img {
		width: 316rpx;
		height: 188rpx;
		background-color: #000;
		border-radius: 30rpx;
	}

	.recommend-text {
		font-size: 36rpx;
		color: #1d2129;
		display: block;
		margin-top: 5px;
		color: #333;
	}

	.recommend-desc {
		font-size: 24rpx;
		color: #808080;
	}

	.hot-cont {
		background-color: #ffe8ee;
		border-radius: 20rpx;
		margin: 32rpx 24rpx 0;
	}

	.hot-item {
		padding: 24rpx;
		box-sizing: border-box;
	}

	.section-title {
		font-size: 36rpx;
		color: #1d2129;
		margin-bottom: 16rpx;
	}

	.section-cont {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}

	.product-item {
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
		align-items: flex-start;
		width: 200rpx;
		border-radius: 10rpx;
		margin-right: 26rpx;
	}

	.product-item:last-child {
		margin-right: 0;
	}

	.product-img {
		width: 200rpx;
		height: 200rpx;
		background-color: #fff;
		margin-bottom: 16rpx;
	}

	.product-title {
		font-size: 24rpx;
		color: #000000;
		margin-bottom: 18rpx;
		padding: 0 16rpx;
		height: 72rpx;
	}

	.product-price {
		font-size: 24rpx;
		color: #e8101e;
		padding: 0 16rpx;
	}

	.nav-list {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 80rpx 38rpx;
	}

	.nav-item {
		position: relative;
		text-align: center;
	}

	.nav-tit {
		font-weight: 500;
		font-size: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		color: var(--noCheckCloor);
		position: relative;
		z-index: 9;
	}

	.nav-color {
		color: var(--checkCloor);
	}

	.nav_split {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			width: 1rpx;
			height: 32rpx;
			background: #d8d8d8;
			border-radius: 1rpx;
			left: -44rpx;
			top: 50%;
			transform: translateY(-50%);
		}

		&::before {
			content: "";
			position: absolute;
			width: 1rpx;
			height: 32rpx;
			background: #d8d8d8;
			border-radius: 1rpx;
			right: -44rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.nav-active {
		width: 76rpx;
		height: 8rpx;
		background: var(--checkCloor);
		border-radius: 4rpx;
		position: absolute;
		bottom: -18rpx;
		left: 50%;
		transform: translate(-50%);
	}

	//
	.pro-list {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.loading {
		text-align: center;
		margin-top: 40rpx;
		font-size: 24rpx;
		color: #cecece;
	}

	/* APP适配 */
	/* #ifdef APP-PLUS */
	.positon {
		padding-top: var(--status-bar-height);
	}

	.positon::before {
		height: calc(150rpx + var(--status-bar-height));
	}

	.permission.transform {
		top: calc(var(--status-bar-height) + 88rpx + 80rpx);
		opacity: 1;
		visibility: visible;
	}

	/* #endif */

	/* 小程序适配 */
	/* #ifdef MP-WEIXIN */
	.positon {
		padding-top: calc(var(--status-bar-height) + constant(safe-area-inset-top));
		padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top));
	}

	.positon {
		height: calc(var(--status-bar-height) + constant(safe-area-inset-top) + 150rpx);
		height: calc(var(--status-bar-height) + env(safe-area-inset-top) + 150rpx);
	}

	/* #endif */

	.bgImage {
		background-position: 0 0;
		background-size: 100%;
		position: relative;

		&::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 40rpx;
			background: var(--bgCloor);
			bottom: 0;
		}

		.bgText {
			margin-top: 12rpx;
			margin-bottom: 6 rpx;
			width: 484rpx;
			height: 55rpx;
			margin-left: 30rpx;
		}

		.classList {
			height: 100%;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;
			z-index: 100;
		}

		.service-icons {
			display: flex;
			flex-wrap: wrap;
			gap: 30rpx 44rpx;
			padding-top: 20rpx;
			padding-bottom: 30rpx;
			padding-left: 40rpx;
			padding-right: 40rpx;
			background-position: 0 0;
			background-size: 100%;
			background-repeat: no-repeat;
		}

		.icon-item {
			text-align: center;
			display: flex;
			flex-flow: column nowrap;
			justify-content: space-between;
			align-items: center;
			min-width: 98rpx;
		}

		.icon {
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 14rpx;
		}

		.bigIcon {
			width: 98rpx;
			height: 98rpx;
			margin-bottom: 10rpx;
		}

		.icon2 {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 12rpx;
		}

		.icon-text {
			display: block;
			font-size: 24rpx;
			color: #333333;
		}

		.qiehuan {
			height: 8rpx;
			border-radius: 4rpx;
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			align-items: center;
			margin-bottom: 32rpx;
		}

		.qiehuan-item {
			width: 34rpx;
			height: 8rpx;
			border-radius: 4rpx;
			background-color: #e9e9e9;
		}

		.qiehuanA {
			background-color: #d3b8ff;
		}
	}

	.btn_search {
		width: 100rpx;
		height: 58rpx;
		border-radius: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url("https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/9d4a7b6f-6729-49f0-9bd1-ac08e75fd5a7");
		background-size: cover;
		color: #fff;
		font-size: 26rpx;
	}

	.reserve-card {
		margin: 20rpx 20rpx;

		.reserve-card-img1 {
			width: 345rpx;
			height: 261rpx;
		}

		.reserve-card-right {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			justify-content: flex-end;
		}

		.reserve-card-img2 {
			width: 345rpx;
			height: 125rpx;
			margin-bottom: 10rpx;
		}

		.reserve-card-img3 {
			width: 345rpx;
			height: 125rpx;
		}
	}

	.home-Lottery {
		width: 710rpx;
		height: 206rpx;
		padding: 0 20rpx;
	}
</style>