NN2025081602/addons/min-exam/components/selectCity.vue

<template>
	<view v-if="show">
		<uv-index-list :index-list="indexList" customNavHeight="100rpx">
			<template v-slot:header>
				<view class="mlr-m">
					<view v-if="location.cityCode" class="flex-gap-m" style="align-items: baseline;">
						<view><uv-text text="当前选择的城市:" color="#666" size="13" /></view>
						<view><uv-text :text="location.city" size="16" /></view>
					</view>
					<view class="mtb-m flex-gap-m" style="flex-wrap: wrap;">
						<view v-for="(item,index) in hotList" :key="index" class="flex">
							<uv-tags :text="item.cityName" bg-color="#f4f4f4" border-color="#f4f4f4" color="#666"
								@click="onSelect(item)" />
						</view>
					</view>
				</view>
				<!-- <view style="height: 100rpx;width: 750rpx;background-color: #3c9cff;">头部内容</view> -->
			</template>
			<view v-for="(item, index) in itemArr" :key="index">
				<!-- #ifdef APP-NVUE -->
				<uv-index-anchor :text="indexList[index]"></uv-index-anchor>
				<!-- #endif -->
				<uv-index-item>
					<!-- #ifndef APP-NVUE -->
					<uv-index-anchor :text="indexList[index]"></uv-index-anchor>
					<!-- #endif -->
					<view class="list-cell" v-for="(cell, key) in item" :key="key" @click="onSelect(cell)">
						{{cell.cityName}}
					</view>
				</uv-index-item>
			</view>
		</uv-index-list>
	</view>
</template>

<script>
	import cityList from '@/common/city-list.js'
	export default {
		props: {
			show: {
				type: [Boolean, String],
				default: false,
			}
		},
		data() {
			return {
				indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
					'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				hotList: [{
					"cityName": "全国",
					"unicode": 21271,
					"oldData": {
						"cityCode": "",
						"cityName": "全国"
					}
				}, {
					"cityName": "北京",
					"unicode": 21271,
					"oldData": {
						"cityCode": "110100",
						"cityName": "北京"
					}
				}, {
					"cityName": "南京市",
					"unicode": 21335,
					"oldData": {
						"cityCode": "320100",
						"cityName": "南京市"
					}
				}, {
					"cityName": "上海市",
					"unicode": 19978,
					"oldData": {
						"cityCode": "310100",
						"cityName": "上海市"
					}
				}, {
					"cityName": "杭州市",
					"unicode": 26477,
					"oldData": {
						"cityCode": "330100",
						"cityName": "杭州市"
					}
				}, {
					"cityName": "深圳市",
					"unicode": 28145,
					"oldData": {
						"cityCode": "440300",
						"cityName": "深圳市"
					}
				}, {
					"cityName": "广州市",
					"unicode": 24191,
					"oldData": {
						"cityCode": "440100",
						"cityName": "广州市"
					}
				}, {
					"cityName": "桂林市",
					"unicode": 26690,
					"oldData": {
						"cityCode": "450300",
						"cityName": "桂林市"
					}
				}, {
					"cityName": "南宁市",
					"unicode": 21335,
					"oldData": {
						"cityCode": "450100",
						"cityName": "南宁市"
					}
				}],
				subCateIndex: -1,
				location: {
					cityCode: '21271',
					city: '全国'
				}
			};
		},
		onLoad() {
			this.location = this.$store.state.location;
		},
		methods: {
			onSelect(item) {
				this.$store.commit('setLocation', item);

				//uni.$emit('select', item)
			}
		},
		computed: {
			itemArr() {
				let arr = []
				this.indexList.forEach((item, index) => {
					arr.push(cityList[index].citys)
				})

				return arr
			}
		},
	}
</script>

<style lang="scss">
	.list-cell {
		/* #ifndef APP-PLUS */
		display: flex;
		box-sizing: border-box;
		width: 100%;
		/* #endif */
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>