input 与 短信发送组件封装完成

components/en-input/en-input.vue

@@ -0,0 +1,90 @@
+<template>
+  <view class="box">
+    <view class="input-box">
+      <view class="input-box-left">
+        {{ label }}
+      </view>
+      <input
+          :name="name"
+          :type="type"
+          :placeholder="placeholder ? placeholder : ''"
+          :disabled="!!disabled"
+          v-model="inputValue"
+      />
+    </view>
+    <view class="box-solid"></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'en-input',
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    label: {
+      type: String,
+      default: '标题'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    },
+    disabled: {
+      default: false
+    },
+    name: {
+      type: String,
+      default: 'text'
+    },
+    value: {
+      default: ''
+    }
+  },
+  data() {
+    return {
+      inputValue: ''
+    }
+  },
+  components: {},
+  mounted() {
+    this.inputValue = this.value
+  },
+  watch: {
+    'value': function () {
+      if (this.inputValue !== this.value) {
+        this.inputValue = this.value
+      }
+    },
+    'inputValue': function () {
+      this.$emit('input', this.inputValue)
+    }
+  },
+  methods: {}
+
+}
+</script>
+
+<style lang="scss" scoped>
+  .box{
+    height: 114rpx;
+    background-color: #ffffff;
+    .input-box {
+      height: 98rpx;
+      display: flex;
+      align-items: center;
+      .input-box-left {
+        width: 210rpx;
+        font-size: 32rpx;
+        color: #333333;
+      }
+    }
+    .box-solid{
+      border-bottom: 1px solid #F0F0F0;
+      margin-bottom:26rpx;
+    }
+  }
+
+</style>

components/en-send/en-send.vue

@@ -0,0 +1,140 @@
+<template>
+  <view class="box">
+    <view class="input-box">
+      <view class="input-box-left">
+        {{ label }}
+      </view>
+      <input
+          :name="name"
+          :type="type"
+          :placeholder="placeholder ? placeholder : ''"
+          :disabled="!!disabled"
+          v-model="inputValue"
+      />
+      <view class="input-box-right" v-if="timeNum<=0" @click="getCode()">
+        发送
+      </view>
+      <view class="input-box-right" v-else >
+        {{timeNum}} s
+      </view>
+    </view>
+    <view class="box-solid"></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'en-input',
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    label: {
+      type: String,
+      default: '标题'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入'
+    },
+    disabled: {
+      default: false
+    },
+    name: {
+      type: String,
+      default: 'number'
+    },
+    value: {
+      default: ''
+    },
+    timeNumMax:{
+      type:Number,
+      default:90
+    }
+  },
+  data() {
+    return {
+      inputValue: '',
+      timer: '',
+      timeNum:0
+    }
+  },
+  components: {},
+  mounted() {
+    this.inputValue = this.value
+
+  },
+  watch: {
+    'value': function () {
+      if (this.inputValue !== this.value) {
+        this.inputValue = this.value
+      }
+    },
+    'inputValue': function () {
+      this.$emit('input', this.inputValue)
+    }
+  },
+  methods: {
+    getCode(){
+      if (this.inputValue === '') {
+        uni.showToast({
+          'title': "请输入手机号码",
+          'icon': 'error',
+          'mask': true,
+          'duration': 1500
+        })
+        return;
+      }
+      let regPhone = /^(?:(?:\+|00)86)?1\d{10}$/;
+      if (!regPhone.test(this.inputValue)) {
+        uni.showToast({
+          'title': "手机号码错误",
+          'icon': 'error',
+          'mask': true,
+          'duration': 1500
+        })
+        return;
+      }
+      console.log('sadasdsa')
+      this.$emit('getCode')
+    },
+    setCodeNum(){
+      this.timeNum = this.timeNumMax
+      this.timer = setInterval(() => {
+        this.timeNum--;
+        if (this.timeNum <= 0) {
+          clearInterval(this.timer);
+        }
+      }, 1000);
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+  .box{
+    height: 114rpx;
+    background-color: #ffffff;
+    .input-box {
+      height: 98rpx;
+      display: flex;
+      align-items: center;
+      font-size: 32rpx;
+      .input-box-left {
+        color: #333333;
+        width: 210rpx;
+      }
+      .input-box-right{
+        width: 80rpx;
+        color: #3169FA;
+      }
+    }
+    .box-solid{
+      border-bottom: 1px solid #F0F0F0;
+      margin-bottom:26rpx;
+    }
+  }
+
+</style>

pages/index/index.vue

@@ -1,28 +1,41 @@
 <template>
-	<view class="">
+	<view class="box">
     <Nav title="首页"></Nav>
-		首页21312
+    <enInput></enInput>
+    <enInput></enInput>
+    <enSend v-model="phone" ref="enSendObj" @getCode="getCode"></enSend>
 	</view>
 </template>
 <script>
 
-
+  import enInput from "components/en-input/en-input"
+  import enSend from "components/en-send/en-send"
 	export default {
 		components: {
-
+      enInput,
+      enSend
 		},
 		data() {
 			return {
-
+        phone:'13900139001'
 			}
 		},
 		mounted() {
 
 		},
 		methods: {
+      getCode(){
+        console.log('---------------------asdsa')
+        this.$refs.enSendObj.setCodeNum()
+      },
 
 
 		},
 	}
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.box{
+  padding: 32rpx 32rpx 0;
+  background-color: #fff;
+}
+</style>