caimei-applets-store/pages/tabBar/user/user.vue

<template>
    <view class="user-page">
        <tui-skeleton v-if="isRequest" :loadingType="3" :isLoading="true"></tui-skeleton>
        <!-- 用户信息 -->
        <view class="info">
            <image class="avatar" :src="avatar" mode="widthFix"></image>
            <view class="name" v-if="nickName" v-text="nickName"></view>
            <view class="login" hover-class="hover-class" hover-stay-time="100" v-else @click="onLogin">登录</view>
        </view>
        <!-- 订单信息 -->
        <view class="order">
            <view class="title">
                <text>我的订单</text>
                <view @click="handleOrderClick(0)">
                    <text class="all">全部订单</text>
                    <tui-icon name="arrowright" size="20rpx"></tui-icon>
                </view>
            </view>
            <view class="navbar">
                <view class="item" v-for="nav in navbar" :key="nav.id" @click="handleOrderClick(nav.id)">
                    <view class="name">
                        <image class="icon" :src="staticUrl + nav.icon" mode="widthFix"></image>
                        <text v-text="nav.name"></text>
                    </view>
                    <tui-badge
                        type="danger"
                        absolute
                        :scaleRatio="0.8"
                        translateX="-20%"
                        top="-6rpx"
                        v-text="nav.badge"
                        v-if="nav.badge"
                    ></tui-badge>
                </view>
            </view>
        </view>
        <!-- 菜单选项 -->
        <view class="menus">
            <tui-list-view>
                <template v-for="menu in menus">
                    <tui-list-cell
                        :arrow="true"
                        :key="menu.id"
                        :size="26"
                        v-if="!menu.hidden"
                        padding="36rpx 24rpx"
                        @click="handleMenuClick(menu.id)"
                    >
                        <view class="menu-item">
                            <button class="menu-item contact" v-if="menu.id === 4" open-type="contact">客服</button>
                            <view class="name">
                                <image class="menu-icon" :src="staticUrl + menu.icon"></image>
                                <text v-text="menu.name"></text>
                            </view>
                            <text v-text="menu.count" class="count" v-if="menu.count"></text>
                        </view>
                    </tui-list-cell>
                </template>
            </tui-list-view>
        </view>
        <!-- 技术支持 -->
        <view class="copyright">
            <image class="image" :src="staticUrl + 'icon-logo@1x.png'"></image>
            <view class="text">由采美365网提供技术服务</view>
        </view>
    </view>
</template>

<script>
// 引入订单导航和操作菜单轮播
import { navbarList as navbar, menusList as menus } from './config.js'
import { fetchUserOrderTotal } from '@/services/api/user.js'
import { mapGetters, mapActions } from 'vuex'
export default {
    data() {
        return {
            isRequest: true,
            navbar: [],
            menus: [],
            paymentCount: 0,
            waitShipmentsCount: 0,
            shipmentsCount: 0,
            salesReturnCount: 0
        }
    },
    computed: {
        ...mapGetters(['headImgUrl', 'nickName', 'userIdentity', 'userId', 'unusedNum']),
        avatar() {
            return this.headImgUrl || `${this.staticUrl}icon-default-avatar.png`
        }
    },
    onPullDownRefresh() {
        this.initCenter()
    },
    onShow() {
        this.initCenter()
    },
    methods: {
        ...mapActions('cart', ['fetchCartKindCount']),
        ...mapActions('coupon', ['initCouponCount']),
        // 订单跳转
        handleOrderClick(id = 0) {
            if (!this.userId) {
                return this.onLogin()
            }
            this.$router.navigateTo(`order/order-list?current=${id}`)
        },
        // 菜单跳转
        handleMenuClick(id) {
            switch (id) {
                case 1:
                    this.$router.navigateTo('coupon/coupon-user')
                    break
                case 2:
                    this.$router.navigateTo('activity/activity-area')
                    break
                case 3:
                    if (!this.userId) return this.onLogin()
                    this.$router.navigateTo('address/address-list')
                    break
                default:
                    console.log('other click')
                    break
            }
        },
        // 初始化个人中心
        async initCenter() {
            try {
                this.fetchCartKindCount()
                const res = await fetchUserOrderTotal({ userId: this.userId })
                await this.initCouponCount()
                this.initTabs(res.data)
                this.initMenus()
            } catch (e) {
                console.log(e)
            } finally {
                this.isRequest = false
                uni.stopPullDownRefresh()
            }
        },
        // 初始化tabs
        initTabs(badgeObj) {
            function formatBadge(num) {
                if (!num) return ''
                return num > 99 ? '99+' : num
            }
            this.navbar = navbar.map((item, index) => {
                if (index === 0) {
                    item.badge = formatBadge(badgeObj.paymentCount)
                } else if (index === 1) {
                    item.badge = formatBadge(badgeObj.waitShipmentsCount)
                } else if (index === 2) {
                    item.badge = formatBadge(badgeObj.shipmentsCount)
                } else if (index === 3) {
                    item.badge = formatBadge(badgeObj.salesReturnCount)
                }
                return item
            })
        },
        // 初始化菜单
        initMenus() {
            this.menus = menus.filter(item => {
                if (item.id === 1) item.count = this.unusedNum
                return item.userIdentity.indexOf(this.userIdentity) > -1
            })
        },
        // 去登录
        onLogin() {
            const pages = getCurrentPages()
            const page = pages[pages.length - 1]
            uni.setStorageSync('LOGIN_REDIRECT_URL', page.$page.fullPath)
            uni.redirectTo({ url: '/pages/authorize/login-custom' })
        }
    }
}
</script>

<style scoped>
.navbar >>> .tui-danger {
    background-color: #f83c6c !important;
}
</style>

<style lang="scss" scoped>
.user-page {
    min-height: 100vh;
    position: relative;
}

.info {
    @extend .cm-flex-center;
    height: 280rpx;
    background: url('https://static.caimei365.com/app/mini-hehe/icon/icon-user-bg@2x.png') no-repeat center;
    flex-direction: column;
    background-size: 750rpx 280rpx;

    .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
    }
    .name {
        margin-top: 24rpx;
        font-size: 28rpx;
        color: #fff;
    }

    .login {
        width: 184rpx;
        height: 56rpx;
        margin-top: 24rpx;
        border-radius: 28rpx;
        background: #ffffff;
        line-height: 56rpx;
        text-align: center;
        color: #f83c6c;
        font-size: 28rpx;
    }
}

.order {
    background: #fff;
    .title {
        @extend .cm-flex-between;
        padding: 24rpx;
        border-bottom: 1px solid #eaeef1;
        font-size: 32rpx;
        .all {
            font-size: 26rpx;
        }
    }

    .navbar {
        @extend .cm-flex-around;
        padding: 24rpx;

        .item {
            position: relative;
            width: 120rpx;
        }

        .name {
            @extend .cm-flex-center;
            flex-direction: column;

            .icon {
                width: 64rpx;
                height: 64rpx;
            }

            text {
                font-size: 26rpx;
                margin-top: 8rpx;
            }
        }
    }
}

.menus {
    margin-top: 24rpx;
    .menu-item {
        position: relative;
        @extend .cm-flex-between;

        .contact {
            position: absolute;
            top: -18rpxrpx;
            left: -24rpx;
            width: 100%;
            background: #000;
            opacity: 0;
            &::after {
                border: 0 !important;
            }
        }

        .name {
            display: flex;
            align-items: center;
        }
        .menu-icon {
            width: 36rpx;
            height: 36rpx;
            margin-right: 12rpx;
        }
        .count {
            margin-right: 32rpx;
            font-size: 24rpx;
            color: #f83c6c;
        }
    }
}

.copyright {
    @extend .cm-flex-center;
    position: absolute;
    bottom: 24rpx;
    width: 100%;
    .image {
        width: 54rpx;
        height: 46rpx;
        margin-right: 16rpx;
    }
    .text {
        font-size: 20rpx;
        color: #cccccc;
    }
}
</style>