zhjwxt/uniapp/pages-market/clue/clue_table.vue

<template>
  <view class="dark-table-container">
    <view v-for="(row, rIdx) in data" :key="rIdx" class="card">
      <view class="card-title" @click="toggleExpand(rIdx)">
        {{ row.channel }}
        <text class="expand-icon">{{ expanded[rIdx] ? '▲' : '▼' }}</text>
      </view>
      <view class="card-content">
        <view
          class="card-row"
          v-for="(col, cIdx) in getVisibleColumns(rIdx)"
          :key="cIdx"
        >
          <view class="card-label">
            {{ col.label }}
            <text v-if="col.tip" class="tip" @click.stop="showTip(col.tip)">?</text>
          </view>
          <view class="card-value">{{ row[col.key] || '-' }}</view>
        </view>
      </view>
      <view v-if="columns.length > 6" class="expand-btn" @click="toggleExpand(rIdx)">
        {{ expanded[rIdx] ? '收起' : '展开全部' }}
      </view>
    </view>
    <!-- 说明弹窗 -->
    <uni-popup ref="popup" type="center">
      <view class="popup-content">{{ tipContent }}</view>
    </uni-popup>
    <AQTabber></AQTabber>
  </view>
</template>

<script>
import AQTabber from "@/components/AQ/AQTabber.vue"

export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      columns: [
        { label: '渠道', key: 'channel' },
        { label: '资源数', key: 'resource', tip: '本月的新资源' },
        { label: '到访数(一访)', key: 'visit1', tip: '本月资源的一访到访数' },
        { label: '到访率(一访)', key: 'visitRate1', tip: '一访到访数/本月新资源数' },
        { label: '到访数(二访)', key: 'visit2', tip: '二访到访数/一访到访数' },
        { label: '到访率(二访)', key: 'visitRate2', tip: '二访到访数/一访到访数' },
        { label: '关单数(一访)', key: 'close1', tip: '本月一访到访的关单数' },
        { label: '关单率(一访)', key: 'closeRate1', tip: '一访关单数/一访到访数' },
        { label: '关单数(二访)', key: 'close2', tip: '二访到访的关单数' },
        { label: '关单率(二访)', key: 'closeRate2', tip: '二访关单数/二访到访数' },
        { label: '月总转', key: 'monthTrans', tip: '关单数（合计）/资源数' },
        { label: '往月到访数', key: 'lastMonthVisit', tip: '本月资源在往月到访的到访数' },
        { label: '月共到访', key: 'monthTotalVisit', tip: '本月资源任在本月到访/关单' },
        { label: '往月关单数', key: 'lastMonthClose', tip: '本月关单-往月关单' },
        { label: '月共关单', key: 'monthTotalClose', tip: '本月关单+往月关单' },
      ],
      data: [
        { channel: '体检包（地推）', resource: 10, visit1: 5, visitRate1: '50%', visit2: 2, visitRate2: '40%', close1: 1, closeRate1: '20%', close2: 1, closeRate2: '50%', monthTrans: '10%', lastMonthVisit: 0, monthTotalVisit: 5, lastMonthClose: 0, monthTotalClose: 1 },
      ],
      tipContent: '',
      expanded: {},
    }
  },
  methods: {
    showTip(content) {
      this.tipContent = content
      this.$refs.popup.open()
    },
    toggleExpand(idx) {
      this.$set(this.expanded, idx, !this.expanded[idx])
    },
    getVisibleColumns(idx) {
      // 只展示前5个字段，展开后展示全部（不含渠道）
      const cols = this.columns.slice(1)
      if (this.expanded[idx]) return cols
      return cols.slice(0, 5)
    }
  }
}
</script>

<style scoped>
.dark-table-container {
  background: #18181c;
  color: #f1f1f1;
  min-height: 100vh;
  padding: 24rpx 12rpx;
}
.card {
  background: #23232a;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.18);
  margin-bottom: 32rpx;
  padding: 24rpx 20rpx 8rpx 20rpx;
  transition: box-shadow 0.2s;
}
.card-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 18rpx;
  color: #ffb300;
  letter-spacing: 2rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.expand-icon {
  font-size: 24rpx;
  color: #bdbdbd;
  margin-left: 12rpx;
}
.card-content {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  overflow: hidden;
  transition: max-height 0.3s;
}
.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed #333;
  padding: 8rpx 0;
}
.card-label {
  color: #bdbdbd;
  font-size: 26rpx;
  display: flex;
  align-items: center;
}
.card-value {
  color: #f1f1f1;
  font-size: 26rpx;
  text-align: right;
  max-width: 60%;
  word-break: break-all;
}
.tip {
  color: #ffb300;
  margin-left: 8rpx;
  font-size: 24rpx;
  cursor: pointer;
}
.expand-btn {
  color: #ffb300;
  text-align: center;
  font-size: 26rpx;
  margin: 10rpx 0 0 0;
  padding-bottom: 8rpx;
  cursor: pointer;
}
.popup-content {
  background: #23232a;
  color: #fff;
  padding: 32rpx;
  border-radius: 16rpx;
  min-width: 300rpx;
  text-align: center;
}
</style>