feats

src/app.js

 import Taro from '@tarojs/taro';
 import { createApp } from 'vue';
+import bannerAd from '@/components/ad/bannerAd.vue'
 import aLayout from '@/layout/aLayout.vue'
 import './app.less';
 import { login, updatePerson } from './service/person';
 });
 
 App.use(store);
+App.component('banner-ad', bannerAd);
 App.component('a-layout', aLayout);
 
 export default App

src/components/ad/bannerAd.vue

+<template>
+  <view style="height: 130px">
+    <template v-for="(it, inx) in list" :key="inx">
+      <basic-ad v-if="current === inx"></basic-ad>
+    </template>
+  </view>
+</template>
+
+<script>
+  import { onMounted, ref } from 'vue';
+  import { getSeq } from '@/service/adSeq';
+  import basicAd from './basicAd.vue'
+
+  export default {
+    components: {
+      'basic-ad': basicAd,
+    },
+    setup() {
+      const current = ref(0);
+      const list = new Array(20).fill();
+
+      onMounted(() => {
+        getSeq().then(res => {
+          if (res.dt > 0) {
+            const t = setInterval(() => {
+              if (current.value >= list.length - 1) {
+                current.value = 0;
+              } else {
+                current.value += 1;
+              }
+            }, res.dt);
+          }
+        })
+      });
+
+      return {
+        current,
+        list
+      }
+    }
+  }
+</script>

src/components/ad/basicAd.vue

+<template>
+  <ad unit-id="adunit-134135d609e5c485"></ad>
+</template>

src/layout/aLayout.vue

       <slot></slot>
     </view>
     <view class="flex-0">
-      <ad unit-id="adunit-134135d609e5c485"></ad>
+      <banner-ad />
     </view>
   </view>
 </template>

src/pages/rank/components/list.vue

 <template>
-  <scroll-view
-    :style="style"
-    scroll-y="true"
-    lower-threshold="60"
-    @scrolltolower="onScroll"
-  >
-    <view class="flex rank-row" v-for="(item, index) in list" :key="item.id">
-      <view class="flex-0 rank-no">{{index + 1}}</view>
-      <view class="flex-0 rank-thumb">
-        <image :src="item.avatar || flag"></image>
-      </view>
-      <view class="flex-1">{{item.name || '-'}}</view>
-      <view class="flex-0 rank-num">{{`${item.stNum} 人次`}}</view>
+  <view style="height: 100%">
+    <view class="rank-list-box" :style="style">
+      <scroll-view
+        style="height: 100%"
+        scroll-y="true"
+        lower-threshold="60"
+        @scrolltolower="onScroll"
+      >
+        <view class="flex rank-row" v-for="(item, index) in list" :key="item.id">
+          <view class="flex-0 rank-no">{{index + 1}}</view>
+          <view class="flex-0 rank-thumb">
+            <image :src="item.avatar || flag"></image>
+          </view>
+          <view class="flex-1">{{item.name || '-'}}</view>
+          <view class="flex-0 rank-num">{{`${item.stNum} 人次`}}</view>
+        </view>
+      </scroll-view>
     </view>
-  </scroll-view>
+    <view>
+      <banner-ad></banner-ad>
+    </view>
+  </view>
 </template>
 
 <script>
       const pageNumber = ref(0);
       const finished = ref(false);
 
-      // 100vw * 130 / 375 为 banner 高度
-      // 130px 为广告高度
-      const style = 'height: calc(100vh - 100vw * 130 / 375 - 130px)';
+      // 160px 为head高度 + marginTop
+      const style = 'height: calc(100% - 160px)';
       
       const listReachBottom = (pg) => {
         Taro.showLoading();
 </script>
 
 <style lang="less">
+.rank-list {
+  height: 100%;
+}
+
+.rank-list-box {
+  width: calc(100% - 2em);
+  box-sizing: border-box;
+  background: #faf4e6;
+  border-radius: 16rpx;
+  padding: 1em;
+  margin: 1em;
+}
+
 .rank-row {
   box-sizing: border-box;
-  padding: 16rpx 1em;
+  padding: 16rpx 0;
   font-size: 32rpx;
-
-  &:nth-child(odd) {
-    background: #fff;
-  }
 }
 
 .rank-no {
 
 .rank-num {
   width: 6em;
+  text-align: right;
 }
 </style>

src/pages/rank/index.vue

 <template>
-  <a-layout>
-    <view class="v-flex container">
-      <banner-box class="flex-0">
-        <view class="rank-tab flex">
-          <view class="flex-1" :class="{ active: current === 0 }" @tap="current = 0">
-            分享排名
-          </view>
-          <view class="flex-1" :class="{ active: current === 1 }" @tap="current = 1">
-            区域排名
-          </view>
+  <view class="page rank-page">
+    <view class="rank-head">
+      <view class="rank-tab flex">
+        <view class="flex-1" :class="{ active: current === 0 }" @tap="current = 0">
+          分享排名
         </view>
-      </banner-box>
-      <view class="flex-1">
-        <rank-list v-if="current === 0" st-type="person"></rank-list>
-        <rank-list v-else st-type="area"></rank-list>
+        <view class="flex-1" :class="{ active: current === 1 }" @tap="current = 1">
+          区域排名
+        </view>
+      </view>
+      <view class="rank-mine">
+        {{rankDesc}}
       </view>
     </view>
-  </a-layout>
+    <view class="rank-body">
+      <rank-list v-if="current === 0" st-type="person"></rank-list>
+      <rank-list v-else st-type="area"></rank-list>
+    </view>
+  </view>
 </template>
 
 <script>
-import { ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import Taro, { useReady } from '@tarojs/taro';
 import { useModel } from '@zjxpcyc/vue-tiny-store';
 import BannerBox from '@/components/banner/index.vue'
+import { getMyRank } from '@/service/rank';
 import ListVue from './components/list.vue';
 
 export default {
   components: {
-    'banner-box': BannerBox,
+    // 'banner-box': BannerBox,
     'rank-list': ListVue,
   },
   onShareAppMessage() {
   setup () {
     const { user } = useModel('user');
     const current = ref(0);
+    const myRank = ref(0);
+
+    const rankDesc = computed(() => myRank.value > 0 ? `我的全国排名：第 ${myRank.value} 名` : '我的全国排名：暂未上榜')
+
+    watch(user, (person) => {
+      if (person.personId) {
+        getMyRank(person.personId).then(res => myRank.value = res);
+      }
+    }, { immediate: true });
 
     return {
       user,
+      rankDesc,
       current,
     }
   },
 </script>
 
 <style lang="less">
+.rank-page {
+  background: linear-gradient(#EE1C25, #FFFD00);
+
+  @rankHeadHeight: 280rpx;
+
+  .rank-head {
+    height: @rankHeadHeight;
+  }
+
+  .rank-body {
+    height: calc(100% - @rankHeadHeight);
+  }
+}
+
+.rank-mine {
+  position: absolute;
+  width: calc(100vw - 2em);
+  top: 180rpx;
+  left: 1em;
+  background: rgba(250, 244, 230, .9);
+  color: #333;
+  border-radius: 48rpx;
+  line-height: 78rpx;
+  box-sizing: border-box;
+  padding: 0 2em;
+}
+
 .rank-tab {
   position: absolute;
   width: 60vw;
-  top: 100rpx;
+  top: 60rpx;
   left: 20vw;
 
-  background: rgba(251, 254, 154, 0.1);
-  color: #333;
-  border: 8px solid #A02923;
+  background: transparent;
+  color: rgba(250, 244, 230, 1);
+  border: 4rpx solid rgba(250, 244, 230, 1);
   border-radius: 48rpx;
   box-sizing: border-box;
   text-align: center;
   overflow: hidden;
 
   .active {
-    background: rgba(160, 41, 35, 1);
-    color: #fff;
+    background: rgba(250, 244, 230, .9);
+    color: #333;
   }
 }
 </style>

src/service/adSeq.js

+import request from "../utils/request";
+
+export const getSeq = () => request(`/api/wx/adSeq/1`);

src/service/rank.js

 import request from "../utils/request";
 
 export const getRank = (params) => request('/api/wx/stRank', { params });
+
+export const getMyRank = (personId) => request(`/api/wx/stRank/person/${personId}`);