front-end/hdApp/src/admin/order/fill-form.vue

<template>
  <div class="app-content">
    <form @submit="formSubmit">
      <app-delivery-module ref="appDelivery" />
      <div class="app-footer">
        <button class="admin-button-com blue middle" formType="submit"> 提交 </button>
      </div>
    </form>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import AppDeliveryModule from "@/components/app-delivery";
const form = require("@/utils/formValidation.js");
import { getOrderShop } from "@/utils/config";
import { updateSheet } from "@/api/order";
export default {
  name: "fill-form",
  components: {
    AppDeliveryModule,
  },
  data() {
    return {
      form: {},
    };
  },
  computed: {
    ...mapGetters({ orderShop: "getOrderShop" }),
  },
  onLoad() {},
  methods: {
    init() {
      getOrderShop();
    },
    confirmFn() {
      let form = this.$refs.appDelivery.form ? this.$refs.appDelivery.form : {};
      let region = this.$refs.appDelivery.region
        ? this.$refs.appDelivery.region
        : {};
      updateSheet({
        id: this.option.id,
        ...this.form,
        ...form,
        ...region,
      }).then((res) => {
        uni.navigateBack({});
      });
    },
    // 表单验证
    formSubmit(e) {
      // 表单规则
      let rules = [
        {
          name: "receiveUserName",
          rule: ["required"],
          msg: ["请输入收花人姓名"],
        },
        {
          name: "receiveMobile",
          rule: ["required"],
          msg: ["请输入收花人手机号"],
        },
        {
          name: "fullAddress",
          rule: ["required"],
          msg: ["请输入地址"],
        }
      ];
      // 进行表单检查
      let formData = this.$refs.appDelivery.form
      let checkRes = form.validation(formData, rules);
      // 验证通过!
      if (!checkRes) {
        this.confirmFn();
      } else {
        this.$msg(checkRes);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// 匿名派送
.none-name-delivery {
  padding-left: 30upx;
  margin-top: 40upx;
  .none-name-text {
    margin-left: 14upx;
    color: $fontColor2;
  }
}
.app-footer {
  .admin-button-com {
    width: 90%;
  }
}
</style>