ch-xymy-h5/src/views/User/Team.vue

<template>
    <BasePage :title="title ? $substring(title, 0, 8) + '的好友' : '我的好友'">
        <div class="team_page">
            <div class="team_page__count">
                <div class="team_page__count_header">
                    <div class="team_page__count_title box-align-center">
                        <b>
                            我的好友
                        </b>
                        <van-icon style="margin-left: 1.2vw;" :name="cansee ? 'eye-o' : 'closed-eye'"
                            @click="cansee = !cansee"> </van-icon>
                        <!-- <span>
                            {{ total.TotalTreeQty }}
                        </span> -->
                    </div>
                    <div class="team_page__invite_btn r" @click="$navigate('/Invite')">
                        <img src="/img/icon-team-user.png" alt="">
                        <span>
                            邀请好友
                        </span>
                    </div>
                </div>

                <div class="team_page__count_num">
                    <b>
                        {{ !cansee ? (total.allfriendcount || 0) : '***' }}
                    </b>
                </div>
            </div>

            <div class="team_page__list_title">
                <!-- 直推好友列表({{ total.TotalCount }}) -->
                <van-tabs v-model:active="active" background="transparent" color="#9a9666" style="font-size: 4vw;"
                    font-size="4vw">
                    <van-tab :title="'分享的好友(' + total.friendcount + ')'"></van-tab>
                    <!-- <van-tab :title="'拓展的商家'"></van-tab> -->
                    <van-tab :title="'我的推荐人'"></van-tab>

                </van-tabs>


            </div>

            <BaseList ref="baseList" :url="listUrl" :parseData="parseData" class="team_page__list">
                <template #default="{ item }">
                    <div class="team_page__item" :key="item.id">
                        <div class="team_page__user">
                            <img class="team_page__user_avatar" :src="$file(item.userimg)" alt="">
                            <div class="team_page__user_info">
                                <div>
                                    <b>{{ item.nickname }}</b>
                                    <!-- <span class="vip">{{ item.userlevelname }}</span> -->
                                </div>
                                <div class="box">
                                    <p>账号:{{ item.cellphone ? item.cellphone.substring(0, 3) + '****' +
                                        item.cellphone.substring(7) : '' }}</p>

                                </div>
                                <!-- <div>
                                    <p>ID {{ item.UserID }}</p>
                                    <img src="/img/icon-copy.png" @click="$copyText(item.UserID); $showSuccessToast('复制ID成功')"
                                        alt="">
                                </div> -->

                                <div>
                                    <span>{{ $formatGMT(item.addtime, 'yyyy-MM-dd HH:mm:ss') }}</span>
                                    <!-- <span class="r" v-if="item.isshop" @click="openshop(item.id)">
                                        商家信息 <van-icon name="arrow"></van-icon>
                                    </span> -->
                                    <!-- <span class="r">
                                        Ta的好友
                                        <van-icon name="arrow"></van-icon>
                                    </span> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </BaseList>

            <van-popup v-model:show="show" style="padding: 4vw 3.33vw;border-radius: 2.67vw;">
                <!-- 该账号商家信息： -->
                <div class="team_page__merchant_info">
                    <img :src="$file(shopinfo.shopimg)" alt="">

                    <div class="team_page__merchant_info_text">
                        <b>{{ shopinfo.shopname }}</b>
                        <span>账号：{{ shopinfo.shopphone }}</span>
                    </div>
                </div>
            </van-popup>
        </div>
    </BasePage>
</template>

<script>
export default {
    name: 'Team',
    // watch: {
    //     title(val, old) {
    //         document.title = this.$substring(val, 0, 8) + '的好友';
    //     },
    // },
    mounted() {
        this.init()
    },
    data() {
        return {
            active: 0,
            cansee: true,
            show: false,
            data: [
            ],
            total: {
            },
            shopinfo: {},
            title: this.$route.query.title || null,
        };
    },
    methods: {
        init() {
            this.$get('/v1/client/DUsersClient/friendstatistics').then(data => {
                this.total = data.data;
            })
        },
        updateList() {
            this.$refs.baseList.refresh()
        },
        parseData(res) {
            if (this.active === 1) {
                return res.data ? [res.data] : []
            } else {
                return res.data.items || []
            }
        },
        openshop(e) {
            this.$get(`/v1/client/DShopsClient/${e}`).then(res => {
                // console.log(res);
                this.shopinfo = res.data;
                this.show = true;
            })
        }
    },
    computed: {
        listUrl() {
            if (this.active === 0) {
                return '/v1/client/DUsersClient/friend'
            } else {
                return '/v1/client/DUsersClient/referrer'
            }
        }
    },
};
</script>

<style scoped>
.d-bg {
    background: #f5f5f5;
}

.f14 {
    font-size: 14px;
}

.p10 {
    padding: 10px;
}

.r10 {
    border-radius: 10px;
}

.team_page__merchant_info {
    display: flex;
}

.team_page__merchant_info img {
    width: 12vw;
    height: 12vw;
    /* border-radius: 50%; */
}

.team_page__merchant_info .team_page__merchant_info_text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 3.33vw;
    height: 12vw;
}

.team_page__merchant_info .team_page__merchant_info_text b {
    font-size: 4vw;
    color: #000000;
}

.team_page__merchant_info .team_page__merchant_info_text span {
    font-size: 3.67vw;
    color: #333;
}
</style>