caimei-applets-hehe/pages/tabBar/user/index.vue

<template>
    <view class="container">
        <!-- 机构信息区域 -->
        <template v-if="isRequest">
            <view class="ws-header">
                <!-- 用户信息 -->
                <view class="user-info">
                    <image
                        class="user_default"
                        v-if="!hasLogin && isRequest"
                        :src="StaticUrl + 'icon-default-avatar.png'"
                        mode="widthFix"
                    ></image>
                    <image class="user_default" v-else :src="userInfo.headImgUrl" mode="widthFix"></image>
                    <view class="user-login" v-if="!hasLogin && isRequest" @click="navigator('/pages/login/login')"
                        >登录</view
                    >
                    <view class="user-text" v-else> {{ userIdentity == 1 ? userInfo.nickName : userInfo.name }} </view>
                </view>
                <!-- 背景图 -->
                <image class="user-bg" :src="StaticUrl + 'icon-user-bg@2x.png'" mode="widthFix"></image>
            </view>
            <!-- 机构信息END -->
            <!-- 订单状态区域 -->
            <view class="order-wrap">
                <view class="more">
                    <text class="title">我的订单</text>
                    <view @click="OrderNavigator(0)">
                        <text class="more-right">全部订单</text> <text class="iconfont icon-chakangengduo"></text>
                    </view>
                </view>
                <view class="line"></view>
                <!-- 菜单选项 -->
                <view class="order-nav">
                    <view class="order-nav-item" @click="OrderNavigator(1)">
                        <image :src="StaticUrl + 'icon-order-1@2x.png'" mode="widthFix"></image> <text>待付款</text>
                        <view class="tui-badge tui-badge-box" v-if="hasLogin && paymentCount > 0">
                            <tui-badge :scaleRatio="0.8" type="danger">{{ paymentCount | countNum }}</tui-badge>
                        </view>
                    </view>
                    <view class="order-nav-item" @click="OrderNavigator(2)">
                        <image :src="StaticUrl + 'icon-order-2@2x.png'" mode="widthFix"></image> <text>待发货</text>
                        <view class="tui-badge tui-badge-box" v-if="hasLogin && waitShipmentsCount > 0">
                            <tui-badge :scaleRatio="0.8" type="danger">{{ waitShipmentsCount | countNum }}</tui-badge>
                        </view>
                    </view>
                    <view class="order-nav-item" @click="OrderNavigator(3)">
                        <image :src="StaticUrl + 'icon-order-3@2x.png'" mode="widthFix"></image> <text>已发货</text>
                        <view class="tui-badge tui-badge-box" v-if="hasLogin && shipmentsCount > 0">
                            <tui-badge :scaleRatio="0.8" type="danger">{{ shipmentsCount | countNum }}</tui-badge>
                        </view>
                    </view>
                    <view class="order-nav-item" @click="OrderNavigator(3)">
                        <image :src="StaticUrl + 'icon-order-4@2x.png'" mode="widthFix"></image> <text>退货/款</text>
                        <view class="tui-badge tui-badge-box" v-if="hasLogin && salesReturnCount > 0">
                            <tui-badge :scaleRatio="0.8" type="danger">{{ salesReturnCount | countNum }}</tui-badge>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 订单状态区域END -->
            <!-- 菜单导航区域 -->
            <view class="place-menu-conten clearfix">
                <view class="place-menu-cell" @click="navigator('/pages/user/activity/coupon-list')">
                    <view class="place-left">
                        <image class="place-menu-icon" :src="StaticUrl + 'icon-coupon.png'" mode=""></image>
                        <text class="place-menu-title">优惠券</text>
                        <text class="coupons-count" v-if="unusedNum > 0">{{ unusedNum }}</text>
                    </view>
                    <text class="iconfont icon-chakangengduo"></text>
                </view>
                <view
                    class="place-menu-cell"
                    @click="navigator('/pages/user/activity/activity-list')"
                    v-if="userIdentity == 2"
                >
                    <view class="place-left">
                        <image class="place-menu-icon" :src="StaticUrl + 'icon-user-h@2x.png'" mode=""></image>
                        <text class="place-menu-title">活动专区</text>
                    </view>
                    <text class="iconfont icon-chakangengduo"></text>
                </view>
                <view class="place-menu-cell" @click="navigator('/pages/user/address/address')">
                    <view class="place-left">
                        <image class="place-menu-icon" :src="StaticUrl + 'icon-user-d@2x.png'" mode=""></image>
                        <text class="place-menu-title">收货地址</text>
                    </view>
                    <text class="iconfont icon-chakangengduo"></text>
                </view>
                <button class="place-menu-cell last" open-type="contact" @bindcontact="handleContact">
                    <view class="place-left">
                        <image class="place-menu-icon" :src="StaticUrl + 'icon-user-c@2x.png'" mode=""></image>
                        <text class="place-menu-title">在线客服</text>
                    </view>
                    <text class="iconfont icon-chakangengduo"></text>
                </button>
            </view>
            <!-- 菜单导航区域END -->
            <!-- 底部 -->
            <view class="user-support">
                <image class="user-support-image" :src="StaticUrl + 'icon-logo@1x.png'" mode=""></image>
                <view class="user-support-text">采美365网提供商品技术服务</view>
            </view>
        </template>
    </view>
</template>

<script>
import nutBadge from '@/components/thorui/tui-badge/tui-badge.vue'
import { mapGetters, mapMutations, mapActions } from 'vuex'
import authorize from '@/common/authorize.js'
import wxLogin from '@/services/wxLogin.js'

export default {
    components: {
        nutBadge
    },
    data() {
        return {
            StaticUrl: this.$Static,
            CustomBar: this.CustomBar, // 顶部导航栏高度
            isRequest: true,
            paymentCount: 0, //待付款角标
            waitShipmentsCount: 0, //待收货角标
            shipmentsCount: 0, //已发货角标
            salesReturnCount: 0 //退货/款角标
        }
    },
    computed: {
        ...mapGetters(['hasLogin', 'userInfo', 'userId', 'userIdentity', 'unusedNum'])
    },
    filters: {
        countNum(value) {
            return value > 99 ? '99+' : value
        }
    },
    onShow() {
        if (this.hasLogin) {
            this.getCartNumber()
            this.GetUserInfoPersonal()
            this.initReceiveCouponCount()
        }
    },
    methods: {
        ...mapMutations('app', ['login', 'logout']),
        ...mapActions('cart', ['getCartNumber']),
        ...mapActions('coupon', ['initReceiveCouponCount']),
        //初始化个人中心数据
        GetUserInfoPersonal() {
            this.UserService.GetUserOrderTotal({
                userId: this.userId
            })
                .then(response => {
                    const data = response.data
                    this.paymentCount = data.paymentCount //待付款
                    this.waitShipmentsCount = data.waitShipmentsCount //待收货
                    this.shipmentsCount = data.shipmentsCount //已发货
                    this.salesReturnCount = data.salesReturnCount //退货/款
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        handleContact(e) {
            //客服
            console.log(e.detail.path)
            console.log(e.detail.query)
        },
        OrderNavigator(state) {
            if (!this.hasLogin) return this.$api.navigateTo('/pages/login/login')
            // 栏目跳转
            this.$api.navigateTo(`/pages/order/order-list?state=${state}`)
        },
        navigator(url) {
            if (this.hasLogin) {
                this.$api.navigateTo(url)
            } else {
                this.$api.navigateTo('/pages/login/login')
            }
        }
    },
    onPullDownRefresh() {
        //下拉刷新
        if (this.hasLogin) {
            this.GetUserInfo()
            setTimeout(() => {
                uni.stopPullDownRefresh()
            }, 2000)
        } else {
            uni.stopPullDownRefresh()
        }
    }
}
</script>

<style lang="scss">
@import '@/uni.scss';
.container {
    box-sizing: border-box;
    background: #f7f7f7;
}
// 用户登录信息区域
.ws-title {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    font-size: 34rpx;
    text-align: center;
}
.ws-header {
    position: relative;
    height: 280rpx;
    .user-info {
        position: absolute;
        z-index: 10;
        width: 750rpx;
        height: 280rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .user_default {
            display: block;
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
        }
    }
    // 登录按钮
    .user-login {
        width: 184rpx;
        height: 56rpx;
        margin-top: 25rpx;
        border-radius: 28rpx;
        background: #ffffff;
        line-height: 56rpx;
        text-align: center;
        color: $color-system;
        font-size: $font-size-28;
    }
    // 公司名
    .user-text {
        width: 446rpx;
        margin-top: 25rpx;
        color: #fff;
        font-size: 28rpx;
        line-height: 40rpx;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .user-bg {
        width: 100%;
    }
}
.more {
    width: 750rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 23rpx 25rpx;
    box-sizing: border-box;
    background: #fff;
    .more-right {
        font-size: 26rpx;
        line-height: 37rpx;
        margin-right: 10rpx;
    }
    .title {
        font-size: 32rpx;
        line-height: 45rpx;
        color: #333333;
    }
    .iconfont {
        font-size: 20rpx;
        vertical-align: middle;
    }
}
.order-wrap {
    background: #fff;
    .line {
        width: 702rpx;
        height: 1px;
        margin: 0 auto;
        background: #f0f0f0;
    }
    .order-nav {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 40rpx 0;
        .order-nav-item {
            position: relative;
            display: flex;
            align-items: center;
            flex-direction: column;
            image {
                width: 64rpx;
                height: 64rpx;
            }
            text {
                font-size: 26rpx;
                line-height: 37rpx;
                margin-top: 8rpx;
            }
            .tui-badge {
                position: absolute;
                top: -15rpx;
                right: -25rpx;
                z-index: 999;
            }
        }
    }
}
.place-menu-conten {
    margin-top: 20rpx;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 24rpx;
    background-color: #ffffff;
    .place-menu-cell {
        width: 100%;
        height: 110rpx;
        box-sizing: border-box;
        padding: 36rpx 0;
        text-align: left;
        float: left;
        border-bottom: 1px solid #e1e1e1;
        position: relative;
        &.last {
            border-bottom: none;
        }
        .place-left {
            width: 650rpx;
            height: 100%;
            .place-menu-icon {
                width: 36rpx;
                height: 36rpx;
                display: block;
                float: left;
            }
            .place-menu-title {
                width: 300rpx;
                margin-left: 16rpx;
                float: left;
                height: 36rpx;
                line-height: 36rpx;
                font-size: $font-size-28;
                color: #333333;
            }
            .coupons-count {
                width: 240rpx;
                float: right;
                height: 36rpx;
                line-height: 36rpx;
                font-size: $font-size-28;
                text-align: right;
                color: #ff457b;
            }
        }
        .iconfont {
            width: 36rpx;
            height: 36rpx;
            display: block;
            line-height: 36rpx;
            text-align: center;
            font-size: $font-size-30;
            color: #cccccc;
            position: absolute;
            right: 0;
            top: 36rpx;
        }
    }
}
.user-support {
    position: fixed;
    bottom: 30rpx;
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .user-support-image {
        width: 54rpx;
        height: 46rpx;
        display: block;
        margin-bottom: 5rpx;
    }
    .user-support-text {
        font-size: 20rpx;
        line-height: 30rpx;
        color: #cccccc;
    }
}
</style>