football/components/basic-component/app-report-error/app-report-error.vue

<template>
    <view class="app-view">
        <view class="app-spring-board dir-top-nowrap main-justify-between">
            <view class="app-text">
                <view class="app-title">网络错误</view>
                <view class="app-content">{{content}}</view>
            </view>
            <view class="app-buttons dir-left-nowrap ">
                <app-form-button @handleClick="copyText" class="app-button">复制错误</app-form-button>
                <app-form-button @handleClick="refreshPage" class="app-button button-border" color="#7e8dae">刷新页面</app-form-button>
            </view>
        </view>
    </view>
</template>

<script>
    import appFormButton from '../app-form-id/app-form-id.vue';

    export default {
        name: 'app-prompt-dialog',
        components: {
            "app-form-button": appFormButton,
        },
        props: {
            content: String,
        },
        computed: {},
        methods: {
            handleClick(boolean) {
                this.$emit('toastModelClick', boolean);
            },
            copyText() {
                this.$store.dispatch('gConfig/reportAndErrorB', false);
                // #ifndef MP-ALIPAY
                uni.setClipboardData({
                    data: this.content,
                    success: function(res) {
                        console.log(res);
                    }
                });
                // #endif
                // #ifdef MP-ALIPAY
                my.setClipboard({
                    text: this.content, // 剪贴板数据
                    success: (res) => {
                        console.log(res);
                    },
                });
                // #endif
            },
            refreshPage() {
                this.$store.dispatch('gConfig/reportAndErrorB', false);
            }
        }
    }
</script>

<style scoped lang="scss">
    .app-view {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0, .3);
        position: absolute;
        z-index: 1501;
        top: 0;
    }
    .app-spring-board {
        background-color: #ffffff;
        width: 80%;
        min-height: 20%;
        position: absolute;
        border-radius: #{10rpx};
        box-shadow: 0 0 #{2rpx} #000000;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -90%);
    }
    .app-buttons {
        width:100%;
        height: #{100rpx};
        border: #{1rpx} solid #dddddd;
    }
    .app-button {
        width: 50%;
    }
    .button-border {
        border-left: #{1rpx} solid #dddddd;
        color: blue;
    }
    .app-button /deep/ form {
        display: block;
        width: 100%;
        height: 100%;
    }
    .app-button /deep/ button {
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: #{100rpx};
        background-color: #ffffff;
    }
    .app-title {
        font-weight: bold;
        font-size: #{39rpx};
        text-align: center;
        height: #{70rpx};
        line-height:  #{70rpx};
        margin-top: #{30rpx};
    }
    .app-content {
        padding-left: #{20rpx};
        padding-right: #{20rpx};
        text-align: center;
        margin-bottom: #{30rpx};
        font-size: #{38rpx};
    }
</style>