前端

fuintAdmin/src/views/member/index.vue

@@ -1,40 +1,51 @@
 <template>
   <div class="app-container">
     <el-card >
+      <div style="display: flex;align-items: center;justify-content: space-between">
       <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-<!--        <el-form-item label="来源油站" prop="storeIds">-->
+        <el-form-item label="" prop="userNo">
-<!--          <el-select v-model="queryParams.storeId" filterable clearable placeholder="来源油站" style="width: 100%;">-->
-<!--            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"/>-->
-<!--          </el-select>-->
-<!--        </el-form-item>-->
-        <el-form-item label="会员号" prop="userNo">
           <el-input
             v-model="queryParams.userNo"
             placeholder="请输入会员号"
             clearable
-            style="width: 240px;"
+            style="width: 180px;"
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>
-        <el-form-item label="手机号" prop="mobile">
+        <el-form-item label="" prop="mobile">
           <el-input
             v-model="queryParams.mobile"
             placeholder="请输入会员手机号"
             clearable
-            style="width: 240px;"
+            style="width: 180px;"
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>
-        <el-form-item label="名称" prop="name">
+        <el-form-item label="" prop="name">
           <el-input
             v-model="queryParams.name"
             placeholder="请输入会员名称"
             clearable
-            style="width: 240px;"
+            style="width: 180px;"
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>
-        <el-form-item label="会员等级" prop="gradeId">
+        <el-form-item label="">
+          <el-date-picker
+            v-model="beginTime"
+            style="width: 160px"
+            type="date"
+            placeholder="开始日期">
+          </el-date-picker>
+          至
+          <el-date-picker
+            v-model="endTime"
+            style="width: 160px"
+            type="date"
+            placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="" prop="gradeId">
           <el-select
             v-model="queryParams.gradeId"
             clearable
@@ -53,52 +64,15 @@
             <el-option label="无储值余额" value="noHaveBalance"/>
           </el-select>
         </el-form-item>
-<!--        <el-form-item label="" prop="status">-->
+        <div>
-<!--          <el-select-->
+          <el-button style="background: linear-gradient( 180deg, #FF8646 0%, #FFA360 100%); border: transparent " type="primary"  @click="handleQuery">搜索</el-button>
-<!--            v-model="queryParams.official"-->
+          <el-button  @click="resetQuery">重置</el-button>
-<!--            placeholder="全部"-->
+          <el-button type="primary" @click="handleAdd"  >新增</el-button>
-<!--            clearable-->
+        </div>
-<!--            style="width: 240px"-->
+
-<!--          >-->
-<!--            <el-option-->
-<!--              v-for="dict in dict.type.official"-->
-<!--              :key="dict.value"-->
-<!--              :label="dict.label"-->
-<!--              :value="dict.value"-->
-<!--            />-->
-<!--          </el-select>-->
-<!--        </el-form-item>-->
-        <el-form-item label="注册时间">
-<!--          <el-date-picker-->
-<!--            v-model="dateRange"-->
-<!--            style="width: 240px"-->
-<!--            size="medium"-->
-<!--            value-format="yyyy-MM-dd"-->
-<!--            type="daterange"-->
-<!--            range-separator="至"-->
-<!--            start-placeholder="开始日期"-->
-<!--            end-placeholder="结束日期"-->
-<!--          ></el-date-picker>-->
-          <el-date-picker
-            v-model="beginTime"
-            style="width: 160px"
-            type="date"
-            placeholder="开始日期">
-          </el-date-picker>
-          至
-          <el-date-picker
-            v-model="endTime"
-            style="width: 160px"
-            type="date"
-            placeholder="结束日期">
-          </el-date-picker>
-        </el-form-item>
 
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-        </el-form-item>
       </el-form>
+      </div>
     </el-card>
 
     <el-card style="margin-top: 20px">
@@ -108,6 +82,28 @@
           <div class="k-one">
             <div class="title_">激活会员总数</div>
             <div class="num-size">{{total}}</div>
+              <img class="r-bot-img" src="./imgs/hy-1.png" alt="">
+            </div>
+
+          <div class="k-two">
+            <div class="title_">今日新增/昨日新增</div>
+            <div class="num-size"> {{ addNum }}/{{ yesterdayAddNum }}</div>
+            <img class="r-bot-img" src="./imgs/hy-2.png" alt="">
+          </div>
+          <div class="k-three">
+            <div class="title_">充值总人数</div>
+            <div class="num-size">{{balance}}</div>
+            <img class="r-bot-img" src="./imgs/hy-3.png" alt="">
+          </div>
+          <div class="k-four">
+            <div class="title_">储值总余额</div>
+            <div class="num-size">{{balance}}</div>
+            <img class="r-bot-img" src="./imgs/hy-4.png" alt="">
+          </div>
+          <div class="k-five">
+            <div class="title_">积分总余额</div>
+            <div class="num-size">{{point}}</div>
+            <img class="r-bot-img" src="./imgs/hy-5.png" alt="">
           </div>
 <!--          <el-row :gutter="20">-->
 <!--            <el-col :span="4">-->
@@ -151,15 +147,12 @@
 
 <!--          </el-row>-->
         </div>
+
       </template>
     </el-card>
 
     <el-card style="margin-top: 20px">
-      <el-button
+
-        type="primary"
-        icon="el-icon-plus"
-        @click="handleAdd"
-      >新增会员</el-button>
       <el-table ref="tables" v-loading="loading" :data="list"
                 @selection-change="handleSelectionChange" :default-sort="defaultSort"
                 @sort-change="handleSortChange">
@@ -204,7 +197,9 @@
         <el-table-column label="注册时间" align="center" width="160" prop="balCreateTime"/>
         <el-table-column label="状态" align="center" prop="status">
           <template slot-scope="scope">
-            <dict-tag :options="dict.type.zhzt" :value="scope.row.status"/>
+<!--            <dict-tag :options="dict.type.zhzt" :value="scope.row.status"/>-->
+            <div v-if="scope.row.status == 'qy' " style="color: #0DC291;" >启用</div>
+            <div v-else style="color: #FF8E8D">禁用</div>
           </template>
         </el-table-column>
 <!--        <el-table-column label="公众号" align="center" prop="official">-->
@@ -845,15 +840,78 @@ export default {
   .ds-dbox{
     display: flex;
     align-items: center;
+    justify-content: space-between;
     box-sizing: border-box;
-    padding: 20px;
+    padding: 15px;
   }
   .k-one{
-    width: 20%;
+    width: 19%;
     border-radius: 10px;
     border: 1px solid #F5DF1A;
     background: rgba(252,238,109,0.1);
     box-sizing: border-box;
     padding: 20px;
+    position: relative;
+    overflow: hidden;
+  }
+  .k-two{
+    width: 19%;
+    border-radius: 10px;
+    border: 1px solid #0ECB98;
+    background:rgba(14, 203, 152, 0.10);
+    box-sizing: border-box;
+    padding: 20px;
+    position: relative;
+    overflow: hidden;
+  }
+  .k-three{
+    width: 19%;
+    border-radius: 10px;
+    border: 1px solid #409EFF;
+    background: rgba(64,158,255,0.1);
+    box-sizing: border-box;
+    padding: 20px;
+    position: relative;
+    overflow: hidden;
+  }
+  .k-four{
+    width: 19%;
+    border-radius: 10px;
+    border: 1px solid #FF8E8D;
+    background: rgba(255,142,141,0.1);
+    box-sizing: border-box;
+    padding: 20px;
+    position: relative;
+    overflow: hidden;
+  }
+  .k-five{
+    width: 19%;
+    border-radius: 10px;
+    border: 1px solid #647CFF;
+    background: rgba(100,124,255,0.1);
+    box-sizing: border-box;
+    padding: 20px;
+    position: relative;
+    overflow: hidden;
+  }
+  .r-bot-img{
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    width:54px;
+    height: 50px;
+
+  }
+
+  .title_{
+    font-weight: 400;
+    font-size: 14px;
+    color: #999999;
+    margin-bottom: 10px;
+  }
+  .num-size{
+    font-size: 28px;
+    color: #333333;
+    font-weight: bold;
   }
 </style>