提交

src/view/allMedia/H5Editor.vue

@@ -63,6 +63,7 @@
                           index + '-' + i
                         )
                     "
+                    @addComponent="addComponent"
                   ></h5-van-field>
                   <h5-van-buttom
                     v-if="v.type === 'van-buttom'"
@@ -75,6 +76,7 @@
                           index + '-' + i
                         )
                     "
+                    @addComponent="addComponent"
                   ></h5-van-buttom>
                 </template>
               </h5-from-component>
@@ -101,6 +103,17 @@
           </span>
         </template>
       </el-dialog>
+
+      <el-dialog v-model="dialogVisible" :title="'请选择向' + (visbileData.type == 'bottom' ? '下': '上') + '方添加的组件'" width="50vw">
+        <span>This is a message</span>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button type="primary" @click="dialogVisible = false">
+              新 增
+            </el-button>
+          </span>
+        </template>
+      </el-dialog>
     </div>
     <div class="H5Editor_right">
       <div v-for="(item, index) in hoversList" :key="item.url">
@@ -149,6 +162,8 @@ const H5EditorObjEle = {
   fromComponent: 'H5ParagraphLeft',
 };
 
+const dialogVisible = ref(false);
+const visbileData = ref({});
 const H5Editor = ref({});
 const leftEle = ref(false);
 const route = useRoute();
@@ -168,6 +183,15 @@ const selectComponent = (v, i) => {
   leftEle.value = v.leftEle || false;
 };
 
+const addComponent = (type, index) => {
+  dialogVisible.value = true;
+  visbileData.value = {
+    type,   
+    index,
+  }
+  console.log(type, index);
+};
+
 // 查看页面大小，
 const img = new Image();
 img.src = hoversList.value[selectPage.value].background_url || '';
@@ -218,6 +242,11 @@ const savePage = () => {
         h5Conf: JSON.stringify(hoversList.value),
         id: item.id,
       },
+    }).then(() => {
+      showpage.value = false;
+      pageconfig.value.name = '';
+      pageconfig.value.desc = '';
+      ElMessage.success('保存成功');
     });
   } else
     createTemplateList({
@@ -227,8 +256,7 @@ const savePage = () => {
         h5Conf: JSON.stringify(hoversList.value),
         templateId: item.templateId,
       },
-    }).then(r => {
-      console.log(r);
+    }).then(() => {
       showpage.value = false;
       pageconfig.value.name = '';
       pageconfig.value.desc = '';

src/view/allMedia/H5Mall.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-scrollbar class="H5Mall">
+  <div class="H5Mall">
     <div class="mainBody">
       <div
         class="item"
@@ -49,7 +49,7 @@
         </el-table-column>
       </el-table>
     </el-dialog>
-  </el-scrollbar>
+  </div>
 </template>
 
 <script setup>
@@ -111,6 +111,7 @@ const editBL = item => {
 <style scoped>
 .H5Mall {
   padding: 1em;
+  height: 100%;
 }
 
 .mainBody {

src/view/allMedia/components/H5Editor/from.vue

@@ -6,7 +6,7 @@
           class="text"
           v-text="item.title"
           :style="item.title_style"
-          @click="select"
+          @click.stop="select"
         ></div>
         <slot></slot>
       </van-cell-group>

src/view/allMedia/components/H5Editor/img.vue

@@ -2,7 +2,7 @@
   <img
     :src="oriUrl || item.src"
     class="componenet_img"
-    @click="editorFunc"
+    @click.stop="editorFunc"
     :style="outStyle()"
   />
 </template>

src/view/allMedia/components/H5Editor/leftSkeleton.vue

@@ -2,8 +2,8 @@
   <div class="imgEditor">
     <slot></slot>
     <div class="btngroup">
-      <el-button type="primary" round @click="save">保 存</el-button>
-      <el-button type="danger" round @click="deleteFunc">删 除</el-button>
+      <el-button type="primary" round @click.stop="save">保 存</el-button>
+      <el-button type="danger" round @click.stop="deleteFunc">删 除</el-button>
     </div>
   </div>
 </template>

src/view/allMedia/components/H5Editor/paragraph.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <van-cell-group inset class="pragraph" @click="selectThis">
+    <van-cell-group inset class="pragraph" @click.stop="selectThis">
       <div
         class="text"
         @input="inputFuncTitle"

src/view/allMedia/components/H5Editor/van_buttom.vue

@@ -30,4 +30,7 @@ const btnType = ref(item.attr.type);
   bottom: 0;
   z-index: 1;
 }
+.button-item:hover {
+  background-color: #00000080;
+}
 </style>

src/view/allMedia/components/H5Editor/van_field.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="van_field_bg">
+  <div :class="{ van_field_bg: true }">
     <van-field
       :required="isRequired"
       :label="label"
@@ -19,22 +19,41 @@
         </template>
       </template>
     </van-field>
-    <div class="van_field_item"></div>
+    <div class="van_field_item">
+      <div class="addMo">
+        <div class="com addTop" @click.stop="addTop">
+          <el-icon><Upload /></el-icon>
+        </div>
+        <div class="com addBottom" @click.stop="addBottom">
+          <el-icon><Download /></el-icon>
+        </div>
+      </div>
+    </div>
+
   </div>
 </template>
 <script setup>
 import H5VanRadioGroup from './van_radio_group.vue';
 import H5VanUploader from './van_uploader.vue';
-import { ref, defineProps } from 'vue';
+import { ref, defineProps, defineEmits } from 'vue';
 const label = ref('');
 const placeholder = ref('');
 const isRequired = ref(false);
 const props = defineProps({
   item: Object,
+  index: String,
 });
+const emit = defineEmits(['addComponent']);
 const item = JSON.parse(JSON.stringify(props.item || '{}'));
 label.value = item.attr.label || item.attr.name;
 placeholder.value = item.attr.placeholder;
+
+const addTop = () => {
+  emit('addComponent', 'top', props.index);
+};
+const addBottom = () => {
+  emit('addComponent', 'bottom', props.index);
+};
 </script>
 
 <style scoped>
@@ -50,7 +69,42 @@ placeholder.value = item.attr.placeholder;
   z-index: 1;
 }
 
-.van_field_item:hover{
-    background-color: #00000080;
+.van_field_item:hover {
+  background-color: #00000020;
+}
+
+.addMo {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.com {
+  position: absolute;
+  display: none;
+  right: 0;
+  color: #fff;
+  background: #409eff;
+  border-radius: 3px;
+  padding: 3px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.addTop {
+  top: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.addBottom {
+  bottom: 0;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.van_field_item:hover .addTop,
+.van_field_item:hover .addBottom {
+  display: block;
 }
 </style>

src/view/allMedia/components/reporting_list.vue

@@ -27,7 +27,7 @@
         </template>
       </el-table-column>
       <el-table-column prop="clueInfoCount" label="数量" />
-      <el-table-column prop="" label="操作">
+      <el-table-column prop="" label="操作" width="200px">
         <template #default="scope">
           <el-popconfirm
             v-if="scope.row.status === 0"
@@ -118,7 +118,7 @@
 </template>
 
 <script setup>
-import { ref, defineExpose } from 'vue';
+import { ref, defineExpose, defineEmits } from 'vue';
 // import { useRouter } from 'vue-router';
 import dayjs from 'dayjs';
 import { ElMessage } from 'element-plus';
@@ -138,6 +138,7 @@ const reportingReplyStatus = ref(false);
 const reportingDetailData = ref({});
 const source = ['热线电话', '微信公众号', 'app', '小程序'];
 const replyFlag = ['未回复', '已回复'];
+const emit = defineEmits(['setTotal']);
 const format = value => {
   return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
 };
@@ -161,9 +162,9 @@ const getlist = search => {
       data: search,
     })
       .then(res => {
-        const li = res.records || [];
-        listTable.value.push(...li);
+        listTable.value = res.records || [];
         total = res.total || 0;
+        emit('setTotal', total);
         if (T) T = window.clearTimeout(T);
       })
       .catch(() => {

src/view/allMedia/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mainMaster">
-    <el-scrollbar class="menu">
+    <div class="menu">
       <img src="../../assets/img/logo.png" style="width: 100%" alt="" />
       <div
         @click="() => selectMenuFunc(item)"
@@ -14,7 +14,7 @@
         <img :src="item.icon" class="icon" />
         <span v-text="item.title"></span>
       </div>
-    </el-scrollbar>
+    </div>
     <router-view class="rightMain" />
   </div>
 </template>
@@ -139,7 +139,4 @@ const selectMenuFunc = item => {
   color: rgb(64, 158, 255);
   background-color: rgba(64, 158, 255, 0.1);
 }
-.mainMaster .el-scrollbar {
-  display: inline-block;
-}
 </style>

src/view/allMedia/reporting.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-scrollbar ref="scrollbar" class="analysis" @scroll="scroll">
+  <div class="analysis" @scroll="scroll">
     <div class="head">
       <div class="title">爆料中心</div>
       <div class="searchRow">
@@ -29,13 +29,15 @@
       </div>
     </div>
     <div class="body">
-      <analysisList ref="analysisListEle" />
+      <analysisList ref="analysisListEle" @setTotal="setTotal" />
+      <el-pagination
+        @current-change="changePage"
+        background
+        layout="prev, pager, next"
+        :total="totalPage"
+      />
     </div>
-
-    <el-icon :size="45" class="upload" v-show="showUpload" @click="upload"
-      ><Upload
-    /></el-icon>
-  </el-scrollbar>
+  </div>
 </template>
 
 <script setup>
@@ -44,30 +46,30 @@ import { ref, onMounted } from 'vue';
 
 import analysisList from './components/reporting_list.vue';
 
-const scrollbar = ref();
 const analysisListEle = ref();
-const showUpload = ref(false);
 const searchText = ref('');
 const date = ref([]);
 
 const pageSize = 10;
 let page = 1;
-let totalPage = 0;
+let totalPage = ref(0);
 
 onMounted(() => {
   getList();
 });
 
 const getList = () => {
-  if (page <= totalPage) return;
+  if (page != 1 && page > Math.ceil(totalPage.value / pageSize)) return;
   const search = {
     title: searchText.value,
     page: page++,
     size: pageSize,
   };
   // 时间区间
-  if (date.value[0]) search.start = dayjs(date.value[0]).format('YYYY-MM-DD HH:mm:ss');
-  if (date.value[1]) search.end = dayjs(date.value[1]).format('YYYY-MM-DD HH:mm:ss');
+  if (date.value[0])
+    search.start = dayjs(date.value[0]).format('YYYY-MM-DD HH:mm:ss');
+  if (date.value[1])
+    search.end = dayjs(date.value[1]).format('YYYY-MM-DD HH:mm:ss');
   analysisListEle.value.getlist(search);
 };
 
@@ -82,20 +84,30 @@ const search = () => {
   getList();
 };
 
+const changePage = p => {
+  page = p;
+  getList();
+};
+
+const setTotal = total => {
+  totalPage.value = total;
+};
+
+let time = undefined;
 const scroll = e => {
   const height =
     document.querySelector('.analysis .head').offsetHeight +
     document.querySelector('.analysis .body').offsetHeight -
     document.querySelector('.analysis').offsetHeight;
   const scrollNum = e.scrollTop.toFixed(2) - 0;
-  if (!showUpload.value && scrollNum > 180) showUpload.value = true;
-  else if (scrollNum <= 180) showUpload.value = false;
-  if (height - scrollNum > 0) return;
-  getList();
-};
-
-const upload = () => {
-  scrollbar.value.setScrollTop(0);
+  if (time || height - scrollNum > 0) {
+    time = window.clearTimeout(time);
+    return;
+  }
+  time = setTimeout(() => {
+    getList();
+    time = window.clearTimeout(time);
+  }, 500);
 };
 </script>