TBtools-钱包明细

htmldev/TBTools/src/views/modules/mine/mine-wallet.vue

@@ -1,89 +1,151 @@
 <template>
-  <el-row>
-    <el-col class="TT-header">
-      <h3>我的钱包</h3>
-      <p>
-        <span class="TT-label">您拥有金币：</span>
-        <span class="TT-value">0</span>
-      </p>
-      <p>
-        <span class="TT-label">您当前余额：</span>
-        <span class="TT-value">￥0.000</span>
-      </p>
-    </el-col>
-    <el-col>
-      <el-table :data="tableData" border>
-        <el-table-column prop="date" label="日期" width="180"></el-table-column>
-        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
-        <el-table-column prop="address" label="地址"></el-table-column>
-      </el-table>
-    </el-col>
-    <el-col>
-      <el-pagination @size-change="handleSizeChange"
-                     @current-change="handleCurrentChange"
-                     :current-page="currentPage"
-                     :page-sizes="pageSizes"
-                     :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
-                     :total="totalCount">
-      </el-pagination>
-    </el-col>
-  </el-row>
+  <div>
+    <el-row>
+      <el-col class="TT-header">
+        <h3>流水记录</h3>
+        <p>
+          <span class="TT-label">您当前余额：</span>
+          <span class="TT-value">￥{{ userInfo.userBalance ? userInfo.userBalance.toFixed(2) : '0.00'}}</span>
+        </p>
+      </el-col>
+    </el-row>
+    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form-item>
+        <el-select v-model="dataForm.key" placeholder="请选择流水类型">
+          <el-option :label="item.label"
+                     :value="item.value"
+                     v-for="item in selectOption"
+                     :key="item.value"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="getDataList()">查询</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      style="width: 100%">
+      <el-table-column
+        prop="id"
+        header-align="center"
+        align="center"
+        label="流水号">
+      </el-table-column>
+      <el-table-column
+        prop="logType"
+        header-align="center"
+        align="center"
+        label="流水类型">
+        <template slot-scope="scope">
+          <span>{{ selectOption[scope.row.logType].label }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="logBalance"
+        header-align="center"
+        align="center"
+        label="流水金额">
+      </el-table-column>
+      <el-table-column
+        prop="createdAt"
+        header-align="center"
+        align="center"
+        :show-overflow-tooltip="true"
+        label="创建时间">
+      </el-table-column>
+      <el-table-column
+        prop="logRemark"
+        header-align="center"
+        align="center"
+        :show-overflow-tooltip="true"
+        label="流水备注">
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'mine-wallet',
   data () {
     return {
-      // 总数据
-      tableData: [],
-      // 默认显示第几页
-      currentPage: 1,
-      // 总条数，根据接口获取数据长度(注意：这里不能为空)
-      totalCount: 1,
-      // 个数选择器（可修改）
-      pageSizes: [10, 20, 50, 100],
-      // 默认每页显示的条数（可修改）
-      PageSize: 10
+      dataForm: {
+        key: '0'
+      },
+      selectOption: [
+        {
+          label: '消费',
+          value: '0'
+        },
+        {
+          label: '充值',
+          value: '1'
+        },
+        {
+          label: '奖励',
+          value: '2'
+        },
+        {
+          label: '所有类型',
+          value: '3'
+        }
+      ],
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false,
+      selectionDataList: [],
+      userInfo: {}
     }
   },
   created () {
-    this.getData(this.PageSize, this.currentPage)
+    this.getDataList()
   },
   methods: {
-    // 将页码，及每页显示的条数以参数传递提交给后台
-    getData (pageSize, currentPage) {
+    // 获取数据列表
+    getDataList () {
+      this.dataListLoading = true
       this.$http({
         url: this.$http.adornUrl('/user/balancelog'),
-        method: 'post',
+        method: 'POST',
         data: this.$http.adornData({
-          'page': currentPage,
-          'pageSize': pageSize,
-          'logType': 0 // 记录类型(0消费1充值2奖励3所有类型)
+          'page': this.pageIndex,
+          'pageSize': this.pageSize,
+          'logType': this.dataForm.key
         })
       }).then(({ data }) => {
         if (data.status) {
+          const { total, list, userInfo } = data.data
+          this.dataList = list
+          this.totalPage = total
+          this.userInfo = userInfo
         } else {
           this.$message.error(data.msg)
         }
-      }).catch(() => {})
+        this.dataListLoading = false
+      })
     },
-    // 分页
-    // 每页显示的条数
-    handleSizeChange (val) {
-      // 改变每页显示的条数
-      this.PageSize = val
-      // 点击每页显示的条数时，显示第一页
-      this.getData(val, 1)
-      // 注意：在改变每页显示的条数时，要将页码显示到第一页
-      this.currentPage = 1
+    // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
     },
-    // 显示第几页
-    handleCurrentChange (val) {
-      // 改变默认的页数
-      this.currentPage = val
-      // 切换页码时，要获取每页显示的条数
-      this.getData(this.PageSize, (val) * (this.pageSize))
+    // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getDataList()
     }
   }
 }
@@ -91,19 +153,12 @@ export default {
 
 <style lang="scss" scoped>
 .TT-header {
-  font-size: 18px;
-  color: #000;
-
-  .TT-label {
-    line-height: 18px;
-    font-size: 14px;
-    color: #333;
-  }
+  padding-bottom: 10px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #eee;
 
-  .TT-value {
-    line-height: 18px;
-    font-size: 14px;
-    color: #FF7200;
+  h3 {
+    margin-bottom: 10px;
   }
 }
 </style>