update: AI营销-客户明细

src/router/modules/ai.js

@@ -39,6 +39,16 @@ export default {
       path: 'logs/:id',
       name: '提交日志',
       component: () => import('../../views/ai/logs.vue')
+    },
+    {
+      path: 'ai-data-report/:id',
+      name: '数据统计',
+      component: () => import('../../views/ai/ai-data-report.vue')
+    },
+    {
+      path: 'ai-data-detail/:id',
+      name: '详情',
+      component: () => import('../../views/ai/ai-data-detail.vue')
     }
   ]
 };

src/service/api/aiApi.js

@@ -39,3 +39,5 @@ export const getMemberCount = params => requests(PREFIX + '/get-member-count', p
 
 // 获取提交并执行日志、提交未执行日志
 export const getLogs = params => requests('/api-marketing/page-activity-event-exec-log', params, true, false, 'get');
+
+export const getCustomDetail = params => requests('/api-marketing/statistics/page-data-statistics-custom-detail', params, true, false, 'get');

src/views/ai/ai-data-detail.vue

+<template>
+  <div class="data-detail">
+    <dm-sub-title style="margin-bottom: 5px">客户明细</dm-sub-title>
+    <div class="page-tip">消费金额字段每天更新 1 次</div>
+    <el-input v-model="search.search" @change="handleCurrentChange" type="text" placeholder="请输入姓名/昵称/手机号/会员卡号" prefix-icon="el-icon-search" clearable class="search-bar"></el-input>
+    <el-table :data="tableData" v-loading="loading">
+      <el-table-column label="基本信息" min-width="200px" show-overflow-tooltip>
+        <div slot-scope="{ row }" class="member-info">
+          <img class="member-logo" v-if="row.memberImage" :src="row.memberImage" alt="" />
+          <img class="member-logo" v-else src="@/assets/img/head_default.png" alt="" />
+          <div>
+            <p class="member-name">
+              {{ row.memberNick || '--' }}<span class="member-subname" v-if="row.memberName">({{ row.memberName }})</span>
+            </p>
+            <p class="member-name">{{ row.memberMobile || '--' }}</p>
+          </div>
+        </div>
+      </el-table-column>
+      <el-table-column label="会员卡号" min-width="130px" prop="memberCard" :formatter="(row, col, val) => val || '--'"></el-table-column>
+      <el-table-column label="会员等级" min-width="90px" prop="memberGradeName" :formatter="(row, col, val) => val || '--'"></el-table-column>
+      <el-table-column label="服务门店" min-width="190px" prop="mainStoreName" :formatter="(row, col, val) => val || '--'"></el-table-column>
+      <el-table-column label="通话状态" min-width="80px" prop="aiStatus" show-overflow-tooltip :formatter="(row, col, val) => formatAiStatus(val)"></el-table-column>
+      <el-table-column label="通话时长" min-width="80px" prop="aiDurationSec" :formatter="(row, col, val) => (val > 0 ? `${val}s` : '0s')"></el-table-column>
+      <el-table-column label="意向标签" min-width="130px" prop="aiLabel" :formatter="(row, col, val) => val || '--'"></el-table-column>
+      <el-table-column label="消费金额(实付)" min-width="120px" prop="orderPayAmount" :formatter="(row, col, val) => (val == null ? '--' : val)"></el-table-column>
+      <el-table-column label="外呼时间" min-width="100px" prop="aiTime">
+        <template slot-scope="{ row }">
+          <p>{{ formatDateTimeByType(row.aiTime, 'yyyy-MM-dd') || '--' }}</p>
+          <p>{{ formatDateTimeByType(row.aiTime, 'HH:mm:ss') || '--' }}</p>
+        </template>
+      </el-table-column>
+      <el-table-column label="短信发送时间" min-width="110px" prop="smsSendTime">
+        <template slot-scope="{ row }">
+          <p>{{ formatDateTimeByType(row.smsSendTime, 'yyyy-MM-dd') || '--' }}</p>
+          <p>{{ formatDateTimeByType(row.smsSendTime, 'HH:mm:ss') || '--' }}</p>
+        </template>
+      </el-table-column>
+    </el-table>
+    <dm-pagination v-if="total > 0" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total" :current-page="search.pageNum" :page-size="search.pageSize" :page-sizes="[20, 40, 60, 80]" layout="total, sizes, prev, pager, next"></dm-pagination>
+  </div>
+</template>
+
+<script>
+import { formatDateTimeByType } from '@/utils/index.js';
+import { getCustomDetail } from '@/service/api/aiApi.js';
+
+export default {
+  name: 'AiDataDetail',
+  data() {
+    return {
+      formatDateTimeByType,
+      search: {
+        activityId: '',
+        search: '', // 姓名、昵称 、手机号、会员卡号
+        pageNum: 1,
+        pageSize: 20
+      },
+      tableData: [],
+      total: 0,
+      loading: false
+    };
+  },
+  created() {
+    this.search.activityId = this.$route.params.id;
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.loading = true;
+      getCustomDetail(this.search)
+        .then(res => {
+          const { result, totalCount } = res.result;
+          this.total = totalCount;
+          this.tableData = result;
+        })
+        .finally(() => (this.loading = false));
+    },
+    handleCurrentChange(pageNum) {
+      this.search.pageNum = pageNum;
+    },
+    handleSizeChange(pageSize) {
+      this.search.pageSize = pageSize;
+      this.handleCurrentChange(1);
+    },
+    formatAiStatus(state) {
+      const status = {
+        1: '已提交',
+        2: '已删除',
+        3: '已接通',
+        4: '线路问题',
+        5: '被叫问题'
+      };
+      return status[state] || '--';
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.data-detail {
+  padding: 20px;
+  .search-bar {
+    margin-bottom: 20px;
+    width: 260px;
+  }
+  .member-info {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    .member-logo {
+      flex-shrink: 0;
+      margin-right: 10px;
+      width: 40px;
+      height: 40px;
+      border-radius: 40px;
+      overflow: hidden;
+    }
+    .member-name {
+      font-size: 14px;
+      font-weight: 400;
+      color: #303133;
+      line-height: 20px;
+      .member-subname {
+        color: #909399;
+      }
+    }
+  }
+}
+</style>

src/views/ai/ai-data-report.vue

+<template>
+  <div>数据统计</div>
+</template>