parking_h5_all/pages/invoiceModule/addInvoice/addInvoice.vue

<template>
  <view class="invoice">
    <view class="invoice-form">
      <u-form :model="form" ref="uForm" label-width="150">
        <u-form-item label="抬头类型">
          <u-radio-group v-model="form.type">
            <u-radio name="company">企业</u-radio>
            <u-radio name="personal">个人/机关事业单位</u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="公司名称">
          <u-input v-model="form.companyName" placeholder="请输入公司名称" />
          <u-icon slot="right" name="list-dot" size="40" color="#606266" @click="moreCompany" />
        </u-form-item>
        <u-form-item label="公司税号">
          <u-input v-model="form.dutyNum" placeholder="" disabled />
        </u-form-item>
        <u-form-item label="备注">
          <u-input v-model="form.remark" placeholder="请输入备注" />
        </u-form-item>
        <u-form-item label="发票金额"> ￥{{ form.price }}元 </u-form-item>
      </u-form>
    </view>
    <view class="invoice-tips"> 注：本公司目前只支持开具增值税普通发票 </view>
    <view class="invoice-submit">
      <u-button type="primary">提交</u-button>
    </view>
    <!-- 公司弹框 -->
    <u-popup v-model="companyPop.show" mode="bottom" :closeable="true" height="50vh">
      <view class="popup">
        <view class="popup-list" v-if="companyPop.list.length">
          <u-radio-group class="popup-list-group" v-model="form.companyName" :wrap="true">
            <u-radio
              class="popup-list-item"
              v-for="(item, index) in companyPop.list"
              :key="index"
              :name="item.name"
              @change="companyRadioClick(item)"
            >
              {{ item.name }}
            </u-radio>
          </u-radio-group>
        </view>
        <view class="popup-list" v-else>
          <view class="popup-list-item">暂未添加发票开头</view>
        </view>
        <view class="popup-bottom">
          <u-button type="info" @click="addInvoiceHeader">添加常用发票开头</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        type: 'company',
        companyName: '',
        dutyNum: '',
        remark: '',
        price: 100
      },
      companyPop: {
        show: false,
        list: []
      }
    };
  },
  methods: {
    /**
     * @description: 选择企业
     * @return {*}
     */
    moreCompany() {
      this.companyPop.show = true;
    },
    companyRadioClick(item) {
      this.companyPop.show = false;
      this.form.companyName = item.name;
      this.form.dutyNum = item.no;
    },
    addInvoiceHeader() {
      this.$u.route({
        url: '/pages/invoiceModule/invoiceHeaderList/invoiceHeaderList'
      })
    }
  }
};
</script>

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