贺报页面, 增加接口

src/api/ebiz/congratulation/congratulation.js

@@ -0,0 +1,10 @@
+import request from '@/assets/js/utils/request'
+import getUrl from '@/assets/js/utils/get-url'
+
+export function getCongratulationList(data) {
+  return request({
+    url: getUrl('/data/performance/getAgentTop', 1),
+    method: 'post',
+    data
+  })
+}

src/views/ebiz/congratulation/CongratulationTop.vue

@@ -2,41 +2,44 @@
 <template>
   <div class="congratulationTop text-center">
     <van-row><van-col class="congratulationTitle" span="24">全国TOP30本月业绩排名</van-col></van-row>
-    <van-row class="rankLine rankTitle">
+    <div class="rankWrapper">
-      <van-col span="4">排名</van-col>
+      <van-sticky :offset-top="60">
-      <van-col span="5">姓名</van-col>
+        <van-row class="rankTitle">
-      <van-col span="5">分公司</van-col>
+          <van-col span="3">排名</van-col>
-      <van-col span="5">预收标保</van-col>
+          <van-col span="3">姓名</van-col>
-      <van-col span="5">承保标保</van-col>
+          <van-col span="8">分公司</van-col>
-    </van-row>
+          <van-col span="5">预收标保</van-col>
-    <div class="rankTable">
+          <van-col span="5">承保标保</van-col>
-      <van-row v-for="item in showData.topList" :key="item.ranking" class="rankLine">
+        </van-row>
-        <van-col class="rankCell" span="4">{{ item.ranking }}</van-col>
+      </van-sticky>
-        <van-col class="rankCell" span="5">{{ item.name }}</van-col>
+      <van-row v-for="(item, index) in showData.topList" :key="item.code" class="rankLine">
-        <van-col class="rankCell" span="5">{{ item.branceOffice }}</van-col>
+        <van-col span="3">{{ index + 1 }}</van-col>
-        <van-col class="rankCell" span="5">{{ item.advanceStand }}</van-col>
+        <van-col span="3">{{ item.name }}</van-col>
-        <van-col class="rankCell" span="5">{{ item.acceptStand }}</van-col>
+        <van-col span="8">{{ item.comName }}</van-col>
+        <van-col span="5">{{ item.ysbb }}</van-col>
+        <van-col span="5">{{ item.bzbf }}</van-col>
       </van-row>
     </div>
+
     <div class="deadline">
-      <span>数据截止时间：{{ showData.deadline }}</span>
+      <span>数据截止时间:{{ showData.deadline }}</span>
-      <span>单位：万元</span>
+      <span>单位:万元</span>
     </div>
     <van-row>
       <van-col span="24" class="detail">您的业绩</van-col>
-      <van-col span="24" class="detail">您本月预收标保16.98万元</van-col>
+      <van-col span="24" class="detail">您本月预收标保{{ showData.achievement.selfAdvanceStand }}万元</van-col>
-      <van-col span="24" class="detail">您本月承保标保16.98万元</van-col>
+      <van-col span="24" class="detail">您本月承保标保{{ showData.achievement.selfAcceptStand }}万元</van-col>
-      <van-col span="24" class="detail">全系统排名第136名</van-col>
+      <van-col span="24" class="detail">全系统排名第{{ showData.achievement.ranking }}名</van-col>
-      <van-col span="24" class="detail">距上一名差距412元</van-col>
+      <van-col span="24" class="detail">距上一名差距{{ showData.achievement.previousGap }}元</van-col>
     </van-row>
     <van-button type="danger" class="bottom-btn" @click="nextStep" v-no-more-click="1000">大单榜</van-button>
   </div>
 </template>
 
 <script>
-import { Col, Row } from 'vant'
+import { Col, Row, Sticky } from 'vant'
+import { getCongratulationList } from '@/api/ebiz/congratulation/congratulation.js'
 import dateUtil from '@/assets/js/utils/date-utils.js'
-// import {  } from '@/api/ebiz/manpower/manpower'
 
 export default {
   name: 'congratulationTop',
@@ -44,9 +47,6 @@ export default {
   data() {
     return {
       showData: {
-        // result: '0',
-        // resultMessage: '',
-        // content: {
         deadline: dateUtil.formatDate(new Date(), 'yyyy-MM-dd HH:mm'),
         achievement: {
           selfAdvanceStand: '54.1',
@@ -55,26 +55,29 @@ export default {
           previousGap: '21'
         },
         topList: []
-        // }
       }
     }
   },
   watch: {},
   created() {
-    for (let i = 0; i <= 20; i++) {
+    this.init()
-      let temp = {
-        ranking: i + 1,
-        name: '畅新峰',
-        branceOffice: '柳州',
-        advanceStand: '750',
-        acceptStand: '0'
-      }
-      this.showData.topList.push(temp)
-    }
   },
-  mounted() {},
   methods: {
-    init() {},
+    async init() {
+      let data = await getCongratulationList({ date: '2020-08-05', queryType: 'm' })
+      console.dir(data)
+      let result = data.content
+      let topList = result.list.splice(0, 30)
+      topList.map(value => {
+        value.comName = value.comName.substr(12)
+        return value
+      })
+      this.showData.topList.push(...topList)
+      this.showData.achievement.selfAdvanceStand = result.ysbb
+      this.showData.achievement.selfAcceptStand = result.bzbf
+      this.showData.achievement.ranking = result.top
+      this.showData.achievement.previousGap = result.xcbf
+    },
     nextStep() {
       this.$jump({
         flag: 'h5',
@@ -89,48 +92,61 @@ export default {
   },
   components: {
     [Col.name]: Col,
-    [Row.name]: Row
+    [Row.name]: Row,
+    [Sticky.name]: Sticky
   }
 }
 </script>
 
 <style scoped="scoped" lang="scss">
+.congratulationTop {
+  background-color: #fff;
+  height: 100vh;
+}
+
 .congratulationTitle {
+  height: 60px;
   font-size: 30px;
-  line-height: 2em;
+}
+
+.rankTitle {
+  font-size: 14px;
 }
 
 .rankTitle,
 .congratulationTitle {
   background-color: #ff4040;
   color: #ffffff;
-}
-
-.rankLine {
   line-height: 2em;
 }
 
-.rankTable {
+.rankLine {
-  height: 220px;
+  font-size: 14px;
+  line-height: 2em;
+  border-top: 1px solid red;
+}
+
+.rankWrapper {
+  height: 300px;
   overflow: auto;
-  border: 1px solid red;
+}
-  border-top: none;
+
-  border-right: none;
+.rankTable {
+  border-collapse: collapse;
 }
 
 .rankCell {
   border-right: 1px solid red;
-  border-top: 1px solid red;
 }
 
 .deadline {
   display: flex;
   justify-content: space-between;
-  line-height: 3em;
+  line-height: 2em;
 }
 
 .detail {
   color: #ff4040;
-  line-height: 3em;
+  line-height: 2em;
 }
 </style>