|
@@ -0,0 +1,328 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="content">
|
|
|
|
|
+ <!-- 头部 -->
|
|
|
|
|
+
|
|
|
|
|
+ <view class="container">
|
|
|
|
|
+ <view class="jiedianbackground"><image src="../../static/img/jiedian.png" mode=""></image></view>
|
|
|
|
|
+ <view class="number-box">
|
|
|
|
|
+ <view class="number">
|
|
|
|
|
+ <text>100</text>
|
|
|
|
|
+ 人
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="renshu">我的团队人数</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="message">
|
|
|
|
|
+ <!-- <view class="back" @click="navBack()" v-if="parentList.length > 0">
|
|
|
|
|
+ <image src="../../static/img/zhengyi10.png" mode=""></image>
|
|
|
|
|
+ 返回
|
|
|
|
|
+ </view> -->
|
|
|
|
|
+ <view class="relation-box">
|
|
|
|
|
+ <view class="relation">
|
|
|
|
|
+ <view class="headbox">
|
|
|
|
|
+ <view class="head">
|
|
|
|
|
+ <view class="photo"><image v-if="avatar" :src="avatar || '/static/error/missing-face.png'"></image></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- <view class="head-title">
|
|
|
|
|
+ <image src="../../static/error/missing-face.png" mode=""></image>
|
|
|
|
|
+ </view> -->
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="information">
|
|
|
|
|
+ <view class="name clamp">{{ name }}</view>
|
|
|
|
|
+ <view class="cell clamp">{{ phone }}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="sanchaji"><image src="../../static/img/sanchaji.png" mode=""></image></view>
|
|
|
|
|
+ <view class="subordinate flex">
|
|
|
|
|
+ <view class="subordinate-box" v-for="(item, index) in childList">
|
|
|
|
|
+ <view class="head"><image :src="item.avter || '/static/error/missing-face.png'" mode=""></image></view>
|
|
|
|
|
+ <view class="name clamp">{{ item.name }}</view>
|
|
|
|
|
+ <view class="phone clamp">{{ item.phone }}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <template v-if="childList.length < 5">
|
|
|
|
|
+ <view class="subordinate-box" v-for="item in (5-childList.length)">
|
|
|
|
|
+ <view class="head"></view>
|
|
|
|
|
+ <view class="name clamp"></view>
|
|
|
|
|
+ <view class="phone clamp"></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
|
|
|
+import { getjiedian, getReferralList, addJiedian } from '@/api/user.js';
|
|
|
|
|
+import { mapState, mapMutations } from 'vuex';
|
|
|
|
|
+export default {
|
|
|
|
|
+ components: {
|
|
|
|
|
+ uniPopup
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ name: '', //当前节点姓名
|
|
|
|
|
+ phone: '', //当前节点手机号
|
|
|
|
|
+ avatar: '', //当前节点头像
|
|
|
|
|
+ id: '',
|
|
|
|
|
+ childList: [{
|
|
|
|
|
+ name:'11',
|
|
|
|
|
+ phone:'13300000000'
|
|
|
|
|
+ },{
|
|
|
|
|
+ name:'12',
|
|
|
|
|
+ phone:'13300000001'
|
|
|
|
|
+ },{
|
|
|
|
|
+ name:'13',
|
|
|
|
|
+ phone:'13300000003'
|
|
|
|
|
+ },{
|
|
|
|
|
+ name:'14',
|
|
|
|
|
+ phone:'13300000004'
|
|
|
|
|
+ },
|
|
|
|
|
+ ] //当前节点的下级
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
|
|
|
|
|
+ },
|
|
|
|
|
+ onLoad() {
|
|
|
|
|
+ this.name = this.userInfo.nickname;
|
|
|
|
|
+ this.phone = this.userInfo.phone;
|
|
|
|
|
+ this.avatar = this.userInfo.avatar;
|
|
|
|
|
+ this.id = this.userInfo.uid;
|
|
|
|
|
+ this.loadData();
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ //返回
|
|
|
|
|
+
|
|
|
|
|
+ loadData() {
|
|
|
|
|
+ const obj = this;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="scss">
|
|
|
|
|
+page {
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background-color: #000;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.container {
|
|
|
|
|
+ width: 750rpx;
|
|
|
|
|
+ height: 400rpx;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ .jiedianbackground {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ width: 750rpx;
|
|
|
|
|
+ height: 400rpx;
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .number-box {
|
|
|
|
|
+ width: 750rpx;
|
|
|
|
|
+ height: 400rpx;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ .number {
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #fad6b0;
|
|
|
|
|
+
|
|
|
|
|
+ text {
|
|
|
|
|
+ font-size: 72rpx;
|
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ line-height: 86rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .renshu {
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #fad6b0;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.message {
|
|
|
|
|
+ padding: 0 30rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .relation-box {
|
|
|
|
|
+ margin-top: 100rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ .relation {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ .headbox {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ // width: 154rpx;
|
|
|
|
|
+ // height: 154rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .head {
|
|
|
|
|
+ width: 154rpx;
|
|
|
|
|
+ height: 154rpx;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ box-shadow: 5rpx 0rpx 5rpx 0rpx rgba(110, 171, 78, 0.26);
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ .photo {
|
|
|
|
|
+ width: 154rpx;
|
|
|
|
|
+ height: 154rpx;
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .head-title {
|
|
|
|
|
+ margin: -30rpx 30rpx 0 30rpx;
|
|
|
|
|
+ width: 94rpx;
|
|
|
|
|
+ height: 32rpx;
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // .head-name{
|
|
|
|
|
+ // max-width: 100%;
|
|
|
|
|
+ // font-size: 32rpx;
|
|
|
|
|
+ // font-weight: bold;
|
|
|
|
|
+ // color: #333333;
|
|
|
|
|
+ // }
|
|
|
|
|
+ // .head-phone{
|
|
|
|
|
+ // font-size: 26rpx;
|
|
|
|
|
+ // font-weight: 500;
|
|
|
|
|
+ // color: #999999;
|
|
|
|
|
+ // }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .information {
|
|
|
|
|
+ margin-left: 77rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ padding: 20rpx 10rpx;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ width: 297rpx;
|
|
|
|
|
+ height: 137rpx;
|
|
|
|
|
+ background: linear-gradient(90deg, #393326, #27221d);
|
|
|
|
|
+ border: 4rpx solid #fad6b0;
|
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .name {
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+ margin-left: 70rpx;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #fad6b0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .cell {
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+ margin-left: 70rpx;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #fad6b0;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .sanchaji {
|
|
|
|
|
+ margin: 30rpx 0;
|
|
|
|
|
+ width: 90%;
|
|
|
|
|
+ height: 91rpx;
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .subordinate {
|
|
|
|
|
+ width: 750rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
|
+ align-items: flex-start;
|
|
|
|
|
+ .subordinate-box {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ .head {
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ width: 120rpx;
|
|
|
|
|
+ height: 120rpx;
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .name {
|
|
|
|
|
+ max-width: 120rpx;
|
|
|
|
|
+ margin-top: 10rpx;
|
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
|
+ }
|
|
|
|
|
+ .phone {
|
|
|
|
|
+ max-width: 120rpx;
|
|
|
|
|
+ margin-top: 10rpx;
|
|
|
|
|
+ font-size: 22rpx;
|
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #999999;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .back {
|
|
|
|
|
+ float: right;
|
|
|
|
|
+ margin-top: 40rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 24rpx;
|
|
|
|
|
+ height: 23rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ width: 104rpx;
|
|
|
|
|
+ height: 39rpx;
|
|
|
|
|
+ border: 2rpx solid #6eab4e;
|
|
|
|
|
+ border-radius: 7rpx;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ font-family: PingFang SC;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #6eab4e;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|