fission-star-applet-250304/pages/index/center.vue

<template>
    <view class="page">

        <navbar title="个人中心" bgColor="#001B3C" color="#FFFFFF" />

        <view class="head">
            <view class="headImage" @click="goToEditUserInfo">
                <image :src="userInfo.headImage || '../../static/image/default-avatar.png'" mode=""></image>
            </view>
            <view class="info">
                <view class="name" @click="goToEditUserInfo">
                    {{ userInfo.nickName || '未登录' }}
                </view>
                <view class="tags">
                    <view class="tag" v-if="userInfo.intentionCode">
                        <text class="tag-label">ID:</text>
                        <text>{{ userInfo.intentionCode }}</text>
                    </view>
                    <view v-if="role"
                        style="display: inline-block; width: 172rpx; height: 63rpx; vertical-align: top; margin-top: -6rpx;">
                        <image src="@/pages_order/static/center/agent-icon.png"></image>
                    </view>
                    <view v-else-if="userInfo.id" class="tag">
                        普通会员
                    </view>
                    <view v-else class="tag" @click="goToLogin">
                        点击登录
                    </view>
                </view>
            </view>
            <view class="setting" @click="$utils.navigateTo('/pages_order/mine/setting')">
                <uv-icon name="setting" color="#FFFFFF" size="48rpx"></uv-icon>
            </view>
        </view>

        <view class="tools-box">
            <image class="tools-bg" src="@/pages_order/static/center/tools-bg.png"></image>
            <view class="flex activate">
                <template v-if="role">
                    <view class="activate-tips" style="padding-left: 27rpx;">
                        <view>代理商权益</view>
                        <view>
                            将于<text class="activate-highlight">{{ userInfo.endTime ?
                                $dayjs(userInfo.endTime).format('YYYY年M月D日') : '-'}}</text>到期
                        </view>
                    </view>
                    <view class="btn-activate" @click="onActivate">
                        <image src="@/pages_order/static/center/btn-activate-again.png"></image>
                    </view>
                </template>
                <template v-else>
                    <view class="activate-tips">
                        升级成为代理商享受更多权益
                    </view>
                    <view class="btn-activate" @click="onActivate">
                        <image src="@/pages_order/static/center/btn-activate.png"></image>
                    </view>
                </template>
            </view>
            <view class="tools flex">
                <view class="tool" @click="$utils.navigateTo('/pages_order/mine/sharing')">
                    <view class="tool-icon">
                        <image src="@/pages_order/static/center/tool-share.png"></image>
                    </view>
                    <text>分享好友</text>
                </view>
                <view class="tool" @click="onActivate">
                    <view class="tool-icon">
                        <image src="@/pages_order/static/center/tool-activate.png"></image>
                    </view>
                    <text>激活码</text>
                </view>
                <view class="tool" @click="$utils.navigateTo('/pages_order/mine/wallet')">
                    <view class="tool-icon">
                        <image src="@/pages_order/static/center/tool-wallet.png"></image>
                    </view>
                    <text>我的钱包</text>
                </view>
                <view class="tool" @click="$utils.navigateTo('/pages_order/mine/team')">
                    <view class="tool-icon">
                        <image src="@/pages_order/static/center/tool-team.png"></image>
                    </view>
                    <text>我的团队</text>
                </view>
            </view>
        </view>

        <view class="content">
            <view class="card notice" v-if="notice">
                <view class="notice-icon">
                    <image src="@/pages_order/static/center/notice.png"></image>
                </view>
                <uv-notice-bar :text="notice" bgColor="transparent" color="#001B3C" :icon="false" fontSize="28rpx"
                    :customStyle="{
                        padding: '6rpx 0',
                    }"></uv-notice-bar>
            </view>

            <view class="card updates">
                <view class="updates-header">
                    <view class="updates-header-bg">
                        <image src="@/static/image/center/title-bg.png"></image>
                    </view>
                    <view class="updates-header-content">
                        动态更新
                    </view>
                </view>
                <view class="updates-content">
                    <view class="card updates-item" v-for="item in list" :key="item.id"
                        @click="goToNewsDetail(item.id)">
                        <view class="updates-item-img">
                            <image :src="item.image"></image>
                        </view>
                        <view class="updates-item-info">
                            <view class="updates-item-title">{{ item.title || '' }}</view>
                            <view class="updates-item-desc text-ellipsis">{{ getDesc(item.details) }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="service" @click="$utils.navigateTo('/pages_order/mine/service')">
            <image src="@/pages_order/static/center/service.png" mode=""></image>
        </view>

        <popupActivate ref="popupActivate"></popupActivate>
        <popupSharing ref="popupSharing"></popupSharing>

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

<script>
import { mapState } from 'vuex'
import mixinsList from '@/mixins/list.js'

import popupActivate from '@/components/center/popupActivate.vue'
import tabber from '@/components/base/tabbar.vue'

export default {
    mixins: [mixinsList],
    components: {
        tabber,
        popupActivate,
    },
    data() {
        return {
            notice: '',
            mixinsListApi: 'getNews',
            authApi : true,
            isLoggedIn : uni.getStorageSync('token'),
        }
    },
    computed: {
        ...mapState(['userInfo', 'userInfoVip']),
        role() {
            return this.userInfo.isPay
        },
    },
    onShow() {
        this.isLoggedIn = uni.getStorageSync('token')
        if(this.isLoggedIn){
            this.$store.commit('getUserInfo')
            this.$store.commit('getUserInfoVip')
            this.fetchNotice()
        }
    },
    methods: {
        async fetchNotice() {
            try {
                // todo: check
                this.notice = (await this.$fetch('getNotice'))?.[0]?.title
            } catch (err) {

            }
        },
        onActivate() {
            if (!this.isLoggedIn) {
                this.goToLogin()
                return
            }
            this.$refs.popupActivate.open(this.role)
        },
        getDesc(str) {
            if (!str) {
                return ''
            }

            return str.replace(/<.*?>/g, '')
        },
        goToNewsDetail(id) {
            if (!this.isLoggedIn) {
                this.goToLogin()
                return
            }
            uni.navigateTo({
                url: `/pages_order/mine/news?id=${id}`
            })
        },
        goToEditUserInfo() {
            if (!this.isLoggedIn) {
                this.goToLogin()
                return
            }
            uni.navigateTo({
                url: '/pages_order/auth/wxUserInfo?mode=edit'
            })
        },
        goToLogin() {
            uni.navigateTo({
                url: '/pages_order/auth/wxLogin'
            })
        },
    }
}
</script>

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

    background-color: #001B3C;
    min-height: 100vh;
}

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

.head {
    display: flex;
    padding: 20rpx 26rpx 18rpx 40rpx;
    align-items: center;
    position: relative;

    .headImage {
        width: 143rpx;
        height: 143rpx;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 40rpx;
    }

    .info {
        .name {
            color: #FFFFFF;
            font-size: 38rpx;
            margin-bottom: 12rpx;
        }

        .tags {}
    }

    .setting {
        position: absolute;
        right: 26rpx;
        top: 37rpx;
    }
}

.tag {
    display: inline-block;
    padding: 6rpx 21rpx;
    border: 1rpx solid #999999;
    color: #FFFFFF;
    font-size: 24rpx;
    border-radius: 23rpx;
    margin-right: 20rpx;

    vertical-align: top;

    &-label {
        color: #999999;
    }
}


.tools {
    &-box {
        width: 100vw;
        height: 406rpx;
        padding: 0 5rpx;
        box-sizing: border-box;
        position: relative;
    }

    position: absolute;
    width: calc(100vw - 69rpx*2);
    left: 69rpx;
    bottom: 64rpx;

    justify-content: space-between;
}


.activate {
    position: absolute;
    width: calc(100% - 199rpx);
    height: 80rpx;
    top: 31rpx;
    right: 37rpx;

    &-tips {
        flex: 1;
        color: #976224;
        font-size: 28rpx;
    }

    &-highlight {
        color: #FF6868;
    }

    .btn-activate {
        width: 172rpx;
        height: 80rpx;
    }
}

.tool {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: #57595B;
    font-size: 28rpx;

    &-icon {
        width: 88rpx;
        height: 88rpx;
        margin-bottom: 10rpx;
    }
}

.content {
    padding: 0 20rpx 20rpx 20rpx;
}

.notice {
    padding: 22rpx 21rpx;
    display: flex;

    &-icon {
        width: 49rpx;
        height: 49rpx;
        margin-right: 20rpx;
    }
}

.updates {
    margin-top: 20rpx;
    padding: 20rpx;

    &-header {
        position: relative;

        &-bg {
            height: 51rpx;
            width: 58rpx;
            margin-left: 40rpx;
        }

        &-content {
            color: #262626;
            font-size: 38rpx;
            font-weight: 900;

            position: absolute;
            top: 0;
        }
    }

    &-item {
        padding: 0;
        border-radius: 16rpx;
        box-shadow: 0 0 32rpx 0 rgba($color: #808080, $alpha: 0.16);
        margin-top: 20rpx;

        &-img {
            width: 100%;
            height: 252rpx;
        }

        &-info {
            padding: 15rpx 18rpx 8rpx 18rpx;
        }

        &-title {
            color: #474747;
            font-size: 32rpx;
        }

        &-desc {
            color: #CCCCCC;
            font-size: 20rpx;
        }
    }
}

.service {
    position: fixed;
    right: 29rpx;
    bottom: 312rpx;
    width: 149rpx;
    height: 158rpx;
}
</style>