mteacher/src/views/app/PeriodExchange.vue

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

        <van-cell-group>
            <van-cell :center="true">
                <template slot="icon">
                    <img class="logo" src="@/assets/images/icon_teacher.png" alt="">
                </template>
                <template slot="title">
                    <p class="exchangeText">刘老师</p>
                </template>
                <template slot="label">
                    <p class="info">剩余时长：2000</p>
                </template>
            </van-cell>
        </van-cell-group>
    
        <div class="pay_btn" >确认兑换</div>
    </div>
</template>
<script>
/* eslint-disable */
import MHeader from '@/components/MHeader'
import { browser }  from '@/common/common'
import { queryTenantAccountDetail } from '@/api/app'

export default {
    name: 'courseApply',
    components: { MHeader },
    data() {
        return {
            headerStatus: true,
            loading: false,
            finished: false,
            params: {
                search: null,
                page: 1,
                rows: 20
            },
            dataShow: true, // 是否有数据
            dataList: []
        }
    },
    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
        }
    },
    methods: {
        getAccountDetail() {
            let params = this.params
            queryTenantAccountDetail(params).then(res => {
                let result = res.data
                this.loading = false
                if(result.code == 200) {
                    params.page = result.data.pageNo
                    this.dataList = this.dataList.concat(result.data.rows)
                    if(params.page >= result.data.totalPage) {
                        this.finished = true
                    }
                    this.params.page++
                } else {
                    this.finished = true
                }
                // 判断是否有数据
                if(this.dataList.length <= 0) {
                    this.dataShow = false
                }
            })
        },
        desensitPhone(phone) { // 手机号脱敏
            let first = phone.substr(0, 3)
            let last  = phone.substr(-4)
            return first + '****' + last
        }
    }
}
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
.periodExchange {
    min-height: 100vh;
    position: relative;
    .logo {
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        overflow: hidden;
        margin-right: .13rem;
    }
    /deep/.van-cell {
        padding: .26rem .16rem .88rem;
    }
    .exchangeText {
        font-size: .18rem;
        color: #1A1A1A;
    }
    .info {
        font-size: .16rem;
        color: #808080;
    }
    
}
.pay_btn {
    background: #14928A;
    line-height: 0.45rem;
    color: #fff;
    font-size: 0.18rem;
    border-radius: 0.5rem;
    text-align: center;
    position: absolute;
    width: 90%;
    margin-left: 5%;
    bottom: .2rem;
}
</style>