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>
</template>

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

export default {
  components: { UvQrcode },
  data() {
    return {
      value: "测试二维码内容",
      options: {
        errorCorrectLevel: "Q",
        margin: 10,
        areaColor: "#fff"
      }
    };
  },
  onLoad() {
    this.$nextTick(() => {
      this.$refs.qrcode.remake({
        success: () => {
          console.log("二维码生成成功");
        },
        fail: (err) => {
          console.error("二维码生成失败:", err);
        }
      });
    });
  }
};
</script>

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

.qrcode-container {
  padding: 40rpx;
  background: white;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}
</style>