feat: 更新

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

@@ -1,4 +1,7 @@
 @tab-text-color: #AFAAFF;
 @tab-active-text-color: #DBCFFF;
 @tabs-nav-background-color: none;
-@tabs-bottom-bar-color: #DBCFFF;
+@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>