qimall/addons/SmartForm/backend/views/renovation/index.php

<?php

use common\helpers\ComponentHelper;
use common\helpers\AddonHelper;
ComponentHelper::loadComponentView('form-diy-list', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/form')
?>

	<div v-loading="loading" class=" b_box" id="app">
		<div class="nav">装修表单管理</div>
		<div class="form_list_box">
			<div class="list_box">
				<form-diy-list v-for="(item,index) in formList" :key="index" :show-tool="false" :item="item" :index="index" @click="formEvent"	></form-diy-list>
			</div>
			<div style="text-align: right;margin: 20px 0;" ref="page">
			    <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
			</div>
		</div>
		<el-dialog
		  :visible.sync="shareModel"
		  width="639px">
		  <div class="diang_title_box">
			  <span>分享</span>
		  </div>
		  <div class="diang_tpo_desc_box">可以将二维码或链接放置在海报，宣传单，朋友圈，线下等方式发送给客户</div>
		  <div class="dinag_body_box">
			  <div class="dinag_lef_b_box">
				  <p class="dinag_share_ti">分享方式一：</p>
				  <div  id="qrcode-info">
					  <div id="qrcode" style="width:100px; height:100px; margin-top:30px;"></div>
				  </div>
				  
				<a class="dinag_a_box" @click="downloadShareImg">下载二维码</a>
				<div class="diang_line_libox"></div>
			  </div>
			  <div class="dinag_lef_b_box">
			  	<p class="dinag_share_ti">分享方式二：</p>
				<div class="inp_line_dinag_box">{{shareInfo.link}}</div>
				<a class="dinag_link_box" @click="copyText">复制链接</a>
			  </div>
		  </div>
		</el-dialog>
	</div>
	
	<script> 
	    new Vue({
			el: '#app',
	    data(){
			return{
				loading:true,
				pageCount:0,
				page:1,
				limit:10,
				formList:[],
				shareModel:false,
				shareInfo:{
					q_img:'',
					link:''
				}
			}
		},
		created(){
			this.getList()
		},
		methods:{
			pagination(currentPage) {
				this.page = currentPage
				this.loading = true
				this.getList()
			},
			async copyText(){
				let target = document.createElement('input')
				target.value = this.shareInfo.link // 给input的value赋值
					document.body.appendChild(target) // 向页面插入input节点
					target.select() // 选中input
					try {
						await document.execCommand('Copy') // 执行浏览器复制命令
						this.$message.success('复制成功')
					} catch {
						console.log('复制失败')
					}
			},
			
			// 图片下载
			downloadShareImg() {
			    if (!this.shareInfo.q_img) {
			            this.$message.error('暂无图片');
			            return;
			        }
			    fetch(this.shareInfo.q_img).then(res => res.blob().then(blob => {
			        var a = document.createElement('a');
			        var url = window.URL.createObjectURL(blob);
			        a.href = url;
			        a.download = '二维码';
			        a.click();
			        window.URL.revokeObjectURL(url);
			    }))
			},
			getList(){
				request({
				    params: {
				        r: 'smart-form/renovation/index',
				        page:this.page,
						limit:this.limit
				    },
				    method: 'GET',
				}).then(e => {
					this.loading = false
					this.formList = e.data.data.list
					this.pageCount = e.data.data.page_count
				}).catch(e => {});
			},
			formEvent(e){
				let that = this
				this.loading = true 
				switch(e.type){
					case 'share':
						request({
						    params: {
						        r: 'smart-form/renovation/share',
						    },
							method: 'post',
							data:{
								id:e.item.id
							},
						}).then(async res=>{
							if(res.data.code != 0){
								this.$message.error(res.data.msg);
								this.loading = false;
								return; 
							}
							// 	console.log(res)
							this.shareInfo.link = res.data.data
							this.shareModel = true
							setTimeout(()=>{
								let qrcodeInfo = document.getElementById("qrcode-info");
								document.getElementById("qrcode").remove(); //删除生成的二维码
								let addCodeDom = document.createElement("div")
								addCodeDom.setAttribute("id", "qrcode");
								addCodeDom.setAttribute("style", "width:100px; height:100px;margin-top:30px;");
								qrcodeInfo.appendChild(addCodeDom) //添加标签
								let qrCodeDom = document.getElementById("qrcode")
								var qrcode = new QRCode(qrCodeDom, {
									text:this.shareInfo.link,
								    width: 100,
								    height: 100
								});
								qrcode.makeCode(this.shareInfo.link);
								console.log(qrCodeDom.getElementsByTagName("img")[0].src)
								return new Promise((req, rej) => {
								    setTimeout(() => {
								        that.shareInfo.q_img = qrCodeDom.getElementsByTagName("img")[0].src;
								    }, 200);
								})
								
							})
							// this.shareInfo.q_img = qrCodeDom.getElementById("qrcode")
							
							this.loading = false
							
						}).catch(err=>{
							console.log(err,'ppppppppppppp')
						})
					break;
					case 'delete':
						request({
						    params: {
						        r: 'smart-form/renovation/delete',
						    },
							method: 'post',
							data:{
								id:e.item.id
							},
						}).then(res=>{
							if(res.data.code == 0){
								this.$message.success('删除成功')
								this.getList()
							}else{
								this.$message.error(res.data.msg);
								this.loading = false 
							}

						}).catch(err=>{
							console.log(err,'ppppppppppppp')
						})
					break;
				}
			}
		}
	    })
	</script>
	<style scoped>

		.inp_line_dinag_box{
			width: 80%;
			min-height: 30px;
			border: 1px solid #e5e5e5;
			display: flex;
			align-items: center;
			padding: 0 10px;
			box-sizing: border-box;
			border-radius: 5px;
			font-size: 12px;
			margin-top: 50px;
		}
		.diang_title_box{
			position: absolute;
			top: 0;
			left: 0;
			right: 60px;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 50px;
			font-size: 14px;
			z-index: -1;
		}
		.dinag_link_box{
			font-size: 12px;
			margin-top: 70px;
			cursor: pointer;
		}
		.diang_line_libox{
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			width: 1px;
			background: #e5e5e5;
		}
		.dinag_share_ti{
			font-size: 14px;
		}
		.dinag_a_box{
			font-size: 12px;
			margin-top: 30px;
		}
		.dinag_lef_b_box{
			width: 50%;
			display: flex;
			height: 100%;
			align-items: center;
			justify-content: flex-start;
			flex-direction: column;
			position: relative;
			padding-bottom: 40px;
			box-sizing: border-box;
		}
		.dinag_body_box{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30px;
		}
		.dinag_img_qr{
			width: 100px;
			height: 100px;
			margin-top: 30px;
		}
		.diang_tpo_desc_box{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			margin-top: 10px;
		}
	.b_box{
		min-height: 100vh;
		    background: #f3f3f3;

	}
	.nav{
		background: #ffffff;
		border-radius: 5px;
		padding: 26px 24px;
		margin-bottom: 10px;
	}
	.form_list_box{
		    padding: 25px;
		    background: #fff;
		    border-radius: 5px 5px 0 0;
			
	}
	.list_box{
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	
</style>