teambuy-front/pages/index/oldCenter.vue

<template>
    <view class="page">
        <!-- 导航栏 -->
        <navbar title="个人中心" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" />

        <!-- 头部 -->
        <view class="head">
            <view class="headImage">
                <image :src="userInfo.headImage" mode="aspectFill"></image>
            </view>

            <view class="user-info">
                <view class="user-base-info">
                    <view class="user-base-top">
                        <view class="user-name">{{ userInfo.nickName }}</view>
                        <view class="member-level">
                            <image v-if="userInfo.role == 1" :src="configList.vip_user" mode="aspectFill" class="level">
                            </image>
                            <image v-if="userInfo.role == 2" src="@/static/image/center/gold-min.png" mode="aspectFill"
                                class="level">
                            </image>
                            <image v-if="userInfo.role == 3" src="@/static/image/center/sliver-min.png"
                                mode="aspectFill" class="level">
                            </image>
                        </view>
                        <view class="user-tag">
                            {{ userRole[userInfo.isPay] }}
                        </view>
                    </view>

                    <view class="edit-user" @click="$utils.navigateTo('/pages_order/mine/updateUser?back=true')">
                        <image src="@/static/image/center/edit-icon.png" mode="aspectFill" class="edit-icon"></image>
                        <view class="edit-btn">
                            修改资料
                        </view>
                    </view>
                </view>

                <view class="user-phone">
                    手机号:{{ userInfo.phone }}
                </view>
            </view>
        </view>

        <!-- 会员卡片 -->
        <view @click="$utils.navigateTo({ url: '/pages_order/mine/memberCenter' })" v-if="userInfo.role != 0"
            class="earnings">
            <view v-if="index + 1 == userInfo.role" v-for="(item, index) in vipList" :key="item.id" class="member-item">
                <image :src="item.headImage" mode="aspectFill" class="member-image"></image>

                <view class="member-info">
                    <view class="profile-photo">
                        <image :src="userInfo.headImage" mode="aspectFill" class="pro-img"></image>
                        <view class="open-status">
                            开通时间：{{ riceInfo.openTime }}
                        </view>
                    </view>
                    <view class="open">
                    </view>
                </view>
            </view>
        </view>

        <!-- 佣金数据 -->
        <view @click="$utils.navigateTo('/pages_order/mine/withdraw')" class="brokerage-data"
            :class="{ 'brokerage-data-mt': !userInfo.role }">
            <view class="brokerage">
                <image :src="configList.money_image" mode="aspectFill" class="brokerage-img"></image>

                <div class="main">
                    <div class="title">我的佣金</div>
                    <div class="money">￥{{ riceInfo.canWithdraw || 0 }}</div>
                </div>
            </view>

            <view class="balance">
                <image :src="configList.price_image" mode="aspectFill" class="balance-img"></image>

                <div class="main">
                    <div class="title">我的余额</div>
                    <div class="money">￥{{ riceInfo.balance || 0 }}</div>
                </div>
            </view>
        </view>

        <!-- 我的服务 -->
        <view class="myServer">
            <view class="server-title">
                我的服务
            </view>

            <view class="box">
                <view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=0')">
                    <image src="@/static/image/center/1.png" mode="aspectFill" />
                    <view class="title">我的订单</view>
                </view>
                <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/partner')">
                    <image src="@/static/image/center/2.png" mode="aspectFill" />
                    <view class="title">我的团队</view>
                </view>
                <view class="boxs" @click="$utils.navigateTo('/pages_order/home/contact')">
                    <image src="@/static/image/center/3.png" mode="aspectFill" />
                    <view class="title">联系客服</view>
                </view>
                <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/promotion')">
                    <image src="@/static/image/center/4.png" mode="aspectFill" />
                    <view class="title">邀请好友</view>
                </view>
            </view>

            <view class="box">
                <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/recruit')">
                    <image src="@/static/image/center/5.png" mode="aspectFill" />
                    <view class="title">合伙人招募</view>
                </view>
                <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">
                    <image src="@/static/image/center/6.png" mode="aspectFill" />
                    <view class="title">会员权益</view>
                </view>
                <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/coupon')">
                    <image src="@/static/image/center/7.png" mode="aspectFill" />
                    <view class="title">优惠券</view>
                </view>
                <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/help')">
                    <image src="@/static/image/center/8.png" mode="aspectFill" />
                    <view class="title">帮助与反馈</view>
                </view>
            </view>

            <view class="box">
                <view class="boxs" @click="$utils.navigateTo('/pages_order/mine/address')">
                    <image src="@/static/image/center/address.png" mode="aspectFill" />
                    <view class="title">我的地址</view>
                </view>
                <view class="boxs" @click="$utils.navigateTo('/pages_order/order/giftList')">
                    <image src="@/static/image/center/9.png" mode="aspectFill" />
                    <view class="title">礼包列表</view>
                </view>
                <view class="boxs" @click="logout">
                    <image src="@/static/image/center/logout.png" mode="aspectFill" />
                    <view class="title">退出登录</view>
                </view>
            </view>
        </view>

        <!-- 广告 -->
        <div v-if="showAdvertising" class="ad" @click="$utils.navigateTo('/pages_order/mine/recruit')">
            <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="2000"
                :duration="duration">
                <swiper-item v-for="(item, index) in adList" :key="index">
                    <view class="swiper-main">
                        <view @click="closeAdvertising" class="close">
                            <image src="@/static/image/center/close.png" mode="aspectFill" class="close-img"></image>
                        </view>
                        <image :src="item" mode="aspectFill" class="swiper-main-img"></image>
                        <div class="ad-tag">
                            <image src="@/static/image/center/ad-tag.png" mode="aspectFill" class="ad-tag-img"></image>
                        </div>
                    </view>
                </swiper-item>
            </swiper>
        </div>

        <customerServicePopup ref="customerServicePopup" />

        <tabber select="center" />
    </view>
</template>

<script>
import tabber from '@/components/base/tabbar.vue'
import {
    mapState
} from 'vuex'
import customerServicePopup from '@/components/config/customerServicePopup.vue'

export default {
    components: {
        tabber,
        customerServicePopup,
    },
    computed: {
        ...mapState(['riceInfo']),
        adList() {
            let arr = [];
            if (this.configList?.shop_get_image) {
                arr = this.configList?.shop_get_image?.split(',')
            }
            return arr
        }
    },
    data() {
        return {
            vipType: ['普通会员', '黄金会员', '渠道商'],
            vipImage: ['vip_vip', 'vip_user', 'vip_shop'],
            vipList: [],
            showAdvertising: true,
            userRole: ['会员', '用户', '渠道'],
            indicatorDots: true,
            duration: 500
        }
    },
    onShow() {
        this.$store.commit('getUserInfo')
        this.$store.commit('getRiceInfo')
        this.getMemberCardData();
    },
    methods: {
        clickNo() {
            uni.showModal({
                title: '暂未开放',
            })
        },
        logout() {
            uni.showModal({
                title: '确认退出登录吗',
                success: (r) => {
                    if (r.confirm) {
                        this.$store.commit('logout', true)
                    }
                }
            })
        },

        //关闭广告
        closeAdvertising() {
            this.showAdvertising = false;
        },

        //获取会员卡片数据
        getMemberCardData() {
            this.$api('getRiceVipList', res => {
                if (res.code == 200) {
                    this.vipList = res.result
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.page {

    // 头部
    .head {
        display: flex;
        align-items: center;
        padding: 60rpx 20rpx 120rpx 20rpx;
        background: $uni-color;

        .headImage {
            width: 130rpx;
            height: 130rpx;
            background-image: url(/static/image/center/head-img.png);
            background-repeat: no-repeat;
            background-position: 50%, 50%;
            background-size: 100%;
            overflow: hidden;
            border-radius: 50%;
            margin-right: 20rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .user-info {
            width: calc(100% - 130rpx);

            .user-base-info {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                .user-base-top {
                    width: 65%;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    color: white;

                    .user-name {
                        max-width: calc(100% - 240rpx);
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        font-size: 34rpx;
                    }

                    .member-level {
                        margin-left: 10rpx;

                        .level {
                            width: 120rpx;
                            height: 60rpx;
                        }
                    }

                    .user-tag {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #000;
                        width: 100rpx;
                        height: 40rpx;
                        border-radius: 20rpx;
                        font-size: 24rpx;
                        margin-left: 10rpx;
                    }
                }

                .edit-user {
                    width: 35%;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;

                    .edit-icon {
                        width: 30rpx;
                        height: 30rpx;
                    }

                    .edit-btn {
                        color: white;
                        margin-left: 10rpx;
                    }
                }
            }

            .user-phone {
                color: white;
                font-size: 24rpx;
            }
        }
    }

    // 会员卡片
    .earnings {
        padding: 0rpx 20rpx;
        box-sizing: border-box;
        margin-top: -18%;

        .member-item {
            position: relative;

            .member-image {
                width: 100%;
                height: 300rpx;
                border-radius: 20rpx;
            }

            .member-info {
                position: absolute;
                bottom: 30rpx;
                left: 0rpx;
                display: flex;
                align-items: center;
                padding: 0rpx 40rpx;
                box-sizing: border-box;
                width: 100%;

                .profile-photo {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .pro-img {
                        width: 60rpx;
                        height: 60rpx;
                        border-radius: 50%;
                    }

                    .open-status {
                        color: #F8A95F;
                        border: 1px solid #F8A95F;
                        border-radius: 30rpx;
                        padding: 7rpx 20rpx;
                        margin-left: 10rpx;
                    }
                }

                .open {
                    font-size: 26rpx;
                    margin-left: 20rpx;
                }
            }
        }
    }

    // 佣金数据
    .brokerage-data {
        padding: 20rpx;
        background: white;
        border-radius: 20rpx;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        margin: 20rpx 20rpx 20rpx 20rpx;

        .brokerage,
        .balance {
            display: flex;
            flex-wrap: wrap;
            width: 50%;

            .brokerage-img,
            .balance-img {
                width: 50%;
                height: auto;
            }

            .main {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                width: 50%;
                box-sizing: border-box;
                padding: 30rpx 0rpx;

                .title {
                    font-size: 34rpx;
                }

                .money {
                    font-size: 40rpx;
                    color: $uni-color;
                    font-weight: bold;
                }
            }
        }
    }

    .brokerage-data-mt {
        margin-top: 50rpx;
    }

    // 我的服务
    .myServer {
        margin: 0rpx 20rpx 20rpx 20rpx;
        background: white;
        border-radius: 20rpx;
        padding: 30rpx 20rpx;
        box-sizing: border-box;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

        .server-title {
            margin-bottom: 30rpx;
            font-size: 36rpx;
            font-weight: 600;
            color: #333;
            position: relative;
            padding-left: 20rpx;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 8rpx;
                height: 32rpx;
                background: $uni-color;
                border-radius: 4rpx;
            }
        }

        .box {
            display: flex;
            width: 100%;
            margin-bottom: 30rpx;
            gap: 20rpx;

            .boxs {
                width: 23%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 20rpx 0;
                border-radius: 16rpx;
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;

                &::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(227, 68, 26, 0.05);
                    opacity: 0;
                    transition: opacity 0.3s ease;
                    z-index: 1;
                }

                &:active {
                    transform: scale(0.95);

                    &::after {
                        opacity: 1;
                    }
                }

                image {
                    width: 70rpx;
                    height: 70rpx;
                    display: block;
                    margin: 0rpx auto 16rpx auto;
                    position: relative;
                    z-index: 2;
                    transition: transform 0.3s ease;
                }

                .title {
                    font-size: 26rpx;
                    color: #333;
                    position: relative;
                    z-index: 2;
                    transition: color 0.3s ease;
                }

                &:active {
                    image {
                        transform: translateY(-4rpx);
                    }

                    .title {
                        color: $uni-color;
                    }
                }
            }

            &:last-child {
                margin-bottom: 0rpx;
            }
        }
    }

    // 广告
    .ad {
        margin: 0rpx 20rpx;

        .swiper {
            .swiper-main {
                position: relative;

                .close {
                    position: absolute;
                    top: 20rpx;
                    right: 20rpx;

                    .close-img {
                        width: 40rpx;
                        height: 40rpx;
                    }
                }

                .swiper-main-img {
                    width: 100%;
                    height: 200rpx;
                    border-radius: 20rpx;
                }

                .ad-tag {
                    position: absolute;
                    left: 20rpx;
                    bottom: 20rpx;

                    .ad-tag-img {
                        width: 120rpx;
                        height: auto;
                    }
                }
            }
        }
    }
}
</style>