303 lines
8.4 KiB
Vue
303 lines
8.4 KiB
Vue
<template>
|
||
<a-spin :spinning="loading">
|
||
<div class="myCreation">
|
||
<div class="search">
|
||
<a-menu v-model:selectedKeys="current" mode="horizontal">
|
||
<a-menu-item :key="0">全部 </a-menu-item>
|
||
<a-menu-item v-for="(item) in CREATIVE_TYPE_S" :key="item.type">{{item.name}}</a-menu-item>
|
||
</a-menu>
|
||
<a-input v-model:value="title" placeholder="请输入" style="width: 200px; margin-right: 5px;">
|
||
<template v-slot:prefix>
|
||
<SearchOutlined style="color: #BFBFBF;"/>
|
||
</template>
|
||
<template v-slot:suffix>
|
||
<span @click="query" class="searchBtn">
|
||
搜索
|
||
</span>
|
||
</template>
|
||
</a-input>
|
||
<a-button :disabled="!current.find(x => x)" type="primary" @click="create3DRef.show(current.find(x => x))">
|
||
<PlusOutlined/> 新增
|
||
</a-button>
|
||
</div>
|
||
<div v-if="rows.length" class="result">
|
||
<div v-for="(row, index) in rows" :key="index" class="page-item">
|
||
<div v-if="rows[index]" class="page-item-content">
|
||
<div class="page-item-logo">
|
||
<span v-if="!row.cover">暂无图片</span>
|
||
<img v-else :src="row.cover" alt="">
|
||
</div>
|
||
<div class="page-item-title">
|
||
<div class="pit-row" style="color: #262626;">
|
||
{{row.title}}
|
||
<div class="pit-tag" style="color: #0CC126; ">
|
||
{{CREATIVE_TYPE_S.find(x => x.type == row.type)?.name}}
|
||
</div>
|
||
</div>
|
||
<div class="pit-row" style="color: #8A8A8A;">
|
||
<!-- 2022-08-08 -->
|
||
--
|
||
<div class="pit-more">
|
||
<a-dropdown placement="bottomCenter">
|
||
<a class="ant-dropdown-link" @click.prevent>
|
||
<i class="iconfont" style="color: #262626;"></i>
|
||
</a>
|
||
<template #overlay>
|
||
<a-menu>
|
||
<a-menu-item>
|
||
<a href="javascript:;" @click="previewerCreationRef.show(row)">预览</a>
|
||
</a-menu-item>
|
||
<a-menu-item v-if="row.type==CREATIVE_TYPE.THREE_D">
|
||
<a href="javascript:;" @click="edit(row)">编辑</a>
|
||
</a-menu-item>
|
||
<a-menu-item>
|
||
<a href="javascript:;" @click="renameCreationRef.show(row)">重命名</a>
|
||
</a-menu-item>
|
||
<a-menu-item>
|
||
<a href="javascript:;" style="color: red;" @click="del(row)">删除</a>
|
||
</a-menu-item>
|
||
</a-menu>
|
||
</template>
|
||
</a-dropdown>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="empty">
|
||
<div v-if="[0, 1].includes(current[0])" class="empty-new">
|
||
<img src="@/assets/creative/3dshop.png" alt="">
|
||
<div class="title">
|
||
3D虚拟门店
|
||
</div>
|
||
<div class="desc">
|
||
在线VR场景搭建，沉浸式业务模拟
|
||
</div>
|
||
<div class="btn">
|
||
<a-button @click="create3DRef.show(CREATIVE_TYPE.THREE_D)" type="primary">开始创作</a-button>
|
||
</div>
|
||
</div>
|
||
<div v-if="[0, 2].includes(current[0])" class="empty-new">
|
||
<img src="@/assets/creative/3daround.png" alt="">
|
||
<div class="title">
|
||
3D环物
|
||
</div>
|
||
<div class="desc">
|
||
3D环物和产品相结合，可以让消费者看的更加真实
|
||
</div>
|
||
<div class="btn">
|
||
<a-button @click="create3DRef.show(CREATIVE_TYPE.RING_360)" type="primary">开始创作</a-button>
|
||
</div>
|
||
</div>
|
||
<div v-if="[0, 3].includes(current[0])" class="empty-new">
|
||
<img src="@/assets/creative/3dmodel.png" alt="">
|
||
<div class="title">
|
||
3D模型
|
||
</div>
|
||
<div class="desc">
|
||
3D交互建模，高可真体感展示
|
||
</div>
|
||
<div class="btn">
|
||
<a-button @click="create3DRef.show(CREATIVE_TYPE.MODEL_3D)" type="primary">开始创作</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<RenameCreation ref="renameCreationRef" @complete="query" />
|
||
<Create3D ref="create3DRef" @complete="query"/>
|
||
<PreviewerCreation ref="previewerCreationRef" />
|
||
</div>
|
||
</a-spin>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
import { SearchOutlined, PlusOutlined } from "@ant-design/icons-vue"
|
||
import { computed, onMounted, ref, watch } from "@vue/runtime-core";
|
||
import { Modal } from "ant-design-vue";
|
||
import RenameCreation from "./components/RenameCreation.vue";
|
||
import Create3D from "./components/Create3D.vue";
|
||
import { currentMock } from "./creation.mock";
|
||
import { CREATIVE_TYPE, CREATIVE_TYPE_S } from "./components/Create3D.constant";
|
||
import { getMaterials, delMaterialCenter } from "./api";
|
||
import { useRouter } from "vue-router";
|
||
import PreviewerCreation from "./components/PreviewerCreation/Index.vue"
|
||
|
||
const router = useRouter();
|
||
|
||
const renameCreationRef = ref();
|
||
|
||
const previewerCreationRef = ref();
|
||
|
||
const create3DRef = ref();
|
||
|
||
const current = ref([0]);
|
||
|
||
const rows = ref([]);
|
||
|
||
const loading = ref(true);
|
||
|
||
const title = ref("");
|
||
|
||
const query = async () => {
|
||
loading.value = true;
|
||
const res = await getMaterials({
|
||
type: current.value[0] || "",
|
||
title: title.value
|
||
});
|
||
loading.value = false;
|
||
|
||
var left = res.data.length % 5;
|
||
if(left) {
|
||
res.data.push(...Array(5 - left).fill(null));
|
||
}
|
||
|
||
rows.value = res.data;
|
||
}
|
||
|
||
const edit = (row) => {
|
||
router.push({
|
||
path: '/edit-creative',
|
||
query: {
|
||
id: row.id
|
||
}
|
||
})
|
||
}
|
||
|
||
const del = (row) => {
|
||
Modal.confirm({
|
||
title: "确认删除",
|
||
content: "删除作品后将不能找回，是否确认删除？",
|
||
async onOk () {
|
||
await delMaterialCenter(row.id).then(() => {
|
||
query();
|
||
});
|
||
},
|
||
onCancel () { },
|
||
});
|
||
}
|
||
|
||
watch(
|
||
() => current.value,
|
||
async () => {
|
||
await query();
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.myCreation{
|
||
padding: 24px 33px;
|
||
height: calc(100% - 48px);
|
||
.search{
|
||
display: flex;
|
||
.searchBtn{
|
||
cursor: pointer;
|
||
border-left: solid 1px #E8E8E8;
|
||
line-height: 16px;
|
||
padding-left: 5px;
|
||
color: #434343;
|
||
}
|
||
}
|
||
:deep(.ant-menu-horizontal){
|
||
line-height: 32px;
|
||
border-bottom: 0;
|
||
flex: 1;
|
||
}
|
||
:deep(.ant-menu-item:first-child){
|
||
padding-left: 0;
|
||
}
|
||
:deep(.ant-menu-item:first-child::after){
|
||
left: 0;
|
||
}
|
||
:deep(.ant-menu-item:last-child){
|
||
padding-right: 0;
|
||
}
|
||
.result{
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
height: 100%;
|
||
overflow: auto;
|
||
.page-item{
|
||
width: 19%;
|
||
height: 12vw;
|
||
min-height: 100px;
|
||
margin-top: 20px;
|
||
.page-item-content{
|
||
height: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 10px 10px 10px 10px;
|
||
opacity: 1;
|
||
border: 1px solid #D3D3D3;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
.page-item-logo{
|
||
flex: 10;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
span{
|
||
display: block;
|
||
margin-top: 3vw;
|
||
}
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.page-item-title{
|
||
flex: 5;
|
||
border-top: solid 1px #D3D3D3;
|
||
padding: 0.8vw 1vw 0 1vw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.pit-row{
|
||
flex: 1;
|
||
display: block;
|
||
}
|
||
.pit-tag{
|
||
min-width: 64px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
border-radius: 3px 3px 3px 3px;
|
||
opacity: 1;
|
||
border: 1px solid;
|
||
text-align: center;
|
||
float: right;
|
||
padding: 0 2px;
|
||
box-sizing: content-box;
|
||
}
|
||
.pit-more{
|
||
float: right;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty{
|
||
display: flex;
|
||
padding: 10vw 5vw;
|
||
.empty-new{
|
||
flex: 1;
|
||
text-align: center;
|
||
.title{
|
||
margin-top: 3vw;
|
||
font-size: 18px;
|
||
}
|
||
.desc{
|
||
margin-top: 1vw;
|
||
font-size: 14px;
|
||
}
|
||
.btn{
|
||
margin-top: 1vw;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |