mteacher/src/views/app/Account.vue

<template>
    <div class="account">
        <m-header v-if="headerStatus" />

        <!-- <div class="accountHeader">
            <div class="bgColor"></div>
            <van-row class="content" type="flex" justify="center" align="center">
                <van-col span="24">
                    剩余时间<span>{{ availableMinutes }}</span>
                </van-col>
                <van-col span="12">
                    <i class="icon icon_lock"></i>冻结时间<span class="lock">{{ frozenMinutes }}</span>
                </van-col>
            </van-row>
        </div> -->
        <van-cell-group style="margin-bottom: .15rem;">
            <van-cell title="剩余时间" >
                <i class="icon icon_times" slot="icon"></i>
                <div slot="default" class="available">
                    {{ availableMinutes | calcMinute }}
                </div>
            </van-cell>
        </van-cell-group>
        <van-cell-group>
            <van-cell title="课时兑换" is-link to="periodExchange" >
                <i class="icon icon_change" slot="icon"></i>
            </van-cell>
            <van-cell title="兑换记录" is-link to="exchangeRecord" >
                <i class="icon icon_record" slot="icon"></i>
            </van-cell>

            <van-cell title="课时使用记录" is-link to="periodRecord" >
                <i class="icon icon_use" slot="icon"></i>
            </van-cell>
        </van-cell-group>

    </div>
</template>
<script>
/* eslint-disable */
import MHeader from '@/components/MHeader'
import { browser, calcMinute }  from '@/common/common'
import { sysTenantAccountGet } from '@/api/app'
export default {
    name: 'courseApply',
    components: { MHeader },
    data() {
        return {
            headerStatus: true,
            availableMinutes: 0,
            frozenMinutes: 0
        }
    },
    mounted() {
        let params = this.$route.query
        if(params.Authorization) {
            localStorage.setItem('Authorization', decodeURI(params.Authorization))
            localStorage.setItem('userInfo', decodeURI(params.Authorization))
        }
        
        document.title = '我的账户'
        if(browser().android || browser().iPhone) {
            this.headerStatus = false
        }

        this.__init()
    },
    methods: {
        __init() {
            this.$toast.loading({
                duration: 0,
                message: '加载中...',
                forbidClick: true,
                loadingType: 'spinner'
            })
            sysTenantAccountGet().then(res => {
                let result = res.data
                this.$toast.clear()
                if(result.code == 200) {
                    let tempResult = result.data
                    if(tempResult) {
                        this.availableMinutes = (tempResult.availableMinutes ? tempResult.availableMinutes : 0)
                    }
                } else {
                    this.$toast(result.msg)
                }
            })
        }
    }
}
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
.account {
    min-height: 100vh;
}

// .accountHeader {
//     background: #fff;
//     padding-bottom: .2rem;
//     .bgColor {
//         margin-top: -1px;   
//         height: .9rem;
//         background: #14928A;
//     }
//     .content {
//         height:74px;
//         background: rgba(255,255,255,1);
//         box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.19);
//         border-radius: .08rem;
//         margin: -.5rem .16rem 0;
//         text-align: center;
//         .van-col {
//             color: #1A1A1A;
//             display: flex;
//             align-items: center;
//             // justify-content: center;
//             padding-left: .2rem;
//             // &:first-child {
//             //     border-right: 1px solid #CCCCCC;
//             // }
//             span {
//                 padding-left: .1rem;
//                 color: #FF0909;
//                 &.lock {
//                     color: #999999;
//                 }
//             }
//         }
        
//     }
// }
.icon {
    display: inline-block;
    width: 0.2rem;
    height: 0.22rem;
    margin-right: .05rem;
    margin-top: -0.02rem;
}
.icon_times {
    background: url('../../assets/images/app/icon_times.png') no-repeat center center;
    background-size: contain;
}
.icon_lock {
    background: url('../../assets/images/app/icon_lock.png') no-repeat center center;
    background-size: contain;
}
.icon_change {
    background: url('../../assets/images/app/icon_change.png') no-repeat center center;
    background-size: contain;
}
.icon_record {
    background: url('../../assets/images/app/icon_record.png') no-repeat center center;
    background-size: contain;
}
.icon_use {
    background: url('../../assets/images/app/icon_use.png') no-repeat center center;
    background-size: contain;
}
/deep/.van-cell-group {
    &::after {
        border-width: 0;;
    }
    /deep/.van-cell {
        padding: .16rem;
        align-items: center;
        .available {
            color: #FF0909;
            font-size: .17rem;
        }
    }
}

/deep/.van-cell__title {
    flex: 1 auto;
    font-size: .16rem;
    color: #1A1A1A;
}

</style>