parking_h5_all/pages/invoiceModule/addInvoiceHeader/addInvoiceHeader.vue

<!-- 新增发票抬头 -->
<template>
  <view class="invoice-header u-skeleton">
    <!-- 导航栏 -->
    <u-navbar
      title-color="#fff"
      :custom-back="customBack"
      :border-bottom="false"
      back-icon-color="#CCE8FF"
      :background="{ background: '#008CFF' }"
      :title="navigationBarTitle"
      class="invoice-navbar"
    >
      <!-- <view slot="right" class="invoice-header-right" v-if="form.id">
        <u-icon name="trash-fill" size="40" color="#fa3534" @click="handleDelete"></u-icon>
      </view> -->
    </u-navbar>
    <view class="invoice-header-form">
      <u-form :model="form" ref="uForm" label-width="220" label-align="right">
        <u-form-item label="抬 头：" prop="invoHeadType" required class="u-skeleton-fillet">
          <u-radio-group v-model="form.invoHeadType" :disabled="!!form.id">
            <u-radio :name="1">企业</u-radio>
            <u-radio :name="2">个人</u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="发票抬头：" prop="invoName" required class="u-skeleton-fillet">
          <u-input v-model="form.invoName" placeholder="请输入发票抬头" />
        </u-form-item>
        <u-form-item label="税 号：" prop="invoCode" required class="u-skeleton-fillet" v-if="form.invoHeadType === 1">
          <u-input v-model="form.invoCode" placeholder="请输入税号" />
        </u-form-item>
      </u-form>
    </view>
    <view class="invoice-header-default">
      <u-form :model="form" ref="uForm1" label-width="220" label-align="right">
        <u-form-item label="电子邮箱(选填)：" prop="invoMail" class="u-skeleton-fillet">
          <u-input v-model="form.invoMail" placeholder="请输入电子邮箱" />
        </u-form-item>
        <u-form-item label="手机号码(选填)：" prop="invoPhone" class="u-skeleton-fillet">
          <u-input v-model="form.invoPhone" placeholder="请输入手机号码" />
        </u-form-item>
        <u-form-item label="默认抬头：" prop="invoStatus" class="u-skeleton-fillet">
          <view class="invoice-header-default-item">
            <text class="tips">每次开票默认抬头信息</text>
            <u-switch v-model="form.invoStatus" 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-skeleton :loading="skeletonLoading" :animation="true" bgColor="#FFF"></u-skeleton>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        invoHeadType: 1,
        invoName: '',
        invoCode: '',
        invoPhone: '',
        invoMail: '',
        invoStatus: false,
        id: undefined
      },
      rules: {
        invoName: [{ required: true, message: '请输入发票抬头', trigger: ['blur', 'change'] }],
        invoCode: [{ required: true, message: '请输入税号', trigger: ['blur', 'change'] }]
      },
      loading: false,
      skeletonLoading: false,
      navigationBarTitle: '新增抬头'
    };
  },
  onLoad(options) {
    const { id } = options;
    this.navigationBarTitle = '新增抬头';
    if (id) {
      this.navigationBarTitle = '编辑抬头';
      this.getInvoiceHeaderDetails(id);
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    customBack() {
      uni.navigateBack();
    },
    addInvoice() {},
    /**
     * @description: 获取发票抬头信息
     * @param {*} id
     * @return {*}
     */
    async getInvoiceHeaderDetails(id) {
      try {
        this.skeletonLoading = true;
        const { code, data } = await this.$u.api.invoiceModuleApi.getInvoiceHeadDetailsApi({ id });
        if (code === 200) {
          this.form.id = data.id;
          this.form.invoHeadType = data.invoHeadType;
          this.form.invoName = data.invoName;
          this.form.invoCode = data.invoCode;
          this.form.invoPhone = data.invoPhone;
          this.form.invoMail = data.invoMail;
          this.form.invoStatus = data.invoStatus === 1 ? true : false;
        }
      } catch (error) {
      } finally {
        this.skeletonLoading = false;
      }
    },
    handleDelete() {
      uni.showModal({
        title: '提示',
        content: '你确认要删除该条发票抬头吗?',
        success: async (res) => {
          if (res.confirm) {
            try {
              this.loading = true;
              const { id } = this.form;
              const { code } = await this.$u.api.invoiceModuleApi.deleteInvoiceHeaderApi({ id });
              if (code === 200) {
                this.$refs.uToast.show({
                  title: '删除成功!',
                  type: 'success',
                  duration: 2000
                });
                setTimeout(() => {
                  this.loading = false;
                  this.$u.route({
                    url: '/pages/invoiceModule/invoiceHeaderList/invoiceHeaderList'
                  });
                }, 2000);
              }
            } catch (error) {
              this.loading = false;
            }
          }
        }
      });
    },
    /**
     * @description: 提交发票
     * @return {*}
     */
    submitForm() {
      this.$refs.uForm.validate(async (valid) => {
        if (!valid) return;
        this.loading = true;
        uni.showLoading({
          title: '提交中...'
        });
        const form = { ...this.form };
        form.invoStatus = form.invoStatus ? 1 : 0;
        if (form.invoHeadType === 2) {
          form.invoCode = null;
        }
        try {
          let response;
          if (form.id) {
            response = await this.$u.api.invoiceModuleApi.updateInvoiceHeaderApi({ ...form });
            this.$refs.uToast.show({
              title: '修改成功!',
              type: 'success',
              duration: 2000
            });
          } else {
            response = await this.$u.api.invoiceModuleApi.addInvoiceHeaderApi({ ...form });
            this.$refs.uToast.show({
              title: '保存成功!',
              type: 'success',
              duration: 2000
            });
          }
          if (response.code === 200) {
            setTimeout(() => {
              uni.hideLoading();
              this.$u.route({
                url: '/pages/invoiceModule/invoiceHeaderList/invoiceHeaderList',
                type: 'redirect'
              });
            }, 2000);
          }
        } catch (error) {
          console.error(error);
        } finally {
          uni.hideLoading()
          this.loading = false;
        }
      });
    }
  }
};
</script>

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