Merge branch 'dev_lqs' into 'master'

Dev lqs

See merge request !2

H5/package-lock.json

 {
-  "name": "h5",
+  "name": "sen_h5",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -1923,6 +1923,23 @@
         }
       }
     },
+    "@vue/composition-api": {
+      "version": "1.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.0-rc.2.tgz",
+      "integrity": "sha512-R4XEvT+qXiT/lnsLzqhjkR/L/ALuNeeQPZqredpLduGKwZtmt2l5I3kT1W+c/157hrY732eFlsPUGz/q9vFaYg==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==",
+          "dev": true
+        }
+      }
+    },
     "@vue/eslint-config-prettier": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-6.0.0.tgz",
@@ -4662,6 +4679,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.0.2.tgz",
+      "integrity": "sha512-En0VYpc96nw2/2AZoBWPHsGi471zMublttj50kfFpYAeR4geup0Tj9iVgEXh7QYZFPnRiruDJEjcB5PXZ+BYzQ==",
+      "requires": {
+        "tslib": "2.0.3",
+        "zrender": "5.0.4"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -6884,6 +6917,11 @@
         }
       }
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
@@ -9414,6 +9452,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-detector": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz",
+      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -11186,6 +11229,21 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
       "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
     },
+    "vue-demi": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.6.1.tgz",
+      "integrity": "sha512-2DI0owOzgEDnEBoXpp0nTBquAWLZqVf/+AOJpPUnviT17unMELEPNy5BdSRnQEz+DA0STtqaz+MZtwhzlDHm5Q=="
+    },
+    "vue-echarts": {
+      "version": "6.0.0-alpha.5",
+      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.0.0-alpha.5.tgz",
+      "integrity": "sha512-5kWxvmXnWcrdG4bKGhUoPmQgLmHXNTmmLXpfwnkANcTspwW04ooi2DdzS8x1VSHCl7bMGDBoVzZtphN5iB7eMw==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "resize-detector": "^0.3.0",
+        "vue-demi": "^0.6.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.5.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.5.0.tgz",
@@ -12234,6 +12292,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.0.4.tgz",
+      "integrity": "sha512-DJpy0yrHYY5CuH6vhb9IINWbjvBUe/56J8aH86Jb7O8rRPAYZ3M2E469Qf5B3EOIfM3o3aUrO5edRQfLJ+l1Qw==",
+      "requires": {
+        "tslib": "2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
+          "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
+        }
+      }
     }
   }
 }

H5/package.json

 {
-  "name": "h5",
+  "name": "sen_h5",
+  "author": "lqs",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -12,10 +13,13 @@
     "autoprefixer": "^8.0.0",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "echarts": "^5.0.2",
+    "js-cookie": "^2.2.1",
     "minirefresh": "^2.0.2",
     "postcss-loader": "^5.0.0",
     "vant": "^2.12.6",
     "vue": "^2.6.11",
+    "vue-echarts": "^6.0.0-alpha.5",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },
@@ -25,6 +29,7 @@
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
+    "@vue/composition-api": "^1.0.0-rc.2",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-import": "^1.13.3",

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>
@@ -20,10 +20,6 @@ export default {
     $route(val) {
       this.currentTitle = val.meta.title;
     }
-  },
-  created() {
-    console.log("router", this.$router);
-    // this.currentTitle = this.$router.currentRoute.meta.title;
   }
 };
 </script>

H5/src/api/infomation.js

+import request from "@/utils/request";
+
+/**
+ * 发布图文资讯
+ * @param {*} params
+ * @param {*} file 图片文件
+ */
+export function uploadImage(params, file) {
+  return request({
+    url: "/ZX/multipleImageUpload",
+    method: "post",
+    headers: { "Content-Type": "multipart/form-data" },
+    params,
+    data: file
+  });
+}

H5/src/api/user.js

 import request from "@/utils/request";
 
-// 获取token
-export function getToken() {
+// 登录
+export function Login() {
   return request({
     url: "/user/login?id=1",
     method: "get"

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/main.js

@@ -2,10 +2,11 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-import "amfe-flexible";
-import "@/plugins/vant-ui.js";
 import MiniRefreshTools from "minirefresh";
 import "minirefresh/dist/debug/minirefresh.css";
+import "amfe-flexible";
+import "@/plugins/vant-ui.js";
+import "@/plugins/echarts-plugins.js";
 
 Vue.use(MiniRefreshTools);
 Vue.config.productionTip = false;

H5/src/plugins/echarts-plugins.js

+import Vue from "vue";
+import * as echarts from "echarts/core";
+import ECharts from "vue-echarts";
+// 手动引入 ECharts 各模块来减小打包体积
+import {
+  GraphicComponent,
+  TooltipComponent,
+  LegendComponent
+} from "echarts/components";
+import { PieChart } from "echarts/charts";
+import { CanvasRenderer } from "echarts/renderers";
+
+echarts.use([
+  TooltipComponent,
+  LegendComponent,
+  PieChart,
+  CanvasRenderer,
+  GraphicComponent
+]);
+
+// 全局注册组件（也可以使用局部注册）
+Vue.component("v-chart", ECharts);

H5/src/plugins/vant-ui.js

@@ -7,8 +7,11 @@ import {
   Field,
   Icon,
   NavBar,
+  NoticeBar,
   Picker,
   Popup,
+  Swipe,
+  SwipeItem,
   Tab,
   Tabs,
   Toast,
@@ -22,8 +25,11 @@ Vue.use(Button)
   .use(Field)
   .use(Icon)
   .use(NavBar)
+  .use(NoticeBar)
   .use(Popup)
   .use(Picker)
+  .use(Swipe)
+  .use(SwipeItem)
   .use(Tab)
   .use(Tabs)
   .use(Uploader)

H5/src/router/index.js

@@ -27,6 +27,54 @@ const routes = [
     name: "Bank",
     component: () => import("@/views/bank"),
     meta: { title: "银行卡" }
+  },
+  {
+    path: "/income",
+    component: () => import("@/views/income/index"),
+    children: [
+      {
+        path: "detail",
+        name: "IncomeDetail",
+        component: () => import("@/views/income/income-detail"),
+        meta: { title: "收益明细查看" }
+      },
+      {
+        path: "wallet",
+        name: "Wallet",
+        component: () => import("@/views/income/wallet"),
+        meta: { title: "钱包" }
+      }
+    ]
+  },
+  {
+    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",
+    component: () => import("@/views/instructions"),
+    meta: { title: "用户协议" }
+  },
+  {
+    path: "/settings",
+    name: "Settings",
+    component: () => import("@/views/settings"),
+    meta: { title: "设置" }
   }
 ];
 

H5/src/store/index.js

 import Vue from "vue";
 import Vuex from "vuex";
+import getters from "./getters";
+import user from "./modules/user";
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({
-  state: {},
-  mutations: {},
-  actions: {},
-  modules: {}
+const store = new Vuex.Store({
+  modules: {
+    user
+  },
+  getters
 });
+
+export default store;

H5/src/store/modules/user.js

+import { Login } from "@/api/user";
+import { getToken, setToken } from "@/utils/auth";
+
+const getDefaultState = () => {
+  return {
+    token: getToken()
+  };
+};
+
+const state = getDefaultState();
+
+const mutations = {
+  RESET_STATE: state => {
+    Object.assign(state, getDefaultState());
+  },
+  SET_TOKEN: (state, token) => {
+    return (state.token = token);
+  }
+};
+
+const actions = {
+  login({ commit }) {
+    return new Promise((resolve, reject) => {
+      Login()
+        .then(res => {
+          if (res.code === 0) {
+            const token = res.data;
+            commit("SET_TOKEN", token);
+            setToken(token);
+            resolve();
+          } else {
+            reject(res);
+          }
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
+  }
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+};

H5/src/utils/auth.js

+import Cookies from "js-cookie";
+
+const TokenKey = "Sen_H5";
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token);
+}
+
+export function getToken() {
+  return Cookies.get(TokenKey);
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey);
+}

H5/src/utils/request.js

@@ -4,12 +4,14 @@ import { Toast } from "vant";
 let loading = null;
 
 const service = axios.create({
-  baseURL: "http://8b4afafedf25.ngrok.io",
+  baseURL: "http://192.168.204.152:8997",
   timeout: 5000
 });
 
 service.interceptors.request.use(
   config => {
+    config.headers["Authorization"] =
+      "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ7XCJpZFwiOjEsXCJpbnZpdGVDb2RlXCI6XCIxXCIsXCJwYXNzd29yZFwiOlwiMTIzXCIsXCJ1c2VySWRcIjpcIjFcIixcInVzZXJMZXZlbFwiOjR9IiwiaWF0IjoxNjE0MzI3OTY0fQ.f9RPBOMo0BMMbWPnQIhvfLe535as60dk_SZoXMYOT3bHYjoYST-mivTcKC-u4grEpYZMax9RgyuHXCYydZPzQw";
     if (!config.loading) {
       loading = Toast.loading({
         forbidClick: true,

H5/src/views/income/income-detail.vue

+<template>
+  <div class="income-detail">
+    <div class="chart-box">
+      <v-chart class="chart" :option="pieOption" />
+    </div>
+    <div class="detail">
+      <p style="font-size:14px;font-weight:bold;">收益明细</p>
+      <div class="detail-list">
+        <base-refresh-scroll @downLoad="onDownLoad" @upRefresh="onUpRefresh">
+          <div slot="content">
+            <div
+              v-for="(item, index) in 10"
+              :key="`income-detail-${index}`"
+              class="detail-list-item"
+            >
+              <span>工资收益</span>
+              <span>￥55</span>
+              <span class="time">2021/02/26 10:02</span>
+            </div>
+          </div>
+        </base-refresh-scroll>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseRefreshScroll from "../../components/BaseRefreshScroll.vue";
+export default {
+  components: { BaseRefreshScroll },
+  name: "IncomeDetail",
+  data() {
+    return {
+      pieOption: {
+        legend: [
+          {
+            selected: "false",
+            align: "left",
+            x: "1%",
+            y: "65%",
+            data: ["工资收益"]
+          },
+          {
+            selected: "false",
+            align: "left",
+            x: "28%",
+            y: "65%",
+            data: ["曾极差奖金"]
+          },
+          {
+            selected: "false",
+            align: "left",
+            x: "65%",
+            y: "65%",
+            data: ["自身消费返佣"]
+          },
+          {
+            selected: "false",
+            align: "left",
+            x: "1%",
+            y: "75%",
+            data: ["培育奖"]
+          },
+          {
+            selected: "false",
+            align: "left",
+            x: "28%",
+            y: "75%",
+            data: ["月度肥料池分红"]
+          },
+          {
+            selected: "false",
+            align: "left",
+            x: "65%",
+            y: "75%",
+            data: ["进步奖"]
+          },
+          {
+            selected: "false",
+            align: "left",
+            x: "1%",
+            y: "85%",
+            data: ["红包"]
+          },
+          {
+            selected: "false",
+            align: "left",
+            x: "28%",
+            y: "85%",
+            data: ["运营中心补贴"]
+          },
+          {
+            selected: "false",
+            align: "left",
+            x: "65%",
+            y: "85%",
+            data: ["其他收益"]
+          }
+        ],
+        tooltip: {
+          trigger: "item"
+        },
+        series: [
+          {
+            name: "访问来源",
+            type: "pie",
+            radius: ["50%", "70%"], // pie 内外环
+            width: "180",
+            height: "180",
+            left: "center",
+            avoidLabelOverlap: true,
+            label: {
+              // 标签
+              show: false,
+              position: "outside", // 饼图扇区外侧
+              overflow: "break"
+            },
+            emphasis: {
+              // 点击圆环上的每一项显示label
+              label: {
+                show: false
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1048, name: "工资收益" },
+              { value: 735, name: "曾极差奖金" },
+              { value: 580, name: "自身消费返佣" },
+              { value: 484, name: "培育奖" },
+              { value: 300, name: "月度肥料池分红" },
+              { value: 300, name: "进步奖" },
+              { value: 300, name: "红包" },
+              { value: 300, name: "运营中心补贴" },
+              { value: 300, name: "其他收益" }
+            ]
+          }
+        ],
+        graphic: {
+          type: "group",
+          top: "80",
+          left: "center",
+          height: 80,
+          children: [
+            {
+              type: "text",
+              top: "25%",
+              left: "center",
+              style: {
+                width: "80",
+                text: "",
+                textAlign: "center",
+                overflow: "truncate",
+                textVerticaAlign: "middle",
+                fill: "#3d383a",
+                fontSize: "16px",
+                fontWeight: "bold"
+              }
+            },
+            {
+              type: "text",
+              top: "50%",
+              left: "center",
+              style: {
+                text: "当前总收益",
+                textAlign: "center",
+                textVerticaAlign: "middle",
+                fill: "#333333",
+                fontSize: "12px"
+              }
+            }
+          ]
+        }
+      }
+    };
+  },
+  mounted() {
+    this.pieOption.graphic.children[0].style.text = "123456";
+  },
+  methods: {
+    onDownLoad(val) {
+      console.log("下拉刷新", val);
+    },
+    onUpRefresh(val) {
+      console.log("上拉加载", val);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.income-detail {
+  padding: 10px 16px;
+}
+.chart-box {
+  width: 345px;
+  height: 268px;
+  margin: 15px auto 12px;
+  background-color: #ffffff;
+}
+
+.detail {
+  box-sizing: border-box;
+  width: 345px;
+  margin: 0 auto;
+  padding: 10px 16px;
+  font-size: 14px;
+  background-color: #ffffff;
+
+  .detail-list {
+    position: relative;
+    height: 309px;
+  }
+  .detail-list-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    color: #333333;
+
+    .time {
+      color: #999999;
+    }
+  }
+}
+</style>

H5/src/views/income/index.vue

+<template>
+  <router-view />
+</template>

H5/src/views/income/wallet.vue

+<template>
+  <div class="wallet">
+    <div class="content">
+      <img class="balance-img" src="@/assets/images/余额.png" alt />
+      <p
+        style="position:absolute;top:136px;width:100%;font-size:18px;color:#333333"
+      >
+        当月收益
+      </p>
+      <div style="position:absolute;top:178px;width:100%">
+        <span class="month-income">1,285.35</span>
+        <img
+          src="@/assets/images/右箭头.png"
+          alt
+          style="width:11px;height:18px"
+        />
+      </div>
+      <div class="bottom-box">
+        <div class="income-item">
+          <img src="@/assets/images/待结算.png" alt />
+          <p>累计收益</p>
+          <div>
+            <span class="money">3525.35</span>
+            <img
+              src="@/assets/images/右箭头.png"
+              alt
+              style="width:8px;height:15px"
+            />
+          </div>
+        </div>
+        <div class="income-item">
+          <img src="@/assets/images/累计收入.png" alt />
+          <p>可提现</p>
+          <div>
+            <span class="money">325.36</span>
+            <img
+              src="@/assets/images/右箭头.png"
+              alt
+              style="width:8px;height:15px"
+            />
+          </div>
+        </div>
+      </div>
+      <van-button type="primary" class="cash-out-btn">提现</van-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.wallet {
+  box-sizing: border-box;
+  height: 100vh;
+  padding: 10px 16px;
+  p {
+    margin: 0;
+  }
+  .content {
+    position: relative;
+    width: 345px;
+    height: 90%;
+    text-align: center;
+    background-color: #ffffff;
+    .balance-img {
+      position: absolute;
+      top: 72px;
+      left: 157px;
+      width: 34px;
+      height: 34px;
+    }
+
+    .month-income {
+      margin-right: 10px;
+      font-size: 28px;
+      color: #333333;
+    }
+
+    .bottom-box {
+      position: absolute;
+      top: 263px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      width: 100%;
+      font-size: 14px;
+      color: #666666;
+      img {
+        width: 30px;
+        height: 29px;
+      }
+      .income-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        height: 120px;
+      }
+      .money {
+        font-size: 20px;
+        color: #333333;
+        margin-right: 10px;
+      }
+    }
+
+    .cash-out-btn {
+      position: absolute;
+      bottom: 96px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 160px;
+    }
+  }
+}
+</style>

H5/src/views/instructions.vue

+<template>
+  <div class="instructions">
+    <div class="content">
+      <p class="title">西田森APP用户协议</p>
+      <p style="text-align: left; text-indent: 24px">
+        <span style="font-size: 12px"
+          >请您仔细阅读以下条款，并确认您已完全理解本协议之规定，尤其是免除及限制责任的条款、知识产权条款、法律适用及争议解决条款。请您仔细阅读以下条款，并确认您已完全理解本协议之规定，尤其是免除及限制责任的条款、知识产权条款、法律适用及争议解决条款。
+        </span>
+      </p>
+      <p style="text-align: left; text-indent: 24px">
+        <span style="font-size: 12px">
+          请您仔细阅读以下条款，并确认您已完全理解本协议之规定，尤其是免除及限制责任的条款、知识产权条款、法律适用及争议解决条款。请您仔细阅读以下条款，并确认您已完全理解本协议之规定，尤其是免除及限制责任的条款、知识产权条款、</span
+        >
+      </p>
+      <p style="text-align: left; text-indent: 24px">
+        <span style="font-size: 12px">
+          法律适用及争议解决条款。请您仔细阅读以下条款，并确认您已完全理解本协议之规定，尤其是免除及限制责任的条款、知识产权条款、法律适用及争议解决条款。</span
+        >
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "instructions"
+};
+</script>
+
+<style lang="scss" scoped>
+.instructions {
+  box-sizing: border-box;
+  padding: 10px 16px;
+  p {
+    margin: 0;
+  }
+  .title {
+    margin: 10px auto;
+    text-align: center;
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .content {
+    box-sizing: border-box;
+    width: 345px;
+    min-height: 100vh;
+    padding: 10px 16px;
+    background-color: #ffffff;
+  }
+}
+</style>

H5/src/views/publish.vue

@@ -23,12 +23,16 @@
       </van-uploader>
     </van-cell-group>
     <div class="btn">
-      <van-button type="primary" size="large">发布</van-button>
+      <van-button type="primary" size="large" @click="onPublish"
+        >发布</van-button
+      >
     </div>
   </div>
 </template>
 
 <script>
+import { uploadImage } from "@/api/infomation";
+
 export default {
   name: "publish",
   data() {
@@ -39,6 +43,20 @@ export default {
     };
   },
   methods: {
+    onPublish() {
+      console.log("发布===文字", this.message);
+      console.log("发布===文件", this.fileList);
+      const params = {
+        userId: "1",
+        zxField: this.message,
+        zxAddress: "北京海淀"
+      };
+      const fd = new FormData();
+      this.fileList.forEach(file => {
+        fd.append("files", file.file);
+      });
+      uploadImage(params, fd).then();
+    },
     openPopup() {
       this.fileShow = true;
     },

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" @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 {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 52px;
+    height: 46px;
+    line-height: 46px;
+    text-align: center;
+    font-size: 16px;
+    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 class="nav">
+      <van-icon
+        name="arrow-left"
+        size="20"
+        class="nav-left"
+        @click="$router.go(-1)"
+      />
+      <span class="nav-title">月度奖励</span>
+    </div>
+    <div class="notice">
+      <van-notice-bar left-icon="volume-o" background="transparent">
+        <div slot="left-icon" style="margin-right: 10px">
+          <img class="notice-icon" src="@/assets/images/notice.png" alt />
+        </div>
+        <van-swipe
+          vertical
+          class="notice-swipe"
+          :autoplay="3000"
+          :show-indicators="false"
+        >
+          <van-swipe-item>
+            95.30元进入本月累计奖金池 1-13 14:52:01</van-swipe-item
+          >
+          <van-swipe-item>内容 2</van-swipe-item>
+          <van-swipe-item>内容 3</van-swipe-item>
+        </van-swipe>
+      </van-notice-bar>
+    </div>
+    <div class="content">
+      <p style="font-size: 16px; font-weight: bold">本月累计奖金</p>
+      <p style="font-weight: bold">193,49.00</p>
+      <p style="font-size: 14px">历史累计奖金：￥110000.00</p>
+    </div>
+    <div class="newAdd-my">
+      <div class="newAdd">
+        <p>￥9100.00</p>
+        <div class="bottom">
+          <img src="@/assets/images/本月新增.png" alt />
+          <span>本月新增</span>
+        </div>
+      </div>
+      <div class="my">
+        <p>￥999.00</p>
+        <div class="bottom">
+          <img src="@/assets/images/我的份额.png" alt />
+          <span>我的份额</span>
+        </div>
+      </div>
+    </div>
+    <div class="level-pool">
+      <p class="level-pool-title">各等级本月累计奖励池</p>
+      <p class="level-pool-item">
+        <span>黄金树等级</span>
+        <span> ￥1000.00</span>
+      </p>
+      <p class="level-pool-item">
+        <span>农场主等级</span>
+        <span> ￥1000.00</span>
+      </p>
+      <p class="level-pool-item">
+        <span>森林之星等级</span>
+        <span> ￥1000.00</span>
+      </p>
+      <p class="level-pool-item">
+        <span>森田合伙人等级</span>
+        <span> ￥1000.00</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.month-award {
+  width: 100%;
+  height: 447px;
+  background-image: url("../../assets/images/月度奖励背景图.png");
+  background-size: cover;
+}
+.nav {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 46px;
+  .nav-left {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 52px;
+    height: 100%;
+    line-height: 46px;
+    text-align: center;
+  }
+  .nav-title {
+    max-width: 60%;
+    margin: 0 auto;
+    color: #333333;
+    font-weight: bold;
+    font-size: 16px;
+  }
+}
+.notice {
+  box-sizing: border-box;
+  min-width: 345px;
+  height: 44px;
+  line-height: 44px;
+  margin: 28px auto 47px;
+  background-image: url("../../assets/images/公告.png");
+  background-size: cover;
+
+  .van-notice-bar {
+    height: 44px;
+    line-height: 0;
+  }
+
+  .notice-icon {
+    width: 16px;
+    height: 14px;
+  }
+  .notice-swipe {
+    height: 44px;
+    line-height: 44px;
+  }
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 120px;
+  margin-bottom: 90px;
+  font-family: "PingFang-SC";
+  p {
+    margin: 0;
+  }
+}
+.newAdd-my {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  width: 345px;
+  margin: 0 auto 15px;
+  p {
+    margin: 0;
+  }
+  .newAdd,
+  .my {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 169px;
+    height: 98px;
+    padding: 13px 20px 15px 17px;
+    font-size: 14px;
+    background-color: #ffffff;
+    p {
+      font-weight: bold;
+    }
+    img {
+      width: 24px;
+      height: 21px;
+    }
+    .bottom {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+.level-pool {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 345px;
+  height: 170px;
+  margin: 0 auto;
+  padding: 18px 15px 19px;
+  font-family: "PingFang-SC-Medium";
+  background-color: #ffffff;
+  p {
+    margin: 0;
+  }
+  &-title {
+    font-size: 16px;
+    color: #333333;
+  }
+  &-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    color: #666666;
+  }
+}
+</style>

H5/src/views/settings.vue

+<template>
+  <div class="settings">
+    <van-cell-group class="group-1">
+      <van-cell title="用户名" value="135****1234" />
+      <van-cell is-link center title="头像">
+        <van-uploader
+          v-model="fileList"
+          :max-count="1"
+          :before-delete="onDeleteAvatar"
+        />
+      </van-cell>
+    </van-cell-group>
+    <van-cell-group>
+      <van-field label="邀请人邀请码" />
+      <van-cell is-link title="软件更新" value="版本v1.2" />
+      <van-cell is-link title="用户协议" />
+    </van-cell-group>
+    <van-button size="large" class="logout-btn">退出登录</van-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Settings",
+  data() {
+    return {
+      fileList: []
+    };
+  },
+  methods: {
+    onDeleteAvatar(file, detail) {
+      return new Promise((resolve, reject) => {
+        this.$dialog
+          .confirm({
+            message: "确认删除图片？"
+          })
+          .then(() => {
+            this.fileList.splice(detail.index, 1);
+            this.$toast.success("删除成功");
+            resolve();
+          })
+          .catch(error => {
+            this.$toast.fail("已取消");
+            reject(error);
+          });
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.settings {
+  box-sizing: border-box;
+  padding: 10px 16px;
+}
+.group-1 {
+  margin-bottom: 10px;
+  ::v-deep .van-uploader__upload,
+  ::v-deep .van-uploader__preview-image {
+    width: 37px;
+    height: 37px;
+    border-radius: 50%;
+  }
+}
+.logout-btn {
+  margin: 10px 0;
+}
+</style>