uniapp-dyckui 4.1.5 → 4.1.7

package/src/components/MyComs/Dialog/index.vue

@@ -1,275 +1,335 @@
-<template>
-  <view v-if="showDialog" class="dialog-wrapper" @click="handleMaskClick">
-    <view class="dialog-container" @click.stop>
-      <!-- 上部分内容 -->
-      <view class="dialog-content">
-        <view class="dialog-icon">
-          <image v-if="icon" :src="icon" alt="dialog-icon" />
-          <!-- 默认图标 -->
-          <view v-else class="default-icon" />
-        </view>
-        <text class="dialog-title">{{ title }}</text>
-        <text class="dialog-description">{{ description }}</text>
-      </view>
-
-      <!-- 分割线 -->
-      <view class="dialog-divider" />
-
-      <!-- 下部分按钮 -->
-      <view class="dialog-buttons">
-        <!-- 类型1: 取消和打开app -->
-        <template v-if="type === 'open-app'">
-          <view class="dialog-button dialog-button-cancel" @click="handleCancel">
-            取消
-          </view>
-          <view class="dialog-button dialog-button-primary" @click="handleConfirm">
-            打开app
-          </view>
-        </template>
-
-        <!-- 类型2: 知道了 -->
-        <template v-else-if="type === 'confirm'">
-          <view class="dialog-button dialog-button-full dialog-button-primary" @click="handleConfirm">
-            知道了
-          </view>
-        </template>
-
-        <!-- 类型3: 取消和继续访问 -->
-        <template v-else-if="type === 'continue'">
-          <view class="dialog-button dialog-button-cancel" @click="handleCancel">
-            取消
-          </view>
-          <view class="dialog-button dialog-button-primary" @click="handleConfirm">
-            继续访问
-          </view>
-        </template>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-
-// 弹窗类型定义
-type DialogType = 'open-app' | 'confirm' | 'continue'
-
-// Props定义
-interface Props {
-  // 控制弹窗显示/隐藏（支持v-model）
-  modelValue: boolean
-  // 弹窗类型
-  type?: DialogType
-  // 弹窗标题
-  title?: string
-  // 弹窗说明文字
-  description?: string
-  // 图标路径
-  icon?: string
-  // 是否显示遮罩层
-  mask?: boolean
-  // 遮罩层透明度
-  maskOpacity?: number
-  // 点击遮罩是否关闭弹窗
-  closeOnMaskClick?: boolean
-}
-
-// Props默认值
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: false,
-  type: 'confirm',
-  title: '',
-  description: '',
-  icon: '',
-  mask: true,
-  maskOpacity: 0.5,
-  closeOnMaskClick: true,
-})
-
-// Emits定义
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
-  (e: 'confirm'): void
-  (e: 'cancel'): void
-}>()
-
-// 本地状态
-const showDialog = ref(props.modelValue)
-
-// 监听modelValue变化
-watch(() => props.modelValue, (newVal) => {
-  showDialog.value = newVal
-})
-
-// 监听showDialog变化
-watch(() => showDialog.value, (newVal) => {
-  emit('update:modelValue', newVal)
-})
-
-// 点击遮罩层
-function handleMaskClick() {
-  if (props.closeOnMaskClick) {
-    showDialog.value = false
-  }
-}
-
-// 点击确认按钮
-function handleConfirm() {
-  emit('confirm')
-  // 确认后关闭弹窗
-  showDialog.value = false
-}
-
-// 点击取消按钮
-function handleCancel() {
-  emit('cancel')
-  // 取消后关闭弹窗
-  showDialog.value = false
-}
-</script>
-
-<style scoped>
-/* 弹窗容器 */
-.dialog-wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(0, 0, 0, v-bind('maskOpacity'));
-  animation: fadeIn 300ms ease;
-}
-
-/* 弹窗主体 */
-.dialog-container {
-  width: 80%;
-  max-width: 800rpx;
-  background-color: #fff;
-  border-radius: 32rpx;
-  overflow: hidden;
-  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.15);
-  animation: scaleIn 300ms ease;
-  background-image: url('@/assets/u2.png');
-  background-size: cover;
-  background-position: center;
-}
-
-/* 上部分内容 */
-.dialog-content {
-  padding: 60rpx 40rpx;
-  text-align: center;
-}
-
-/* 图标 */
-.dialog-icon {
-  margin-bottom: 40rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.dialog-icon image {
-  width: 120rpx;
-  height: 120rpx;
-  object-fit: contain;
-}
-
-.default-icon {
-  width: 120rpx;
-  height: 120rpx;
-  background-color: #f0f0f0;
-  border-radius: 50%;
-}
-
-/* 标题 */
-.dialog-title {
-  font-size: 36rpx;
-  font-weight: bold;
-  color: #333;
-  margin: 0 0 20rpx 0;
-}
-
-/* 说明文字 */
-.dialog-description {
-  font-size: 28rpx;
-  color: #666;
-  margin: 0;
-  line-height: 1.5;
-}
-
-/* 分割线 */
-.dialog-divider {
-  height: 2rpx;
-  background-color: #e5e5e5;
-  margin: 0;
-}
-
-/* 按钮区域 */
-.dialog-buttons {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-/* 按钮 */
-.dialog-button {
-  flex: 1;
-  padding: 30rpx;
-  border: none;
-  background: none;
-  font-size: 32rpx;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-  text-align: center;
-  box-sizing: border-box;
-}
-
-/* 全宽按钮 */
-.dialog-button-full {
-  width: 100%;
-}
-
-/* 取消按钮 */
-.dialog-button-cancel {
-  color: #666;
-}
-
-.dialog-button-cancel:hover {
-  background-color: #f5f5f5;
-}
-
-/* 主要按钮 */
-.dialog-button-primary {
-  color: #1989fa;
-}
-
-.dialog-button-primary:hover {
-  background-color: #f0f9ff;
-}
-
-/* 动画效果 */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes scaleIn {
-  from {
-    transform: scale(0.8);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-</style>
+<template>
+  <view v-if="showDialog" class="dialog-wrapper" @click="handleMaskClick">
+    <view class="dialog-container" @click.stop>
+      <!-- 上部分内容 -->
+      <view class="dialog-content">
+        <view class="dialog-icon">
+          <!-- 图标插槽包装器 -->
+          <slot name="icon">
+            <!-- 自定义字体图标 -->
+            <text v-if="customIcon" class="iconfont dialog-icon-custom">{{ customIcon }}</text>
+            <!-- 根据图标类型显示字体图标 -->
+            <text v-else-if="iconType === 'phone'" class="iconfont dialog-button-primary icon-shouji" />
+            <text v-else-if="iconType === 'screen'" class="iconfont dialog-button-primary icon-xianshiqi" />
+            <text v-else-if="iconType === 'links'" class="iconfont dialog-button-primary icon-xianshiqi1" />
+            <text v-else-if="iconType === 'links2'" class="iconfont dialog-button-primary icon-lianjiewangzhi" />
+            <!-- 兼容旧版本的图片图标 -->
+            <image v-else-if="icon" :src="icon" alt="dialog-icon" />
+            <!-- 默认图标 -->
+            <view v-else class="default-icon" />
+          </slot>
+        </view>
+        <view class="dialog-title">
+          {{ title }}
+        </view>
+        <text class="dialog-description">{{ description }}</text>
+      </view>
+
+      <!-- 分割线 -->
+      <view class="dialog-divider" />
+
+      <!-- 下部分按钮 -->
+      <view class="dialog-buttons">
+        <!-- 类型1: 取消和打开app -->
+        <template v-if="type === 'open-app'">
+          <view class="dialog-button dialog-button-cancel" @click="handleCancel">
+            取消
+          </view>
+          <view class="dialog-button dialog-button-primary" @click="handleConfirm">
+            打开app
+          </view>
+        </template>
+
+        <!-- 类型2: 知道了 -->
+        <template v-else-if="type === 'confirm'">
+          <view class="dialog-button dialog-button-full dialog-button-primary" @click="handleConfirm">
+            知道了
+          </view>
+        </template>
+
+        <!-- 类型3: 取消和继续访问 -->
+        <template v-else-if="type === 'continue'">
+          <view class="dialog-button dialog-button-cancel" @click="handleCancel">
+            取消
+          </view>
+          <view class="dialog-button dialog-button-primary" @click="handleConfirm">
+            继续访问
+          </view>
+        </template>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+// 弹窗类型定义
+type DialogType = 'open-app' | 'confirm' | 'continue'
+
+// Props定义
+interface Props {
+  // 控制弹窗显示/隐藏（支持v-model）
+  modelValue?: boolean
+  // 弹窗类型
+  type?: DialogType
+  // 弹窗标题
+  title?: string
+  // 弹窗说明文字
+  description?: string
+  // 图标路径（兼容旧版本）
+  icon?: string
+  // 图标类型：phone、screen、links、links2
+  iconType?: 'phone' | 'screen' | 'links' | 'links2'
+  // 自定义字体图标
+  customIcon?: string
+  // 是否显示遮罩层
+  mask?: boolean
+  // 遮罩层透明度
+  maskOpacity?: number
+  // 点击遮罩是否关闭弹窗
+  closeOnMaskClick?: boolean
+}
+
+// Props默认值
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  type: 'confirm',
+  title: '',
+  description: '',
+  icon: '',
+  iconType: undefined,
+  customIcon: '',
+  mask: true,
+  maskOpacity: 0.5,
+  closeOnMaskClick: true,
+})
+
+// Emits定义
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'confirm'): void
+  (e: 'cancel'): void
+}>()
+
+// 本地状态
+const showDialog = ref(props.modelValue)
+
+// 监听modelValue变化
+watch(() => props.modelValue, (newVal) => {
+  showDialog.value = newVal
+})
+
+// 监听showDialog变化
+watch(() => showDialog.value, (newVal) => {
+  emit('update:modelValue', newVal)
+})
+
+// 点击遮罩层
+function handleMaskClick() {
+  if (props.closeOnMaskClick) {
+    showDialog.value = false
+  }
+}
+
+// 点击确认按钮
+function handleConfirm() {
+  emit('confirm')
+  // 确认后关闭弹窗
+  showDialog.value = false
+}
+
+// 点击取消按钮
+function handleCancel() {
+  emit('cancel')
+  // 取消后关闭弹窗
+  showDialog.value = false
+}
+</script>
+
+<style scoped>
+/* 弹窗容器 */
+.dialog-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, v-bind('maskOpacity'));
+  animation: fadeIn 300ms ease;
+}
+
+/* 弹窗主体 */
+.dialog-container {
+  width: 80%;
+  max-width: 800rpx;
+  background-color: #fff;
+  border-radius: 32rpx;
+  overflow: hidden;
+  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.15);
+  animation: scaleIn 300ms ease;
+  background-image: url('@/assets/u2.png');
+  background-size: cover;
+  background-position: center;
+}
+
+/* 上部分内容 */
+.dialog-content {
+  padding: 60rpx 40rpx;
+  text-align: center;
+}
+
+/* 图标 */
+.dialog-icon {
+  margin-bottom: 40rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  display: inline-block;
+  border-radius: 50%;
+  border: 2rpx solid rgb(151, 150, 150);
+}
+
+/* 确保dialog-icon容器内的所有直接子元素都应用相同的基础样式 */
+.dialog-icon > * {
+  width: 120rpx;
+  height: 120rpx;
+  font-size: 80rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dialog-icon image {
+  object-fit: contain;
+}
+
+/* 字体图标样式 */
+.dialog-icon .iconfont {
+  /* 已通过 .dialog-icon > * 应用基础样式 */
+}
+
+/* 自定义字体图标 */
+.dialog-icon-custom {
+  color: #1989fa;
+}
+
+/* 成功图标 */
+.dialog-icon-success {
+  color: #67c23a;
+}
+
+/* 警告图标 */
+.dialog-icon-warning {
+  color: #e6a23c;
+}
+
+/* 错误图标 */
+.dialog-icon-error {
+  color: #f56c6c;
+}
+
+/* 信息图标 */
+.dialog-icon-info {
+  color: #909399;
+}
+
+.default-icon {
+  width: 120rpx;
+  height: 120rpx;
+  background-color: #f0f0f0;
+  border-radius: 50%;
+}
+
+/* 标题 */
+.dialog-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  margin: 0 0 20rpx 0;
+}
+
+/* 说明文字 */
+.dialog-description {
+  font-size: 28rpx;
+  color: #666;
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* 分割线 */
+.dialog-divider {
+  height: 2rpx;
+  background-color: #e5e5e5;
+  margin: 0;
+}
+
+/* 按钮区域 */
+.dialog-buttons {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+/* 按钮 */
+.dialog-button {
+  flex: 1;
+  padding: 30rpx;
+  border: none;
+  background: none;
+  font-size: 32rpx;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+/* 全宽按钮 */
+.dialog-button-full {
+  width: 100%;
+}
+
+/* 取消按钮 */
+.dialog-button-cancel {
+  color: #666;
+}
+
+.dialog-button-cancel:hover {
+  background-color: #f5f5f5;
+}
+
+/* 主要按钮 */
+.dialog-button-primary {
+  color: #00599c;
+}
+
+.dialog-button-primary:hover {
+  background-color: #f0f9ff;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+</style>

package/src/components/MyComs/Popup/index.vue

@@ -226,7 +226,6 @@ function lockScroll() {
   // #endif
 
   // #ifdef MP
-  // @ts-expect-error 小程序特有API，TypeScript类型定义缺失
   uni.hideTabBar()
   // #endif
 }
@@ -243,7 +242,6 @@ function unlockScroll() {
   // #endif
 
   // #ifdef MP
-  // @ts-expect-error 小程序特有API，TypeScript类型定义缺失
   uni.showTabBar()
   // #endif
 }