124 lines
2.5 KiB
Vue
124 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<NormalPopupView
|
||
|
|
v-if="visible"
|
||
|
|
:zIndex="9999"
|
||
|
|
@close="hide"
|
||
|
|
>
|
||
|
|
<view class="tips-popup-content">
|
||
|
|
<view class="title" :style="{ color: themeStore.theme.text.normal }">
|
||
|
|
{{ title || $t('app.popup.tips') }}
|
||
|
|
</view>
|
||
|
|
<view class="text" :style="{ color: themeStore.theme.text.normal }">
|
||
|
|
{{ text }}
|
||
|
|
</view>
|
||
|
|
<view class="flex-acenter plr24">
|
||
|
|
<view v-if="showCancel" class="confirm-button" :style="{ 'background': themeStore.theme.button.cancel , 'color': themeStore.theme.button.textNormal}" @click.stop="handleCancelClick">
|
||
|
|
<view>
|
||
|
|
{{ cancelText || $t('app.popup.cancel') }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="showConfirm" class="confirm-button" :style="{ 'background': themeStore.theme.button.normal , 'color': themeStore.theme.button.textNormal}" @click.stop="handleConfirmClick">
|
||
|
|
<view>
|
||
|
|
{{ confirmText || $t('app.popup.confirm') }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</NormalPopupView>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref } from 'vue';
|
||
|
|
import NormalPopupView from './NormalPopupView.vue'
|
||
|
|
import { useThemeStore } from '@/store/useThemeStore'
|
||
|
|
import { useI18n } from 'vue-i18n'
|
||
|
|
|
||
|
|
const { t } = useI18n()
|
||
|
|
const themeStore = useThemeStore()
|
||
|
|
|
||
|
|
const visible = ref(false)
|
||
|
|
const emit = defineEmits(['confirm'])
|
||
|
|
const props = defineProps({
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
text: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
showConfirm: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
confirmText: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
showCancel: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
confirmText: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const show = () => {
|
||
|
|
visible.value = true
|
||
|
|
}
|
||
|
|
|
||
|
|
const hide = () => {
|
||
|
|
visible.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleCancelClick = () => {
|
||
|
|
hide()
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleConfirmClick = () => {
|
||
|
|
emit('confirm')
|
||
|
|
hide()
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
show,
|
||
|
|
hide
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.tips-popup-content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 38rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
margin-top: 50rpx;
|
||
|
|
font-size: 30rpx;
|
||
|
|
max-height: 300rpx;
|
||
|
|
overflow-y: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
.confirm-button {
|
||
|
|
margin: 0rpx 10rpx;
|
||
|
|
flex: 1;
|
||
|
|
margin-top: 50rpx;
|
||
|
|
min-width: 300rpx;
|
||
|
|
max-width: 500rpx;
|
||
|
|
height: 90rpx;
|
||
|
|
border-radius: 45rpx;
|
||
|
|
font-size: 32rpx;
|
||
|
|
padding: 0 30rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|