优化：平台抽成记录列表查看内容样式

优化：分销商列表查看内容样式

src/views/marketing/platformCommission/commissionRecord/index.vue

@@ -49,38 +49,38 @@
         </el-table-column>
         <el-table-column label="平台抽成" prop="mer_name" min-width="150" align="left">
           <template slot-scope="scope">
-            抽成金额：{{ scope.row.platform_commission_money || '0.00' }}<br />
-            抽成比例：{{ scope.row.platform_commission_rate || '0' }}%
+            <el-tag type="success" effect="plain">金额：{{ scope.row.platform_commission_money || '0.00' }}</el-tag>
+            <el-tag effect="plain" class="rate-num">比例：{{ scope.row.platform_commission_rate || '0' }}%</el-tag>
           </template>
         </el-table-column>
         <el-table-column label="平台分佣" prop="mer_name" min-width="150" align="left">
           <template slot-scope="scope">
-            抽成金额：{{ scope.row.commission_platform_money || '0.00' }}<br />
-            抽成比例：{{ scope.row.commission_platform_rate || '0' }}%
+            <el-tag type="success" effect="plain">金额：{{ scope.row.commission_platform_money || '0.00' }}</el-tag>
+            <el-tag effect="plain" class="rate-num">比例：{{ scope.row.commission_platform_rate || '0' }}%</el-tag>
           </template>
         </el-table-column>
         <el-table-column label="合伙人分佣" prop="mer_name" min-width="150" align="left">
           <template slot-scope="scope">
-            抽成金额：{{ scope.row.commission_partner_money || '0.00' }}<br />
-            抽成比例：{{ scope.row.commission_partner_rate || '0' }}%
+            <el-tag type="success" effect="plain">金额：{{ scope.row.commission_partner_money || '0.00' }}</el-tag>
+            <el-tag effect="plain" class="rate-num">比例：{{ scope.row.commission_partner_rate || '0' }}%</el-tag>
           </template>
         </el-table-column>
         <el-table-column label="招商员分佣" prop="mer_name" min-width="150" align="left">
           <template slot-scope="scope">
-            抽成金额：{{ scope.row.commission_merchants_money || '0.00' }}<br />
-            抽成比例：{{ scope.row.commission_merchants_rate || '0' }}%
+            <el-tag type="success" effect="plain">金额：{{ scope.row.commission_merchants_money || '0.00' }}</el-tag>
+            <el-tag effect="plain" class="rate-num">比例：{{ scope.row.commission_merchants_rate || '0' }}%</el-tag>
           </template>
         </el-table-column>
         <el-table-column label="推广员分佣" prop="mer_name" min-width="150" align="left">
           <template slot-scope="scope">
-            抽成金额：{{ scope.row.commission_promoter_money || '0.00' }}<br />
-            抽成比例：{{ scope.row.commission_promoter_rate || '0' }}%
+            <el-tag type="success" effect="plain">金额：{{ scope.row.commission_promoter_money || '0.00' }}</el-tag>
+            <el-tag effect="plain" class="rate-num">比例：{{ scope.row.commission_promoter_rate || '0' }}%</el-tag>
           </template>
         </el-table-column>
         <el-table-column label="积分释放" prop="mer_name" min-width="150" align="left">
           <template slot-scope="scope">
-            抽成金额：{{ scope.row.commission_integral_release_money || '0.00' }}<br />
-            抽成比例：{{ scope.row.commission_integral_release_rate || '0' }}%
+            <el-tag type="success" effect="plain">金额：{{ scope.row.commission_integral_release_money || '0.00' }}</el-tag>
+            <el-tag effect="plain" class="rate-num">比例：{{ scope.row.commission_integral_release_rate || '0' }}%</el-tag>
           </template>
         </el-table-column>
       </el-table>
@@ -232,4 +232,7 @@ export default {
     }
   }
 }
+.rate-num{
+  margin-top: 10px!important;
+}
 </style>

src/views/promoter/user/index.vue

@@ -29,95 +29,42 @@
         </div>
         <cards-data :card-lists="cardLists" />
       </div>
-      <el-table
-        v-loading="listLoading"
-        :data="tableData.data"
-        style="width: 100%"
-        size="mini"
-        class="table"
-        highlight-current-row
-      >
-        <el-table-column
-          prop="uid"
-          label="ID"
-          width="60"
-        />
-        <el-table-column
-          label="头像"
-          min-width="80"
-        >
+      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini" class="table" highlight-current-row>
+        <el-table-column prop="uid" label="ID" width="80" align="center"/>
+        <el-table-column label="用户信息" prop="nickname" min-width="280" align="left">
           <template slot-scope="scope">
-            <div class="demo-image__preview">
-              <el-image
-                :src="scope.row.avatar || moren"
-                :preview-src-list="[scope.row.avatar || moren]"
-              />
+            <div class="user-content">
+              <div class="user-avatar">
+                <img :src="scope.row.avatar || moren" />
+              </div>
+              <div class="user-info">
+                <div class="nickname">{{ scope.row.nickname }}</div>
+                <div class="user-id">Tel：{{ scope.row.phone }}</div>
+              </div>
             </div>
           </template>
         </el-table-column>
-         <el-table-column
-          label="用户信息"
-          min-width="100"
-        >
+        <el-table-column label="推广信息" min-width="180" align="left">
           <template slot-scope="scope">
-            <div>昵称：{{ scope.row.nickname }}</div>
-            <div>电话：{{ scope.row.phone }}</div>
+            用户数量：{{scope.row.spread_count || 0}} <br />
+            订单数量：{{scope.row.spread_pay_count || 0}} <br />
+            订单金额：{{scope.row.spread_pay_price || 0}}
           </template>
         </el-table-column>
-        <el-table-column
-          prop="spread_count"
-          label="推广用户数量"
-          min-width="120"
-        />
-         <el-table-column
-          label="分销等级"
-          min-width="120"
-         >
-         <template slot-scope="scope">
-           <span>{{scope.row.brokerage ? scope.row.brokerage.brokerage_name : ''}}</span>
+        <el-table-column label="分销等级" min-width="120" align="center">
+          <template slot-scope="scope">
+            <span>{{scope.row.brokerage ? scope.row.brokerage.brokerage_name : '-'}}</span>
           </template>
         </el-table-column>
-        <el-table-column
-          label="推广订单数量"
-          min-width="120"
-          prop="spread_pay_count"
-        />
-        <el-table-column
-          label="推广订单金额"
-          min-width="120"
-          prop="spread_pay_price"
-        />
-        <el-table-column
-          label="佣金金额"
-          min-width="120"
-          sortable
-          :sort-method="(a,b)=>{return a.total_brokerage_price - b.total_brokerage_price}"
-          prop="total_brokerage_price"
-        />
-        <el-table-column
-          label="已提现金额"
-          min-width="120"
-          sortable
-          :sort-method="(a,b)=>{return a.total_extract_price - b.total_extract_price}"
-          prop="total_extract_price"
-        />
-        <el-table-column
-          prop="total_extract_num"
-          label="提现次数"
-          min-width="90"
-        />
-        <el-table-column
-          label="未提现金额"
-          min-width="120"
-          sortable
-          :sort-method="(a,b)=>{return a.brokerage_price - b.brokerage_price}"
-          prop="brokerage_price"
-        />
-        <el-table-column
-          prop="spread.nickname"
-          label="上级推广人"
-          min-width="150"
-        />
+        <el-table-column label="佣金金额" min-width="120" align="center" sortable :sort-method="(a,b)=>{return a.total_brokerage_price - b.total_brokerage_price}" prop="total_brokerage_price" />
+        <el-table-column label="提现信息" min-width="200" align="left">
+          <template slot-scope="scope">
+            已提现金额：{{scope.row.total_extract_price || 0}} <br />
+            未提现金额：{{scope.row.brokerage_price || 0}} <br />
+            提现次数：{{scope.row.total_extract_num || 0}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="spread.nickname" label="上级推广人" align="center" min-width="150" />
         <el-table-column label="操作" min-width="150" fixed="right" align="center">
           <template slot-scope="scope">
             <el-button type="text" size="small" class="mr10" @click="onSpread(scope.row.uid, 'man')">推广人</el-button>
@@ -522,4 +469,52 @@ export default {
   .el-icon-arrow-down {
     font-size: 12px;
   }
+  .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{
+    height: var(--user-content-height-);
+    width: calc(100% - var(--user-content-height-)) !important;
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: flex-start;
+  .nickname{
+    font-size: 15px;
+    font-weight: bold;
+    line-height: calc(var(--user-content-height- * 65%)) !important;
+    width: 100%;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .user-id{
+    font-size: 13px;
+    line-height: calc(var(--user-content-height- * 35%));
+  }
+  }
+  }
 </style>