activitys-uniapp/components/alert/smsAlert.vue

<template>
	<view class="">
		<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(exchange, 500)" :custom-style="customStyle" shape="circle">确认</u-button>
			</view>
		</u-popup>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	export default {
		name: "smsAlert",
		data() {
			return {
				show: false,
				sending: true,
				phone: '',
				code: '',
				seconds: 60,
				smsParams: {},
				customStyle: {
					color: 'white',
					background: "#E72226",
					width: '400rpx'
				}
			};
		},
		computed: {
			phoneInfo() {
				return this.phone.substr(0, 4) + "****" + this.phone.substr(7, this.phone.length);
			}
		},
		methods: {
			getSeconds() {
				let timer = setInterval(() => {
					this.seconds--
					if (this.seconds == 0) {
						timer
						clearInterval(timer)
					}
				}, 1000)

			},
			async showSmsAndSend(params) {
				this.smsParams = params
				let phone = params.mobile
				if (!this.$u.test.mobile(phone)) {
					uni.showToast({
						title: '手机号码格式错误',
						icon: 'none'
					});
					return;
				}
				this.phone = phone;
				this.show = true;
				this.sending = false;
				this.getSeconds()
			},
			hideSms() {
				this.show = false;
			},
			async sendMessage() {
				this.sending = true;
				this.seconds = 60
				this.getSeconds()
				let res = await this.$api.order.sendCmccSms(this.smsParams)
				if (!res.data.success) {
					this.$u.toast(res.data.msg)
				}
				// 发送验证码
				this.sending = false;
			},
			exchange() {
				if (this.$isEmpty(this.code)) {
					this.$u.toast('请输入验证码')
					return
				}
				let params = this.$u.deepClone(this.smsParams)
				params.smsCode = this.code
				params.mobile = this.phone
				this.$emit("exchange", params)
			},
		}
	}
</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>