110 lines
2.2 KiB
Vue
110 lines
2.2 KiB
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>
|