<template>
<el-dialog :visible.sync="isShow" width="340px" :before-close="handleClose">
<!-- 手机二维码显示-->
<!-- 调用组件-- 居民列表，点击手机号 -->
<div class="ifno">
<img v-if="form.url" :src="form.url" />{
{
form.url}}
<h3 class="name">{
{
form.userName }}</h3>
<p class="phone">{
{
form.userPhone }}</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="isShow = false">取 消</el-button>
<el-button type="primary" @click="downloadForm">下载</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: "phoneQrDialog",
data() {
return {
isShow: false,
form: {
},
rules: {
name: [{
required: true, message: "XXX", trigger: "blur" }],
},
};
},
created() {
},
methods: {
handleClose(done) {
this.$emit("close");
done();
},
// 显示
setShow(id) {
this.form = {
};
this.isShow = true;
//获取二维码
this.getqrCode(id);
},
//获取二维码信息
getqrCode(id) {
let params = {
cardId: id };
this.$http
.request("CardQrCode", params)
.then((data) => {
console.log(data.data.cardUrl);
this.$set(this.form,'url',data.data.cardUrl)
})
.catch(() => {
});
// let params = {
// userId:id,
// };
// this.$http
// .request("CardQrCode", params)
// .then(data => {
// this.$set(this.form,'url',data.data)
// })
// .catch(err => {});
},
//导出
downloadForm() {
let href = this.form.url;
window.location.href = href;
},
},
components: {
},
props: ["formInfo"],
// 监听
watch: {
},
};
</script>
<style scoped="scoped" lang="scss">
.ifno {
> img {
width: 100%;
}
text-align: center;
.name {
font-size: 22px;
}
.phone {
font-size: 22px;
}
}
</style>
效果图：
