tf-business/components/modal/modal.vue

<template>
    <view class="modal">
    <tui-modal :show="showModal" custom padding="0rpx" width="546rpx" @cancel="closeModal">
        <view class="modal-container">
            <view class="close-modal">
                <tui-icon name="shut" color="#999999" @click="closeModal"></tui-icon>
            </view>
            <view class="modal-title">温馨提示</view>
            <view class="modal-prompt">
                <span v-for="item in promptList" :key="item">{{ item }}</span>
            </view>
            <view class="modal-btn" v-if="showBtn">
                <button @click="closeModal">取消</button>
                <button @click="btnClick">{{ showText }}</button>
            </view>
        </view>
    </tui-modal>
</view>
</template>

<script>
export default {
    props: {
        showModal: {
            type: Boolean,
            default: false
        },
        promptList:{
            type: Array,
            default: () => {
                return []
            }
        },
        showBtn: {
            type: Boolean,
            default: false
        },
        showText:{
            type:String,
            default:'注册开店'
        }
    },
    data() {
        return {
        };
    },
    methods: {
        closeModal(){
            this.$emit('closeModal')
        },
        btnClick(){
            this.$emit('btnClick')
        }
    },
};
</script>

<style lang="scss" scoped>
    .modal-container{
    position: relative;
    padding: 44rpx 0 32rpx;
    .close-modal{
        position: absolute;
        top: 25rpx;
        right: 25rpx;
    }
    .modal-title{
        font-size: 36rpx;
        color: #3D3D3D;
        text-align: center;
        margin-bottom:34rpx;
    }
    .modal-prompt{
        @include flex(center, column);
        font-size: 28rpx;
        color: #666666;
    }
    .modal-btn{
        margin-top: 24rpx;
        padding: 0 58rpx;
        box-sizing: border-box;
        @include flex(space-between);
        button{
            width: 190rpx;
            height: 76rpx;
            font-size: 28rpx;
            text-align: center;
            line-height: 76rpx;
            border-radius: 16rpx;
            margin: 0;
            &:first-of-type{
                border: 1rpx solid #999999;
                color: #999999;
                background-color:#FFFFFF; 
            }
            &:last-of-type{
                color: #FFFFFF;
                background-color: $primary-color;
            }
        }
    }
}
</style>