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

<template>
    <view class="container user clearfix">
        <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true" :loadingType="5" />
        <template v-else>
            <cm-custom :navbar-data="nvabarData" v-if="isCmcustom"></cm-custom>
            <view class="user-section">
                <view
                    class="header"
                    :style="{
                        height: CustomBar + 120 - StatusBar + 'px',
                        paddingTop: CustomBar + 'px',
                        background: 'url(https://static.caimei365.com/app/img/bg/new_home_cumres@2x.png)',
                        backgroundSize: 'cover'
                    }"
                >
                <view class="header-main" v-if="hasLogin">
                    <view class="header-icon">
                        <image
                            :src="headpic ? headpic : 'https://static.caimei365.com/app/img/icon/icon-club@3x.png'"
                            mode=""
                        ></image>
                    </view>
                    <view class="header-text">
                        <view class="user-item">
                            <text class="u-h1">{{ name }}</text>
                        </view>
                        <view class="user-item">
                            <view class="user-item-tips vip" v-if="userIdentity == 2">
                                <image class="tips-icon" :src="userVipIcon" mode=""></image>
                                {{ userType }}
                            </view>
                            <view
                                class="user-item-tips"
                                v-if="userIdentity == 4"
                                :class="userVip.vipFlag == 0 ? 'none' : ''"
                            >
                                <image class="tips-icon" v-if="userVip.vipFlag == 1" :src="userVipIcon" mode=""></image>
                                {{ userType }}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="header-main-none" v-else>
                    <view class="header-icon" @click="navigator('/pages/login/login')">
                        <image src="https://static.caimei365.com/app/img/icon/icon-club@3x.png" mode=""></image>
                    </view>
                    <view class="header-text">
                        <view class="user-item">
                            <text class="u-h1" @click="navigatorRegirst('/pages/login/login')">账号登录/注册></text>
                        </view>
                        <view class="user-item">
                            <text class="u-p" @click="navigator('/pages/login/login')">
                                登录采美商城更多惊喜等着您~
                            </text>
                        </view>
                        <view class="user-code" @click="navigatorLoginCode('/pages/login/logincode')">邀请码登录></view>
                    </view>
                </view>
                <!-- 我的资产 -->
                <view class="header-main-account">
                    <view class="main-member">
                        <view
                            class="main-member-none"
                            v-if="!hasLogin"
                            @click.stop="navigatorMember('/pages/login/login')"
                        >
                            <view class="main-member-none-text">开通采美·超级会员，享专属特权</view>
                            <view class="main-member-none-btn" @click.stop="navigatorMember('/pages/login/login')">
                                立即开通
                            </view>
                        </view>
                        <template v-else>
                            <view
                                class="main-member-svip"
                                v-if="userVip.vipFlag == 1"
                                @click="navigator('/pages/user/member/member')"
                            >
                                <view class="main-member-svip-h1">已开通采美·超级会员</view>
                                <view class="main-member-svip-p">有效期至：{{ userVip.time }}</view>
                                <view class="main-member-svip-icon"><text class="iconfont icon-xiayibu"></text></view>
                            </view>
                            <view
                                class="main-member-svip"
                                v-if="userVip.vipFlag == -1"
                                @click="navigator('/pages/user/member/member')"
                            >
                                <view class="main-member-svip-h1 red">采美·超级会员已过期</view>
                                <view class="main-member-svip-p">有效期至：{{ userVip.time }}</view>
                                <view class="main-member-svip-icon"><text class="iconfont icon-xiayibu"></text></view>
                            </view>
                            <view
                                class="main-member-none"
                                v-if="userVip.vipFlag == 0"
                                @click="navigatorUserMember('/pages/user/member/member')"
                            >
                                <view class="main-member-none-text">开通采美·超级会员，享专属特权</view>
                                <view class="main-member-none-btn">立即开通</view>
                            </view>
                        </template>
                    </view>
                    <view class="main-account">
                        <view class="main-cell">
                            <view
                                class="main-account-ri-view account"
                                @click="navigator('/pages/user/account/account')"
                            >
                                <view class="main-account-icon" v-if="hasLogin">{{ userMoney }}</view>
                                <view class="main-account-icon none" v-else>-</view>
                                <view class="main-account-text">账户余额</view>
                            </view>
                            <view
                                class="main-account-ri-view beans"
                                @click="navigator('/pages/user/account/account-bean')"
                            >
                                <view class="main-account-icon" v-if="hasLogin">{{ userBeans ? userBeans : 0 }}</view>
                                <view class="main-account-icon none" v-else>-</view>
                                <view class="main-account-text">采美豆</view>
                            </view>
                            <view class="main-account-ri-view coupon" @click="navigator('/pages/user/coupon/coupon')">
                                <view class="main-account-icon" v-if="hasLogin">{{ couponNum ? couponNum : 0 }}</view>
                                <view class="main-account-icon none" v-else>-</view>
                                <view class="main-account-text">优惠券</view>
                            </view>
                            <view class="main-account-ri-view coupon" @click="navigator('/pages/user/pay/card-list')">
                                <view class="main-account-icon" v-if="hasLogin">{{ bankNum ? bankNum : 0 }}</view>
                                <view class="main-account-icon none" v-else>-</view>
                                <view class="main-account-text">银行卡</view>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 订单 -->
                <view class="header-main-order" :style="{ marginTop: hasLogin ? '0rpx' : '0rpx' }">
                    <view class="user-order">
                        <view class="tab-title" @click="navigator('/pages/user/order/order-list?state=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/user/order/order-list?state=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="confirmedCount > 0 && hasLogin"
                                        class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
                                        :class="[confirmedCount < 10 ? 'goleft' : '']"
                                    >
                                        {{ confirmedCount >= 99 ? '99+' : confirmedCount }}
                                    </text>
                                </view>
                                <text class="order-t">待确认</text>
                            </view>
                            <view
                                class="order-item"
                                @click="navigator('/pages/user/order/order-list?state=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="paymentCount > 0 && hasLogin"
                                        class="uni-badge uni-badge-error uni-small uni-badge--small icon-num "
                                        :class="[paymentCount < 10 ? 'goleft' : '']"
                                    >
                                        {{ paymentCount >= 99 ? '99+' : paymentCount }}
                                    </text>
                                </view>
                                <text class="order-t">待付款</text>
                            </view>
                            <view
                                class="order-item"
                                @click="navigator('/pages/user/order/order-list?state=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="waitShipmentsCount > 0 && hasLogin"
                                        class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
                                        :class="[waitShipmentsCount < 10 ? 'goleft' : '']"
                                    >
                                        {{ waitShipmentsCount >= 99 ? '99+' : waitShipmentsCount }}
                                    </text>
                                </view>
                                <text class="order-t">待发货</text>
                            </view>
                            <view
                                class="order-item"
                                @click="navigator('/pages/user/order/order-list?state=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="shipmentsCount > 0 && hasLogin"
                                        class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
                                        :class="[shipmentsCount < 10 ? 'goleft' : '']"
                                    >
                                        {{ shipmentsCount >= 99 ? '99+' : shipmentsCount }}
                                    </text>
                                </view>
                                <text class="order-t">已发货</text>
                            </view>
                            <view
                                class="order-item"
                                @click="navigator('/pages/user/order/order-list?state=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="salesReturnCount > 0 && hasLogin"
                                        class="uni-badge uni-badge-error uni-small uni-badge--small icon-num"
                                        :class="[salesReturnCount < 10 ? 'goleft' : '']"
                                    >
                                        {{ salesReturnCount >= 99 ? '99+' : salesReturnCount }}
                                    </text>
                                </view>
                                <text class="order-t">退货/款</text>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 底部跳转 -->
                <view class="header-main-listcell">
                    <view class="list-cell-main clearfix">
                        <view class="list-cell-navs" v-for="(item,index) in firstList" :key="index" @click="navigator(item.path)" v-show=" index === 0 ? userIdentity === 4 : item.show">
                        	<view class="icon">
                        		<image class="icon-image" :src="item.icon" mode="widthFix"></image>
                                <text class="cell-tips" v-if="(index === 1 && isModify) || index === 0">采美豆</text>
                        	</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 lastList" :key="index" @click="lastNavigator(index,item.path)">
                        	<view class="icon">
                        		<image class="icon-image" :src="item.icon" mode="widthFix"></image>
                        	</view>
                        	<view class="name">{{ item.name }}</view>
                        </view>
                        <!-- #ifdef MP-WEIXIN -->
                        <button class="list-cell-navs" open-type="contact" @bindcontact="handleContact">
                        	<view class="icon">
                        	    <image
                        	        class="icon-image"
                        	        src="https://static.caimei365.com/app/img/icon/icon_club_5@2x.png"
                        	        mode=""
                        	    ></image>
                        	</view>
                        	<text class="name"> 官方客服 </text>
                        </button>
                        <!-- #endif -->
                    </view>
                </view>
            </view>
            </view>
        </template>
        <!-- 采美豆提示弹窗 -->
        <activityBean
            v-if="isActivityBean"
            :show="isActivityBean"
            :beansType="beansType"
            :beanNumber="beanNumber"
            @cancel="handleBeanlClick"
        />
    </view>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import activityBean from '@/components/cm-module/activity/activityBean.vue'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'
export default {
    components: {
        activityBean
    },
    data() {
        return {
            nvabarData: {
                // 顶部自定义导航
                showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
                showSearch: 0,
                title: '个人中心', // 导航栏中间的标题
                haveBack: false,
                textLeft: this.$store.state.isIphone,
                textColor: '#333333',
                bgColor: ''
            },
            CustomBar: this.CustomBar, // 顶部导航栏高度
            StatusBar: this.StatusBar,
            StaticUrl: this.$Static,
            skeletonShow:true,
            userId: 0,
            beanNumber: 50,
            beansType: 0,
            isModify: false,
            isActivityBean: false,
            isCmcustom: false,
            userVipIcon: '',
            name: '',
            userType: '',
            headpic: '',
            userVip: {}, // 超级会员信息
            userBeans: 0,
            userMoney: '0.00',
            couponNum: 0,
            bankNum: 0,
            contactNumber: '',
            openid: '',
            aboutHtml: '',
            telPhone: '',
            bindMobile: '',
            isSvip: false,
            isSvipType: 2,
            clubStatus: '', // 机构升级资质机构审核状态1:待审核  91:审核失败
            userIdentity: '', // 机构等级
            confirmedCount: 0, // 待确认
            paymentCount: 0, // 待付款角标
            waitShipmentsCount: 0, // 待收货角标
            shipmentsCount: 0, // 已发货角标
            salesReturnCount: '', // 退货/款角标
            firstList: [],
            lastList:[
                {
                    name: '账户设置',
                    path: '/pages/user/setting/setting',
                    icon: 'https://static.caimei365.com/app/img/icon/icon_club_4@2x.png'
                },
                {
                	name: '关于我们',
                	path: '/pages/user/about/about',
                	icon: 'https://static.caimei365.com/app/img/icon/icon_club_6@2x.png'
                },
                {
                	name: '帮助中心',
                	path: '/pages/h5/article/page?linkType=99',
                	icon: 'https://static.caimei365.com/app/img/icon/icon_club_7@2x.png'
                }
            ]
        }
    },
    onLoad(option) {
        this.initTbasUser()
    },
    computed: {
        ...mapState(['hasLogin', 'userInfo', 'isWxAuthorize'])
    },
    methods: {
        ...mapMutations(['updateNoticeNum']),
        getClubObtainCenter() {
            // 获取个人中心数据
            this.UserService.GetClubObtainCenter({ userId: this.userId })
                .then(response => {
                    let data = response.data
                    this.userMoney = this.filtersMoney(data.user.ableUserMoney)
                    this.userIdentity = data.user.userIdentity //机构等级
                    if (this.userIdentity == 2) {
                        this.name = data.club.name //资质机构名称
                        this.userType = '资质机构'
                    } else {
                        this.name = data.user.userName //个人机构名称
                        this.userType = '个人机构'
                    }
                    this.userVip = data.vip // 超级会员信息
                    if (this.userVip.vipFlag == 1) {
                        this.userVipIcon = this.StaticUrl + '/icon/icon-member-svip@2x.png'
                    } else {
                        this.userVipIcon = this.StaticUrl + '/icon/icon-member-vip@2x.png'
                    }
                    this.userBeans = data.user.userBeans // 采美豆数量
                    this.headpic = data.user.image // 会所头像
                    this.bindMobile = data.user.bindMobile // 登录手机号
                    this.clubStatus = data.user.clubStatus // 机构审核状态
                    this.couponNum = data.couponNum // 优惠券数量
                    this.bankNum = data.bankNum // 银行卡数量
                    this.isModify = data.isModify // 是否显示采美豆
                    this.contactNumber = data.contactNumber // 联系电话
                    let clubInfo = { name: this.name, image: this.headpic, userId: data.user.userId }
                    uni.setStorage({ key: 'clubInfo', data: clubInfo })
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        initTbasUser(){
            const isLogin =  this.hasLogin ? true : false
            console.log('isLogin',isLogin)
            this.firstList = [
                {
                    name: '升级资质',
                    path: `/pages/login/apply?clubStatus=${this.clubStatus}`,
                    icon: 'https://static.caimei365.com/app/img/icon/icon_club_8@2x.png',
                    show: isLogin
                },
                {
                    name: '机构资料',
                    path: '/pages/login/information',
                    icon: 'https://static.caimei365.com/app/img/icon/icon_club_3@2x.png',
                    show: true
                },
                {
                    name: '运营人员管理',
                    path: '/pages/user/operator/list',
                    icon: 'https://static.caimei365.com/app/img/icon/icon_club_1@2x.png',
                    show: true
                },
                {
                    name: '地址管理',
                    path: '/pages/user/address/address',
                    icon: 'https://static.caimei365.com/app/img/icon/icon_club_2@2x.png',
                    show: true 
                },
                {
                    name: '收藏商品',
                    path: '/pages/user/collection/collection',
                    icon: 'https://static.caimei365.com/app/img/icon/icon_club_13@2x.png',
                    show: true
                }
                
            ]
        },
        UserClubOrderCount() {
            //获取订单状态数量
            this.OrderService.UserClubOrderCount({ userId: this.userId })
                .then(response => {
                    let data = response.data
                    this.confirmedCount = this.showBadge(data.confirmedCount) //待确认
                    this.paymentCount = this.showBadge(data.paymentCount) //待付款
                    this.waitShipmentsCount = this.showBadge(data.waitShipmentsCount) //待收货
                    this.shipmentsCount = this.showBadge(data.shipmentsCount) //已发货
                    this.salesReturnCount = this.showBadge(data.salesReturnCount) //退货/款
                })
                .catch(error => {
                    console.log('获取订单状态数量异常~')
                })
        },
        GetInitBeansInfo() {
            //初始化采美豆信息
            this.UserService.GetHomeObtainBeans({ userId: this.userId })
                .then(response => {
                    this.beansType = response.data.beansType
                    this.beanNumber = response.data.num
                    this.isActivityBean = true
                })
                .catch(error => {
                    console.log('用户暂无采美豆推送~')
                })
        },
        getPhone() {
            // 获取联系我们电话
            this.CommonService.QueryAfterSale()
                .then(response => {
                    this.contactNumber = response.data.contactNumber
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        toPhone() {
            // 拨号
            uni.makePhoneCall({
                phoneNumber: this.contactNumber //仅为示例
            })
        },
        filtersMoney(param) {
            let moneyText
            if (param == 0) {
                moneyText = '0.00'
            } else {
                let i = param.toString().lastIndexOf('.')
                let money
                if (i == -1) {
                    money = this.$api.FormatMoney(param) //会所剩余余额
                    moneyText = money + '.00'
                } else {
                    money = this.$api.FormatMoney(param) //会所剩余余额
                    moneyText = money
                }
            }
            console.log('moneyText', moneyText)
            return moneyText
        },
        handleBeanlClick() {
            //关闭采美豆弹窗
            this.isActivityBean = false
        },
        navigator(url) {
            if (this.hasLogin) {
                this.$api.navigateTo(url)
            } else {
                this.$api.navigateTo('/pages/login/login?type=0&state=0')
            }
        },
        lastNavigator(index,url) {
            if(index === 0){
                if (this.hasLogin) {
                    this.$api.navigateTo(url)
                } else {
                    this.$api.navigateTo('/pages/login/login')
                }
            }else{
                this.$api.navigateTo(url)
            }
        },
        navigatorRegirst(url) {
            if (!this.hasLogin) {
                // 友盟埋点注册入口点击事件
                if (process.env.NODE_ENV != 'development') {
                    this.$uma.trackEvent('Um_Event_totalLoginAndRegister', {
                        Um_Key_PageName: '登录注册统一入口',
                        Um_Key_SourcePage: '个人中心'
                    })
                }
                this.$api.navigateTo(url)
            }
        },
        navigatorLoginCode(url) {
            // 友盟埋点个人机构升级点击事件
            if (process.env.NODE_ENV != 'development') {
                this.$uma.trackEvent('Um_Event_LoginCodeBtn', {
                    Um_Key_ClubName: this.getNowTime(),
                    Um_Key_PageName: '邀请码登录',
                    Um_Key_SourcePage: '个人中心'
                })
            }
            this.$api.navigateTo(url)
        },
        navigatorMember(url) {
            // 友盟埋点游客立即开通点击事件
            if (process.env.NODE_ENV != 'development') {
                this.$uma.trackEvent('Um_Event_userVisitorMember', {
                    Um_Key_Time: this.getNowTime(),
                    Um_Key_PageName: '游客立即开通',
                    Um_Key_SourcePage: '个人中心'
                })
            }
            this.$api.navigateTo(url)
        },
        navigatorUserMember(url) {
            // 友盟埋点机构立即开通点击事件
            if (process.env.NODE_ENV != 'development') {
                this.$uma.trackEvent('Um_Event_userClubMember', {
                    Um_Key_Time: `${this.name}`,
                    Um_Key_PageName: '机构立即开通',
                    Um_Key_SourcePage: '个人中心'
                })
            }
            this.$api.navigateTo(url)
        },
        getNowTime() {
            let dateTime
            let yy = new Date().getFullYear()
            let mm = new Date().getMonth() + 1
            let dd = new Date().getDate()
            let hh = new Date().getHours()
            let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
            let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
            dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
            console.log(dateTime)
            return dateTime
        },
        navigatorNex(url) {
            if (!this.hasLogin) {
                this.$api.navigateTo(url)
            }
        },
        showBadge(n) {
            let num = ''
            if (n > 100) {
                num = 99
            } else {
                num = n
            }
            return num
        },
        // 初始化
        async initUserData() {
            if (this.hasLogin) {
                const userInfo = await this.$api.getStorage()
                this.userId = userInfo.userId
                this.getClubObtainCenter()
                this.UserClubOrderCount()
                this.GetInitBeansInfo()
                this.updateNoticeNum()
                setTimeout(() => {
                    this.skeletonShow = false
                }, 1000)
            } else {
                this.getPhone()
                this.$store.commit('updateAllNum', 0)
                setTimeout(() => {
                    this.skeletonShow = false
                }, 1000)
            }
        },
    },
    onPageScroll(e) {
        //实时获取到滚动的值
        if (e.scrollTop > 20) {
            this.isCmcustom = true
            this.nvabarData.bgColor = '#FFFFFF'
            this.nvabarData.textColor = '#333333'
        } else {
            this.isCmcustom = false
            this.nvabarData.bgColor = ''
            this.nvabarData.textColor = '#FFFFFF'
        }
    },
    onPullDownRefresh() {  
        //下拉刷新
        if (this.hasLogin) {
            this.getClubObtainCenter()
            this.UserClubOrderCount()
            uni.stopPullDownRefresh()
        } else {
            uni.stopPullDownRefresh()
        }
    },
    onShow() {
        this.initUserData()
    } 
}
</script>

<style lang="scss">
@import '@/uni.scss';
page {
    background-color: #f7f7f7;
}
.user {
    width: 100%;
    height: 100%;
    position: relative;
    background: rgba(247, 247, 247, 1);
}
.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;
        box-sizing: border-box;
        padding: 10rpx 0 0 20rpx;
        .user-item {
            flex: 1;
            height: 64rpx;
            line-height: 64rpx;
            .user-item-tips {
                display: inline-block;
                float: left;
                width: 140rpx;
                height: 34rpx;
                background: #e7eaef;
                border-radius: 20rpx;
                line-height: 34rpx;
                font-size: $font-size-22;
                text-align: center;
                color: #627386;
                box-sizing: border-box;
                padding: 0 11rpx 0 41rpx;
                position: relative;
                &.none {
                    width: 120rpx;
                    padding: 0 11rpx 0 11rpx;
                }
                &.vip {
                    background: #fff2d5;
                    color: #e4aa43;
                }
                .tips-icon {
                    width: 34rpx;
                    height: 34rpx;
                    display: block;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
            .u-h1 {
                width: 400rpx;
                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: 30rpx;
                color: #ffffff;
                text-align: left;
            }
        }
    }
    .header-icon {
        flex: 2;
        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;
        position: relative;
        box-sizing: border-box;
        padding: 20rpx 0;
        .user-code {
            width: 193rpx;
            height: 56rpx;
            background: rgba(255, 255, 255, 0.2);
            color: #ffffff;
            line-height: 56rpx;
            font-size: $font-size-26;
            padding: 0 20rpx 0 23rpx;
            box-sizing: border-box;
            border-radius: 28rpx 0 0 28rpx;
            position: absolute;
            right: -24rpx;
            top: 46rpx;
        }
        .user-item {
            flex: 1;
            height: 50rpx;
            line-height: 50rpx;
            .line {
                margin: 0 10rpx;
            }
            .u-h1 {
                float: left;
                font-size: $font-size-28;
                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: #ffffff;
                text-align: left;
            }
        }
    }
    .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;
        }
    }
}
.header-main-account {
    width: 100%;
    height: 310rpx;
    box-sizing: border-box;
    padding: 24rpx 44.5rpx;
    position: relative;
    .main-member {
        width: 100%;
        height: 168rpx;
        background: url(https://static.caimei365.com/app/img/icon/icon-member-user@2x.png) no-repeat;
        background-size: cover;
        border-radius: 20rpx;
        box-sizing: border-box;
        padding: 5rpx 24rpx 75rpx 104rpx;
        .main-member-none {
            width: 100%;
            height: 88rpx;
            box-sizing: border-box;
            padding: 28rpx 0 20rpx 0;
            line-height: 40rpx;
            .main-member-none-text {
                font-size: $font-size-26;
                color: #f0cb72;
                float: left;
            }
            .main-member-none-btn {
                width: 128rpx;
                height: 40rpx;
                background: linear-gradient(270deg, #fee9ba 0%, #f0cb72 100%);
                border-radius: 24rpx;
                line-height: 40rpx;
                text-align: center;
                font-size: $font-size-24;
                color: #333333;
                float: right;
            }
        }
        .main-member-svip {
            width: 100%;
            height: 88rpx;
            box-sizing: border-box;
            padding: 12rpx 0 9rpx 0;
            position: relative;
            .main-member-svip-h1 {
                width: 100%;
                height: 37rpx;
                line-height: 37rpx;
                color: #f0cb72;
                text-align: left;
                font-size: $font-size-26;
                &.red {
                    color: #ff2a2a;
                }
            }
            .main-member-svip-p {
                width: 100%;
                height: 28rpx;
                line-height: 28rpx;
                color: #bcbcbc;
                text-align: left;
                font-size: $font-size-20;
            }
            .main-member-svip-icon {
                width: 88rpx;
                height: 88rpx;
                position: absolute;
                right: 0;
                top: 0;
                line-height: 88rpx;
                text-align: right;
                .iconfont {
                    font-size: 30rpx;
                    color: #f0cb72;
                }
            }
        }
    }
    .main-account {
        width: 100%;
        height: 168rpx;
        position: absolute;
        top: 118rpx;
        left: 0;
        box-sizing: border-box;
        padding: 0 24rpx;
        .main-cell {
            width: 100%;
            height: 168rpx;
            background-color: $bg-color;
            border-radius: 20rpx;
            box-sizing: border-box;
            padding: 24rpx 0;
            .main-account-ri-view {
                height: 100%;
                width: 25%;
                float: left;
                .main-account-icon {
                    width: 100%;
                    height: 74rpx;
                    line-height: 74rpx;
                    text-align: center;
                    font-size: $font-size-30;
                    color: #f94b4b;
                    &.none {
                        color: #333333;
                        font: $font-size-36;
                        font-weight: normal;
                    }
                }
                .main-account-text {
                    width: 100%;
                    height: 44rpx;
                    line-height: 44rpx;
                    font-size: $font-size-28;
                    text-align: center;
                    color: #333333;
                }
            }
        }
    }
}
.header-main-order {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 24rpx;
    .user-order {
        width: 100%;
        height: auto;
        background-color: $bg-color;
        margin-bottom: 24rpx;
        border-radius: 20rpx;
        box-sizing: border-box;
        padding: 0 24rpx;
    }
}
.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: $text-color;
        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;
    }
}

.header-main-listcell {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 24rpx;
    margin-bottom: 60rpx;
    .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: 8rpx;
                position: relative;
        		.icon-image{
        			width: 40rpx;
        			height: 40rpx;
        			display: block;
        		}
                .cell-tips {
                    width: 70rpx;
                    height: 30rpx;
                    line-height: 30rpx;
                    padding: 0 6rpx;
                    border-radius: 15rpx;
                    background-color: #ffe6dc;
                    color: $color-system;
                    text-align: center;
                    font-size: $font-size-20;
                    position: absolute;
                    top: 28rpx;
                    right: -66rpx;
                }
                .cell-tips-dg{
                    width: 70rpx;
                    height: 30rpx;
                    line-height: 30rpx;
                    padding: 0 6rpx;
                    border-radius: 15rpx;
                    background-color: #C1C1C1;
                    color: #fb4343;
                    text-align: center;
                    font-size: $font-size-20;
                    position: absolute;
                    top: 0;
                    right: -66rpx;
                }
        	}
        	.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>