qimall/addons/SmartForm/backend/views/form/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">
		表单管理
		<el-button type="primary" size="mini" @click="createdForm">新增表单</el-button>
	</div>
	<div class="form_list_box">
		<div class="list_box">
			<form-diy-list v-for="(f,fi) in formList" :key="fi" :item="f" :index="fi" @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 src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script> -->
<script>
    new Vue({
          el: '#app',
          data(){
			return{
				loading:true,
				pageCount:0,
				limit:10,
				formList:[],
				page:1,
				shareModel:false,
				shareInfo:{
					q_img:'',
					link:''
				}
		    } 
		},
		created(){
			this.getList()
		},
	    methods:{
			getList(){
				request({
				    params: {
				        r: 'smart-form/form/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 => {});
			},
			pagination(currentPage) {
				this.page = currentPage
				this.loading = true
				this.getList()
			},
			createdForm(){
				navigateTo({
				    r: 'smart-form/form/add'
				})
			},
			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);
			    }))
			},
			formEvent(e){
				let that = this
				this.loading = true 
				switch(e.type){
					case 'share':
						request({
						    params: {
						        r: 'smart-form/form/share',
						    },
							method: 'post',
							data:{
								template_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 'copy':
						request({
						    params: {
						        r: 'smart-form/form/copy',
						    },
							method: 'post',
							data:{
								template_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;
					case 'delete':
						request({
						    params: {
						        r: 'smart-form/form/delete',
						    },
							method: 'post',
							data:{
								id:e.item.id
							},
						}).then(res=>{
							// console.log(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>
	.b_box{
		min-height: 100vh;
		    background: #f3f3f3;

	}
	.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;
	}
	.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;
	}
	.nav{
		background: #ffffff;
		border-radius: 5px;
		padding: 26px 24px;
		display: flex;
		align-items: center;
		
		justify-content: space-between;
		margin-bottom: 10px;
	}
	.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;
	}
	.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>