封装提示弹框

2025-07-24 10:05:17 +08:00
parent c0a9c0b3f2
commit 51ab4d0bfa
9 changed files with 307 additions and 144 deletions
--- a/components/CustomPopup/CustomPopup.vue
+++ b/components/CustomPopup/CustomPopup.vue
@ -0,0 +1,182 @@
+<template>
+  <view class="agreement-mask" v-if="show" @click="closePopup">
+    <view class="agreement-popup" @click.stop>
+      <view class="popup-content">
+        <!-- 动态图标 -->
+        <image v-if="showIcon && icon" :src="icon" mode="aspectFit" class="svg"></image>
+        <view class="text-content">
+          <!-- 动态标题 -->
+          <view class="popup-Title" v-if="title">{{ title }}</view>
+          <!-- 动态消息内容 -->
+          <view class="popup-Message" v-if="message">{{ 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>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  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: ''
+    },
+    // 图标样式
+    iconStyle: {
+      type: Object,
+      default: () => ({
+        width: '58rpx',
+        height: '62rpx',
+        marginBottom: '20rpx'
+      })
+    }
+  },
+  methods: {
+    handleConfirm() {
+      this.$emit('confirm')
+      this.$emit('update:show', false)
+    },
+    handleCancel() {
+      this.$emit('cancel')
+      this.$emit('update:show', false)
+    },
+    closePopup() {
+      this.$emit('close')
+      this.$emit('update:show', false)
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 遮罩层 */
+.agreement-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+/* 弹窗主体 */
+.agreement-popup {
+  width: 60%;
+  background-color: rgb(42, 42, 42);
+  border-radius: 40rpx;
+  padding: 30rpx;
+  text-align: center;
+  border: 1px solid rgba(255, 200, 78, 0.3);
+}
+
+.popup-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.text-content {
+  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;
+}
+
+/* 图标样式 */
+.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);
+}
+</style>