realty/virgo.wzfrontend/console/src/views/website/city.vue

<template>
	<div class="city-index">
		<div class="container">
			<div class="hot-city">
				<div class="label">热门城市</div>
				<div class="city-list">
					<div class="city-item" v-for="(item,i) in hotCityList" :key="-i" @click="changeCity(item)">
						{{item.cityName}}
					</div>
				</div>
			</div>
			<div class="city-container">
				<div class="title">按字母选择</div>
				<div class="city-container-item" v-for="(list,key,index) in cityList" :key="index">
					<div class="city-container-label">{{key}}</div>
					<div class="city-list">
						<div class="city-item" v-for="(item,i) in list" :key="i" @click="changeCity(item)">
							{{item.cityName}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import city from '@/uitls/citys.js';
	import {
		pinyin
	} from 'pinyin-pro';
	export default {
		data() {
			return {
				cityList: {},
				hotCityList: [{
					'cityCode': '110100',
					'cityName': '北京'
				}, {
					'cityCode': '120100',
					'cityName': '天津'
				}, {
					'cityCode': '310100',
					'cityName': '上海'
				}, {
					'cityCode': '330100',
					'cityName': '杭州'
				}, {
					'cityCode': '440300',
					'cityName': '深圳'
				}]
			}
		},
		created() {
			this.initCity();
		},
		methods: {
			initCity() {
				let obj = {}
				for (let i = 0; i < city.length; i++) {
					let firstName = pinyin(city[i].cityName, {
						pattern: 'first',
						type: 'array',
						toneType: 'none'
					})[0].toUpperCase();
					if (!obj[firstName]) obj[firstName] = [];
					obj[firstName].push(city[i]);
				}
				let sortedKeys = Object.keys(obj).sort();
				let sortedObj = {};
				sortedKeys.forEach(key => {
					sortedObj[key] = obj[key];
				});
				this.cityList = sortedObj;
			},
			changeCity(item) {
				this.$store.dispatch('app/changeCity', item);
				this.$router.go(-1)
			}
		}
	}
</script>

<style lang="scss">
	.city-index {
		padding-top: 65px;
		color: #000;

		.container {
			width: 1200px;
			margin: 0 auto;

		}

		.hot-city {
			height: 95px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #e7ebee;

			.label {
				font-size: 24px;
				font-weight: 500;
				line-height: 24px;
				margin-right: 30px;
			}
		}

		.city-list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.city-item {
				cursor: pointer;
				margin-right: 28px;

				&:hover {
					color: $--color-primary;
					text-decoration: underline;
				}
			}
		}

		.city-container {

			.title {
				font-size: 20px;
				font-weight: 500;
				line-height: 20px;
				padding-top: 32px;
			}

			.city-container-item {
				display: flex;
				padding: 20px 20px 0 20px;
				border-bottom: 1px solid #e7ebee;
			}

			.city-container-label {
				font-size: 24px;
				font-weight: 500;
				line-height: 24px;
				margin-right: 20px;
				position: relative;
				top: -3px;
			}

			.city-item {
				margin-bottom: 20px;
			}
		}
	}
</style>