提交

package.json

@@ -15,6 +15,7 @@
     "dayjs": "^1.11.7",
     "element-plus": "^2.2.18",
     "sha256": "^0.2.0",
+    "vant": "^4.0.11",
     "vue": "^3.0.0",
     "vue-router": "^4.1.6"
   },
@@ -26,7 +27,8 @@
     "ali-oss": "^6.17.1",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0"
+    "eslint-plugin-vue": "^7.0.0",
+    "unplugin-vue-components": "^0.24.0"
   },
   "eslintConfig": {
     "root": true,

src/view/allMedia/H5Editor.vue

@@ -2,15 +2,24 @@
   <div class="H5Editor">
     <div class="H5Editor_left"></div>
     <div class="H5Editor_center">
-      <div class="page">
-        <div
-          class="pageMain"
-          :style="{
-            width: page.width + 'px',
-            height: page.height + 'px',
-            ...backgroundStyle()
-          }"
-        ></div>
+      <div class="pageClient">
+        <div class="page">
+          <div
+            class="pageMain"
+            :style="{
+              width: page.width + 'px',
+              'min-height': page.height + 'px',
+              ...backgroundStyle(),
+            }"
+          >
+            <template
+              v-for="(item, index) in hoversList[selectPage].components || []"
+              :key="index"
+            >
+              <component :is="components[item.type]" :item="item"></component>
+            </template>
+          </div>
+        </div>
       </div>
     </div>
     <div class="H5Editor_right">
@@ -31,10 +40,20 @@
 import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 
+import image from './components/H5Editor/img.vue';
+import paragraph from './components/H5Editor/paragraph.vue';
+import fromComponent from './components/H5Editor/from.vue';
+
+const components = {
+  image,
+  paragraph,
+  fromComponent,
+};
+
 const route = useRoute();
 const item = JSON.parse(route.query.item || '{}');
-const hoversList = ref(item.hoversList || []);
 const selectPage = ref(0);
+const hoversList = ref(item.hoversList || []);
 const page = ref({ width: 375, height: 0 });
 
 const selectPageFunc = (index = 0) => {
@@ -48,18 +67,18 @@ const img = new Image();
 img.src = hoversList.value[selectPage.value].background_url || '';
 
 img.onload = function () {
-  console.log(this.width, this.height);
   page.value.height = (this.height / this.width) * page.value.width;
 };
 
 const backgroundStyle = () => {
   const back = hoversList.value[selectPage.value].background_url;
   const color = /^#|^rgb/g.test(back);
-  if (color) return {
-    'background-color': back
-  };
+  if (color)
+    return {
+      'background-color': back,
+    };
   return {
-    'background-image': 'url(' + back + ')'
+    'background-image': 'url(' + back + ')',
   };
 };
 </script>
@@ -89,11 +108,17 @@ const backgroundStyle = () => {
   position: relative;
 }
 
-.H5Editor_center .page {
+.H5Editor_center .pageClient{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  padding: 15px 5px;
+  background-color: #000;
+  border-radius: 1em;
+}
+
+.H5Editor_center .page {
   width: 375px;
   height: 667px;
   background-color: #fff;

src/view/allMedia/analysis_map.vue

@@ -178,16 +178,24 @@ if (localStorage.getItem('Economize')) {
     const list = r.districts[0].districts || [];
     for (let i = 0; i < list.length; i++) {
       const v = list[i];
-      areaification.value.push({
-        type: 'option',
-        name: v.name,
-        child: v.districts.map((item, index) => {
+      const city = [
+        {
+          type: 'option',
+          name: '全部',
+          id: -1,
+        },
+        ...v.districts.map((item, index) => {
           return {
             type: 'option',
             name: item.name,
             id: index,
           };
-        }),
+        })
+      ];
+      areaification.value.push({
+        type: 'option',
+        name: v.name,
+        child: city,
         id: i,
       });
     }
@@ -218,12 +226,11 @@ const getList = () => {
   };
 
   const sheng = areaification.value[searchActive.value.area] || {};
-  if (areaification.value.length && sheng.name) {
-    const city = [sheng.name];
-    sheng.child &&
-      sheng.child.length &&
-      city.push(sheng.child[searchActive.value.areaSon].name);
-    search.city = city.join(',');
+  if (sheng.name && sheng.name !== '全部') {   
+    const city = sheng.child[searchActive.value.areaSon] && sheng.child[searchActive.value.areaSon].name;
+    const l = [sheng.name];
+    if(city !== '全部') l.push(city || '');
+    search.city = l.join(',');
   }
   search.category === '全部' ? (search.category = '') : '';
   search.city === '全部' ? (search.city = '') : '';
@@ -300,8 +307,6 @@ const upload = () => {
   margin: 1em;
 }
 
-
-
 .title {
   font-size: 18px;
   font-weight: 600;
@@ -347,7 +352,6 @@ const upload = () => {
   color: #22ac38;
 }
 
-
 .upload {
   position: absolute;
   right: 25px;

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

@@ -0,0 +1,98 @@
+<template>
+  <van-form class="pragraph" disabled>
+    <van-cell-group inset>
+      <div class="text" contenteditable v-text="item.title" :style="item.title_style"></div>
+      <div class="edit"></div>
+      <van-field
+        required
+        v-model="from.name"
+        label="选手姓名"
+        placeholder="请输入用户名"
+      />
+      <van-field
+        name="radio"
+        label="参赛方式"
+        required
+      >
+        <template #input>
+          <van-radio-group disabled v-model="from.isOnLine" direction="horizontal">
+            <van-radio name="线上" checked-color="#ff2c2c">线上</van-radio>
+            <van-radio name="线下" checked-color="#ff2c2c">线下</van-radio>
+          </van-radio-group>
+        </template>
+      </van-field>
+      <van-field
+        required
+        v-model="from.tel"
+        label="联系方式"
+        type="tel"
+        placeholder="请输入手机号"
+      />
+      <van-field
+        required
+        v-model="from.university"
+        label="参赛院校"
+        placeholder="请输入院校名称"
+      />
+      <van-field
+        placeholder="上传作品"
+        required
+        label="上传作品"
+      >
+        <template #input>
+          <van-uploader
+            accept="video/*"
+            v-model="from.file"
+            :max-count="1"
+            :max-size="524288000"
+            result-type="file"
+          >
+            <template #preview-cover>
+              <van-icon
+                color="#fff"
+                size="40"
+                @click="previewClick"
+                name="play-circle-o play"
+              />
+            </template>
+          </van-uploader>
+          <p style="font-size: 12px; color: #666">
+            支持上传MP4、MOV格式的视频，视频时长三分钟以内，视频大小500M以内
+          </p>
+        </template>
+      </van-field>
+      <div style="padding: 5px">
+        <van-button block type="danger" native-type="submit" disabled>
+          我要报名
+        </van-button>
+      </div>
+    </van-cell-group>
+  </van-form>
+  <br />
+</template>
+
+<script setup>
+import { defineProps, ref } from 'vue';
+import 'vant/lib/index.css';
+
+const props = defineProps({
+  item: Object,
+});
+console.log(props.item);
+
+const from = ref({});
+
+</script>
+
+<style scoped>
+.pragraph {
+  font-weight: 400;
+}
+.text {
+  outline: none;
+  border: 1px solid #fff;
+}
+.text:focus{
+    border-color: red;
+}
+</style>

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

@@ -0,0 +1,17 @@
+<template>
+  <img :src="item.src" class="componenet_img" :style="item.style" />
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+defineProps({
+  item: Object,
+});
+</script>
+
+<style scoped>
+.componenet_img {
+  width: 100%;
+  cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,40 @@
+<template>
+  <van-cell-group inset class="pragraph">
+    <div class="text" contenteditable v-text="item.title" :style="item.title_style"></div>
+    <div
+      contenteditable
+      class="text"
+      :style="item.style"
+      v-html="item.default_text"
+      @input="inputFunc"
+    ></div>
+  </van-cell-group>
+  <br />
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+import 'vant/lib/index.css';
+
+const props = defineProps({
+  item: Object,
+});
+
+const inputFunc = e => {
+  console.log(e.target.innerHTML);
+};
+console.log(props.item);
+</script>
+
+<style scoped>
+.pragraph {
+  font-weight: 400;
+}
+.text {
+  outline: none;
+  border: 1px solid #fff;
+}
+.text:focus{
+    border-color: red;
+}
+</style>

src/view/allMedia/components/LONGPAGE.vue

@@ -1,10 +1,11 @@
 <template>
-  <div style="padding-bottom: 1em;">
+  <div style="padding-bottom: 1em;" ref="realEle">
     <div class="longpage" @mouseenter="mouseenter" @mouseleave="mouseleave">
       <el-image
         :style="'transform: translateY(' + tfT + 'px)'"
         :src="hoversList[0].url"
         :fit="hoversList[0].background_mode || 'fill'"
+        @load="load"
       />
     </div>
   </div>
@@ -23,13 +24,20 @@ const props = defineProps({
   },
 });
 const tfT = ref(0);
+const realEle = ref();
 
 let longpageTime = undefined;
 
 const hoversList = props.item.hoversList || [];
+let max_tfT = 0;
+
+const load = e =>{
+    max_tfT = realEle.value.clientHeight - e.target.clientHeight;
+}
 const mouseenter = () => {
   if (longpageTime) return;
   longpageTime = setInterval(() => {
+    if(tfT.value <= max_tfT) return longpageTime = window.clearInterval(longpageTime)
     tfT.value -= 1;
   }, 10);
 };

vue.config.js

@@ -1,4 +1,13 @@
+const { VantResolver } = require("unplugin-vue-components/resolvers");
+const ComponentsPlugin = require("unplugin-vue-components/webpack");
 module.exports = {
   productionSourceMap: false,
   publicPath: "./",
+  configureWebpack: {
+    plugins: [
+      ComponentsPlugin({
+        resolvers: [VantResolver()],
+      }),
+    ]
+  },
 };