dev/dcp-app-gate/pages/conference/conferenceOfflineEn/CountryDict.vue

<template>
	<view>
		<uni-nav-bar
			status-bar = true
			fixed = true
			background-color="#03b6b3"
			color="#ffffff"
			left-icon="arrowleft"
			@clickLeft="navigateBack">
			<text slot="default" style="text-align: center; flex: 1; font-size: 18px; font-weight: bold;">Country/Region</text>
		</uni-nav-bar>
		<view>
			<uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list>
		</view>
		
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"; 
	import uniIndexedList from "@/components/uni-indexed-list/uni-indexed-list.vue";
	export default {
		comments: {uniNavBar, uniIndexedList},
		data() {
			return {
				list: []
			}
		},
		mounted(){
			this.initDicts();
		},
		methods: {
			bindClick(e){
				let finallyCode = e.item.name.toLowerCase();
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('acceptSelectedCountry', {code: finallyCode, country: e.item.name});
				uni.navigateBack();
			},
			navigateBack() {
				uni.navigateBack()
			},
			async initDicts(){
				const res= await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: 'unit_country_dict_en'
					}
				})
				res.data[0].forEach(code => {
					let letter = code.label[0].toUpperCase();
					let itemValue = code.label;
					if(this.list.length){
						let hasSameLetter = false;
						let listItemIndex;
						for(let l = 0; l < this.list.length; l++){
							if(this.list[l].letter == letter){
								hasSameLetter = true;
								listItemIndex = l;
								break;
							}
						}
						if(hasSameLetter){
							this.list[listItemIndex].data.push(itemValue);
						}else{
							this.list.push({
								letter: letter,
								data: [itemValue]
							});
						}
					}else{
						this.list.push({
							letter: letter,
							data: [itemValue]
						});
					}
					this.list.sort(function(a, b){
						return a.letter.charCodeAt()-b.letter.charCodeAt();
					})
				})
			},
		}
	}
</script>

<style scoped>
/deep/ .uni-indexed-list__menu{
	width: 30px;
}
</style>