优化：财务 - 提现管理页面显示内容优化

src/views/accounts/extract/index.vue

@@ -37,53 +37,74 @@
             </div>
         </div>
         <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini" class="table" highlight-current-row>
-            <el-table-column prop="extract_id" label="序号" width="60" />
-            <el-table-column label="二维码" min-width="80">
-                <template slot-scope="scope">
-                    <div class="demo-image__preview">
-                        <el-image v-if="scope.row.extract_pic" :src="scope.row.extract_pic" :preview-src-list="[scope.row.extract_pic]" />
+          <el-table-column prop="extract_id" label="ID" width="80" />
+          <el-table-column label="用户信息" min-width="230" align="center">
+            <template slot-scope="scope">
+              <div class="user-content">
+                <div class="user-avatar">
+                  <img :src="scope.row.user.avatar || moren" />
+                </div>
+                <div class="user-info">
+                  <div class="nickname">{{ scope.row.user.nickname }}</div>
+                  <div class="agent-type-text">
+                    <el-tag type="info" effect="dark" size="small">{{ scope.row.user.uid }}</el-tag>
+                    <el-tag v-if="Number(scope.row.agent_type) == 7 && scope.row.mer" type="success" effect="dark" size="small">{{ scope.row.mer.mer_name }}</el-tag>
+                    <el-tag v-if="Number(scope.row.agent_type) == 8 && Object.values(scope.row.merList).length > 0" type="success" effect="dark" size="small">
+                      {{ scope.row.merList[0].mer_name }}
+                      {{ Object.values(scope.row.merList).length > 1 ? '+'+Object.values(scope.row.merList).length : '' }}
+                    </el-tag>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="提现信息" min-width="300" align="left">
+            <template slot-scope="scope">
+              提现方式：{{ scope.row.extract_type | extractTypeFilter }}<br />
+              提现金额：{{ scope.row.extract_price }}<br />
+              手续费：{{ scope.row.withdraw_commission || 0 }}<br />
+            </template>
+          </el-table-column>
+          <el-table-column label="账户信息" min-width="300" align="left">
+            <template slot-scope="scope">
+              <div v-if="scope.row.extract_type == 0">
+                <!--银行卡-->
+                账户类型：{{ scope.row.bank_type == 1 ? '企业账户' : '个人账户' }}<br />
+                {{ scope.row.bank_type == 1 ? '开户名称' : '持卡人' }}：{{ scope.row.real_name }}<br />
+                {{ scope.row.bank_type == 1 ? '开户行' : '支行信息' }}：{{ scope.row.bank_address }}<br />
+                {{ scope.row.bank_type == 1 ? '账号' : '卡号' }}：{{ scope.row.bank_code }}<br />
+                {{ scope.row.bank_type == 1 ? '' : '银行名称：' + scope.row.bank_name }}
+              </div>
+              <div v-if="scope.row.extract_type == 1">
+                <!--微信-->
 
-                    </div>
-                </template>
-            </el-table-column>
-            <el-table-column prop="user.nickname" label="用户信息" min-width="150" />
-            <el-table-column prop="uid" label="用户UID" min-width="150" />
-             <el-table-column prop="real_name" label="户名" min-width="150" />
-            <el-table-column prop="extract_price" label="提现金额" min-width="120" />
-            <el-table-column label="提现方式" min-width="100">
-                <template slot-scope="scope">
-                    <span>{{ scope.row.extract_type | extractTypeFilter }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column label="银行名称" min-width="100">
-                <template slot-scope="scope">
-                    <span v-if="scope.row.extract_type === 0">{{ (scope.row.bank_name&&scope.row.bank_address) ? scope.row.bank_name+scope.row.bank_address : scope.row.bank_address }}</span>
-                    <span v-else>-</span>
-                </template>
-            </el-table-column>
-            <el-table-column label="账号" min-width="100">
-                <template slot-scope="scope">
-                    <span v-if="scope.row.extract_type==0">{{scope.row.bank_code }}</span>
-                    <span v-else-if="scope.row.extract_type==2">{{scope.row.alipay_code }}</span>
-                    <span v-else-if="scope.row.extract_type==1">{{scope.row.wechat }}</span>
-                    <span v-else></span>
-                </template>
-            </el-table-column>
-            <el-table-column label="审核状态" min-width="200">
-                <template slot-scope="scope">
-                    <span class="spBlock">{{ scope.row.status | extractStatusFilter }}</span>
-                    <template v-if="scope.row.status === 0">
-                        <el-button type="danger" icon="el-icon-close" size="mini" @click="onExamine(scope.row.extract_id)">未通过</el-button>
-                        <el-button type="primary" icon="el-icon-check" size="mini" @click="ok(scope.row.extract_id)">通过</el-button>
-                    </template>
-                </template>
-            </el-table-column>
-            <el-table-column label="拒绝原因" min-width="150">
-                <template slot-scope="scope">
-                    <span class="spBlock">{{ scope.row.fail_msg ? scope.row.fail_msg : '-' }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column prop="create_time" label="添加时间" min-width="150" />
+
+              </div>
+              <div v-if="scope.row.extract_type == 2">
+                <!--支付宝-->
+                账号：{{scope.row.alipay_code }} <br />
+                <div class="demo-image__preview">
+                  <el-image v-if="scope.row.extract_pic" :src="scope.row.extract_pic" :preview-src-list="[scope.row.extract_pic]" />
+                </div>
+              </div>
+              <div v-if="scope.row.extract_type == 3">-</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="审核状态" min-width="200">
+              <template slot-scope="scope">
+                  <span class="spBlock">{{ scope.row.status | extractStatusFilter }}</span>
+                  <template v-if="scope.row.status === 0">
+                      <el-button type="danger" icon="el-icon-close" size="mini" @click="onExamine(scope.row.extract_id)">未通过</el-button>
+                      <el-button type="primary" icon="el-icon-check" size="mini" @click="ok(scope.row.extract_id)">通过</el-button>
+                  </template>
+              </template>
+          </el-table-column>
+          <el-table-column label="拒绝原因" min-width="150">
+              <template slot-scope="scope">
+                  <span class="spBlock">{{ scope.row.fail_msg ? scope.row.fail_msg : '-' }}</span>
+              </template>
+          </el-table-column>
+          <el-table-column prop="create_time" label="添加时间" min-width="150" />
         </el-table>
         <div class="block">
             <el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="tableFrom.limit" :current-page="tableFrom.page" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange" @current-change="pageChange" />
@@ -265,8 +286,76 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .selWidth {
     width: 300px;
 }
+.user-content{
+  --user-content-height-: 80px;
+
+  height: var(--user-content-height-);
+  width: 100%;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  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{
+    max-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%;
+      height: 25px;
+      line-height: 25px;
+      text-align: left;
+      font-size: 15px;
+      font-weight: bold;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: inline-flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      align-items: center;
+      .user-id{
+        color: #fff;
+        background-color: #409eff;
+        border-color: #409eff;
+        height: 18px;
+        line-height: 20px;
+        font-size: 13px;
+        padding: 0 5px;
+        border-radius: 5px;
+        margin-left: 10px;
+        width: max-content!important;
+      }
+    }
+    .user-id{
+      width: 100%;
+      text-align: left;
+      font-size: 13px;
+      line-height: calc(var(--user-content-height- * 35%));
+    }
+  }
+}
 </style>