Homestay_manage_app/pages/home3/home3.vue

<template>
	<view class="container">
		<view class="header2" :style="{ height: customBarH * 2 + 'rpx', paddingTop: statusBarH * 2 + 'rpx' }" v-if="headerType">
			<view class="title">靖安乡村民宿</view>
		</view>

		<!-- 顶部图片区域 -->
		<view class="header">
			<img mode="aspectFill" src="https://chtech.ncjti.edu.cn/hotelReservation/image/14.png" />
			<img class="img" src="https://chtech.ncjti.edu.cn/hotelReservation/image/16.png" />
			<img class="img2" src="https://chtech.ncjti.edu.cn/hotelReservation/image/17.png" />
			<view class="header_msg">有一种生活叫靖安</view>
		</view>

		<view class="content">
			<!-- 条件筛选区域 -->
			<view class="search">
				<!-- 选择乡镇区域 -->
				<view class="search_town" :class="{ active: town }" @click="handleOpen">
					{{ town ? town : '请选择乡镇' }}
					<img src="../../static/index/right2.png" />
				</view>
				<!-- 关键词搜索和民宿级别区域 -->
				<view class="search_center">
					<view class="center_input">
						<input type="text" v-model="keywords" placeholder="民宿/地名/关键词" placeholder-style="color:#A6A6A6;font-weight:400;" />
					</view>
					<img class="img" src="../../static/index/right2.png" />
					|
					<view class="center_level" :class="{ active: level }" @click="handleChooseLv">{{ level ? level : '请选择民宿级别' }}</view>
					<img class="img2" src="../../static/index/right2.png" @click="handleChooseLv" />
				</view>
				<!-- 查找按钮区域 -->
				<view class="search_btn" @click="handleSearch">查找</view>
			</view>

			<!-- 轮播图区域 -->
			<swiper class="swiper" indicator-dots circular indicator-color="#BBD8FE" indicator-active-color="#1E7DFB" autoplay interval="3000" v-if="townList.length">
				<swiper-item v-for="(ele, index) in townList" :key="index">
					<view class="swiper_item">
						<view class="item_box" v-for="(swi, index2) in ele" :key="index2" @click="handleChooseTown2(swi.name)">
							<img v-if="index === 0 && index2 === 0" src="https://chtech.ncjti.edu.cn/hotelReservation/image/1.png" mode="aspectFill" />
							<img v-if="index === 0 && index2 === 1" src="https://chtech.ncjti.edu.cn/hotelReservation/image/2.png" mode="aspectFill" />
							<img v-if="index === 0 && index2 === 2" src="https://chtech.ncjti.edu.cn/hotelReservation/image/3.png" mode="aspectFill" />
							<img v-if="index === 1 && index2 === 0" src="https://chtech.ncjti.edu.cn/hotelReservation/image/4.png" mode="aspectFill" />
							<img v-if="index === 1 && index2 === 1" src="https://chtech.ncjti.edu.cn/hotelReservation/image/5.png" mode="aspectFill" />
							<img v-if="index === 1 && index2 === 2" src="https://chtech.ncjti.edu.cn/hotelReservation/image/6.png" mode="aspectFill" />
							<img v-if="index === 2 && index2 === 0" src="https://chtech.ncjti.edu.cn/hotelReservation/image/7.png" mode="aspectFill" />
							<img v-if="index === 2 && index2 === 1" src="https://chtech.ncjti.edu.cn/hotelReservation/image/8.png" mode="aspectFill" />
							<img v-if="index === 2 && index2 === 2" src="https://chtech.ncjti.edu.cn/hotelReservation/image/9.png" mode="aspectFill" />
							<img v-if="index === 3 && index2 === 0" src="https://chtech.ncjti.edu.cn/hotelReservation/image/10.png" mode="aspectFill" />
							<img v-if="index === 3 && index2 === 1" src="https://chtech.ncjti.edu.cn/hotelReservation/image/11.png" mode="aspectFill" />
							<img v-if="index === 3 && index2 === 2" src="https://chtech.ncjti.edu.cn/hotelReservation/image/12.png" mode="aspectFill" />
							<view class="box_town">{{ swi.name }}</view>
							<view class="box_count">剩{{ swi.residueNumber }}间</view>
						</view>
					</view>
				</swiper-item>
			</swiper>

			<view class="body">
				<!-- 优选民宿区域 -->
				<view class="body_top" v-if="hotelList_you.length">
					<view class="circle"></view>
					<view class="circle color"></view>
					<view class="top_title">优选民宿 .</view>
					<view class="top_msg">特色优选民宿，让旅途充满乐趣</view>
					<view class="top_more" @click="handleGoHome">
						更多
						<img src="https://chtech.ncjti.edu.cn/hotelReservation/image/13.png" />
					</view>
				</view>
				<view class="body_list">
					<!-- 每一个民宿区域 -->
					<view class="list_item" v-for="(item, index) in hotelList_you" :key="index" @click="goPageDetail(item)">
						<image class="item-img" :src="item.coverImg" mode="scaleToFill"></image>
						<view class="descrition">
							<text class="title">{{ item.hotel_name }}</text>
							<text class="type">{{ item.hTypeName }}</text>
							<text class="distance" v-if="showdDistance">距您直线{{ item.distance }}公里</text>
							<view class="detail">
								<img class="img" src="../../static/index/hotel.png" />
								<view class="price_home">
									<text class="txt1">¥{{ item.min_price }}</text>
									<text class="txt2">起</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 精选攻略区域 -->
				<view class="body_top" v-if="bestNewsInfo">
					<view class="circle"></view>
					<view class="circle color"></view>
					<view class="top_title">精选攻略 .</view>
					<view class="top_msg">宝藏分享社区</view>
					<view class="top_more" @click="handleGoPage">
						更多
						<img src="https://chtech.ncjti.edu.cn/hotelReservation/image/13.png" />
					</view>
				</view>
				<view v-if="bestNewsInfo" class="body_strategy" @click="handleGoDetail(bestNewsInfo)">
					<img v-if="bestNewsInfo.image" class="strategy_cover" mode="aspectFill" :src="bestNewsInfo.image" />
					<video
						v-if="bestNewsInfo.video"
						class="strategy_cover"
						:src="bestNewsInfo.video"
						:show-center-play-btn="false"
						:show-fullscreen-btn="false"
						:show-play-btn="false"
					></video>
					<view class="strategy_info">
						<view class="info_title">{{ bestNewsInfo.title }}</view>
						<view class="info_tags">
							<view class="tag">{{ bestNewsInfo.townName }}</view>
						</view>
						<view class="info_desc">
							{{ bestNewsInfo.content }}
						</view>
					</view>
				</view>

				<!-- 招商资讯区域 -->
				<view class="body_top" v-if="newsList.length">
					<view class="circle"></view>
					<view class="circle color"></view>
					<view class="top_title">招商资讯 .</view>
					<view class="top_msg">以招商引资，推动镇域经济</view>
					<view class="top_more" @click="handleGoNewsList">
						更多
						<img src="https://chtech.ncjti.edu.cn/hotelReservation/image/13.png" />
					</view>
				</view>

				<!-- 招商资讯轮播图 -->
				<uni-swiper-dot :info="newsList" mode="round" :dotsStyles="dotsStyles" :current="current">
					<swiper circular autoplay interval="3000" class="body_news" @change="changeDot">
						<swiper-item v-for="item in newsList" :key="item.id" @click="handleGoNews(item)">
							<uv-image width="633rpx" height="332rpx" radius="8rpx" mode="aspectFill" :src="item.url" />
							<view class="news_title">
								{{ item.title ? item.title : '无标题' }}
							</view>
							<view class="news_desc">
								{{ item.desc }}
							</view>
							<mp-html v-if="item.showHtml" @load="htmlLoad(item)" :ref="item.id + 'html'" :content="item.content" />
						</swiper-item>
					</swiper>
				</uni-swiper-dot>

				<!-- 特产甄选区域 -->
				<view class="body_top" v-if="goodsList.length">
					<view class="circle"></view>
					<view class="circle color"></view>
					<view class="top_title">特产甄选 .</view>
					<view class="top_msg">明优推荐，土的自然，购的放心</view>
					<view class="top_more" @click="clickGoods">
						更多
						<img src="https://chtech.ncjti.edu.cn/hotelReservation/image/13.png" />
					</view>
				</view>

				<view class="body_list">
					<!-- 每一个特产区域 -->
					<view class="item_goods" v-for="item in goodsList" :key="item.id" @click="to_detail(item)">
						<img class="goods_img" mode="aspectFill" :src="item.imgs.split(',')[0]" />
						<view class="goods_name">{{ item.name }}</view>

						<view class="goods_detail">
							<img class="img" src="../../static/index/goods.png" />
							<view class="price_good">
								<text class="txt1">¥{{ item.price }}</text>
								<text class="txt2">起</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 精选推荐区域 -->
				<view class="body_top" v-if="hotelList.length">
					<view class="circle"></view>
					<view class="circle color"></view>
					<view class="top_title">精选推荐 .</view>
					<view class="top_msg">线上订民宿，住着玩个遍</view>
					<view class="top_more" @click="handleGoHome">
						更多
						<img src="https://chtech.ncjti.edu.cn/hotelReservation/image/13.png" />
					</view>
				</view>
				<view class="body_list">
					<!-- 每一个民宿区域 -->
					<view class="list_item" v-for="item in hotelList" :key="item.id" @click="goPageDetail(item)">
						<image class="item-img" :src="item.coverImg" mode="scaleToFill"></image>
						<view class="descrition">
							<text class="title">{{ item.hotel_name }}</text>
							<text class="type">{{ item.hTypeName }}</text>
							<text class="distance" v-if="showdDistance">距您直线{{ item.distance }}公里</text>
							<view class="detail">
								<img class="img" src="../../static/index/hotel.png" />
								<view class="price_home">
									<text class="txt1">¥{{ item.min_price }}</text>
									<text class="txt2">起</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 没有数据时展示的页面 -->
				<view class="noData" v-if="!hotelList.length">
					<img src="../../static/images/noData.png" />
					暂无推荐数据
				</view>
			</view>
		</view>

		<!-- 选择乡镇弹窗区域 -->
		<uni-popup ref="popup" type="center">
			<view class="popup_body">
				<view class="body_header">
					<img src="../../static/my/popup_title.png" />
					<view class="header_title">请选择乡镇</view>
					<img src="../../static/my/popup_title.png" />
				</view>
				<view class="body_content">
					<view class="content_box" v-for="(item, index) in popList" :key="index" @click="handleChooseTown(item.name)">
						<img v-if="index === 0" src="https://chtech.ncjti.edu.cn/hotelReservation/image/1.png" mode="aspectFill" />
						<img v-if="index === 1" src="https://chtech.ncjti.edu.cn/hotelReservation/image/2.png" mode="aspectFill" />
						<img v-if="index === 2" src="https://chtech.ncjti.edu.cn/hotelReservation/image/3.png" mode="aspectFill" />
						<img v-if="index === 3" src="https://chtech.ncjti.edu.cn/hotelReservation/image/4.png" mode="aspectFill" />
						<img v-if="index === 4" src="https://chtech.ncjti.edu.cn/hotelReservation/image/5.png" mode="aspectFill" />
						<img v-if="index === 5" src="https://chtech.ncjti.edu.cn/hotelReservation/image/6.png" mode="aspectFill" />
						<img v-if="index === 6" src="https://chtech.ncjti.edu.cn/hotelReservation/image/7.png" mode="aspectFill" />
						<img v-if="index === 7" src="https://chtech.ncjti.edu.cn/hotelReservation/image/8.png" mode="aspectFill" />
						<img v-if="index === 8" src="https://chtech.ncjti.edu.cn/hotelReservation/image/9.png" mode="aspectFill" />
						<img v-if="index === 9" src="https://chtech.ncjti.edu.cn/hotelReservation/image/10.png" mode="aspectFill" />
						<img v-if="index === 10" src="https://chtech.ncjti.edu.cn/hotelReservation/image/11.png" mode="aspectFill" />
						<img v-if="index === 11" src="https://chtech.ncjti.edu.cn/hotelReservation/image/12.png" mode="aspectFill" />
						<view class="box_town">{{ item.name }}</view>
						<view class="box_count">剩{{ item.residueNumber }}间</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 公告弹窗区域 -->
		<uv-popup ref="popup_sale" mode="center" :closeOnClickOverlay="false" bgColor="none">
			<view class="popupClass">
				<img src="../../static/index/popup_bg.png" />
				<!-- 立即前往区域 -->
				<!-- <view class="btn_go" @click="handleGo"></view> -->
				<view class="btn_text">系统处于迭代试用状态，请勿下单预订酒店，如需预订请电联店家老板确认预订渠道。</view>
				<!-- 关闭按钮区域 -->
				<view class="btn_close" @click="handleClose"></view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 用户定位经度
			myLng: 0,
			// 用户定位纬度
			myLat: 0,
			// 是否显示距离差
			showdDistance: false,
			// 搜索框绑定数据
			keywords: '',
			// 当前页
			page: 1,
			// 每页多少条
			rows: 6,
			// 总条数
			total: null,
			// 地区数组
			placeList: [
				{
					name: '靖安县'
				}
			],
			// 当前选择地区索引
			placeIndex: 0,
			// 选择乡镇弹窗数据
			popList: [],
			// 精选民宿列表数组
			hotelList: [],
			// 优选民宿列表数组
			hotelList_you: [],
			// 当前乡镇
			town: '',
			// 民宿级别
			level: '',
			// 乡镇列表
			townList: [],
			// 顶部导航栏显示隐藏控制
			headerType: false,
			// 状态栏高度
			statusBarH: 0,
			// 胶囊按钮栏高度
			customBarH: 0,
			// 招商资讯列表
			newsList: [],
			// 精选攻略数据
			bestNewsInfo: null,
			// 招商资讯轮播图指示点样式
			dotsStyles: {
				backgroundColor: '#BBD8FE',
				selectedBackgroundColor: '#1E7DFB',
				border: 'none',
				selectedBorder: 'none'
			},
			// 招商资讯轮播图当前索引值
			current: 0,
			// 特产甄选列表
			goodsList: []
		}
	},
	created() {
		// 获取系统信息
		uni.getSystemInfo({
			success: (e) => {
				// 获取状态栏高度
				this.statusBarH = e.statusBarHeight + 10
				// // 获取菜单按钮栏高度
				let custom = uni.getMenuButtonBoundingClientRect()
				this.customBarH = custom.height + 10
			}
		})
	},
	mounted() {
		// 开启转发功能
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		})
	},
	onReachBottom() {
		if (this.hotelList.length < this.total) {
			this.page++
			this.getHotelList_jing()
		} else {
			uni.showToast({
				title: '没有更多数据了',
				icon: 'none'
			})
		}
	},
	onPageScroll(e) {
		if (e.scrollTop > 100) {
			this.headerType = true
		} else {
			this.headerType = false
		}
	},
	onPullDownRefresh() {
		this.hotelList = []
		this.page = 1
		this.getLocation()
		this.getResidueCount()
		this.getBestNews()
		this.getNews()
		this.getGoodsList()
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 1000)
	},
	onLoad() {
		// 获取乡镇列表
		this.getResidueCount()
		// 获取精选攻略
		this.getBestNews()
		// 获取招商资讯列表
		this.getNews()
		// 获取特产列表
		this.getGoodsList()
		// 获取定位
		this.getLocation()
	},
	methods: {
		async getBestNews() {
			const res = await this.$myRequest({
				url: '/mhotel/articlequeryMaxArticleLike.action'
			})
			// console.log(res)
			if (res.code == 200) {
				this.bestNewsInfo = res.data
			}
		},
		async getNews() {
			const res = await this.$myRequest({
				url: '/mhotel/appnewlist.action',
				data: {
					page: 1,
					rows: 3
				}
			})
			// console.log(res)
			if (res.code === 200) {
				this.newsList = res.rows
				this.newsList.forEach((ele) => {
					this.$set(ele, 'showHtml', true)
				})
			}
		},
		async getGoodsList() {
			const res = await this.$myRequest_shop({
				url: '/goods/open/page',
				data: {
					curPage: 1,
					pageSize: 4,
					hot: 1,
					state: 1
				}
			})
			// console.log(res)
			if (res.code === '1') {
				this.goodsList = res.data.list
			}
		},
		//跳转到商城总类
		to_detail(options) {
			let userInfo = uni.getStorageSync('userInfo')
			let tokenId = uni.getStorageSync('tokenId')
			if (!userInfo || !tokenId) {
				uni.showModal({
					title: '提示',
					content: '您当前未登录，请授权登录查看社区信息',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					}
				})
			} else {
				this.$api.togoods({ id: options.id })
			}
		},
		//跳转到特产商城
		clickGoods() {
			let userInfo = uni.getStorageSync('userInfo')
			let tokenId = uni.getStorageSync('tokenId')
			if (!userInfo || !tokenId) {
				uni.showModal({
					title: '提示',
					content: '您当前未登录，请授权登录查看社区信息',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					}
				})
			} else {
				uni.navigateTo({
					url: '/packageShang/pages/tabbar/home'
				})
			}
		},
		// 获取用户当前位置
		getLocation() {
			uni.getSetting({
				success: (res) => {
					if (!res.authSetting['scope.userLocation']) {
						uni.authorize({
							scope: 'scope.userLocation',
							success: (res) => {
								// 授权成功
								uni.getLocation({
									type: 'gcj02',
									success: (res) => {
										this.myLat = res.latitude
										this.myLng = res.longitude
										this.showdDistance = true
										this.getHotelList_you()
										this.getHotelList_jing()
									}
								})
							},
							fail: () => {
								uni.showModal({
									content: '获取定位权限失败将会影响使用部分功能，是否去设置打开？',
									confirmText: '确认',
									cancelText: '取消',
									success: (res) => {
										if (res.confirm) {
											uni.openSetting({
												success: (res) => {
													console.log(res)
													this.getLocation()
												}
											})
										} else {
											this.showdDistance = false
											this.getHotelList_you()
											this.getHotelList_jing()
											uni.showToast({
												title: '获取定位权限失败',
												icon: 'none'
											})
										}
									}
								})
							}
						})
					} else {
						uni.getLocation({
							type: 'gcj02',
							success: (res) => {
								this.myLat = res.latitude
								this.myLng = res.longitude
								this.showdDistance = true
								this.getHotelList_you()
								this.getHotelList_jing()
							}
						})
					}
				},
				fail: () => {
					uni.showToast({
						title: '获取用户设置权限失败',
						icon: 'none',
						mask: true
					})
				}
			})
		},
		handleGoDetail(info) {
			let openid = uni.getStorageSync('openid')
			if (openid) {
				uni.navigateTo({
					url: `/pages/tweetDetail/tweetDetail?id=${info.id}&townId=${info.townId}`
				})
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none',
					mask: true
				})
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}, 1500)
			}
		},
		// 获取民宿列表  优选
		async getHotelList_you() {
			const res = await this.$myRequest({
				url: '/mhotel/ahppreferredPage.action',
				data: {
					page: 1,
					rows: 4,
					type: 3,
					userId: uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo').id : ''
				}
			})
			// console.log(res)
			if (res.code === 200) {
				this.hotelList_you = res.data.pageList

				// 如果定位成功则获取和民宿之间的距离
				if (this.showdDistance && this.hotelList_you.length) {
					this.hotelList_you.forEach((ele) => {
						let lat = ele.hpositionWens.split(',')[0]
						let lng = ele.hpositionWens.split(',')[1]
						ele.distance = this.calculateDistance(lat, lng)
					})
				}
			}
		},
		// 获取民宿列表  精选
		async getHotelList_jing() {
			const res = await this.$myRequest({
				url: '/mhotel/ahpselectedPage.action',
				data: {
					page: this.page,
					rows: this.rows,
					type: 3,
					userId: uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo').id : ''
				}
			})
			// console.log(res)
			if (res.code === 200) {
				this.hotelList = [...this.hotelList, ...res.data.pageList]
				this.total = res.data.total

				// 如果定位成功则获取和民宿之间的距离
				if (this.showdDistance && this.hotelList.length) {
					this.hotelList.forEach((ele) => {
						let lat = ele.hpositionWens.split(',')[0]
						let lng = ele.hpositionWens.split(',')[1]
						ele.distance = this.calculateDistance(lat, lng)
					})
				}
			}
		},
		handleOpen() {
			this.$refs.popup.open()
		},
		// 获取乡镇
		async getResidueCount() {
			const res = await this.$myRequest({
				url: '/mhotel/ahpgetResidueCount.action'
			})
			// console.log(res)
			if (res.code === 200) {
				let temNum = 0
				res.data.forEach((ele) => {
					temNum += ele.residueNumber
				})
				res.data.unshift({
					name: '靖安县',
					residueNumber: temNum
				})
				this.popList = res.data
				this.townList = this.changeList(this.popList, 3)
			}
		},
		// 变成二维数组
		changeList(arr, num) {
			let newArr = []
			const total = Math.ceil(arr.length / num)
			for (let i = 0; i < total; i++) {
				let a = arr.slice(i * num, (i + 1) * num)
				newArr.push(a)
			}
			return newArr
		},
		// 弹窗点击选择乡镇地址回调
		handleChooseTown(name) {
			this.town = name
			this.$refs.popup.close()
		},
		handleChooseTown2(name) {
			// this.town = name
			uni.navigateTo({
				url: `/pages/home/home?town=${name}&keywords=${this.keywords}&level=${this.level}`
			})
		},
		handleChooseLv() {
			uni.showActionSheet({
				itemList: ['白金', '金宿', '银宿'],
				success: (res) => {
					if (res.tapIndex === 0) {
						this.level = '白金'
					} else if (res.tapIndex === 1) {
						this.level = '金宿'
					} else if (res.tapIndex === 2) {
						this.level = '银宿'
					}
				}
			})
		},
		handleSearch() {
			uni.navigateTo({
				url: `/pages/home/home?town=${this.town}&keywords=${this.keywords}&level=${this.level}`
			})
		},

		goPageDetail(item) {
			uni.navigateTo({
				url: `/pages/detail/detail?id=${item.id}&distance=${item.distance}`
			})
		},
		// 弹窗关闭按钮回调
		handleClose() {
			this.$refs.popup_sale.close()
		},
		// 立即前往按钮回调
		handleGo() {
			console.log(111)
		},
		// 计算两个点之间的距离
		calculateDistance(lat, lng) {
			let centerLat = lat
			let centerLng = lng

			let red1 = (this.myLat * Math.PI) / 180.0
			let red2 = (centerLat * Math.PI) / 180.0
			let a = red1 - red2
			let b = (this.myLng * Math.PI) / 180.0 - (centerLng * Math.PI) / 180.0
			let R = 6378137
			let distance = R * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(red1) * Math.cos(red2) * Math.pow(Math.sin(b / 2), 2)))
			let res = (distance / 1000).toFixed(2) * 1

			return res
		},
		handleGoPage() {
			uni.switchTab({
				url: '/pages/community/community'
			})
		},
		handleGoNews(item) {
			let info = encodeURIComponent(JSON.stringify(item))
			uni.navigateTo({
				url: `/pages/newsDetail/newsDetail?info=${info}`
			})
		},
		handleGoNewsList() {
			uni.navigateTo({
				url: '/pages/newsList/newsList'
			})
		},
		htmlLoad(item) {
			let id = item.id + 'html'
			let ctx = this.$refs[id][0]
			let text = ctx.getText()
			let imgs = ctx.imgList[0]
			item.showHtml = false
			item.desc = text
			item.url = imgs
		},
		handleGoHome() {
			uni.navigateTo({
				url: '/pages/home/home'
			})
		},
		changeDot(e) {
			this.current = e.detail.current
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-y: auto;
	background-color: #f2f2f2;

	.header {
		position: relative;
		height: 505rpx;

		img {
			width: 100%;
			height: 100%;
			border-radius: 0 0 20rpx 20rpx;
		}

		.img {
			position: absolute;
			top: 135rpx;
			left: 61rpx;
			width: 160rpx;
			height: 40rpx;
		}

		.img2 {
			position: absolute;
			top: 193rpx;
			left: 38rpx;
			width: 268rpx;
			height: 88rpx;
		}

		.header_msg {
			position: absolute;
			top: 283rpx;
			left: 38rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 291rpx;
			height: 65rpx;
			font-size: 31rpx;
			color: #fff;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 0.2);
		}
	}

	.header2 {
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		box-sizing: content-box;
		text-align: center;
		background-color: #fff;

		.title {
			font-size: 34rpx;
		}
	}

	.content {
		z-index: 1;
		margin: -102rpx auto 0;
		width: 690rpx;
		border-radius: 12rpx 12rpx 0 0;
		background-color: #f2f2f2;

		.search {
			box-sizing: border-box;
			padding: 0 28rpx;
			width: 690rpx;
			height: 353rpx;
			border-radius: 12rpx;
			background-color: #fff;

			.search_town {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 89rpx;
				color: #a6a6a6;
				font-size: 32rpx;
				border-bottom: 1rpx solid #e6e6e6;

				img {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.active {
				font-weight: bold;
				color: #000;
			}

			.search_center {
				display: flex;
				align-items: center;
				height: 89rpx;
				color: #a6a6a6;
				font-size: 28rpx;

				img {
					width: 40rpx;
					height: 40rpx;
				}

				.center_input {
					margin-right: 12rpx;
					width: 250rpx;
					color: #000;
					font-weight: bold;
				}

				.img {
					margin-right: 12rpx;
				}

				.center_level {
					flex: 1;
					margin-left: 24rpx;
					font-weight: 400;
				}

				.active {
					font-weight: bold;
					color: #000;
				}

				.img2 {
					margin-left: auto;
				}
			}

			.search_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 23rpx;
				width: 623rpx;
				height: 100rpx;
				border-radius: 57rpx;
				color: #fff;
				font-size: 32rpx;
				background: linear-gradient(90deg, #2697ef 0%, #5e35eb 100%);
			}
		}

		.swiper {
			margin: 20rpx auto 0;
			width: 690rpx;
			height: 214rpx;
			border-radius: 12rpx;
			background-color: #fff;

			.swiper_item {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 100%;
				height: 100%;

				.item_box {
					position: relative;
					width: 195rpx;
					height: 128rpx;
					border-radius: 12rpx;
					color: #fff;

					img {
						width: 195rpx;
						height: 128rpx;
						border-radius: 12rpx;
					}

					.box_town {
						position: absolute;
						top: 30rpx;
						left: 0;
						right: 0;
						text-align: center;
						font-size: 28rpx;
						font-weight: bold;
					}

					.box_count {
						position: absolute;
						top: 75rpx;
						left: 0;
						right: 0;
						text-align: center;
						font-size: 18rpx;
					}
				}
			}
		}

		.body {
			margin: 0 auto;
			width: 690rpx;

			.body_top {
				display: flex;
				align-items: center;
				height: 89rpx;

				.circle {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					background-color: #485bed;
				}

				.color {
					margin-left: -15rpx;
					opacity: 0.5;
					background-color: #fff;
				}

				.top_title {
					margin-left: 15rpx;
					font-size: 32rpx;
					font-weight: bold;
				}

				.top_msg {
					margin-top: 5rpx;
					margin-left: 12rpx;
					color: #666666;
					font-size: 24rpx;
				}

				.top_more {
					display: flex;
					align-items: center;
					margin-left: auto;
					color: #a6a6a6;
					font-size: 24rpx;

					img {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.body_strategy {
				display: flex;
				box-sizing: border-box;
				padding: 20rpx;
				margin-bottom: 10rpx;
				width: 690rpx;
				height: 235rpx;
				border-radius: 12rpx;
				background-color: #fff;

				.strategy_cover {
					width: 253rpx;
					height: 190rpx;
					border-radius: 7rpx;
				}

				.strategy_info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 20rpx;
					width: 500rpx;
					height: 170rpx;
					font-size: 24rpx;
					color: #666666;
					overflow: hidden;

					.info_title {
						font-size: 32rpx;
						font-weight: bold;
						color: #000;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.info_title2 {
						font-size: 32rpx;
						font-weight: bold;
						color: #000;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.info_tags {
						display: flex;

						.tag {
							margin-right: 10rpx;
							box-sizing: border-box;
							padding: 0 12rpx;
							height: 35rpx;
							color: #1e7dfb;
							font-size: 20rpx;
							border-radius: 30rpx;
							border: 1rpx solid #1e7dfb;
						}
					}

					.info_desc {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
				}
			}

			.body_list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.list_item {
					width: 335rpx;
					box-sizing: border-box;
					margin-bottom: 20rpx;

					.item-img {
						width: 100%;
						height: 223rpx;
						border-radius: 18rpx 18rpx 0 0;
						box-sizing: border-box;
					}

					.descrition {
						display: flex;
						flex-direction: column;
						width: 100%;
						border-radius: 0 0 18rpx 18rpx;
						box-sizing: border-box;
						background: rgba(255, 255, 255, 1);
						margin-top: -10rpx;

						.title {
							font-size: 28rpx;
							font-weight: 600;
							padding: 20rpx 20rpx 10rpx;
							color: rgba(0, 0, 0, 1);
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.type {
							padding: 5rpx 20rpx;
							height: 40rpx;
							font-size: 24rpx;
							color: #a6a6a6;
						}

						.distance {
							padding: 10rpx 20rpx;
							font-size: 24rpx;
							color: #a6a6a6;
						}

						.detail {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							padding: 0 20rpx 20rpx 20rpx;
							color: rgba(0, 0, 0, 1);

							.img {
								width: 40rpx;
								height: 40rpx;
							}

							.price_home {
								.txt1 {
									font-size: 36rpx;
									font-weight: 600;
									color: rgba(255, 87, 51, 1);
								}

								.txt2 {
									font-size: 24rpx;
									font-weight: 400;
									color: #a6a6a6;
								}
							}

							.score {
								font-size: 24rpx;
								font-weight: 400;
								padding-top: 10rpx;
								color: rgba(166, 166, 166, 1);
							}
						}
					}
				}

				.item_goods {
					margin-bottom: 20rpx;
					width: 335rpx;
					height: 367rpx;
					border-radius: 10rpx;
					background-color: #fff;
					overflow: hidden;

					.goods_img {
						width: 335rpx;
						height: 223rpx;
						border-bottom: 1rpx solid #eee;
					}

					.goods_name {
						margin: 18rpx 5rpx 18rpx 30rpx;
						font-size: 28rpx;
						font-weight: bold;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.goods_detail {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						padding: 0 20rpx 20rpx 20rpx;
						color: rgba(0, 0, 0, 1);

						.img {
							width: 40rpx;
							height: 40rpx;
						}

						.price_good {
							.txt1 {
								font-size: 36rpx;
								font-weight: 600;
								color: rgba(255, 87, 51, 1);
							}

							.txt2 {
								font-size: 24rpx;
								font-weight: 400;
								color: #a6a6a6;
							}
						}

						.score {
							font-size: 24rpx;
							font-weight: 400;
							padding-top: 10rpx;
							color: rgba(166, 166, 166, 1);
						}
					}
				}
			}

			.body_news {
				box-sizing: border-box;
				padding: 25rpx;
				width: 690rpx;
				height: 566rpx;
				border-radius: 12rpx;
				background-color: #fff;

				.news_title {
					margin: 20rpx 0;
					font-size: 32rpx;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.news_desc {
					font-size: 24rpx;
					color: #666666;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}

			.noData {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding-bottom: 65rpx;

				img {
					margin-top: 80rpx;
					width: 600rpx;
					height: 600rpx;
				}
			}
		}
	}

	.popup_body {
		width: 618rpx;
		height: 687rpx;
		border-radius: 21rpx;
		background-color: #fff;

		.body_header {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			height: 113rpx;
			border-bottom: 1rpx solid #e6e6e6;

			img {
				width: 16rpx;
				height: 16rpx;
			}

			.header_title {
				margin: 0 10rpx;
				font-size: 34rpx;
				font-weight: bold;
				color: #0f194d;
			}
		}
		.body_content {
			display: grid;
			grid-template-columns: repeat(auto-fill, 160rpx);
			gap: 28rpx;
			box-sizing: border-box;
			padding: 26rpx 40rpx 50rpx;

			.content_box {
				position: relative;
				width: 160rpx;
				height: 105rpx;
				color: #fff;
				border-radius: 10rpx;

				img {
					width: 160rpx;
					height: 105rpx;
					border-radius: 10rpx;
				}

				.box_town {
					position: absolute;
					top: 20rpx;
					left: 0;
					right: 0;
					text-align: center;
					font-size: 28rpx;
					font-weight: bold;
				}

				.box_count {
					position: absolute;
					top: 62rpx;
					left: 0;
					right: 0;
					text-align: center;
					font-size: 18rpx;
				}
			}
		}
	}

	.popupClass {
		position: relative;
		width: 481rpx;
		height: 764rpx;

		img {
			width: 100%;
			height: 665rpx;
		}

		.btn_go {
			position: absolute;
			top: 415rpx;
			left: 40rpx;
			width: 396rpx;
			height: 76rpx;
			border-radius: 43rpx;
		}

		.btn_text {
			position: absolute;
			top: 265rpx;
			left: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 400rpx;
			height: 260rpx;
			color: #0f194d;
			font-size: 28rpx;
			border-radius: 43rpx;
			background-color: #fff;
		}

		.btn_close {
			position: absolute;
			top: 586rpx;
			left: 212rpx;
			width: 58rpx;
			height: 58rpx;
			border-radius: 50%;
		}
	}
}
</style>