From 34f862bd4dc0715ae4c9bde2202f59e097f2b0f9 Mon Sep 17 00:00:00 2001
From: chenghuan <chenghuanv587@qq.com>
Date: Fri, 13 Mar 2026 17:47:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=BB=9F=E8=AE=A1=E4=B8=9A=E5=8A=A1):=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9EVIP=E4=B8=B4=E5=88=B0=E6=9C=9F=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加近3个月和近半年临到期的VIP统计页面
- 引入通用的统计基础组件，支持数据展示和导出功能
- 更新主统计页面以集成新统计选项
---
 .../vipStatistics/expiresSixMonths.vue        |  14 +
 .../vipStatistics/expiresStatisticsBase.vue   | 277 ++++++++++++++++++
 .../vipStatistics/expiresThreeMonths.vue      |  14 +
 .../vipStatistics/index.vue                   |  48 +++
 4 files changed, 353 insertions(+)
 create mode 100644 src/views/modules/statisticsBusiness/vipStatistics/expiresSixMonths.vue
 create mode 100644 src/views/modules/statisticsBusiness/vipStatistics/expiresStatisticsBase.vue
 create mode 100644 src/views/modules/statisticsBusiness/vipStatistics/expiresThreeMonths.vue
 create mode 100644 src/views/modules/statisticsBusiness/vipStatistics/index.vue

diff --git a/src/views/modules/statisticsBusiness/vipStatistics/expiresSixMonths.vue b/src/views/modules/statisticsBusiness/vipStatistics/expiresSixMonths.vue
new file mode 100644
index 0000000..c22a49b
--- /dev/null
+++ b/src/views/modules/statisticsBusiness/vipStatistics/expiresSixMonths.vue
@@ -0,0 +1,14 @@
+<template>
+  <expires-statistics-base
+    title="近半年临到期"
+    :month="6"
+  />
+</template>
+
+<script>
+import expiresStatisticsBase from './expiresStatisticsBase'
+
+export default {
+  components: { expiresStatisticsBase }
+}
+</script>
diff --git a/src/views/modules/statisticsBusiness/vipStatistics/expiresStatisticsBase.vue b/src/views/modules/statisticsBusiness/vipStatistics/expiresStatisticsBase.vue
new file mode 100644
index 0000000..c8b304e
--- /dev/null
+++ b/src/views/modules/statisticsBusiness/vipStatistics/expiresStatisticsBase.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="vip-expires-statistics">
+    <div class="summary-section">
+      <div class="section-title">汇总统计</div>
+      <div class="summary-grid">
+        <div
+          v-for="item in summaryCards"
+          :key="item.key"
+          class="summary-card"
+        >
+          <div class="summary-card__label">{{ item.label }}</div>
+          <div class="summary-card__value">{{ item.value }}人</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="detail-section">
+      <div class="detail-header">
+        <div class="detail-title">{{ detailTitle }}</div>
+        <el-button
+          type="success"
+          size="small"
+          :loading="exportLoading"
+          @click="exportData"
+        >下载报表</el-button>
+      </div>
+
+      <div ref="tableContainer" class="table-container">
+        <el-table
+          v-loading="loading"
+          :data="dataList"
+          border
+          :header-cell-style="{ textAlign: 'center' }"
+          :cell-style="{ textAlign: 'center' }"
+          :max-height="tableHeight"
+        >
+          <el-table-column type="index" label="序号" width="70" />
+          <el-table-column prop="time" label="办理时间" min-width="140" />
+          <el-table-column prop="name" label="姓名" min-width="120">
+            <template slot-scope="scope">
+              {{ scope.row.name || '--' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="tel" label="注册电话" min-width="140" />
+          <el-table-column prop="vipType" label="VIP类型" min-width="160" />
+          <el-table-column prop="year" label="年限" min-width="100">
+            <template slot-scope="scope">
+              {{ formatYear(scope.row.year) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="price" label="缴费金额" min-width="120">
+            <template slot-scope="scope">
+              {{ formatAmount(scope.row.price) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="endTime" label="到期时间" min-width="140" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import http from '@/utils/httpRequest'
+
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    month: {
+      type: [String, Number],
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      exportLoading: false,
+      tableHeight: null,
+      dataList: [],
+      summaryData: {
+        total: 0,
+        zyCount: 0,
+        zjcount: 0,
+        zxhtCount: 0,
+        zlcount: 0,
+        xlCount: 0,
+        yxSuperCount: 0,
+        gxSuperCount: 0
+      }
+    }
+  },
+  computed: {
+    detailTitle() {
+      return `${this.title}明细（${this.summaryData.total || 0}）`
+    },
+    summaryCards() {
+      return [
+        { key: 'total', label: '总人数', value: this.summaryData.total },
+        { key: 'zyCount', label: '中医学', value: this.summaryData.zyCount },
+        { key: 'zjcount', label: '针灸学', value: this.summaryData.zjcount },
+        { key: 'zxhtCount', label: '中西汇通学', value: this.summaryData.zxhtCount },
+        { key: 'zlcount', label: '肿瘤学', value: this.summaryData.zlcount },
+        { key: 'xlCount', label: '心理学', value: this.summaryData.xlCount },
+        { key: 'yxSuperCount', label: '医学超级', value: this.summaryData.yxSuperCount },
+        { key: 'gxSuperCount', label: '国学心理学超级', value: this.summaryData.gxSuperCount }
+      ]
+    }
+  },
+  activated() {
+    this.getDataList()
+    this.$nextTick(() => {
+      this.calculateTableHeight()
+    })
+  },
+  mounted() {
+    window.addEventListener('resize', this.handleResize)
+    this.$nextTick(() => {
+      this.calculateTableHeight()
+    })
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    handleResize() {
+      this.calculateTableHeight()
+    },
+    calculateTableHeight() {
+      if (this.$refs.tableContainer) {
+        this.tableHeight = this.$refs.tableContainer.offsetHeight || 500
+      } else {
+        this.tableHeight = 500
+      }
+    },
+    getRequestData() {
+      return {
+        month: String(this.month)
+      }
+    },
+    getDataList() {
+      this.loading = true
+      http({
+        url: http.adornUrl('/master/statisticsBusinessVip/getExpiresByMonth'),
+        method: 'post',
+        data: http.adornData(this.getRequestData())
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          const countData = data.count || {}
+          this.dataList = data.resultList || []
+          this.summaryData = {
+            total: data.total || 0,
+            zyCount: countData.zyCount || 0,
+            zjcount: countData.zjCount || countData.zjcount || 0,
+            zxhtCount: countData.zxhtCount || 0,
+            zlcount: countData.zlCount || countData.zlcount || 0,
+            xlCount: countData.xlCount || 0,
+            yxSuperCount: countData.yxSuperCount || 0,
+            gxSuperCount: countData.gxSuperCount || 0
+          }
+          this.$nextTick(() => {
+            this.calculateTableHeight()
+          })
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    exportData() {
+      this.exportLoading = true
+      http({
+        url: http.adornUrl('/master/statisticsBusinessVip/exportExpiresByMonth'),
+        method: 'post',
+        data: http.adornData(this.getRequestData()),
+        responseType: 'blob'
+      }).then((response) => {
+        const blob = new Blob([response.data])
+        const link = document.createElement('a')
+        link.href = URL.createObjectURL(blob)
+        link.download = `${this.title}VIP统计报表.xlsx`
+        link.click()
+        URL.revokeObjectURL(link.href)
+      }).finally(() => {
+        this.exportLoading = false
+      })
+    },
+    formatYear(year) {
+      if (year === '' || year === null || year === undefined) {
+        return '--'
+      }
+      return `${year}年`
+    },
+    formatAmount(amount) {
+      if (amount === '' || amount === null || amount === undefined) {
+        return '--'
+      }
+      return Number(amount).toFixed(2).replace(/\.00$/, '')
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.vip-expires-statistics {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: calc(100vh - 220px);
+}
+
+.summary-section,
+.detail-section {
+  background: #fff;
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.detail-section {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.section-title {
+  margin-bottom: 16px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #303133;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  gap: 12px;
+}
+
+.summary-card {
+  padding: 16px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
+  box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
+}
+
+.summary-card__label {
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #606266;
+}
+
+.summary-card__value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1f2d3d;
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.detail-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: #303133;
+}
+
+.table-container {
+  flex: 1;
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/modules/statisticsBusiness/vipStatistics/expiresThreeMonths.vue b/src/views/modules/statisticsBusiness/vipStatistics/expiresThreeMonths.vue
new file mode 100644
index 0000000..e642119
--- /dev/null
+++ b/src/views/modules/statisticsBusiness/vipStatistics/expiresThreeMonths.vue
@@ -0,0 +1,14 @@
+<template>
+  <expires-statistics-base
+    title="近3个月临到期"
+    :month="3"
+  />
+</template>
+
+<script>
+import expiresStatisticsBase from './expiresStatisticsBase'
+
+export default {
+  components: { expiresStatisticsBase }
+}
+</script>
diff --git a/src/views/modules/statisticsBusiness/vipStatistics/index.vue b/src/views/modules/statisticsBusiness/vipStatistics/index.vue
new file mode 100644
index 0000000..c7ff393
--- /dev/null
+++ b/src/views/modules/statisticsBusiness/vipStatistics/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="mod-config">
+    <el-tabs v-model="activeTab" type="card">
+      <el-tab-pane label="近3个月临到期" name="expiresThreeMonths" />
+      <el-tab-pane label="近半年临到期" name="expiresSixMonths" />
+      <el-tab-pane label="全部" name="allVip" />
+      <el-tab-pane label="年" name="yearVip" />
+      <el-tab-pane label="月" name="monthVip" />
+    </el-tabs>
+    <keep-alive>
+      <component :is="currentComponent" />
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import expiresThreeMonths from './expiresThreeMonths'
+import expiresSixMonths from './expiresSixMonths'
+import allVip from './allVip'
+import yearVip from './yearVip'
+import monthVip from './monthVip'
+
+export default {
+  components: {
+    expiresThreeMonths,
+    expiresSixMonths,
+    allVip,
+    yearVip,
+    monthVip
+  },
+  data() {
+    return {
+      activeTab: 'expiresThreeMonths'
+    }
+  },
+  computed: {
+    currentComponent() {
+      return this.activeTab
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form .el-form-item {
+  margin-bottom: 10px !important;
+}
+</style>