commie/im
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

filecache

Browse Source
This commit is contained in:
cansnow
2025-12-27 07:08:30 +08:00
parent 974d149d25
commit 09c7889525
54 changed files with 10485 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/common/userOrGroupQrCode.vue
+82 -28
View File
@@ -23,13 +23,16 @@
</view>
</view>
</view>
<canvas canvas-id="qrcode_canvas" id="qrcode_canvas" style="width: 600rpx; height: 600rpx"></canvas>
<view id="qrcode_canvas_container" style="width: 600rpx; height: 600rpx">
<canvas canvas-id="qrcode_canvas" id="qrcode_canvas" style="width: 600rpx; height: 600rpx"></canvas>
</view>
<u-gap></u-gap>
<view style="color: #b4b4b4;">扫一扫上面的二维码图案，加我为朋友</view>
</view>
<view style="width: 80%;display: flex;align-items: center;justify-content: center;height: 20%;">
<u-button type="default" plain :hairline="false" iconColor="#9aa2b2" @click="scan">扫一扫</u-button>
<u-button type="default" plain :hairline="false" iconColor="#9aa2b2">换个样式</u-button>
<u-button @click="save" type="default" plain :hairline="false" iconColor="#9aa2b2">保存图片</u-button>
<u-button @click="scan" type="default" plain :hairline="false" color="#506388" iconColor="#9aa2b2">扫一扫</u-button>
<u-button @click="createQrcode" type="default" plain :hairline="false" color="#506388" iconColor="#9aa2b2">换个样式</u-button>
<u-button @click="save" type="default" plain :hairline="false" color="#506388" iconColor="#9aa2b2">保存图片</u-button>
</view>
</view>
</template>
@@ -40,7 +43,6 @@
import UserBase from '@/components/User.vue';
import util from "@/util";
import { mapGetters } from "vuex";
import md5 from "md5";
export default {
mixins:[UserBase],
components: {
@@ -55,12 +57,21 @@
showName:"",
faceURL:"",
code:"",
}
},
qrcodeSize:"360",
qrcodeStyle:[]
}
},
computed:{
...mapGetters(["storeFriendList","storeGroupList","config"]),
},
watch:{
qrcodeSize(nv,ov){
if(nv && this.qrcodeUrl){
this.createQrcode();
}
}
},
onLoad(opt) {
if(opt.sourceInfo){
this.source = JSON.parse(opt.sourceInfo);
@@ -72,14 +83,36 @@
code:"",
};
}
console.log(this.config);
if(this.source.type == "user"){
this.qrcodeUrl = `${this.config.website}/u/${this.source.code}`;
}else{
this.qrcodeUrl = `${this.config.website}/g/${this.source.code}`;
}
console.log(this.qrcodeUrl);
this.createQrcode();
this.qrcodeStyle.push({
background: "#fff", // 背景色
foreground: '#000000', // 前景色
pdground: '#000000', // 定位角点颜色
correctLevel: 3, // 容错级别
image: this.config.app_logo, // 二维码图标
imageSize: 40, // 二维码图标大小
});
this.qrcodeStyle.push({
background: "#fff", // 背景色
foreground: '#000000', // 前景色
pdground: '#000000', // 定位角点颜色
correctLevel: 3, // 容错级别
image: this.source.faceURL, // 二维码图标
imageSize: 40, // 二维码图标大小
});
},
mounted() {
const _this = this;
uni.createSelectorQuery().in(this).select("#qrcode_canvas_container")
.boundingClientRect((data) => {
_this.qrcodeSize = data.width
})
.exec();
},
methods: {
...util,
@@ -98,26 +131,47 @@
},
createQrcode() {
const _this = this;
const style = this.qrcodeStyle[Math.floor(Math.random() * this.qrcodeStyle.length)];
style.imageSize = parseInt(this.qrcodeSize * 0.2);
return new Promise((resolve, reject) => {
new QRCode({
context: _this, // 上下文环境
canvasId: 'qrcode_canvas', // canvas-id
usingComponents: true, // 是否是自定义组件
showLoading: false, // 是否显示loading
loadingText: "", // loading文字
text: `${this.qrcodeUrl}`, // 生成内容
size: 320, // 二维码大小
background: "#fff", // 背景色
foreground: '#000000', // 前景色
pdground: '#000000', // 定位角点颜色
correctLevel: 3, // 容错级别
image: "", // 二维码图标
imageSize: 40, // 二维码图标大小
cbResult: function(res) { // 生成二维码的回调
_this.qrcode_src = (res)
//resolve(res);
},
});
var createFn = (icon)=>{
console.log(icon)
new QRCode({
context: _this, // 上下文环境
canvasId: 'qrcode_canvas', // canvas-id
usingComponents: true, // 是否是自定义组件
showLoading: false, // 是否显示loading
loadingText: "", // loading文字
text: `${_this.qrcodeUrl}`, // 生成内容
size: _this.qrcodeSize, // 二维码大小
background: style.background, // 背景色
foreground: style.foreground, // 前景色
pdground: style.pdground, // 定位角点颜色
correctLevel: 3, // 容错级别
image: icon || "", // 二维码图标
imageSize: style.imageSize || 40, // 二维码图标大小
cbResult: function(res) { // 生成二维码的回调
_this.qrcode_src = (res)
//resolve(res);
},
});
}
if(!style.image){
createFn();
return ;
}
if(style.image.startsWith("/static/images")){
createFn(style.image);
return ;
}
if(!style.image.startsWith("http")){
style.image = util.cdn(style.image);
}
util.cacheFile(style.image,'avatar').then(fn=>{
createFn(fn);
});
return ;
});
},
}