BiKing/pages/login/area-code.vue

<template>
	<view>
		<headContent>
			<template #left>
				<view class="head-revers-back iconfont" @click.stop="reversBackBtn()">&#xe604;</view>
			</template>
			<template #content>
				<view class="haed-title">
					国家/地区
				</view>
			</template>
		</headContent>
		<!-- :style="{'top': searchHeight + 'px'}" -->
		<view class="search-box">

		</view>
		<view class="scroll-box" :style="{'height':scrollViewHeight + 'px'}">
			<scroll-view scroll-y="true" class="scroll-Y" scroll-with-animation :scroll-into-view="scrollIntoView">
				<block v-for="(val , key , index) in AreaList">
					<view :id="key" v-if="val && val.length > 0">
						<text class="search-letter">{{ key }}</text>
						<view class="area-list">
							<view class="area-item" v-for="item in val">
								<text>{{item.name}}</text>
								<text>+{{item.area_code}}</text>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
			<view class="letter-tag">
				<block v-for="(val , key , index) in AreaList">
					<text @click.stop="scrollIntoView = key" :class="['tag-item' , scrollIntoView === key ? 'area-key' : '']"
						v-if="val && val.length > 0">{{ key }}</text>
				</block>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		reverseBack
	} from "@/utils/common.js"
	import {
		mapGetters
	} from 'vuex'
	import {
		Api_getAreaCode
	} from "@/api/index.js"
	export default {

		data() {
			return {
				scrollIntoView: 'A',
				scrollViewHeight: 0,
				AreaList: []
			};
		},
		computed: {
			...mapGetters([
				'statusBarHeight',
				'headHeight'
			])
		},
		created() {
			const app = uni.getWindowInfo()
			let pageHeight = app.windowHeight || app.screenHeight
			this.scrollViewHeight = pageHeight - uni.upx2px(this.headHeight.split('rpx')[0]) - this.statusBarHeight - uni
				.upx2px(100)

			console.log('app = ', this.scrollViewHeight)
			this.getAreaCode()
		},
		methods: {
			reversBackBtn() {
				reverseBack()
			},
			getAreaCode() {

				Api_getAreaCode().then(res => {
					this.areaRank(res)
				}).catch(err => {

				})
			},
			areaRank(areaList = []) {
				const letters = {
					'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': [],
					'#': []
				}
				if (areaList && areaList.length > 0) {
					areaList.forEach(el => {
						if (el.name) {
							let initialLetter = el.name.slice(0, 1)
							letters[initialLetter].push(el)
						} else {
							letters['#'].push(el)
						}

					})
				};
				this.AreaList = letters
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import "~./common.scss";

	.search-box {
		width: 100%;
		height: 100rpx;
	}

	.search-shadow {

		width: 100%;
		height: 100rpx;
	}

	.search-letter {
		display: inline-block;
		width: 100%;
		height: 80rpx;
		background-color: $page-bg;
		padding: 0 $pages-padding;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #c1c1c1;
	}

	.area-list {
		width: 100%;
		padding: 0 $pages-padding;

		.area-item {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid $border-color;
			font-size: 28rpx;
			padding-right: 30rpx;

			&:last-child {
				border-bottom: none;
			}
		}

	}

	.scroll-box {
		width: 100%;
		position: relative;

		.letter-tag {
			position: absolute;
			right: 0;
			top: 50%;
			padding: 0 10rpx 0 20rpx;
			transform: translateY(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.tag-item {
				padding: 10rpx;
				font-size: 22rpx;
				// width: 20rpx;
				
			}
			.area-key{
				background-color: #c1c1c1;
				border-radius: 50%;
			}
		}
	}

	.scroll-Y {
		width: 100%;
		height: 100%;



	}
</style>