商品详情用户统计

src/api/user/record/record.js

@@ -7,6 +7,13 @@ export function fetchRecordList(params) {
     params
   })
 }
+export function getRecordProductCount(params) {
+  return request({
+    url: '/user/behavior/record/product/count',
+    method: 'get',
+    params
+  })
+}
 export function fetchBehaviorList(params) {
   return request({
     url: '/user/behavior/record/recordList',
@@ -14,6 +21,13 @@ export function fetchBehaviorList(params) {
     params
   })
 }
+export function fetchBehaviorProductDetail(params) {
+  return request({
+    url: '/user/behavior/record/count/detail',
+    method: 'get',
+    params
+  })
+}
 
 export function importExportToday(params) {
   return request({

src/router/modules/user.js

@@ -16,6 +16,12 @@ const userRouter = {
       component: () => import('@/views/user/record/list'),
       meta: { title: '用户行为记录', icon: 'international', activeMenu: '/user/list' }
     },
+    {
+      path: 'record-product-list',
+      name: 'RecordProductList',
+      component: () => import('@/views/user/record/record-product-list'),
+      meta: { title: '商品浏览统计', icon: 'international', activeMenu: '/user/list' }
+    },
     {
       path: 'detail-list',
       hidden: true,

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

@@ -119,7 +119,7 @@ export default {
       listQuery: {
         ip: '',
         accessDate: '',
-        userId: 0,
+        userId: '',
         pageNum: 1,
         pageSize: 100
       },

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

@@ -0,0 +1,137 @@
+<template>
+  <el-dialog
+    title="商品用户详情"
+    :visible.sync="visible"
+    width="1300px"
+    :close-on-click-modal="false"
+    :show-close="false"
+  >
+    <!-- 列表 -->
+    <el-table v-loading="isLoading" :data="list" border height="500px">
+      <el-table-column prop="region" label="地区" align="center">
+        <template slot-scope="{ row }">
+          {{ row.region ? row.region : "---" }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="accessClient" label="访问客户端" align="center" />
+      <el-table-column prop="companyType" label="公司类型" align="center" />
+      <el-table-column prop="corporateName" label="机构名称" align="center">
+        <template slot-scope="{ row }">
+          {{ row.corporateName ? row.corporateName : "---" }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="contacts" label="联系人" align="center">
+        <template slot-scope="{ row }">
+          {{ row.contacts ? row.contacts : "---" }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="phoneNumber" label="手机号" align="center">
+        <template slot-scope="{ row }">
+          {{ row.phoneNumber ? row.phoneNumber : "---" }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="spName" label="所属协销" align="center" width="100">
+        <template slot-scope="{ row }">
+          {{ row.spName ? row.spName : "---" }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="lastAccessTime" label="最后访问时间" align="center" width="150" />
+      <el-table-column prop="accessDuration" label="访问时长" align="center" width="150" />
+    </el-table>
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[10]"
+      :page-size="10"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="fetchBehaviorProductDetail"
+    />
+    <div slot="footer">
+      <el-button type="primary" @click="handleCanle"> 关闭 </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { fetchBehaviorProductDetail } from '@/api/user/record/record'
+
+export default {
+  name: 'ProductDetailDialog',
+  filters: { },
+  props: {
+    detailQuery: {
+      type: Object,
+      // eslint-disable-next-line vue/require-valid-default-prop
+      default: {}
+    }
+  },
+  data() {
+    return {
+      visible: true,
+      isLoading: true,
+      listQuery: {
+        productId: '', // 商品ID
+        pageNum: 1,
+        pageSize: 10
+      },
+      list: [],
+      total: 0
+    }
+  },
+  computed: {
+
+  },
+  created() {
+    this.listQuery = { ...this.listQuery, ...this.detailQuery }
+    console.log('listQuery', this.listQuery)
+    this.getList()
+  },
+  methods: {
+    // 获取详情列表
+    getList() {
+      this.listQuery.pageNum = 1
+      this.fetchBehaviorProductDetail()
+    },
+    // 获取商品用户详情
+    async fetchBehaviorProductDetail() {
+      try {
+        this.isLoading = true
+        const res = await fetchBehaviorProductDetail(this.listQuery)
+        const data = res.data
+        this.list = data.results
+        this.total = data.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

@@ -115,7 +115,7 @@
             />
           </el-select>
         </div>
-        <div class="filter-control">
+        <!--<div class="filter-control">
           <span>页面类型:</span>
           <el-select v-model="listQuery.pageTypes" filterable @change="getList">
             <el-option value="" label="请选择" />
@@ -123,10 +123,10 @@
               v-for="item in typesOptions"
               :key="item.id"
               :label="item.pageType"
-              :value="item.pageType"
+              :value="item.id"
             />
           </el-select>
-        </div>
+        </div>-->
         <div v-if="tabsCurrent === 1" class="filter-control">
           <span>访问日期:</span>
           <el-date-picker

src/views/user/record/record-product-list.vue

@@ -0,0 +1,145 @@
+<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-date-picker
+          v-model="time"
+          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>
+      </div>
+    </div>
+    <!-- 列表 -->
+    <el-table v-loading="isLoading" :data="list" border style="width: 100%">
+      <el-table-column prop="productId" label="商品ID" align="center" width="200" />
+      <el-table-column prop="productImage" label="商品图片" align="center">
+        <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="productCount" label="商城总浏览次数" align="center">
+        <template slot-scope="{ row }">
+          <el-link type="primary" :underline="false">【{{ row.productCount }}】次</el-link>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" align="center" width="200">
+        <template slot-scope="{ row }">
+          <el-button type="primary" size="mini" style="margin: 2px" @click="handleOperate(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="getRecordProductCount"
+    />
+    <!--  详情弹窗 -->
+    <product-detail-dialog
+      v-if="dialogVisible"
+      ref="detailDialog"
+      :detail-query="detailQuery"
+      @cancel="handleCancel"
+    />
+  </div>
+</template>
+
+<script>
+import pickerOptions from '@/utils/time-picker.js'
+import { getRecordProductCount } from '@/api/user/record/record'
+import ProductDetailDialog from './components/product-detail-dialog'
+const defaultListQuery = {
+  productId: '', // 商品ID
+  beginTime: '', // 开始日期
+  endTime: '', // 结束日期
+  pageNum: 1,
+  pageSize: 20
+}
+export default {
+  name: 'RecordProductList',
+  components: {
+    ProductDetailDialog
+  },
+  filters: {},
+  data() {
+    return {
+      isLoading: true,
+      listQuery: Object.assign({}, defaultListQuery),
+      pickerOptions,
+      time: [],
+      list: [],
+      total: 0,
+      dialogVisible: false,
+      detailQuery: {}
+    }
+  },
+  computed: {},
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    // 获取列表
+    getList() {
+      this.listQuery.pageNum = 1
+      this.listQuery.beginTime = this.time[0]
+      this.listQuery.endTime = this.time[1]
+      this.getRecordProductCount()
+    },
+
+    // 获取商品列表
+    async getRecordProductCount() {
+      try {
+        this.isLoading = true
+        const res = await getRecordProductCount(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
+        this.isLoading = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 查看详情
+    handleOperate(row) {
+      this.detailQuery = { productId: row.productId }
+      this.dialogVisible = true
+    },
+    // 关闭详情弹窗
+    handleCancel() {
+      this.dialogVisible = false
+    }
+  }
+}
+</script>
+
+<style></style>