mediaAll/src/view/allMedia/H5Mall.vue

<template>
  <div class="H5Mall">
    <div class="mainBody">
      <div
        class="item"
        @click="() => toH5Editor(item)"
        v-for="(item, index) in list"
        :key="index"
      >
        <component :is="components[item.type]" :item="item"></component>
        <div class="main_item" v-text="item.title"></div>
        <div class="body">
          <img style="width: 20px; float: left" :src="defaultIcon" />
          <span>
            <img style="width: 20px" :src="eyeIcon" />
            <span style="vertical-align: middle" v-text="item.hot"></span>
          </span>
        </div>
      </div>
    </div>
    <el-button @click="showData" class="createPageList"> 已生成页面 </el-button>
    <el-dialog v-model="show" title="已创建页面">
      <el-table :data="localList">
        <el-table-column property="title" label="页面名称" />
        <el-table-column label="状态">
          <template #default="scope">
            {{ h5Status[scope.row.h5Status] }}
          </template>
        </el-table-column>
        <el-table-column property="url" label="操作">
          <template #default="scope">
            <el-button v-if="scope.row.url" type="primary" link @click="() => openurl(scope.row.url)"> 打开 </el-button>
            <el-button link type="primary" @click="() => editBL(scope)">
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import defaultIcon from '../../assets/img/default_user.png';
import eyeIcon from '../../assets/img/eye.png';
import H5 from './components/H5.vue';
import LONGPAGE from './components/LONGPAGE.vue';
import POSTER from './components/POSTER.vue';
import { getTemplateList, getPersonalList } from '../../api/index.js';

const components = {
  H5,
  LONGPAGE,
  POSTER,
};
const router = useRouter();
// const route = useRoute();

const show = ref(false);
const localList = ref([]);
const list = ref([]);

const h5Status = ['生成中', '已生成'];

getTemplateList({}).then(r => {
  list.value = r || [];
});

const toH5Editor = item => {
  router.push({
    path: '/h5editor',
    query: {
      item: JSON.stringify(item),
    },
  });
};

const showData = () => {
  getPersonalList({ data: {} }).then(r => {
    localList.value = r;
    show.value = true;
  });
};

const editBL = item => {
  router.push({
    path: '/h5editor',
    query: {
      item: JSON.stringify(item.row),
    },
  });
};

const openurl = url => window.open(url);
</script>

<style scoped>
.H5Mall {
  padding: 1em;
  height: 100%;
}

.mainBody {
  font-weight: 500;
  padding: 1em 0 1em 1em;
}

.mainBody .item {
  display: inline-block;
  width: 184px;
  height: 363px;
  transition: all 0.3s;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 1em;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--el-box-shadow-lighter);
}

.el-image {
  height: 280px;
}

.main_item {
  color: #666;
  padding: 0 5px;
  margin: 5px 0;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mainBody .item:hover {
  box-shadow: var(--el-box-shadow);
  margin-top: -15px;
}

.mainBody .body {
  padding: 0 5px;
  text-align: right;
}
.mainBody img {
  vertical-align: middle;
}
.createPageList {
  position: absolute;
  top: 1em;
  right: 1em;
}
</style>