tydata-mini/src/components/GzhQrcode.vue

<script setup>
import { ref, defineProps, defineEmits, computed } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'example', // 'example' | 'withdraw'
    validator: (value) => ['example', 'withdraw'].includes(value)
  }
})

const emit = defineEmits(['close'])

// 根据类型计算显示内容
const modalConfig = computed(() => {
  if (props.type === 'withdraw') {
    return {
      title: '提现说明',
      highlight: '点击二维码全屏查看',
      instruction: '全屏后长按识别关注公众号',
      description: '提现功能请在公众号内操作'
    }
  }

  // 默认是查看示例报告
  return {
    title: '关注公众号',
    highlight: '点击二维码全屏查看',
    instruction: '全屏后长按识别关注公众号',
    description: '关注公众号查看示例报告'
  }
})

function handleClose() {
  emit('close')
}

function handleMaskClick() {
  handleClose()
}

// 预览图片
function previewImage() {
  uni.previewImage({
    urls: ['/static/qrcode/tydatagzh.jpg'],
    current: '/static/qrcode/tydatagzh.jpg'
  })
}
</script>

<template>
  <view v-if="visible" class="gzh-qrcode-modal">
    <view class="modal-mask" @click="handleMaskClick" />
    <view class="modal-content">
      <view class="modal-header">
        <view class="modal-title">{{ modalConfig.title }}</view>
        <view class="close-btn" @click="handleClose">
          <text class="close-icon">×</text>
        </view>
      </view>

      <view class="qrcode-container">
        <image
          class="qrcode-image"
          src="/static/qrcode/tydatagzh.jpg"
          mode="aspectFit"
          @click="previewImage"
        />
      </view>

      <view class="modal-message">
        <text class="highlight">{{ modalConfig.highlight }}</text>
        <text class="instruction">{{ modalConfig.instruction }}</text>
        <text class="description">{{ modalConfig.description }}</text>
      </view>
    </view>
  </view>
</template>

<style scoped>
.gzh-qrcode-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  width: 300px;
  max-width: 85%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 1001;
  overflow: hidden;
}

.modal-header {
  position: relative;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.close-btn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.close-icon {
  font-size: 20px;
  color: #999;
  line-height: 1;
}

.qrcode-container {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qrcode-image {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modal-message {
  padding: 0 20px 24px;
  text-align: center;
  line-height: 1.6;
}

.modal-message text {
  display: block;
  font-size: 14px;
  color: #666;
}

.highlight {
  color: #007aff !important;
  font-weight: 500;
  margin-bottom: 4px;
}



/* 动画效果 */
.gzh-qrcode-modal {
  animation: fadeIn 0.3s ease-out;
}

.modal-content {
  animation: slideIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
</style>