添加缴费列表

src/views/teamDetail/components/modals/payment-list.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class="paymentList tableWrap">
+        <el-table
+            :data="tableList"
+            :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+        >
+            <el-table-column align="center"
+                           label="缴费项目编号">
+                <template slot-scope="scope">
+                    <copy-text>{{ scope.row.musicGroupPaymentCalenderId }}</copy-text>
+                </template>
+            </el-table-column>
+            <el-table-column align="center"
+                           label="缴费开始日期">
+                <template slot-scope="scope">
+                <div>
+                    {{ scope.row.startPaymentDateMgpc | formatTimer }}
+                </div>
+                </template>
+            </el-table-column>
+            <el-table-column align="center"
+                            label="缴费截止日期">
+                <template slot-scope="scope">
+                <div>
+                    {{ scope.row.deadlinePaymentDateMgpc | formatTimer }}
+                </div>
+                </template>
+            </el-table-column>
+            <el-table-column align="center"
+                           prop="expectAmount"
+                           label="预计缴费金额">
+                <template slot-scope="scope">
+                    {{ scope.row.expectAmount | moneyFormat }}
+                </template>
+            </el-table-column>
+            <el-table-column align="center"
+                            label="是否开启缴费">
+                <template slot-scope="scope">
+                <div>
+                    {{ scope.row.open ? '是' : '否' }}
+                </div>
+                </template>
+            </el-table-column>
+            <el-table-column align="center"
+                            label="缴费状态">
+                <template slot-scope="scope">
+                <div>
+                    {{ scope.row.paymentStatus | paymentStatusDetall }}
+                </div>
+                </template>
+            </el-table-column>
+            <el-table-column align="center"
+                            prop="studentId"
+                            width="150px"
+                            label="支付时间">
+                <template slot-scope="scope">
+                <div>
+                    {{ scope.row.payTime | dateForMinFormat }}
+                </div>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination
+            :total.sync="pageInfo.total"
+            :page.sync="pageInfo.page"
+            :limit.sync="pageInfo.limit"
+            :page-sizes="pageInfo.page_size"
+            @pagination="getDetail"
+        />
+    </div>
+</template>
+
+<script>
+import { getmusicGroupPaymentCalenderDetail } from '@/api/buildTeam'
+import pagination from "@/components/Pagination/index";
+export default {
+    name: 'paymentList',
+    props: [ 'paymentDetail' ],
+    components: { pagination },
+    data() {
+        return {
+            tableList: [], //
+            pageInfo: {
+                // 分页规则
+                limit: 10, // 限制显示条数
+                page: 1, // 当前页
+                total: 0, // 总条数
+                page_size: [10, 20, 40, 50], // 选择限制显示条数
+            },
+        }
+    },
+    mounted() {
+        this.getDetail()
+        // console.log(this.paymentDetail)
+    },
+    methods: {
+        async getDetail() {
+            const paymentDetail = this.paymentDetail
+            await getmusicGroupPaymentCalenderDetail({
+                musicGroupId: paymentDetail.musicGroupId,
+                userId: paymentDetail.userId,
+            }).then(res => {
+                console.log(res)
+                this.tableList = res.data.rows
+                this.pageInfo.total = res.data.total
+            })
+        }
+    }
+}
+</script>

src/views/teamDetail/components/studentList.vue

@@ -221,6 +221,11 @@
             <div>{{ scope.row.isActive ? "是" : "否" }}</div>
           </template>
         </el-table-column>
+        <el-table-column align="center" label="欠费金额(元)">
+          <template slot-scope="scope">
+            <div :class="[scope.row.noPaymentAmount > 0 ? 'error' : null]">{{ scope.row.noPaymentAmount | moneyFormat }} <i style="color: #14928A; font-size: 17px;" class="el-icon-view" @click="onPaymentDetail(scope.row)"></i></div>
+          </template>
+        </el-table-column>
         <el-table-column label="退团原因" align="center">
           <template slot-scope="scope">
             <div>
@@ -596,6 +601,18 @@
         @close="createUserPayVisible = false"
       />
     </el-dialog>
+
+    <el-dialog
+      title="缴费记录"
+      width="900px"
+      :visible.sync="paymentDetailVisible"
+    >
+      <payment-list
+        v-if="paymentDetailVisible"
+        :paymentDetail="paymentDetail"
+        @close="paymentDetailVisible = false"
+      />
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -631,12 +648,15 @@ import cleanDeep from 'clean-deep'
 import createUserPay from './modals/create-user-pay.vue'
 import TimesView from './modals/course-time-detail'
 import paymentCycle from '../../resetTeaming/modals/payment-cycle'
+import paymentList from './modals/payment-list'
 import Tooltip from '@/components/Tooltip/index'
 export default {
   name: "tstudentList",
   data() {
     return {
       teamid: "",
+      paymentDetailVisible: false,
+      paymentDetail: {},
       payVisible: false,
       quitVisible: false, // 退团信息确认的弹窗
       studentClassVisible: false, // 学员所在班级弹窗
@@ -800,7 +820,8 @@ export default {
     paymentCycle,
     createUserPay,
     Tooltip,
-    'times-view': TimesView
+    'times-view': TimesView,
+    paymentList
   },
   created() {
     // 判断是否带缓存参数
@@ -839,6 +860,10 @@ export default {
     this.init();
   },
   methods: {
+    onPaymentDetail(row) {
+      this.paymentDetail = row
+      this.paymentDetailVisible = true
+    },
     viewTimer(row) {
       // this.timerDetail = row
       this.timesVisible = true
@@ -1436,6 +1461,10 @@ export default {
 //     flex-direction: row;
 //   }
 // }
+
+.error {
+  color: red;
+}
 .el-select {
   width: 180px !important;
 }