完善6170报警功能，图片压缩大小
This commit is contained in:
fengerli
@ -1,20 +1,89 @@
|
||||
<template>
|
||||
<view class="agreement-mask" v-if="show" @click="closePopup">
|
||||
<view class="agreement-popup" @click.stop>
|
||||
<view class="agreement-mask" v-if="show" @click.stop="closePopup">
|
||||
<!-- 弹窗主体：支持自定义边框、背景 -->
|
||||
<view
|
||||
class="agreement-popup"
|
||||
@click.stop
|
||||
:style="{
|
||||
border: popupBorder,
|
||||
backgroundColor: popupBg,
|
||||
borderRadius: popupRadius
|
||||
}"
|
||||
:class="popupClass"
|
||||
>
|
||||
<view class="popup-content">
|
||||
<!-- 动态图标 -->
|
||||
<image v-if="showIcon && icon" :src="icon" mode="aspectFit" class="svg"></image>
|
||||
<!-- 动态图标：支持自定义大小、边距 -->
|
||||
<image
|
||||
v-if="showIcon && icon"
|
||||
:src="icon"
|
||||
mode="aspectFit"
|
||||
class="svg"
|
||||
:style="iconStyle"
|
||||
></image>
|
||||
|
||||
<view class="text-content">
|
||||
<!-- 动态标题 -->
|
||||
<view class="popup-Title" v-if="title">{{ title }}</view>
|
||||
<!-- 动态消息内容 -->
|
||||
<view class="popup-Message" v-if="message">{{ message }}</view>
|
||||
<!-- 动态标题：支持自定义颜色、字体大小 -->
|
||||
<view
|
||||
class="popup-Title"
|
||||
v-if="title"
|
||||
:style="{
|
||||
color: titleColor,
|
||||
fontSize: titleSize,
|
||||
padding: titlePadding
|
||||
}"
|
||||
>
|
||||
{{ title }}
|
||||
</view>
|
||||
|
||||
<!-- 动态消息内容：支持自定义颜色、换行、字体大小 -->
|
||||
<view
|
||||
class="popup-Message"
|
||||
v-if="message"
|
||||
:style="{
|
||||
color: messageColor,
|
||||
fontSize: messageSize,
|
||||
whiteSpace: messageWrap ? 'normal' : 'nowrap',
|
||||
padding: messagePadding
|
||||
}"
|
||||
>
|
||||
{{ message }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 按钮组 -->
|
||||
<view class="popup-buttons">
|
||||
<button v-if="showCancel" class="btn cancelBtn" @click="handleCancel">{{ cancelText }}</button>
|
||||
<button class="btn agreeBtn" @click="handleConfirm">{{ confirmText }}</button>
|
||||
|
||||
<!-- 按钮组：支持自定义按钮样式 -->
|
||||
<view class="popup-buttons" :style="{ marginTop: buttonGroupMargin }">
|
||||
<button
|
||||
v-if="showCancel"
|
||||
class="btn cancelBtn"
|
||||
@click="handleCancel"
|
||||
:style="{
|
||||
border: cancelBtnBorder,
|
||||
color: cancelBtnColor,
|
||||
backgroundColor: cancelBtnBg,
|
||||
fontSize: cancelBtnSize,
|
||||
borderRadius: buttonRadius,
|
||||
margin: buttonMargin
|
||||
}"
|
||||
:class="cancelBtnClass"
|
||||
>
|
||||
{{ cancelText }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn agreeBtn"
|
||||
@click="handleConfirm"
|
||||
:style="{
|
||||
backgroundColor: confirmBtnBg,
|
||||
color: confirmBtnColor,
|
||||
fontSize: confirmBtnSize,
|
||||
borderRadius: buttonRadius,
|
||||
margin: buttonMargin
|
||||
}"
|
||||
:class="confirmBtnClass"
|
||||
>
|
||||
{{ confirmText }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -22,55 +91,155 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CustomPopup',
|
||||
props: {
|
||||
// 控制显示
|
||||
// 基础控制
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 标题内容（可选）
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 消息内容
|
||||
message: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 确认按钮文本
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确定'
|
||||
},
|
||||
// 取消按钮文本
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
},
|
||||
// 是否显示取消按钮
|
||||
showCancel: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示图标
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 图标路径（支持网络和本地路径）
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 图标样式
|
||||
// 文本换行控制
|
||||
messageWrap: {
|
||||
type: Boolean,
|
||||
default: false // 默认不换行，true则自动换行
|
||||
},
|
||||
|
||||
// 弹窗样式自定义
|
||||
popupBorder: {
|
||||
type: String,
|
||||
default: '1px solid rgba(187, 230, 0, 0.3)'
|
||||
},
|
||||
popupBg: {
|
||||
type: String,
|
||||
default: 'rgb(42, 42, 42)'
|
||||
},
|
||||
popupRadius: {
|
||||
type: String,
|
||||
default: '40rpx'
|
||||
},
|
||||
popupClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
// 标题样式自定义
|
||||
titleColor: {
|
||||
type: String,
|
||||
default: 'rgba(255, 255, 255, 0.86)'
|
||||
},
|
||||
titleSize: {
|
||||
type: String,
|
||||
default: '32rpx'
|
||||
},
|
||||
titlePadding: {
|
||||
type: String,
|
||||
default: '30rpx 0 10rpx'
|
||||
},
|
||||
|
||||
// 消息样式自定义
|
||||
messageColor: {
|
||||
type: String,
|
||||
default: 'rgba(255, 255, 255, 0.7)'
|
||||
},
|
||||
messageSize: {
|
||||
type: String,
|
||||
default: '28rpx'
|
||||
},
|
||||
messagePadding: {
|
||||
type: String,
|
||||
default: '10rpx 20rpx 30rpx'
|
||||
},
|
||||
|
||||
// 图标样式自定义
|
||||
iconStyle: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
width: '58rpx',
|
||||
height: '62rpx',
|
||||
width: '72rpx',
|
||||
height: '60rpx',
|
||||
marginBottom: '20rpx'
|
||||
})
|
||||
},
|
||||
|
||||
// 按钮组样式
|
||||
buttonGroupMargin: {
|
||||
type: String,
|
||||
default: '20rpx'
|
||||
},
|
||||
buttonRadius: {
|
||||
type: String,
|
||||
default: '40rpx'
|
||||
},
|
||||
buttonMargin: {
|
||||
type: String,
|
||||
default: '0 10rpx'
|
||||
},
|
||||
|
||||
// 确认按钮样式
|
||||
confirmBtnBg: {
|
||||
type: String,
|
||||
default: 'rgba(187, 230, 0, 1)'
|
||||
},
|
||||
confirmBtnColor: {
|
||||
type: String,
|
||||
default: '#232323'
|
||||
},
|
||||
confirmBtnSize: {
|
||||
type: String,
|
||||
default: '24rpx'
|
||||
},
|
||||
confirmBtnClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
// 取消按钮样式
|
||||
cancelBtnBorder: {
|
||||
type: String,
|
||||
default: '1px solid rgba(255, 255, 255, 0.3)'
|
||||
},
|
||||
cancelBtnColor: {
|
||||
type: String,
|
||||
default: 'rgba(255, 255, 255, 0.7)'
|
||||
},
|
||||
cancelBtnBg: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
cancelBtnSize: {
|
||||
type: String,
|
||||
default: '24rpx'
|
||||
},
|
||||
cancelBtnClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -91,30 +260,28 @@
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 遮罩层 */
|
||||
/* 遮罩层：全屏覆盖 */
|
||||
.agreement-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgba(0, 0, 0, 1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* 弹窗主体 */
|
||||
/* 弹窗主体：基础样式 */
|
||||
.agreement-popup {
|
||||
width: 66%;
|
||||
background: rgba(56, 57, 52, 0.4);
|
||||
border-radius: 40rpx;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(187, 230, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 内容区域布局 */
|
||||
.popup-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -125,59 +292,22 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popup-Title {
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
text-align: center;
|
||||
padding: 30rpx 0 10rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.popup-Message {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-align: center;
|
||||
padding: 10rpx 20rpx 30rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 图标样式 */
|
||||
.svg {
|
||||
width: 72rpx;
|
||||
height: 60rpx;
|
||||
margin-bottom: v-bind('iconStyle.marginBottom');
|
||||
}
|
||||
|
||||
/* 按钮组 */
|
||||
/* 按钮基础样式（不包含可变样式） */
|
||||
.popup-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
/* 按钮基础样式 */
|
||||
.btn {
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 24rpx;
|
||||
margin: 0 10rpx;
|
||||
padding: 0 30rpx;
|
||||
min-width: 170rpx;
|
||||
}
|
||||
|
||||
/* 确认按钮 */
|
||||
.agreeBtn {
|
||||
background: rgba(187, 230, 0, 1);
|
||||
color: #232323;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 取消按钮 */
|
||||
.cancelBtn {
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
/* 解决按钮默认样式冲突 */
|
||||
.btn::after {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user