feat:查看微信记录

src/views/member/recent/cmp/like-page.vue

@@ -25,7 +25,23 @@
   </ContentWrap>
   <ContentWrap class="min-h-[500px]">
     <el-table v-loading="loading" :data="list" row-key="id">
-      <el-table-column label="操作人" align="center" prop="operatorMemberNickname" width="200px" />
+      <el-table-column label="操作人" align="center" width="200px">
+        <template #default="{ row }">
+          <div class="flex items-center gap-2">
+            <PreviewImage :src="row.operatorMemberAvatar" />
+            <div class="flex flex-col items-start">
+              <div class="table-cell">
+                <span>昵称:</span>
+                <span>{{ row.operatorMemberNickname }}</span>
+              </div>
+              <div class="table-cell">
+                <span>手机号:</span>
+                <span>{{ row.operatorMemberPhone }}</span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column label="描述" align="center">
         <template #default="{ row }">
           <div v-if="type === 'recent'">
@@ -41,6 +57,7 @@
             <span>在</span>
             <span class="color-red">{{ formatPast(row.createTime) }}</span>
             <span>收藏/喜欢了你</span>
+            <span>({{ row.memberNickname }})</span>
           </div>
         </template>
       </el-table-column>
@@ -142,4 +159,27 @@ const getList = async () => {
 onMounted(() => {
   getList()
 })
-</script>
+</script>
+
+<style lang="scss" scoped>
+.table-cell {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  span {
+    display: inline-block;
+    text-align: left;
+    font-size: 12px;
+  }
+
+  span:first-child {
+    width: 50px;
+  }
+
+  span:last-child {
+    flex: 1;
+    color: lightblue;
+  }
+}
+</style>

src/views/member/recent/cmp/look-wechat.vue

@@ -0,0 +1,171 @@
+<!-- 查看微信记录 -->
+<template>
+  <ContentWrap>
+    <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px" label-width="68px">
+      <el-form-item>
+        <el-form-item label="操作人" prop="operatorMemberNickname">
+          <el-input v-model="queryParams.operatorMemberNickname" placeholder="请输入操作人" clearable
+            @keyup.enter="handleQuery" class="!w-240px" />
+        </el-form-item>
+        <el-form-item label="操作时间" prop="createTime">
+          <el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
+            start-placeholder="开始日期" end-placeholder="结束日期"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-440px" />
+        </el-form-item>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+  <ContentWrap class="min-h-[500px]">
+    <el-table v-loading="loading" :data="list" row-key="id">
+      <el-table-column label="操作人" align="center" width="300px">
+        <template #default="{ row }">
+          <div class="flex items-center gap-2">
+            <PreviewImage :src="row.operatorMemberAvatar" />
+            <div class="flex flex-col items-start">
+              <div class="table-cell">
+                <span>昵称:</span>
+                <span>{{ row.operatorMemberNickname }}</span>
+              </div>
+              <div class="table-cell">
+                <span>手机号:</span>
+                <span>{{ row.operatorMemberPhone }}</span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="查看用户" align="center" width="300px">
+        <template #default="{ row }">
+          <div class="flex items-center gap-2">
+            <PreviewImage :src="row.memberAvatar" />
+            <div class="flex flex-col items-start">
+              <div class="table-cell">
+                <span>昵称:</span>
+                <span>{{ row.memberNickname }}</span>
+              </div>
+              <div class="table-cell">
+                <span>手机号:</span>
+                <span>{{ row.memberPhone }}</span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="描述" align="center">
+        <template #default="{ row }">
+          <span class="color-blue">{{ row.operatorMemberNickname }}</span>
+          <span>在</span>
+          <span class="color-red">{{ formatPast(row.createTime) }}</span>
+          <span>查看了</span>
+          <span>({{ row.memberNickname }})</span>
+          <span>的微信</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作时间" align="center" prop="createTime" :formatter="dateFormatter" width="180px" />
+    </el-table>
+  </ContentWrap>
+  <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
+    @pagination="getList" />
+
+</template>
+
+<script lang="ts" setup>
+import { FormInstance } from 'element-plus'
+
+import { dateFormatter, formatPast } from '@/utils/formatTime'
+
+import * as operationApi from "@/api/member/operation"
+
+const props = defineProps({
+  memberId: {
+    type: [String, Number],
+    default: ""
+  },
+})
+
+const queryFormRef = ref<FormInstance>()
+
+const total = ref(0)
+const loading = ref(true)
+const list = ref([])
+
+// 表单搜索
+const queryParams = ref({
+  bizType: "100",
+  operatorMemberNickname: "",
+  operatorMemberId: props.memberId,
+  createTime: [],
+  pageNo: 1,
+  pageSize: 10,
+})
+
+watch(() => props.memberId, (newVal) => {
+  if (newVal) {
+    queryParams.value.operatorMemberId = newVal as any
+    getList()
+  }
+})
+
+
+/** 搜索按钮操作 */
+const handleQuery = async () => {
+  queryParams.value.pageNo = 1
+  await getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const _params: any = {
+      ...queryParams.value
+    }
+    const data = await operationApi.OperationApi.getOperationPage(_params)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style lang="scss" scoped>
+.table-cell {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  span {
+    display: inline-block;
+    text-align: left;
+    font-size: 12px;
+  }
+
+  span:first-child {
+    width: 50px;
+  }
+
+  span:last-child {
+    flex: 1;
+    color: lightblue;
+  }
+}
+</style>

src/views/member/recent/cmp/shield-page.vue

@@ -25,11 +25,47 @@
   </ContentWrap>
   <ContentWrap class="min-h-[500px]">
     <el-table v-loading="loading" :data="list" row-key="id">
-      <el-table-column label="操作人" align="center" prop="operatorMemberNickname" width="200px" />
+      <el-table-column label="操作人" align="center" width="300px">
+        <template #default="{ row }">
+          <div class="flex items-center gap-2">
+            <PreviewImage :src="row.operatorMemberAvatar" />
+            <div class="flex flex-col items-start">
+              <div class="table-cell">
+                <span>昵称:</span>
+                <span>{{ row.operatorMemberNickname }}</span>
+              </div>
+              <div class="table-cell">
+                <span>手机号:</span>
+                <span>{{ row.operatorMemberPhone }}</span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="拉黑用户" align="center" width="300px">
+        <template #default="{ row }">
+          <div class="flex items-center gap-2">
+            <PreviewImage :src="row.memberAvatar" />
+            <div class="flex flex-col items-start">
+              <div class="table-cell">
+                <span>昵称:</span>
+                <span>{{ row.memberNickname }}</span>
+              </div>
+              <div class="table-cell">
+                <span>手机号:</span>
+                <span>{{ row.memberPhone }}</span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column label="描述" align="center">
         <template #default="{ row }">
           <div>
+            <span>你</span>
+            <span>(</span>
             <span class="color-blue">{{ row.operatorMemberNickname }}</span>
+            <span>)</span>
             <span>在</span>
             <span class="color-red">{{ formatPast(row.createTime) }}</span>
             <span>拉黑了</span>
@@ -110,4 +146,27 @@ const getList = async () => {
 onMounted(() => {
   getList()
 })
-</script>
+</script>
+
+<style lang="scss" scoped>
+.table-cell {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  span {
+    display: inline-block;
+    text-align: left;
+    font-size: 12px;
+  }
+
+  span:first-child {
+    width: 50px;
+  }
+
+  span:last-child {
+    flex: 1;
+    color: lightblue;
+  }
+}
+</style>

src/views/member/user/detail/index.vue

@@ -39,7 +39,9 @@
           <el-tab-pane label="黑名单">
             <ShieldPage :memberId="id" />
           </el-tab-pane>
-          <el-tab-pane v-if="false" label="查看微信记录" />
+          <el-tab-pane label="查看微信记录">
+            <LookWechatPage :memberId="id" />
+          </el-tab-pane>
           <el-tab-pane label="访问记录">
             <VisitPage type="user" :memberId="id" />
           </el-tab-pane>
@@ -106,6 +108,7 @@ import LikePage from "@/views/member/recent/cmp/like-page.vue"
 import ReportPage from "@/views/member/recent/cmp/report-page.vue"
 import ShieldPage from "@/views/member/recent/cmp/shield-page.vue"
 import VisitPage from "@/views/member/recent/cmp/visit-page.vue"
+import LookWechatPage from "@/views/member/recent/cmp/look-wechat.vue"
 
 defineOptions({ name: 'MemberDetail' })