hz/ylst-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 3D联调

Browse Source
This commit is contained in:
wanganmao
2022-12-16 11:05:44 +08:00
parent afdc7517ca
commit 16883f3fbf
5 changed files with 273 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@@ -0,0 +1 @@
/src/views/Creative/3d

23
src/views/Creative/Creation.vue
View File

@@ -1,15 +1,30 @@
<template> <template>
<div style="height: 100%;"> <div style="height: 100%;">
<ShopEditorDemo :currentShopData="shopData" /> <ShopEditorDemo v-if="shopData" :currentShopData="shopData" />
</div> </div>
</template> </template>
<script setup> <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 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> </script>

146
src/views/Creative/Material.vue
View File

@@ -1,89 +1,109 @@
<template> <template>
<div class="material"> <a-spin :spinning="loading">
<div class="search"> <div class="material">
<a-menu v-model:selectedKeys="current" mode="horizontal"> <div class="search">
<a-menu-item :key="0">全部 </a-menu-item> <a-menu v-model:selectedKeys="current" mode="horizontal">
<a-menu-item v-for="(item) in THREE_D_TYPE_S" :key="item.type">{{item.name}}</a-menu-item> <a-menu-item :key="0">全部</a-menu-item>
</a-menu> <a-menu-item v-for="(item) in THREE_D_TYPE_S" :key="item.type">{{item.name}}</a-menu-item>
<a-input v-model="userName" placeholder="请输入" style="width: 200px; margin-right: 5px;"> </a-menu>
<template v-slot:prefix> <a-input v-model:value="title" placeholder="请输入" style="width: 200px; margin-right: 5px;">
<SearchOutlined style="color: #BFBFBF;"/> <template v-slot:prefix>
</template> <SearchOutlined style="color: #BFBFBF;"/>
<template v-slot:suffix> </template>
<span @click="search" class="searchBtn"> <template v-slot:suffix>
搜索 <span @click="query" class="searchBtn">
</span> 搜索
</template> </span>
</a-input> </template>
<a-button type="primary" @click="createMaterialRef.show(current.find(x => x))"> </a-input>
<PlusOutlined/> 新增 <a-button type="primary" @click="createMaterialRef.show(current.find(x => x))">
</a-button> <PlusOutlined/> 新增
</div> </a-button>
<div v-if="arr.length" class="result"> </div>
<div v-for="(i, index) in 15" :key="i" class="page-item"> <div v-if="rows.length" class="result">
<div v-if="arr[index]" class="page-item-content"> <div v-for="(row, index) in rows" :key="index" class="page-item">
<div class="page-item-logo"> <div v-if="row" class="page-item-content">
</div> <div class="page-item-logo">
<div class="page-item-title">
<div class="pit-row" style="color: #262626;">
超市
<div class="pit-tag" style="color: #0CC126; ">
三维环境
</div>
</div> </div>
<div class="pit-row" style="color: #8A8A8A;"> <div class="page-item-title">
2022-08-08 <div class="pit-row" style="color: #262626;">
<div class="pit-more"> 超市
<a-dropdown placement="bottomCenter"> <div class="pit-tag" style="color: #0CC126; ">
<a class="ant-dropdown-link" @click.prevent> 三维环境
<i class="iconfont" style="color: #262626;">&#xe7ac;</i> </div>
</a> </div>
<template #overlay> <div class="pit-row" style="color: #8A8A8A;">
<a-menu> 2022-08-08
<a-menu-item> <div class="pit-more">
<a href="javascript:;" @click="previewerRef.show()">预览</a> <a-dropdown placement="bottomCenter">
</a-menu-item> <a class="ant-dropdown-link" @click.prevent>
<a-menu-item> <i class="iconfont" style="color: #262626;">&#xe7ac;</i>
<a href="javascript:;" @click="renameMeterialRef.show()">重命名</a> </a>
</a-menu-item> <template #overlay>
<a-menu-item> <a-menu>
<a href="javascript:;" style="color: red;" @click="del">删除</a> <a-menu-item>
</a-menu-item> <a href="javascript:;" @click="previewerRef.show()">预览</a>
</a-menu> </a-menu-item>
</template> <a-menu-item>
</a-dropdown> <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> </div>
</div> </div>
</div> </div>
<Previewer ref="previewerRef" />
<RenameMeterial ref="renameMeterialRef" />
<CreateMaterial ref="createMaterialRef" />
</div> </div>
<Previewer ref="previewerRef" /> </a-spin>
<RenameMeterial ref="renameMeterialRef" />
<CreateMaterial ref="createMaterialRef" />
</div>
</template> </template>
<script setup> <script setup>
import { SearchOutlined, PlusOutlined } from "@ant-design/icons-vue" 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 { Modal } from "ant-design-vue";
import Previewer from "./components/Previewer.vue"; import Previewer from "./components/Previewer.vue";
import RenameMeterial from "./components/RenameMeterial.vue"; import RenameMeterial from "./components/RenameMeterial.vue";
import CreateMaterial from "./components/CreateMaterial.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 previewerRef = ref();
const renameMeterialRef = ref(); const renameMeterialRef = ref();
const createMaterialRef = ref(); const createMaterialRef = ref();
const current = ref([0]) const current = ref([0]);
const title = ref("");
const rows = ref([]);
const loading = ref(true);
const search = () => { const search = () => {
alert(); 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 = () => { const del = () => {
Modal.confirm({ Modal.confirm({
title: "确认删除", 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> </script>

241
src/views/Creative/MyCreation.vue
View File

@@ -1,126 +1,136 @@
<template> <template>
<div class="myCreation"> <a-spin :spinning="loading">
<div class="search"> <div class="myCreation">
<a-menu v-model:selectedKeys="current" mode="horizontal"> <div class="search">
<a-menu-item key="all">全部 </a-menu-item> <a-menu v-model:selectedKeys="current" mode="horizontal">
<a-menu-item key="app1">3D虚拟门店</a-menu-item> <a-menu-item :key="0">全部 </a-menu-item>
<a-menu-item key="app2">3D环物</a-menu-item> <a-menu-item :key="1">3D虚拟门店</a-menu-item>
<a-menu-item key="app3">3D商品模型</a-menu-item> <a-menu-item :key="2">3D环物</a-menu-item>
</a-menu> <a-menu-item :key="3">3D商品模型</a-menu-item>
<a-input v-model="userName" placeholder="请输入" style="width: 200px; margin-right: 5px;"> </a-menu>
<template v-slot:prefix> <a-input v-model:value="title" placeholder="请输入" style="width: 200px; margin-right: 5px;">
<SearchOutlined style="color: #BFBFBF;"/> <template v-slot:prefix>
</template> <SearchOutlined style="color: #BFBFBF;"/>
<template v-slot:suffix> </template>
<span @click="search" class="searchBtn"> <template v-slot:suffix>
搜索 <span @click="query" class="searchBtn">
</span> 搜索
</template> </span>
</a-input> </template>
<a-button type="primary"> </a-input>
<PlusOutlined/> 新增 <a-button type="primary">
</a-button> <PlusOutlined/> 新增
</div> </a-button>
<div v-if="arr.length" class="result"> </div>
<div v-for="(i, index) in currentMock" :key="i" class="page-item"> <div v-if="rows.length" class="result">
<div v-if="arr[index]" class="page-item-content"> <div v-for="(row, index) in rows" :key="index" class="page-item">
<div class="page-item-logo"> <div v-if="rows[index]" class="page-item-content">
</div> <div class="page-item-logo">
<div class="page-item-title">
<div class="pit-row" style="color: #262626;">
超市
<div class="pit-tag" style="color: #0CC126; ">
三维环境
</div>
</div> </div>
<div class="pit-row" style="color: #8A8A8A;"> <div class="page-item-title">
2022-08-08 <div class="pit-row" style="color: #262626;">
<div class="pit-more"> {{row.title}}
<a-dropdown placement="bottomCenter"> <div v-if="row.type==1" class="pit-tag" style="color: #0CC126; ">
<a class="ant-dropdown-link" @click.prevent> 3D虚拟门店
<i class="iconfont" style="color: #262626;">&#xe7ac;</i> </div>
</a> <div v-if="row.type==2" class="pit-tag" style="color: #0CC126; ">
<template #overlay> 3D环物
<a-menu> </div>
<a-menu-item> <div v-if="row.type==3" class="pit-tag" style="color: #0CC126; ">
<a href="javascript:;" @click="$router.push('/edit-creative')">编辑</a> 3D商品模型
</a-menu-item> </div>
<a-menu-item> </div>
<a href="javascript:;" @click="renameCreationRef.show()">重命名</a> <div class="pit-row" style="color: #8A8A8A;">
</a-menu-item> 2022-08-08
<a-menu-item> <div class="pit-more">
<a href="javascript:;" style="color: red;" @click="del">删除</a> <a-dropdown placement="bottomCenter">
</a-menu-item> <a class="ant-dropdown-link" @click.prevent>
</a-menu> <i class="iconfont" style="color: #262626;">&#xe7ac;</i>
</template> </a>
</a-dropdown> <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>
</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>
<div v-else class="empty"> </a-spin>
<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>
</template> </template>
<script setup> <script setup>
import { SearchOutlined, PlusOutlined } from "@ant-design/icons-vue" 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 { Modal } from "ant-design-vue";
import RenameCreation from "./components/RenameCreation.vue"; import RenameCreation from "./components/RenameCreation.vue";
import { currentMock } from "./creation.mock"; import { currentMock } from "./creation.mock";
import { getMaterials } from "./api";
import { useRouter } from "vue-router";
const router = useRouter();
const renameCreationRef = ref(); const renameCreationRef = ref();
const current = ref(["all"]); const current = ref([0]);
const search = () => { const rows = ref([]);
alert();
}
console.log(currentMock.length) const loading = ref(true);
const arr = ref(currentMock) const title = ref("");
const del = () => { const del = () => {
Modal.confirm({ 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -196,7 +233,7 @@ const del = () => {
display: block; display: block;
} }
.pit-tag{ .pit-tag{
width: 64px; min-width: 64px;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px;

28
src/views/Creative/api.js Normal file
View 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'
})
}