labsop_mcs/frontend_lock/src/pages/addUser/index.vue

<!--
 * @Author: your name
 * @Date: 2021-02-19 11:59:48
 * @LastEditTime: 2021-03-02 11:01:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \intelligentLock\src\pages\index\index.vue
-->
<template>
  <view class="page">
    <!-- <view class="addHeader">
      <AtNavBar :onClickLeftIcon="LeftIconClick"
                :title="userTitle"
                leftIconType="chevron-left"
                color='#646464' />
    </view> -->
    <view class="formBox">
      <view class="userTitle">基本信息</view>
      <AtForm :onSubmit="handleSubmit"
              :onReset="handleReset">
        <AtInput required
                 name="name"
                 title="姓名"
                 type="text"
                 placeholder="请输入姓名"
                 :value="state.name"
                 :onChange="handleChange.bind(this, 'name')" />
        <AtInput required
                 name="phone"
                 title="手机号码"
                 type="phone"
                 placeholder="请输入手机号码"
                 :value="state.phone"
                 :onChange="handleChange.bind(this, 'phone')" />
        <view class="formBtnBox">

          <AtButton type="primary"
                    class="btn"
                    formType="submit"
                    :onClick="handleSubmit">
            提交
          </AtButton>

          <AtButton formType="reset"
                    class="btn"
                    :onClick="handleReset">重置</AtButton>

        </view>
      </AtForm>
    </view>
    <AtToast :text="state.text"
             :isOpened="state.isOpened"></AtToast>

  </view>
</template>

<script>
import './index.scss'
import setStateMixin from '../../mixins/setStateMixin'
export default {
  name: 'userControl',
  mixins: [setStateMixin],
  data () {
    return {
      userTitle: "新增用户",
      state: {
        name: '',
        phone: '',
        isOpened: false,
        text: ''
      }
    }
  },
  created () { },
  onShow () { },
  onHide () { },
  methods: {
    LeftIconClick () {
      this.$taro.navigateBack({
        delta: 1 // 返回上一级页面。
      });
    },
    handleChange (stateName, value) {
      this.setState({
        [stateName]: value,
      })
    },
    // 表单 提交
    handleSubmit () {
      const { name, phone } = this.state
      if (!name) {
        this.setState({
          isOpened: true,
          text: `用户名不能为空`,
        })
        this.closeToast()
        return false
      }
      if (!phone) {
        this.setState({
          isOpened: true,
          text: `手机号不能为空`,
        })
        this.closeToast()
        return false
      }

    },

    // 表单重置
    handleReset () {
      console.log('handleReset')
      this.setState({
        isOpened: true,
        text: `基本信息已被重置`,
        name: '',
        phone: '',

      })
      this.closeToast()
    },
    closeToast () {
      setTimeout(() => {
        this.setState({
          isOpened: false,
        })
      }, 2000)
    }
  }
}
</script>