mediaAll/src/view/allMedia/H5Editor.vue

<template>
  <div class="H5Editor">
    <div class="H5Editor_left">1</div>
    <div class="H5Editor_center">
      <div class="pageClient">
        <div class="page">
          <div
            class="pageMain"
            :style="{
              width: page.width + 'px',
              'height': page.height ? page.height + 'px' : undefined,
              ...backgroundStyle(),
            }"
          >
            <template
              v-for="(item, index) in hoversList[selectPage].components || []"
              :key="index"
            >
              <h5-image v-if="item.type === 'image'" :item="item"></h5-image>
              <h5-paragraph
                v-if="item.type === 'paragraph'"
                :item="item"
                @saveParagraph="text => saveParagraph(text, index)"
              ></h5-paragraph>
              <h5-from-component
                v-if="item.type === 'fromComponent'"
                :item="item"
              >
                <!-- <div style="padding: 5px">
                  <van-button block type="danger" native-type="submit" disabled>
                    我要报名
                  </van-button>
                </div> -->
                <template v-for="(v, i) in (item.child_list || [])" :key="i">
                    <h5-van-field v-if="v.type === 'van-field'" :item="v"></h5-van-field>
                    <h5-van-buttom v-if="v.type === 'van-buttom'" :item="v"></h5-van-buttom>
                </template>
              </h5-from-component>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="H5Editor_right">
      <div v-for="(item, index) in hoversList" :key="item.url">
        <el-image
          @click="() => selectPageFunc(index, item)"
          :class="{ selectPage: selectPage === index }"
          :src="item.url"
          :fit="item.background_mode || 'fill'"
        />
        <div class="title">第 {{ index + 1 }} 页</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';

import H5Image from './components/H5Editor/img.vue';
import H5Paragraph from './components/H5Editor/paragraph.vue';
import H5FromComponent from './components/H5Editor/from.vue';
import H5VanField from './components/H5Editor/van_field.vue';
import H5VanButtom from './components/H5Editor/van_buttom.vue';

const route = useRoute();
const item = JSON.parse(route.query.item || '{}');
const selectPage = ref(0);
const hoversList = ref(item.hoversList || []);
const page = ref({ width: 375, height: 0 });
const selectPageFunc = (index = 0) => {
  selectPage.value = index;
};

// 查看页面大小，
const img = new Image();
img.src = hoversList.value[selectPage.value].background_url || '';

img.onload = function () {
  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,
    };
  return {
    'background-image': 'url(' + back + ')',
  };
};

const saveParagraph = (paragraph, index) => {
  console.log(paragraph, index);
};
</script>

<style scoped>
.H5Editor_right .el-image {
  width: 184px;
  height: 280px;
  margin: 0 auto;
  display: block;
  border: 3px solid #fff;
}
.H5Editor {
  background-color: #d0cfd8;
  height: 100%;
}

.H5Editor_left,
.H5Editor_center,
.H5Editor_right {
  display: inline-block;
  height: 100%;
}

.H5Editor_center {
  width: calc(100% - 500px);
  position: relative;
}

.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;
  overflow: auto;
}

.H5Editor_center .pageMain {
  min-height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.H5Editor_right {
  overflow-y: auto;
  padding: 1em;
  width: 300px;
  background-color: #f3f3f3;
}

.H5Editor_left {
  width: 200px;
  background-color: #f3f3f3;
}

.H5Editor_right .selectPage {
  border: 3px solid #409eff;
}

.H5Editor_right .title {
  text-align: center;
  color: #333;
  padding: 8px 0;
  font-size: 16px;
}
</style>