activitys-uniapp/components/alert/smsAlert.vue

<template>
	<u-popup v-model="show" mode="center" width="80%" border-radius="15" :closeable="true">
		<view class="sms-alert-container">
			<view class="title">短信验证</view>
			<view class="info-msg">验证码已发送至{{phoneInfo}}</view>
			<view class="input-box">
				<u-input class="input-content" type="number" maxlength="6" placeholder="请输入验证码" v-model="code"/>
				<view class="code-button">
					<view v-if="sending==true">
						<u-loading mode="circle"></u-loading>
					</view>
					<view v-else-if="seconds > 0"><span class="text-red">{{seconds+'s '}} </span>可重发</view>
					<view v-else><u-button @click="$u.debounce(sendMessage, 500)" plain size="mini">重新发送</u-button></view>
				</view>
			</view>
			<u-button @click="$u.debounce(validateCode, 500)" :custom-style="customStyle" shape="circle" >确认</u-button>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name:"smsAlert",
		data() {
			return {
				show: false,
				sending: true,
				phone: '13126058204',
				code: '',
				seconds: -1,
				customStyle: {
					color: 'white',
					background: "#E72226",
					width: '400rpx'
				}
			};
		},
		computed:{
			phoneInfo(){
				return this.phone.substr(0,4)+"****"+this.phone.substr(7,this.phone.length);
			}
		},
		methods: {
			async showSmsAndSend(phone){
				if(this.$u.test.mobile(phone)){
					uni.showToast({
					    title: '手机号码格式错误',
					    icon: 'none'
					});
					return;
				}
				this.phone = phone;
				await sendMessage();
				this.show = true;
			},
			hideSms(){
				this.show = false;
			},
			async sendMessage(){
				this.sending = true;
				//发送验证码
				this.sending= false;
			},
			validateCode(){
				this.$emit("validateResult",{result: true})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sms-alert-container{
		padding: 50rpx;
		.title{
			width: 100%;
			text-align: center;
			 padding:  0rpx 10rpx 50rpx 10rpx ;
			font-weight: 500;
			color: #353535;
			letter-spacing: 2rpx;
			font-size: 30rpx;
		}
		.info-msg{
			padding: 5rpx 5rpx 20rpx 5rpx;
			color: #353535;
		}
		.input-box{
			display: flex;
			align-items: center;
			justify-content: left;
			border: 1rpx solid #DDDDDD;
			border-radius: 10rpx;
			margin: 0 0 50rpx 0;
			padding:  5rpx 5rpx 5rpx 30rpx;
		}
		.input-content{
			width: 66%;
		}
		.code-button{
			width: 34%;
			border-left: 1rpx solid #DDDDDD;text-align: center;
		}
	}
</style>