挂账添加

src/views/home/data_creditDetail.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/valid-v-bind -->
 <template>
   <div class="app-container">
     <div class="head-container">
@@ -26,11 +27,8 @@
         </el-form-item>
         <template>
           <el-form-item>
-            <el-input v-model="query.proName" placeholder="商品名称" />
-          </el-form-item>
-          <el-form-item>
-            <el-select v-model="query.cateId" placeholder="全部状态" style="width: 140px;">
-              <el-option v-for="item in categorys" :key="item.id" :label="item.name" :value="item.id" />
+            <el-select v-model="query.status" placeholder="全部状态" style="width: 140px;">
+              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </el-form-item>
         </template>
@@ -42,49 +40,53 @@
     </div>
     <div class="head-container">
       <div class="collect_wrap">
-        <div v-for="item in payCountList" :key="item.id" class="item">
-          <div class="icon_wrap" style="--bg-color:#C978EE">
-            <i class="icon" :class="item.icon" />
+        <div v-for="(item,index) in payCountList" :key="index" class="item">
+          <div class="icon_wrap" :style="{ backgroundColor: `rgba(${item.color},0.5)` }">
+            <div />
+            <i class="icon" :class="item.icon" :style="{ color: `rgba(${item.color},1)` }" />
           </div>
           <div class="info">
             <div class="m">
-              <template v-if="item.isAmount == 1">￥</template>
-              {{ item.payAmount }}
+              ￥{{ item.amount }}
             </div>
-            <div class="t">{{ item.payType }}</div>
+            <div class="t">{{ item.label }}{{ index == 0 ? item.count+'笔' : '' }}</div>
           </div>
         </div>
       </div>
     </div>
     <div class="head-container">
       <el-table v-loading="tableData.loading" :data="tableData.data">
-        <el-table-column label="创建日期" prop="name" />
-        <el-table-column label="订单号" prop="name" />
-        <el-table-column label="应付金额" prop="salesAmount">
-          <template v-slot="scope"> ￥{{ scope.row.salesAmount }} </template>
+        <el-table-column label="创建日期" prop="createTime" />
+        <el-table-column label="订单号" prop="orderId" />
+        <el-table-column label="应付金额" prop="payAmount">
+          <template v-slot="scope"> {{ '￥'+scope.row.payAmount || '-' }} </template>
         </el-table-column>
-        <el-table-column label="已付款金额" prop="salesAmount">
-          <template v-slot="scope"> ￥{{ scope.row.salesAmount }} </template>
+        <el-table-column label="已付款金额" prop="paidAmount">
+          <template v-slot="scope"> {{ '￥'+scope.row.paidAmount || '-' }} </template>
         </el-table-column>
-        <el-table-column label="待付款金额" prop="salesAmount">
-          <template v-slot="scope"> ￥{{ scope.row.salesAmount }} </template>
+        <el-table-column label="待付款金额" prop="unpaidAmount">
+          <template v-slot="scope"> {{ '￥'+scope.row.unpaidAmount || '-' }} </template>
         </el-table-column>
         <el-table-column label="状态" prop="salesAmount">
           <template v-slot="scope">
-            ￥{{ scope.row.salesAmount }}
+            {{
+              scope.row.status == 'unpaid' ? '未付款' :
+              scope.row.status == 'partial' ? '部分支付' :
+              scope.row.status == 'paid' ? '已付款' : ''
+            }}
           </template>
         </el-table-column>
-        <el-table-column label="付款方式" prop="salesAmount">
-          <template v-slot="scope"> ￥{{ scope.row.salesAmount }} </template>
+        <el-table-column label="付款方式" prop="lastPaymentMethod">
+          <template v-slot="scope"> {{ scope.row.lastPaymentMethod }} </template>
         </el-table-column>
-        <el-table-column label="备注" prop="salesAmount">
-          <template v-slot="scope"> ￥{{ scope.row.salesAmount }} </template>
+        <el-table-column label="备注" prop="remark">
+          <template v-slot="scope"> {{ scope.row.remark }} </template>
         </el-table-column>
-        <el-table-column label="付款时间" prop="name" />
-        <el-table-column label="操作" width="350">
+        <el-table-column label="付款时间" prop="lastPaymentTime" />
+        <el-table-column label="操作" width="200">
           <template v-slot="scope">
-            <el-button type="text" icon="el-icon-edit" @click="addCredit(scope.row,'repayment')">付款</el-button>
-            <el-button type="text" icon="el-icon-edit" @click="addCredit(scope.row,'edit')">账单付款记录</el-button>
+            <el-button type="text" :style="{ color: repaymentMethod == 'total' ? '#999' :''}" @click="openDialog(scope.row,'payment')">付款</el-button>
+            <el-button type="text" @click="openDialog(scope.row,'paymentRecord')">账单付款记录</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -92,50 +94,71 @@
     <div class="head-container">
       <el-pagination
         :total="tableData.total"
-        :current-page="tableData.page"
-        :page-size="tableData.size"
+        :current-page="query.page"
+        :page-size="query.size"
         layout="total, sizes, prev, pager, next, jumper"
         @current-change="paginationChange"
         @size-change="sizeChange"
       />
     </div>
+
+    <!-- 还款 -->
+    <creditRepayment ref="creditRepayment" @success="resetHandle" />
+
+    <!-- 还款记录 -->
+    <creditRepaymentRecord ref="creditRepaymentRecord" @success="resetHandle" />
   </div>
 </template>
 
 <script>
-import { daycount, summaryday } from '@/api/home'
-import { tbShopCategoryGet } from '@/api/shop'
+import creditRepayment from './components/credit_repayment.vue'
+import creditRepaymentRecord from './components/credit_RePaymentRecord.vue'
+import { creditBuyerOrderList, creditBuyerOrderSummary } from '@/api/credit'
 import dayjs from 'dayjs'
 
 export default {
+  components: { creditRepayment, creditRepaymentRecord },
   filters: {
   },
   data() {
     return {
       timeValue: '',
       resetQuery: null,
-      categorys: [],
+      repaymentMethod: '',
+      statusList: [
+        { label: '未付款', value: 'unpaid' },
+        { label: '部分支付', value: 'partial' },
+        { label: '已付款', value: 'paid' }
+      ],
       query: {
+        page: 1,
+        size: 10,
+        creditBuyerId: '',
         createdAt: [],
-        proName: '',
-        cateId: ''
+        status: ''
       },
       tableData: {
         data: [],
-        page: 1,
-        size: 10,
         loading: false,
         total: 0
       },
       downloadLoading: false,
-      payCountList: '',
+      payCountList: [
+        { label: '总交易', icon: 'el-icon-info', color: '201, 120, 236', amount: 0, count: 0 },
+        { label: '已支付金额', icon: 'el-icon-success', color: '70, 181, 24', amount: 0 },
+        { label: '待支付金额', icon: 'el-icon-circle-plus', color: '248, 110, 16', amount: 0 },
+        { label: '待支付笔数', icon: 'el-icon-warning', color: '254, 180, 38', amount: 0 }
+      ],
       payCountTotal: 0
     }
   },
   mounted() {
+    this.query.creditBuyerId = this.$route.query.id
+    this.repaymentMethod = this.$route.query.repaymentMethod
     this.resetQuery = { ...this.query }
+    // repaymentMethod
     this.getTableData()
-    this.tbShopCategoryGet()
+    // this.tbShopCategoryGet()
   },
   methods: {
     /**
@@ -144,15 +167,19 @@ export default {
     async getTableData() {
       this.tableData.loading = true
       try {
-        this.daycount()
-        const res = await summaryday({
-          page: this.tableData.page,
-          size: this.tableData.size,
-          startTime: this.query.createdAt[0],
-          endTime: this.query.createdAt[1],
-          proName: this.query.proName,
-          cateId: this.query.cateId
-        })
+        this.creditDetailSummary()
+        // eslint-disable-next-line prefer-const
+        let params = {
+          page: this.query.page,
+          size: this.query.size,
+          creditBuyerId: this.query.creditBuyerId
+        }
+        if (this.query.createdAt.length > 0) {
+          params.beginDate = this.query.createdAt[0].substring(0, 10)
+          params.endDate = this.query.createdAt[1].substring(0, 10)
+        }
+        // eslint-disable-next-line prefer-const
+        let res = await creditBuyerOrderList(params)
         this.tableData.loading = false
         this.tableData.data = res.content
         this.tableData.total = res.totalElements
@@ -161,6 +188,44 @@ export default {
       }
     },
 
+    /**
+     * 获取明细统计
+     */
+    async creditDetailSummary() {
+      try {
+        // eslint-disable-next-line prefer-const
+        let params = {
+          page: this.query.page,
+          size: this.query.size,
+          creditBuyerId: this.query.creditBuyerId
+        }
+        if (this.query.createdAt.length > 0) {
+          params.beginDate = this.query.createdAt[0].substring(0, 10)
+          params.endDate = this.query.createdAt[1].substring(0, 10)
+        }
+        // eslint-disable-next-line prefer-const
+        let res = await creditBuyerOrderSummary(params)
+        this.payCountList[0].amount = res.payAmountTotal
+        this.payCountList[0].count = res.count
+        this.payCountList[1].amount = res.paidAmountTotal
+        this.payCountList[2].amount = res.unpaidAmountTotal
+        this.payCountList[3].amount = res.unpaidCount
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    /**
+     * 操作
+     */
+    openDialog(row, type) {
+      if (type === 'payment' && this.repaymentMethod === 'order') {
+        this.$refs.creditRepayment.show({ creditBuyerId: this.query.creditBuyerId, repaymentMethod: this.repaymentMethod }, row)
+      } else if (type === 'paymentRecord') {
+        this.$refs.creditRepaymentRecord.show({ creditBuyerId: this.query.creditBuyerId, repaymentMethod: this.repaymentMethod }, row.id)
+      }
+    },
+
     /**
      * 切换时间
      * @param e
@@ -246,7 +311,6 @@ export default {
     resetHandle() {
       this.timeValue = ''
       this.query = { ...this.resetQuery }
-      this.page = 1
       this.getTableData()
     },
 
@@ -264,58 +328,12 @@ export default {
      * @param e
      */
     paginationChange(e) {
-      this.tableData.page = e
+      this.query.page = e
       this.getTableData()
-    },
-
-    // 获取商品分类
-    async tbShopCategoryGet() {
-      try {
-        const res = await tbShopCategoryGet({
-          page: 1,
-          size: 200,
-          sort: 'id,desc',
-          shopId: localStorage.getItem('shopId')
-        })
-        let categorys = []
-        for (let item of res.content) {
-          categorys.push({
-            name: `|----${item.name}`,
-            id: item.id
-          })
-          if (item.childrenList.length) {
-            for (let val of item.childrenList) {
-              categorys.push({
-                name: `|----|----${val.name}`,
-                id: val.id
-              })
-            }
-          }
-        }
-        this.categorys = categorys
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    // 获取订单汇总
-    async daycount() {
-      try {
-        const res = await daycount({
-          startTime: this.query.createdAt[0],
-          endTime: this.query.createdAt[1],
-          cateId: this.query.cateId,
-          proName: this.query.proName,
-
-          type: this.orderType,
-        });
-        this.payCountList = res;
-      } catch (error) {
-        console.log(error);
-      }
     }
-    
+
   }
-};
+}
 </script>
 
 <style scoped lang="scss">
@@ -324,29 +342,14 @@ export default {
   gap: 14px;
   justify-content: space-between;
 
-  .item:nth-child(1) {
-    background-image: url(../../assets/images/home/data_forms4.png);
-  }
-
-  .item:nth-child(2) {
-    background-image: url(../../assets/images/home/data_forms3.png);
-  }
-
-  .item:nth-child(3) {
-    background-image: url(../../assets/images/home/data_forms2.png);
-  }
-
-  .item:nth-child(4) {
-    background-image: url(../../assets/images/home/data_forms1.png);
-  }
-
   .item {
     background-size: 100% 100%;
     width: 255px;
     display: flex;
     align-items: center;
-    background-color: #f5f5f5;
+    background-color: #F7F7FA;
     padding: 20px;
+    border-radius: 7px 7px 7px 7px;
 
     .icon_wrap {
       $size: 34px;
@@ -359,7 +362,18 @@ export default {
       background-color: var(--bg-color);
       border-radius: 50%;
       position: relative;
-
+      >div{
+        width: 24px;
+        height: 24px;
+        background-color: #fff;
+        border-radius: 50%;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+      }
       &::after {
         content: "";
         width: $size + $border;
@@ -374,8 +388,13 @@ export default {
       }
 
       .icon {
-        font-size: 16px;
-        color: #fff;
+        font-size: 32px;
+        position: absolute;
+        left: 1px;
+        right: 0;
+        top: 1px;
+        bottom: 0;
+        margin: auto;
       }
 
       .img {