feat: 更新

public/index.html

@@ -6,12 +6,19 @@
     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <style>
+    .yf-loading {display:inline-block;width:80px;height:80px;background-image:url("data:image/png;base64,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 truncated
+  .yf-loading:after {content:" ";display:block;width:80px;height:80px;box-sizing:border-box;border-radius:50%;border:4px solid #9E98FF;border-color:#9E98FF  transparent #9E98FF transparent;animation:xtbg-loading 1.3s linear infinite;}
+  @keyframes xtbg-loading {0% {transform:rotate(0deg);}
+  100% {transform:rotate(360deg);}
+  }
+    </style>
   </head>
   <body>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app"></div>
+    <div id="app"><div class="yf-loading"></div></div>
     <!-- built files will be auto injected -->
   </body>
 </html>

src/api/index.js

@@ -44,6 +44,7 @@ const getRuleTip = param => {
 const drawRecord = param => {
   return ajax.get(`${HOST}/drawRecord`, param);
 };
+
 export {
   queryPrizeInfo,
   queryTicketNum,

src/api/rank.js

@@ -0,0 +1,18 @@
+import ajax from "@/lib/ajax";
+import config from "@/config";
+import { stringify } from "qs";
+
+// host
+const HOST = config.host("/api", "/act/rank");
+
+// 冒险家排行榜
+const ticketList = param => {
+  return ajax.post(`${HOST}/ticketList`, stringify(param), "form");
+};
+
+// 幸运星排行榜
+const giftList = param => {
+  return ajax.post(`${HOST}/giftList`, stringify(param), "form");
+};
+
+export { ticketList, giftList };

src/components/luckyGridView/main.vue

@@ -310,7 +310,7 @@ export default {
 }
 .lucky-grid-prize {
   display: flex;
-  align-items: center;
+  // align-items: center;
   justify-content: center;
   padding: 30px;
   &-item {

src/components/prizesList/main.vue

@@ -2,7 +2,12 @@
   <div class="prizes-list">
     <div class="prizes-list-item" v-for="item in curList" :key="item.prizeId">
       <div class="prizes-list-item-image">
-        <van-image width="100%" height="100%" :src="item.prizeImgUrl" />
+        <van-image
+          width="100%"
+          height="100%"
+          :src="item.prizeImgUrl"
+          fit="cover"
+        />
       </div>
       <div class="prizes-list-item-name">
         <span>{{ item.prizeName }}</span>

src/components/rankList/index.js

@@ -0,0 +1,7 @@
+import RankList from "./main";
+
+RankList.install = function(Vue) {
+  Vue.component(RankList.name, RankList);
+};
+
+export default RankList;

src/components/rankList/main.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="rank-list">
+    <template v-if="list.length > 0">
+      <rank-list-item
+        class="rank-list-block"
+        v-for="(item, index) in list"
+        :key="`rank-list-item-${item.id}-${index}`"
+        :rank="index + 1"
+        :avatar="item.imageUrl"
+        :name="item.username"
+        :id="item.id"
+        :value="item.diffValue"
+      ></rank-list-item>
+    </template>
+    <template v-else>
+      <van-empty image="error" description="暂无数据" />
+    </template>
+  </div>
+</template>
+
+<script>
+import rankListItem from "./rankListItem.vue";
+export default {
+  name: "RankList",
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  components: {
+    rankListItem
+  },
+  computed: {},
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {}
+};
+</script>
+
+<style lang="less" scoped>
+.rank-list {
+  &-block {
+    margin-top: 40px;
+  }
+  &:first-child {
+    margin-top: 0;
+  }
+}
+</style>

src/components/rankList/rankListItem.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="rank-list-item">
+    <div class="rank-list-item-index">
+      <div class="rank-list-item-index-image" v-if="indexImage">
+        <van-image width="100%" height="100%" fit="cover" :src="indexImage" />
+      </div>
+      <template v-else>
+        <span v-if="rank">{{ rank }}</span>
+        <label v-else>未上榜</label>
+      </template>
+    </div>
+    <div class="rank-list-item-info">
+      <div class="rank-list-item-info-image">
+        <van-image width="100%" height="100%" :src="avatar" fit="cover" round />
+      </div>
+      <div class="rank-list-item-info-text">
+        <div class="rank-list-item-info-text-name">{{ name }}</div>
+        <div class="rank-list-item-info-text-id">{{ id }}</div>
+      </div>
+    </div>
+    <div class="rank-list-item-value">
+      <div class="rank-list-item-value-number">
+        {{ rank === 1 ? "No.1" : value }}
+      </div>
+      <div class="rank-list-item-value-text" v-if="rank > 1">距上名</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RankListItem",
+  props: {
+    rank: {
+      type: Number,
+      default: 1
+    },
+    avatar: {
+      type: String,
+      default: ""
+    },
+    name: {
+      type: String,
+      default: ""
+    },
+    id: {
+      type: [String, Number],
+      default: ""
+    },
+    value: {
+      type: [String, Number],
+      default: ""
+    }
+  },
+  data() {
+    return {
+      rankIcon: [
+        require("@/assets/images/icon_no1.png"),
+        require("@/assets/images/icon_no2.png"),
+        require("@/assets/images/icon_no3.png")
+      ]
+    };
+  },
+  computed: {
+    index() {
+      return this.rank - 1;
+    },
+    indexImage() {
+      if (this.index < 0) return null;
+      if (this.index <= 2) return this.rankIcon[this.index];
+      else return null;
+    },
+    rankDisplay() {
+      if (this.rank === 0) return "未上榜";
+      else return this.rank;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.rank-list-item {
+  display: flex;
+  align-items: center;
+  &-index {
+    width: 100px;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &-image {
+      width: 64px;
+      height: 64px;
+    }
+    & > span {
+      font-size: 40px;
+      font-weight: 800;
+      color: #dbcfff;
+    }
+    & > label {
+      font-size: 24px;
+      font-weight: bold;
+      color: #dbcfff;
+    }
+  }
+  &-info {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    // margin-left: 20px;
+    &-image {
+      width: 100px;
+      height: 100px;
+    }
+    &-text {
+      flex: 1;
+      margin-left: 20px;
+      &-name {
+        font-size: 30px;
+        font-weight: bold;
+        color: #dbcfff;
+        line-height: 40px;
+      }
+      &-id {
+        font-size: 26px;
+        font-weight: 500;
+        color: #dbcfff;
+        line-height: 40px;
+        opacity: 0.6;
+      }
+    }
+  }
+  &-value {
+    width: 150px;
+    text-align: right;
+    &-number {
+      font-size: 32px;
+      font-weight: bold;
+      color: #ffe26c;
+      line-height: 54px;
+      opacity: 0.8;
+    }
+    &-text {
+      font-size: 24px;
+      font-weight: 500;
+      color: #dbcfff;
+      line-height: 54px;
+      opacity: 0.6;
+    }
+  }
+}
+</style>

src/components/rankPane/index.js

@@ -0,0 +1,7 @@
+import RankPane from "./main";
+
+RankPane.install = function(Vue) {
+  Vue.component(RankPane.name, RankPane);
+};
+
+export default RankPane;

src/components/rankPane/main.vue

@@ -0,0 +1,339 @@
+<template>
+  <div class="rank-pane">
+    <div class="rank-pane-tips">
+      <p>
+        <span>{{ tipsText }}</span>
+      </p>
+    </div>
+    <div class="rank-pane-top" :class="paneTypeClass">
+      <div class="rank-pane-top-image">
+        <div class="rank-pane-top-image-avatar">
+          <van-image
+            width="100%"
+            height="100%"
+            :src="yesterdayTop.imageUrl"
+            fit="cover"
+            round
+          />
+        </div>
+      </div>
+      <div class="rank-pane-top-info">
+        <div class="rank-pane-top-info-name">{{ yesterdayTop.username }}</div>
+        <div class="rank-pane-top-info-id">{{ yesterdayTop.id }}</div>
+      </div>
+    </div>
+    <div class="rank-pane-list">
+      <div class="rank-pane-list-rank">
+        <rank-list :list="list"></rank-list>
+      </div>
+      <div class="rank-pane-list-user">
+        <rank-list-item
+          v-if="myRank"
+          class="rank-pane-list-user-item"
+          :rank="myRank.rank"
+          :avatar="myRank.imageUrl"
+          :name="myRank.username"
+          :id="myRank.id"
+          :value="myRank.diffValue"
+        ></rank-list-item>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import rankList from "@/components/rankList";
+import rankListItem from "@/components/rankList/rankListItem.vue";
+import { ticketList, giftList } from "@/api/rank";
+export default {
+  name: "RankPane",
+  components: {
+    rankList,
+    rankListItem
+  },
+  props: {
+    paneType: {
+      type: String,
+      default: "ticket"
+    }
+  },
+  data() {
+    return {
+      list: [],
+      myRank: null,
+      yesterdayRank: []
+    };
+  },
+  computed: {
+    uid() {
+      return this.$route.query.uid;
+    },
+    tipsText() {
+      if (this.paneType === "ticket")
+        return "抽奖次数越多，排名越高哦~ 每日零点重置";
+      else return "获得奖励价值越高，排名越高哦~  每日零点重置";
+    },
+    paneTypeClass() {
+      return `rank-pane-${this.paneType}`;
+    },
+    yesterdayTop() {
+      if (this.yesterdayRank.length === 0)
+        return {
+          username: "暂无",
+          id: "暂无"
+        };
+      return this.yesterdayRank[0];
+    }
+  },
+  created() {
+    if (this.paneType === "ticket") this.getTicketList();
+    else this.getGiftList();
+  },
+  methods: {
+    getTicketList() {
+      ticketList({ uid: this.uid })
+        .then(res => {
+          this.todoData(res);
+        })
+        .catch(() => {
+          this.$toast.fail("获取排行榜失败！");
+        });
+    },
+    getGiftList() {
+      giftList({ uid: this.uid })
+        .then(res => {
+          this.todoData(res);
+        })
+        .catch(() => {
+          this.$toast.fail("获取排行榜失败！");
+        });
+    },
+    todoData(res) {
+      const { code, data, msg } = res;
+      if (code === 200) {
+        const { myRank, rankVoList, yesterdayRank } = data;
+        this.list = rankVoList || [];
+        // this.list = [
+        //   {
+        //     diffValue: null,
+        //     id: 3333,
+        //     imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
+        //     levelVo: null,
+        //     rank: 1,
+        //     sex: null,
+        //     showValue: null,
+        //     uid: 9002,
+        //     username: "11",
+        //     value: 100
+        //   },
+        //   {
+        //     diffValue: 210,
+        //     id: 3333,
+        //     imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
+        //     levelVo: null,
+        //     rank: 1,
+        //     sex: null,
+        //     showValue: null,
+        //     uid: 9002,
+        //     username: "11",
+        //     value: 100
+        //   },
+        //   {
+        //     diffValue: 30,
+        //     id: 3333,
+        //     imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
+        //     levelVo: null,
+        //     rank: 1,
+        //     sex: null,
+        //     showValue: null,
+        //     uid: 9002,
+        //     username: "11",
+        //     value: 100
+        //   },
+        //   {
+        //     diffValue: 411,
+        //     id: 3333,
+        //     imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
+        //     levelVo: null,
+        //     rank: 1,
+        //     sex: null,
+        //     showValue: null,
+        //     uid: 9002,
+        //     username: "11",
+        //     value: 100
+        //   },
+        //   {
+        //     diffValue: 301,
+        //     id: 3333,
+        //     imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
+        //     levelVo: null,
+        //     rank: 1,
+        //     sex: null,
+        //     showValue: null,
+        //     uid: 9002,
+        //     username: "11",
+        //     value: 100
+        //   },
+        //   {
+        //     diffValue: 123,
+        //     id: 3333,
+        //     imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
+        //     levelVo: null,
+        //     rank: 1,
+        //     sex: null,
+        //     showValue: null,
+        //     uid: 9002,
+        //     username: "11",
+        //     value: 100
+        //   },
+        //   {
+        //     diffValue: 321,
+        //     id: 3333,
+        //     imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
+        //     levelVo: null,
+        //     rank: 1,
+        //     sex: null,
+        //     showValue: null,
+        //     uid: 9002,
+        //     username: "11",
+        //     value: 100
+        //   },
+        //   {
+        //     diffValue: 741,
+        //     id: 3333,
+        //     imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
+        //     levelVo: null,
+        //     rank: 1,
+        //     sex: null,
+        //     showValue: null,
+        //     uid: 9002,
+        //     username: "11",
+        //     value: 100
+        //   },
+        //   {
+        //     diffValue: 963,
+        //     id: 3333,
+        //     imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
+        //     levelVo: null,
+        //     rank: 1,
+        //     sex: null,
+        //     showValue: null,
+        //     uid: 9002,
+        //     username: "11",
+        //     value: 100
+        //   },
+        //   {
+        //     diffValue: 987,
+        //     id: 3333,
+        //     imageUrl: "http://img.haloapp.vip/wKqYHqdKGZRo?imageslim",
+        //     levelVo: null,
+        //     rank: 1,
+        //     sex: null,
+        //     showValue: null,
+        //     uid: 9002,
+        //     username: "11",
+        //     value: 100
+        //   }
+        // ];
+        this.yesterdayRank = yesterdayRank || [];
+        this.myRank = myRank;
+      } else {
+        this.$toast.fail(msg);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.rank-pane {
+  height: 100%;
+  &-tips {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    & > p {
+      background-color: rgba(255, 255, 255, 0.1);
+      padding: 0 50px;
+      border-radius: 60px;
+      & > span {
+        border-radius: 26px;
+        font-size: 24px;
+        font-weight: 500;
+        color: #dbcfff;
+        line-height: 54px;
+      }
+    }
+  }
+  &-top {
+    width: 680px;
+    height: 160px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    margin: 30px auto 40px;
+    &-image {
+      width: 136px;
+      height: 136px;
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-image: url(../../assets/images/hg.png);
+      &-avatar {
+        width: 112px;
+        height: 112px;
+        margin-left: 13px;
+        margin-top: 13px;
+      }
+    }
+    &-info {
+      margin-left: 10px;
+      &-name {
+        font-size: 30px;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 48px;
+      }
+      &-id {
+        font-size: 24px;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 48px;
+        opacity: 0.6;
+      }
+    }
+  }
+  &-ticket {
+    background-image: url(../../assets/images/pcw_zr_bg.png);
+  }
+  &-gift {
+    background-image: url(../../assets/images/pcw_zr_bg2.png);
+  }
+  &-list {
+    height: calc(100% - 20px - 54px - 160px - 30px - 40px);
+    display: flex;
+    flex-direction: column;
+    &-rank {
+      flex: 1;
+      width: 100%;
+      padding: 0 35px;
+      margin: 0 auto;
+      overflow-x: hidden;
+      overflow-y: auto;
+      box-sizing: border-box;
+    }
+    &-user {
+      width: 100%;
+      height: 138px;
+      padding: 0 35px;
+      box-sizing: border-box;
+      background-color: #34285b;
+      display: flex;
+      align-items: center;
+      &-item {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

src/components/recordList/recordItem.vue

@@ -2,7 +2,7 @@
   <div class="record-item">
     <div class="record-item-left">
       <div class="record-item-left-image">
-        <van-image width="100%" height="100%" :src="img" />
+        <van-image width="100%" height="100%" :src="img" fit="cover" />
       </div>
       <div class="record-item-left-text">
         <span>{{ name }}</span>

src/main.js

@@ -2,7 +2,16 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-import { Toast, Dialog, Tab, Tabs, Popup, Image as VanImage, List } from "vant";
+import {
+  Toast,
+  Dialog,
+  Tab,
+  Tabs,
+  Popup,
+  Image as VanImage,
+  List,
+  Empty
+} from "vant";
 
 Vue.config.productionTip = false;
 
@@ -13,6 +22,7 @@ Vue.use(Tabs);
 Vue.use(Popup);
 Vue.use(VanImage);
 Vue.use(List);
+Vue.use(Empty);
 
 new Vue({
   router,

src/styles/cover.less

@@ -2,3 +2,6 @@
 @tab-active-text-color: #DBCFFF;
 @tabs-nav-background-color: none;
 @tabs-bottom-bar-color: #DBCFFF;
+
+
+@empty-description-color: #AFAAFF;

src/views/Home.vue

@@ -55,7 +55,8 @@ export default {
     // prizesView
     prizesView: resolve => require(["./prizesView.vue"], resolve),
     ruleView: resolve => require(["./ruleView.vue"], resolve),
-    recordView: resolve => require(["./recordView.vue"], resolve)
+    recordView: resolve => require(["./recordView.vue"], resolve),
+    rankView: resolve => require(["./rankView.vue"], resolve)
   },
   data() {
     return {
@@ -64,7 +65,7 @@ export default {
       componentsName: {
         规则: "rule-view",
         奖品: "prizes-view",
-        排行: "record-view",
+        排行: "rank-view",
         记录: "record-view"
       }
     };

src/views/prizesView.vue

@@ -48,6 +48,7 @@ export default {
     padding-top: 10px;
     &-pane {
       margin: 20px;
+      height: calc(100vh - 10px - 20px - 20px - 11.734vw);
       overflow-x: hidden;
       overflow-y: auto;
     }

src/views/rankView.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="rank-view">
+    <div class="rank-view-title">
+      <h3>排行榜</h3>
+    </div>
+    <div class="rank-view-content">
+      <van-tabs v-model="active" animated>
+        <van-tab title="棒场王" name="ticket">
+          <div class="rank-view-content-pane">
+            <rank-pane paneType="ticket"></rank-pane>
+          </div>
+        </van-tab>
+        <van-tab title="万人迷" name="gift">
+          <div class="rank-view-content-pane">
+            <rank-pane paneType="gift"></rank-pane>
+          </div>
+        </van-tab>
+      </van-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import rankPane from "@/components/rankPane";
+export default {
+  name: "rankView",
+  components: {
+    rankPane
+  },
+  data() {
+    return {
+      active: "ticket"
+    };
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.rank-view {
+  height: 100%;
+  background-color: #150832;
+  color: #dbcfff;
+  padding-top: 20px;
+  box-sizing: border-box;
+  &-title {
+    text-align: center;
+    & > h3 {
+      font-size: 32px;
+      font-weight: bold;
+      color: #dbcfff;
+      line-height: 72px;
+    }
+  }
+  &-content {
+    &-pane {
+      height: calc(100vh - 20px - 72px - 11.734vw);
+      overflow: hidden;
+    }
+  }
+}
+</style>

src/views/ruleView.vue

@@ -48,7 +48,7 @@ export default {
   background-color: #150832;
   color: #dbcfff;
   &-padding {
-    padding: 20px 30px;
+    height: 100%;
   }
   &-title {
     text-align: center;
@@ -56,12 +56,23 @@ export default {
     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>