wanma-benteng
/
new-admin-view
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化：二维码显示优化

This commit is contained in:
wuhui_zzw 2024-03-03 11:41:14 +08:00
parent 4f8ff62ebc
commit 8d1b812ec8
1 changed files with 76 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/views/user/member/exchangeCode.vue
View File

@ -2,6 +2,15 @@
<div class="divBox">
<!--主要内容-->
<el-card class="box-card">
<div>
<canvas
id="QRCode_header"
ref="canvas"
title="扫描二维码"
></canvas>
</div>
<!--顶部搜索栏-->
<div slot="header" class="clearfix">
<div class="container">
@ -18,9 +27,10 @@
</el-form-item>
</el-form>
<el-button size="small" type="primary" @click="getList(1)">搜索</el-button>
<el-button size="small" type="success" @click="addExchangeCode">添加</el-button>
<el-button size="small" type="warning" @click="activateExchangeCode">激活</el-button>
<el-button size="small" type="info" @click="exports">导出</el-button>
<el-button size="small" type="success" @click="addExchangeCode">添加兑换码</el-button>
<el-button size="small" type="warning" @click="activateExchangeCode">分配给商户</el-button>
<el-button size="small" type="info" @click="exports">导出兑换码</el-button>
<el-button size="small" type="info" @click="exports('down')">下载二维码</el-button>
</div>
</div>
<!--表格信息-->
@ -45,7 +55,7 @@
激活时间 / 使用时间
</template>
<template slot-scope="scope">
<el-tag v-if="scope.row.status == 0" type="info">待激活</el-tag>
<el-tag v-if="scope.row.status == 0" type="info">{{ scope.row.mer_id > 0 ? '待激活' : '待分配' }}</el-tag>
<template v-else-if="scope.row.status == 1">
<el-tag type="primary">
已激活<br />
@ -53,7 +63,7 @@
</el-tag>
</template>
<template v-else-if="scope.row.status == 2">
<el-tag type="primary">
<el-tag type="success">
已使用<br />
{{scope.row.use_time}}
</el-tag>
@ -78,9 +88,9 @@
</div>
</template>
</el-table-column>
<el-table-column label="操作" min-width="280" fixed="right" align="center">
<el-table-column label="二维码" min-width="100" align="center">
<template slot-scope="scope">
<el-button type="info" size="small" @click="seeQrCode(scope.row)">二维码</el-button>
<div :ref="'qrCodeImg'+scope.row.id" class="qr-code-img"></div>
</template>
</el-table-column>
</el-table>
@ -96,17 +106,11 @@
@current-change="pageUserChange"
/>
</div>
</el-card>
<!--二维码弹框-->
<el-dialog title="二维码" :visible.sync="isShow" width="300px">
<div ref="qrcode" class="qrcode"></div>
<span slot="footer" class="dialog-footer">
<el-button @click="isShow = false">取 消</el-button>
</span>
</el-dialog>
</div>
</template>
@ -134,13 +138,10 @@ export default {
total: 0,
},
batch_list: {},
isShow: true,
};
},
watch: {},
mounted() {
this.isShow = false;
this.getList();
this.getBatchList();
},
@ -154,6 +155,20 @@ export default {
_this.tableData.data = res.data.list;
_this.tableData.total = res.data.count;
_this.listLoading = false;
// 循环显示二维码
_this.$nextTick(function () {
Object.values(res.data.list).forEach(item => {
let refName = 'qrCodeImg'+item.id;
new QRCode(_this.$refs[refName], {
text: item.exchange_code, // 需要转换为二维码的内容
width: 80,
height: 80,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H,
});
})
});
}).catch((res) => {
_this.listLoading = false;
_this.$message.error(res.message);
@ -185,7 +200,7 @@ export default {
this.$modalForm(exchangeCodeActivateForm()).then(() => this.getList(''));
},
// 导出 - 导出信息
async exports(){
async exports(type = 'excel'){
let _this = this;
// 获取全部列表
let params = Object.assign({}, _this.tableFrom);
@ -194,7 +209,9 @@ export default {
params.is_export = 1;
let exportData = await this.exportsAllList(params);
createWorkBook(exportData.header || {}, exportData.title || {}, exportData.list || {}, exportData.foot || '',exportData.filename || '');
if(type == 'excel') createWorkBook(exportData.header || {}, exportData.title || {}, exportData.list || {}, exportData.foot || '',exportData.filename || '');
else _this.downloadQrCode(exportData);
},
// 导出 - 获取全部信息列表
exportsAllList(params, exportData = {}){
@ -227,20 +244,39 @@ export default {
});
})
},
// 生成二维码
seeQrCode(url) {
let img = '';
this.isShow = true;
this.$refs.qrcode.innerHTML = '';
new QRCode(this.$refs.qrcode, {
text: url, // 需要转换为二维码的内容
width: 160,
height: 160,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H,
// 二维码下载
downloadQrCode(exportData){
let _this = this;
let list = exportData.list || {};
// 循环处理
let opts = {
errorCorrectionLevel: "H",//容错级别,指二维码被遮挡可以扫出结果的区域比例
type: "image/png",//生成的二维码类型
quality: 0.3,//二维码质量
margin: 5,//二维码留白边距
width: 200,//宽
height: 200,//高
text: "",//二维码内容
color: {
light: "#eaeaea"//背景色
}
};
Object.values(list).forEach( item => {
opts.text = item[2];
QRCode.Drawing(_this.$refs.canvas, opts, function (error) {
console.log(error)
if(error){
console.log('加载失败！');
}
});
});
},
console.log(exportData)
}
},
@ -248,13 +284,11 @@ export default {
</script>
<style scoped lang="scss">
.qrcode{
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
width: 100%;
.qr-code-img{
width: 90px!important;
height: 90px!important;
padding-top: 5px;
padding-left: 5px;
}
/deep/ .el-table .cell{
padding: 0!important;