addTitle.vue 11.5 KB
<template>
    <view>
        <uni-section title="抬头类型" type="line">
            <view class="uni-list">
                <radio-group @change="radioChange">
                    <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
                        <view>
                            <radio :value="item.value" :checked="index === current"/>
                        </view>
                        <view style="flex: 1;">{{item.name}}</view>
                    </label>
                </radio-group>
            </view>
        </uni-section>


        <!--个人-->
        <uni-section title="个人发票详情" type="line" v-if="current==0">
            <view class="paddinglr30 margin-top-30">
                <!-- 基础用法,不包含校验规则 -->
                <uni-forms ref="baseFormPerson" :rules="rulesPerson" :modelValue="baseFormDataPerson">
                    <uni-forms-item label="发票抬头" name="invoicetitle" required>
                        <uni-easyinput v-model="baseFormDataPerson.invoicetitle" placeholder="请输入发票抬头"/>
                    </uni-forms-item>

                    <uni-forms-item label="手机号" name="telphone" required>
                        <uni-easyinput v-model="baseFormDataPerson.telphone" placeholder="请输入手机号"/>
                    </uni-forms-item>

                    <uni-forms-item label="电子邮箱" name="email" required>
                        <uni-easyinput v-model="baseFormDataPerson.email" placeholder="请输入电子邮箱"/>
                    </uni-forms-item>

                    <uni-forms-item label="备注信息">
                        <uni-easyinput type="textarea" v-model="baseFormDataPerson.remark" placeholder="备注"/>
                    </uni-forms-item>
                </uni-forms>

            </view>
        </uni-section>

        <!--企业-->
        <uni-section title="发票详情" type="line" v-if="current==1">
            <view class="paddinglr30 margin-top-30">
                <!-- 基础用法,不包含校验规则 -->
                <uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData">
                    <uni-forms-item label="发票抬头" name="invoicetitle" required>
                        <uni-easyinput v-model="baseFormData.invoicetitle" placeholder="请输入发票抬头"/>
                    </uni-forms-item>
                    <uni-forms-item label="纳税人识别号" name="userId" required>
                        <uni-easyinput v-model="baseFormData.userId" placeholder="请输入纳税人识别号"/>
                    </uni-forms-item>
                    <uni-forms-item label="注册地址">
                        <uni-easyinput v-model="baseFormData.address" placeholder="请输入注册地址"/>
                    </uni-forms-item>
                    <uni-forms-item label="手机号" name="telphone" required>
                        <uni-easyinput v-model="baseFormData.telphone" placeholder="请输入手机号"/>
                    </uni-forms-item>
                    <uni-forms-item label="开户行">
                        <uni-easyinput v-model="baseFormData.bank" placeholder="请输入开户行"/>
                    </uni-forms-item>
                    <uni-forms-item label="开户账号">
                        <uni-easyinput v-model="baseFormData.bankAccount" placeholder="请输入开户账号"/>
                    </uni-forms-item>
                    <uni-forms-item label="电子邮箱" name="email" required>
                        <uni-easyinput v-model="baseFormData.email" placeholder="请输入电子邮箱"/>
                    </uni-forms-item>
                    <uni-forms-item label="备注">
                        <uni-easyinput type="textarea" v-model="baseFormData.remark" placeholder="备注"/>
                    </uni-forms-item>
                    <!--<uni-section title="纸质票邮寄方式" type="line">-->
                        <!--<uni-forms-item label="邮寄地址" name="emsAdress" required="">-->
                            <!--<uni-easyinput v-model="baseFormData.emsAdress" placeholder="请输入邮寄地址"/>-->
                        <!--</uni-forms-item>-->
                        <!--<uni-forms-item label="联系人">-->
                            <!--<uni-easyinput v-model="baseFormData.emsUsername" placeholder="请输入联系人"/>-->
                        <!--</uni-forms-item>-->
                        <!--<uni-forms-item label="联系方式">-->
                            <!--<uni-easyinput v-model="baseFormData.emsTel" placeholder="请输入联系方式"/>-->
                        <!--</uni-forms-item>-->
                    <!--</uni-section>-->
                </uni-forms>

            </view>
        </uni-section>
        <view class="paddinglr30 margin-top-30 uni-common-mb">
            <button type="primary" @click="submit()">确认</button>
        </view>
    </view>
</template>

<script>
export default {
  data() {
    return {
      items: [{
        value: '1',
        name: '个人'
      },
        {
          value: '2',
          name: '企业'
        },
        // {
        //   value: '3',
        //   name: '非企业性单位'
        // },
      ],
      current: 0,
      baseFormDataPerson: {
        invoicetitle: '',
        telphone: '',
        email: '',
        remark: '',
      },
      baseFormData: {
        invoicetitle: '',
        userId: '',
        address: '',
        telphone: '',
        bank: '',
        bankAccount: '',
        email: '',
        remark: '',
        // emsAdress: '',
        // emsUsername: '',
        // emsTel: '',
      },
      // 校验规则
      rulesPerson: {
        invoicetitle: {
          rules: [{
            required: true,
            errorMessage: '发票抬头不能为空'
          }]
        },

        telphone: {
          rules: [{
            required: true,
            errorMessage: '手机号不能为空'
          },]
        },
        email: {
          rules: [{
            required: true,
            errorMessage: '电子邮箱不能为空'
          },]
        },

      },
      // 校验规则
      rules: {
        invoicetitle: {
          rules: [{
            required: true,
            errorMessage: '发票抬头不能为空'
          }]
        },
        telphone: {
          rules: [{
            required: true,
            errorMessage: '手机号不能为空'
          },]
        },
        userId: {
          rules: [{
            required: true,
            errorMessage: '纳税人识别号不能为空'
          }]
        },
        email: {
          rules: [{
            required: true,
            errorMessage: '电子邮箱不能为空'
          },]
        },
        emsAdress: {
          rules: [{
            required: true,
            errorMessage: '邮寄地址不能为空'
          },]
        },
      },
    };
  },
  onLoad() {
  },
  onReady() {
    // 设置自定义表单校验规则,必须在节点渲染完毕后执行
    // this.$refs.baseForm.setRules(this.rules)
    // this.$refs.baseFormPerson.setRules(this.rulesPerson)
  },
  methods: {
    radioChange: function (evt) {
      for (let i = 0; i < this.items.length; i++) {
        if (this.items[i].value === evt.detail.value) {
          this.current = i;
          break;
        }
      }
      console.log(this.current)
    },
    submit() {
      console.log()
      if(this.current==0){

        if (this.baseFormDataPerson.phone) {
          const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
          if (!reg.test(this.baseFormDataPerson.phone)) {
            uni.showToast({
              icon: 'none',
              title: `手机号输入不正确`
            })
            return
          }
        }

        this.$refs['baseFormPerson'].validate().then(res => {
          console.log('success', res);

          let insertCustInvoiceInfo = this.$common.insertCustInvoiceInfo;
          let jsondata = {
            name: this.baseFormDataPerson.invoicetitle,
            email: this.baseFormDataPerson.email,
            remark: this.baseFormDataPerson.remark,
            isDefault: '1',// 是否默认客户抬头信息,1表示是默认抬头信息,0不是默认抬头信息(默认0)
            invoiceType: '0', // 发票类型(个人、公司),0 表示个人,1表示公司
            phone: this.baseFormDataPerson.telphone,
          };
          uni.request({
            url: insertCustInvoiceInfo,
            data: JSON.stringify(this.$common.requestSign(jsondata)),
            dataType: "json",
            method: "POST",
            success: (res) => {
              console.log(res)
              if (res.data.code == 0) {
                uni.showToast({
                  icon:'none',
                  title: `新增个人发票抬头成功`
                })
                uni.navigateBack({
                  delta:1,//返回层数,2则上上页
                })
              }else{
                uni.showToast({
                  icon:'none',
                  title: res.data.message
                })
              }
              if(res.code=='1001'){
                uni.showToast({
                  icon:'none',
                  title: res.message
                })
              }
            }
          })
        }).catch(err => {
          console.log('err', err);
        })
      }
      if(this.current==1){

        if (this.baseFormData.telphone) {
          const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
          if (!reg.test(this.baseFormData.telphone)) {
            uni.showToast({
              icon: 'none',
              title: `手机号输入不正确`
            })
            return
          }
        }

        this.$refs['baseForm'].validate().then(res => {
          console.log('success', res);
          let insertCustInvoiceInfo = this.$common.insertCustInvoiceInfo;
          let jsondata = {
            name: this.baseFormData.invoicetitle,
            email: this.baseFormData.email,
            remark: this.baseFormData.remark,
            isDefault: '1',// 是否默认客户抬头信息,1表示是默认抬头信息,0不是默认抬头信息(默认0)
            invoiceType: '1', // 发票类型(个人、公司),0 表示个人,1表示公司
            bankName: this.baseFormData.bank,
            taxid: this.baseFormData.userId,
            cardNo: this.baseFormData.bankAccount,
            address: this.baseFormData.address,
            phone: this.baseFormData.telphone,
          };
          uni.request({
            url: insertCustInvoiceInfo,
            data: JSON.stringify(this.$common.requestSign(jsondata)),
            dataType: "json",
            method: "POST",
            success: (res) => {
              console.log(res)
              if (res.data.code == 0) {
                uni.showToast({
                  icon:'none',
                  title: `新增企业发票抬头成功`
                })
                uni.navigateBack({
                  delta:1,//返回层数,2则上上页
                })
              }else{
                uni.showToast({
                  icon:'none',
                  title: res.data.message
                })
              }
              if(res.code=='1001'){
                uni.showToast({
                  icon:'none',
                  title: res.message
                })
              }
            }
          })
        }).catch(err => {
          console.log('err', err);
        })
      }

    }
  },
}
</script>

<style lang="scss">

</style>