|
|
@@ -1,13 +1,270 @@
|
|
|
<template>
|
|
|
- <div>mine</div>
|
|
|
+ <div class="conatainer">
|
|
|
+ <div class="header">
|
|
|
+ <div class="user">
|
|
|
+ <div class="avatar">
|
|
|
+ <img src="" alt="">
|
|
|
+ </div>
|
|
|
+ <p class="name">王叁叁</p>
|
|
|
+ <p class="expire">2020-4-29到期</p>
|
|
|
+ </div>
|
|
|
+ <div class="tab">
|
|
|
+ <router-link :to="{path: '/partner/sale'}">
|
|
|
+ <span class="label-wrap">
|
|
|
+ <i class="label">放款总额</i>
|
|
|
+ <img src="./image/btn_next@2x.png" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="value">89万元</span>
|
|
|
+ </router-link>
|
|
|
+ <router-link :to="{path: '/partner/business'}">
|
|
|
+ <span class="label-wrap">
|
|
|
+ <i class="label">邀请合伙人</i>
|
|
|
+ <img src="./image/btn_next@2x.png" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="value">123</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">7655.70</i>
|
|
|
+ <img class="icon-right" src="./image/btn_next@2x.png" alt="">
|
|
|
+ </span>
|
|
|
+ </router-link>
|
|
|
+ <router-link :to="{path: '/partner/detail'}">
|
|
|
+ <span class="label-wrap">
|
|
|
+ <img class="icon-left" src="./image/icon_wd_compact@2x.png" alt="">
|
|
|
+ <i class="label">我的合同</i>
|
|
|
+ </span>
|
|
|
+ <span class="value-wrap">
|
|
|
+ <i class="value">2020-09-23 12:21</i>
|
|
|
+ <img class="icon-right" src="./image/btn_next@2x.png" alt="">
|
|
|
+ </span>
|
|
|
+ </router-link>
|
|
|
+ <a href="javascript:;">
|
|
|
+ <span class="label-wrap">
|
|
|
+ <img class="icon-left" src="./image/icon_wd_key@2x.png" alt="">
|
|
|
+ <i class="label">我的邀请码：{{ inviteCode }}</i>
|
|
|
+ </span>
|
|
|
+ <span class="value-wrap">
|
|
|
+ <i class="btn-copy" @click="funCopyText">复制</i>
|
|
|
+ </span>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import Clipboard from 'clipboard'
|
|
|
+ import { Toast } from 'vant'
|
|
|
+
|
|
|
export default {
|
|
|
- name: 'mine'
|
|
|
+ name: 'mine',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ clipboardJs: null,
|
|
|
+ inviteCode: 'G549'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.clipboardJs = new Clipboard('.btn-copy')
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ funCopyText () {
|
|
|
+ const { inviteCode } = this
|
|
|
+ if (!inviteCode) {
|
|
|
+ Toast('没有可复制的内容')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 不支持点击复制
|
|
|
+ if (!(Clipboard.isSupported())) {
|
|
|
+ Toast('不支持点击复制')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.clipboardJs.text = () => inviteCode
|
|
|
+ Toast('复制成功')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeDestroy () {
|
|
|
+ this.clipboardJs.destroy()
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ .conatainer {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding-bottom: 100px;
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 25px 0 16px;
|
|
|
+ background: linear-gradient(90deg, #44403B 0%, #93806B 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .user {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ width: 355px;
|
|
|
+ padding-left: 11px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ background: pink;
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin: 0 15px 6px;
|
|
|
+ line-height: 25px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .expire {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ line-height: 17px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 355px;
|
|
|
+ padding: 31px 0 32px;
|
|
|
+ margin-top: 39px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #FFFFFF;
|
|
|
+
|
|
|
+ a {
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ &:after {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 8px;
|
|
|
+ content: '';
|
|
|
+ width: 1px;
|
|
|
+ height: 21px;
|
|
|
+ background: #E8E8E8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .label-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ padding-right: 22px;
|
|
|
+ margin-top: 2px;
|
|
|
+ line-height: 25px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-left {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-right {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ margin-left: 19px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-copy {
|
|
|
+ padding-right: 8px;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #C9A585;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
panyong