ks-app-employment-service/components/MsgTips/MsgTips.vue

<template>
    <uni-popup
        ref="popup"
        type="center"
        borderRadius="10px 10px 10px 10px"
        background-color="#F6F6F6"
        :mask-click="maskClick"
    >
        <view class="popup-content">
            <view class="text-h2">
                <image v-if="icon" class="text-h2-icon" :src="icon"></image>
                {{ title }}
            </view>
            <text class="text-content button-click">{{ content }}</text>
            <template v-if="showButton">
                <button class="popup-button button-click" v-if="isTip" @click="close">{{ buttonText }}</button>
                <view v-else class="confirm-btns">
                    <button class="popup-button button-click" @click="close">{{ cancelText }}</button>
                    <button class="popup-button button-click" @click="confirm">{{ confirmText }}</button>
                </view>
            </template>
        </view>
    </uni-popup>
</template>

<script>
export default {
    name: 'MsgTips',
    props: {
        icon: {
            type: String,
            default: '', // 如：'/static/success.png'
        },
        title: {
            type: String,
            default: '提示',
        },
        content: {
            type: String,
            default: '这是提示内容',
        },
        buttonText: {
            type: String,
            default: '我知道了',
        },
        cancelText: {
            type: String,
            default: '取消',
        },
        confirmText: {
            type: String,
            default: '保存并退出',
        },
        showButton: {
            type: Boolean,
            default: true,
        },
        maskClosable: {
            type: Boolean,
            default: true,
        },
        isTip: {
            type: Boolean,
            default: true,
        },
        maskClick: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {};
    },
    // mounted() {
    //     this.$refs.popup.open('center');
    // },
    methods: {
        open() {
            this.$refs.popup.open('center');
        },
        close() {
            this.$refs.popup.close('center');
        },
        confirm() {},
    },
};
</script>

<style lang="scss" scoped>
.popup-content {
    display: flex;
    padding: 40rpx;
    flex-direction: column;
    justify-content: space-between;
    width: calc(630rpx - 80rpx);
    .text-h2 {
        font-weight: 500;
        font-size: 36rpx;
        color: #333333;
        line-height: 42rpx;
        display: flex;
        align-items: center;
    }
    .text-h2-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 12rpx;
    }
    .text-content {
        margin-top: 12rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #6c7282;
        line-height: 33rpx;
        text-align: justified;
    }
    .popup-button {
        background-color: #256bfa;
        color: white;
        border-radius: 30px;
        text-align: center;
        height: 90rpx;
        line-height: 90rpx;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        margin-top: 48rpx;
        width: 100%;
    }
    .confirm-btns {
        display: flex;
        .popup-button {
            width: 260rpx;
        }
        .popup-button:first-child {
            background-color: #e8eaee;
            margin-right: 30rpx;
            color: #333333;
        }
    }
}

// 重置button样式
button {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font-size: inherit;
    line-height: inherit;
}

button::after {
    border: none;
}
</style>