<template>
<view class="page">
<view class="qrcode-box">
<view class="qrcode">
<u-qrcode ref="code" canvas-id="code" :value="text" :size="size" :options="{
foreground: {
image: {
src: '/static/logo.png',
width: 0.25,
height: 0.25,
align: ['center', 'center'],
anchor: [0, 0]
}
}
}" @click="remake" @complete="complete($event)"></u-qrcode>
</view>
<text class="msg">这是一个带logo的二维码,logo处于二维码中间</text>
<button class="save" type="primary" size="mini" @click="save('code')">保存</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
text: 'uQRCode',
size: 200
};
},
methods: {
complete(e) {
if (e.success) {
console.log('生成成功');
} else {
console.log('生成失败');
}
},
remake() {
const ref = this.$refs['code'];
ref.remake();
},
save() {
uni.showLoading({
title: '保存中',
mask: true
});
const ref = this.$refs['code'];
ref.save({
success: res => {
uni.hideLoading();
uni.showToast({
icon: 'success',
title: '保存成功'
});
},
fail: err => {
uni.showToast({
icon: 'none',
title: JSON.stringify(err)
});
}
});
}
}
};
</script>
<style>
.page {
display: flex;
flex-direction: column;
align-items: center;
}
.qrcode-box {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
padding: 0 30px;
}
.qrcode {
padding: 16px;
background-color: #ffffff;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
border-radius: 2px;
overflow: hidden;
}
.msg {
margin-top: 15px;
font-size: 14px;
color: #9a9b9c;
}
.save {
margin-top: 10px;
}
</style>
<template>
<view class="page">
<view class="qrcode-box">
<view class="qrcode">
<u-qrcode ref="code" canvas-id="code" :value="text" :size="size" :options="{
foreground: {
image: {
src: '/static/logo.png',
width: 0.25,
height: 0.25,
align: ['center', 'center'],
anchor: [0, 0]
}
}
}" @click="remake" @complete="complete($event)"></u-qrcode>
</view>
<text class="msg">这是一个带logo的二维码,logo处于二维码中间</text>
<button class="save" type="primary" size="mini" @click="save('code')">保存</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
text: 'uQRCode',
size: 200
};
},
methods: {
complete(e) {
if (e.success) {
console.log('生成成功');
} else {
console.log('生成失败');
}
},
remake() {
const ref = this.$refs['code'];
ref.remake();
},
save() {
uni.showLoading({
title: '保存中',
mask: true
});
const ref = this.$refs['code'];
ref.save({
success: res => {
uni.hideLoading();
uni.showToast({
icon: 'success',
title: '保存成功'
});
},
fail: err => {
uni.showToast({
icon: 'none',
title: JSON.stringify(err)
});
}
});
}
}
};
</script>
<style>
.page {
display: flex;
flex-direction: column;
align-items: center;
}
.qrcode-box {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
padding: 0 30px;
}
.qrcode {
padding: 16px;
background-color: #ffffff;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
border-radius: 2px;
overflow: hidden;
}
.msg {
margin-top: 15px;
font-size: 14px;
color: #9a9b9c;
}
.save {
margin-top: 10px;
}
</style>