用户页面优化

src/views/system/smUser/components/userRechargeReport.vue

@@ -7,7 +7,7 @@
         </el-tab-pane>
       </el-tabs>
     </el-row>
-    <single-line-chart v-loading="loading" :labels="labels" :chart-data="chartData" name="收入(元)" />
+    <single-line-chart v-loading="loading" :labels="labels" :chart-data="chartData" name="收入(元)" height="288px"/>
   </div>
 </template>
 

src/views/system/smUser/detail.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="app-container">
+  <div class="app-container" v-loading="loading">
+    <template v-if="userData != null">
+      <el-row :gutter="12">
+        <el-col :lg="8" :md="12" :xs="24">
           <el-card class="box-card" header="用户详情">
             <div class="user-detail">
               <div class="user-header">
@@ -12,28 +15,38 @@
               </div>
 
               <div class="user-description">
-          <el-descriptions>
+                <el-descriptions :column="2">
-            <el-descriptions-item label="微信">{{userData.wxOpenId | defaultValue}}</el-descriptions-item>
+                  <el-descriptions-item label="微信" :span="2">{{userData.wxOpenId | defaultValue}}</el-descriptions-item>
                   <el-descriptions-item label="店铺数">{{userData.storeCount | defaultValue}} 家</el-descriptions-item>
                   <el-descriptions-item label="设备数">{{userData.deviceCount | defaultValue}} 台</el-descriptions-item>
-            <el-descriptions-item label="账户余额">{{userData.balance | money | defaultValue}} 元</el-descriptions-item>
+                  <el-descriptions-item label="设备服务费">
-            <el-descriptions-item label="总收入">{{userData.totalIncome | money | defaultValue}} 元</el-descriptions-item>
-            <el-descriptions-item label="总提现">{{userData.withDrawlAmount | money | defaultValue}} 元</el-descriptions-item>
-            <el-descriptions-item label="服务费费率">
                     <template v-if="userData.serviceRate == null || userData.serviceType == null">跟随渠道</template>
                     <template v-else>
                       <dict-tag :options="dict.type.service_type" :value="userData.serviceType" size="mini"/>
                       {{userData.serviceRate}} {{serviceUnit(userData.serviceType)}}
                     </template>
                   </el-descriptions-item>
+                  <el-descriptions-item label="提现服务费">
+                    <template v-if="userData.withdrawServiceRate == null || userData.withdrawServiceType == null">跟随渠道</template>
+                    <template v-else>
+                      <dict-tag :options="dict.type.service_type" :value="userData.withdrawServiceType" size="mini"/>
+                      {{userData.withdrawServiceRate}} {{serviceUnit(userData.withdrawServiceType)}}
+                    </template>
+                  </el-descriptions-item>
+                  <el-descriptions-item label="账户余额">{{userData.balance | money | defaultValue}} 元</el-descriptions-item>
+                  <el-descriptions-item label="总收入">{{userData.totalIncome | money | defaultValue}} 元</el-descriptions-item>
+                  <el-descriptions-item label="总提现">{{userData.withDrawlAmount | money | defaultValue}} 元</el-descriptions-item>
                 </el-descriptions>
               </div>
             </div>
           </el-card>
-
+        </el-col>
-    <el-card class="box-card" header="收入统计">
+        <el-col :lg="16" :md="12" :xs="24">
+          <el-card class="box-card">
             <user-recharge-report :mch-id="userData.userId"/>
           </el-card>
+        </el-col>
+      </el-row>
 
       <el-card class="box-card">
         <el-tabs>
@@ -60,6 +73,8 @@
           </el-tab-pane>
         </el-tabs>
       </el-card>
+    </template>
+    <el-empty v-else description="用户不存在"/>
   </div>
 </template>
 
@@ -91,6 +106,7 @@ export default {
   data() {
     return {
       userData: {},
+      loading: false,
     }
   },
   created() {
@@ -98,8 +114,11 @@ export default {
   },
   methods: {
     initData() {
+      this.loading = true;
       getSmUser(this.$route.params.userId).then(response => {
         this.userData = response.data;
+      }).finally(()=> {
+        this.loading = false;
       })
     },
   }
@@ -133,6 +152,7 @@ export default {
   position: relative;
   display: flex;
   height: fit-content;
+  flex-direction: column;
 }
 .user-detail .user-description {
   flex: 1;

src/views/system/smUser/index.vue

@@ -112,7 +112,7 @@
               <user-link :id="d.row.userId" :name="d.row.phonenumber"/>
             </template>
             <template v-else-if="column.key === 'storeCount'">
-              {{d.row.storeCount | defaultValue}} 间
+              {{d.row.storeCount | defaultValue}} 家
             </template>
             <template v-else-if="column.key === 'rechargeAmount'">
               {{d.row.rechargeAmount | money}} 元