供应商统计修改

src/api/user/customer/customer.js

@@ -471,7 +471,7 @@ export function saveMarketShop(params) {
  */
 export function uploadShopLogo(params) {
   return request({
-    url: '/user/market/uploadShopLogo	',
+    url: '/user/market/uploadShopLogo',
     method: 'get',
     params
   })
@@ -558,3 +558,85 @@ export function saveReport(params) {
     params
   })
 }
+/**
+ * 供应商相关商品
+ * @param {*} shopId
+ * @param {*} productId
+ * @param {*} productName
+ * @param {*} pageNum,
+ * @param {*} pageSize
+ * @returns
+ */
+export function getProductList(params) {
+  return request({
+    url: '/user/customer/getProductList',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 供应商商品列表
+ * @param {*} id
+ * @param {*} productId
+ * @param {*} productName
+ * @param {*} pageNum,
+ * @param {*} pageSize
+ * @returns
+ */
+export function getShopProduct(params) {
+  return request({
+    url: '/user/customer/getShopProduct',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 保存潜客供应商统计商品
+ * @param {*} id
+ * @param {*} productIds
+ * @returns
+ */
+export function saveShopProduct(params) {
+  return request({
+    url: '/user/customer/saveShopProduct',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 设置供应商商品统计状态
+ * @param {*} id 统计供应商商品表的ID
+ * @param {*} status 状态
+ * @returns
+ */
+export function renewShopProduct(params) {
+  return request({
+    url: '/user/customer/renewShopProduct',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 删除供应商相关商品
+ * @param {*} id
+ * @returns
+ */
+export function deleteShopProduct(params) {
+  return request({
+    url: '/user/customer/deleteShopProduct',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 获取供应商关联商品列表
+ * @param {*} shopId
+ * @returns
+ */
+export function getShopProductList(params) {
+  return request({
+    url: '/user/customer/getShopProductList',
+    method: 'get',
+    params
+  })
+}

src/router/modules/user.js

@@ -106,6 +106,13 @@ const userRouter = {
           meta: { title: '相关文章' },
           hidden: true
         },
+        {
+          path: 'customer-goods-list',
+          name: 'CustomerGoodsList',
+          component: () => import('@/views/user/customer/customer-goods-list'),
+          meta: { title: '相关商品' },
+          hidden: true
+        },
         {
           path: 'customer-search-list',
           name: 'CustomerSearchList',

src/styles/index.scss

@@ -252,3 +252,22 @@ aside {
 .el-submenu [class^='el-icon-'] {
   font-size: 16px;
 }
+.el-dialog__body {
+  padding: 20px;
+}
+/*定义滚动条样式*/
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+  background-color: #f6f6f6;
+}
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  background-color: #f6f6f6;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.2);
+}

src/views/user/consult/detail.vue

@@ -68,6 +68,9 @@
         <div v-for="(item, index) in list" v-else :key="index" class="list-main">
           <div class="list-main-item">
             <span class="list-times">{{ item.addTime }}</span>
+            <el-row :gutter="24" class="box-row">
+              <el-col :span="24"><b>协销：</b> {{ item.spName ? item.spName : '--' }}</el-col>
+            </el-row>
             <el-row :gutter="24" class="box-row">
               <el-col v-if="item.clubName" :span="6"><b>机构：</b> {{ item.clubName }}</el-col>
               <el-col :span="6"><b>咨询人：</b> {{ item.questionMan }}</el-col>

src/views/user/consult/list.vue

@@ -133,6 +133,9 @@
         <div v-for="(item, index) in list" v-else :key="index" class="list-main">
           <div class="list-main-item consult-list">
             <span class="list-time">{{ item.addTime }}</span>
+            <el-row :gutter="24" class="box-row">
+              <el-col :span="24"><b>协销：</b> {{ item.spName ? item.spName : '--' }}</el-col>
+            </el-row>
             <el-row :gutter="24" class="box-row">
               <el-col v-if="item.clubName" :span="6"><b>机构：</b> {{ item.clubName }}</el-col>
               <el-col :span="6"><b>咨询人：</b> {{ item.questionMan }}</el-col>

src/views/user/consult/unreg-detail.vue

@@ -50,6 +50,9 @@
         <div v-for="(item, index) in list" v-else :key="index" class="list-main">
           <div class="list-main-item unreg">
             <span class="list-times">{{ item.addTime }}</span>
+            <el-row :gutter="24" class="box-row">
+              <el-col :span="24"><b>协销：</b> {{ item.spName ? item.spName : '--' }}</el-col>
+            </el-row>
             <el-row :gutter="24" class="box-row">
               <el-col :span="6"><b>咨询人：</b> {{ item.questionMan }}</el-col>
               <el-col v-if="item.contractMobile" :span="12"><b>手机号：</b> {{ item.contractMobile }}</el-col>

src/views/user/customer/components/article.vue

@@ -15,6 +15,19 @@
           @change="getList"
         />
       </div>
+      <div class="filter-control">
+        <span>关联商品:</span>
+        <el-select v-model="listQuery.productId" filterable @change="getList">
+          <el-option value="" label="请选择" />
+          <el-option
+            v-for="item in goodsOptions"
+            :key="item.productId"
+            :label="item.productName"
+            :value="item.productId"
+            :style="{ width: '250px' }"
+          />
+        </el-select>
+      </div>
       <div class="filter-control">
         <el-button type="primary" @click="getList"> 查询 </el-button>
       </div>
@@ -30,6 +43,14 @@
         </template>
       </el-table-column>
       <el-table-column prop="title" label="文章标题" align="center" />
+      <el-table-column prop="mainImage" label="关联商品" align="center" width="350">
+        <template slot-scope="{ row }">
+          <div class="cell-ps">
+            <img :src="row.mainImage" alt="" />
+            <p>{{ row.productName }}</p>
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column prop="link" label="文章链接" align="center">
         <template slot-scope="{ row }">
           <a style="color: #2fa4e7" target="_blank" :href="row.link">
@@ -68,66 +89,19 @@
 </template>
 
 <script>
-import { getPageShopInfo } from '@/api/user/customer/customer'
-
+import { getPageShopInfo, getShopProductList } from '@/api/user/customer/customer'
+import pickerOptions from '@/utils/time-picker.js'
 export default {
   name: 'Article',
   filters: {},
   data() {
-    const pickerOptions = {
-      shortcuts: [
-        {
-          text: '近1年',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
-            picker.$emit('pick', [start, end])
-          }
-        },
-        {
-          text: '近半年',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 183)
-            picker.$emit('pick', [start, end])
-          }
-        },
-        {
-          text: '近1月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        },
-        {
-          text: '近1周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        },
-        {
-          text: '昨天',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24)
-            picker.$emit('pick', [start, end])
-          }
-        }
-      ]
-    }
     return {
       pickerOptions,
       time: '',
+      goodsOptions: [],
       listQuery: {
         shopId: this.$route.query.shopId, // 供应商Id
+        productId: '', // 关联商品Id
         startTime: '', // 统计开始时间
         endTime: '', // 统计结束时间
         pageNum: 1,
@@ -141,6 +115,7 @@ export default {
   computed: {},
   created() {
     this.getList()
+    this.getShopProductList()
   },
   methods: {
     // 商品列表
@@ -167,8 +142,45 @@ export default {
       } catch (error) {
         console.log(error)
       }
+    },
+    // 供应商关联商品
+    async getShopProductList() {
+      try {
+        const res = await getShopProductList({ shopId: this.listQuery.shopId })
+        this.goodsOptions = res.data
+      } catch (error) {
+        console.log(error)
+      }
     }
   }
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.cell-ps {
+  width: 300px;
+  height: 100px;
+  box-sizing: border-box;
+  padding: 10px;
+}
+.cell-ps img {
+  width: 80px;
+  height: 80px;
+  display: block;
+  float: left;
+}
+.cell-ps p {
+  width: 200px;
+  height: 80px;
+  box-sizing: border-box;
+  padding: 10px 0;
+  line-height: 24px;
+  font-size: 14px;
+  float: left;
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* 设置显示的行数 */
+  -webkit-box-orient: vertical;
+}
+</style>

src/views/user/customer/components/goods-dialog.vue

@@ -0,0 +1,157 @@
+<template>
+  <el-dialog title="添加商品" :visible.sync="visible" width="1200px" :close-on-click-modal="false" :show-close="false">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>ID:</span>
+        <el-input
+          v-model="listQuery.productId"
+          placeholder="商品ID"
+          clearable
+          style="width: 160px"
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <span>商品名称:</span>
+        <el-input
+          v-model="listQuery.productName"
+          placeholder="商品名称"
+          clearable
+          style="width: 160px"
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList"> 查询 </el-button>
+      </div>
+    </div>
+    <el-table
+      ref="table"
+      v-loading="isLoading"
+      :data="list"
+      height="400px"
+      border
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" :selectable="selectable" />
+      <el-table-column label="商品ID" prop="productId" align="center" width="100" />
+      <el-table-column prop="mainImage" label="商品图片" align="center" width="120">
+        <template slot-scope="{ row }">
+          <el-popover v-if="row.mainImage" placement="top-start" title="" width="120" trigger="hover">
+            <img :src="row.mainImage" alt="" style="width: 80px; height: 80px" />
+            <img slot="reference" :src="row.mainImage" alt="" style="width: 80px; height: 80px" />
+          </el-popover>
+          <span v-else>---</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" prop="productName" align="center" />
+      <el-table-column label="供应商" prop="shopName" align="center" />
+    </el-table>
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[100, 200]"
+      :page-size="100"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getProductList"
+    />
+    <div slot="footer">
+      <el-button @click="handleCanle"> 取 消 </el-button>
+      <el-button type="primary" :disabled="disabled" @click="handleConfirm"> 确 定 </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getProductList } from '@/api/user/customer/customer'
+
+export default {
+  name: 'ShopDialog',
+  filters: {
+    NumFormat(value) {
+      // 处理金额
+      return Number(value).toFixed(2)
+    }
+  },
+  data() {
+    return {
+      visible: true,
+      listQuery: {
+        shopId: this.$route.query.shopId,
+        productId: '',
+        productName: '',
+        pageNum: 1, // 页码
+        pageSize: 100 // 页面数据数
+      },
+      list: [],
+      total: 0,
+      shopsRadio: null,
+      isLoading: true
+    }
+  },
+  computed: {
+    disabled() {
+      return this.shopsRadio === null
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 获取所有供应商列表
+    async getList() {
+      this.list = []
+      this.listQuery.pageNum = 1
+      this.getProductList()
+    },
+    // 获取所有供应商列表
+    async getProductList() {
+      try {
+        const res = await getProductList(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
+        this.isLoading = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 选择供应商
+    handleSelectionChange(row) {
+      this.shopsRadio = row
+      console.log('row', row)
+    },
+    // 确认选择供应商
+    handleConfirm() {
+      this.$emit('confirm', this.shopsRadio)
+    },
+    handleCanle() {
+      // 取消弹窗
+      this.$emit('cancel')
+    },
+    // 已选择的禁用勾选框
+    selectable(row) {
+      if (row.flag) {
+        return true
+      } else {
+        return false
+      }
+    },
+    checkedInput(event, type) {
+      let pattern = ''
+      switch (type) {
+        case 1:
+          pattern = /[^\d]/g
+          break
+        case 2:
+          pattern = /[^u4E00-u9FA5|d|a-zA-Z|rns,.?!，。？！…—&$=()-+/*{}[]]|s/g
+          break
+      }
+      return event.replace(pattern, '')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped></style>

src/views/user/customer/components/search.vue

@@ -15,12 +15,33 @@
           @change="getList"
         />
       </div>
+      <div class="filter-control">
+        <span>关联商品:</span>
+        <el-select v-model="listQuery.productId" filterable @change="getList">
+          <el-option value="" label="请选择" />
+          <el-option
+            v-for="item in goodsOptions"
+            :key="item.productId"
+            :label="item.productName"
+            :value="item.productId"
+            :style="{ width: '250px' }"
+          />
+        </el-select>
+      </div>
       <div class="filter-control">
         <el-button type="primary" @click="getList"> 查询 </el-button>
       </div>
     </div>
     <el-table v-loading="isLoading" :data="list" border style="width: 100%" height="600">
-      <el-table-column prop="keyword" fixed label="搜索词" align="center" width="300" />
+      <el-table-column prop="keyword" label="搜索词" align="center" width="200" />
+      <el-table-column prop="mainImage" label="关联商品" align="center" width="350">
+        <template slot-scope="{ row }">
+          <div class="cell-ps">
+            <img :src="row.mainImage" alt="" />
+            <p>{{ row.productName }}</p>
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column prop="link" label="搜索链接" align="center">
         <template v-if="row.link" slot-scope="{ row }">
           <a style="color: #2fa4e7" target="_blank" :href="row.link">
@@ -28,12 +49,12 @@
           </a>
         </template>
       </el-table-column>
-      <el-table-column prop="accessNumber" label="访问次数" align="center" width="200">
+      <el-table-column prop="accessNumber" label="访问次数" align="center" width="80">
         <template slot-scope="{ row }">
           {{ row.accessNumber }}
         </template>
       </el-table-column>
-      <el-table-column prop="average" label="平均访问时长" align="center" width="200">
+      <el-table-column prop="average" label="平均访问时长" align="center" width="120">
         <template slot-scope="{ row }">
           {{ row.average }}
         </template>
@@ -52,66 +73,19 @@
 </template>
 
 <script>
-import { getPageShopKeyword } from '@/api/user/customer/customer'
-
+import { getPageShopKeyword, getShopProductList } from '@/api/user/customer/customer'
+import pickerOptions from '@/utils/time-picker.js'
 export default {
   name: 'Search',
   filters: {},
   data() {
-    const pickerOptions = {
-      shortcuts: [
-        {
-          text: '近1年',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
-            picker.$emit('pick', [start, end])
-          }
-        },
-        {
-          text: '近半年',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 183)
-            picker.$emit('pick', [start, end])
-          }
-        },
-        {
-          text: '近1月',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-            picker.$emit('pick', [start, end])
-          }
-        },
-        {
-          text: '近1周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        },
-        {
-          text: '昨天',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24)
-            picker.$emit('pick', [start, end])
-          }
-        }
-      ]
-    }
     return {
       pickerOptions,
       time: '',
+      goodsOptions: [],
       listQuery: {
         shopId: this.$route.query.shopId, // 供应商Id
+        productId: '', // 关联商品Id
         startTime: '', // 统计开始时间
         endTime: '', // 统计结束时间
         pageNum: 1,
@@ -125,6 +99,7 @@ export default {
   computed: {},
   created() {
     this.getList()
+    this.getShopProductList()
   },
   methods: {
     // 商品列表
@@ -151,8 +126,45 @@ export default {
       } catch (error) {
         console.log(error)
       }
+    },
+    // 供应商关联商品
+    async getShopProductList() {
+      try {
+        const res = await getShopProductList({ shopId: this.listQuery.shopId })
+        this.goodsOptions = res.data
+      } catch (error) {
+        console.log(error)
+      }
     }
   }
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.cell-ps {
+  width: 300px;
+  height: 100px;
+  box-sizing: border-box;
+  padding: 10px;
+}
+.cell-ps img {
+  width: 80px;
+  height: 80px;
+  display: block;
+  float: left;
+}
+.cell-ps p {
+  width: 200px;
+  height: 80px;
+  box-sizing: border-box;
+  padding: 10px 0;
+  line-height: 24px;
+  font-size: 14px;
+  float: left;
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2; /* 设置显示的行数 */
+  -webkit-box-orient: vertical;
+}
+</style>

src/views/user/customer/customer-article-list.vue

@@ -118,7 +118,7 @@ export default {
     return {
       isLoading: true,
       listQuery: {
-        shopId: this.$route.query.shopId,
+        shopProductId: this.$route.query.shopProductId,
         infoId: '',
         title: '',
         status: '',
@@ -169,7 +169,7 @@ export default {
       data.forEach((ele) => {
         infoIds.push(ele.id)
       })
-      this.saveShopInfo({ shopId: this.listQuery.shopId, infoIds: infoIds.join(',') })
+      this.saveShopInfo({ shopProductId: this.listQuery.shopProductId, infoIds: infoIds.join(',') })
     },
     // 保存添加供应商文章
     async saveShopInfo(params) {

src/views/user/customer/customer-goods-list.vue

@@ -0,0 +1,448 @@
+<template>
+  <div class="app-container">
+    <!-- 顶部操作区域 -->
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>商品ID:</span>
+        <el-input
+          v-model="listQuery.productId"
+          placeholder="商品ID"
+          clearable
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <span>商品名称:</span>
+        <el-input
+          v-model="listQuery.productName"
+          placeholder="商品名称"
+          clearable
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <span>统计状态:</span>
+        <el-select v-model="listQuery.status" style="width: 120px" clearable @change="getList">
+          <el-option value="" label="请选择" />
+          <el-option :value="0" label="统计中" />
+          <el-option :value="1" label="暂停统计" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList"> 查询 </el-button>
+        <el-button type="primary" @click="goodsDialogVisible = true"> 添加商品 </el-button>
+      </div>
+    </div>
+    <div class="tags-sms">
+      <span class="tags-sms-span">供应商：{{ shopName }}</span>
+    </div>
+    <!-- 列表 -->
+    <el-table v-loading="isLoading" :data="list" border style="width: 100%" height="660">
+      <el-table-column prop="productId" label="商品ID" align="center" width="80" />
+      <el-table-column prop="productImage" label="商品图片" align="center" width="120">
+        <template slot-scope="{ row }">
+          <el-popover v-if="row.productImage" placement="top-start" title="" width="100" trigger="hover">
+            <img :src="row.productImage" alt="" style="width: 80px; height: 80px" />
+            <img slot="reference" :src="row.productImage" alt="" style="width: 80px; height: 80px" />
+          </el-popover>
+          <span v-else>---</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="productName" label="商品名称" align="center" />
+      <el-table-column prop="status" label="统计状态" align="center" width="100">
+        <template slot-scope="{ row }">
+          <el-tag v-if="row.status === 0" type="success" size="small">统计中</el-tag>
+          <el-tag v-if="row.status === 1" type="danger" size="small">暂停统计</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="logo" label="logo" align="center" width="150">
+        <template slot-scope="{ row }">
+          <el-popover v-if="row.logo" placement="top-start" title="" width="180" trigger="hover">
+            <img :src="row.logo" alt="" style="width: 94px; height: 50px" />
+            <img slot="reference" :src="row.logo" alt="" style="width: 94px; height: 50px" />
+          </el-popover>
+          <span v-else>---</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="recentlyTime" label="最近报表时间" align="center" width="100">
+        <template slot-scope="{ row }">
+          {{ row.recentlyTime ? row.recentlyTime : '---' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="addTime" label="添加时间" align="center" width="100">
+        <template slot-scope="{ row }">
+          {{ row.addTime ? row.addTime : '---' }}
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" align="center">
+        <template slot-scope="{ row }">
+          <el-button type="primary" size="mini" style="margin: 2px" @click="handleRecordDetail(7, row)">
+            营销数据报表
+          </el-button>
+          <el-button type="primary" size="mini" style="margin: 2px" @click="handleRecordDetail(1, row)">
+            潜客统计列表
+          </el-button>
+          <el-button type="primary" size="mini" style="margin: 2px" @click="handleRecordDetail(2, row)">
+            相关文章
+          </el-button>
+          <el-button type="primary" size="mini" style="margin: 2px" @click="handleRecordDetail(3, row)">
+            相关搜索词
+          </el-button>
+          <el-button type="success" size="mini" style="margin: 2px" @click="handleRecordDetail(8, row)">
+            上传LOGO
+          </el-button>
+          <el-button type="success" size="mini" style="margin: 2px" @click="handleRecordDetail(5, row)">
+            弹窗样式
+          </el-button>
+          <el-button type="success" size="mini" style="margin: 2px" @click="handleRecordDetail(6, row)">
+            设置统计状态
+          </el-button>
+          <el-button type="danger" size="mini" style="margin: 2px" @click="handleRecordDetail(4, row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[10, 20, 30, 100]"
+      :page-size="20"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getShopProduct"
+    />
+    <!--  选择供应商弹窗 -->
+    <goods-dialog v-if="goodsDialogVisible" ref="shopDialog" @confirm="handleAddShopConfirm" @cancel="handleCancel" />
+    <!-- 设置统计状态 -->
+    <el-dialog title="设置统计状态" :visible.sync="dialogFormVisible" width="500px">
+      <el-form ref="dataForm" :model="renewCustome" :rules="rules" label-position="right">
+        <el-form-item prop="status">
+          <el-radio v-model="renewCustome.status" :label="0">统计中</el-radio>
+          <el-radio v-model="renewCustome.status" :label="1">暂停统计</el-radio>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleConfirm">确定</el-button>
+      </div>
+    </el-dialog>
+    <!-- 上传LOGO -->
+    <el-dialog title="上传LOGO" :visible.sync="logoFormVisible" width="500px">
+      <el-form ref="logoForm" :model="logoForm" :rules="rules" label-position="right">
+        <el-form-item prop="logo" label="logo">
+          <div class="form-el-upload" style="width: 126px; height: 126px">
+            <el-upload
+              class="avatar-uploader"
+              :action="actionUrl"
+              :headers="getToken"
+              :show-file-list="false"
+              :on-success="handleSuccess"
+              :before-upload="beforeUpload"
+            >
+              <div v-loading="loadImgLoading" class="avatar" style="width: 126px; height: 126px; display: block">
+                <img
+                  v-if="logoForm.logo"
+                  :src="logoForm.logo"
+                  style="width: 126px; height: 126px; display: block"
+                  @error="reloadImage"
+                  @load="loadSucess"
+                />
+                <i
+                  v-elseopProduct
+                  class="el-icon-plus avatar-uploader-icon"
+                  style="width: 126px; height: 126px; line-height: 126px"
+                ></i>
+              </div>
+            </el-upload>
+            <p class="uploader-tips">注：请尽量上传126*50(px)尺寸的图片。</p>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="logoFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleConfirmLogo">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getShopProduct,
+  saveShopProduct,
+  renewShopProduct,
+  uploadShopLogo,
+  deleteShopProduct
+} from '@/api/user/customer/customer'
+import GoodsDialog from './components/goods-dialog'
+export default {
+  name: 'RecordList',
+  components: { GoodsDialog },
+  filters: {},
+  data() {
+    return {
+      isLoading: true,
+      shopName: this.$route.query.shopName,
+      listQuery: {
+        id: this.$route.query.id,
+        productName: '',
+        productId: '',
+        pageNum: 1,
+        pageSize: 20
+      },
+      list: [],
+      total: 0,
+      goodsDialogVisible: false,
+      dialogFormVisible: false,
+      logoFormVisible: false,
+      loadImgLoading: false,
+      renewCustome: {
+        id: '',
+        status: ''
+      },
+      logoForm: {
+        id: '',
+        logo: ''
+      },
+      rules: {
+        status: [{ required: true, message: '请设置统计状态', trigger: 'blur' }],
+        logo: [{ required: true, message: '请上传弹窗图片', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {
+    getToken() {
+      return {
+        token: this.$store.getters.token
+      }
+    },
+    actionUrl() {
+      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    // 获取行为记录列表
+    getList() {
+      this.list = []
+      this.listQuery.pageNum = 1
+      this.getShopProduct()
+    },
+    // 确认选择供应商
+    handleAddShopConfirm(data) {
+      console.log('data', data)
+      const productIds = []
+      data.forEach((ele) => {
+        productIds.push(ele.productId)
+      })
+      this.saveShopProduct({ id: this.listQuery.id, productIds: productIds.join(',') })
+    },
+    // 取消选择供应商
+    handleCancel() {
+      this.goodsDialogVisible = false
+      this.$refs.shopDialog.visible = false
+    },
+    // 确认设置统计状态
+    handleConfirm() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.renewShopProduct(this.renewCustome)
+        } else {
+          return false
+        }
+      })
+    },
+    // 获取潜客搜集供应商列表
+    async getShopProduct() {
+      try {
+        this.isLoading = true
+        const res = await getShopProduct(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
+        this.isLoading = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 保存添加统计供应商
+    async saveShopProduct(params) {
+      try {
+        await saveShopProduct(params)
+        this.goodsDialogVisible = false
+        this.$message.success('操作成功')
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 统计状态
+    async renewShopProduct(params) {
+      try {
+        await renewShopProduct(params)
+        this.dialogFormVisible = false
+        this.$message.success('操作成功')
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 上传logo
+    handleConfirmLogo() {
+      this.$refs['logoForm'].validate((valid) => {
+        if (valid) {
+          this.uploadShopLogo(this.logoForm)
+        } else {
+          return false
+        }
+      })
+    },
+    // 上传logo
+    async uploadShopLogo(params) {
+      try {
+        await uploadShopLogo(params)
+        this.logoFormVisible = false
+        this.$message.success('操作成功')
+        this.$refs['logoForm'].clearValidate()
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 查看详情
+    handleRecordDetail(type, row) {
+      switch (type) {
+        case 1: // 潜客统计列表
+          this.$router.push({
+            path: '/user/customer/customer-stat-list',
+            query: { shopProductId: row.id }
+          })
+          break
+        case 2: // 相关文章
+          this.$router.push({
+            path: '/user/customer/customer-article-list',
+            query: { shopProductId: row.id }
+          })
+          break
+        case 3: // 相关搜索词
+          this.$router.push({
+            path: '/user/customer/customer-search-list',
+            query: { shopProductId: row.id }
+          })
+          break
+        case 4: // 页面访问
+          this.handleDelete(row)
+          break
+        case 5: // 弹窗样式
+          this.$router.push({
+            path: '/user/customer/customer-popup-edit',
+            query: { shopProductId: row.id, shopId: row.shopId, id: this.listQuery.id, shopName: this.shopName }
+          })
+          break
+        case 6: // 设置统计状态
+          this.renewCustome.id = row.id
+          this.renewCustome.status = row.status
+          console.log('renewCustome', this.renewCustome)
+          this.dialogFormVisible = true
+          break
+        case 7: // 跳转数据报表
+          this.$router.push({
+            path: '/user/customer/market-report-list',
+            query: { marketId: row.id, productName: row.productName }
+          })
+          break
+        case 8: // 上传LOGO
+          this.logoForm.id = row.id
+          this.logoFormVisible = true
+          break
+      }
+    },
+    // 操作删除广告图
+    async handleDelete(row) {
+      try {
+        await this.$confirm('确定删除该商品吗？', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        this.deleteShopProduct(row)
+      } catch (error) {
+        this.$message.info('已取消删除操作')
+      }
+    },
+    // 调用删除广告图
+    async deleteShopProduct(row) {
+      try {
+        await deleteShopProduct({ id: row.id })
+        this.$message.success('操作成功')
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 上传图标事件
+    handleSuccess(res, file) {
+      this.loadImgLoading = true
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.logoForm.logo = res.data
+        }, 1000 * 2)
+      })
+    },
+    // 对上传图片的大小、格式进行限制
+    beforeUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isJPG2 = file.type === 'image/jpg'
+      const isPNG = file.type === 'image/png'
+      const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isJPG && !isJPG2 && !isPNG) {
+        this.$message.error('只支持jpg或png格式图片')
+      }
+      if (!isLt5M) {
+        this.$message.error('请上传5MB以内的图片!')
+      }
+      return (isJPG || isJPG2 || isPNG) && isLt5M
+    },
+    reloadImage() {
+      this.loadImgLoading = true
+      setTimeout(() => {
+        this.logoForm.logo = this.logoForm.logo.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
+      }, 1000 * 2)
+    },
+    loadSucess() {
+      this.loadImgLoading = false
+    }
+  }
+}
+</script>
+
+<style>
+.tags-sms {
+  width: 100%;
+  height: auto;
+  font-size: 16px;
+  color: #333333;
+  line-height: 28px;
+  box-sizing: border-box;
+  padding: 5px;
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  float: left;
+}
+.uploader-tips {
+  position: absolute;
+  bottom: 0;
+  left: 160px;
+  line-height: 28px;
+  color: red;
+  margin: 0;
+}
+</style>

src/views/user/customer/customer-popup-edit.vue

@@ -62,7 +62,7 @@ export default {
     const defaultForm = () => {
       return {
         id: '',
-        shopId: this.$route.query.shopId,
+        shopProductId: this.$route.query.shopProductId,
         image: '', // 弹窗图片
         guidingOne: '', // 引导语1
         guidingTwo: '', // 引导语2
@@ -90,7 +90,7 @@ export default {
     }
   },
   created() {
-    this.getShopPopUp({ shopId: this.$route.query.shopId })
+    this.getShopPopUp({ shopProductId: this.$route.query.shopProductId })
   },
   methods: {
     // 获取供应商弹窗详情
@@ -123,7 +123,10 @@ export default {
       await saveShopPopUp(params)
       this.$message.success('保存成功')
       setTimeout(() => {
-        this.$router.push({ path: '/user/customer/list' })
+        this.$router.push({
+          path: '/user/customer/customer-goods-list',
+          query: { id: this.$route.query.id, shopId: this.$route.query.shopId, shopName: this.$route.query.shopName }
+        })
       }, 1000)
     },
     // 上传图标事件
@@ -161,7 +164,10 @@ export default {
     backToList() {
       this.$store.dispatch('tagsView/delView', this.$route).then(() => {
         this.$nextTick(() => {
-          this.$router.replace({ path: '/user/customer/list' })
+          this.$router.replace({
+            path: '/user/customer/customer-goods-list',
+            query: { id: this.$route.query.id, shopId: this.$route.query.shopId, shopName: this.$route.query.shopName }
+          })
         })
       })
     }

src/views/user/customer/customer-search-list.vue

@@ -101,7 +101,7 @@ export default {
       isLoading: true,
       time: '',
       listQuery: {
-        shopId: this.$route.query.shopId,
+        shopProductId: this.$route.query.shopProductId,
         keyword: '',
         status: '',
         pageNum: 1,
@@ -151,7 +151,7 @@ export default {
       data.forEach((ele) => {
         keyWordIds.push(ele.id)
       })
-      this.saveShopKeyword({ shopId: this.listQuery.shopId, keyWordIds: keyWordIds.join(',') })
+      this.saveShopKeyword({ shopProductId: this.listQuery.shopProductId, keyWordIds: keyWordIds.join(',') })
     },
     // 保存添加供应商关键词
     async saveShopKeyword(params) {

src/views/user/customer/customer-stat-list.vue

@@ -112,7 +112,7 @@ export default {
       isLoading: true,
       time: '',
       listQuery: {
-        shopId: this.$route.query.shopId,
+        shopProductId: this.$route.query.shopProductId,
         consultName: '',
         consultMobile: '',
         pageNum: 1,

src/views/user/customer/list.vue

@@ -45,20 +45,6 @@
           <el-tag v-if="row.status === 1" type="danger" size="small">暂停统计</el-tag>
         </template>
       </el-table-column>
-      <el-table-column prop="status" label="logo" align="center" width="180">
-        <template slot-scope="{ row }">
-          <el-popover v-if="row.logo" placement="top-start" title="" width="180" trigger="hover">
-            <img :src="row.logo" alt="" style="width: 94px; height: 50px" />
-            <img slot="reference" :src="row.logo" alt="" style="width: 94px; height: 50px" />
-          </el-popover>
-          <span v-else>---</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="recentlyTime" label="最近报表时间" align="center">
-        <template slot-scope="{ row }">
-          {{ row.recentlyTime ? row.recentlyTime : '---' }}
-        </template>
-      </el-table-column>
       <el-table-column prop="addTime" label="添加时间" align="center" width="100">
         <template slot-scope="{ row }">
           {{ row.addTime ? row.addTime : '---' }}
@@ -66,30 +52,15 @@
       </el-table-column>
       <el-table-column fixed="right" label="操作" align="center" width="400">
         <template slot-scope="{ row }">
-          <el-button type="primary" size="mini" style="margin: 4px" @click="handleRecordDetail(7, row)">
-            营销数据报表
-          </el-button>
-          <el-button type="primary" size="mini" style="margin: 4px" @click="handleRecordDetail(1, row)">
-            潜客统计列表
-          </el-button>
-          <el-button type="primary" size="mini" style="margin: 4px" @click="handleRecordDetail(2, row)">
-            相关文章
-          </el-button>
-          <el-button type="primary" size="mini" style="margin: 4px" @click="handleRecordDetail(3, row)">
-            相关搜索词
-          </el-button>
-          <el-button type="success" size="mini" style="margin: 4px" @click="handleRecordDetail(8, row)">
-            上传LOGO
-          </el-button>
-          <el-button type="success" size="mini" style="margin: 4px" @click="handleRecordDetail(4, row)">
+          <el-button type="success" size="mini" style="margin: 4px" @click="handleRecordDetail(1, row)">
             页面访问统计
           </el-button>
-          <el-button type="success" size="mini" style="margin: 4px" @click="handleRecordDetail(5, row)">
-            弹窗样式
-          </el-button>
-          <el-button type="warning" size="mini" style="margin: 4px" @click="handleRecordDetail(6, row)">
+          <el-button type="success" size="mini" style="margin: 4px" @click="handleRecordDetail(2, row)">
             设置统计状态
           </el-button>
+          <el-button type="primary" size="mini" style="margin: 4px" @click="handleRecordDetail(3, row)">
+            相关商品
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -117,48 +88,11 @@
         <el-button type="primary" @click="handleConfirm">确定</el-button>
       </div>
     </el-dialog>
-    <!-- 上传LOGO -->
-    <el-dialog title="上传LOGO" :visible.sync="logoFormVisible" width="500px">
-      <el-form ref="logoForm" :model="logoForm" :rules="rules" label-position="right">
-        <el-form-item prop="logo" label="logo">
-          <div class="form-el-upload" style="width: 126px; height: 126px">
-            <el-upload
-              class="avatar-uploader"
-              :action="actionUrl"
-              :headers="getToken"
-              :show-file-list="false"
-              :on-success="handleSuccess"
-              :before-upload="beforeUpload"
-            >
-              <div v-loading="loadImgLoading" class="avatar" style="width: 126px; height: 126px; display: block">
-                <img
-                  v-if="logoForm.logo"
-                  :src="logoForm.logo"
-                  style="width: 126px; height: 126px; display: block"
-                  @error="reloadImage"
-                  @load="loadSucess"
-                />
-                <i
-                  v-else
-                  class="el-icon-plus avatar-uploader-icon"
-                  style="width: 126px; height: 126px; line-height: 126px"
-                ></i>
-              </div>
-            </el-upload>
-            <p class="uploader-tips">注：请尽量上传126*50(px)尺寸的图片。</p>
-          </div>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="logoFormVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleConfirmLogo">确定</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getCustomerShopList, saveCustomerShop, renewCustomerShop, uploadShopLogo } from '@/api/user/customer/customer'
+import { getCustomerShopList, saveCustomerShop, renewCustomerShop } from '@/api/user/customer/customer'
 import ShopDialog from './components/shop-dialog'
 export default {
   name: 'RecordList',
@@ -177,32 +111,16 @@ export default {
       total: 0,
       shopDialogVisible: false,
       dialogFormVisible: false,
-      logoFormVisible: false,
-      loadImgLoading: false,
       renewCustome: {
         id: '',
         status: ''
       },
-      logoForm: {
-        id: '',
-        logo: ''
-      },
       rules: {
-        status: [{ required: true, message: '请设置统计状态', trigger: 'blur' }],
-        logo: [{ required: true, message: '请上传弹窗图片', trigger: 'blur' }]
-      }
-    }
-  },
-  computed: {
-    getToken() {
-      return {
-        token: this.$store.getters.token
+        status: [{ required: true, message: '请设置统计状态', trigger: 'blur' }]
       }
-    },
-    actionUrl() {
-      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
     }
   },
+  computed: {},
   created() {
     this.getList()
   },
@@ -272,110 +190,28 @@ export default {
         console.log(error)
       }
     },
-    // 上传logo
-    handleConfirmLogo() {
-      this.$refs['logoForm'].validate((valid) => {
-        if (valid) {
-          this.uploadShopLogo(this.logoForm)
-        } else {
-          return false
-        }
-      })
-    },
-    // 上传logo
-    async uploadShopLogo(params) {
-      try {
-        await uploadShopLogo(params)
-        this.logoFormVisible = false
-        this.$message.success('操作成功')
-        this.$refs['logoForm'].clearValidate()
-        this.getList()
-      } catch (error) {
-        console.log(error)
-      }
-    },
     // 查看详情
     handleRecordDetail(type, row) {
       switch (type) {
-        case 1: // 潜客统计列表
-          this.$router.push({
-            path: '/user/customer/customer-stat-list',
-            query: { shopId: row.shopId }
-          })
-          break
-        case 2: // 相关文章
-          this.$router.push({
-            path: '/user/customer/customer-article-list',
-            query: { shopId: row.shopId }
-          })
-          break
-        case 3: // 相关搜索词
-          this.$router.push({
-            path: '/user/customer/customer-search-list',
-            query: { shopId: row.shopId }
-          })
-          break
-        case 4: // 页面访问
+        case 1: // 页面访问统计
           this.$router.push({
             path: '/user/customer/customer-page-list',
             query: { shopId: row.shopId }
           })
           break
-        case 5: // 弹窗样式
-          this.$router.push({
-            path: '/user/customer/customer-popup-edit',
-            query: { shopId: row.shopId }
-          })
-          break
-        case 6:
+        case 2: // 设计统计状态
           this.renewCustome.id = row.id
           this.renewCustome.status = row.status
           console.log('renewCustome', this.renewCustome)
           this.dialogFormVisible = true
           break
-        case 7: // 跳转数据报表
+        case 3: // 相关商品
           this.$router.push({
-            path: '/user/customer/market-report-list',
-            query: { marketId: row.id, shopName: row.shopName }
+            path: '/user/customer/customer-goods-list',
+            query: { id: row.id, shopId: row.shopId, shopName: row.shopName }
           })
           break
-        case 8: // 上传LOGO
-          this.logoForm.id = row.id
-          this.logoFormVisible = true
-          break
       }
-    },
-    // 上传图标事件
-    handleSuccess(res, file) {
-      this.loadImgLoading = true
-      this.$nextTick(() => {
-        setTimeout(() => {
-          this.logoForm.logo = res.data
-        }, 1000 * 2)
-      })
-    },
-    // 对上传图片的大小、格式进行限制
-    beforeUpload(file) {
-      const isJPG = file.type === 'image/jpeg'
-      const isJPG2 = file.type === 'image/jpg'
-      const isPNG = file.type === 'image/png'
-      const isLt5M = file.size / 1024 / 1024 < 5
-      if (!isJPG && !isJPG2 && !isPNG) {
-        this.$message.error('只支持jpg或png格式图片')
-      }
-      if (!isLt5M) {
-        this.$message.error('请上传5MB以内的图片!')
-      }
-      return (isJPG || isJPG2 || isPNG) && isLt5M
-    },
-    reloadImage() {
-      this.loadImgLoading = true
-      setTimeout(() => {
-        this.logoForm.logo = this.logoForm.logo.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
-      }, 1000 * 2)
-    },
-    loadSucess() {
-      this.loadImgLoading = false
     }
   }
 }

src/views/user/customer/market-report-list.vue

@@ -19,7 +19,7 @@
       </div>
     </div>
     <div class="tags-sms">
-      <span class="tags-sms-span">供应商：{{ shopName }}</span>
+      <span class="tags-sms-span">商品{{ productName }}</span>
     </div>
     <!-- 列表 -->
     <el-table v-loading="isLoading" :data="list" border style="width: 100%" height="600">
@@ -74,7 +74,7 @@ export default {
   filters: {},
   data() {
     return {
-      shopName: this.$route.query.shopName,
+      productName: this.$route.query.productName,
       isLoading: true,
       time: '',
       listQuery: {
@@ -162,12 +162,17 @@ export default {
       if (type === 'add') {
         this.$router.push({
           path: '/user/customer/market-edit',
-          query: { marketId: this.listQuery.marketId, type: type, shopName: this.$route.query.shopName }
+          query: { marketId: this.listQuery.marketId, type: type, productName: this.$route.query.productName }
         })
       } else {
         this.$router.push({
           path: '/user/customer/market-edit',
-          query: { marketId: this.listQuery.marketId, type: type, id: row.id, shopName: this.$route.query.shopName }
+          query: {
+            marketId: this.listQuery.marketId,
+            type: type,
+            id: row.id,
+            productName: this.$route.query.productName
+          }
         })
       }
     }

src/views/user/record/components/detail-dialog.vue

@@ -0,0 +1,188 @@
+<template>
+  <el-dialog
+    title="用户行为详情"
+    :visible.sync="visible"
+    width="1300px"
+    :close-on-click-modal="false"
+    :show-close="false"
+  >
+    <div v-if="summarize.length > 0" class="tags-sms">
+      <span class="tags-sms-span">意向标签：</span>
+      <el-tag v-for="(sum, sumIndex) in summarize" :key="sumIndex" effect="dark" style="font-size: 15px; margin: 0 2px">
+        {{ sum.value }}
+      </el-tag>
+    </div>
+    <!-- 列表 -->
+    <el-table v-loading="isLoading" :data="list" border height="400px">
+      <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: 80px; height: 80px" />
+          </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="[10, 20, 30, 100]"
+      :page-size="100"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="fetchBehaviorList"
+    />
+    <div slot="footer">
+      <el-button type="primary" :disabled="disabled" @click="handleCanle"> 关闭 </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { fetchBehaviorList } from '@/api/user/record/record'
+
+export default {
+  name: 'SearchDialog',
+  filters: {
+    accessSourceFilters(value) {
+      // 公司类型
+      const map = {
+        0: '直接访问',
+        1: '百度搜索',
+        2: '360搜索',
+        3: '谷歌搜索',
+        4: '神马搜索',
+        5: '头条搜索',
+        6: '搜狗搜索',
+        7: '直接访问'
+      }
+      return map[value]
+    }
+  },
+  props: {
+    detailQuery: {
+      type: Object,
+      // eslint-disable-next-line vue/require-valid-default-prop
+      default: {}
+    }
+  },
+  data() {
+    return {
+      visible: true,
+      isLoading: true,
+      summarize: [],
+      listQuery: {
+        ip: '',
+        accessDate: '',
+        userId: 0,
+        pageNum: 1,
+        pageSize: 100
+      },
+      list: [],
+      total: 0
+    }
+  },
+  computed: {
+    disabled() {
+      return this.productRadio === null
+    }
+  },
+  created() {
+    this.listQuery = { ...this.listQuery, ...this.detailQuery }
+    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)
+        const data = res.data
+        this.summarize = data.label
+        this.list = data.page.results
+        this.total = data.page.totalRecord
+        this.isLoading = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    handleRelevanceShop(value) {
+      console.log('va', value.split(','))
+      return value.split(',')
+    },
+    handleCanle() {
+      // 取消弹窗
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.tags-sms {
+  width: 100%;
+  height: auto;
+  font-size: 14px;
+  color: #666666;
+  line-height: 40px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  padding: 5px;
+  border: 1px solid #e1e1e1;
+}
+.tags-sms .tags-sms-span {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333333;
+}
+</style>

src/views/user/record/list.vue

@@ -79,7 +79,7 @@
         <div class="filter-control">
           <span>供应商标签:</span>
           <el-select v-model="tagsList" multiple filterable placeholder="请选择" @change="handleTagsOptions">
-            <el-option v-for="item in tagsOptions" :key="item.id" :label="item.value" :value="item.value" />
+            <el-option v-for="(item, index) in tagsOptions" :key="index" :label="item.value" :value="item.value" />
           </el-select>
         </div>
         <div class="filter-control">
@@ -110,6 +110,20 @@
             @change="getList"
           />
         </div>
+        <div class="filter-control">
+          <span>注册时间:</span>
+          <el-date-picker
+            v-model="time1"
+            type="daterange"
+            unlink-panels
+            value-format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+            @change="getList"
+          />
+        </div>
         <div class="filter-control">
           <el-button type="primary" @click="getList">查询</el-button>
           <el-button v-permission="'keyword:list:export'" type="primary" @click="handleExport"> 导出 </el-button>
@@ -212,6 +226,8 @@
         @pagination="fetchRecordList"
       />
     </el-tabs>
+    <!--  详情弹窗 -->
+    <detail-dialog v-if="dialogVisible" ref="detailDialog" :detail-query="detailQuery" @cancel="handleCancel" />
   </div>
 </template>
 
@@ -221,6 +237,7 @@ import { fetchRecordList, getKeyword, getPageType } from '@/api/user/record/reco
 import { fetchShopRelevanceList, searchBehaviorList } from '@/api/user/supplier/supplier'
 import { export_json_to_excel } from '@/vendor/Export2Excel'
 import pickerOptions from '@/utils/time-picker.js'
+import DetailDialog from './components/detail-dialog'
 const defaultListQuery = {
   todayType: 0, // 0 今日数据 1 以往数据
   ip: '', // 访问人ID
@@ -237,11 +254,16 @@ const defaultListQuery = {
   pageLabels: '', // 父级标签
   startTime: '',
   endTime: '',
+  registerStartTime: '', // 注册开始时间
+  registerEndTime: '', // 注册结束时间
   pageNum: 1,
   pageSize: 100
 }
 export default {
   name: 'RecordList',
+  components: {
+    DetailDialog
+  },
   filters: {
     companyTypeFilters(value) {
       // 公司类型
@@ -267,6 +289,7 @@ export default {
       isLoading: true,
       pickerOptions,
       time: [],
+      time1: [],
       listQuery: Object.assign({}, defaultListQuery),
       shopListQuery: {
         shopName: '',
@@ -285,7 +308,9 @@ export default {
       tagsList: [],
       tabsCurrent: 0,
       tableHeight: window.innerHeight - 120, // 表格动态高度
-      screenHeight: window.innerHeight // 内容区域高度
+      screenHeight: window.innerHeight, // 内容区域高度
+      dialogVisible: false,
+      detailQuery: {}
     }
   },
   computed: {},
@@ -379,6 +404,13 @@ export default {
         this.listQuery.startTime = ''
         this.listQuery.endTime = ''
       }
+      if (this.time1 && this.time1.length > 0) {
+        this.listQuery.registerStartTime = this.time1[0]
+        this.listQuery.registerEndTime = this.time1[1]
+      } else {
+        this.listQuery.registerStartTime = ''
+        this.listQuery.registerEndTime = ''
+      }
       this.fetchRecordList()
       this.fetchShopRelevanceList()
       this.searchBehaviorList()
@@ -442,12 +474,18 @@ export default {
     },
     // 查看详情
     handleRecordDetail(row) {
-      this.$router.push({
-        path: '/user/detail-list',
-        query: { ip: row.ip, accessDate: row.accessDate, userId: row.userId }
-      })
+      console.log('111111111')
+      this.detailQuery = { ip: row.ip, accessDate: row.accessDate, userId: row.userId }
+      this.dialogVisible = true
+      // this.$router.push({
+      //   path: '/user/detail-list',
+      //   query: { ip: row.ip, accessDate: row.accessDate, userId: row.userId }
+      // })
+    },
+    // 关闭详情弹窗
+    handleCancel() {
+      this.dialogVisible = false
     },
-
     // 导出
     async handleExport() {
       if (this.tabsCurrent === 0) {