2025-07-11 17:43:34 +08:00

149 lines
3.7 KiB
Vue

<template>
<view class="tip_popup">
<uni-popup ref="popupRef" :is-mask-click="false" animation type="center">
<view class="popup_box">
<view class="container">
<image
v-if="showSuccessIcon"
:src="
type === 'success'
? `${OSS_URL}/iconfont/success_icon.png`
: `${OSS_URL}/iconfont/fail_icon.png`
"
class="icon"
mode=""
></image>
<view :class="[type === 'success' ? 'success' : 'fail']"> {{ text }} </view>
<view v-if="messageTip" class="message_tip" v-html="messageTip"></view>
</view>
<view v-if="showBtn" class="btn" @tap="tapBack">
{{ btnText }}
</view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import { computed, nextTick, ref, watch } from 'vue';
const props = defineProps({
modelValue: {
type: Boolean,
default: false,
},
// 类型:success,fail
type: {
type: String,
default: 'success',
},
// 是否展示成功图标
showSuccessIcon: {
type: Boolean,
default: true,
},
// 是否展示按钮
showBtn: {
type: Boolean,
default: false,
},
// 按钮文案
btnText: {
type: String,
default: '返回',
},
text: {
type: String,
default: '加入成功',
},
messageTip: {
type: String,
default: '',
},
});
const emits = defineEmits(['update:modelValue', 'backBtn']);
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const popupRef = ref(null);
// 点击
function tapBack() {
popupRef.value.close();
emits('update:modelValue', false);
emits('backBtn');
}
watch(
() => props.modelValue,
() => {
if (props.modelValue) {
nextTick(() => {
popupRef.value.open();
if (!props.showBtn) {
setTimeout(() => {
popupRef.value.close();
emits('update:modelValue', false);
}, 1500);
}
});
}
},
{
immediate: true,
deep: true,
},
);
</script>
<style lang="scss" scoped>
.tip_popup {
.popup_box {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 594rpx;
height: 346rpx;
background-color: #fff;
border-radius: 20rpx;
text-align: center;
.container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.icon {
width: 60rpx;
height: 60rpx;
}
.success {
margin-top: 30rpx;
color: #21d17a;
font-size: 34rpx;
font-weight: 600;
}
.fail {
margin-top: 30rpx;
font-size: 34rpx;
font-weight: 600;
color: #ff2828;
}
.message_tip {
margin-top: 20rpx;
font-size: 30rpx;
color: #333;
}
}
.btn {
width: 100%;
height: 108rpx;
line-height: 108rpx;
border-top: 1px solid #eeeeee;
color: #333333;
font-size: 34rpx;
}
}
}
</style>