feat(credit): 添加小程序客户用户信息展示功能

- 在模型中增加昵称、头像、手机号字段
- 实现用户信息表格列，展示头像、昵称和手机号
- 添加用户信息样式布局
- 更新导出数据配置，包含新的用户信息字段
- 调整表格列宽度和对齐方式以优化显示效果

src/api/credit/creditMpCustomer/model/index.ts

@@ -40,6 +40,12 @@ export interface CreditMpCustomer {
   deleted?: number;
   // 用户ID
   userId?: number;
+  // 昵称
+  nickname?: string;
+  // 头像
+  avatar?: string;
+  // 手机号
+  phone?: string;
   // 租户id
   tenantId?: number;
   // 创建时间

src/views/credit/creditMpCustomer/index.vue

@@ -22,9 +22,32 @@
           />
         </template>
         <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'userInfo'">
+            <div class="user-info">
+              <a-avatar :size="48" :src="record.avatar">
+                <template v-if="!record.avatar" #icon>
+                  <UserOutlined/>
+                </template>
+              </a-avatar>
+              <div class="user-details">
+                <h4 class="username">{{ record.nickname }}</h4>
+                <p class="user-phone">{{ record.phone }}</p>
+              </div>
+            </div>
+          </template>
           <template v-if="column.key === 'image'">
             <a-image :src="record.image" :width="50"/>
           </template>
+          <template v-if="column.key === 'files'">
+            <a-space>
+              <a-image
+                v-for="(file, index) in record.files"
+                :key="index"
+                :src="file"
+                :width="50"
+              />
+            </a-space>
+          </template>
           <template v-if="column.key === 'status'">
             <a-tag v-if="record.status === 0" color="green">显示</a-tag>
             <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
@@ -53,7 +76,7 @@
 <script lang="ts" setup>
 import {createVNode, ref, computed} from 'vue';
 import {message, Modal} from 'ant-design-vue';
-  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import {ExclamationCircleOutlined, UserOutlined} from '@ant-design/icons-vue';
 import type {EleProTable} from 'ele-admin-pro';
 import {toDateString} from 'ele-admin-pro';
 import type {
@@ -116,6 +139,12 @@
     key: 'id',
     width: 90,
   },
+  {
+    title: '用户信息',
+    dataIndex: 'userInfo',
+    key: 'userInfo',
+    width: 300,
+  },
   {
     title: '拖欠方',
     dataIndex: 'toUser',
@@ -124,12 +153,16 @@
   {
     title: '拖欠金额',
     dataIndex: 'price',
-      key: 'price'
+    key: 'price',
+    width: 120,
+    align: 'center',
+    customRender: ({ text }) => '￥' + text
   },
   {
     title: '拖欠年数',
     dataIndex: 'years',
-      key: 'years'
+    key: 'years',
+    align: 'center'
   },
   // {
   //   title: '链接',
@@ -152,7 +185,7 @@
     title: '所在城市',
     dataIndex: 'city',
     key: 'city',
-      ellipsis: true
+    align: 'center'
   },
   // {
   //   title: '所在辖区',
@@ -164,7 +197,7 @@
     title: '附件',
     dataIndex: 'files',
     key: 'files',
-      ellipsis: true
+    align: 'center'
   },
   // {
   //   title: '是否有数据',
@@ -220,10 +253,12 @@
 // 默认显示的核心列（最多5个主要字段）
 const defaultVisibleColumns = [
   'id',
+  'userInfo',
   'toUser',
   'price',
   'years',
   'city',
+  'files',
   // 'status',
   'createTime',
   'action'
@@ -359,4 +394,28 @@
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.user-info {
+  display: flex;
+  align-items: center;
+  padding: 6px;
+
+  .user-details {
+    margin-left: 6px;
+    flex: 1;
+
+    .username {
+      margin: 0;
+      color: #333;
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .user-phone {
+      margin: 0;
+      color: #666;
+      font-size: 14px;
+    }
+  }
+}
+</style>