mteacher/src/components/MProtocol.vue

<template>
    <div class="mProtocol" id="mProtocol">
        <m-header  :backUrl="backUrlProtocol" name="协议信息" />
        <div v-html="protocolHTML" style="margin-bottom: 1rem;"></div>
        <div class="btn-style">
            <van-button v-if="!tenantId" class="protocol-btn" @click="onPopupSure" type="info">确认</van-button>
            <van-button v-else class="protocol-btn" round :disabled="disabled" @click="onPopupSure" type="info">
                {{ disabled ? '请认真阅读协议内容' : '我已完全阅读并同意协议内容' }}
                <van-count-down
                    ref="countDown"
                    v-show="disabled"
                    :time="6000"
                    style="font-size: .18rem;display: inline-block;color: #fff;"
                    format="ss"
                    @finish="finish"
                />
            </van-button>
        </div>
    </div>
</template>

<script>
import MHeader from '@/components/MHeader'
// import { browser }  from '@/common/util'
export default {
    name: 'mProtocol',
    components: { MHeader },
    props: {
        protocolHTML: String,
        tenantId: {
            type: [String, Number]
        },
        checked: Boolean,
        popupStatus: Boolean
    },
    data() {
        let that = this
        return {
            disabled: true, // 按钮是否禁用
            headerStatus: false,
            // protocolHTML: null,
            backUrlProtocol: {
                callBack() {
                    that.callBack()
                }
            }
        }
    },
    mounted() {
        // if(!browser().android && !browser().iPhone) {
        //     this.headerStatus = true
        // }
        if(this.checked) { // 默认选中时
            this.disabled = false
        }
    },
    methods: {
        finish() {
            this.disabled = false
        },
        onPopupSure() {
            document.querySelector('#mProtocol').scrollTop = 0
            // 协议确定
            this.$emit('onPopupSure')
        },
        callBack() {
            document.querySelector('#mProtocol').scrollTop = 0
            this.$emit('onClose')
        }
    },
    watch: {
        popupStatus(newValue) {
            if(newValue && !this.checked) {
                this.disabled = true
                this.$refs.countDown.reset();
                this.$refs.countDown.start();
            } else {
                this.disabled = false
            }
        }
    }
}
</script>

<style lang="less">
.protocol-btn {
    // margin: 0.35rem 0;
    background: #01C1B5;
    color: #fff;
    font-size: 0.18rem;
    border-radius: 0.5rem;
    text-align: center;
    width: 100%;
}
.btn-style {
    padding: 0.15rem 4% .2rem;
    position: fixed;
    z-index: 99;
    bottom: 0;
    left: 0;
    width: 92%;
    background: #fff;
}
</style>