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

<template>
	<view>
		<uni-nav-bar
			status-bar = true
			fixed = true
			background-color="#03b6b3"
			color="#ffffff">
			<text slot="default" style="text-align: center; flex: 1; font-size: 18px; font-weight: bold;">Mobile Area Code</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";
	import country from "@/static/js/counytryCode.js";
	export default {
		comments: {uniNavBar, uniIndexedList},
		data() {
			return {
				list: []
			}
		},
		mounted(){
			this.initCode();
		},
		methods: {
			bindClick(e){
				let finallyCode = e.item.name.slice(-5, -1);
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('watchMobileAreaCode', {code: finallyCode});
				uni.navigateBack();
			},
			initCode(){
				country.forEach(code => {
					let letter = code.enValue[0].toUpperCase();
					let itemValue = `${code.enValue} (${code.id})`;
					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>