移动端页面设计预览功能

zkqy-ui/src/views/asEditor/components/headerTop/index.vue

@@ -27,16 +27,16 @@
 </template>
 
 <script>
-import { Icon } from 'vant'
+import { Icon } from "vant";
 export default {
-  name: 'headerTop',
+  name: "headerTop",
   props: {
     pageSetup: Object,
   },
   components: {
-    [Icon.name]: Icon
+    [Icon.name]: Icon,
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>

zkqy-ui/src/views/asEditor/components/realTimeView/index2.vue

@@ -1,25 +1,28 @@
 <template>
-    <div class="shop">
-        <el-dialog :visible.sync="datas.show" width="414px" top="8vh">
-            <img src="../../assets/images/phoneTop.png" style="width: 375px" />
-      <section  v-if="datas.show" class="phoneAll" ref="imageTofile" id="imageTofile">
+  <div class="shop">
+    <el-dialog :visible.sync="show" width="414px" top="8vh">
+      <img src="../../assets/images/phoneTop.png" style="width: 375px" />
+      <section v-if="show" class="phoneAll" ref="imageTofile" id="imageTofile">
         <!-- 导航 -->
-        <headerTop class="containwe-padding" :name="pageSetup" />
+        <headerTop
+          class="containwe-padding"
+          :name="pageSetup"
+          :pageSetup="pageSetup"
+        />
         <!-- 收藏组件 -->
         <div class="collect" v-if="orgid">
           <collect></collect>
         </div>
         <!-- 动态组件 -->
-        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
-          <section
-            class="phone-container"
-            :style="{
-              'background-color': pageSetup.bgColor,
-              backgroundImage: 'url(' + pageSetup.bgImg + ')'
-            }"
-          >
-            <div v-for="(item, index) in pageComponents" :key="index">
-              <!-- <keep-alive :include="item.component">
+        <section
+          class="phone-container"
+          :style="{
+            'background-color': pageSetup.bgColor,
+            backgroundImage: 'url(' + pageSetup.bgImg + ')',
+          }"
+        >
+          <div v-for="(item, index) in pageComponents" :key="index">
+            <!-- <keep-alive :include="item.component">
                 <component
                   :key="index"
                   :is="item.component"
@@ -29,66 +32,65 @@
                   @clickBanner="clickBanner"
                 />
               </keep-alive> -->
-              <!-- #ifdef H5-->
-              <keep-alive :include="item.component">
-                    <component
-                      :key="index"
-                      :is="item.component"
-                      :datas="item.setStyle"
-                      class="componentsClass"
-                      :data-type="item.type"
-                      @clickBanner="clickBanner"
-                    />
-              </keep-alive>
-              <!-- #endif -->
-              <!-- #ifdef MP-WEIXIN -->
-              <placementarea
-                v-if="item.component == 'placementarea'"
+            <!-- #ifdef H5-->
+            <keep-alive :include="item.component">
+              <component
+                :key="index"
+                :is="item.component"
                 :datas="item.setStyle"
                 class="componentsClass"
                 :data-type="item.type"
                 @clickBanner="clickBanner"
               />
-              <!-- #endif -->
-            </div>
-          </section>
-        </van-pull-refresh>
+            </keep-alive>
+            <!-- #endif -->
+            <!-- #ifdef MP-WEIXIN -->
+            <placementarea
+              v-if="item.component == 'placementarea'"
+              :datas="item.setStyle"
+              class="componentsClass"
+              :data-type="item.type"
+              @clickBanner="clickBanner"
+            />
+            <!-- #endif -->
+          </div>
+        </section>
       </section>
-      <van-loading v-if="loading" size="24px" vertical>加载中</van-loading>
-      </el-dialog>
-    </div>
-  </template>
-  
-  <script>
-  import headerTop from '../headerTop/index.vue'
-  import collect from '../collect/index.vue'
+      <!-- <van-loading v-if="loading" size="24px" vertical>加载中</van-loading> -->
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import headerTop from "../headerTop/index.vue";
+import collect from "../collect/index.vue";
 //   import { getmobilePageData } from '../request/API.js'
-  
-  import {
-    captiontext,
-    placementarea,
-    pictureads,
-    graphicnavigation,
-    richtext,
-    magiccube,
-    auxiliarysegmentation,
-    commoditysearch,
-    storeinformation,
-    entertheshop,
-    notice,
-    videoss,
-    custommodule,
-    communitypowder,
-    storenotecard,
-    crowdoperation,
-    personalizedrecommendation,
-    onlineservice,
-    listswitching,
-    investigate,
-    tabBar,
-    follow,
-    suspension
-  } from '../componentscom/index.js'
+
+import {
+  captiontext,
+  placementarea,
+  pictureads,
+  graphicnavigation,
+  richtext,
+  magiccube,
+  auxiliarysegmentation,
+  commoditysearch,
+  storeinformation,
+  entertheshop,
+  notice,
+  videoss,
+  custommodule,
+  communitypowder,
+  storenotecard,
+  crowdoperation,
+  personalizedrecommendation,
+  onlineservice,
+  listswitching,
+  investigate,
+  tabBar,
+  follow,
+  suspension,
+} from "../componentscom/index.js";
 //   import captiontext from '../../../components/captiontext/index.vue'
 //   import placementarea from '../../../components/placementarea/index.vue'
 //   import pictureads from '../../../components/pictureads/index.vue'
@@ -112,227 +114,148 @@
 //   import tabBar from '../../../components/tabBar/index.vue'
 //   import follow from '../../../components/follow/index.vue'
 //   import suspension from '../../../components/suspension/index.vue'
-import { Loading } from 'vant';
-  export default {
-    name: 'shop',
-    prop:{
-        datas: {
-            show: false,
-        },
-        val:Object
-    },
-    // inject: ['reload'],
-    components: {
-    [Loading.name]: Loading
+import { Loading } from "vant";
+export default {
+  name: "shop",
+  props: {
+    val: Object,
   },
-    data() {
-      return {
-        isLoading: false,
-        orgid: false,
-        pageComponents: [],
-        pageSetup: {
-          // 页面设置属性
-          name: '页面标题', //页面名称
-          details: '', //页面描述
-          isPerson: false, // 是否显示个人中心
-          isBack: true, // 是否返回按钮
-          titleHeight: 35, // 高度
-          bgColor: 'rgba(249, 249, 249, 10)', //背景颜色
-          bgImg: '' // 背景图片
-        },
-        tota: null
-      }
-    },
-    activated() {
-      //不能使用其他方式设置滚动条高度，否则回导致下拉刷新失效
-      // setTimeout(() => {
-      //   window.scroll(0, this.$store.state.scroll)
-      // }, 500)
-    },
-    async created() {
-        console.log('creat');
-      // 是否是iframe使用
-      /* if (this.$route.query.type === 'iframe') {
-        window.addEventListener('message', e => {
-          console.log(e.data, '-------------message')
-          let datas = e.data
-          this.pageComponents = JSON.parse(datas.component)
-          this.pageSetup = JSON.parse(datas.templateJson)
-        })
-        return
+  // inject: ['reload'],
+  data() {
+    return {
+      show: false,
+      isLoading: false,
+      orgid: false,
+      pageComponents: [],
+      pageSetup: {
+        // 页面设置属性
+        name: "页面标题", //页面名称
+        details: "", //页面描述
+        isPerson: false, // 是否显示个人中心
+        isBack: true, // 是否返回按钮
+        titleHeight: 35, // 高度
+        bgColor: "rgba(249, 249, 249, 10)", //背景颜色
+        bgImg: "", // 背景图片
+      },
+      tota: null,
+    };
+  },
+  activated() {},
+  async created() {
+    console.log("creat");
+  },
+  mounted() {
+    //   this.initData()
+  },
+  watch: {},
+  methods: {
+    changeShowHandler(res = true) {
+      if (res) {
+        this.initData();
+        this.$nextTick(() => {
+          this.show = true;
+        });
+      } else {
+        this.show = false;
       }
-  
-      await this.loadShopData() */
-      // let miniprogram = window.localStorage.getItem('miniprogram')
-      // console.log(miniprogram, '-------------------miniprogram')
     },
-    mounted() {
-    //   this.initData()
+    initData() {
+      console.log(this.val);
+      this.getJSONList = this.val;
+      let { component, templateJson } = this.getJSONList;
+      this.pageComponents = JSON.parse(component);
+      this.pageSetup = JSON.parse(templateJson);
+      console.log(JSON.parse(JSON.stringify(this.pageSetup)));
     },
-    watch: {
-        datas: {
-          handler(val) {
-            if(val.show=true){
-                // 取val中的数据渲染页面
-            };
-          },
-          deep: true,
-          immediate: true
-        }
+
+    onRefresh() {
+      setTimeout(() => {
+        this.isLoading = false;
+      }, 1000);
     },
-    methods: {
-      async initData() {
-        try {
-            console.log(this.val);
-          console.log(111);
-          let res = {};
-          console.log(res)
-          if (res.code == 200) {
-            console.log(res.data)
-            this.getJSONList = res.data
-            console.log(this.getJSONList);
-            let pageJson=JSON.parse(this.getJSONList.pageJson)
-            this.pageComponents = pageJson.pageComponents
-            this.pageSetup = pageJson.pageSetup
-            console.log(this.pageSetup);
-          } else {
-            // 弹窗提示异常
-            const msg = res.msg
-            // uni.showToast({
-            //   title: msg,
-            //   icon: 'none'
-            // })
-          }
-        } catch (e) {
-          console.log(e);
-          // 弹窗提示异常
-        //   uni.showToast({
-        //     title: '获取数据失败',
-        //     icon: 'none',
-        //     duration: 2000 // 可选，显示时长，默认2s
-        //   })
-        }
-        /* getData(8).then((response) => {
-          if(response.code==200){
-            console.log(response.data);
-            this.getJSONList = response.data;
-            console.log(this.getJSONList);
-            console.log(this.getJSONList.component);
-            this.pageComponents=JSON.parse(this.getJSONList.component)
-            this.pageSetup=JSON.parse(this.getJSONList.templateJson)
-          }else{
-            this.$message.error("获取数据失败")
-          }
-        }) */
-      },
-  
-      onRefresh() {
-        setTimeout(() => {
-          this.isLoading = false
-        }, 1000)
-      },
-  
-      async loadShopData() {
-        try {
-          if (this.$route.query.orgId) {
-            localStorage.setItem('shopTemplateId', this.$route.query.orgId)
-          }
-  
-          this.tota = this.$toast.loading({
-            message: '加载中...',
-            forbidClick: true,
-            duration: 0,
-            loadingType: 'spinner',
-            overlay: true
-          })
-          this.orgid = false
-          //  模板数据替换 shopTemplateData.data.shopTemplate 此处可替换成接口
-          /* let shopTemplateData = {
-            code: 0,
-            success: true,
-            error: false ,
-            data: {
-              shopTemplate: {            
-               "id": null,
-               "name": "页面标题",
-               "templateJson": '{"name":"页面标题","details":"","isPerson":false,"isBack":true,"titleHeight":35,"bgColor":"rgba(249, 249, 249, 10)","bgImg":""}',
-               "component": '[{"component":"notice","text":"公告","type":"1-7","active":true,"style":"noticestyle","setStyle":{"text":"公告","noticeText":"111111111111111111111","backColor":"rgb(255, 248, 233)","textColor":"rgba(100, 101, 102)"}},{"component":"captiontext","text":"标题文字","type":"1-3","active":false,"style":"captiontextsstyle","setStyle":{"text":"标题文字","name":"哈哈哈哈哈哈","description":"2222222222","wordSize":16,"descriptionSize":12,"wordWeight":400,"positions":"left","descriptionWeight":200,"wordColor":"rgba(50, 50, 51, 10)","descriptionColor":"rgba(150, 151, 153, 10)","backColor":"rgba(255, 255, 255, 10)","borderBott":false,"wordHeight":24,"more":{"show":false,"type":1,"text":"查看更多","httpType":10,"http":""}}}]',
-              }
-            },
-            msg: '成功'
-          }
-          console.log(shopTemplateData, '----------shopTemplateData')
-          if (shopTemplateData.code !== 0) {
-            return this.$toast(shopTemplateData.msg)
-          } */
-          let datas = shopTemplateData.data.shopTemplate
-          if (!datas) return this.tota.clear()
-          this.pageComponents = JSON.parse(datas.component)
-          this.pageSetup = JSON.parse(datas.templateJson)
-        } catch (error) {
-          console.error(error, '--------------loadShopData error')
-        } finally {
-          this.tota.clear()
+
+    async loadShopData() {
+      try {
+        if (this.$route.query.orgId) {
+          localStorage.setItem("shopTemplateId", this.$route.query.orgId);
         }
-      },
-  
-      clickBanner() {
-        console.log('clickBanner')
+
+        // this.tota = this.$toast.loading({
+        //   message: "加载中...",
+        //   forbidClick: true,
+        //   duration: 0,
+        //   loadingType: "spinner",
+        //   overlay: true,
+        // });
+        this.orgid = false;
+        let datas = shopTemplateData.data.shopTemplate;
+        if (!datas) return this.tota.clear();
+        this.pageComponents = JSON.parse(datas.component);
+        this.pageSetup = JSON.parse(datas.templateJson);
+      } catch (error) {
+        console.error(error, "--------------loadShopData error");
+      } finally {
+        this.tota.clear();
       }
     },
-  
-    components: {
-      collect,
-      headerTop,
-      captiontext,
-      placementarea,
-      pictureads,
-      graphicnavigation,
-      richtext,
-      magiccube,
-      auxiliarysegmentation,
-      commoditysearch,
-      storeinformation,
-      entertheshop,
-      notice,
-      videoss,
-      custommodule,
-      communitypowder,
-      storenotecard,
-      crowdoperation,
-      personalizedrecommendation,
-      onlineservice,
-      listswitching,
-      investigate,
-      tabBar,
-      follow,
-      suspension
-    }
+
+    clickBanner() {
+      console.log("clickBanner");
+    },
+  },
+
+  components: {
+    [Loading.name]: Loading,
+    collect,
+    headerTop,
+    captiontext,
+    placementarea,
+    pictureads,
+    graphicnavigation,
+    richtext,
+    magiccube,
+    auxiliarysegmentation,
+    commoditysearch,
+    storeinformation,
+    entertheshop,
+    notice,
+    videoss,
+    custommodule,
+    communitypowder,
+    storenotecard,
+    crowdoperation,
+    personalizedrecommendation,
+    onlineservice,
+    listswitching,
+    investigate,
+    tabBar,
+    follow,
+    suspension,
+  },
+};
+</script>
+
+<style lang="scss">
+@import "../../assets/css/minx.scss";
+.shop {
+  .phoneAll {
+    position: relative;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .collect {
+    position: absolute;
+    top: 28px;
+    right: 8px;
+    z-index: 1000;
+  }
+  .phone-container {
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
   }
-  </script>
-  
-  <style lang="scss">
-  @import '../../assets/css/minx.scss';
-  .shop {
-    .phoneAll {
-      position: relative;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-    .collect {
-      position: absolute;
-      top: 28px;
-      right: 8px;
-      z-index: 1000;
-    }
-    .phone-container {
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-    }
-    ::v-deep.van-pull-refresh {
-      width: 100%;
-    }
+  ::v-deep.van-pull-refresh {
+    width: 100%;
   }
-  </style>
-  
+}
+</style>

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

@@ -1,6 +1,14 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"           @submit.native.prevent >
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+      @submit.native.prevent
+    >
       <el-form-item label="表单名称" prop="name">
         <el-input
           v-model="queryParams.name"
@@ -10,17 +18,16 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button 
-          type="primary" 
-          icon="el-icon-search" 
-          size="mini" 
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
           @click="handleQuery"
-        >搜索</el-button>
-        <el-button 
-          icon="el-icon-refresh" 
-          size="mini" 
-          @click="resetQuery"
-        >重置</el-button>
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
@@ -33,7 +40,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:data:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -44,7 +52,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['system:data:edit']"
-        >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -55,7 +64,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['system:data:remove']"
-        >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -65,21 +75,33 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['system:data:export']"
-        >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="dataList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键" align="center" prop="id" />
       <el-table-column label="名称" align="center" prop="name" />
-      <el-table-column label="模版json" align="center" prop="pageJson" >
+      <el-table-column label="模版json" align="center" prop="pageJson">
         <template slot-scope="scope">
           {{ scope.row.pageJson | truncateJson }}
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-dropdown>
             <el-button type="warning" plain size="small">
@@ -93,7 +115,8 @@
                   icon="el-icon-edit"
                   @click="handleUpdate(scope.row)"
                   v-hasPermi="['system:data:edit']"
-                >修改</el-button>
+                  >修改</el-button
+                >
               </el-dropdown-item>
               <el-dropdown-item>
                 <el-button
@@ -102,25 +125,26 @@
                   icon="el-icon-delete"
                   @click="handleDelete(scope.row)"
                   v-hasPermi="['system:data:remove']"
-                >删除</el-button>
+                  >删除</el-button
+                >
               </el-dropdown-item>
-              <el-dropdown-item>
+              <el-dropdown-item v-show="scope.row.isIndex != 'true'">
                 <el-button
-                  v-if="isIndex"
                   size="mini"
                   type="text"
                   icon="el-icon-tickets"
                   @click="isPageHome(scope.row)"
-                >设为首页</el-button>
+                  >设为首页</el-button
+                >
               </el-dropdown-item>
             </el-dropdown-menu>
-          </el-dropdown>                 
+          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -131,10 +155,18 @@
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="名称" prop="name">
-          <el-input v-model="form.name" type="textarea" placeholder="请输入内容" />
+          <el-input
+            v-model="form.name"
+            type="textarea"
+            placeholder="请输入内容"
+          />
         </el-form-item>
         <el-form-item label="模版json" prop="pageJson">
-          <el-input v-model="form.pageJson" type="textarea" placeholder="请输入内容" />
+          <el-input
+            v-model="form.pageJson"
+            type="textarea"
+            placeholder="请输入内容"
+          />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -146,13 +178,13 @@
 </template>
 
 <script>
-import { 
+import {
   addmobilePageData,
   getmobilePageData,
   listmobilePageData,
   updatemobilePageData,
   delmobilePageData,
-  setAsHomePage
+  setAsHomePage,
 } from "@/api/asEditor/index.js";
 
 export default {
@@ -189,15 +221,16 @@ export default {
       // 表单参数
       form: {},
       // 表单校验
-      rules: {
-      }
+      rules: {},
     };
   },
 
   filters: {
     truncateJson(jsonStr, maxLength = 80) {
-      if (!jsonStr) return '';
-      return jsonStr.length <= maxLength ? jsonStr : `${jsonStr.substring(0, maxLength)}...`;
+      if (!jsonStr) return "";
+      return jsonStr.length <= maxLength
+        ? jsonStr
+        : `${jsonStr.substring(0, maxLength)}...`;
     },
   },
 
@@ -208,56 +241,56 @@ export default {
     // 是否为首页
     isPageHome(row) {
       console.log(row);
-      setAsHomePage(row).then(response => {
-        this.isIndex = true
+      setAsHomePage(row).then((response) => {
+        this.isIndex = true;
       });
     },
 
     /** 查询移动端数据列表 */
     getList() {
       this.loading = true;
-      listmobilePageData(this.queryParams).then(response => {
+      listmobilePageData(this.queryParams).then((response) => {
         this.dataList = response.rows;
         this.total = response.total;
         this.loading = false;
       });
     },
-    
+
     // 取消按钮
     cancel() {
       this.open = false;
       this.reset();
     },
-    
+
     // 表单重置
     reset() {
       this.form = {
         id: null,
         name: null,
-        pageJson: null
+        pageJson: null,
       };
       this.resetForm("form");
     },
-    
+
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
       this.getList();
     },
-    
+
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    
+
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
-    
+
     /** 新增按钮操作 */
     handleAdd() {
       // this.reset();
@@ -269,15 +302,15 @@ export default {
         path: "/pageDesign",
       });
     },
-   
+
     /** 修改按钮操作 */
     handleUpdate(row) {
-      let {id}=row;
+      let { id } = row;
       this.$router.push({
         path: "/pageDesign",
         query: { id: id },
       });
-      
+
       // this.reset();
       // const id = row.id || this.ids
       // updatemobilePageData(id).then(response => {
@@ -286,19 +319,19 @@ export default {
       //   this.title = "修改移动端数据";
       // });
     },
-    
+
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
-            updatemobilePageData(this.form).then(response => {
+            updatemobilePageData(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addmobilePageData(this.form).then(response => {
+            addmobilePageData(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -307,24 +340,32 @@ export default {
         }
       });
     },
-    
+
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除移动端数据编号为"' + ids + '"的数据项？').then(function() {
-        return delmobilePageData(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm('是否确认删除移动端数据编号为"' + ids + '"的数据项？')
+        .then(function () {
+          return delmobilePageData(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
     },
 
     /** 导出按钮操作 */
     handleExport() {
-      this.download('system/data/export', {
-        ...this.queryParams
-      }, `data_${new Date().getTime()}.xlsx`)
-    }
-  }
+      this.download(
+        "system/data/export",
+        {
+          ...this.queryParams,
+        },
+        `data_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
 };
 </script>

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

@@ -20,7 +20,7 @@
         <el-button @click="reloads" type="danger"
           ><i class="el-icon-delete-solid el-icon--left"></i>重置</el-button
         >
-        <el-button @click="realTimeView.show = true">预览</el-button>
+        <el-button @click="previewHandle">预览</el-button>
         <el-button @click="handleClick">查看JSON </el-button>
         <el-dialog
           title="查看JSON"
@@ -165,6 +165,7 @@
       }"
     /> -->
     <myRealTimeView
+      ref="myRealTimeView"
       :datas="realTimeView"
       :val="{
         id,
@@ -186,7 +187,7 @@ import sliderassembly from "../../components/sliderassembly/index.vue";
 import headerTop from "../../components/headerTop/index.vue";
 import phoneBottom from "../../components/phoneBottom/index.vue";
 import realTimeView from "../../components/realTimeView/index.vue";
-import myRealTimeView from "../../components/realTimeView/index2.vue"
+import myRealTimeView from "../../components/realTimeView/index2.vue";
 import placementarea from "../../components/componentscom/placementarea/index.vue";
 import decorate from "../../components/rightslider/decorate/index.vue";
 import componenmanagement from "../../components/rightslider/componenmanagement/index.vue";
@@ -285,7 +286,7 @@ export default {
     investigate,
     investigatestyle,
     editor: Editor,
-    myRealTimeView
+    myRealTimeView,
   },
 
   inject: {
@@ -335,9 +336,13 @@ export default {
   },
 
   methods: {
+    // 预览回调
+    previewHandle() {
+      this.$refs.myRealTimeView.changeShowHandler();
+    },
     // 初始化编辑数据
     initPageData(id) {
-        this.id = id;
+      this.id = id;
       getmobilePageData(id).then((response) => {
         if (response.code == 200) {
           console.log(111111111111, response.data);
@@ -444,7 +449,7 @@ export default {
                 <br/>
               }
             `;
-          console.log(7777777777,this.pageComponents);
+          console.log(7777777777, this.pageComponents);
         } else {
           console.error("Content element was not found.");
         }
@@ -762,18 +767,18 @@ export default {
         });
 
         /* 选中样式 */
-        res.active = true
+        res.active = true;
       }, 300); // 延迟时间，根据需求调整，一般300ms足够区分单击和双击
     },
 
     toPageComponent(res, index) {
       clearTimeout(this.clickTimer); // 双击时，清除单击的延时调用
-      console.log(9999)
+      console.log(9999);
       let toPageData = this.getJSONData();
-      let toPageJSON = (JSON.parse(toPageData.pageJson))
-      console.log(toPageJSON,2222);
+      let toPageJSON = JSON.parse(toPageData.pageJson);
+      console.log(toPageJSON, 2222);
       let toPageID = toPageJSON.pageComponents[index].setStyle.toPage;
-      console.log(toPageID,333);
+      console.log(toPageID, 333);
       getmobilePageData(toPageID).then((response) => {
         if (response.code == 200) {
           // console.log(111111111111, response.data);