182 lines
3.6 KiB
Vue
182 lines
3.6 KiB
Vue
<template>
|
|
<uni-popup ref="popup" type="center" :mask-click="false">
|
|
<view class="confirm-popup" :class="{ 'confirm-popup--elder': elderMode }">
|
|
<view class="confirm-title" :class="{ 'confirm-title--elder': elderMode }">{{ title }}</view>
|
|
<view class="confirm-content" :class="{ 'confirm-content--elder': elderMode }">{{ content }}</view>
|
|
<view class="confirm-footer" :class="{ 'confirm-footer--elder': elderMode }">
|
|
<view v-if="showCancel" class="confirm-btn cancel-btn" :class="{ 'confirm-btn--elder': elderMode }"
|
|
@click="handleCancel">{{ cancelText }}</view>
|
|
<view class="confirm-btn confirm-btn-active" :class="{ 'confirm-btn--elder': elderMode }"
|
|
@click="handleConfirm">{{ confirmText }}</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, onMounted, onUnmounted } from 'vue';
|
|
|
|
const emits = defineEmits(['confirm', 'cancel', 'close'])
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '提示'
|
|
},
|
|
content: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
cancelText: {
|
|
type: String,
|
|
default: '取消'
|
|
},
|
|
confirmText: {
|
|
type: String,
|
|
default: '确定'
|
|
},
|
|
showCancel: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const popup = ref()
|
|
const elderMode = ref(false)
|
|
|
|
// 处理长辈模式变化
|
|
const handleElderModeChange = () => {
|
|
try {
|
|
const storedElderMode = uni.getStorageSync('elderMode');
|
|
elderMode.value = storedElderMode === 'true' || storedElderMode === true;
|
|
} catch (error) {
|
|
console.error('获取长辈模式状态失败:', error);
|
|
elderMode.value = false;
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
handleElderModeChange();
|
|
uni.$on('elderModeChanged', handleElderModeChange);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
uni.$off('elderModeChanged', handleElderModeChange);
|
|
});
|
|
|
|
function handleConfirm() {
|
|
close()
|
|
setTimeout(() => {
|
|
emits('confirm')
|
|
}, 500)
|
|
}
|
|
|
|
function handleCancel() {
|
|
emits('cancel')
|
|
close()
|
|
}
|
|
|
|
function close() {
|
|
if (popup.value) {
|
|
popup.value.close()
|
|
}
|
|
emits('close')
|
|
}
|
|
|
|
watch(() => props.visible, n => {
|
|
if (n) {
|
|
popup.value && popup.value.open()
|
|
} else {
|
|
popup.value && popup.value.close()
|
|
}
|
|
}, { immediate: false })
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.confirm-popup {
|
|
width: 690rpx;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 40rpx 30rpx 30rpx;
|
|
box-sizing: border-box;
|
|
|
|
&--elder {
|
|
width: 690rpx;
|
|
border-radius: 20rpx;
|
|
padding: 50rpx 40rpx 40rpx;
|
|
}
|
|
}
|
|
|
|
.confirm-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
text-align: center;
|
|
margin-bottom: 24rpx;
|
|
|
|
&--elder {
|
|
font-size: 42rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
}
|
|
|
|
.confirm-content {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
text-align: center;
|
|
margin-bottom: 32rpx;
|
|
|
|
&--elder {
|
|
font-size: 36rpx;
|
|
line-height: 1.8;
|
|
margin-bottom: 40rpx;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.confirm-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 20rpx;
|
|
|
|
&--elder {
|
|
gap: 24rpx;
|
|
}
|
|
}
|
|
|
|
.confirm-btn {
|
|
flex: 1;
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
border-radius: 16rpx;
|
|
font-weight: 500;
|
|
|
|
&--elder {
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
font-size: 36rpx;
|
|
border-radius: 20rpx;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.cancel-btn {
|
|
color: $theme-brown-secondary;
|
|
border: 1px solid $theme-brown-border;
|
|
background: transparent;
|
|
}
|
|
|
|
.confirm-btn-active {
|
|
color: white;
|
|
background: $theme-brown-primary;
|
|
border: none;
|
|
box-shadow: 0 4rpx 12rpx rgba(139, 101, 56, 0.3);
|
|
}
|
|
</style>
|