From f02783871549b4db997591107177d820290fd338 Mon Sep 17 00:00:00 2001
From: chenghuan <chenghuanv587@qq.com>
Date: Fri, 13 Mar 2026 18:03:27 +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=9E=E5=85=A8=E9=83=A8VIP=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加VIP统计页面，展示到期和在期VIP用户的统计信息
- 实现数据导出功能，支持下载VIP统计报表
- 集成表格展示VIP用户的详细信息，包括办理时间、姓名、注册电话等
---
 .../vipStatistics/allVip.vue                  | 322 ++++++++++++++++++
 1 file changed, 322 insertions(+)
 create mode 100644 src/views/modules/statisticsBusiness/vipStatistics/allVip.vue

diff --git a/src/views/modules/statisticsBusiness/vipStatistics/allVip.vue b/src/views/modules/statisticsBusiness/vipStatistics/allVip.vue
new file mode 100644
index 0000000..80b13d8
--- /dev/null
+++ b/src/views/modules/statisticsBusiness/vipStatistics/allVip.vue
@@ -0,0 +1,322 @@
+<template>
+  <div class="all-vip-statistics">
+    <div class="summary-section">
+      <div class="summary-block">
+        <div class="summary-block__title">截止至今到期统计</div>
+        <div class="summary-grid">
+          <div
+            v-for="item in expiredSummaryCards"
+            :key="`expired-${item.key}`"
+            class="summary-card summary-card--expired"
+          >
+            <div class="summary-card__label">{{ item.label }}</div>
+            <div class="summary-card__value">{{ item.value }}人</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="summary-block">
+        <div class="summary-block__title">截止至今在期统计</div>
+        <div class="summary-grid">
+          <div
+            v-for="item in activeSummaryCards"
+            :key="`active-${item.key}`"
+            class="summary-card summary-card--active"
+          >
+            <div class="summary-card__label">{{ item.label }}</div>
+            <div class="summary-card__value">{{ item.value }}人</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="detail-section">
+      <div class="detail-header">
+        <div class="detail-title">全部VIP明细（{{ dataList.length }}）</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">
+              {{ formatText(scope.row.name) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="tel" label="注册电话" min-width="140">
+            <template slot-scope="scope">
+              {{ formatText(scope.row.tel) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="vipType" label="VIP类型" min-width="160">
+            <template slot-scope="scope">
+              {{ formatText(scope.row.vipType) }}
+            </template>
+          </el-table-column>
+          <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">
+            <template slot-scope="scope">
+              {{ formatText(scope.row.endTime) }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import http from '@/utils/httpRequest'
+
+function createEmptySummary() {
+  return {
+    total: 0,
+    zyCount: 0,
+    zjCount: 0,
+    zxhtCount: 0,
+    zlCount: 0,
+    xlCount: 0,
+    yxSuperCount: 0,
+    gxSuperCount: 0
+  }
+}
+
+export default {
+  data() {
+    return {
+      loading: false,
+      exportLoading: false,
+      tableHeight: null,
+      dataList: [],
+      expiredSummary: createEmptySummary(),
+      activeSummary: createEmptySummary()
+    }
+  },
+  computed: {
+    expiredSummaryCards() {
+      return this.buildSummaryCards(this.expiredSummary)
+    },
+    activeSummaryCards() {
+      return this.buildSummaryCards(this.activeSummary)
+    }
+  },
+  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
+      }
+    },
+    buildSummaryCards(summary) {
+      return [
+        { key: 'total', label: '总人数', value: summary.total },
+        { key: 'zyCount', label: '中医学', value: summary.zyCount },
+        { key: 'zjCount', label: '针灸学', value: summary.zjCount },
+        { key: 'zxhtCount', label: '中西汇通学', value: summary.zxhtCount },
+        { key: 'zlCount', label: '肿瘤学', value: summary.zlCount },
+        { key: 'xlCount', label: '心理学', value: summary.xlCount },
+        { key: 'yxSuperCount', label: '医学超级', value: summary.yxSuperCount },
+        { key: 'gxSuperCount', label: '国学心理学超级', value: summary.gxSuperCount }
+      ]
+    },
+    normalizeSummary(total, counts = {}) {
+      return {
+        total: total || 0,
+        zyCount: counts.zyCount || 0,
+        zjCount: counts.zjCount || counts.zjcount || 0,
+        zxhtCount: counts.zxhtCount || 0,
+        zlCount: counts.zlCount || counts.zlcount || 0,
+        xlCount: counts.xlCount || 0,
+        yxSuperCount: counts.yxSuperCount || 0,
+        gxSuperCount: counts.gxSuperCount || 0
+      }
+    },
+    getDataList() {
+      this.loading = true
+      http({
+        url: http.adornUrl('/master/statisticsBusinessVip/getUserVipByState'),
+        method: 'post',
+        data: http.adornData({})
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.resultList || []
+          this.expiredSummary = this.normalizeSummary(data.state1Total, data.state1Counts)
+          this.activeSummary = this.normalizeSummary(data.state0Total, data.state0Counts)
+          this.$nextTick(() => {
+            this.calculateTableHeight()
+          })
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    exportData() {
+      this.exportLoading = true
+      http({
+        url: http.adornUrl('/master/statisticsBusinessVip/exportUserVipByState'),
+        method: 'post',
+        data: http.adornData({}),
+        responseType: 'blob'
+      }).then((response) => {
+        const blob = new Blob([response.data])
+        const link = document.createElement('a')
+        link.href = URL.createObjectURL(blob)
+        link.download = '全部VIP统计报表.xlsx'
+        link.click()
+        URL.revokeObjectURL(link.href)
+      }).catch(() => {
+        this.$message.error('下载失败，请确认导出接口是否已提供')
+      }).finally(() => {
+        this.exportLoading = false
+      })
+    },
+    formatText(value) {
+      if (value === '' || value === null || value === undefined) {
+        return '--'
+      }
+      return String(value).trim() || '--'
+    },
+    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">
+.all-vip-statistics {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: calc(100vh - 220px);
+}
+
+.summary-section,
+.detail-section {
+  background: #fff;
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.summary-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.summary-block__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;
+  box-shadow: 0 4px 12px rgba(31, 45, 61, 0.06);
+}
+
+.summary-card--expired {
+  background: linear-gradient(180deg, #fff7f5 0%, #ffffff 100%);
+}
+
+.summary-card--active {
+  background: linear-gradient(180deg, #f3fbf5 0%, #ffffff 100%);
+}
+
+.summary-card__label {
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #606266;
+}
+
+.summary-card__value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1f2d3d;
+}
+
+.detail-section {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.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>