Homestay_manage_app/pages/index/index.vue

<template>
	<view class="container">
		<!-- 地图区域 -->
		<view class="map">
			<qiun-data-charts type="map" :opts="opts" :chartData="chartData" @getIndex="getMapIndex" />
		</view>
		<!-- 乡镇列表区域 -->
		<view class="body" v-if="list.length">
			<!-- 每一个乡镇区域 -->
			<view class="body_item" v-for="(item, index) in list" :key="index">
				<view class="item_town">{{ item.name }}</view>
				<view class="item_platina">白金级（{{ item.cSum }}）</view>
				<view class="item_gold">金宿级（{{ item.bSum }}）</view>
				<view class="item_silver">银宿级（{{ item.aSum }}）</view>
				<view class="item_btn" @click="() => handleGoHome(item)">订</view>
			</view>
		</view>
	</view>
</template>

<script>
// 靖安县地图数据
import { mapData } from '@/util/mapData.js'

export default {
	data() {
		return {
			// 城镇列表数据
			list: [],
			// 图表数据
			chartData: {
				series: {}
			},
			// 图表配置
			opts: {
				color: ['#096562', '#096562', '#096562', '#096562', '#096562', '#096562', '#096562', '#096562', '#096562', '#096562', '#096562'],
				padding: [0, 0, 0, 0],
				fontColor: '#fff',
				fontSize: 10,
				dataPointShape: false,
				extra: {
					map: {
						border: true,
						borderWidth: 1,
						borderColor: 'rgba(255,255,255,0.2)',
						fillOpacity: 0.6,
						activeBorderColor: 'rgba(255,255,255,0.2)',
						activeFillColor: '#0BBA92',
						activeFillOpacity: 1,
						fillOpacity: 1
					}
				}
			}
		}
	},
	onReady() {
		this.getServerData()
	},
	onLoad() {
		this.getTownList()
	},
	methods: {
		getMapIndex(e) {
			let town
			if (e.currentIndex === 0) {
				town = '双溪镇'
			} else if (e.currentIndex === 1) {
				town = '仁首镇'
			} else if (e.currentIndex === 2) {
				town = '罗湾乡'
			} else if (e.currentIndex === 3) {
				town = '水口乡'
			} else if (e.currentIndex === 4) {
				town = '香田乡'
			} else if (e.currentIndex === 5) {
				town = '躁都镇'
			} else if (e.currentIndex === 6) {
				town = '三爪仑乡'
			} else if (e.currentIndex === 7) {
				town = '中源乡'
			} else if (e.currentIndex === 8) {
				town = '高湖镇'
			} else if (e.currentIndex === 9) {
				town = '雷公尖乡'
			} else if (e.currentIndex === 10) {
				town = '宝峰镇'
			}
			uni.setStorageSync('town', town)
			uni.switchTab({
				url: `/pages/home/home`
			})
		},
		// 获取城镇列表数据
		async getTownList() {
			const res = await this.$myRequest({
				url: '/mhotel/ahpgetTownshipCount.action',
				method: 'post'
			})
			// console.log(res)
			if (res.code === 200) {
				this.list = res.data
			}
		},
		handleGoHome(item) {
			uni.setStorageSync('town', item.name)
			uni.switchTab({
				url: `/pages/home/home`
			})
		},
		// 获取地图数据
		getServerData() {
			this.chartData.series = mapData.features
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	padding: 0 30rpx 10rpx;
	height: 100vh;
	background-color: #f7f7f7;

	.map {
		width: 100%;
		height: 463rpx;
	}

	.body {
		height: calc(100vh - 463rpx);
		overflow-y: auto;

		.body_item {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			height: 92rpx;
			border-radius: 12rpx;
			background-color: #e6e6e6;

			.item_town {
				margin-left: 30rpx;
				font-size: 32rpx;
				font-weight: bold;
			}

			.item_silver {
				margin-left: 24rpx;
				font-size: 20rpx;
				color: #660909;
			}
			.item_gold {
				margin-left: 18rpx;
				font-size: 20rpx;
				color: #096562;
			}
			.item_platina {
				margin-left: 24rpx;
				font-size: 20rpx;
				color: #ff5733;
			}

			.item_btn {
				margin-left: auto;
				margin-right: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100rpx;
				height: 66rpx;
				color: #fff;
				font-size: 36rpx;
				border-radius: 11rpx;
				background-color: #096562;
			}
		}
	}
}
</style>