dev/dcp-app-gate/pages/public/GlobalRoaming.vue

<template>
	<view>
		<u-navbar :back-text="i18n('Back')" title-width="300" :title="$i18n.locale=='zh'?'选择手机号归属地':'Select MobilePhoneNumber home'"></u-navbar>
		<u-index-list :scrollTop="scrollTop" :sticky="true" @select="select1">
			<view v-for="(value,key,index) in indexList" :key="index">
				<u-index-anchor :index="key" />
				<view class="list-cell" v-for="(item,i) in value" @click="navTo(item)">
					<text class="list-cell-value" v-if="$i18n.locale=='zh'">{{item.cnValue}}</text>
					<text class="list-cell-value" v-else>{{item.enValue}}</text>
					<text class="list-cell-id">{{item.id}}</text>
				</view>

			</view>
		</u-index-list>

	</view>
</template>

<script>
	import country from "@/assets/js/counytryCode.js";
	export default {
		data() {
			return {
				scrollTop: 0,
				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": []
				},
				tel: '',
				searchVal: '',
				select: "0086",
				isInputSearch: false, //是否是输入搜索
				getSearchs: "",
				countrys: [],
				countryEmpty: false, // 是否没有匹配项
				currentIndex: '1',
				regLogStyle: ''
			}
		},
		watch: {

		},
		onShow() {
			// this.countrys = this.getLetters();
			this.getLetters();
		},
		onLoad(options) {
			this.regLogStyle = options.regLogStyle; //regLogStyle为0-注册，regLogStyle为1-登录
			console.log(this.regLogStyle)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// mounted() {
		// 	this.getLetters();
		// },
		methods: {
			select1(index) {
				console.log(index)
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			navTo(data) {
				console.log(data)
				if (this.regLogStyle) {
					if (this.regLogStyle == '1') {
						this.$mRouter.push({
							route: `/pages/public/login?data=` + encodeURIComponent(JSON.stringify(data))
						});
					} else if (this.regLogStyle == '0') {
						this.$mRouter.push({
							route: `/pages/public/register?data=` + encodeURIComponent(JSON.stringify(data))
						});
					} else if (this.regLogStyle == '2') {
						this.$mRouter.push({
							route: `/pages/profile/profileSetUp/BindMobileNumber?data=` + encodeURIComponent(JSON.stringify(data))
						});
					} else if (this.regLogStyle == '3') {
						this.$mRouter.push({
							route: `/pages/profile/profileSetUp/changeNewMobileNumber?data=` + encodeURIComponent(JSON.stringify(data))
						});
					} else if (this.regLogStyle == '4') {
						this.$mRouter.push({
							route: `/pages/public/password?data=` + encodeURIComponent(JSON.stringify(data))
						});
					} else if (this.regLogStyle == '5') {
						// this.$mRouter.push({
						// 	route: `/pages/public/password?data=` + encodeURIComponent(JSON.stringify(data))
						// });
						uni.$emit("moblieAreCode", data);
						uni.navigateBack()
					}
				} else {
					// this.$emit("getAreCode", data); //自定义事件  传递值“子向父组件传值”
				}


			},
			// 获取索引字母
			getLetters() {
				let arr = [];
				let letter;
				let countryList = [];

				if (this.$i18n.locale == "zh") {
					country.sort((a, b) => {
						return a.pinyin.charCodeAt(0) - b.pinyin.charCodeAt(0);
					});
					country.forEach((item, i) => {
						letter = item.pinyin.slice(0, 1).toUpperCase();
						this.indexList[letter].push(item);
					});
					console.log("0000000", this.indexList)
				} else {
					country.sort((a, b) => {
						return a.enValue.charCodeAt(0) - b.enValue.charCodeAt(0);
					});
					country.forEach((item, i) => {
						letter = item.enValue.slice(0, 1);
						this.indexList[letter].push(item);
					});
				}
				return arr.sort();
			},

		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #252526;
		font-size: 14px;
		line-height: 60upx;
		background-color: #fff;

		// position: relative;
		.list-cell-value {
			// position: absolute;
			margin-left: 10upx;
		}

		justify-content: space-between;

		.list-cell-id {
			// position: absolute;
			margin-right: 100upx;
		}
	}
</style>