|
@@ -0,0 +1,334 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <el-drawer v-model="visible" size="80%" destroy-on-close :close-on-click-modal="false" :with-header="false">
|
|
|
|
|
+ <el-container class="flex-column">
|
|
|
|
|
+ <div class="drawer-detail-main">
|
|
|
|
|
+ <div class="drawer-detail-header">
|
|
|
|
|
+ <div class="drawer-detail-header-body">
|
|
|
|
|
+ <div class="drawer-detail-header-left">{{titleMap[mode]}}</div>
|
|
|
|
|
+ <div class="drawer-detail-header-left">
|
|
|
|
|
+ <el-button type="default" icon="el-icon-close" @click="visible=false"></el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <el-main class="nopadding">
|
|
|
|
|
+ <el-container>
|
|
|
|
|
+ <el-aside width="300px">
|
|
|
|
|
+ <div class="design-title">选择组件右侧进行编辑</div>
|
|
|
|
|
+ <div class="design-box">
|
|
|
|
|
+ <el-row :gutter="15">
|
|
|
|
|
+ <el-col span="8">
|
|
|
|
|
+ <div class="design-item" @click="designCom('image')">
|
|
|
|
|
+ <div class="item-icon"><el-icon size="22"><el-icon-picture /></el-icon></div>
|
|
|
|
|
+ <div class="name">图片组件</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col span="8">
|
|
|
|
|
+ <div class="design-item" @click="designCom('text')">
|
|
|
|
|
+ <div class="item-icon"><el-icon size="22"><el-icon-edit /></el-icon></div>
|
|
|
|
|
+ <div class="name">文本组件</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col span="8">
|
|
|
|
|
+ <div class="design-item" @click="designCom('form')">
|
|
|
|
|
+ <div class="item-icon"><el-icon size="22"><el-icon-tickets /></el-icon></div>
|
|
|
|
|
+ <div class="name">表单组件</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ <el-col span="8">
|
|
|
|
|
+ <div class="design-item" @click="designCom('line')">
|
|
|
|
|
+ <div class="item-icon"><el-icon size="22"><el-icon-operation /></el-icon></div>
|
|
|
|
|
+ <div class="name">辅助空白</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-col>
|
|
|
|
|
+ </el-row>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-aside>
|
|
|
|
|
+ <el-container>
|
|
|
|
|
+ <el-main class="nopaddings">
|
|
|
|
|
+ <div class="design-edit">
|
|
|
|
|
+ <div class="edit-title">{{ pageData.title }}</div>
|
|
|
|
|
+ <div class="edit-content" v-if="designControl.length > 0">
|
|
|
|
|
+ <draggable v-model="designControl" animation="200">
|
|
|
|
|
+ <template #item="{ element,index }">
|
|
|
|
|
+ <div class="control-item">
|
|
|
|
|
+ <div :class="element.active?'left active':'left'">{{ element.name }}</div>
|
|
|
|
|
+ <div :class="element.active?'edit-image active':'edit-image'" v-if="element.type=='image'" @click="editImage(index)">
|
|
|
|
|
+ <el-image :style="{ width: element.active ? '356px' : '356px' }" :src="element.url" v-if="element.url"></el-image>
|
|
|
|
|
+ <div class="empty-image" v-else>
|
|
|
|
|
+ <el-image :style="{ width: element.active ? '356px' : '356px' }" src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/design/pic-decode.png"></el-image>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div :class="element.active?'edit-text active':'edit-text'" v-if="element.type=='text'" @click="editImage(index)">
|
|
|
|
|
+ <div class="text" v-if="element.content">{{ element.content }}</div>
|
|
|
|
|
+ <div class="empty-image" v-else>
|
|
|
|
|
+ 请填写文本信息
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div :class="element.active?'edit-text active':'edit-text'" v-if="element.type=='line'" @click="editImage(index)">
|
|
|
|
|
+ <div class="text" :style="{height:element.height+'px',background:'#f8f8f8'}">{{ element.content }}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div :class="element.active?'edit-text active':'edit-text'" v-if="element.type=='form'" @click="editImage(index)">
|
|
|
|
|
+ <div class="empty-form">表单占位</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="right" v-if="element.active">
|
|
|
|
|
+ <div class="right-item" @click="delItem(index)"><el-icon><el-icon-delete /></el-icon></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </draggable>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-main>
|
|
|
|
|
+ </el-container>
|
|
|
|
|
+ <el-aside width="400px" v-if="editControl">
|
|
|
|
|
+ <div class="edit-right-box">
|
|
|
|
|
+ <template v-if="editControl.type == 'image'">
|
|
|
|
|
+ <div class="title">上传图片</div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template v-if="editControl.type == 'text'">
|
|
|
|
|
+ <div class="title">编辑文本信息</div>
|
|
|
|
|
+ <div class="edit-form">
|
|
|
|
|
+ <el-input v-model="editControl.content" type="textarea" :rows="10" placeholder="请输入文本信息"></el-input>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-aside>
|
|
|
|
|
+ </el-container>
|
|
|
|
|
+ </el-main>
|
|
|
|
|
+ <el-footer style="text-align: right;">
|
|
|
|
|
+ <el-button @click="visible=false" size="large">取 消</el-button>
|
|
|
|
|
+ <el-button size="large" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
|
|
|
|
|
+ </el-footer>
|
|
|
|
|
+ </el-container>
|
|
|
|
|
+ </el-drawer>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import draggable from 'vuedraggable'
|
|
|
|
|
+export default {
|
|
|
|
|
+ components: {
|
|
|
|
|
+ draggable
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ loading: false,
|
|
|
|
|
+ isSaveing: false,
|
|
|
|
|
+ mode:"add",
|
|
|
|
|
+ titleMap:{
|
|
|
|
|
+ add:"设计落地页",
|
|
|
|
|
+ edit:"设计落地页"
|
|
|
|
|
+ },
|
|
|
|
|
+ visible:false,
|
|
|
|
|
+ pageData:{},
|
|
|
|
|
+ controlData:{
|
|
|
|
|
+ image:{"name":"图片控件","url":"","type":"image","active":false},
|
|
|
|
|
+ text:{"name":"文本控件","content":"","type":"text","active":false},
|
|
|
|
|
+ line:{"name":"辅助空白","height":1,"type":"line","active":false},
|
|
|
|
|
+ form:{"name":"表单控件","content":"form","type":"form","active":false}
|
|
|
|
|
+ },
|
|
|
|
|
+ designControl:[],
|
|
|
|
|
+ editControl:null
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ editImage(index){
|
|
|
|
|
+ this.designControl.forEach(item => item.active = false);
|
|
|
|
|
+ const editData = this.designControl[index];
|
|
|
|
|
+ editData.active = true;
|
|
|
|
|
+ this.editControl = editData
|
|
|
|
|
+ },
|
|
|
|
|
+ delItem(index){
|
|
|
|
|
+ this.$confirm(`确定要删除此组件吗?`, '提示', {
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ }).then(async ()=>{
|
|
|
|
|
+ this.designControl.splice(index, 1);
|
|
|
|
|
+ if (this.editControl === this.designControl[index]) {
|
|
|
|
|
+ this.editControl = null;
|
|
|
|
|
+ }
|
|
|
|
|
+ }).catch(()=>{})
|
|
|
|
|
+ },
|
|
|
|
|
+ designCom(type){
|
|
|
|
|
+ var controlData = {};
|
|
|
|
|
+ switch (type) {
|
|
|
|
|
+ case "form":
|
|
|
|
|
+ controlData = this.controlData.form
|
|
|
|
|
+ break;
|
|
|
|
|
+ case "image":
|
|
|
|
|
+ controlData = this.controlData.image
|
|
|
|
|
+ break;
|
|
|
|
|
+ case "line":
|
|
|
|
|
+ controlData = this.controlData.line
|
|
|
|
|
+ break;
|
|
|
|
|
+ case "text":
|
|
|
|
|
+ default:
|
|
|
|
|
+ controlData = this.controlData.text
|
|
|
|
|
+ break;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.designControl.push({...controlData})
|
|
|
|
|
+ },
|
|
|
|
|
+ open(mode = 'add'){
|
|
|
|
|
+ this.mode = mode;
|
|
|
|
|
+ this.visible = true;
|
|
|
|
|
+ return this
|
|
|
|
|
+ },
|
|
|
|
|
+ //表单注入数据
|
|
|
|
|
+ setData(data){
|
|
|
|
|
+ this.pageData = JSON.parse(JSON.stringify(data));
|
|
|
|
|
+ if (data.rules) {
|
|
|
|
|
+ this.formData = data.rules
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ async submit(){
|
|
|
|
|
+ // var validate = await this.$refs.dialogForm.validate().catch(()=>{});
|
|
|
|
|
+ // if(!validate){ return false }
|
|
|
|
|
+ if (this.designControl.length == 0) return this.$message.error("请至少需使用一个组件")
|
|
|
|
|
+ var formData = {};
|
|
|
|
|
+ let submitData = JSON.parse(JSON.stringify(this.formData));
|
|
|
|
|
+ formData.rules = submitData;
|
|
|
|
|
+ formData.id = this.pageData.id;
|
|
|
|
|
+ formData.link_code = this.pageData.link_code;
|
|
|
|
|
+ console.log("formData",this.designControl)
|
|
|
|
|
+ return ;
|
|
|
|
|
+ this.isSaveing = true;
|
|
|
|
|
+ var resp = await this.$API.page.save.post(formData);
|
|
|
|
|
+ this.isSaveing = false;
|
|
|
|
|
+ if (resp.code == 0) {
|
|
|
|
|
+ return this.$message.error(resp.msg);
|
|
|
|
|
+ }
|
|
|
|
|
+ this.$message.success(resp.msg);
|
|
|
|
|
+ this.visible = false;
|
|
|
|
|
+ this.formData = {status:1,number:0};
|
|
|
|
|
+ this.$emit("success");
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style>
|
|
|
|
|
+.edit-right-box .title{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ padding: 0 10px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ line-height: 40px;
|
|
|
|
|
+ border-bottom: 1px solid #f8f8f8;
|
|
|
|
|
+}
|
|
|
|
|
+.empty-form{
|
|
|
|
|
+ height: 220px;
|
|
|
|
|
+ background-color: #f8f8f8;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+}
|
|
|
|
|
+.nopaddings{
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ background-color: #f1f1f1;
|
|
|
|
|
+}
|
|
|
|
|
+.edit-right-box .edit-form{
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+}
|
|
|
|
|
+.control-item{
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+}
|
|
|
|
|
+.control-item .right{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: -43px;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ width: 36px;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ background-color: #0256FF;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ padding: 4px 0;
|
|
|
|
|
+}
|
|
|
|
|
+.control-item .right .right-item{
|
|
|
|
|
+ padding: 5px 0;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+}
|
|
|
|
|
+.control-item .left.active{
|
|
|
|
|
+ background: #0256FF;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+}
|
|
|
|
|
+.control-item .left.active::before{
|
|
|
|
|
+ background: #0256FF;
|
|
|
|
|
+}
|
|
|
|
|
+.control-item .left{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 6px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ left: -100px;
|
|
|
|
|
+ width: 86px;
|
|
|
|
|
+ height: 32px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 32px;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ border-radius: 3px;
|
|
|
|
|
+}
|
|
|
|
|
+.control-item .left::before{
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ width: 10px;
|
|
|
|
|
+ height: 10px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ -webkit-transform: rotate(45deg);
|
|
|
|
|
+ transform: rotate(45deg);
|
|
|
|
|
+ top: 50%;
|
|
|
|
|
+ right: -5px;
|
|
|
|
|
+ margin-top: -5px;
|
|
|
|
|
+}
|
|
|
|
|
+.design-title{
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+}
|
|
|
|
|
+.design-box{
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+}
|
|
|
|
|
+.design-item{
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ border-radius: 5px;
|
|
|
|
|
+ background-color: #f1f1f1;
|
|
|
|
|
+ padding: 10px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+}
|
|
|
|
|
+.design-edit{
|
|
|
|
|
+ width: 360px;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+}
|
|
|
|
|
+.design-edit .edit-title{
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ background-color: #f8f8f8;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ padding: 10px 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+}
|
|
|
|
|
+.design-edit .edit-content{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+}
|
|
|
|
|
+.edit-image,.edit-text{
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ border: 2px solid transparent;
|
|
|
|
|
+}
|
|
|
|
|
+.edit-image.active{
|
|
|
|
|
+ border: 2px solid var(--el-color-primary);
|
|
|
|
|
+}
|
|
|
|
|
+.edit-text{
|
|
|
|
|
+ min-height: 40px;
|
|
|
|
|
+}
|
|
|
|
|
+.edit-text.active{
|
|
|
|
|
+ border: 2px solid var(--el-color-primary);
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|