Merge branch 'dev_lqs' into 'master'

完善我的直推界面

See merge request !1

H5/package-lock.json

 {
-  "name": "sen_h5",
+  "name": "h5",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,
@@ -7494,6 +7494,11 @@
         "minipass": "^3.0.0"
       }
     },
+    "minirefresh": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/minirefresh/-/minirefresh-2.0.2.tgz",
+      "integrity": "sha1-FZt7DGJZc9ZZELbhARuNPQom2rE="
+    },
     "mississippi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",

H5/package.json

@@ -12,6 +12,7 @@
     "autoprefixer": "^8.0.0",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "minirefresh": "^2.0.2",
     "postcss-loader": "^5.0.0",
     "vant": "^2.12.6",
     "vue": "^2.6.11",

H5/src/api/user.js

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

H5/src/components/BaseRefreshScroll.vue

+<template>
+  <div id="minirefresh" class="minirefresh-wrap">
+    <div class="minirefresh-scroll">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BaseRefreshScroll",
+  data() {
+    return {
+      pageNo: 1
+    };
+  },
+  mounted() {
+    this.refresh();
+  },
+  methods: {
+    refresh() {
+      const that = this;
+      this.miniRefresh = new window.MiniRefresh({
+        container: "#minirefresh",
+        down: {
+          offset: 50,
+          callback: function() {
+            that.pageNo = 1;
+            that.$emit("downLoad", that.pageNo);
+            that.miniRefresh.endDownLoading();
+          }
+        },
+        up: {
+          offset: 50,
+          isAuto: false,
+          toTop: {
+            isEnable: false
+          },
+          callback() {
+            that.pageNo++;
+            that.$emit("upRefresh", that.pageNo);
+            that.miniRefresh.endUpLoading(false);
+          }
+        }
+      });
+    }
+  }
+};
+</script>

H5/src/main.js

@@ -4,7 +4,10 @@ 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";
 
+Vue.use(MiniRefreshTools);
 Vue.config.productionTip = false;
 
 new Vue({

H5/src/plugins/vant-ui.js

@@ -3,6 +3,7 @@ import {
   Button,
   Cell,
   CellGroup,
+  Dialog,
   Field,
   Icon,
   NavBar,
@@ -17,6 +18,7 @@ import {
 Vue.use(Button)
   .use(Cell)
   .use(CellGroup)
+  .use(Dialog)
   .use(Field)
   .use(Icon)
   .use(NavBar)

H5/src/router/index.js

@@ -8,7 +8,7 @@ const routes = [
     path: "/my-status",
     name: "MyStatus",
     component: () => import("../views/my/myStatus.vue"),
-    meta: { title: "我的状态" }
+    meta: { title: "我的直推" }
   },
   {
     path: "/publish",

H5/src/utils/request.js

@@ -4,7 +4,7 @@ import { Toast } from "vant";
 let loading = null;
 
 const service = axios.create({
-  baseURL: "",
+  baseURL: "http://8b4afafedf25.ngrok.io",
   timeout: 5000
 });
 
@@ -35,3 +35,5 @@ service.interceptors.response.use(
     console.log("response===错误", error);
   }
 );
+
+export default service;

H5/src/views/cash-out.vue

 <template>
   <div class="cash-out">
-    <van-cell-group style="margin-bottom: 10px;">
+    <van-cell-group style="margin-bottom: 10px">
       <van-field
         v-model="bank"
         label="所属银行"
@@ -39,6 +39,24 @@
         </p>
       </div>
     </div>
+    <div style="padding: 10px 16px">
+      <van-button type="primary" size="large" @click="onCashOut"
+        >提现</van-button
+      >
+    </div>
+    <van-dialog v-model="validCodeDialogShow" title="提现" show-cancel-button>
+      <p style="text-align: center">请输入手机号135****1548的动态验证码</p>
+      <van-field
+        v-model="validCode"
+        type="number"
+        class="validCodeInput"
+        placeholder="请输入"
+      >
+        <div slot="left-icon" class="valid-code">
+          <img src="@/assets/images/验证码.png" />
+        </div>
+      </van-field>
+    </van-dialog>
   </div>
 </template>
 
@@ -48,13 +66,23 @@ export default {
   data() {
     return {
       bank: "",
-      money: 100,
-      remainMoney: 100
+      money: null,
+      remainMoney: 100,
+      validCodeDialogShow: false,
+      validCode: null
     };
   },
   methods: {
     allIn() {
       this.money = this.remainMoney;
+    },
+    onCashOut() {
+      if (!this.money) {
+        this.$toast.fail("未输入提现金额");
+        return;
+      }
+      this.validCode = null;
+      this.validCodeDialogShow = true;
     }
   }
 };
@@ -129,4 +157,19 @@ export default {
     }
   }
 }
+.validCodeInput {
+  width: 245px;
+  margin: 10px auto;
+  background-color: #f9f9f9;
+  border-radius: 20px;
+
+  .valid-code {
+    width: 16px;
+    height: 18px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
 </style>

H5/src/views/my/components/invitee.vue

 <template>
   <div class="invitee">
     <div class="baseInfo">
-      <img class="avatar" src="@/assets/logo.png" alt="用户头像" />
+      <img class="avatar" src="@/assets/images/avatar.png" alt="用户头像" />
       <span class="userName">丁晓霞</span>
-      <span style="font-size: 12px">西天森合伙人</span>
+      <span style="font-size: 12px;color:#666666">西天森合伙人</span>
     </div>
     <div class="detail">
       <p>
@@ -25,19 +25,21 @@
 <style lang="scss" scoped>
 .invitee {
   height: 130px;
-	margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 10px 16px;
   font-size: 16px;
-  background-color: #eeeeee;
-
+  background-color: #f8f8f8;
   p {
     margin: 10px;
   }
+  &:nth-child(1) {
+    margin-top: 10px;
+  }
 }
 .baseInfo {
   display: flex;
   align-items: center;
   padding-left: 10px;
-  padding-top: 10px;
   .avatar {
     width: 25px;
     height: 25px;
@@ -57,6 +59,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    font-family: "aPingFang-SC-Regular";
+    color: #333333;
   }
 }
 </style>

H5/src/views/my/myStatus.vue

 <template>
   <div class="my-status">
-    <div class="userInfo"></div>
+    <div class="userInfo">
+      <img src="@/assets/images/白银树.png" alt="等级背景图" />
+      <span class="level-label">我的等级</span>
+      <span class="level">Lv.3白银树</span>
+      <div class="userAvatar">
+        <div class="avatar-box">
+          <img class="avatar" src="@/assets/images/avatar.png" alt="头像" />
+          <img class="level-img" src="@/assets/images/等级展示框.png" alt />
+          <span class="avatar-level">Lv.3</span>
+        </div>
+      </div>
+    </div>
     <div class="status">
-      <van-tabs
-        v-model="activeTab"
-        swipeable
-        sticky
-        color="#28b537"
+      <van-tabs v-model="activeTab" swipeable sticky color="#28b537">
+        <van-tab
+          v-for="item in Tabs"
+          :key="`tba-${item.id}`"
+          :title="item.name"
         >
-        <van-tab v-for="item in Tabs" :key="`tba-${item.id}`" :title="item.name">
-          <invitee-item></invitee-item>
+          <base-refresh-scroll @downLoad="onDownLoad" @upRefresh="onUpRefresh">
+            <div slot="content">
+              <div v-for="item in 10" :key="item.id">
+                <invitee-item />
+              </div>
+            </div>
+          </base-refresh-scroll>
         </van-tab>
       </van-tabs>
     </div>
@@ -17,11 +33,13 @@
 </template>
 
 <script>
-import InviteeItem from './components/invitee'
+import BaseRefreshScroll from "../../components/BaseRefreshScroll.vue";
+import InviteeItem from "./components/invitee";
 export default {
   name: "MyStatus",
   components: {
-    InviteeItem
+    InviteeItem,
+    BaseRefreshScroll
   },
   data() {
     return {
@@ -57,19 +75,83 @@ export default {
         }
       ]
     };
+  },
+  methods: {
+    onDownLoad(val) {
+      console.log("下拉加载", val);
+    },
+    onUpRefresh(val) {
+      console.log("上拉刷新", val);
+    }
   }
 };
 </script>
 
 <style lang="scss" scoped>
 .userInfo {
-  height: 120px;
+  box-sizing: border-box;
+  position: relative;
+  width: 364px;
+  height: 119px;
+  margin: 0 auto 20px;
+  padding: 7px 10px 12px;
   background-color: #ffffff;
   border-radius: 4px;
-  margin-bottom: 20px;
+
+  img {
+    width: 345px;
+    height: 100px;
+  }
+  .level-label {
+    position: absolute;
+    top: 35px;
+    left: 30px;
+    font-size: 12px;
+  }
+  .level {
+    position: absolute;
+    top: 56px;
+    left: 31px;
+    font-size: 22px;
+    color: #ffffff;
+  }
+  .userAvatar {
+    position: absolute;
+    top: 26px;
+    right: 43px;
+    .avatar-box {
+      position: relative;
+      width: 60px;
+      height: 60px;
+      .avatar {
+        width: 57px;
+        height: 57px;
+        border: 2px solid #ffffff;
+        border-radius: 50%;
+      }
+      .level-img {
+        position: absolute;
+        top: 50px;
+        right: 0px;
+        width: 59px;
+        height: 16px;
+      }
+      .avatar-level {
+        position: absolute;
+        top: 51px;
+        right: 20px;
+        font-size: 12px;
+        color: #ff9600;
+      }
+    }
+  }
 }
 ::v-deep .van-tabs__content {
+  position: relative;
   height: 100vh;
   background-color: #ffffff;
 }
+::v-deep .van-tab__pane {
+  padding-top: 10px;
+}
 </style>