hs_hzl_uniapp_ml/pageA/watch-login/watch-input.vue

<template>
	<view class="main-list oBorder" @click="$emit('click', $event)">
		<!-- 文本框 -->
		<input class="main-input" :value="value" :type="_type" :focus="_focus" :maxlength="maxlength"
			:placeholder="placeholder" :password="type==='password'&&!showPassword" :disabled="isDisabled"
			@input="$emit('input', $event.detail.value)" @blur="$emit('blur', $event)" @focus="$emit('focus', $event)"
			@longpress="$emit('longpress', $event)" @confirm="$emit('confirm', $event)"
			@longtap="$emit('longtap', $event)" @touchcancel="$emit('touchcancel', $event)"
			@touchend="$emit('touchend', $event)" @touchmove="$emit('touchmove', $event)"
			@touchstart="$emit('touchstart', $event)" />
		<!-- 是否可见密码 -->
		<image v-if="_isShowPass&&type==='password'&&!_isShowCode" class="img cuIcon"
			:class="showPassword?'cuIcon-attention':'cuIcon-attentionforbid'" @tap="showPass"></image>
		<!-- 倒计时 -->
		<view v-if="_isShowCode&&!_isShowPass" :class="['vercode',{'vercode-run': second>0}]" @click="setCode">
			{{ getVerCodeSecond }}
		</view>

	</view>
</template>

<script>
	let _this, countDown;
	export default {
		data() {
			return {
				showPassword: false, //是否显示明文
				second: 0, //倒计时
				isRunCode: false, //是否开始倒计时
			}
		},
		props: {
			type: String, //类型
			value: String, //值
			placeholder: String, //框内提示
			maxlength: {
				//最大长度
				type: [Number, String],
				default: 20,
			},
			isDisabled: false,
			isShowPass: {
				//是否显示密码图标（二选一）
				type: [Boolean, String],
				default: false,
			},
			isShowCode: {
				//是否显示获取验证码（二选一）
				type: [Boolean, String],
				default: false,
			},
			codeText: {
				type: String,
				default: "获取验证码",
			},
			setTime: {
				//倒计时时间设置
				type: [Number, String],
				default: 60,
			},
			focus: {
				//是否聚焦  
				type: [Boolean, String],
				default: false
			}
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		mounted() {
			_this = this
			//准备触发
			this.$on('runCode', (val) => {
				this.runCode(val);
			});
			clearInterval(countDown); //先清理一次循环，避免缓存
		},
		methods: {
			showPass() {
				//是否显示密码
				this.showPassword = !this.showPassword
			},
			setCode() {
				//设置获取验证码的事件
				if (this.isRunCode) {
					//判断是否开始倒计时，避免重复点击
					return false;
				}
				this.$emit('setCode')
			},
			runCode(val) {
				//开始倒计时
				if (String(val) == "0") {

					//判断是否需要终止循环
					this.second = 0; //初始倒计时
					clearInterval(countDown); //清理循环
					this.isRunCode = false; //关闭循环状态
					return false;
				}
				if (this.isRunCode) {
					//判断是否开始倒计时，避免重复点击
					return false;
				}
				this.isRunCode = true
				this.second = this._setTime //倒数秒数

				let _this = this;
				countDown = setInterval(function() {
					_this.second--
					if (_this.second == 0) {
						_this.isRunCode = false
						clearInterval(countDown)
					}
				}, 1000)
			}
		},
		computed: {
			_type() {
				//处理值
				const type = this.type
				return type == 'password' ? 'text' : type
			},
			_isShowPass() {
				//处理值
				return String(this.isShowPass) !== 'false'
			},
			_isShowCode() {
				//处理值
				return String(this.isShowCode) !== 'false'
			},
			_setTime() {
				//处理值
				const setTime = Number(this.setTime)
				return setTime > 0 ? setTime : 60
			},
			_focus() {
				//处理值  
				return String(this.focus) !== 'false'
			},
			getVerCodeSecond() {
				//验证码倒计时计算
				if (this.second <= 0) {
					return this.codeText;
				} else {
					if (this.second < 10) {
						return '0' + this.second;
					} else {
						return this.second;
					}
				}

			}
		}
	}
</script>

<style>
	@import url("./css/icon.css");

	.main-list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		/* height: 36rpx; */
		/* Input 高度 */
		color: #333333;
		padding: 40rpx 32rpx;
		margin: 32rpx 0;
	}

	.img {
		width: 32rpx;
		height: 52rpx;
		font-size: 32rpx;
	}

	.main-input {
		flex: 1;
		text-align: left;
		font-size: 28rpx;
		/* line-height: 100rpx; */
		padding-right: 10rpx;
		margin-left: 20rpx;
	}

	.vercode {
		color: rgba(0, 0, 0, 0.7);
		font-size: 24rpx;
		/* line-height: 100rpx; */
	}

	.vercode-run {
		color: rgba(0, 0, 0, 0.4) !important;
	}

	.oBorder {
		border: none;
		border-radius: 2.5rem;
		-webkit-box-shadow: 0 0 60rpx 0 rgba(43, 86, 112, .1);
		box-shadow: 0 0 60rpx 0 rgba(43, 86, 112, .1);
	}
</style>