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

<template>
    <view class="container user clearfix">
        <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/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="margin-bottom: 20rpx;border-radius: 20rpx;" v-if="!hasLogin || userInfo.userIdentity === 3">
                    <view
                        class="list-cell"
                       	@click="this.$api.navigateTo('/pages/login/supplier_login')"
                        hover-class="cell-hover"
                        :hover-stay-time="50"
                        style="border-radius: 25rpx;
    padding: 0 19rpx;
    box-sizing: border-box;"
                    >
                        <view class="cell-icon">
                            <image class="cell-icon-image" src="https://static.caimei365.com/app/img/supplier-login/supplier.png" mode=""></image>
                        </view>
                        <text class="cell-tit">供应商服务</text>
                        <text style="right: 20rpx;" class="cell-more iconfont icon-xiayibu"></text>
                    </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-item" v-show="hasLogin">
                        <view
                            class="list-cell"
                            v-show="userIdentity == 4"
                            @click="navigatorClubUpgrade(`/pages/login/apply?clubStatus=${clubStatus}`)"
                            hover-class="cell-hover"
                            :hover-stay-time="50"
                        >
                            <view class="cell-icon">
                                <image
                                    class="cell-icon-image"
                                    src="https://static.caimei365.com/app/img/icon/icon_club_8@2x.png"
                                    mode=""
                                ></image>
                            </view>
                            <text class="cell-tit">
                                升级资质机构
                                <text class="cell-tips">采美豆</text>
                            </text>
                            <text class="cell-more">
                                <text class="txt">{{ clubStatusText(clubStatus) }}</text>
                                <text class="iconfont icon-xiayibu"></text>
                            </text>
                        </view>
<!--                        <view
                            class="list-cell"
                            @click="navigator('/pages/user/regularPurchase/regularPurchase')"
                            hover-class="cell-hover"
                            :hover-stay-time="50"
                        >
                            <view class="cell-icon">
                                <image
                                    class="cell-icon-image"
                                    src="https://static.caimei365.com/app/img/icon/icon_club_9@2x.png"
                                    mode=""
                                ></image>
                            </view>
                            <text class="cell-tit">再次购买</text>
                            <text class="cell-more iconfont icon-xiayibu"></text>
                        </view>--> 
                        <view
                            class="list-cell"
                            @click="navigator('/pages/user/collection/collection')"
                            hover-class="cell-hover"
                            :hover-stay-time="50"
                        >
                            <view class="cell-icon">
                                <image
                                    class="cell-icon-image"
                                    src="https://static.caimei365.com/app/img/icon/icon_club_13@2x.png"
                                    mode=""
                                ></image>
                            </view>
                            <text class="cell-tit">收藏商品</text>
                            <text class="cell-more iconfont icon-xiayibu"></text>
                        </view>
                    </view>
                    <view class="list-cell-item">
                        <view
                            class="list-cell"
                            v-for="(item, index) in firstList"
                            :key="index"
                            @click="navigator(item.path)"
                            hover-class="cell-hover"
                            :hover-stay-time="50"
                        >
                            <view class="cell-icon">
                                <image class="cell-icon-image" :src="item.icon" mode=""></image>
                            </view>
                            <text class="cell-tit">
                                {{ item.name }}
                                <text class="cell-tips" v-if="index == 2 && isModify">采美豆</text>
                            </text>
                            <text class="cell-more iconfont icon-xiayibu"></text>
                        </view>
                    </view>
                    <view class="list-cell-item">
                        <view class="list-cell" hover-class="cell-hover" :hover-stay-time="50">
                            <view class="cell-icon">
                                <image
                                    class="cell-icon-image"
                                    src="https://static.caimei365.com/app/img/icon/icon_club_5@2x.png"
                                    mode=""
                                ></image>
                            </view>
                            <text class="cell-tit cont">联系我们</text>
                            <text class="cell-more cont" @click="toPhone">{{ contactNumber }}</text>
                        </view>
                        <view
                            class="list-cell"
                            @click="this.$api.navigateTo('/pages/user/about/about')"
                            hover-class="cell-hover"
                            :hover-stay-time="50"
                        >
                            <view class="cell-icon">
                                <image
                                    class="cell-icon-image"
                                    src="https://static.caimei365.com/app/img/icon/icon_club_6@2x.png"
                                    mode=""
                                ></image>
                            </view>
                            <text class="cell-tit">关于我们</text>
                            <text class="cell-more iconfont icon-xiayibu"></text>
                        </view>
                        <view
                            class="list-cell last"
                            @click="this.$api.navigateTo('/pages/h5/article/page?linkType=99')"
                            hover-class="cell-hover"
                            :hover-stay-time="50"
                        >
                            <view class="cell-icon">
                                <image
                                    class="cell-icon-image"
                                    src="https://static.caimei365.com/app/img/icon/icon_club_7@2x.png"
                                    mode=""
                                ></image>
                            </view>
                            <text class="cell-tit">帮助中心</text>
                            <text class="cell-more iconfont icon-xiayibu"></text>
                        </view>
                    </view>
                </view>
                <view class="header-main-last"></view>
            </view>
        </view>
        <!-- 采美豆提示弹窗 -->
        <activityBean
            v-if="isActivityBean"
            :show="isActivityBean"
            :beansType="beansType"
            :beanNumber="beanNumber"
            @cancel="handleBeanlClick"
        ></activityBean>
    </view>
</template>
<script>
import activityBean from '@/components/cm-module/activity/activityBean.vue'
import authorize from '@/common/config/authorize.js'
import { mapState, mapMutations } from 'vuex'

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,
            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: [
                {
                    name: '运营人员管理',
                    path: '/pages/user/operator/list',
                    icon: 'https://static.caimei365.com/app/img/icon/icon_club_1@2x.png'
                },
                {
                    name: '收货地址管理',
                    path: '/pages/user/address/address',
                    icon: 'https://static.caimei365.com/app/img/icon/icon_club_2@2x.png'
                },
                {
                    name: '机构资料',
                    path: '/pages/login/information',
                    icon: 'https://static.caimei365.com/app/img/icon/icon_club_3@2x.png'
                },
                {
                    name: '账户设置',
                    path: '/pages/user/setting/setting',
                    icon: 'https://static.caimei365.com/app/img/icon/icon_club_4@2x.png'
                }
            ]
        }
    },
    onLoad(option) {},
    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)
                })
        },
        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')
            }
        },
        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)
            }
        },
        navigatorClubUpgrade(url) {
            // 友盟埋点个人机构升级点击事件
            if (process.env.NODE_ENV != 'development') {
                this.$uma.trackEvent('Um_Event_ClubUpgrade', {
                    Um_Key_ClubName: `${this.name}`,
                    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
        },
        clubStatusText(state) {
            let stateText
            switch (state) {
                case 90:
                    stateText = ''
                    break
                case 1:
                    stateText = '正在审核中'
                    break
                case 92:
                    stateText = '审核不通过'
                    break
            }
            return stateText
        },
        async initUserData() {
            const userInfo = await this.$api.getComStorage('userInfo')
            this.userId = userInfo.userId ? userInfo.userId : 0
            this.getClubObtainCenter()
            this.UserClubOrderCount()
            this.GetInitBeansInfo()
            this.updateNoticeNum()
        }
    },
    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() {
        if (this.hasLogin) {
            this.initUserData()
        } else {
            this.getPhone()
            this.$store.commit('updateAllNum', 0)
        }
    }
}
</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-last {
    width: 100%;
    height: 20rpx;
    float: left;
    box-sizing: border-box;
}
.header-main-listcell {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 24rpx;
    margin-bottom: 60rpx;
}
.list-cell-item {
    width: 654rpx;
    height: auto;
    margin-bottom: 24rpx;
    padding: 0 24rpx;
    background: $bg-color;
    border-radius: 20rpx;
}
.list-cell {
    width: 100%;
    line-height: 100rpx;
    position: relative;
    background: $bg-color;
    border-bottom: 1px solid #ebebeb;
    height: 100rpx;
    &:last-child {
        border-bottom: none;
    }
    &.cell-hover {
        background: #fafafa;
    }
    .cell-icon {
        width: 60rpx;
        height: 100rpx;
        text-align: center;
        box-sizing: border-box;
        padding: 32rpx 12rpx;
        float: left;
        .cell-icon-image {
            width: 36rpx;
            height: 36rpx;
            display: block;
        }
    }
    .cell-more {
        height: 100rpx;
        line-height: 100rpx;
        text-align: right;
        position: absolute;
        right: 0;
        top: 0;
        font-size: $font-size-28;
        color: #666666;
        &.cont {
            width: 250rpx;
        }
        .txt {
            color: #fb4343;
            padding-right: 10rpx;
        }
    }
    .cell-tit {
        width: 465rpx;
        display: block;
        float: left;
        font-size: $font-size-28;
        color: #666666;
        margin-right: 10rpx;
        &.cont {
            width: 300rpx;
        }
        .cell-tips {
            width: 74rpx;
            height: 32rpx;
            line-height: 32rpx;
            padding: 0 7rpx;
            border-radius: 16rpx;
            background-color: #ffe6dc;
            color: $color-system;
            text-align: center;
            font-size: $font-size-20;
            margin-left: 8rpx;
        }
    }
    .cell-tip {
        font-size: $font-size-28;
        color: $text-color;
    }
}
.list-cell.last {
    border-bottom: none;
}
.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>