parking_h5_all/pages/invoiceModule/addInvoiceHeader/addInvoiceHeader.vue

<!-- 新增发票抬头 -->
<template>
  <view class="invoice-header">
    <view class="invoice-header-form">
      <u-form :model="form" ref="uForm" label-width="150">
        <u-form-item label="抬 头：" prop="type">
          <u-radio-group v-model="form.type">
            <u-radio :name="1">企业</u-radio>
            <u-radio :name="2">个人</u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="发票抬头：" prop="name">
          <u-input v-model="form.name" placeholder="请输入发票抬头" />
        </u-form-item>
        <u-form-item label="税 号：" prop="dutyNum" v-if="form.type === 1">
          <u-input v-model="form.dutyNum" placeholder="请输入税号" />
        </u-form-item>
      </u-form>
    </view>
    <view class="invoice-header-default">
      <u-form :model="form" ref="uForm1" label-width="150">
        <u-form-item label="默认抬头：">
          <view class="invoice-header-default-item">
            <text class="tips">每次开票都会默认填写该抬头信息系</text>
            <u-switch v-model="form.checked" size="40" />
          </view>
        </u-form-item>
      </u-form>
    </view>
    <view class="invoice-header-bottom">
      <u-button type="primary" @click="submitForm" :loading="loading">保存</u-button>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        type: 1,
        name: '',
        dutyNum: '',
        checked: false
      },
      rules: {
        name: [{ required: true, message: '请输入发票抬头', trigger: ['blur', 'change'] }],
        dutyNum: [{ required: true, message: '请输入税号', trigger: ['blur', 'change'] }]
      },
      loading: false
    };
  },
  onLoad(options) {
    const { id } = options;
    if (id) {
      uni.setNavigationBarTitle({
        title: '编辑抬头'
      });
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    /**
     * @description: 获取发票抬头信息
     * @param {*} id
     * @return {*}
     */
    async getInvoiceHeaderDetails(id) {
      const { code, data } = await this.$u.api.invoiceModuleApi.getInvoiceHeadDetailsApi({ id });
      if (code === 200) {
      }
    },
    /**
     * @description: 提交发票
     * @return {*}
     */
    submitForm() {
      this.$refs.uForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          if (this.form.id) {
            try {
              const { code } = await this.$u.api.invoiceModuleApi.updateInvoiceHeaderApi({ ...this.form });
              if (code === 200) {
                this.$refs.uToast.show({
                  title: '修改成功!',
                  type: 'success',
                  duration: 2000,
                  url: '/pages/invoiceModule/invoiceHeaderList/invoiceHeaderList'
                });
              }
            } catch (error) {
            } finally {
              this.loading = false;
            }
          } else {
            try {
              const { code } = await this.$u.api.invoiceModuleApi.addInvoiceHeaderApi({ ...this.form });
              if (code === 200) {
                this.$refs.uToast.show({
                  title: '保存成功!',
                  type: 'success',
                  duration: 2000,
                  url: '/pages/invoiceModule/invoiceHeaderList/invoiceHeaderList'
                });
              }
            } catch (error) {
            } finally {
              this.loading = false;
            }
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './addInvoiceHeader.scss';
</style>