接口参数需求

//发票类型
| invoice_type: | 1:普票 2:专票 |
//纳税方身份类型 当 invoice_type =1 必填
|tax_type:      |01-企业 02-机关事业 03-个人 04-其他|
//纳税方手机号 当 invoice_type =1 必填
| tax_phone     | 11位数字校验 |
//场所
| company_address:| invoice_type =2 必填 |
//固定电话
|company_tel:     | invoice_type =2 必填 |
//开户行
|opening_bank:    | invoice_type =2 必填 |
//银行账号
|bank_account:    |invoice_type =2 必填  |
//邮箱地址
|email:           |invoice_type =2 必填  |	 

其中有一个在invoice_type='1'并且纳税方身份类型为企业
或者invoice_type='2'时必填

使用vuelidate自定义必传项

注：当前页面的computed计算属性内部监听自定义变量的动态值的变化

computed: {
    // invoice_type == "1"时必传
    invoicebanner() {
      return this.invoice_type == "1";
    },
    // invoice_type == "2"时必传
    invoiceType() {
      return this.invoice_type == "2";
    },
    isDefaultAddress() {
      return this.is_default_address == "0";
    },
    //invoice_type='1'并且纳税方身份类型为企业或者invoice_type='2'时必填
    invoiceTaxpayer() {
      return (
        (this.invoice_type == "1" && this.tax_type == "01") ||
        this.invoice_type == "2"
      );
    },
    // 无论什么时候都是必填的 开票单位
    mustValidate() {
      return true;
    }

定义validations属性，将自定义必传项定义于每个控件中

 validations: {
     // 以下为invoice_type == "1"时必传
      tax_phone: {
         phone: phone,
         required: requiredIf("invoicebanner")
      },
     // invoice_type == "2"时必传
      company_address: {
         required: requiredIf("invoiceType")
      },
      //invoice_type='1'并且纳税方身份类型为企业或invoice_type='2'时必填
      // 纳税人识别号
      taxyaper_no: {
         required: requiredIf("invoiceTaxpayer")
      },
      // 无论什么时候都是必填的
      // 开票单位
      company: {
         required: requiredIf("mustValidate")
      },
}

页面中应用

<van-cell-group :border="false" :class="{ 'form-group--error': $v.phone.$dirty }">
      <van-field
          v-model="$v.phone.$model"
          rows="1"
          autosize
          label="收件人电话"
          type="textarea"
          input-align="right"
          :border="false"
          placeholder="请填写"
          clearable
          maxlength="11"
      />
      <div class="form-group__message" v-if="!$v.phone.required">请输入收件人联系方式</div>
      <div class="form-group__message" v-else-if="!$v.phone.phone">请填写正确的手机号码</div>
</van-cell-group>

调接口传参

 submitapply() {
      this.$v.$touch();
      if (this.$v.$invalid) {
        //校验不成功情况
        TOAST_SHOW_FAIL("请输入正确的信息");
      } else {
        API_invoiceInput({
          tax_phone: this.invoice_type == "1" ? this.tax_phone : "",
          company_address: this.invoice_type == "2" ? this.company_address : "",
          taxyaper_no: this.taxyaper_no,
          company: this.company,
        }).then(res=>{}).catch(err=>{})