From 737ed7b58282e2db6b91eb3cd80a8fdf3bb4179d Mon Sep 17 00:00:00 2001
From: dengtongyu <tony.d.deng@gmail.com>
Date: Sun, 5 Sep 2021 20:27:24 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                         |  8 ++-
 src/components/dataList/dataListItem.vue | 70 ++++++++++++++++++++++++
 src/components/dataList/index.js         |  7 +++
 src/components/dataList/main.vue         | 69 +++++++++++++++++++++++
 src/main.js                              |  4 +-
 src/styles/cover.less                    |  3 +-
 src/views/Home.vue                       | 24 +++++++-
 src/views/dataView.vue                   | 60 ++++++++++++++++++++
 src/views/recordView.vue                 | 13 +++--
 9 files changed, 249 insertions(+), 9 deletions(-)
 create mode 100644 src/components/dataList/dataListItem.vue
 create mode 100644 src/components/dataList/index.js
 create mode 100644 src/components/dataList/main.vue
 create mode 100644 src/views/dataView.vue

diff --git a/src/api/index.js b/src/api/index.js
index c146cb0..45877bb 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -45,6 +45,11 @@ const drawRecord = param => {
   return ajax.get(`${HOST}/drawRecord`, param);
 };
 
+// 数据查询
+const rateList = param => {
+  return ajax.post(`${HOST}/rateList`, stringify(param), "form");
+};
+
 export {
   queryPrizeInfo,
   queryTicketNum,
@@ -53,5 +58,6 @@ export {
   saveLog,
   queryPrizeMsg,
   getRuleTip,
-  drawRecord
+  drawRecord,
+  rateList
 };
diff --git a/src/components/dataList/dataListItem.vue b/src/components/dataList/dataListItem.vue
new file mode 100644
index 0000000..512881b
--- /dev/null
+++ b/src/components/dataList/dataListItem.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="data-list-item">
+    <h3>{{ nick }}</h3>
+    <div class="data-list-item-content">
+      <dl>
+        <dt>总消费</dt>
+        <dd>{{ userTotalPay }}</dd>
+      </dl>
+      <dl>
+        <dt>总产出</dt>
+        <dd>{{ totalPlatformValue }}</dd>
+      </dl>
+      <dl>
+        <dt>爆率</dt>
+        <dd>{{ rate }}</dd>
+      </dl>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DataListItem",
+  props: {
+    nick: {
+      type: String,
+      default: ""
+    },
+    userTotalPay: {
+      type: [Number, String],
+      default: 0
+    },
+    totalPlatformValue: {
+      type: [Number, String],
+      default: 0
+    },
+    rate: {
+      type: [Number, String],
+      default: 0
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.data-list-item {
+  & > h3 {
+    font-size: 36px;
+    font-weight: bold;
+    line-height: 60px;
+  }
+  &-content {
+    display: flex;
+    margin-top: 15px;
+    & > dl {
+      flex: 1;
+      text-align: center;
+      & > dt {
+        font-size: 28px;
+        font-weight: bold;
+        line-height: 60px;
+      }
+      & > dd {
+        font-size: 26px;
+        line-height: 50px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/dataList/index.js b/src/components/dataList/index.js
new file mode 100644
index 0000000..710d4ba
--- /dev/null
+++ b/src/components/dataList/index.js
@@ -0,0 +1,7 @@
+import DataList from "./main";
+
+DataList.install = function(Vue) {
+  Vue.component(DataList.name, DataList);
+};
+
+export default DataList;
diff --git a/src/components/dataList/main.vue b/src/components/dataList/main.vue
new file mode 100644
index 0000000..f2ae2a8
--- /dev/null
+++ b/src/components/dataList/main.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="data-list">
+    <div
+      class="data-list-block"
+      v-for="(item, index) in list"
+      :key="`data-list-block-${item.id}-${index}`"
+    >
+      <data-list-item
+        :nick="item.nick"
+        :userTotalPay="item.userTotalPay"
+        :totalPlatformValue="item.totalPlatformValue"
+        :rate="item.rate"
+      ></data-list-item>
+    </div>
+  </div>
+</template>
+
+<script>
+import { rateList } from "@/api";
+import dataListItem from "./dataListItem.vue";
+export default {
+  name: "DataList",
+  components: {
+    dataListItem
+  },
+  data() {
+    return {
+      list: []
+    };
+  },
+  created() {
+    this.getRateList();
+  },
+  methods: {
+    getRateList() {
+      rateList()
+        .then(res => {
+          this.todoData(res);
+        })
+        .catch(() => {
+          this.$toast.fail("获取数据失败！");
+        });
+    },
+    todoData(res) {
+      const { code, data, msg } = res;
+      if (code === 200) {
+        this.list = data || [];
+      } else {
+        this.$toast.fail(msg);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.data-list {
+  padding: 0 0 30px;
+  &-block {
+    margin-top: 40px;
+    padding: 20px 30px;
+    background: #26144d;
+    border-radius: 24px;
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 79e5607..445f7ff 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,7 +10,8 @@ import {
   Popup,
   Image as VanImage,
   List,
-  Empty
+  Empty,
+  Icon
 } from "vant";
 
 Vue.config.productionTip = false;
@@ -23,6 +24,7 @@ Vue.use(Popup);
 Vue.use(VanImage);
 Vue.use(List);
 Vue.use(Empty);
+Vue.use(Icon);
 
 new Vue({
   router,
diff --git a/src/styles/cover.less b/src/styles/cover.less
index 1ef7a76..35cc1cf 100644
--- a/src/styles/cover.less
+++ b/src/styles/cover.less
@@ -3,5 +3,6 @@
 @tabs-nav-background-color: none;
 @tabs-bottom-bar-color: #DBCFFF;
 
+@empty-description-color: #AFAAFF;
 
-@empty-description-color: #AFAAFF;
\ No newline at end of file
+@list-text-color: #AFAAFF;
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 515d368..74099c7 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -21,6 +21,10 @@
       <bottom-view :drawType="drawType"></bottom-view>
     </div>
 
+    <div class="left-top-button" @click="clickLeftTopButton">
+      <van-icon name="bars" />
+    </div>
+
     <van-popup
       v-model="show"
       position="left"
@@ -56,7 +60,8 @@ export default {
     prizesView: resolve => require(["./prizesView.vue"], resolve),
     ruleView: resolve => require(["./ruleView.vue"], resolve),
     recordView: resolve => require(["./recordView.vue"], resolve),
-    rankView: resolve => require(["./rankView.vue"], resolve)
+    rankView: resolve => require(["./rankView.vue"], resolve),
+    dataView: resolve => require(["./dataView.vue"], resolve)
   },
   data() {
     return {
@@ -66,7 +71,8 @@ export default {
         规则: "rule-view",
         奖品: "prizes-view",
         排行: "rank-view",
-        记录: "record-view"
+        记录: "record-view",
+        数据: "data-view"
       }
     };
   },
@@ -95,6 +101,10 @@ export default {
       // console.log("clickEntryBtn", val);
       this.curBtnText = val;
       this.show = true;
+    },
+    clickLeftTopButton() {
+      this.curBtnText = "数据";
+      this.show = true;
     }
   }
 };
@@ -105,6 +115,7 @@ export default {
   padding: 20px 25px;
   height: 100%;
   box-sizing: border-box;
+  position: relative;
 }
 .top-btn-and-box {
   position: relative;
@@ -119,4 +130,13 @@ export default {
     padding-top: 64px;
   }
 }
+.left-top-button {
+  width: 60px;
+  height: 60px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  color: #fff;
+  font-size: 60px;
+}
 </style>
diff --git a/src/views/dataView.vue b/src/views/dataView.vue
new file mode 100644
index 0000000..4293e40
--- /dev/null
+++ b/src/views/dataView.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="data-view">
+    <div class="data-view-padding">
+      <h3 class="data-view-title">数据查询</h3>
+      <div class="data-view-content">
+        <data-list></data-list>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import dataList from "@/components/dataList";
+export default {
+  name: "dataView",
+  components: {
+    dataList
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {}
+};
+</script>
+
+<style lang="less" scoped>
+.data-view {
+  height: 100%;
+  background-color: #150832;
+  color: #dbcfff;
+  &-padding {
+    height: 100%;
+  }
+  &-title {
+    text-align: center;
+    color: #dbcfff;
+    font-weight: bold;
+    font-size: 32px;
+    line-height: 72px;
+    padding-top: 20px;
+  }
+  &-content {
+    margin-top: 50px;
+    line-height: 54px;
+    font-size: 26px;
+    font-weight: 400;
+    padding: 0 30px;
+    height: calc(100vh - 72px - 20px - 50px);
+    overflow-x: hidden;
+    overflow-y: auto;
+    & > p {
+      padding-bottom: 20px;
+    }
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/recordView.vue b/src/views/recordView.vue
index 5194bd9..39b4625 100644
--- a/src/views/recordView.vue
+++ b/src/views/recordView.vue
@@ -3,6 +3,7 @@
     <div class="record-view-title">
       <h3>抽奖记录</h3>
       <p>今日投入产出比：{{ rate }}</p>
+      <p>今日投入{{ userTotalPay }}，今日产出{{ totalPlatformValue }}</p>
     </div>
     <div class="record-view-content">
       <van-tabs v-model="active" animated>
@@ -38,10 +39,14 @@ export default {
     ...mapGetters(["lotteryRecordRateVo"]),
     rate() {
       return this.lotteryRecordRateVo.rate;
+    },
+    userTotalPay() {
+      return this.lotteryRecordRateVo.userTotalPay;
+    },
+    totalPlatformValue() {
+      return this.lotteryRecordRateVo.totalPlatformValue;
     }
-  },
-  created() {},
-  methods: {}
+  }
 };
 </script>
 
@@ -70,7 +75,7 @@ export default {
   }
   &-content {
     &-pane {
-      height: calc(100vh - 20px - 72px - 50px - 11.734vw);
+      height: calc(100vh - 20px - 72px - 50px - 50px - 11.734vw);
       overflow-y: auto;
     }
   }