caimei365-manager-ui/src/views/user/record/detail-list.vue

<template>
  <div class="app-container">
    <!-- 顶部操作区域 -->
    <div class="filter-container">
      <!-- 关键词列表 -->
      <el-table v-loading="isLoading" :data="list" border>
        <el-table-column prop="pagePath" label="页面路径" align="center" width="300">
          <template slot-scope="{ row }">
            <a v-if="row.accessClient === '0'" style="color:#2fa4e7;" target="_blank" :href="row.pagePath"> {{ row.pagePath }}</a>
            <span v-else> {{ row.pagePath }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="accessSource" label="访问来源" align="center" width="100">
          <template slot-scope="{ row }">
            {{ row.accessSource | accessSourceFilters }}
          </template>
        </el-table-column>
        <el-table-column prop="pageTypes" label="页面类型" align="center">
          <template slot-scope="{ row }">
            {{ row.pageTypes ? row.pageTypes : '---' }}
          </template>
        </el-table-column>
        <el-table-column prop="pageLabel" label="页面标签" align="center">
          <template slot-scope="{ row }">
            {{ row.pageLabel ? row.pageLabel : '---' }}
          </template>
        </el-table-column>
        <el-table-column prop="pagePath" label="商品图片" align="center" width="100">
          <template v-if="row.productId" slot-scope="{ row }">
            <el-popover
              placement="top-start"
              title=""
              width="180"
              trigger="hover"
            >
              <img :src="row.productImage" alt="" style="width:150px;height:150px;">
              <img slot="reference" :src="row.productImage" alt="" style="width:30px;height:30px;">
            </el-popover>
          </template>
          <template v-else>
            <span>---</span>
          </template>
        </el-table-column>
        <el-table-column label="商品ID" align="center" width="100">
          <template slot-scope="{ row }">
            {{ row.productId ? row.productId : '---' }}
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品名称" align="center">
          <template slot-scope="{ row }">
            {{ row.productName ? row.productName : '---' }}
          </template>
        </el-table-column>
        <el-table-column label="关联供应商" align="center">
          <template slot-scope="{ row }">
            <p v-for="item in handleRelevanceShop(row.relevanceShop)" :key="item">
              {{ item ? item : '---' }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="accessTime" label="访问时间" align="center" />
        <el-table-column prop="accessDuration" label="访问时长" align="center" />
      </el-table>
      <!-- 页码 -->
      <pagination
        :total="total"
        :page-sizes="[20]"
        :page-size="20"
        :page.sync="listQuery.pageNum"
        :limit.sync="listQuery.pageSize"
        @pagination="fetchBehaviorList"
      />
    </div>
  </div>
</template>

<script>
import { fetchBehaviorList } from '@/api/user/record/record'

export default {
  name: 'RecordDtails',
  filters: {
    accessSourceFilters(value) {
      // 公司类型
      const map = {
        '0': '直接访问',
        '1': '百度搜索',
        '2': '360搜索',
        '3': '谷歌搜索',
        '4': '神马搜索',
        '5': '头条搜索',
        '6': '搜狗搜索',
        '7': '直接访问'
      }
      return map[value]
    }
  },
  data() {
    return {
      isLoading: true,
      listQuery: {
        ip: '',
        accessDate: '',
        userId: 0,
        pageNum: 1,
        pageSize: 20
      },
      list: [],
      total: 0
    }
  },
  computed: {

  },
  created() {
    this.listQuery = { ...this.listQuery, ...this.$route.query }
    console.log('listQuery', this.listQuery)
    this.getList()
  },
  methods: {
    // 获取详情列表
    getList() {
      this.listQuery.pageNum = 1
      this.fetchBehaviorList()
    },
    // 获取关键词列表
    async fetchBehaviorList() {
      try {
        this.isLoading = true
        const res = await fetchBehaviorList(this.listQuery)
        this.list = res.data.results
        this.total = res.data.totalRecord
        this.isLoading = false
      } catch (error) {
        console.log(error)
      }
    },
    handleRelevanceShop(value) {
      console.log('va', value.split(','))
      return value.split(',')
    }
  }
}
</script>

<style></style>