web-africa-h5/pages/user/set/bind/mobile.vue

<template>
	<view>
		<view class="form-list">
			<template>
				<view class="form-item">
					<view class="item-name">{{$t('w_0180')}}</view>
					<input type="text" value="" :placeholder="$t('S_C_70')" placeholder-class="placeholderclass gray9 f28" class="form-input" />
				</view>
				<view class="form-tips"></view>
			</template>
			<template>
				<view class="form-item">
					<view class="item-name">{{$t('w_0043')}}</view>
					<view class="d-b-c">
						<input type="text" value="" :placeholder="$t('w_0057')" placeholder-class="placeholderclass gray9 f28" class="form-input" />
						<button class="get-code-btn" type="default" @click="sendCode" :disabled="is_send">{{ send_btn_txt }}</button>
					</view>
				</view>
			</template>
		</view>
		<view class="normal-sub-btn ">{{$t('ENU_P_TYPE4')}}</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			/*是否已发验证码*/
			is_send: false,
			/*发送按钮文本*/
			send_btn_txt: this.$t('w_0055'),
			/*当前秒数*/
			second: 60,
		};
	},
	methods: {
		/*发送短信*/
		sendCode() {
			let self = this;
			return
			if (self.is_login == 1) {
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.formData.mobile)) {
					uni.showToast({
						title: self.$t('w_0134')+'!',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
			} else if (self.is_login == 2) {
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.register.mobile)) {
					uni.showToast({
						title: self.$t('w_0134')+'!',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
			} else if (self.is_login == 0) {
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.resetpassword.mobile)) {
					uni.showToast({
						title: self.$t('w_0134')+'!',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
			}
			self._post(
				'user.useropen/sendCode', {
					mobile: mobile,
					type: type
				},
				result => {
					if (result.code == 1) {
						uni.showToast({
							title:  self.$t('MY_WAL_49')
						});
						self.is_send = true;
						self.changeMsg();
					}
				}
			);
		},
		/*改变发送验证码按钮文本*/
		changeMsg() {
			if (this.second > 0) {
				this.send_btn_txt = this.second + this.$t('S_L_9');
				this.second--;
				setTimeout(this.changeMsg, 1000);
			} else {
				this.send_btn_txt = this.$t('w_0055');
				this.second = 60;
				this.is_send = false;
			}
		},
	}
};
</script>

<style lang="scss">
.form-list {
	padding: 49rpx 58rpx 37rpx 52rpx;
	background-color: #ffffff;
	margin-bottom: 57rpx;
	.form-item {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #333;
		.item-name {
			width: 130rpx;
			flex-shrink: 0;
		}
		.form-input {
			flex: 1;
			height: 76rpx;
			line-height: 76rpx;
			border-radius: 38rpx;
			font-size: 28rpx;
			color: #333;
			background: #f5f6f8;
			padding: 0 20rpx 0 51rpx;
		}
	}
	.form-tips {
		color: #fb3024;
		line-height: 60rpx;
		min-height: 56rpx;
		padding-left: 180rpx;
	}
}

.placeholderclass {
}
.get-code-btn {
	min-width: 161rpx;
	height: 74rpx;
	background: #333333;
	line-height: 74rpx;
	padding: 0rpx 20rpx;
	border-radius: 40rpx;
	white-space: nowrap;
	// border: 1rpx solid $dominant-color;
	color: #ffffff;
	box-sizing: border-box;
	margin-left: 46rpx;
	font-size: 24rpx;
}

.get-code-btn[disabled='true'] {
	// border: 1rpx solid #cccccc;
	color: #333;
	background-color: #ffffff;
}
</style>