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>
    </div>
    <el-button @click="showData" class="createPageList"> 已创建页面 </el-button>
    <el-dialog v-model="show" title="已创建页面">
      <el-table :data="localList.list">
        <el-table-column property="title" label="页面名称" />
        <el-table-column label="封面图" header-align="center" width="100px">
          <template #default="scope">
            <el-image style="width: 76px; height: 100px" :src="scope.row.cover" fit="contain" />
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100px">
          <template #default="scope">
            {{ h5Status[scope.row.h5Status] }}
          </template>
        </el-table-column>
        <el-table-column property="url" label="操作">
          <template #default="scope">
            <el-button
              v-if="showCopy(scope.row.url)"
              type="primary"
              link
              @click="() => copyurl(scope.row.url)"
            >
              复制链接
            </el-button>
            <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>
            <el-popconfirm
              title="是否确认删除?"
              @confirm="() => deleteBL(scope)"
            >
              <template #reference>
                <el-button link type="danger"> 删除 </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <el-pagination
          @current-change="currentChange"
          background
          layout="prev, pager, next"
          :total="localList.total"
        />
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import H5 from './components/H5.vue';
import LONGPAGE from './components/LONGPAGE.vue';
import POSTER from './components/POSTER.vue';
import {
  getTemplateList,
  getPersonalList,
  deletePersonalList,
} from '../../api/index.js';

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

const show = ref(false);
const localList = ref({
  list: [],
  size: 20,
  page: 1,
});
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 = () => {
  localList.value.page = 1;
  show.value = true;
  personalListFunc();
};

const currentChange = page => {
  localList.value.page = page;
  personalListFunc();
};

const personalListFunc = () => {
  getPersonalList({
    data: {
      page: localList.value.page,
      size: localList.value.size,
    },
  }).then(r => {
    localList.value.list = r.records || [];
    localList.value.total = r.total || 0;
    localList.value.page += 1;
  });
};

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

const deleteBL = item => {
  deletePersonalList({
    data: {
      operateId: item.row.operateId,
    },
  }).then(() => {
    localList.value.list.splice(item.index, 1);
  });
};

const openurl = url => window.open(url);

const showCopy = url => ('clipboard' in navigator) && url

const copyurl = url => {
    console.log(navigator)
  if (!('clipboard' in navigator)) return;
  auth().then(res => {
    if (!res) {
      // 未授权
      ElMessage({
        type: 'error',
        message: '授权未通过',
      });
      return;
    }
    navigator.clipboard.writeText(url).then(
      () => {
        ElMessage({
          type: 'success',
          message: '地址复制成功',
        });
      },
      () => {
        ElMessage({
          type: 'error',
          message: '复制失败',
        });
      }
    );
  }).catch(() => {
    ElMessage({
      type: 'error',
      message: '授权未通过',
    })
  });
};

const auth = () => {
  return new Promise((resolve, reject) => {
    navigator.permissions.query({ name: 'clipboard-read' }).then(
      result => {
        if (result.state == 'granted' || result.state == 'prompt') {
          resolve(true);
        } else {
          resolve(false);
        }
      },
      error => {
        reject(error);
      }
    );
  });
};
</script>

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

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

.mainBody .item {
  display: inline-block;
  width: 184px;
  height: 333px;
  transition: all 0.3s;
  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 img {
  vertical-align: middle;
}
.createPageList {
  position: absolute;
  top: 1em;
  right: 1em;
}
</style>