用户管理

src/views/user/list/index.vue

@@ -3,53 +3,67 @@
     <!-- 搜索 -->
     <el-form inline size="mini">
       <el-form-item label="用户账号:">
-        <el-input placeholder="请输入用户账号" />
+        <el-input v-model="form.userName" placeholder="请输入用户账号" clearable />
       </el-form-item>
       <el-form-item label="用户手机号:">
-        <el-input placeholder="请输入用户手机号" />
+        <el-input v-model="form.phone" placeholder="请输入用户手机号" clearable />
       </el-form-item>
       <el-form-item label="注册来源:">
-        <el-select placeholder="请选择注册来源">
-          <el-option />
+        <el-select v-model="form.registerChannel" placeholder="请选择注册来源" clearable>
+          <el-option v-for="item in regOptions" :key="item.value" :value="item.value" :label="item.label" />
         </el-select>
       </el-form-item>
       <el-form-item label="注册时间:">
-        <el-date-picker type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" />
+        <el-date-picker v-model="form.startsignTime" type="datetimerange" start-placeholder="开始日期"
+          end-placeholder="结束日期" />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search">搜索</el-button>
-        <el-button icon="el-icon-refresh">重置</el-button>
+        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
       </el-form-item>
     </el-form>
     <!-- 列表 -->
-    <el-table>
-      <el-table-column label="用户ID" align="center"></el-table-column>
-      <el-table-column label="用户账号" align="center"></el-table-column>
-      <el-table-column label="用户手机号" align="center"></el-table-column>
-      <el-table-column label="用户头像" align="center"></el-table-column>
-      <el-table-column label="用户性别" align="center"></el-table-column>
-      <el-table-column label="注册来源" align="center"></el-table-column>
-      <el-table-column label="注册系统" align="center"></el-table-column>
-      <el-table-column label="注册时间" align="center"></el-table-column>
-      <el-table-column label="用户积分" align="center"></el-table-column>
-      <el-table-column align="center">
+    <el-table :data="tableData" v-loading="loading">
+      <el-table-column label="用户ID" prop="id" align="center" show-overflow-tooltip />
+      <el-table-column label="用户账号" prop="nickname" align="center" />
+      <el-table-column label="用户手机号" prop="phone" align="center" />
+      <el-table-column label="用户头像" align="center" width="100px">
+        <template slot-scope="scope">
+          <el-image :src="scope.row.headUrl" />
+        </template>
+      </el-table-column>
+      <el-table-column label="用户性别" prop="sex" align="center" :formatter="sexFormatter" />
+      <el-table-column label="注册来源" prop="registerChannel" align="center" :formatter="regFormatter" />
+      <el-table-column label="注册系统" prop="mtype" align="center" :formatter="typeFormatter" />
+      <el-table-column label="注册时间" prop="createTime" align="center" />
+      <el-table-column label="用户积分" prop="totalPoint" align="center" />
+      <el-table-column prop="balanceAndroid" align="center">
         <template slot="header">
           <div>钱包余额</div>
           <div>(Android)</div>
         </template>
       </el-table-column>
-      <el-table-column align="center">
+      <el-table-column prop="balanceIos" align="center">
         <template slot="header">
           <div>钱包余额</div>
           <div>(iOS)</div>
         </template>
       </el-table-column>
-      <el-table-column label="已绑设备" align="center"></el-table-column>
-      <el-table-column label="购买次数" align="center"></el-table-column>
-      <el-table-column label="累计消费 / 元" align="center"></el-table-column>
-      <el-table-column label="上次消费 / 元" align="center"></el-table-column>
-      <el-table-column label="累计充值 / 元" align="center"></el-table-column>
-      <el-table-column label="上次充值 / 元" align="center"></el-table-column>
+      <el-table-column label="已绑设备" align="center" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <span v-if="scope.row.deviceList">
+            {{ scope.row.deviceList.join('，') }}
+          </span>
+          <span v-else>
+            暂无绑定
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="购买次数" prop="buyCount" align="center" />
+      <el-table-column label="累计消费 / 元" prop="buyAmount" align="center" />
+      <el-table-column label="上次消费" prop="lastBuyTime" align="center" />
+      <el-table-column label="累计充值 / 元" prop="rechargeAmount" align="center" />
+      <el-table-column label="上次充值" prop="lastRechargeTime" align="center" />
     </el-table>
     <pagination v-show="total > 0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
       @pagination="getList" />
@@ -57,9 +71,14 @@
 </template>
 
 <script>
+import { list } from '@/api/user/list'
+import { sexMixin } from '@/mixin/index'
 export default {
+  mixins: [sexMixin],
   data() {
     return {
+      // 遮罩层
+      loading: false,
       // 表单
       form: {
         pageNum: 1,
@@ -68,14 +87,93 @@ export default {
       // 列表
       tableData: [],
       // 总数据
-      total: 0
+      total: 0,
+      // 注册来源
+      regOptions: [{
+        value: -1,
+        label: '未知'
+      }, {
+        value: 0,
+        label: '小米应用市场'
+      }, {
+        value: 1,
+        label: '360应用市场'
+      }, {
+        value: 2,
+        label: '腾讯应用市场'
+      }, {
+        value: 3,
+        label: 'OPPP应用市场'
+      }, {
+        value: 4,
+        label: 'ViVO应用市场'
+      }, {
+        value: 5,
+        label: '魅族应用市场'
+      }, {
+        value: 6,
+        label: '华为应用市场'
+      }, {
+        value: 7,
+        label: '微信小程序'
+      }],
+      // 注册系统
+      typeOptions: [{
+        value: 0,
+        label: '默认值'
+      }, {
+        value: 1,
+        label: 'Android'
+      }, {
+        value: 2,
+        label: 'iOS'
+      }]
     }
   },
   mounted() {
-
+    this.getList()
   },
   methods: {
+    // 列表
+    getList() {
+      this.loading = true
+      list(this.form).then(res => {
+        console.log(res);
+        if (res.code === 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+          this.loading = false
+        }
+      })
+    },
+
+    // 搜索
+    getSearch() {
+      this.form.pageNum = 1
+      this.getList()
+    },
 
+    // 重置
+    getRefresh() {
+      this.form = {
+        pageNum: 1,
+        pageSize: 10
+      }
+      this.getList()
+    },
+
+    // 字典翻译
+    regFormatter(row) {
+      return this.selectDictLabel(this.regOptions, row.registerChannel)
+    },
+
+    sexFormatter(row) {
+      return this.selectDictLabel(this.sexOptions, row.sex)
+    },
+
+    typeFormatter(row) {
+      return this.selectDictLabel(this.typeOptions, row.mtype)
+    }
   }
 }
 </script>