You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
2.8 KiB
137 lines
2.8 KiB
<template>
|
|
<div>
|
|
<xy-dialog ref="dialog" :is-show.sync="isShow" type="normal" :title="'核销二维码'">
|
|
<template v-slot:default>
|
|
<div style="display: flex;justify-content: center;flex-wrap: wrap;">
|
|
<img style="width: 150px;height: 150px;margin: 0 auto;display: inline-block;" :src="qrcode" alt="">
|
|
<!-- <div style="width: 100%;text-align: center;margin-top: 20px;">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-download"
|
|
class="btn-qr"
|
|
@click="downloadQR"
|
|
>下载二维码</el-button
|
|
>
|
|
</div> -->
|
|
|
|
</div>
|
|
</template>
|
|
|
|
</xy-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {show,save} from "@/api/activity"
|
|
|
|
export default {
|
|
components:{
|
|
},
|
|
data() {
|
|
return {
|
|
isShow:false,
|
|
id:'',
|
|
qrcode:'',
|
|
active_name:''
|
|
}
|
|
},
|
|
created(){
|
|
},
|
|
methods: {
|
|
async getDetail(){
|
|
const res = await show({id:this.id})
|
|
this.qrcode = res.qrcode
|
|
this.active_name = res.active_name
|
|
},
|
|
downloadQR() {
|
|
if (!this.qrcode) return;
|
|
// 直接下载图片
|
|
const link = document.createElement("a");
|
|
link.href = this.qrImgUrl;
|
|
const fileName =`${this.active_name}-签到二维码.png`
|
|
link.download = fileName;
|
|
link.target = "_blank";
|
|
link.click();
|
|
link.remove(); // 清理临时元素
|
|
},
|
|
},
|
|
watch:{
|
|
isShow(newVal){
|
|
if(newVal){
|
|
this.getDetail()
|
|
}else{
|
|
this.id = ''
|
|
this.qrcode = ""
|
|
this.active_name = ""
|
|
this.$refs['dialog'].reset()
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.xy-table-item-label{
|
|
width: 160px;
|
|
}
|
|
.img__delete{
|
|
transform: scale(0.8,0.8);
|
|
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 4px;
|
|
}
|
|
::v-deep .avatar-uploader .el-upload {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
::v-deep .avatar-uploader .el-upload:hover {
|
|
border-color: #409EFF;
|
|
}
|
|
::v-deep .el-upload--picture-card {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 80px !important;
|
|
height: 80px !important;
|
|
line-height: 80px !important;
|
|
text-align: center;
|
|
}
|
|
::v-deep .avatar-uploader-icon{
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 80px !important;
|
|
height: 80px !important;
|
|
line-height: 80px !important;
|
|
text-align: center;
|
|
}
|
|
::v-deep .avatar {
|
|
width: 80px !important;
|
|
display: block;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
::v-deep .xy-table-item-label{
|
|
width: 160px !important;
|
|
}
|
|
|
|
::v-deep .el-date-editor .el-range-separator{
|
|
width: auto !important;
|
|
}
|
|
|
|
::v-deep .el-input-number .el-input__inner{
|
|
text-align: left !important;
|
|
}
|
|
.searchCompanys{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom:16px;
|
|
.el-input{
|
|
width:80%
|
|
}
|
|
}
|
|
</style>
|