buddhism/pages/basePage/test.vue

<template>
  <view class="page">
    <view class="qrcode-container">
      <uv-qrcode
        ref="qrcode"
        :value="value"
        :options="options"
        canvas-id="qrcode"
        size="300rpx"
      ></uv-qrcode>
    </view>
    
    <!-- 测试按钮 -->
    <view class="button-container">
      <button @click="showQRModal" class="test-btn">显示二维码弹窗</button>
    </view>
    
    <!-- 二维码弹窗组件 -->
    <QRCodeModal
      :visible="modalVisible"
      :value="modalValue"
      :title="modalTitle"
      :ticket-number="modalTicketNumber"
      @close="handleModalClose"
    />
  </view>
</template>

<script>
import UvQrcode from "../../uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode.vue";
import QRCodeModal from "../../components/QRCodeModal.vue";

export default {
  components: { UvQrcode, QRCodeModal },
  data() {
    return {
      value: "测试二维码内容",
      options: {
        errorCorrectLevel: "Q",
        margin: 10,
        areaColor: "#fff"
      },
      // 弹窗相关数据
      modalVisible: false,
      modalValue: "VERIFY:31454786135789613287",
      modalTitle: "观音诞祈福法会",
      modalTicketNumber: "31454786135789613287"
    };
  },
  onLoad() {
    this.$nextTick(() => {
      this.$refs.qrcode.remake({
        success: () => {
          console.log("二维码生成成功");
        },
        fail: (err) => {
          console.error("二维码生成失败:", err);
        }
      });
    });
  },
  methods: {
    // 显示二维码弹窗
    showQRModal() {
      this.modalVisible = true;
    },
    
    // 关闭弹窗
    handleModalClose() {
      this.modalVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  background: #f5f0e7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.qrcode-container {
  padding: 40rpx;
  background: white;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 60rpx;
}

.button-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.test-btn {
  background: #48893B;
  color: white;
  border: none;
  border-radius: 10rpx;
  padding: 20rpx 40rpx;
  font-size: 28rpx;
}
</style>