贷款-我的页面改版

htmldev/loan/src/filter/toThousands.js

@@ -1,5 +1,7 @@
 export const toThousands = (num) => {
-  if (Object.prototype.toString.call(num) === '[object Number]') {
+  if (num === undefined) {
+    num = '0'
+  } else if (Object.prototype.toString.call(num) === '[object Number]') {
     num = num.toString()
   }
   return num.replace(/(\d)(?=(\d{3})+$)/g, '$1,')

htmldev/loan/src/views/partner/mine/index.vue

@@ -5,55 +5,65 @@
         <div class="avatar">
           <img :src="userInfo.partnerImgUrl" alt="">
         </div>
-        <p class="name">{{ userInfo.partnerName }}</p>
-        <p class="expire" v-show="userInfo.contractEndTime">{{ userInfo.contractEndTime }}到期</p>
+        <p class="name-wrap">
+          <span class="name">{{ userInfo.partnerName }}</span>
+          <!--todo 我的手机号码-->
+          <span class="phone"></span>
+        </p>
       </div>
       <div class="tab">
-        <router-link :to="{path: '/partner/sale'}">
+        <a class="border-bottom-1px" href="javascript:;">
           <span class="label-wrap">
-            <i class="label">放款总额</i>
-            <img src="./image/btn_next@2x.png" alt="">
+            <img class="icon-left" src="./image/icon_wd_wallet@2x.png" alt="">
+            <i class="label-wallet">我的钱包(元)</i>
+          </span>
+          <span class="value-wrap">
+            <i class="value-wallet">{{ userInfo.partnerBalance | toThousands }}</i>
+          </span>
+        </a>
+        <router-link class="border-bottom-1px" :to="{path: '/partner/wallet'}">
+          <span class="label-wrap">
+            <!--todo 累计收入-->
+            <i class="label">累计收入(元)：</i>
+          </span>
+          <span class="value-wrap">
+            <i class="value">详情</i>
+            <img class="icon-right" src="./image/btn_next@2x.png" alt="">
           </span>
-          <span class="value">{{ userInfo.totalOrderPrice ? userInfo.totalOrderPrice / 10000 : 0 }}万元</span>
         </router-link>
-        <router-link :to="{path: '/partner/business'}">
+        <router-link :to="{path: '/partner/sale'}">
           <span class="label-wrap">
-            <i class="label">邀请合伙人</i>
-            <img src="./image/btn_next@2x.png" alt="">
+            <i class="label">我已累计放款(元)：{{ userInfo.totalOrderPrice | toThousands }}</i>
+          </span>
+          <span class="value-wrap">
+            <i class="value">详情</i>
+            <img class="icon-right" src="./image/btn_next@2x.png" alt="">
           </span>
-          <span class="value">{{ userInfo.totalPartner }}</span>
         </router-link>
       </div>
     </div>
     <div class="menu-wrap">
-      <router-link :to="{path: '/partner/wallet'}">
-        <span class="label-wrap">
-          <img class="icon-left" src="./image/icon_wd_wallet@2x.png" alt="">
-          <i class="label">我的钱包</i>
-        </span>
-        <span class="value-wrap">
-          <i class="value">{{ userInfo.partnerBalance }}</i>
-          <img class="icon-right" src="./image/btn_next@2x.png" alt="">
-        </span>
-      </router-link>
-      <a href="javascript:;" @click="funJumpCompact">
+      <a class="compact" href="javascript:;" @click="funJumpCompact">
         <span class="label-wrap">
           <img class="icon-left" src="./image/icon_wd_compact@2x.png" alt="">
-          <i class="label">我的合同</i>
+          <i class="label">合伙人协议</i>
         </span>
-        <span class="value-wrap" v-show="userInfo.contractStartTime">
-          <i class="value">{{ userInfo.contractStartTime }}</i>
+        <span class="value-wrap" v-show="userInfo.contractEndTime">
+          <!--todo 到期时间去除小时分秒-->
+          <i class="value">{{ userInfo.contractEndTime }}到期</i>
           <img class="icon-right" src="./image/btn_next@2x.png" alt="">
         </span>
       </a>
-      <a href="javascript:;">
+      <a class="customer-service" href="javascript:;">
         <span class="label-wrap">
           <img class="icon-left" src="./image/icon_wd_key@2x.png" alt="">
-          <i class="label">我的邀请码：{{ userInfo.inviteCode }}</i>
-        </span>
-        <span class="value-wrap">
-          <i class="btn-copy" @click="funJumpDetail">去邀请</i>
+          <i class="label">我的专属客服</i>
         </span>
+        <a class="value-wrap" href="javascript:;">
+          <!--todo 专属客服名字及电话号码-->
+          <i class="label" @click="funJumpDetail"></i>
+          <img class="icon-phone" src="./image/btn_phone@2x.png" alt="">
+        </a>
       </a>
     </div>
     <Poster :posterBg="posterBg"
@@ -63,259 +73,278 @@
 </template>
 
 <script>
-  import Clipboard from 'clipboard'
-  import { Toast } from 'vant'
-  import Poster from '../poster'
-  import { mapGetters } from 'vuex'
+import Clipboard from 'clipboard'
+import { Toast } from 'vant'
+import Poster from '../poster'
+import { mapGetters } from 'vuex'
 
-  export default {
-    name: 'mine',
-    components: {
-      Poster
-    },
-    data () {
-      return {
-        clipboardJs: null,
-        posterBg: require('./image/poster_partner.png'),
-        codeParams: {
-          partnerImgUrl: '',
-          partnerName: '',
-          link: '',
-          x: 122,
-          y: 1191,
-          width: 202,
-          height: 192
-        }
+export default {
+  name: 'mine',
+  components: {
+    Poster
+  },
+  data () {
+    return {
+      clipboardJs: null,
+      posterBg: require('./image/poster_partner.png'),
+      codeParams: {
+        partnerImgUrl: '',
+        partnerName: '',
+        link: '',
+        x: 122,
+        y: 1191,
+        width: 202,
+        height: 192
       }
-    },
-    async mounted () {
-      await this.$nextTick()
-      this.clipboardJs = new Clipboard('.btn-copy')
-    },
-    activated () {
-      if (!this.$route.meta.isUseCache) {}
+    }
+  },
+  async mounted () {
+    await this.$nextTick()
+    this.clipboardJs = new Clipboard('.btn-copy')
+  },
+  activated () {
+    if (!this.$route.meta.isUseCache) {}
+    this.$nextTick(() => {
+      this.$refreshTitle('我的')
+    })
+    this.$route.meta.isUseCache = false
+  },
+  computed: {
+    ...mapGetters({
+      userInfo: 'partnerMine/userInfo'
+    })
+  },
+  methods: {
+    funJumpDetail () {
+      const { partnerImgUrl, partnerName, inviteCode } = this.userInfo
+      this.$set(this.codeParams, 'partnerImgUrl', partnerImgUrl)
+      this.$set(this.codeParams, 'partnerName', partnerName)
+      this.$set(this.codeParams, 'link', `${location.origin}/partner/explain?inviteCode=${inviteCode}`)
       this.$nextTick(() => {
-        this.$refreshTitle('我的')
-      })
-      this.$route.meta.isUseCache = false
-    },
-    computed: {
-      ...mapGetters({
-        userInfo: 'partnerMine/userInfo'
+        this.$refs.myPoster.createQRCode()
       })
     },
-    methods: {
-      funJumpDetail () {
-        const { partnerImgUrl, partnerName, inviteCode } = this.userInfo
-        this.$set(this.codeParams, 'partnerImgUrl', partnerImgUrl)
-        this.$set(this.codeParams, 'partnerName', partnerName)
-        this.$set(this.codeParams, 'link', `${location.origin}/partner/explain?inviteCode=${inviteCode}`)
-        this.$nextTick(() => {
-          this.$refs.myPoster.createQRCode()
-        })
-      },
-      funJumpCompact () {
-        if (!this.userInfo.contractEndTime) {
-          Toast('合同不存在')
-          return
-        }
-        this.$router.push({ path: '/partner/compact' })
-      },
-      funCopyText () {
-        const { inviteCode } = this.userInfo
-        if (!inviteCode) {
-          Toast('没有可复制的内容')
-          return
-        }
-        // 不支持点击复制
-        if (!(Clipboard.isSupported())) {
-          Toast('不支持点击复制')
-          return
-        }
-        this.clipboardJs.text = () => inviteCode
-        Toast('复制成功')
+    funJumpCompact () {
+      if (!this.userInfo.contractEndTime) {
+        Toast('合同不存在')
+        return
       }
+      this.$router.push({ path: '/partner/compact' })
     },
-    beforeDestroy () {
-      this.clipboardJs.destroy()
-    },
-    beforeRouteLeave (to, from, next) {
-      if (['partnerMarketing'].includes(to.name)) {
-        // from.meta.isUseCache = true
+    funCopyText () {
+      const { inviteCode } = this.userInfo
+      if (!inviteCode) {
+        Toast('没有可复制的内容')
+        return
       }
-      next()
+      // 不支持点击复制
+      if (!(Clipboard.isSupported())) {
+        Toast('不支持点击复制')
+        return
+      }
+      this.clipboardJs.text = () => inviteCode
+      Toast('复制成功')
+    }
+  },
+  beforeDestroy () {
+    this.clipboardJs.destroy()
+  },
+  beforeRouteLeave (to, from, next) {
+    if (['partnerMarketing'].includes(to.name)) {
+      // from.meta.isUseCache = true
     }
+    next()
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .conatainer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.conatainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding-bottom: 200px;
+  min-height: 100vh;
+  background: #fff url("./image/header_bg@2x.png") center top/100% 220px no-repeat;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding-top: 17px;
+}
+
+.avatar {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto;
+  border-radius: 50%;
+  overflow: hidden;
+
+  img {
+    display: block;
     width: 100%;
-    padding-bottom: 100px;
-    min-height: 100vh;
-    background: #fff;
   }
+}
+
+.name-wrap {
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+}
+
+.name {
+  line-height: 25px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #fff;
+}
 
-  .header {
-    position: relative;
-    left: 0;
-    top: 0;
+.phone {
+  margin-left: 8px;
+  line-height: 17px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #fff;
+}
+
+.tab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 355px;
+  margin-top: 34px;
+  border-radius: 8px;
+  background: #FFFFFF;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
+
+  a {
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
     align-items: center;
-    width: 100%;
-    padding: 25px 0 16px;
-    background: linear-gradient(90deg, #44403B 0%, #93806B 100%);
+    width: 298px;
+
+    &:nth-of-type(1) {
+      padding: 17px 0 15px;
+      @include border-bottom-1px(#E0E0E0);
+    }
+
+    &:nth-of-type(2) {
+      padding: 15px 0 18px;
+      @include border-bottom-1px(#E0E0E0);
+    }
+
+    &:nth-of-type(3) {
+      padding: 16px 0 20px;
+    }
   }
 
-  .user {
+  .label-wrap,
+  .value-wrap {
     display: flex;
-    align-items: flex-end;
-    width: 355px;
-    padding-left: 11px;
+    align-items: center;
   }
 
-  .avatar {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    overflow: hidden;
-
-    img {
-      display: block;
-      width: 100%;
-    }
+  .icon-left {
+    width: 24px;
+    height: 24px;
   }
 
-  .name {
-    margin: 0 15px 6px;
-    line-height: 25px;
-    font-size: 18px;
+  .label-wallet {
+    margin-left: 8px;
+    line-height: 27px;
+    font-size: 19px;
     font-weight: 500;
-    color: #fff;
+    color: #333;
   }
 
-  .expire {
-    margin-bottom: 8px;
-    line-height: 17px;
-    font-size: 12px;
+  .label {
+    line-height: 20px;
+    font-size: 14px;
     font-weight: 500;
-    color: #fff;
+    color: #333;
   }
 
-  .tab {
-    display: flex;
-    align-items: center;
-    width: 355px;
-    padding: 31px 0 32px;
-    margin-top: 39px;
-    border-radius: 8px;
-    background: #FFFFFF;
+  .value-wallet {
+    line-height: 42px;
+    font-size: 30px;
+    font-weight: 500;
+    color: #EE0A23;
+  }
 
-    a {
-      position: relative;
-      left: 0;
-      top: 0;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+  .value {
+    line-height: 20px;
+    font-size: 14px;
+    color: #999;
+  }
 
-      &:nth-of-type(1) {
-        &:after {
-          position: absolute;
-          right: 0;
-          top: 8px;
-          content: '';
-          width: 1px;
-          height: 21px;
-          background: #E8E8E8;
-        }
-      }
-    }
+  img {
+    width: 22px;
+    height: 22px;
+  }
+}
 
-    .label-wrap {
-      display: flex;
-      align-items: center;
-    }
+.menu-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin-top: 24px;
 
-    .label {
-      line-height: 20px;
-      font-size: 15px;
-      color: #999;
-    }
+  .compact,
+  .customer-service {
+    display: flex;
+    justify-content: space-between;
+    width: 355px;
+    box-shadow: 0 2px 0 -1px rgba(224, 224, 224, 0.5);
+  }
 
-    .value {
-      padding-right: 22px;
-      margin-top: 2px;
-      line-height: 25px;
-      font-size: 18px;
-      font-weight: 500;
-      color: #333;
-    }
+  .compact {
+    padding: 23px 0;
+  }
 
-    img {
-      width: 22px;
-      height: 22px;
-    }
+  .customer-service {
+    padding: 25px 0 15px;
   }
 
-  .menu-wrap {
+  .label-wrap,
+  .value-wrap {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    width: 100%;
-    margin-top: 12px;
-
-    a {
-      display: flex;
-      justify-content: space-between;
-      width: 355px;
-      padding: 36px 16px 24px;
-      border-radius: 4px;
-      box-shadow: 0 2px 0px -1px rgba(224, 224, 224, 0.5);
-    }
-
-    .label-wrap,
-    .value-wrap {
-      display: flex;
-      align-items: center;
-    }
+  }
 
-    .label {
-      margin-left: 12px;
-      line-height: 22px;
-      font-size: 16px;
-      font-weight: 500;
-      color: #333;
-    }
+  .label {
+    line-height: 22px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333;
+  }
 
-    .value {
-      line-height: 20px;
-      font-size: 15px;
-      color: #999;
-    }
+  .value {
+    line-height: 20px;
+    font-size: 14px;
+    color: #999;
+  }
 
-    .icon-left {
-      width: 20px;
-      height: 20px;
-    }
+  .icon-left {
+    width: 20px;
+    height: 20px;
+    margin-right: 12px;
+  }
 
-    .icon-right {
-      width: 22px;
-      height: 22px;
-      margin-left: 19px;
-    }
+  .icon-right {
+    width: 22px;
+    height: 22px;
+    margin-left: 6px;
+  }
 
-    .btn-copy {
-      padding-right: 8px;
-      line-height: 22px;
-      font-size: 16px;
-      font-weight: 500;
-      color: #C9A585;
-    }
+  .icon-phone {
+    width: 40px;
+    height: 40px;
+    margin-left: 7px;
   }
+}
 </style>