update: 优化表单交互

src/modules/payment/components/InvoiceForm.vue

@@ -7,7 +7,7 @@
       </el-radio-group>
     </el-form-item> -->
     <el-form-item class="form-item-border" label="开票人类型" prop="taxpayer_type">
-      <el-radio-group v-model="form.taxpayer_type">
+      <el-radio-group v-model="form.taxpayer_type" @change="handleTypeChange">
         <el-radio label="2">企业</el-radio>
         <el-radio label="3">非营利性单位</el-radio>
         <el-radio label="1">个人</el-radio>
@@ -73,6 +73,21 @@
   </el-form>
 </template>
 <script>
+const defaultForm = {
+  invoice_type: '',
+  taxpayer_name: '',
+  taxpayer_identifier: '',
+  remarks: '',
+  recipient_email: '',
+  recipient_address: '',
+  recipient_name: '',
+  recipient_mobile: '',
+  follower: '',
+  taxpayer_address: '',
+  taxpayer_mobile: '',
+  taxpayer_bank_name: '',
+  taxpayer_bank_account: ''
+}
 export default {
   props: {
     history: {
@@ -84,23 +99,7 @@ export default {
   },
   data() {
     return {
-      form: {
-        // type: 1,
-        taxpayer_type: '2',
-        invoice_type: '',
-        taxpayer_name: '',
-        taxpayer_identifier: '',
-        remarks: '',
-        recipient_email: '',
-        recipient_address: '',
-        recipient_name: '',
-        recipient_mobile: '',
-        follower: '',
-        taxpayer_address: '',
-        taxpayer_mobile: '',
-        taxpayer_bank_name: '',
-        taxpayer_bank_account: ''
-      },
+      form: Object.assign({ taxpayer_type: '2' }, defaultForm),
       rules: {
         // type: { required: true, message: '请选择开票类型', trigger: 'change' },
         taxpayer_type: { required: true, message: '请选择开票人类型', trigger: 'change' },
@@ -127,6 +126,12 @@ export default {
     }
   },
   methods: {
+    handleTypeChange(val) {
+      this.form = Object.assign({ taxpayer_type: val }, defaultForm)
+      window.setTimeout(() => {
+        this.$refs.ruleForm.clearValidate()
+      }, 1)
+    },
     handleSubmit() {
       this.$refs.ruleForm.validate((valid) => {
         if (valid) {

src/modules/payment/views/h5/Invoice.vue

 <template>
   <div class="invoice-container">
-    <van-tabs v-model="form.taxpayer_type" type="card" color="#3276fc" sticky>
+    <van-tabs v-model="form.taxpayer_type" type="card" color="#3276fc" sticky @change="handleTabChange">
       <van-tab name="2" title="企业"></van-tab>
       <van-tab name="1" title="个人"></van-tab>
       <van-tab name="3" title="非营利性单位"></van-tab>
     </van-tabs>
-    <van-form :show-error="false" @submit="fetchCreateInvoice">
+    <van-form :show-error="false" ref="vanForm" @submit="fetchCreateInvoice">
       <div class="form-group">
         <h5>发票信息</h5>
         <van-field readonly clickable name="picker" :value="invoice_type_label" label="发票类型" placeholder="请选择发票类型" @click="showPicker = true" :rules="[{ required: true, message: '请选择发票类型', trigger: 'onChange' }]" required />
@@ -52,27 +52,28 @@
 <script>
 import HistoryInvoiceList from '../../components/HistoryInvoiceList.vue'
 import { createInvoice } from '../../api'
+import { Toast } from 'vant'
+const defaultForm = {
+  invoice_type: '',
+  taxpayer_name: '',
+  taxpayer_identifier: '',
+  remarks: '',
+  recipient_email: '',
+  recipient_address: '',
+  recipient_name: '',
+  recipient_mobile: '',
+  follower: '',
+  taxpayer_address: '',
+  taxpayer_mobile: '',
+  taxpayer_bank_name: '',
+  taxpayer_bank_account: ''
+}
 export default {
   components: { HistoryInvoiceList },
   data() {
     return {
       invoice_type_label: '',
-      form: {
-        taxpayer_type: '2',
-        invoice_type: '',
-        taxpayer_name: '',
-        taxpayer_identifier: '',
-        remarks: '',
-        recipient_email: '',
-        recipient_address: '',
-        recipient_name: '',
-        recipient_mobile: '',
-        follower: '',
-        taxpayer_address: '',
-        taxpayer_mobile: '',
-        taxpayer_bank_name: '',
-        taxpayer_bank_account: ''
-      },
+      form: Object.assign({ taxpayer_type: 2 }, defaultForm),
       showPicker: false,
       showPopup: false
     }
@@ -95,11 +96,26 @@ export default {
     }
   },
   methods: {
+    handleTabChange(val) {
+      this.form = Object.assign({ taxpayer_type: val }, defaultForm)
+      this.setInvoiceType()
+    },
     onConfirm(val) {
       this.invoice_type_label = val.label
       this.form.invoice_type = val.value
       this.showPicker = false
     },
+    setInvoiceType(val) {
+      const item = this.invoiceTypeList.find(item => item.value === val)
+      if (item) {
+        this.invoice_type_label = item.label
+      } else {
+        this.invoice_type_label = ''
+        window.setTimeout(() => {
+          this.$refs.vanForm.resetValidation()
+        }, 1)
+      }
+    },
     handleHistory() {
       this.showPopup = true
     },
@@ -108,8 +124,7 @@ export default {
         this.form[key] = val[key]
       })
       if (this.form.invoice_type) {
-        const item = this.invoiceTypeList.find(item => item.value === this.form.invoice_type)
-        this.invoice_type_label = item.label
+        this.setInvoiceType(this.form.invoice_type)
       }
       this.showPopup = false
     },
@@ -117,13 +132,15 @@ export default {
       const params = Object.assign({}, this.form)
       params.id = this.id
       createInvoice(params).then(res => {
+        console.log(res)
         if (res.code === 0) {
-          this.$message.success('开具发票成功')
+          Toast.success('开具发票成功')
         } else {
-          this.$message.error(res.message || '开具发票失败')
+          // this.$message.error(res.message || '开具发票失败')
+          Toast.fail(res.message || '开具发票失败')
         }
       }).catch(() => {
-        this.$message.error('开具发票失败')
+        Toast.fail('开具发票失败')
       })
     }
   }

src/modules/payment/views/pc/List.vue

@@ -6,7 +6,7 @@
       </template>
       <!-- 操作 -->
       <template v-slot:table-operate="{ row }">
-        <el-button v-if="['2', '6'].includes(row.invoice_status)" type="text" @click="handleInvoice(row)" size="mini">开具发票</el-button>
+        <el-button v-if="['1', '2', '6'].includes(row.invoice_status)" type="text" @click="handleInvoice(row)" size="mini">开具发票</el-button>
         <el-button type="text" @click="handleInvoiceQR(row)" size="mini">开票二维码</el-button>
       </template>
     </app-list>

src/utils/axios.js

@@ -32,9 +32,9 @@ httpRequest.interceptors.request.use(
 httpRequest.interceptors.response.use(
   function (response) {
     const { data } = response
-    if (data.code) {
-      return Promise.reject(data)
-    }
+    // if (data.code) {
+    //   return Promise.reject(data)
+    // }
     return data
   },
   function (error) {