Client-Teapay/src/pagesB/components/centerPopup/centerPopup.vue

<template>
    <view :class="ani?'center-container':'center-container center-container2'" v-show="isShow" catchtouchmove>
        <view class="centerPopup" @touchmove.prevent>
            <view class="title" :style="{fontSize:fontSize}">{{title}}</view>
            <view class="subTitle">{{subTitle?subTitle:''}}</view>
            <view class="xzwButton">
                <view class="cancelButton" @click="leftClick" :style="{border:'1upx solid'+useColor,color:useColor,backgroundColor:'#fff'}">{{leftText}}</view>
                <view class="confirmButton" @click="rightClick" :style="{color:'#fff',backgroundColor:useColor}">{{rightText}}</view>
            </view>
        </view>
        <view class="mask" @click="close" v-show="isShow" @touchmove.prevent></view>
    </view>
</template>
<script>
export default {
    props: {
        title: '', //标题
        subTitle: '', // 小标题
        leftText: { // 左侧文字
            type: String,
            default: '取消'
        },
        rightText: { // 右侧文字
            type: String,
            default: '确定'
        },
        color: { //弹窗颜色
            type: String,
            default: ''
        },
        default: { //左侧按钮是否默认点击
            type: Boolean,
            default: true
        },
        fontSize: { //字体大小
            type: String,
            default: '32upx'
        }
    },
    data() {
        return {
            isShow: false,
            ani: false,
            useColor: '#f00'
        }
    },
    methods: {
        leftClick() {
            if (this.default) {
                this.close()
            } else {
                this.$emit("leftClick")
            }
        },
        open() {
            this.$nextTick(function() {
                this.ani = true
                this.isShow = true
                if (this.color) {
                    this.useColor = this.color
                } else {
                    this.useColor = '#f00'
                }
                console.log(this.useColor)
            })

        },
        close() {
            this.ani = false
            // #ifndef MP-WEIXIN
            setTimeout(() => {
                this.isShow = false
            }, 180)
            // #endif
            // #ifdef MP-WEIXIN
            this.isShow = false
            // #endif
        },
        rightClick() {
            this.$emit('confirmClick')
        }
    }
}
</script>
<style lang="scss">
@keyframes in {
    0% {
        opacity: 0;
        transform: scale(1.1, 1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1, 1);
    }
}

@keyframes out {
    0% {
        opacity: 1;
        transform: scale(1, 1);
    }

    100% {
        opacity: 0;
        transform: scale(1.2, 1.2);
    }
}

.center-container {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    animation: in 0.2s ease-in;

    .centerPopup {
        z-index: 1000;
        width: 586upx;
        background-color: #fff;
        border-radius: 20upx;
        position: absolute;
        left: 50%;
        top: 48%;
        transform: translate(-50%, -50%);

        .title {
            font-weight: bold;
            text-align: center;
            font-size: 32upx;
            padding: 74upx 20upx 20upx;
        }

        .subTitle {
            text-align: center;
            font-size: 24upx;
            padding: 0 20upx 20upx 20upx;
        }

        .xzwButton {
            display: flex;
            justify-content: space-between;
            padding: 20upx 70upx 54upx;

            view {
                width: 216upx;
                height: 60upx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 44upx;
                font-size: 28upx;
                box-sizing: border-box;
            }
        }
    }

    .mask {
        z-index: 100;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #000;
        opacity: 0.4;
    }
}

.center-container2 {
    animation: out 0.2s ease-in;
}
</style>