61 lines
1.1 KiB
Vue
61 lines
1.1 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>
|
|
</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>
|