ebiz-base-ai/src/views/comparison/index.vue

<template>
  <div class="comparison-container">
    <div class="main" v-if="!showComparison">
      <main>
        <div style="height: 100%">
          <van-tabs v-model="active" color="#2E5CA9" title-active-color="#2E5CA9">
            <van-tab :title="item.title" v-for="(item, index) in list" :key="index">
              <div class="tab-container">
                <!-- 横向滚动区域 -->
                <div class="comparison-list" v-if="comparisonMap.length > 0">
                  <div v-for="compareItem in comparisonMap" :key="compareItem.id" class="comparison-item fs12">
                    {{ compareItem.title }}
                    <van-icon name="close" class="close-item" @click="removeItem(compareItem)" />
                  </div>
                </div>

                <!-- 可点击添加对比的列表 -->
                <van-cell-group inset style="margin: 0 !important">
                  <van-cell v-for="it in item.list" :key="it.id" @click="cellClick(it)">
                    <template #title>
                      <div class="cell-title-right-title">{{ it.title }}</div>
                    </template>
                    <template #right-icon>
                      <button
                        class="cell-title-right-btn fs12"
                        style="color: #2e5ca9"
                        :disabled="comparisonMap.find((compareItem) => it.id === compareItem.id)"
                      >
                        + 添加对比
                      </button>
                    </template>
                  </van-cell>
                </van-cell-group>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </main>
      <div class="button-group">
        <van-button size="large" class="fs14 fw600" style="color: #fff; background: #2e5ca9" @click="showComparison = true">开始比对</van-button>
      </div>
    </div>

    <div v-else>
      <comparsion :list="comparisonMap" :showComparison.sync="showComparison"></comparsion>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs, Cell, CellGroup, Icon } from 'vant'
import Comparsion from '@/views/comparison/table.vue'
import { compare, haslProducts } from '@/api/generatedApi/index'

export default {
  name: 'ComparisonTab',
  components: {
    Comparsion,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
  },
  data() {
    return {
      active: 0,
      list: [
        {
          title: '重疾',
          list: [],
        },
        {
          title: '年金',
          list: [],
        },
      ],
      // 按 tab 存储对比数据
      comparisonMap: [],

      showComparison: false,
    }
  },
  mounted() {
    this.getHotProducts()
  },
  methods: {
    async getHotProducts() {
      const res = await haslProducts()
      this.list = [
        {
          title: '热门产品',
          list: res.content.map((item) => {
            return {
              ...item,
              id: item.productId,
              title: item.productName,
            }
          }),
        },
      ]
    },

    cellClick(item) {
      const exists = this.comparisonMap.some((it) => it.id === item.id)
      if (!exists) {
        this.$set(this, 'comparisonMap', [...this.comparisonMap, item])
      }
    },

    removeItem(item) {
      this.comparisonMap = this.comparisonMap.filter((it) => it.id !== item.id)
    },
  },
}
</script>

<style scoped lang="scss">
$primary-color: #2e5ca9;
$primary-text-color: #f6aa21;
$primary-trans-color: #87a2d0;
.comparison-container {
  height: 100vh;
  background: #f5f5f9;
  //padding: 10px;
  .main {
    display: flex;
    flex-direction: column;
    height: 100%;

    main {
      flex: 1;
    }
  }
}

.cell-title-right-btn {
  outline: none;
  border: none;
  background: #fff;
  &:disabled {
    color: #ccc !important;
  }
}
.tab-container {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  height: 100%;
}
.comparison-list {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; /* 移动端滚动优化 */
  //border: 1px solid #eee;
  border-radius: 8px;
  //margin-bottom: 10px;
  touch-action: unset;
  //padding: 8px 0;
  &::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }
}

.placeholder {
  //padding: 20px 15px;
  color: #999;
  font-size: 14px;
  min-width: 100px;
  text-align: center;
}

.comparison-item {
  touch-action: unset;
  flex: 0 0 auto;
  margin-top: 6px;
  margin-bottom: 14px;
  width: 120px;
  height: 70px;
  border: 2px solid #fff;
  margin-right: 10px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 6px;
  position: relative;
  //文字自动折行
  white-space: normal;
  padding: 0 5px;

  .close-item {
    position: absolute;
    background: #fff;
    color: $primary-trans-color;
    border-radius: 50%;
    right: -7px;
    top: -8px;
    font-size: 14px;
  }
}
::v-deep .van-tabs__content {
  height: 100%;
}
::v-deep .van-tab__pane {
  height: calc(100vh - 95px);
}
</style>