更新代码样式以及表单切换清空

src/assets/css/base.css

@@ -3,17 +3,16 @@
   padding: 0;
 }
 .tableDetail {
-  border: 1px solid #ebeef6;
+  border: 1px solid #ebeef5;
   width: 100%;
-}
-.tableDetail tr {
-  border: 1px solid #ebeef6;
+  border-collapse: collapse;
 }
 .tableDetail th,
 .tableDetail td {
   width: 100px;
+  padding: 12px;
   color: #606266;
+  font-size: 12px;
   font-weight: 400;
   text-align: center;
-  border: 1px solid #ebeef6;
 }

src/modules/payment/components/History.vue

@@ -11,7 +11,7 @@
         @change="fetchHistory"
       />
     </div>
-    <ul v-if="list.length">
+    <ul v-if="list">
       <li class="invoice-item" v-for="(item, index) in list" :key="index" @click="handleSelect(item)">
         纳税人名称：{{ item.taxpayer_name }}
       </li>
@@ -26,19 +26,20 @@ export default {
     hasSearch: {
       type: Boolean,
       default: false
-    },
-    perPage: {
-      type: String,
-      default: ''
-    },
-    page: {
-      type: String,
-      default: ''
     }
+    // perPage: {
+    //   type: String,
+    //   default: ''
+    // },
+    // page: {
+    //   type: String,
+    //   default: ''
+    // }
   },
   data() {
     return {
-      taxpayer_name: ''
+      taxpayer_name: '',
+      list: []
     }
   },
   created() {
@@ -47,9 +48,7 @@ export default {
   methods: {
     fetchHistory() {
       const params = {
-        taxpayer_name: this.taxpayer_name || undefined,
-        'per-page': this.perPage,
-        page: this.page
+        taxpayer_name: this.taxpayer_name || undefined
       }
       historyInfo(params).then(res => {
         if (res.code === 0) {

src/modules/payment/components/Ticket.vue

 <!-- 支付详情-发票表格 -->
 <template>
-  <div class="ticketInfo" v-if="invioceList.length">
+  <div class="ticketInfo" v-if="invioceList">
     <table border="1" cellspacing="0" class="tableDetail" v-for="(item, index) in invioceList" :key="index">
       <tr>
         <th colspan="10" style="float: left">发票{{ index + 1 }}</th>
@@ -91,6 +91,7 @@ export default {
   },
   mounted() {
     this.invioceList = this.dealList.invoices_list
+    console.log(this.invioceList)
   }
 }
 </script>

src/modules/payment/components/TicketForm.vue

@@ -28,26 +28,28 @@
         <td>{{ row.final_payment_time }}</td>
       </tr>
     </table>
-    <el-form label-width="120px" ref="ruleForm" :model="form" :rules="rules">
-      <div class="type" style="border: 1px solid #ccc; margin-bottom: 10px">
-        <el-form-item label="开票类型" prop="invoice_color_type">
-          <el-radio-group v-model="form.invoice_color_type">
+    <el-form label-width="120px" :model="form" :rules="rules" style="margin-top: 20px">
+      <div class="type" style="border: 1px solid #ebeef5; margin-bottom: 10px">
+        <el-form-item label="开票类型" prop="invoice_color_type" style="padding-top: 25px">
+          <el-radio-group v-model="form.invoice_color_type" class="group">
             <el-radio :label="1" disabled>红字发票</el-radio>
             <el-radio :label="2">蓝字发票</el-radio>
           </el-radio-group>
         </el-form-item>
       </div>
-      <div class="type" style="border: 1px solid #ccc; margin-bottom: 10px">
-        <el-form-item label="抬头类型" prop="taxpayer_type">
+      <div class="type" style="border: 1px solid #ebeef5; margin-bottom: 10px">
+        <el-form-item label="抬头类型" prop="taxpayer_type" style="padding-top: 25px">
           <!-- change事件 -->
-          <el-radio-group v-model="form.taxpayer_type">
+          <el-radio-group v-model="form.taxpayer_type" class="group">
             <el-radio :label="1">个人</el-radio>
             <el-radio :label="2">企业</el-radio>
             <el-radio :label="3">非营利单位</el-radio>
           </el-radio-group>
         </el-form-item>
       </div>
-      <div class="type" style="border: 1px solid #ccc; margin-bottom: 10px; padding-right: 50px">
+    </el-form>
+    <el-form label-width="120px" ref="ruleForm" :model="form" :rules="rules" style="margin-top: 20px">
+      <div class="type" style="border: 1px solid #ebeef5; margin-bottom: 10px; padding-right: 50px">
         <el-form-item label="发票信息" label-width="100px" class="title">
           <el-button type="text" style="float: right" @click="$emit('history')">历史开票信息</el-button>
         </el-form-item>
@@ -83,7 +85,7 @@
           </el-form-item>
         </div>
         <el-form-item label="备注" prop="taxpayer_remark">
-          <el-input v-model="form.taxpayer_remark"></el-input>
+          <el-input v-model="form.taxpayer_remark" disabled></el-input>
         </el-form-item>
         <el-form-item label="收票信息">
           <span>请填写邮箱地址，方便接收电子发票</span>
@@ -99,13 +101,13 @@
           <el-input v-model="form.recipient_mobile"></el-input>
         </el-form-item>
         <el-form-item label="票据跟进人" prop="sales_rep_user_id_name">
-          <el-input v-model="form.sales_rep_user_id_name"></el-input>
+          <el-input v-model="form.sales_rep_user_id_name" disabled></el-input>
         </el-form-item>
-      </div>
-      <el-form-item>
+        <el-form-item class="btn">
           <el-button size="mini" @click="$emit('close')">取消</el-button>
           <el-button type="primary" @click="onSubmit" size="mini">提交</el-button>
         </el-form-item>
+      </div>
     </el-form>
   </div>
 </template>
@@ -161,7 +163,6 @@ export default {
         taxpayer_mobile: [{ message: '请输入电话', required: true, trigger: 'blur' }],
         taxpayer_bank_name: [{ message: '请输入开户行', required: true, trigger: 'blur' }],
         taxpayer_bank_account: [{ message: '请输入银行账号', required: true, trigger: 'blur' }],
-        // taxpayer_remark: [{ message: '请输入备注', required: true, trigger: 'blur' }],
         recipient_address: [{ message: '请输入邮箱地址', required: true, trigger: 'blur' }],
         recipient_name: [{ message: '请输入收件人名称', required: true, trigger: 'blur' }],
         recipient_mobile: [{ message: '请输入收件人手机号', required: true, trigger: 'blur' }],
@@ -176,6 +177,7 @@ export default {
     'form.taxpayer_type': function (oldVal, val) {
       if (val !== oldVal) {
         this.form.invoice_type = ''
+        this.$refs.ruleForm.resetFields()
       }
     },
     history: {
@@ -216,4 +218,10 @@ export default {
 .table {
   margin-bottom: 20px;
 }
+.group {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding-top: 10px;
+}
 </style>

src/modules/payment/views/Detail.vue

@@ -28,7 +28,7 @@
         >业务取消足额支付</el-button
       >
     </template>
-    <app-card title="订单信息">
+    <app-card title="订单信息" style="margin-top: 20px">
       <Order :dealList="dealList" />
     </app-card>
     <app-card title="学员信息">
@@ -139,4 +139,3 @@ export default {
   }
 }
 </script>
-

src/modules/payment/views/List.vue

@@ -41,7 +41,7 @@
         <el-switch
           v-model="row.can_add_invoice"
           active-value="1"
-          inactive-value="0"
+          inactive-value="2"
           @change="handleStatus(row)"
         ></el-switch>
       </template>
@@ -85,7 +85,7 @@
         center
         :modal="false"
       >
-        <History v-if="historyVisible" :hasSearch="true" @select="handleSelect" :per-page="per_page" :page="page" />
+        <History v-if="historyVisible" :hasSearch="true" @select="handleSelect" />
       </el-dialog>
     </el-dialog>
     <!-- 开票二维码 -->