mall-front-app/sheep/components/s-auth-modal/components/phone-international-input.vue

<!-- 国际手机输入组件 -->
<template>
	<picker mode="selector" :range="country.map(item => item.chinese_name +' +'+ item.phone_code)" :value="selectedIndex"
		@change="pickChange" style="float: left;height: 100%;width: 110rpx;display: flex;align-items: center;">
		<view>+{{selectedCode}}
			<image src="@/static/icon/select-icon.png" style="width: 20rpx;height: 20rpx;" />
		</view>
	</picker>
	<uni-easyinput placeholder="请输入手机号" v-model="state.model.mobile"  @input="verifyMobile" :inputBorder="false" type="number" 	style="float: left;width: calc(100% - 110rpx);">
		<template v-slot:right>
			<button class="ss-reset-button code-btn code-btn-start" :disabled="!verifyUsername || selectedCode != 86"
				:class="{ 'disabled': !verifyUsername || selectedCode != 86}" @tap="getSmsCode('smsLogin', state.model.mobile)">
				{{ getSmsTimer('smsLogin') }}
			</button>
		</template>
	</uni-easyinput>

</template>

<script setup>
	import {
		ref,
		reactive,
		unref,
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import {
		getSmsCode,
		getSmsTimer
	} from '@/sheep/hooks/useModal';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import countryData from '@/sheep/libs/country.json';
	import {parsePhoneNumberFromString,AsYouType  } from 'libphonenumber-js';
	import parseMobile from 'libphonenumber-js/mobile'

	const country = ref(countryData);
	const selectedCode = ref('');
	const selectedCountryCode = ref('');
	const selectedIndex = ref(0);
	// 查找中国在 country 数组中的索引
	const findIndexByCode = (code) => {
		return country.value.findIndex(item => item.phone_code == code);
	};
	// 更新选中的国家代码和索引
	const pickChange = (e) => {
		selectedIndex.value = e.detail.value;
		selectedCode.value = country.value[selectedIndex.value].phone_code;
		selectedCountryCode.value = country.value[selectedIndex.value].country_code;
	};

	// 设置默认选中中国
	onLoad(() => {
		const chinaIndex = findIndexByCode('86');
		if (chinaIndex !== -1) {
			selectedIndex.value = chinaIndex;
			selectedCode.value = country.value[chinaIndex].phone_code;
			selectedCountryCode.value = country.value[chinaIndex].country_code;
		}
	});
	const props = defineProps({
		verifyUsername: {
			type: Boolean
		}
	});
	const emits = defineEmits(['input']);
	const verifyMobile = (e) => {
		// console.log(e.detail.value)
		const phone = e;
		if(phone == ''){
			emits('input',phone,'请输入手机号')
		} else {
			try{
				const phoneParseMobile = parseMobile(phone, selectedCountryCode.value);
				if(phoneParseMobile.isValid()){
					emits('input',phone,'')
				}else{
					emits('input',phone,'手机号码格式不正确')
				}
			}catch(e){
				// console.log(e)
			}
		}
	}
	// 账号注册数据
	const state = reactive({
		codeText: '获取验证码',
		model: {
			mobile: '', // 手机号
		}
	});
</script>
<style lang="scss" scoped>
	@import '../index.scss';
	.code-btn-start {
		color: var(--ui-BG-Main);
		border: 1px solid var(--ui-BG-Main);
	}

	.disabled {
		border: 1px solid #f7f7f7;
	}



	.loginUniForm {
		border: 1rpx solid #d6d6d6;
		padding: 10rpx 15rpx;
		border-radius: 10rpx;
	}

	.loginUniFormItem {
		border-bottom: 1rpx solid #d6d6d6;
		padding-bottom: 10rpx;
	}

	.loginUniFormItem:last-child {
		border-bottom: none;
		padding-top: 10rpx;
	}

	::v-deep .loginUniFormItem .uni-forms-item__inner {
		padding-bottom: 0;
	}

	::v-deep .loginUniFormItem .uni-error-message {
		bottom: -20rpx;
	}
</style>