caimei-applets-caimei/pages/seller/components/user.vue

<template>
    <view class="container user clearfix">
        <cm-custom :navbar-data="nvabarData" />
        <view class="user-section">
            <view class="header" :style="{
					height: CustomBar + 90 - StatusBar + 'px',
					paddingTop: CustomBar + 'px',
					background: 'url(' + bgImgUrl + ')',
					backgroundSize: 'cover'
				}">
                <view class="header-main" v-if="hasLogin">
                    <view class="header-icon" @click="TestZHIboFn()">
                        <image src="https://static.caimei365.com/app/img/icon/default-head-new.png" mode=""></image>
                    </view>
                    <view class="header-text">
                        <view class="user-item">
                            <text class="u-h1">{{ name }}</text>
                        </view>
                        <view class="user-item"> <text class="u-tips">协销人员</text> </view>
                    </view>
                </view>
                <!-- 订单 -->
                <view class="user-order">
                    <view class="tab-title" @click="navigator('/pages/seller/order/order-list?listType=0')">
                        <text class="cell-tit">我的订单</text> <text class="cell-more">全部订单</text>
                        <text class="iconfont icon-xiayibu"></text>
                    </view>
                    <view class="order-section">
                        <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=1')"
                            hover-class="common-hover" :hover-stay-time="50">
                            <view class="order-icon">
                                <image src="https://static.caimei365.com/app/img/icon/order5@3x.png" mode=""></image>
                                <text v-if="beforeConfirmCount > 0"
                                    class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
                                    :class="[beforeConfirmCount < 10 ? 'goleft' : '']">
                                    {{ beforeConfirmCount >= 99 ? '99+' : beforeConfirmCount }}
                                </text>
                            </view>
                            <text class="order-t">待确认</text>
                        </view>
                        <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=2')"
                            hover-class="common-hover" :hover-stay-time="50">
                            <view class="order-icon">
                                <image src="https://static.caimei365.com/app/img/icon/order1@3x.png" mode=""></image>
                                <text v-if="beforePayCount > 0"
                                    class="uni-badge uni-badge-error uni-small uni-badge--small icon-num "
                                    :class="[beforePayCount < 10 ? 'goleft' : '']">
                                    {{ beforePayCount >= 99 ? '99+' : beforePayCount }}
                                </text>
                            </view>
                            <text class="order-t">待付款</text>
                        </view>
                        <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=3')"
                            hover-class="common-hover" :hover-stay-time="50">
                            <view class="order-icon">
                                <image src="https://static.caimei365.com/app/img/icon/order2@3x.png" mode=""></image>
                                <text v-if="beforeShipCount > 0"
                                    class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
                                    :class="[beforeShipCount < 10 ? 'goleft' : '']">
                                    {{ beforeShipCount >= 99 ? '99+' : beforeShipCount }}
                                </text>
                            </view>
                            <text class="order-t">待发货</text>
                        </view>
                        <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=4')"
                            hover-class="common-hover" :hover-stay-time="50">
                            <view class="order-icon">
                                <image src="https://static.caimei365.com/app/img/icon/order3@3x.png" mode=""></image>
                                <text v-if="shippedCount > 0"
                                    class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
                                    :class="[shippedCount < 10 ? 'goleft' : '']">
                                    {{ shippedCount >= 99 ? '99+' : shippedCount }}
                                </text>
                            </view>
                            <text class="order-t">已发货</text>
                        </view>
                        <view class="order-item" @click="navigator('/pages/seller/order/order-list?listType=5')"
                            hover-class="common-hover" :hover-stay-time="50">
                            <view class="order-icon">
                                <image src="https://static.caimei365.com/app/img/icon/order4@3x.png" mode=""></image>
                                <text v-if="refundsCount > 0"
                                    class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
                                    :class="[refundsCount < 10 ? 'goleft' : '']">
                                    {{ refundsCount >= 99 ? '99+' : refundsCount }}
                                </text>
                            </view>
                            <text class="order-t">退货/款</text>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 底部跳转 -->
            <view class="foot-list">
                <view class="list-cell-main clearfix">
                    <view class="list-cell-navs" v-for="(item,index) in tabsList" :key="index"
                        @click="navigator(item.path)">
                        <view class="icon">
                            <image class="icon-image" :src="item.icon" mode="widthFix"></image>
                        </view>
                        <view class="name">{{ item.name }}</view>
                    </view>
                </view>
                <view class="list-cell-main clearfix">
                    <view class="list-cell-navs" v-for="(item,index) in firstList" :key="index"
                        @click="navigator(item.path)">
                        <view class="icon">
                            <image class="icon-image" :src="item.icon" mode="widthFix"></image>
                        </view>
                        <view class="name">{{ item.name }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    import authorize from '@/common/config/authorize.js'
    import { mapState, mapMutations } from 'vuex'

    export default {
        data() {
            return {
                nvabarData: {
                    //顶部自定义导航
                    showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
                    showSearch: 0,
                    title: '账户中心', // 导航栏 中间的标题
                    haveBack: false,
                    textLeft: this.$store.state.isIphone,
                    textColor: '#FFFFFF',
                    bgColor: ''
                },
                CustomBar: this.CustomBar, // 顶部导航栏高度
                StatusBar: this.StatusBar,
                bgImgUrl: 'https://static.caimei365.com/app/img/bg/new_home_cumres@2x.png',
                name: '',
                headpic: '',
                userId: '',
                serviceProviderId: '',
                skeletonShow: true,
                orderNum: 0, //未查看订单数量
                beforeConfirmCount: 0, //待确认角标
                beforePayCount: 0, //待付款角标
                beforeShipCount: 0, //待发货角标
                shippedCount: 0, //已发货角标
                refundsCount: '', //退货/款角标
                institutionsCont: 120,
                tabsList: [{
                        name: '机构列表',
                        path: '/pages/seller/club/list',
                        icon: 'https://static.caimei365.com/app/img/icon/icon_seller_2@2x.png'
                    },
                    {
                        name: '帮机构下单',
                        path: '/pages/seller/club/club-list',
                        icon: 'https://static.caimei365.com/app/img/icon/icon_seller_5@2x.png'
                    },
                    {
                        name: '拉机构上线',
                        path: '/pages/seller/login/register-select',
                        icon: 'https://static.caimei365.com/app/img/icon/icon_seller_3@2x.png'
                    },
                    {
                        name: '待注册机构',
                        path: '/pages/seller/club/stayClub-list',
                        icon: 'https://static.caimei365.com/app/img/icon/icon_seller_1@2x.png'
                    },
                    {
                        name: '我的名片',
                        path: '/pages/seller/remarks/business-card',
                        icon: 'https://static.caimei365.com/app/img/icon/my-card.png'
                    },
                    {
                        name: '机构看板',
                        path: '/pages/seller/club/club-board',
                        icon: 'https://static.caimei365.com/app/img/icon/visits.png'
                    },
                    {
                        name: '客户咨询记录',
                        path: '/pages/seller/remarks/list',
                        icon: 'https://static.caimei365.com/app/img/icon/icon_seller_7@2x.png'
                    },
                    {
                        name: '邀请运营人员',
                        path: '/pages/seller/club/allClub-list',
                        icon: 'https://static.caimei365.com/app/img/icon/icon_seller_4@2x.png'
                    }
                ],
                firstList: [{
                    name: '优惠券',
                    path: '/pages/seller/cart/coupon',
                    icon: 'https://static.caimei365.com/app/img/icon/icon_club_13@2x.png'
                }],
            }
        },
        created() {
            this.initData()
        },
        computed: {
            ...mapState(['hasLogin', 'userInfo'])
        },
        methods: {
            ...mapMutations(['login', 'logout']),
            async initData() {
                const wechatCode = await authorize.getCode('weixin') // 根据微信的code获取用户登录状态:1已登录过 -1未登录过
                const getUserInfo = await authorize.getUserInfo('weixin')
                const params = { code: wechatCode, encryptedData: getUserInfo.encryptedData, iv: getUserInfo.iv }
                this.UserService.UserLoginAuthApplets(params).then(response => {
                    if (response.code == 0 || response.code == 4) {
                        this.isLogin = true
                        this.userID = response.data.userId
                        this.userIdentity = response.data.userIdentity
                        this.clubStatus = response.data.clubStatus
                        this.serviceProviderId = response.data.serviceProviderId
                        this.$store.commit('updateStatus', response.data)
                        this.login(response.data)
                        uni.setStorageSync('token', response.data.token)
                        uni.setStorageSync('unionId', response.data.unionId)
                        uni.setStorageSync('spUserId', response.data.spUserId)
                        this.getUserSellerHome()
                        this.getOrderCount()
                    } else {
                        this.isLogin = false
                        this.logout()
                        uni.setStorageSync('unionId', response.data.unionId)
                        this.$store.commit('updateStatus', response.data)
                        this.$api.navigateTo('/pages/seller/login/login')
                    }
                })
            },
            getUserSellerHome() {
                this.$api.getStorage().then(resolve => {
                    this.userId = resolve.userId ? resolve.userId : 0
                    this.SellerService.GetSellerHome({ userId: this.userId })
                        .then(response => {
                            let sellerData = response.data
                            this.name = sellerData.linkMan ? sellerData.linkMan : '' //协销名称
                            this.headpic = sellerData.logo //会所头像
                            this.skeletonShow = false
                        })
                        .catch(error => {
                            this.$util.msg(error.msg, 2000)
                        })
                })
            },
            getOrderCount() {
                this.SellerService.GetOrderCount({ serviceProviderId: this.serviceProviderId }).then(response => {
                    let data = response.data
                    this.beforeConfirmCount = this.showBadge(data.confirmedCount) //待确认
                    this.beforePayCount = this.showBadge(data.paymentCount) //待付款
                    this.beforeShipCount = this.showBadge(data.waitShipmentsCount) //待发货
                    this.shippedCount = this.showBadge(data.shipmentsCount) //已发货
                    this.refundsCount = this.showBadge(data.salesReturnCount) //退货/款
                    this.orderNum = this.showBadge(data.uncheckedOrderCount) //未查看订单数量
                })
            },
            TestZHIboFn() {
                //测试跳转直播小程序
                // uni.navigateToMiniProgram({
                // 	appId: 'wx92d650b253f8f2e3',
                // 	path: '/pages/index/index',
                // 	extraData: {
                // 		'data1': 'test'
                // 	},
                // 	envVersion: 'develop',
                // 	success(res) {
                // 		// 打开成功
                // 		console.log(res)
                // 	}
                // })
            },
            navigator(url) {
                this.$api.navigateTo(url)
            },
            showBadge(n) {
                let num = ''
                if (n > 100) {
                    num = 99
                } else {
                    num = n
                }
                return num
            },
            onPullDownRefresh() {
                //下拉刷新
                this.initData()
                uni.stopPullDownRefresh()
            }
        }
    }
</script>

<style lang="scss">
    @import '@/uni.scss';

    .user {
        width: 100%;
        height: 100%;
        position: relative;
        background-color: #f7f7f7;
        padding-bottom: 120rpx;
    }

    .header {
        width: 100%;
        position: relative;
        background-size: cover;
    }

    .header-main {
        width: 702rpx;
        height: 130rpx;
        padding: 12rpx 24rpx;
        display: flex;

        .header-text {
            flex: 8;
            display: flex;
            flex-direction: column;

            .user-item {
                flex: 1;
                height: 64rpx;
                line-height: 64rpx;

                .u-tips {
                    display: inline-block;
                    float: left;
                    width: 98rpx;
                    height: 30rpx;
                    border: 1px solid #ffffff;
                    background: #ffffff;
                    border-radius: 16rpx;
                    line-height: 30rpx;
                    font-size: $font-size-20;
                    text-align: center;
                    color: #999;
                }

                .u-viptips {
                    display: inline-block;
                    float: left;
                    width: 98rpx;
                    height: 30rpx;
                    border: 1px solid #ffe600;
                    background: linear-gradient(128deg, rgba(242, 143, 49, 1) 0%, rgba(225, 86, 22, 1) 100%);
                    border-radius: 16rpx;
                    line-height: 30rpx;
                    font-size: $font-size-20;
                    text-align: center;
                    color: #ffe600;
                    margin-left: 10rpx;
                    margin-top: 17rpx;
                }

                .u-h1 {
                    float: left;
                    font-size: $font-size-30;
                    color: #ffffff;
                    text-align: left;
                    -o-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    word-break: break-all;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                }

                .u-p {
                    font-size: $font-size-24;
                    line-height: 64rpx;
                    color: #ffffff;
                    text-align: left;
                }
            }
        }

        .header-icon {
            flex: 2;
            margin-right: 20rpx;

            image {
                float: right;
                width: 128rpx;
                height: 128rpx;
                border-radius: 100%;
                border: 2rpx solid #ffffff;
            }
        }
    }

    .header-main-none {
        width: 702rpx;
        height: 152rpx;
        padding: 0 24rpx;
        display: flex;

        .header-text {
            flex: 8;
            display: flex;
            flex-direction: column;

            .user-item {
                flex: 1;
                height: 50rpx;
                line-height: 50rpx;

                .line {
                    margin: 0 10rpx;
                }

                .u-h1 {
                    float: left;
                    font-size: $font-size-36;
                    color: #ffffff;
                    text-align: left;
                    -o-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    word-break: break-all;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                }

                .u-p {
                    font-size: $font-size-24;
                    line-height: 50rpx;
                    color: #efefef;
                    text-align: left;
                }

                .u-btn {
                    width: 160rpx;
                    height: 40rpx;
                    background: rgba(255, 255, 255, 0.5);
                    border-radius: 5rpx;
                    line-height: 40rpx;
                    text-align: center;
                    font-size: $font-size-24;
                    color: #ffffff;
                    display: block;
                    margin-top: 5rpx;
                    padding-left: 6rpx;

                    .icon-xiangyouhuabeifen {
                        font-size: $font-size-24;
                    }
                }
            }
        }

        .header-icon {
            flex: 2;
            display: flex;
            margin-right: 20rpx;
            align-items: center;
            justify-content: center;

            image {
                float: right;
                width: 128rpx;
                height: 128rpx;
                border-radius: 100%;
                border: 2rpx solid #ffffff;
            }
        }
    }

    .user-order {
        width: 654rpx;
        height: auto;
        padding: 0 24rpx;
        background-color: $bg-color;
        margin-bottom: 24rpx;
        position: absolute;
        bottom: -170rpx;
        left: 24rpx;
        border-radius: 20rpx;
    }

    .tab-title {
        font-size: $font-size-28;
        line-height: 80rpx;
        color: #333333;
        text-align: left;
        border-bottom: 1px solid #f8f8f8;
        position: relative;

        .cell-tit {
            font-size: $font-size-28;
            color: $text-color;
        }

        .cell-more {
            float: right;
            line-height: 80rpx;
            font-size: $font-size-24;
            color: #666666;
            padding-right: 30rpx;
        }

        .iconfont {
            width: 30rpx;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            position: absolute;
            right: 0;
            top: 0;
            display: block;
            font-size: $font-size-28;
        }
    }

    .order-section {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        height: 99rpx;
        padding: 24rpx 0;
    }

    .order-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        &:last-child {
            margin-right: 0;
        }

        .order-icon {
            width: 52rpx;
            height: 52rpx;
            position: relative;

            image {
                width: 52rpx;
                height: 52rpx;
            }

            .icon-num {
                position: absolute;
                right: -24rpx;
                top: -9rpx;
            }

            .icon-num.goleft {
                right: -12rpx;
            }
        }

        .order-t {
            line-height: 50rpx;
            font-size: $font-size-24;
            color: $text-color;
        }
    }

    .foot-list {
        width: 100%;
        box-sizing: border-box;
        padding: 0 24rpx;
        padding-top: 168rpx;
        padding-bottom: 120rpx;
    }

    .list-cell-image {
        width: 100%;
        height: 168rpx;
        background: url(https://static.caimei365.com/app/meibohui/app/activity-small-banner@2x.png);
        background-size: cover;
        box-sizing: border-box;
        margin-bottom: 24rpx;

        .text {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 38rpx 56rpx;

            .h1 {
                line-height: 50rpx;
                font-size: $font-size-36;
                color: #ffffff;
            }

            .p {
                line-height: 34rpx;
                font-size: $font-size-30;
                color: #ffffff;
            }
        }
    }

    .list-cell-main {
        width: 100%;
        height: auto;
        margin-bottom: 24rpx;
        padding: 40rpx 10rpx 0 10rpx;
        background: $bg-color;
        border-radius: 20rpx;
        box-sizing: border-box;

        .list-cell-navs {
            width: 25%;
            height: auto;
            float: left;
            margin-bottom: 40rpx;

            .icon {
                width: 40rpx;
                height: 40rpx;
                margin: 0 auto;
                position: relative;
                margin-bottom: 10rpx;

                .icon-image {
                    width: 40rpx;
                    height: 40rpx;
                    display: block;
                }
            }

            .name {
                width: 100%;
                height: 40rpx;
                line-height: 40rpx;
                text-align: center;
                font-size: $font-size-24;
                color: #999999;
            }
        }
    }

    .uni-badge--small {
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
    }

    .uni-badge {
        font-family: 'Helvetica Neue', Helvetica, sans-serif;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 12px;
        line-height: 1;
        display: inline-block;
        padding: 3px 6px;
        color: #333;
        border-radius: 100px;
        background-color: #f1f1f1;
    }

    .uni-badge-error {
        color: #fff;
        background-color: #dd524d;
    }
</style>