Cube-UI的form表單

https://didi.github.io/cube-ui/#/zh-CN/docs/form

註冊

Register.vue

<template>
  <div class="main">
    <cube-form :model="model" @submit="submitHandler">
      <cube-form-group>
        <!--名稱-->
        <cube-form-item :field="fields[0]"></cube-form-item>
        <!--⼿機號-->
        <cube-form-item :field="fields[1]"></cube-form-item>
        <!--密碼-->
        <cube-form-item :field="fields[2]"></cube-form-item>
      </cube-form-group>
      <cube-form-group>
        <cube-button type="submit">註冊</cube-button>
      </cube-form-group>
    </cube-form>
    <router-link to="/login" class="reg">登入</router-link>
  </div>
</template>
<script>
import { registerApi } from 
 
"@/api/getData.js";
export default {
  //註冊介面引入
  data() {
    return {
      mode: {
        phoneValue: "",
        pwdValue: "",
        nameValue: ""
      },
      fields: [
        {
          type: "input",
          modelKey: "phoneValue",
          label: "手機號",
          props: {
            placeholeder: 
 
"請輸入手機"
          },
          rules: {
            required: true
          },
          messages: {
            required: "手機號不能為空"
          }
        },
        {
          type: "input",
          modelKey: "pwdValue",
          label: "密碼",
          props: {
            placeholeder: "請輸入密碼",
            type: 
 
"password",
            eye: {
              open: false
            }
          },
          rules: {
            required: true
          },
          messages: {
            required: "密碼不能為空"
          }
        },
        {
          type: "input",
          modelKey: "nameValue",
          label: "姓名",
          props: {
            placeholeder: "請輸入姓名"
          },
          rules: {
            required: true
          },
          messages: {
            required: "姓名不能為空"
          }
        }
      ]
    };
  },
  methods: {
    submitHandler(e, model) {
      e.preventDefault();
      //呼叫註冊業務
      registerApi(model.nameValue, model.phoneValue, model.pwdValue).then(
        res => {
          if (res.data.code === 0) {
            const toast = this.$createToast({
              txt: "註冊成功",
              type: "correct",
              time: 1500
            });
            toast.show();
          }
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  padding: 50px 5% 0;
  text-align: center;
}
//註冊
.cube-btn {
  margin-top: 20px;
}
// 登入
.reg {
  display: inline-block;
  margin-top: 30px;
  font-size: 18px;
}
</style>

登陸

Login.vue

<template>
  <div class="main">
    <cube-form :model="model" @submit="submitHandler">
      <cube-form-group>
        <!--⼿機號-->
        <cube-form-item :field="fields[0]"></cube-form-item>
        <!--密碼-->
        <cube-form-item :field="fields[1]"></cube-form-item>
      </cube-form-group>
      <cube-form-group>
        <cube-button type="submit">登陸</cube-button>
      </cube-form-group>
    </cube-form>
    <router-link to="/register" class="reg">註冊</router-link>
  </div>
</template>
<script>
import { loginApi } from "@/api/getData.js";
export default {
  //註冊介面引入
  data() {
    return {
      model: {
        phoneValue: "",
        pwdValue: "",
      },
      fields: [
        {
          type: "input",
          modelKey: "phoneValue",
          label: "手機號",
          props: {
            placeholeder: "請輸入手機"
          },
          rules: {
            required: true
          },
          messages: {
            required: "手機號不能為空"
          }
        },
        {
          type: "input",
          modelKey: "pwdValue",
          label: "密碼",
          props: {
            placeholeder: "請輸入密碼",
            type: "password",
            eye: {
              open: false
            }
          },
          rules: {
            required: true
          },
          messages: {
            required: "密碼不能為空"
          }
        }
      ]
    };
  },
  methods: {
    submitHandler(e, model) {
      e.preventDefault();
      //呼叫註冊業務
      loginApi(model.phoneValue, model.pwdValue).then(
        res => {
          if (res.data.code === 0) {
            //登陸成功，跳轉到個人中心
            //將token儲存起來
            localStorage.setItem('token',res.data.data)
            //跳轉頁面
            this.$router.push({ path: '/'})
          }else{
              const toast = this.$createToast({
              txt: "登陸失敗",
              type: "error",
              time: 1500
            });
            toast.show();
          }
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  padding: 50px 5% 0;
  text-align: center;
}
// 登入
.cube-btn {
  margin-top: 20px;
}
//註冊
.reg {
  display: inline-block;
  margin-top: 30px;
  font-size: 18px;
}
</style>