进步奖界面

H5/src/App.vue

 <template>
   <div id="app">
-    <base-nav-bar :navBarTitle="currentTitle" />
+    <base-nav-bar v-if="!$route.meta.noNav" :navBarTitle="currentTitle" />
     <router-view />
   </div>
 </template>
@@ -22,7 +22,7 @@ export default {
     }
   },
   created() {
-    console.log("router", this.$router);
+    console.log("route", this.$route);
     // this.currentTitle = this.$router.currentRoute.meta.title;
   }
 };

H5/src/components/BaseRefreshScroll.vue

@@ -22,6 +22,7 @@ export default {
       const that = this;
       this.miniRefresh = new window.MiniRefresh({
         container: "#minirefresh",
+        isScrollBar: false,
         down: {
           offset: 50,
           callback: function() {

H5/src/router/index.js

@@ -46,6 +46,24 @@ const routes = [
       }
     ]
   },
+  {
+    path: "/rewards",
+    component: () => import("@/views/rewards/index"),
+    children: [
+      {
+        path: "fastest-progress",
+        name: "FastestProgress",
+        component: () => import("@/views/rewards/fastest-progress"),
+        meta: { title: "进步奖", noNav: true }
+      },
+      {
+        path: "month-award",
+        name: "MonthAward",
+        component: () => import("@/views/rewards/month-award"),
+        meta: { title: "月度奖励", noNav: true }
+      }
+    ]
+  },
   {
     path: "/instructions",
     name: "Instructions",

H5/src/views/publish.vue

@@ -48,11 +48,12 @@ export default {
       console.log("发布===文件", this.fileList);
       const params = {
         userId: "1",
-        zxField: this.message
+        zxField: this.message,
+        zxAddress: "北京海淀"
       };
       const fd = new FormData();
       this.fileList.forEach(file => {
-        fd.append("file", file.file);
+        fd.append("files", file.file);
       });
       uploadImage(params, fd).then();
     },

H5/src/views/rewards/compoments/rankItem.vue

+<template>
+  <div class="rank-item">
+    <span :class="['item-flex-1', 'index', `color-rank-${RankIndex}`]">
+			{{ RankIndex >9 ? RankIndex : '0' + RankIndex }}
+		</span>
+    <div style="flex:1">
+      <img class="avatar" src="@/assets/images/avatar.png" alt="用户头像" />
+    </div>
+    <span class="userName" style="flex:2;text-align:center">135****4857</span>
+    <span style="flex:2;text-align:center">25%</span>
+    <span class="item-flex-1" style="color:#fc5202">￥125</span>
+  </div>
+</template>
+
+<script>
+export default {
+	name: "RankItem",
+	props: {
+		RankIndex: {
+			type: Number
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.rank-item {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
+  font-family: "PingFang-SC-Medium";
+  font-size: 14px;
+	.index {
+		font-family: "PingFang-SC-Bold";
+	}
+	.color-rank-1 {
+		color: #fe0000;
+	}
+	.color-rank-2 {
+		color: #fcb202;
+	}
+	.color-rank-3 {
+		color: #00a0e9;
+	}
+}
+.item-flex-1 {
+  flex: 1;
+  text-align: center;
+}
+.avatar {
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+}
+</style>

H5/src/views/rewards/fastest-progress.vue

+<template>
+  <div class="fastest-progress">
+    <div class="bg">
+      <van-icon name="arrow-left" size="20" @click="$router.go(-1)" />
+      <span class="title">本月进步最大奖励池</span>
+      <span class="award">￥6000.00</span>
+    </div>
+    <div class="rank">
+      <div class="header rank-flex">
+        <span style="flex:1;text-align:center;">排名</span>
+        <span style="flex:1"></span>
+        <span style="flex:2;text-align:center">微信名</span>
+        <span style="flex:2">本月业绩增长率</span>
+        <span style="flex:1;text-align:center">奖金</span>
+      </div>
+      <div class="rank-flex rank-content">
+        <base-refresh-scroll>
+          <div slot="content">
+            <rank-item v-for="(item, index) in 20" :key="index" :rank-index="index + 1"/>
+          </div>
+        </base-refresh-scroll>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseRefreshScroll from "../../components/BaseRefreshScroll.vue";
+import RankItem from "./compoments/rankItem.vue";
+export default {
+  name: "FastestProgress",
+  components: {
+    RankItem,
+    BaseRefreshScroll
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.fastest-progress {
+  position: relative;
+	height: 100vh;
+}
+.bg {
+  position: relative;
+  height: 178px;
+  color: #ffffff;
+  background-image: url("../../assets/images/进步奖背景图.png");
+  background-size: cover;
+  .van-icon {
+    margin-top: 10px;
+    margin-left: 15px;
+    color: #ffffff;
+  }
+  .title {
+    position: absolute;
+    top: 113px;
+    left: 35px;
+    font-size: 14px;
+  }
+  .award {
+    position: absolute;
+    top: 136px;
+    left: 35px;
+    font-size: 16px;
+  }
+}
+.rank {
+  position: absolute;
+  top: 168px;
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(100% - 178px);
+	overflow: hidden;
+  padding: 10px;
+  background-color: #ffffff;
+  border-radius: 12px;
+
+  .header {
+    height: 36px;
+    font-size: 13px;
+    border-bottom: 1px solid #eeeeee;
+  }
+	.rank-content {
+		position: relative;
+		height: 100%;
+		overflow: hidden;
+	}
+  .rank-flex {
+    display: flex;
+  }
+}
+</style>

H5/src/views/rewards/index.vue

+<template>
+  <div class="rewards">
+    <router-view />
+  </div>
+</template>

H5/src/views/rewards/month-award.vue

+<template>
+	<div class="month-award">
+	</div>
+</template>
\ No newline at end of file