149 lines
3.7 KiB
Vue
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>
|