zx_flk_app/component/comPopup/Notice.vue

<template>
    <u-popup v-model="showDialog" mode="bottom" border-radius="28" @close="close">
        <view class="dialog-content">
            <image :src="QINIU_URL + 'Fqb-i2uJWlZOg8EvUXHr_1qhlndf'" class="icon"/>
            <view class="title">{{ title }}</view>
            <view class="tips">
                <rich-text :nodes="text"></rich-text>
            </view>
            <view class="btn" @tap="close">{{ btnText }}</view>
        </view>
    </u-popup>
</template>

<script>
import { QINIU_URL } from '@/common/constant'
export default {
    props: {
        value: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ''
        },
        text: {
            type: String,
            default: ''
        },
        btnText: {
            type: String,
            default: '确定'
        }
    },
    data() {
        return {
            QINIU_URL,
            showDialog: this.value
        }
    },
    watch: {
        value(newValue) {
            this.showDialog = newValue
        }
    },
    methods: {
        close() {
            this.$emit('input', false)
        }
    }
}
</script>

<style lang="scss" scoped>
.dialog-content {
    width: 100%;
    height: 100%;
    background: #F1F3F4;
    padding: 64rpx 32rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon {
        width: 88rpx;
        height: 88rpx;
    }
    .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 40rpx;
        color: #060809;
        margin: 32rpx 0 24rpx;
    }
    .tips {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #8B939C;
        line-height: 42rpx;
        text-align: center;
        padding: 0 80rpx;
    } 
    .btn {
        margin-top: 68rpx;
        width: 100%;
        height: 80rpx;
        background: #060809;
        border-radius: 40rpx;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        &:active {
            opacity: 0.8;
        }
    }
}
</style></style>