front-end/ghsApp/src/pagesPurchase/suppAdd.vue

<template>
  <div class="app-content">
      <form @submit="formSubmit" @reset="formReset">
        <!-- 名称 -->
        <div class="module-com input-line-wrap">
          <tui-list-cell class="line-cell" :hover="false">
            <div class="tui-title required">名称</div>
            <input
              v-model="form.name"
              class="tui-input"
              placeholder="请填写名称"
              maxlength="50"
              type="text"
              name="username"
            />
          </tui-list-cell>
        
        <!-- 手机号 -->
        <tui-list-cell class="line-cell" :hover="false">
            <div class="tui-title required">手机号</div>
            <input
              v-model="form.mobile"
              class="tui-input"
              placeholder="请填写手机号"
              maxlength="50"
              type="number"
              name="phone"
            />
          </tui-list-cell>
          <!-- 确认手机号 -->
        <tui-list-cell class="line-cell" :hover="false">
            <div class="tui-title required">确认手机号</div>
            <input
              v-model="form.confirmMobile"
              class="tui-input"
              placeholder="请确认手机号"
              maxlength="50"
              type="number"
              name="requirePhone"
            />
          </tui-list-cell>
          <!-- 地址 -->
        <tui-list-cell class="line-cell" :hover="false">
            <div class="tui-title">地址</div>
            <input
              v-model="form.address"
              class="tui-input"
              placeholder="选填"
              maxlength="50"
              type="text"
            />
          </tui-list-cell>
        </div>
        
        <!-- 提交 -->
        <div class="confirm-btn">
          <button class="admin-button-com big blue" formType="submit">确认</button>
        </div>
      </form>
  </div>
</template>

<script>
import TuiListCell from "@/components/plugin/list-cell";
import { ghsAdd } from "@/api/ghs"
const form = require("@/utils/formValidation.js");
export default {
  components: {
    TuiListCell,
  },
  data() {
    return {
      form: {
        mobile: '',
        confirmMobile: '',
        name: '',
        address: ''
      }
    }
  },
  methods: {
    // 表单验证
    formSubmit(e) {
      // 表单规则
      let rules = [
        {
          name: "username",
          rule: ["required"],
          msg: ["请填写名称"]
        },
        {
          name: "phone",
          rule: ["required"],
          msg: ["请填写手机号"]
        },
        {
          name: "requirePhone",
          rule: ["required"],
          msg: ["请确认手机号"]
        }
      ];
      // 进行表单检查
      let formData = e.detail.value;
      let checkRes = form.validation(formData, rules);
      // 验证通过!
      if (!checkRes) {
        this.confirmFn();
      } else {
        this.$msg(checkRes);
      }
    },
    confirmFn() {
      uni.showLoading({
        title:"加载中..."
      })
      ghsAdd(this.form).then(res => {
							uni.setStorageSync('newGhs', res.data);
        uni.hideLoading()
        setTimeout(() => {
          this.$util.pageTo(1);
        }, 1000);
      }).catch(err => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.app-content {
  min-height: calc(100vh - 20px);
  padding-top: 20px;
}
.prompt-text {
  color: $fontColor3;
  padding-left: 30px;
  margin-bottom: 30px;
}
.module-com {
  margin-bottom: 20px;
  .member-wrap {
    .member-det {
      font-size: 24px;
      margin-left: 20px;
    }
  }
  .remark-wrap {
    align-items: flex-start;
    .remark {
      height: 240px;
    }
  }
}
// 按钮
.confirm-btn {
  width: calc(100% - 60px);
  margin: 60px 30px 20px;
  .admin-button-com {
    width: 100%;
  }
}
</style>