页面设计组件设置添加url页面跳转

zkqy-ui/src/views/asEditor/components/rightslider/captiontextsstyle/index.vue

@@ -28,6 +28,15 @@
 
       <div style="height: 10px" />
 
+      <!-- 跳转页面 -->
+      <el-form-item label="url">
+        <el-select v-model="datas.toPage" placeholder="请选择跳转页面">
+          <el-option v-for="item in dataList" :key="item.index" :label="item.id" :value="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <div style="height: 10px" />
+
       <!-- 显示位置 -->
       <el-form-item label="显示位置">
         <div class="weiz">
@@ -226,6 +235,8 @@
 </template>
 
 <script>
+import { listmobilePageData } from "@/api/asEditor/index.js";
+
 export default {
   name: 'captiontextsstyle',
   props: {
@@ -240,6 +251,8 @@ export default {
       if (value.length === 0) callback(new Error('请输入有效数字'))
     }
     return {
+      // 移动端数据表格数据
+      dataList: [],
       options: [],
       rules: {
         wordSize: [{ required: true, validator: checkAge, trigger: 'blur' }],
@@ -273,7 +286,19 @@ export default {
       ],
     }
   },
-  methods: {},
+
+  created() {
+    this.getList();
+  },
+
+  methods: {
+    getList() {
+      this.loading = true;
+      listmobilePageData(this.queryParams).then(response => {
+        this.dataList = response.rows;
+      });
+    },
+  },
 }
 </script>
 

zkqy-ui/src/views/asEditor/components/rightslider/commoditysearchstyle/index.vue

@@ -35,6 +35,15 @@
 
       <div style="height: 20px" />
 
+      <!-- 跳转页面 -->
+      <el-form-item label="url">
+        <el-select v-model="datas.toPage" placeholder="请选择跳转页面">
+          <el-option v-for="item in dataList" :key="item.index" :label="item.id" :value="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <div style="height: 20px" />
+
       <!-- 显示位置 -->
       <el-form-item class="lef" label="显示位置">
         <div class="weiz">
@@ -183,6 +192,7 @@
 
 <script>
 import vuedraggable from 'vuedraggable' //拖拽组件
+import { listmobilePageData } from "@/api/asEditor/index.js";
 
 export default {
   name: 'commoditysearchstyle',
@@ -192,6 +202,8 @@ export default {
   components: { vuedraggable },
   data() {
     return {
+      // 移动端数据表格数据
+      dataList: [],
       predefineColors: [
         // 颜色选择器预设
         '#ff4500',
@@ -218,7 +230,20 @@ export default {
       },
     }
   },
+
+  created() {
+    this.getList();
+  },
+
   methods: {
+    getList() {
+      this.loading = true;
+      listmobilePageData(this.queryParams).then(response => {
+        this.dataList = response.rows;
+      });
+    },
+
+    
     /* 添加热词 */
     addHotords() {
       this.datas.hotords.push({

zkqy-ui/src/views/asEditor/components/rightslider/noticestyle/index.vue

@@ -11,13 +11,20 @@
       size="small"
       class="lef"
     >
-      <el-form-item
-        label="公告"
-        :hide-required-asterisk="true"
-        prop="noticeText"
+    
+    <el-form-item
+      label="公告"
+      :hide-required-asterisk="true"
+      prop="noticeText"
       >
-        <el-input v-model="datas.noticeText" placeholder="请输入公告" />
-      </el-form-item>
+      <el-input v-model="datas.noticeText" placeholder="请输入公告" />
+    </el-form-item>
+  
+    <el-form-item label="url">
+      <el-select v-model="datas.toPage" placeholder="请选择跳转页面">
+        <el-option v-for="item in dataList" :key="item.index" :label="item.id" :value="item.id"></el-option>
+      </el-select>
+    </el-form-item>
 
       <div style="height: 10px" />
 
@@ -51,6 +58,7 @@
 </template>
 
 <script>
+import { listmobilePageData } from "@/api/asEditor/index.js";
 export default {
   name: 'noticestyle',
   props: {
@@ -58,6 +66,8 @@ export default {
   },
   data() {
     return {
+      // 移动端数据表格数据
+      dataList: [],
       rules: {
         //校验表单输入
         noticeText: [
@@ -87,6 +97,19 @@ export default {
       ],
     }
   },
+
+  created() {
+    this.getList();
+  },
+
+  methods: {
+    getList() {
+      this.loading = true;
+      listmobilePageData(this.queryParams).then(response => {
+        this.dataList = response.rows;
+      });
+    },
+  },
 }
 </script>
 

zkqy-ui/src/views/asEditor/components/rightslider/storeinformationstyle/index.vue

@@ -77,6 +77,13 @@
           maxlength="45"
         ></el-input>
       </el-form-item>
+
+
+      <el-form-item label="url">
+        <el-select v-model="datas.toPage" placeholder="请选择跳转页面">
+          <el-option v-for="item in dataList" :key="item.index" :label="item.id" :value="item.id"></el-option>
+        </el-select>
+      </el-form-item>
     </el-form>
 
     <!-- 上传图片 -->
@@ -86,6 +93,8 @@
 
 <script>
 import uploadimg from '../../uploadImg' //图片上传
+import { listmobilePageData } from "@/api/asEditor/index.js";
+
 
 export default {
   name: 'storeinformationstyle',
@@ -94,6 +103,7 @@ export default {
   },
   data() {
     return {
+      dataList: [],
       danqian: '', //当前选中的是背景还是头像
       rules: {
         name: [{ required: true, message: '请输入店铺名称', trigger: 'blur' }],
@@ -122,17 +132,31 @@ export default {
       ],
     }
   },
+
+  created() {
+    this.getList();
+  },
+
   methods: {
+    getList() {
+      this.loading = true;
+      listmobilePageData(this.queryParams).then(response => {
+        this.dataList = response.rows;
+      });
+    },
+  
     /* 上传图片 */
     uploadI(res) {
       this.danqian = res
       this.$refs.upload.showUpload()
     },
+
     // 提交
     uploadInformation(res) {
       this.datas[this.danqian] = res
     },
   },
+
   components: { uploadimg },
 }
 </script>

zkqy-ui/src/views/asEditor/layout/home/home.vue

@@ -116,7 +116,7 @@ export default {
   methods: {
     initData(){
       getmobilePageData(13).then(response=>{
-        if(response.code == 200){
+        if(response.code==200){
           console.log(response.data);
          let {pageSetup,pageComponents}=JSON.parse(response.data.pageJson)
          this.getJSONList = JSON.parse(response.data.pageJson);

zkqy-ui/src/views/asEditor/layout/home/pageDesign.vue

@@ -88,6 +88,7 @@
                   border: item.active && deleShow ? '2px solid #155bd4' : '',
                 }"
                 @click.native="activeComponent(item, index)"
+                @dblclick.native="toPageComponent(item, index)"
                 class="componentsClass"
                 :data-type="item.type"
               >
@@ -281,6 +282,9 @@ export default {
   },
   data() {
     return {
+      clickTimer: null,
+      isSingleClick: false, // 是否是单击
+      clickTimer: null, // 存储定时器引用
       isEdit: false, //是否编辑
       dialogVisible: false,
       realTimeView: {
@@ -357,6 +361,10 @@ export default {
         if (response.code == 200) {
           //成功
           this.$modal.msgSuccess("保存成功");
+          this.$tab.closePage();
+          this.$router.push({
+            path: "/ydyq/h5Editor",
+          });
         } else {
           //失败
           this.$message.error(response.msg);
@@ -375,7 +383,7 @@ export default {
           this.$tab.closePage();
           this.$router.push({
             path: "/ydyq/h5Editor",
-        });
+          });
         } else {
           //失败
           this.$message.error(response.msg);
@@ -425,11 +433,13 @@ export default {
                 <br/>
               }
             `;
+          console.log(7777777777,this.pageComponents);
         } else {
           console.error("Content element was not found.");
         }
       });
     },
+
     handleClose(done) {
       this.$confirm("确认关闭？")
         .then((_) => {
@@ -723,22 +733,48 @@ export default {
      * @param {Object} res 当前组件对象
      */
     activeComponent(res, index) {
-      console.log(res, index);
-      this.index = index;
-      /* 切换组件 */
-      console.log('rightcom',res.style);
-      this.rightcom = res.style;
-      /* 丢样式 */
-      this.currentproperties = res.setStyle;
+      clearTimeout(this.clickTimer); // 清除可能存在的延迟执行的单击操作
+      this.clickTimer = setTimeout(() => {
+        // this.activeComponent(item, index);
+        // console.log(res, index);
+        this.index = index;
+        /* 切换组件 */
+        // console.log('rightcom',res.style);
+        this.rightcom = res.style;
+        /* 丢样式 */
+        this.currentproperties = res.setStyle;
 
-      /* 替换 */
-      utils.forEach(this.pageComponents, (res) => {
-        /* 修改选中 */
-        if (res.active === true) res.active = false;
-      });
+        /* 替换 */
+        utils.forEach(this.pageComponents, (res) => {
+          /* 修改选中 */
+          if (res.active === true) res.active = false;
+        });
 
-      /* 选中样式 */
-      res.active = true;
+        /* 选中样式 */
+        res.active = true
+      }, 300); // 延迟时间，根据需求调整，一般300ms足够区分单击和双击
+    },
+
+    toPageComponent(res, index) {
+      clearTimeout(this.clickTimer); // 双击时，清除单击的延时调用
+      console.log(9999)
+      let toPageData = this.getJSONData();
+      let toPageJSON = (JSON.parse(toPageData.pageJson))
+      console.log(toPageJSON,2222);
+      let toPageID = toPageJSON.pageComponents[index].setStyle.toPage;
+      console.log(toPageID,333);
+      getmobilePageData(toPageID).then((response) => {
+        if (response.code == 200) {
+          // console.log(111111111111, response.data);
+          let { pageSetup, pageComponents } = JSON.parse(
+            response.data.pageJson
+          );
+          this.pageComponents = pageComponents;
+          this.pageSetup = pageSetup;
+        } else {
+          this.$message.error("获取数据失败");
+        }
+      });
     },
 
     /**

zkqy-ui/src/views/asEditor/utils/componentProperties.js

@@ -10,6 +10,7 @@ componentProperties.set('captiontext', {
   active: true,
   style: 'captiontextsstyle',
   setStyle: {
+    toPage: '',
     text: '标题文字',
     name: '标题文字',//标题内容
     description: '',//描述内容
@@ -40,6 +41,7 @@ componentProperties.set('listswitching', {
   active: true,
   style: 'listswitchingstyle',
   setStyle: {
+    toPage: '',
     text: '商品',
     commodityType: 0,
     moditystyle: 0,
@@ -82,6 +84,7 @@ componentProperties.set('pictureads', {
   active: true,
   style: 'pictureadsstyle',
   setStyle: {
+    toPage: '',
     text: '图片广告',
     swiperType: 0,  // 选择模板
     borderRadius: 0,// 图片倒角
@@ -100,6 +103,7 @@ componentProperties.set('graphicnavigation', {
   active: true,
   style: 'graphicnavigationstyle',
   setStyle: {
+    toPage: '',
     text: '图文导航',
     imageList: [], // 图片导航列表
     navigationType: 0, //图片导航类型
@@ -121,11 +125,13 @@ componentProperties.set('richtext', {
   active: true,
   style: 'richtextstyle',
   setStyle: {
+    toPage: '',
     text: '富文本',
     myValue: '', //富文本内容
     backColor: 'rgb(249, 249, 249)', //背景颜色
   },
 })
+
 componentProperties.set('magiccube', {
   component: 'magiccube',
   text: '魔方',
@@ -133,6 +139,7 @@ componentProperties.set('magiccube', {
   active: true,
   style: 'magiccubestyle',
   setStyle: {
+    toPage: '',
     text: '魔方',
     rubiksCubeType: 0, // 魔方类型
     pageMargin: 0, //页面间距
@@ -166,6 +173,7 @@ componentProperties.set('magiccube', {
     ], //图片列表
   },
 })
+
 componentProperties.set('auxiliarysegmentation', {
   component: 'auxiliarysegmentation',
   text: '辅助分割',
@@ -173,6 +181,7 @@ componentProperties.set('auxiliarysegmentation', {
   active: true,
   style: 'auxiliarysegmentationstyle',
   setStyle: {
+    toPage: '',
     text: '辅助分割',
     blankHeight: 30, //空白高度
     segmentationtype: 0, //分割类型
@@ -181,6 +190,7 @@ componentProperties.set('auxiliarysegmentation', {
     bordertp: 'solid', //线的类型
   },
 })
+
 componentProperties.set('commoditysearch', {
   component: 'commoditysearch',
   text: '搜索',
@@ -188,6 +198,7 @@ componentProperties.set('commoditysearch', {
   active: true,
   style: 'commoditysearchstyle',
   setStyle: {
+    toPage: '',
     text: '搜索',
     heights: 28, //搜索栏高度
     position: 0, //显示位置
@@ -200,6 +211,7 @@ componentProperties.set('commoditysearch', {
     hotords: [], //热词
   },
 })
+
 componentProperties.set('storeinformation', {
   component: 'storeinformation',
   text: '店铺信息',
@@ -207,6 +219,7 @@ componentProperties.set('storeinformation', {
   active: true,
   style: 'storeinformationstyle',
   setStyle: {
+    toPage: '',
     text: '店铺信息',
     bakcgroundImg: '', //背景图片
     headPortrait: '', //店铺头像
@@ -215,6 +228,7 @@ componentProperties.set('storeinformation', {
     Discount: '在线支付满150减30，满100减20', //优惠信息
   },
 })
+
 componentProperties.set('entertheshop', {
   component: 'entertheshop',
   text: '单元格',
@@ -222,6 +236,7 @@ componentProperties.set('entertheshop', {
   active: true,
   style: 'entertheshopstyle',
   setStyle: {
+    toPage: '',
     text: '单元格',
     icon: '', // 左侧图标
     shopName: '左侧标题',
@@ -230,6 +245,7 @@ componentProperties.set('entertheshop', {
     http: {},
   },
 })
+
 componentProperties.set('notice', {
   component: 'notice',
   text: '公告',
@@ -237,12 +253,15 @@ componentProperties.set('notice', {
   active: true,
   style: 'noticestyle',
   setStyle: {
+    toPage: '',
+    toPage: '',
     text: '公告',
     noticeText: '请填写内容，如果过长，将会在手机上滚动显示', //内容
     backColor: 'rgb(255, 248, 233)', //背景颜色
     textColor: 'rgba(100, 101, 102)', //文字颜色
   },
 })
+
 componentProperties.set('videoss', {
   component: 'videoss',
   text: '视频',
@@ -250,6 +269,7 @@ componentProperties.set('videoss', {
   active: true,
   style: 'videostyle',
   setStyle: {
+    toPage: '',
     text: '视频',
     src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', // 视频地址
     coverUrl:null, // 封面地址
@@ -264,11 +284,13 @@ componentProperties.set('custommodule', {
   active: true,
   style: 'custommodulestyle',
   setStyle: {
+    toPage: '',
     text: '自定义模块',
     demo:'自定义内容',
     img:'https://img2.baidu.com/it/u=1905875968,4289754134&fm=26&fmt=auto&gp=0.jpg'
   },
 })
+
 componentProperties.set('communitypowder', {
   component: 'communitypowder',
   text: '社群涨粉',
@@ -276,6 +298,7 @@ componentProperties.set('communitypowder', {
   active: true,
   style: 'communitypowderstyle',
   setStyle: {
+    toPage: '',
     text: '社群涨粉',
     mainImg: '', //入口图片
     qrcodeImg: '', //二维码
@@ -285,6 +308,7 @@ componentProperties.set('communitypowder', {
     backColor: 'rgb(255, 255, 255)', //背景颜色
   },
 })
+
 componentProperties.set('storenotecard', {
   component: 'storenotecard',
   text: '文章模块',
@@ -292,6 +316,7 @@ componentProperties.set('storenotecard', {
   active: true,
   style: 'storenotecardstyle',
   setStyle: {
+    toPage: '',
     text: '文章模块',
     name: '这里显示专题名称', //专题名称
     commodityType: 0, // 选择模板
@@ -309,6 +334,7 @@ componentProperties.set('storenotecard', {
     http: {},
   },
 })
+
 componentProperties.set('crowdoperation', {
   component: 'crowdoperation',
   text: '人群运营',
@@ -316,9 +342,11 @@ componentProperties.set('crowdoperation', {
   active: true,
   style: 'crowdoperationstyle',
   setStyle: {
+    toPage: '',
     text: '人群运营',
   },
 })
+
 componentProperties.set('personalizedrecommendation', {
   component: 'personalizedrecommendation',
   text: '个性化推荐',
@@ -326,9 +354,11 @@ componentProperties.set('personalizedrecommendation', {
   active: true,
   style: 'personalizedrecommendationstyle',
   setStyle: {
+    toPage: '',
     text: '个性化推荐',
   },
 })
+
 componentProperties.set('onlineservice', {
   component: 'onlineservice',
   text: '在线客服',
@@ -336,9 +366,11 @@ componentProperties.set('onlineservice', {
   active: true,
   style: 'onlineservicestyle',
   setStyle: {
+    toPage: '',
     text: '在线客服',
   },
 })
+
 componentProperties.set('investigate', {
   component: 'investigate',
   text: '表单模块',
@@ -346,11 +378,13 @@ componentProperties.set('investigate', {
   active: true,
   style: 'investigatestyle',
   setStyle: {
+    toPage: '',
     text: '表单模块',
     title: '表单模块',
     jsonData: [], //value1为sass显示内容，value2为前端显示内容
   },
 })
+
 componentProperties.set('tabBar', {
   component: 'tabBar',
   text: '底部导航',
@@ -358,6 +392,7 @@ componentProperties.set('tabBar', {
   active: true,
   style: 'tabBarStyle',
   setStyle: {
+    toPage: '',
     text: '底部导航',
     activeColor: '#1989fa',
     inactiveColor: '#7d7e80',
@@ -369,6 +404,7 @@ componentProperties.set('tabBar', {
     iconList: [],
   },
 })
+
 componentProperties.set('follow', {
   component: 'follow',
   text: '关注公众号',
@@ -376,12 +412,14 @@ componentProperties.set('follow', {
   active: true,
   style: 'followStyle',
   setStyle: {
+    toPage: '',
     text: '关注公众号',
     heade: 'https://imgs.starfirelink.com/miniShop//logo_1618466110849.png',
     followName: '公众号名称',
     followAppId: '',
   },
 })
+
 componentProperties.set('suspension', {
   component: 'suspension',
   text: '悬浮按钮',
@@ -389,6 +427,7 @@ componentProperties.set('suspension', {
   active: true,
   style: 'suspensionstyle',
   setStyle: {
+    toPage: '',
     text: '悬浮按钮',
     linktype: '10',
     http: {},