提现记录&完善提现成功失败弹窗&修改头像&填写邀请码

H5/src/components/BaseDialog.vue

+<template>
+  <div class="base-dialog">
+    <van-overlay :show="BaseDialogShow">
+      <div class="wrapper" @click.stop>
+        <div class="content">
+          <van-icon
+            v-if="BaseDialogShowClose"
+            class="close-icon"
+            name="close"
+            size="30"
+            @click="BaseDialogShow = false"
+          />
+          <p v-if="BaseDialogTitle" class="title">{{ BaseDialogTitle }}</p>
+          <slot name="content" />
+          <div class="content-submit-btn">
+            <van-button round @click="onBtn">{{ BaseDialogBtn }}</van-button>
+          </div>
+        </div>
+      </div>
+    </van-overlay>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BaseDialog",
+  props: {
+    BaseDialogShowClose: {
+      type: Boolean,
+      default: false
+    },
+    BaseDialogShow: {
+      type: Boolean,
+      default: false
+    },
+    BaseDialogTitle: {
+      type: String,
+      default: ""
+    },
+    BaseDialogBtn: {
+      type: String,
+      default: "确定"
+    }
+  },
+  methods: {
+    onBtn() {
+      this.$emit("onClick");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+.content {
+  position: relative;
+  box-sizing: border-box;
+  position: relative;
+  width: 315px;
+  height: 293px;
+  background: #ffffff;
+  border-radius: 4px;
+  p {
+    margin: 0;
+  }
+  .title {
+    margin: 29px 0;
+    text-align: center;
+    font-size: 20px;
+    color: #333333;
+  }
+  .close-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  .content-submit-btn {
+    position: absolute;
+    bottom: 31px;
+    width: 100%;
+    text-align: center;
+
+    .van-button {
+      width: 160px;
+      color: #ffffff;
+      font-size: 16px;
+      background-color: #88c678;
+    }
+  }
+}
+</style>

H5/src/plugins/vant-ui.js

@@ -3,11 +3,15 @@ import {
   Button,
   Cell,
   CellGroup,
+  DatetimePicker,
   Dialog,
+  DropdownItem,
+  DropdownMenu,
   Field,
   Icon,
   NavBar,
   NoticeBar,
+  Overlay,
   Picker,
   Popup,
   Swipe,
@@ -22,10 +26,14 @@ Vue.use(Button)
   .use(Cell)
   .use(CellGroup)
   .use(Dialog)
+  .use(DropdownMenu)
+  .use(DropdownItem)
+  .use(DatetimePicker)
   .use(Field)
   .use(Icon)
   .use(NavBar)
   .use(NoticeBar)
+  .use(Overlay)
   .use(Popup)
   .use(Picker)
   .use(Swipe)

H5/src/router/index.js

@@ -19,9 +19,15 @@ const routes = [
   {
     path: "/cash-out",
     name: "CashOut",
-    component: () => import("@/views/cash-out"),
+    component: () => import("@/views/cashOut/cash-out"),
     meta: { title: "提现" }
   },
+  {
+    path: "/cash-out-record",
+    name: "CashOutRecord",
+    component: () => import("@/views/cashOut/cash-out-record"),
+    meta: { title: "提现记录" }
+  },
   {
     path: "/bank",
     name: "Bank",
@@ -75,6 +81,12 @@ const routes = [
     name: "Settings",
     component: () => import("@/views/settings"),
     meta: { title: "设置" }
+  },
+  {
+    path: "/modefy-avatar",
+    name: "ModefyAvatar",
+    component: () => import("@/views/modefyAvatar"),
+    meta: { title: "更换头像" }
   }
 ];
 

H5/src/views/cashOut/cash-out-record.vue

+<template>
+  <div class="cash-out-record">
+    <div id="top-month">
+      <span style="width: 80px; margin-right: 5px">{{ selected }}</span>
+      <van-icon name="arrow-down" @click="show = true" />
+    </div>
+    <div class="record-list">
+      <base-refresh-scroll @downLoad="onDownLoad" @upRefresh="onUpRefresh">
+        <div slot="content">
+          <div v-for="(item, index) in 20" :key="'record' + index">
+            <record-item />
+          </div>
+        </div>
+      </base-refresh-scroll>
+    </div>
+
+    <van-popup v-model="show" get-container="#top-month">
+      <van-datetime-picker
+        v-model="currentDate"
+        type="year-month"
+        @cancel="onPickerCancle"
+        @confirm="onPickerConfirm"
+      >
+      </van-datetime-picker>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import RecordItem from "./components/recordItem.vue";
+import BaseRefreshScroll from "../../components/BaseRefreshScroll.vue";
+export default {
+  components: {
+    BaseRefreshScroll,
+    RecordItem
+  },
+  name: "CashOutRecord",
+  data() {
+    return {
+      show: false,
+      options: [{ text: "2021年3月", value: 0 }],
+      selected: "",
+      currentDate: new Date()
+    };
+  },
+  mounted() {
+    this.selected = `${this.currentDate.getFullYear()}年${this.currentDate.getMonth() +
+      1}月`;
+  },
+  methods: {
+    onUpRefresh() {
+      console.log("上拉刷新");
+    },
+    onDownLoad() {
+      console.log("下拉加载");
+    },
+    onPickerCancle() {
+      this.show = false;
+    },
+    onPickerConfirm(val) {
+      this.selected = `${val.getFullYear()}年${val.getMonth() + 1}月`;
+      this.show = false;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+#top-month {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 44px;
+  margin-bottom: 10px;
+  padding-left: 15px;
+  font-size: 16px;
+  font-weight: bold;
+  background-color: #ffffff;
+  .van-popup {
+    position: absolute;
+    top: 145px;
+    left: 100px;
+    width: 200px;
+    max-height: 200px;
+    .van-picker {
+      height: 200px;
+      overflow: hidden;
+    }
+  }
+  ::v-deep .van-picker__frame {
+    border: 1px solid;
+  }
+}
+.record-list {
+  position: relative;
+  height: calc(100vh - 100px);
+}
+</style>

H5/src/views/cash-out.vue → H5/src/views/cashOut/cash-out.vue

@@ -44,30 +44,59 @@
         >提现</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>
+    <base-dialog
+      base-dialog-title="提现"
+      base-dialog-btn="提交"
+      :base-dialog-show="validCodeDialogShow"
+      :base-dialog-show-close="true"
+      @onClick="onSubmit"
+    >
+      <div slot="content">
+        <p class="content-text">请输入手机号135****1548的动态验证码</p>
+        <van-field
+          v-model="validCode"
+          type="number"
+          class="validCodeInput"
+          placeholder="请输入"
+        >
+          <img
+            slot="left-icon"
+            class="valid-code"
+            src="@/assets/images/验证码.png"
+          />
+        </van-field>
+      </div>
+    </base-dialog>
+    <base-dialog
+      :base-dialog-title="resultDialogTitle"
+      :base-dialog-show="resultDialog"
+      @onClick="onSuccess"
+    >
+      <div slot="content" style="text-align:center">
+        <img :src="resultDialogImg" style="width: 70px; height: 76px" alt />
+        <p style="margin:0;font-size:14px;color:#999999">
+          {{ resultDialogTip }}
+        </p>
+      </div>
+      <div></div>
+    </base-dialog>
   </div>
 </template>
 
 <script>
+import BaseDialog from "@/components/BaseDialog.vue";
 export default {
+  components: { BaseDialog },
   name: "CashOut",
   data() {
     return {
       bank: "",
       money: null,
       remainMoney: 100,
+      resultDialogTitle: "",
+      resultDialogTip: "",
+      resultDialogImg: "",
+      resultDialog: false,
       validCodeDialogShow: false,
       validCode: null
     };
@@ -83,6 +112,21 @@ export default {
       }
       this.validCode = null;
       this.validCodeDialogShow = true;
+    },
+    onSubmit() {
+      this.validCodeDialogShow = false;
+      this.resultDialog = true;
+      const res = "error";
+      this.resultDialogTitle = res === "success" ? "提现成功" : "提现失败";
+      this.resultDialogTip =
+        res === "success" ? "提现成功，请及时查收" : "提现失败，验证码错误";
+      this.resultDialogImg =
+        res === "success"
+          ? require("@/assets/images/成功.png")
+          : require("@/assets/images/叉号.png");
+    },
+    onSuccess() {
+      this.resultDialog = false;
     }
   }
 };
@@ -157,19 +201,26 @@ export default {
     }
   }
 }
+.content-text {
+  width: 185px;
+  margin: 25px auto;
+  text-align: center;
+  font-family: "PingFang-SC-Medium";
+  font-size: 14px;
+  color: #333333;
+}
 .validCodeInput {
   width: 245px;
   margin: 10px auto;
   background-color: #f9f9f9;
   border-radius: 20px;
-
+  .van-field__left-icon {
+    display: flex;
+    align-items: center;
+  }
   .valid-code {
     width: 16px;
     height: 18px;
-    img {
-      width: 100%;
-      height: 100%;
-    }
   }
 }
 </style>

H5/src/views/cashOut/components/recordItem.vue

+<template>
+  <div class="record-item">
+    <img src="@/assets/images/收益.png" />
+    <div class="item" style="flex:2;margin-left:10px">
+      <span style="font-size:14px;color:#333333">提现</span>
+      <span style="font-size:12px;color:#999999">2021.1.14 10:02</span>
+    </div>
+    <div class="item" style="flex:1">
+      <span style="font-size:16px;font-weight:bold;#333333;">￥55</span>
+      <span :class="`status-process`" style="font-size:12px">银行处理中</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.record-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  padding: 0 15px;
+  width: 100%;
+  height: 44px;
+  img {
+    width: 34px;
+    height: 34px;
+  }
+  .item {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    height: 100%;
+  }
+  .status-process {
+    // 银行处理中
+    color: #88c678;
+  }
+  .status-success {
+    color: #999999;
+  }
+}
+</style>

H5/src/views/modefyAvatar.vue

+<template>
+  <div class="modefy-avatar">
+    <img class="avatar" :src="avatar" alt />
+    <div class="btn">
+      <van-button type="primary" plain>确定</van-button>
+      <van-uploader
+        :max-count="1"
+        :before-delete="onDeleteAvatar"
+        :after-read="onRead"
+      >
+        <van-button type="primary">上传新头像</van-button>
+      </van-uploader>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ModefyAvatar",
+  data() {
+    return {
+      avatar: ""
+    };
+  },
+  mounted() {
+    if (!this.avatar) {
+      this.avatar = require("@/assets/images/no_avatar.png");
+    }
+  },
+  methods: {
+    onRead(file) {
+      this.avatar = file.content;
+      console.log("file", file);
+    },
+    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>
+.modefy-avatar {
+  box-sizing: border-box;
+  text-align: center;
+  padding-top: 115px;
+}
+.avatar {
+  width: 345px;
+  height: 345px;
+  margin-bottom: 52px;
+  border-radius: 4px;
+}
+.btn {
+  display: flex;
+  justify-content: space-around;
+  .van-button {
+    width: 165px;
+  }
+}
+</style>

H5/src/views/my/myStatus.vue

@@ -45,6 +45,10 @@ export default {
     return {
       activeTab: "",
       Tabs: [
+        {
+          id: 0,
+          name: "普通用户"
+        },
         {
           id: 1,
           name: "幼苗"

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

@@ -9,7 +9,7 @@
       <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;text-align:center">用户名</span>
         <span style="flex:2">本月业绩增长率</span>
         <span style="flex:1;text-align:center">奖金</span>
       </div>

H5/src/views/settings.vue

@@ -2,48 +2,72 @@
   <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 is-link center title="头像" @click="onModefy">
+        <img
+          class="avatar-img"
+          src="@/assets/images/no_avatar.png"
+          alt="头像"
         />
       </van-cell>
     </van-cell-group>
     <van-cell-group>
-      <van-field label="邀请人邀请码" />
+      <van-cell
+        is-link
+        title="邀请人邀请码"
+        :value="inviteeCode"
+        @click="fillInviterCode"
+      />
       <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>
+
+    <base-dialog
+      base-dialog-title="推荐人邀请码"
+      base-dialog-btn="提交"
+      :base-dialog-show="inviteeCodeDialog"
+      :base-dialog-show-close="true"
+      @onClick="onFillInviteeCode"
+    >
+      <div slot="content">
+        <p class="content-tip">请输入您的推荐人邀请码</p>
+        <van-field
+          v-model="fillCode"
+          type="number"
+          class="validCodeInput"
+          placeholder="请输入"
+        />
+      </div>
+    </base-dialog>
   </div>
 </template>
 
 <script>
+import BaseDialog from "../components/BaseDialog.vue";
 export default {
+  components: { BaseDialog },
   name: "Settings",
   data() {
     return {
-      fileList: []
+      fileList: [],
+      fillCode: "",
+      inviteeCode: "未填写",
+      inviteeCodeDialog: false
     };
   },
   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);
-          });
-      });
+    onModefy() {
+      this.$router.push("/modefy-avatar");
+    },
+    onFillInviteeCode() {
+      this.inviteeCodeDialog = false;
+      this.inviteeCode = this.fillCode;
+    },
+    fillInviterCode() {
+      if (this.inviteeCode === "未填写") {
+        this.inviteeCodeDialog = true;
+        this.fillCode = "";
+      }
     }
   }
 };
@@ -56,8 +80,7 @@ export default {
 }
 .group-1 {
   margin-bottom: 10px;
-  ::v-deep .van-uploader__upload,
-  ::v-deep .van-uploader__preview-image {
+  .avatar-img {
     width: 37px;
     height: 37px;
     border-radius: 50%;
@@ -66,4 +89,15 @@ export default {
 .logout-btn {
   margin: 10px 0;
 }
+.content-tip {
+  text-align: center;
+  font-size: 14px;
+  color: #333333;
+}
+.validCodeInput {
+  width: 245px;
+  margin: 35px auto;
+  background-color: #f9f9f9;
+  border-radius: 20px;
+}
 </style>