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" v-if="userInfo.avatar" :src="userInfo.avatar" alt="">
                    <img class="logo" v-else src="@/assets/images/icon_teacher.png" alt="">
                </template>
                <template slot="title">
                    <p class="exchangeText">{{ userInfo.realName }}</p>
                </template>
                <template slot="label">
                    <p class="info">剩余时长：{{ availableMinutes }}</p>
                </template>
            </van-cell>
        </van-cell-group>

        <div class="activeList">
            <div class="active" @click="onPayOrder(item)" v-for="(item, index) in dataList" :key="index">
                <van-icon name="question-o" @click.stop="onMore(item)" class="icon_question" />
                <img :src="item.coverImg" alt="">
            </div>
        </div>
    
        <!-- <div class="pay_btn" >确认兑换</div> -->
        <van-popup v-model="popupShow" closeable position="bottom"
        :style="{ minHeight: '30%', maxHeight: '60%' }" >
            <div class="popupContent" v-html="popupContent"></div>
        </van-popup>
    </div>
</template>
<script>
/* eslint-disable */
import MHeader from '@/components/MHeader'
import { browser, calcMinute }  from '@/common/common'
import { tenantEntryActivitesList, queryUserInfo, sysTenantAccountGet, createOrder } from '@/api/app'

export default {
    name: 'courseApply',
    components: { MHeader },
    data() {
        return {
            userInfo: {},
            availableMinutes: 0,
            headerStatus: true,
            result: {}, // 生成订单的数据
            dataList: [],
            isClick: false,
            popupShow: false,
            popupContent: null
        }
    },
    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: {
        async __init() {
            let loadingStatus = true
            this.$toast.loading({
                duration: 0,
                message: '加载中...',
                forbidClick: true,
                loadingType: 'spinner'
            })
            await queryUserInfo().then(res => {
                let result = res.data
                if(result) {
                    this.userInfo = result
                }
            })

            await sysTenantAccountGet().then(res => {
                let result = res.data
                if(result.code == 200) {
                    let tempResult = result.data
                    if(tempResult) {
                        this.availableMinutes = calcMinute(tempResult.availableMinutes ? tempResult.availableMinutes : 0)
                    }
                } else {
                    loadingStatus = false
                    this.$toast(result.msg)
                }
            })

            await tenantEntryActivitesList().then(res => {
                let result = res.data
                if(result.code == 200) {
                    this.dataList = result.data.rows
                } else {
                    loadingStatus = false
                    this.$toast(result.msg)
                }
            })
            if(loadingStatus) {
                this.$toast.clear()
            }
        },
        onPayOrder(item) {
            // activitiesId
            if(this.isClick) {
                return
            }
            this.$toast.loading({
                duration: 0,
                message: '加载中...',
                forbidClick: true,
                loadingType: 'spinner'
            })
            this.isClick = true
            createOrder({ activitiesId: item.id }).then(res => {
                let result = res.data
                this.$toast.clear()
                this.isClick = false
                if(result.code == 200) {
                    this.result = result.data
                    this.onSubmit()
                } else {
                    this.$toast(result.msg)
                }
            })
        },
        onSubmit() {
            // submit 提交
            let result = this.result
            // if(result.type == "YQPAY") {
                let f = result.payMap
                document.querySelector('#onSubmit').action = f.host
                document.querySelector('#apiContent').value = f.apiContent
                document.querySelector('#merNo').value = f.merNo
                document.querySelector('#notifyUrl').value = f.notifyUrl
                document.querySelector('#sign').value = f.sign
                document.querySelector('#signType').value = f.signType
                document.querySelector('#timestamp').value = f.timestamp
                document.querySelector('#version').value = f.version
                document.querySelector('#onSubmit').submit()
            // } else if(result.type == "UNIONPAY") {
            //     localStorage.setItem('payInfo', JSON.stringify(result))
            //     this.$router.push({
            //         path: '/alipay',
            //         query: {
            //             balance: result.totalPrice
            //         }
            //     })
            // }
        },
        onMore(item) {
            this.popupContent = item.detail
            this.popupShow = true
        }
    }
}
</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;
    }
    
}
.activeList {
    padding: 0 .16rem;
    margin-top: -.6rem;
    position: relative;
    z-index: 99;
    .active {
        position: relative;
        margin-bottom: .15rem;
        line-height: 0;
        // box-shadow:0px 0px 16px 0px rgba(155,145,41,0.19);
    }
    img {
        width: 100%;
    }
    .icon_question {
        position: absolute;
        bottom: .1rem;
        right: .1rem;
        color: #fff;
        font-size: .18rem;
    }
}
.popupContent {
    padding: .4rem .16rem .1rem;
}
.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>