first commit

src/components/GzhQrcode.vue

@@ -0,0 +1,209 @@
+<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/fwhqrcode.jpg'],
+    current: '/static/qrcode/fwhqrcode.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/fwhqrcode.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>