shoot-miniprograms/src/components/ModalDialog.vue

<script setup>
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  content: {
    type: String,
    default: "",
  },
  cancelText: {
    type: String,
    default: "取消",
  },
  confirmText: {
    type: String,
    default: "确定",
  },
  showCancel: {
    type: Boolean,
    default: true,
  },
  showConfirm: {
    type: Boolean,
    default: true,
  },
  onCancel: {
    type: Function,
    default: null,
  },
  onConfirm: {
    type: Function,
    default: null,
  },
});

const handleCancel = () => {
  props.onCancel?.();
};

const handleConfirm = () => {
  props.onConfirm?.();
};
</script>

<template>
  <view class="modal-mask" :style="{ display: show ? 'flex' : 'none' }">
    <view class="modal-wrap scale-in">
      <image
        class="dialog-light"
        src="../static/common/dialog-light.png"
        mode="widthFix"
      />
      <image
        class="dialog-icon"
        src="../static/common/dialog-icon.png"
        mode="widthFix"
      />

      <view class="dialog-panel">
        <image
          class="dialog-bg"
          src="../static/common/dialog-bg.png"
          mode="scaleToFill"
        />
        <view class="dialog-content">
          <slot>
            <text v-if="title" class="dialog-title">{{ title }}</text>
            <text v-if="content" class="dialog-text">{{ content }}</text>
          </slot>
        </view>

        <view
          v-if="showCancel || showConfirm"
          class="dialog-actions"
          :class="{ single: !(showCancel && showConfirm) }"
        >
          <view
            v-if="showCancel"
            class="dialog-button cancel"
            @click="handleCancel"
          >
            <text>{{ cancelText }}</text>
          </view>
          <view
            v-if="showConfirm"
            class="dialog-button confirm"
            @click="handleConfirm"
          >
            <text>{{ confirmText }}</text>
          </view>
          
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.modal-mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.62);
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-wrap {
  position: relative;
  display: flex;
  width: 549rpx;
  min-height: 318rpx;;
  padding-top: 168rpx;
  justify-content: flex-start;
  align-items: center;
}

.dialog-light {
  position: absolute;
  top: 0;
  left: 50%;
  width: 520rpx;
  z-index: 1;
  transform-origin: center center;
  animation: rotateLight 8s linear infinite;
}

.dialog-icon {
  position: absolute;
  top: 70rpx;
  left: 50%;
  width: 250rpx;
  z-index: 5;
  transform: translateX(-50%);
}

.dialog-panel {
  position: relative;
  width: 100%;
  min-height: 318rpx;
  padding: 98rpx 36rpx 40rpx 36rpx;
  box-sizing: border-box;
  z-index: 3;
  border-radius: 24rpx;
  border: 2rpx solid rgba(249, 213, 161, 0.5);
  overflow: hidden;
}

.dialog-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 24rpx;
}

.dialog-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  text-align: center;
}

.dialog-title {
  font-size: 28rpx;
  font-weight: 700;
  line-height: 40rpx;
}

.dialog-text {
  margin-top: 10rpx;
  font-size: 26rpx;
  line-height: 36rpx;
  white-space: pre-wrap;
}

.dialog-actions {
  position: relative;
  z-index: 1;
  display: flex;
  margin-top: 50rpx;
  justify-content: space-between;
  align-items: center;
  gap: 20rpx;
}

.dialog-actions.single {
  justify-content: center;
}

.dialog-button {
  display: flex;
  width: 232rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 44rpx;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  font-weight: 500;
}

.dialog-button.cancel {
  color: #fff;
  background-color: rgba(255,255,255,0.2);
}

.dialog-button.confirm {
  color: #000000;
  background-color: #ffda3f;
}

@keyframes rotateLight {
  from {
    transform: translateX(-50%) rotate(0deg);
  }

  to {
    transform: translateX(-50%) rotate(360deg);
  }
}
</style>