fix: 3D联调
This commit is contained in:
wanganmao
@@ -0,0 +1 @@
|
||||
/src/views/Creative/3d
|
||||
@@ -1,15 +1,30 @@
|
||||
<template>
|
||||
<div style="height: 100%;">
|
||||
<ShopEditorDemo :currentShopData="shopData" />
|
||||
<ShopEditorDemo v-if="shopData" :currentShopData="shopData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from "@vue/reactivity";
|
||||
import { reactive, ref } from "@vue/reactivity";
|
||||
import { onMounted } from "@vue/runtime-core";
|
||||
import ShopEditorDemo from "./3d/crossyo/shelves-vue-demo/view/ShopEditorDemo.vue";
|
||||
import { currentMock } from "./creation.mock";
|
||||
import { getMaterialsById } from "./api";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const shopData = reactive(currentMock[0]);
|
||||
const shopData = ref(null);
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
const res = await getMaterialsById(route.query.id);
|
||||
try{
|
||||
shopData.value = res.data.materials[0].space_json;
|
||||
}
|
||||
catch(e){
|
||||
console.error(`解析数据出错:` + e)
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,89 +1,109 @@
|
||||
<template>
|
||||
<div class="material">
|
||||
<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 THREE_D_TYPE_S" :key="item.type">{{item.name}}</a-menu-item>
|
||||
</a-menu>
|
||||
<a-input v-model="userName" placeholder="请输入" style="width: 200px; margin-right: 5px;">
|
||||
<template v-slot:prefix>
|
||||
<SearchOutlined style="color: #BFBFBF;"/>
|
||||
</template>
|
||||
<template v-slot:suffix>
|
||||
<span @click="search" class="searchBtn">
|
||||
搜索
|
||||
</span>
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button type="primary" @click="createMaterialRef.show(current.find(x => x))">
|
||||
<PlusOutlined/> 新增
|
||||
</a-button>
|
||||
</div>
|
||||
<div v-if="arr.length" class="result">
|
||||
<div v-for="(i, index) in 15" :key="i" class="page-item">
|
||||
<div v-if="arr[index]" class="page-item-content">
|
||||
<div class="page-item-logo">
|
||||
</div>
|
||||
<div class="page-item-title">
|
||||
<div class="pit-row" style="color: #262626;">
|
||||
超市
|
||||
<div class="pit-tag" style="color: #0CC126; ">
|
||||
三维环境
|
||||
</div>
|
||||
<a-spin :spinning="loading">
|
||||
<div class="material">
|
||||
<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 THREE_D_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 type="primary" @click="createMaterialRef.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="row" class="page-item-content">
|
||||
<div class="page-item-logo">
|
||||
</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="previewerRef.show()">预览</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" @click="renameMeterialRef.show()">重命名</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" style="color: red;" @click="del">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<div class="page-item-title">
|
||||
<div class="pit-row" style="color: #262626;">
|
||||
超市
|
||||
<div class="pit-tag" style="color: #0CC126; ">
|
||||
三维环境
|
||||
</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="previewerRef.show()">预览</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" @click="renameMeterialRef.show()">重命名</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" style="color: red;" @click="del">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Previewer ref="previewerRef" />
|
||||
<RenameMeterial ref="renameMeterialRef" />
|
||||
<CreateMaterial ref="createMaterialRef" />
|
||||
</div>
|
||||
<Previewer ref="previewerRef" />
|
||||
<RenameMeterial ref="renameMeterialRef" />
|
||||
<CreateMaterial ref="createMaterialRef" />
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { SearchOutlined, PlusOutlined } from "@ant-design/icons-vue"
|
||||
import { computed, ref } from "@vue/runtime-core";
|
||||
import { computed, ref, watch } from "@vue/runtime-core";
|
||||
import { Modal } from "ant-design-vue";
|
||||
import Previewer from "./components/Previewer.vue";
|
||||
import RenameMeterial from "./components/RenameMeterial.vue";
|
||||
import CreateMaterial from "./components/CreateMaterial.vue";
|
||||
import { THREE_D_TYPE, THREE_D_TYPE_S } from "./components/CreateMaterial.constant"
|
||||
import { THREE_D_TYPE, THREE_D_TYPE_S } from "./components/CreateMaterial.constant";
|
||||
import { getMaterialLibrary } from "./api";
|
||||
|
||||
const previewerRef = ref();
|
||||
const renameMeterialRef = ref();
|
||||
const createMaterialRef = ref();
|
||||
|
||||
const current = ref([0])
|
||||
const current = ref([0]);
|
||||
|
||||
const title = ref("");
|
||||
|
||||
const rows = ref([]);
|
||||
|
||||
const loading = ref(true);
|
||||
|
||||
const search = () => {
|
||||
alert();
|
||||
}
|
||||
|
||||
const query = async () => {
|
||||
loading.value = true;
|
||||
const res = await getMaterialLibrary({
|
||||
type: current.value[0] || "",
|
||||
title: title.value
|
||||
});
|
||||
|
||||
loading.value = false;
|
||||
rows.value = res.data;
|
||||
}
|
||||
|
||||
const del = () => {
|
||||
Modal.confirm({
|
||||
title: "确认删除",
|
||||
@@ -93,7 +113,13 @@ const del = () => {
|
||||
});
|
||||
}
|
||||
|
||||
const arr = ref([1,2,3,4,5,6,7])
|
||||
watch(
|
||||
() => current.value,
|
||||
async () => {
|
||||
await query();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,126 +1,136 @@
|
||||
<template>
|
||||
<div class="myCreation">
|
||||
<div class="search">
|
||||
<a-menu v-model:selectedKeys="current" mode="horizontal">
|
||||
<a-menu-item key="all">全部 </a-menu-item>
|
||||
<a-menu-item key="app1">3D虚拟门店</a-menu-item>
|
||||
<a-menu-item key="app2">3D环物</a-menu-item>
|
||||
<a-menu-item key="app3">3D商品模型</a-menu-item>
|
||||
</a-menu>
|
||||
<a-input v-model="userName" placeholder="请输入" style="width: 200px; margin-right: 5px;">
|
||||
<template v-slot:prefix>
|
||||
<SearchOutlined style="color: #BFBFBF;"/>
|
||||
</template>
|
||||
<template v-slot:suffix>
|
||||
<span @click="search" class="searchBtn">
|
||||
搜索
|
||||
</span>
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button type="primary">
|
||||
<PlusOutlined/> 新增
|
||||
</a-button>
|
||||
</div>
|
||||
<div v-if="arr.length" class="result">
|
||||
<div v-for="(i, index) in currentMock" :key="i" class="page-item">
|
||||
<div v-if="arr[index]" class="page-item-content">
|
||||
<div class="page-item-logo">
|
||||
</div>
|
||||
<div class="page-item-title">
|
||||
<div class="pit-row" style="color: #262626;">
|
||||
超市
|
||||
<div class="pit-tag" style="color: #0CC126; ">
|
||||
三维环境
|
||||
</div>
|
||||
<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 :key="1">3D虚拟门店</a-menu-item>
|
||||
<a-menu-item :key="2">3D环物</a-menu-item>
|
||||
<a-menu-item :key="3">3D商品模型</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 type="primary">
|
||||
<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">
|
||||
</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="$router.push('/edit-creative')">编辑</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" @click="renameCreationRef.show()">重命名</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" style="color: red;" @click="del">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<div class="page-item-title">
|
||||
<div class="pit-row" style="color: #262626;">
|
||||
{{row.title}}
|
||||
<div v-if="row.type==1" class="pit-tag" style="color: #0CC126; ">
|
||||
3D虚拟门店
|
||||
</div>
|
||||
<div v-if="row.type==2" class="pit-tag" style="color: #0CC126; ">
|
||||
3D环物
|
||||
</div>
|
||||
<div v-if="row.type==3" class="pit-tag" style="color: #0CC126; ">
|
||||
3D商品模型
|
||||
</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="edit(row)">编辑</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" @click="renameCreationRef.show()">重命名</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;" style="color: red;" @click="del">删除</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 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 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 type="primary">开始创作</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RenameCreation ref="renameCreationRef" />
|
||||
</div>
|
||||
<div v-else class="empty">
|
||||
<div 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 type="primary">开始创作</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div 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 type="primary">开始创作</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div 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 type="primary">开始创作</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RenameCreation ref="renameCreationRef" />
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { SearchOutlined, PlusOutlined } from "@ant-design/icons-vue"
|
||||
import { computed, ref } from "@vue/runtime-core";
|
||||
import { computed, onMounted, ref, watch } from "@vue/runtime-core";
|
||||
import { Modal } from "ant-design-vue";
|
||||
import RenameCreation from "./components/RenameCreation.vue";
|
||||
import { currentMock } from "./creation.mock";
|
||||
import { getMaterials } from "./api";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const renameCreationRef = ref();
|
||||
|
||||
const current = ref(["all"]);
|
||||
const current = ref([0]);
|
||||
|
||||
const search = () => {
|
||||
alert();
|
||||
}
|
||||
const rows = ref([]);
|
||||
|
||||
console.log(currentMock.length)
|
||||
const loading = ref(true);
|
||||
|
||||
const arr = ref(currentMock)
|
||||
const title = ref("");
|
||||
|
||||
const del = () => {
|
||||
Modal.confirm({
|
||||
@@ -131,6 +141,33 @@ const del = () => {
|
||||
});
|
||||
}
|
||||
|
||||
const query = async () => {
|
||||
loading.value = true;
|
||||
const res = await getMaterials({
|
||||
type: current.value[0] || "",
|
||||
title: title.value
|
||||
});
|
||||
loading.value = false;
|
||||
rows.value = res.data;
|
||||
}
|
||||
|
||||
const edit = (row) => {
|
||||
router.push({
|
||||
path: '/edit-creative',
|
||||
query: {
|
||||
id: row.id
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(
|
||||
() => current.value,
|
||||
async () => {
|
||||
await query();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -196,7 +233,7 @@ const del = () => {
|
||||
display: block;
|
||||
}
|
||||
.pit-tag{
|
||||
width: 64px;
|
||||
min-width: 64px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
|
||||
28
src/views/Creative/api.js
Normal file
28
src/views/Creative/api.js
Normal file
@@ -0,0 +1,28 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/* 3D场景列表 */
|
||||
export function getMaterials(params) {
|
||||
return request({
|
||||
url: `/console/materials?type=${params.type}&title=${params.title}`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/* 3D场景单个 */
|
||||
export function getMaterialsById(id) {
|
||||
return request({
|
||||
url: `/console/materials/${id}`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/* 素材库列表 */
|
||||
export function getMaterialLibrary(params) {
|
||||
return request({
|
||||
url: `/console/material_library?type=${params.type}&title=${params.title}`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user