优化：商户入驻申请列表页面显示内容

src/views/merchant/application/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="divBox">
     <el-card class="box-card">
+      <!--顶部搜索-->
       <div slot="header" class="clearfix">
         <div class="container">
           <el-form size="small" label-width="100px" :inline="true">
@@ -85,68 +86,73 @@
                 <el-button slot="append" icon="el-icon-search" class="el-button-solt" @click="getList(1)" />
               </el-input>
             </el-form-item>
-
           </el-form>
         </div>
       </div>
-      <el-table
-        v-loading="listLoading"
-        :data="tableData.data"
-        style="width: 100%"
-        size="small"
-        highlight-current-row
-        class="switchTable"
-      >
-        <el-table-column prop="mer_intention_id" label="ID" min-width="60" />
-        <el-table-column prop="mer_name" label="商户名称" min-width="150" />
-        <el-table-column prop="category_name" label="商户分类" min-width="150" />
-        <el-table-column prop="type_name" label="店铺类型" min-width="150" />
-        <el-table-column prop="name" label="商户姓名" min-width="100" />
-        <el-table-column prop="phone" label="联系方式" min-width="100" />
-        <el-table-column prop="create_time" label="申请时间" min-width="150" />
-        <el-table-column prop="create_time" label="资质图片" min-width="150">
+      <!--表单-->
+      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" highlight-current-row class="switchTable">
+        <el-table-column prop="mer_intention_id" label="ID" min-width="60" align="center"/>
+        <el-table-column label="申请人" min-width="280" align="center">
           <template slot-scope="scope">
-            <div class="demo-image__preview">
-              <el-image
-                v-for="(item, index) in scope.row.images"
-                :key="index"
-                :src="item"
-                class="mr5"
-                :preview-src-list="[item]"
-              />
+            <div class="user-content" v-if="scope.row.applicant">
+              <div class="user-avatar" v-if="scope.row.applicant.avatar && scope.row.applicant.avatar != 1">
+                <img :src="scope.row.applicant.avatar" />
+              </div>
+              <div class="user-info">
+                <div class="nickname">{{ scope.row.applicant.nickname }}</div>
+                <div class="user-id">ID：{{ scope.row.applicant.uid }}</div>
+              </div>
             </div>
           </template>
         </el-table-column>
-        <el-table-column label="状态" min-width="150">
+        <el-table-column label="管理员" min-width="280" align="center">
+          <template slot-scope="scope">
+            <div class="user-content" v-if="scope.row.manage">
+              <div class="user-avatar" v-if="scope.row.manage.avatar && scope.row.manage.avatar != 1">
+                <img :src="scope.row.manage.avatar" />
+              </div>
+              <div class="user-info">
+                <div class="nickname">{{ scope.row.manage.nickname }}</div>
+                <div class="user-id">ID：{{ scope.row.manage.uid }}</div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="商户信息" min-width="180" align="left">
+          <template slot-scope="scope">
+            名称：{{scope.row.mer_name || ''}}<br />
+            分类：{{scope.row.category_name || ''}}<br />
+            类型：{{scope.row.type_name || ''}}<br />
+          </template>
+        </el-table-column>
+        <el-table-column label="联系人信息" min-width="120" align="center">
+          <template slot-scope="scope">
+            {{scope.row.name || ''}}<br />
+            {{scope.row.phone || ''}}<br />
+          </template>
+        </el-table-column>
+        <el-table-column prop="create_time" label="申请时间" min-width="150" align="center"/>
+        <el-table-column label="资质图片" min-width="110">
+          <template slot-scope="scope">
+            <div class="qualification-image">
+              <el-image v-for="(item, index) in scope.row.images" :key="index" :src="item" class="mr5" :preview-src-list="[item]" />
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" min-width="150" align="center">
           <template slot-scope="scope">
             <el-tag v-if="scope.row.status == 1" type="success">通过</el-tag>
             <el-tag v-if="scope.row.status == 0" type="info">未处理</el-tag>
             <el-tag v-if="scope.row.status == 2" type="warning">未通过</el-tag>
-            <div v-if="scope.row.status == 2">原因：{{ scope.row.fail_msg }}</div>
+            <div v-if="scope.row.status == 2">{{ scope.row.fail_msg }}</div>
           </template>
         </el-table-column>
         <el-table-column prop="mark" label="备注" min-width="150" />
-        <el-table-column label="操作" min-width="280" fixed="right" align="center">
+        <el-table-column label="操作" min-width="150" fixed="right" align="center">
           <template slot-scope="scope">
-            <el-button
-              v-if="scope.row.status == 0"
-              type="text"
-              size="small"
-              @click="onchangeIsShow(scope.row.mer_intention_id)"
-              >审核</el-button
-            >
-            <el-button
-              type="text"
-              size="small"
-              @click="onEdit(scope.row.mer_intention_id)"
-              >备注</el-button
-            >
-            <el-button
-              type="text"
-              size="small"
-              @click="handleDelete(scope.row.mer_intention_id)"
-              >删除</el-button
-            >
+            <el-button v-if="scope.row.status == 0" type="text" size="small" @click="onchangeIsShow(scope.row.mer_intention_id)">审核</el-button>
+            <el-button type="text" size="small" @click="onEdit(scope.row.mer_intention_id)">备注</el-button>
+            <el-button type="text" size="small" @click="handleDelete(scope.row.mer_intention_id)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -167,15 +173,7 @@
 
 <script>
 
-import {
-  intentionLstApi,
-  auditApi,
-  intentionDelte,
-  intentionStatusApi,
-  getstoreTypeApi,
-  getMerCateApi
-} from "@/api/merchant";
-import { categoryListApi } from "@/api/product";
+import {intentionLstApi, auditApi, intentionDelte, intentionStatusApi, getstoreTypeApi, getMerCateApi} from "@/api/merchant";
 import { fromList, statusList } from "@/libs/constants.js";
 import { roterPre } from "@/settings";
 export default {
@@ -308,7 +306,65 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.qualification-image{
+  width: 100%;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
 /deep/ table .el-image {
   display: inline-block !important;
 }
+.user-content{
+  --user-content-height-: 80px;
+
+  height: var(--user-content-height-);
+  width: 100%;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  .user-avatar{
+    height: var(--user-content-height-);
+    width: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    img{
+      height: 80%!important;
+      width: 80%!important;
+      border-radius: 50% !important;
+    }
+  }
+  .user-info{
+    width: calc(100% - var(--user-content-height-));
+    height: var(--user-content-height-);
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: flex-start;
+    .nickname{
+      width: 100%;
+      text-align: left;
+      font-size: 15px;
+      font-weight: bold;
+      line-height: calc(var(--user-content-height- * 65%));
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .user-id{
+      width: 100%;
+      text-align: left;
+      font-size: 13px;
+      line-height: calc(var(--user-content-height- * 35%));
+    }
+  }
+}
 </style>