jjx-wap-sign-only/pages/user/user.vue

<template>
    <view class="wrap">
        <!-- 吸顶 -->
        <u-sticky offset-top="0" customNavHeight="0">
            <uititle title="个人中心" :show-back="false"></uititle>
            <!-- 选项卡 -->
            <view class="layout layout-tab flex justify-start align-center">
                <view :class="['tab', {active: tabIndex === 0}]" @click="handTab(0)">实名认证</view>
<!--                <view :class="['tab', {active: tabIndex === 1}]" @click="handTab(1)">我的名片</view>-->
<!--                <view :class="['tab', {active: tabIndex === 8}]" @click="handTab(8)">业务联系人</view>-->
<!--                <view :class="['tab', {active: tabIndex === 3}]" @click="handTab(3)">我的消息</view>-->
<!--                <view :class="['tab', {active: tabIndex === 4}]" @click="handTab(4)">平台权益</view>-->
<!--                <view :class="['tab', {active: tabIndex === 5}]" @click="handTab(5)">我的邀请</view>-->
<!--                <view :class="['tab', {active: tabIndex === 6}]" @click="handTab(6)">我的加工厂</view>-->
<!--                <view :class="['tab', {active: tabIndex === 7}]" @click="handTab(7)">收款账号</view>-->
<!--                <view :class="['tab', {active: tabIndex === 9}]" @click="handTab(9)"  v-if="userData.userLevel > 1">新闻动态</view>-->
                <view :class="['tab', {active: tabIndex === 2}]" @click="handTab(2)">修改密码</view>
            </view>
        </u-sticky>
        <!-- 主要内容 -->
        <view class="layout layout-content">
            <template v-if="tabIndex === 0 && userData">
                <!-- 企业认证 -->
                <usident :user-data="userData"></usident>
            </template>
            <template v-if="tabIndex === 1 && userData">
                <!-- 我的名片 -->
                <uscard :user-data="userData"></uscard>
            </template>
            <template v-if="tabIndex === 2 && userData">
                <!-- 账户管理 -->
                <usaccount :user-data="userData"></usaccount>
            </template>
            <template v-if="tabIndex === 3 && userData">
                <!-- 我的消息 -->
                <usnotice></usnotice>
            </template>
            <template v-if="tabIndex === 4 && userData">
                <!-- 平台权益 -->
                <usequity :user-data="userData"></usequity>
            </template>
            <template v-if="tabIndex === 5 && userData">
                <!-- 我的邀请 -->
                <usinvite :user-data="userData"></usinvite>
            </template>
            <template v-if="tabIndex === 6 && userData">
                <!-- 我的加工厂 -->
                <factory :user-data="userData"></factory>
            </template>
            <template v-if="tabIndex === 7 && userData">
                <!-- 收款账号 -->
                <payee-account :user-data="userData"></payee-account>
            </template>
            <template v-if="tabIndex === 8 && userData">
                <!-- 业务联系人 -->
                <business-contact :user-data="userData"></business-contact>
            </template>
            <template v-if="tabIndex === 9 && userData">
                <!-- 业务联系人 -->
                <news :user-data="userData"></news>
            </template>
        </view>
      <Qyb></Qyb>
    </view>
</template>

<script>
import uititle from '@/components/common/title'
import cmsearch from '@/components/common/search'
import cmempty from '@/components/common/empty'
import usnotice from '@/components/user/notice'
import usaccount from '@/components/user/account'
import uscard from '@/components/user/card'
import usequity from '@/components/user/equity'
import usinvite from '@/components/user/invite'
import usident from '@/components/user/ident'
import Factory from "@/components/user/factory.vue";
import PayeeAccount from "@/components/user/payeeAccount.vue";
import BusinessContact from "@/components/user/business-contact.vue";
import News from "@/pages/user/components/news.vue";
import Qyb from "@/components/Qyb.vue";

export default {
    components: {
      Qyb,
        News,
        BusinessContact,
        PayeeAccount,
        Factory,
        uititle,
        cmsearch,
        cmempty,
        usnotice,
        usaccount,
        uscard,
        usequity,
        usinvite,
        usident,
    },
    data() {
        return {
            tabIndex: 0,
            userData: null
        }
    },
    methods: {
        handTab(index) {
            this.tabIndex = index
        },
        async getUserInfo(){
            const {userInfo} = await vk.userCenter.getCurrentUserInfo()
            this.userData = userInfo
        }
    },
    onShow() {
        this.userData = vk.getStorageSync('uni_id_user_info')
        if (!this.userData) vk.navigateTo('/pages/login/login')
        this.getUserInfo()
        const userTab = uni.getStorageSync('user_tab')
        if (userTab) {
            this.tabIndex = parseInt(userTab)
            uni.removeStorageSync('user_tab')
        }
    },
}
</script>

<style lang="scss">
page {
    background: #ffffff;
}

.layout-tab {
    height: 100rpx;
    padding: 0 30rpx;
    background: #f1f1f1;
    overflow-x: scroll;

    .tab {
        padding: 10rpx 0rpx;
        font-size: 26rpx;
        line-height: 40rpx;
        color: #666666;
        flex-shrink: 0;
        margin-right: 20rpx;
    }

    .active {
        position: relative;
        color: #A92924;

        &::after {
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 9;
            content: '';
            width: 100%;
            height: 1px;
            background: #A92924;
        }
    }
}
</style>