commit 8.5
This commit is contained in:
WangXiaoDong
14
package-lock.json
generated
14
package-lock.json
generated
@@ -9,7 +9,7 @@
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@ans1998/vue3-color": "^3.0.7",
|
||||
"@flaticon/flaticon-uicons": "^2.2.0",
|
||||
"@flaticon/flaticon-uicons": "^2.3.0",
|
||||
"ant-design-vue": "^3.2.12",
|
||||
"axios": "^1.4.0",
|
||||
"core-js": "^3.8.3",
|
||||
@@ -1811,9 +1811,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@flaticon/flaticon-uicons": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/@flaticon/flaticon-uicons/-/flaticon-uicons-2.2.0.tgz",
|
||||
"integrity": "sha512-9rZ9dKhqrR/XLI84HHfOwetK8ew/Y0FONp5l6n+fMhqGBrDZKkOGMjAoEgSfBH6d+VaVGcm0E28xhlBt7ggbRg==",
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/@flaticon/flaticon-uicons/-/flaticon-uicons-2.3.0.tgz",
|
||||
"integrity": "sha512-+y2yJhMebrbMUxEvegLULS7ir0GFiKMhpm5Xq1hypqb6mHtpA0mLKkN63/kgI0+V0Dol5dGkRf1Tg+wHVluYfQ==",
|
||||
"optionalDependencies": {
|
||||
"esbuild-linux-64": "^0.14.5"
|
||||
}
|
||||
@@ -13324,9 +13324,9 @@
|
||||
}
|
||||
},
|
||||
"@flaticon/flaticon-uicons": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/@flaticon/flaticon-uicons/-/flaticon-uicons-2.2.0.tgz",
|
||||
"integrity": "sha512-9rZ9dKhqrR/XLI84HHfOwetK8ew/Y0FONp5l6n+fMhqGBrDZKkOGMjAoEgSfBH6d+VaVGcm0E28xhlBt7ggbRg==",
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/@flaticon/flaticon-uicons/-/flaticon-uicons-2.3.0.tgz",
|
||||
"integrity": "sha512-+y2yJhMebrbMUxEvegLULS7ir0GFiKMhpm5Xq1hypqb6mHtpA0mLKkN63/kgI0+V0Dol5dGkRf1Tg+wHVluYfQ==",
|
||||
"requires": {
|
||||
"esbuild-linux-64": "^0.14.5"
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ans1998/vue3-color": "^3.0.7",
|
||||
"@flaticon/flaticon-uicons": "^2.2.0",
|
||||
"@flaticon/flaticon-uicons": "^2.3.0",
|
||||
"ant-design-vue": "^3.2.12",
|
||||
"axios": "^1.4.0",
|
||||
"core-js": "^3.8.3",
|
||||
|
||||
@@ -29,13 +29,14 @@ input {
|
||||
.button_second {
|
||||
width: 9.85rem;
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
border-radius: 1.5rem;
|
||||
border: 2px solid;
|
||||
}
|
||||
.system_silder {
|
||||
width: 100%;
|
||||
@@ -80,6 +81,16 @@ input {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.started_btn {
|
||||
padding: 0.5rem 2rem;
|
||||
display: inline-block;
|
||||
border-radius: 2rem;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background-color: #39215b;
|
||||
cursor: pointer;
|
||||
zoom: 0.9;
|
||||
}
|
||||
.modal_component.ant-modal {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@@ -28,13 +28,15 @@ input{
|
||||
.button_second{
|
||||
width: 9.85rem;
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
// background: #343579;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
border-radius: 1.5rem;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
.system_silder{
|
||||
@@ -85,7 +87,17 @@ input{
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
//started公共按钮样式
|
||||
.started_btn{
|
||||
padding: .5rem 2rem;
|
||||
display: inline-block;
|
||||
border-radius: 2rem;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background-color: #39215b;
|
||||
cursor: pointer;
|
||||
zoom: .9;
|
||||
}
|
||||
|
||||
//弹窗公共样式
|
||||
|
||||
|
||||
@@ -10,15 +10,9 @@
|
||||
<h3 class="" @click="aaa()">Workspace Setting</h3>
|
||||
<div class="habit_intro">adjust your workspace setting</div>
|
||||
</div>
|
||||
<div class="habit_type">
|
||||
<a-dropdown>
|
||||
<template #overlay>
|
||||
<a-menu @click="habitTypeclick">
|
||||
<a-menu-item aaa="22" key="1st menu item"> 1st menu item </a-menu-item>
|
||||
<a-menu-item key="2nd menu item"> 2nd menu item </a-menu-item>
|
||||
<a-menu-item key="3rd item"> 3rd item </a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<div class="habit_type" trigger="['click']">
|
||||
<a-dropdown placement="bottomRight">
|
||||
|
||||
<a-button>
|
||||
<UserOutlined />
|
||||
{{habitType.habitTypeone}}
|
||||
@@ -26,7 +20,21 @@
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="habit_Overal_Single">
|
||||
<div
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: !checked }"
|
||||
>
|
||||
男
|
||||
</div>
|
||||
<a-switch v-model:checked="checked" />
|
||||
<div
|
||||
class="habit_Overal_Single_text"
|
||||
:class="{ active: checked }"
|
||||
>
|
||||
女
|
||||
</div>
|
||||
</div>
|
||||
<div class="habit_Overal_Single">
|
||||
<div
|
||||
class="habit_Overal_Single_text"
|
||||
@@ -92,14 +100,14 @@
|
||||
<div class="model_Designer">
|
||||
<div class="model_text">
|
||||
<div
|
||||
class="habit_Overal_Single_text"
|
||||
class="habit_System_Seleves_text"
|
||||
:class="{ active: !checked }"
|
||||
>
|
||||
System
|
||||
</div>
|
||||
<a-switch v-model:checked="checked" />
|
||||
<div
|
||||
class="habit_Overal_Single_text"
|
||||
class="habit_System_Seleves_text"
|
||||
:class="{ active: checked }"
|
||||
>
|
||||
Seleves
|
||||
@@ -121,7 +129,9 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent, createVNode, ref,Ref} from "vue";
|
||||
import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import type { MenuProps } from "ant-design-vue";
|
||||
import axios from "axios";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
DownOutlined,
|
||||
@@ -199,7 +209,8 @@ export default defineComponent({
|
||||
return {
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
mounted() {
|
||||
},
|
||||
directives:{
|
||||
fade:{
|
||||
updated (el,model){
|
||||
@@ -219,12 +230,22 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getworkspace(){
|
||||
Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:3}}).then((rv: any) => {
|
||||
if (rv) {
|
||||
console.log(rv,'workspace');
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
handleButtonClick(e: Event) {
|
||||
|
||||
console.log("click left button", e);
|
||||
},
|
||||
handleMenuClick(e: Event) {
|
||||
console.log("click", e);
|
||||
this.getworkspace()
|
||||
|
||||
},
|
||||
systemDesigner(num: Number) {
|
||||
console.log(num);
|
||||
@@ -236,7 +257,6 @@ export default defineComponent({
|
||||
const aa = this.$refs.stringg
|
||||
// const aa = this.$refs.stringg;
|
||||
// aa.style
|
||||
console.log(aa);
|
||||
|
||||
this.habit = !this.habit
|
||||
if(!this.habit){
|
||||
@@ -255,32 +275,32 @@ export default defineComponent({
|
||||
.habit_button {
|
||||
background-color: #fff;
|
||||
border: solid 2px #000;
|
||||
padding: 0px 20px;
|
||||
padding: 0px 2rem;
|
||||
box-sizing: initial;
|
||||
font-weight: 600;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 4px 15px;
|
||||
font-size: 14px;
|
||||
height: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
padding: .4rem 1.5rem;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
.fi-bs-angle-down {
|
||||
margin-left: 10px;
|
||||
margin-left: 1rem;
|
||||
display: inline-block;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
}
|
||||
.habit_content {
|
||||
border: solid 2px #000;
|
||||
border-radius: 10px;
|
||||
padding: 20px 20px;
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
// zoom: .75;
|
||||
transform-origin: top right;
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
right: -.3rem;
|
||||
top: 110%;
|
||||
background: #fff;
|
||||
// width: 25rem;
|
||||
width: 200px;
|
||||
width: 30rem;
|
||||
opacity: 0;
|
||||
transition: all .3s;
|
||||
transform: scale(0.75)translateY(10%);
|
||||
@@ -291,25 +311,32 @@ export default defineComponent({
|
||||
}
|
||||
.habit_title {
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
}
|
||||
.habit_intro {
|
||||
font-size: 12px;
|
||||
font-size: 1.2rem;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.habit_type {
|
||||
margin-top: 15px;
|
||||
margin-top: 1.5rem;
|
||||
// cursor: pointer;
|
||||
button{
|
||||
cursor: auto;
|
||||
}
|
||||
button:hover{
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
.habit_Overal_Single {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 30px 0;
|
||||
margin: 3rem 0;
|
||||
.habit_Overal_Single_text {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
@@ -317,22 +344,20 @@ export default defineComponent({
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
font-weight: 900;
|
||||
}
|
||||
:deep(.ant-switch-checked) {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
}
|
||||
:deep(.ant-switch) {
|
||||
margin: 0 10px;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
.habit_habit_singleton {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.habit_System_Designer {
|
||||
margin-top: 80px;
|
||||
margin-top: 8rem;
|
||||
:deep(.ant-slider-track),
|
||||
:deep(.ant-slider-rail) {
|
||||
height: 0.6rem;
|
||||
height: .6rem;
|
||||
background-color: #e1e1e1;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
@@ -353,18 +378,19 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.habit_model{
|
||||
margin-top: 20px;
|
||||
margin-top: 2rem;
|
||||
|
||||
}
|
||||
|
||||
.habit_model_show{
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
border: solid 2px #000;
|
||||
border-radius: 10px;
|
||||
padding: 20px 20px;
|
||||
bottom: -5px;
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
bottom: -.5rem;
|
||||
transform: translateY(110%);
|
||||
right: -2px;
|
||||
right: -.2rem;
|
||||
width: 35rem;
|
||||
opacity: 0;
|
||||
transition: all .3s;
|
||||
@@ -381,7 +407,18 @@ export default defineComponent({
|
||||
.model_text{
|
||||
display: flex;
|
||||
:deep(.ant-switch) {
|
||||
margin: 0 10px;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
.habit_System_Seleves_text {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
&.active {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
font-weight: 900;
|
||||
}
|
||||
:deep(.ant-switch-checked) {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -404,6 +441,9 @@ export default defineComponent({
|
||||
border-color: #000 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
:deep(.ant-switch-checked) {
|
||||
background-color: #000;
|
||||
}
|
||||
.habit :deep(.ant-btn) {
|
||||
box-shadow: none !important;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
@@ -418,7 +458,9 @@ export default defineComponent({
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
.ant-tooltip{
|
||||
z-index: 1049 !important;
|
||||
}
|
||||
.habit :deep(.ant-tooltip .ant-tooltip-inner) ,:deep(.ant-tooltip-arrow-content){
|
||||
background: #000 !important;
|
||||
}
|
||||
|
||||
@@ -1,89 +1,55 @@
|
||||
<template>
|
||||
<div class="generate">
|
||||
<div v-if="msg.cli == 'Sketchboard'" class="generate_checkbox">
|
||||
<div>
|
||||
<a-modal class="my_material_modal"
|
||||
v-model:visible="generateShow"
|
||||
:footer="null"
|
||||
width="80%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
>
|
||||
<div class="my_material_header">
|
||||
<div class="my_material_title">My Library</div>
|
||||
<div class="my_material_header_right">
|
||||
<div class="content_search_block">
|
||||
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
<label>
|
||||
<input type="checkbox" v-model="checkbox.imageOnly">
|
||||
<span>Image Only</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" v-model="checkbox.textOnly">
|
||||
<span>Text Only</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" v-model="checkbox.textImage">
|
||||
<span>Text-Image</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="generage_input">
|
||||
<input class="search_input" placeholder="Promopt input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="generage_btn started_btn">Generate</div>
|
||||
</div>
|
||||
<div v-if="msg.cli == 'Sketchboard'" class="generage_img">
|
||||
|
||||
<div class="icon iconfont icon-guanbi icon_close" @click="closeModal"></div>
|
||||
</div>
|
||||
<div v-else class="generage_img">
|
||||
<div class="generage_img_item" v-for="item,index in fileList" :key="item.imgUrl" @click="generageAdd(item)" :class="{active:item?.checked}">
|
||||
<img v-lazy="item.imgUrl" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my_material_content">
|
||||
<div class="material_content_top">
|
||||
<div class="material_content_top_title"></div>
|
||||
<div class="material_content_top_right">
|
||||
<div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'MarketingSketch'">
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="designType"
|
||||
:options="disignTypeList"
|
||||
placeholder="All"
|
||||
:allowClear="true"
|
||||
@change="handleChange"
|
||||
>
|
||||
<template #suffixIcon
|
||||
><span
|
||||
class="icon iconfont icon-xiala"
|
||||
style="color: #343579"
|
||||
></span
|
||||
></template>
|
||||
</a-select>
|
||||
</div>
|
||||
<div :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()" v-show="imgList.length">
|
||||
<div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
|
||||
<div>all</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="material_content_body scroll_style">
|
||||
<div class="content_img_item" v-for="(img) in imgList" :key="img.id" @click="selectImgItem(img)">
|
||||
<div :class="['content_img_item_block', selectImgListIds.indexOf(img.id) > -1 ? 'select_item_img' :'']">
|
||||
<img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="img.url" :key="img.url"/>
|
||||
</div>
|
||||
<div class="content_img_name">{{img.name}}</div>
|
||||
</div>
|
||||
<div class="no_data_block" v-show="!imgList.length && !isShowLoading">
|
||||
<img src="@/assets/images/homePage/null_img.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="no_data_block loading_block" v-show="isShowLoading">
|
||||
<a-spin size="large"></a-spin>
|
||||
</div>
|
||||
<div class="material_confirm" @click="confirmSelect()" v-show="imgList.length">Confirm</div>
|
||||
<div class="table_pagination" v-show="imgList.length">
|
||||
<a-pagination
|
||||
|
||||
v-model:current="currentPage"
|
||||
v-model:pageSize="pageSize"
|
||||
:total="total"
|
||||
:showSizeChanger="false"
|
||||
:showQuickJumper="true"
|
||||
@change="changePage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { message } from 'ant-design-vue';
|
||||
import GO from '@/tool/GO';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
let myMaterialModalShow = ref(false)
|
||||
props: ["msg"],
|
||||
setup(prop) {
|
||||
// console.log(prop.msg);
|
||||
let checkbox={
|
||||
imageOnly:false,
|
||||
textOnly:false,
|
||||
textImage:false,
|
||||
}
|
||||
let imgList = ref([])
|
||||
let selectImgList:any = ref([])
|
||||
let selectImgListIds:any = ref([])
|
||||
@@ -95,36 +61,30 @@ export default defineComponent({
|
||||
let total = ref(0)
|
||||
let searcMaterialhName:any = ref('') //搜索名字
|
||||
let designType:any = ref(null)
|
||||
let disignTypeList = [
|
||||
let store = useStore()
|
||||
let fileList = ref([
|
||||
{
|
||||
value: "Outwear",
|
||||
label: "Outwear",
|
||||
imgUrl:'https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png',
|
||||
id_:1
|
||||
|
||||
},
|
||||
{
|
||||
value: "Blouse",
|
||||
label: "Blouse",
|
||||
imgUrl:'https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png',
|
||||
id_:2
|
||||
|
||||
},
|
||||
{
|
||||
value: "Dress",
|
||||
label: "Dress",
|
||||
},
|
||||
{
|
||||
value: "Trousers",
|
||||
label: "Trousers",
|
||||
},
|
||||
{
|
||||
value: "Skirt",
|
||||
label: "Skirt",
|
||||
},
|
||||
]
|
||||
let boardList = {
|
||||
Moodboard:'Mood',
|
||||
Printboard:'Print',
|
||||
Sketchboard:'Sketch',
|
||||
MarketingSketch:'MarketingSketch'
|
||||
imgUrl:'https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png',
|
||||
id_:3
|
||||
|
||||
},{
|
||||
imgUrl:'https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png',
|
||||
id_:4
|
||||
|
||||
}
|
||||
|
||||
])
|
||||
return{
|
||||
myMaterialModalShow,
|
||||
imgList,
|
||||
selectImgList,
|
||||
selectImgListIds,
|
||||
@@ -136,53 +96,26 @@ export default defineComponent({
|
||||
total,
|
||||
searcMaterialhName,
|
||||
designType,
|
||||
disignTypeList,
|
||||
boardList
|
||||
checkbox,
|
||||
store,
|
||||
fileList,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
// this.fileList.forEach((item,index)=>{
|
||||
// item.checked = true
|
||||
// item.type_ = 'generate'
|
||||
// item.id_ = GO.id++
|
||||
// })
|
||||
// this.store.commit("addGenerateFils", this.fileList);
|
||||
|
||||
},
|
||||
methods:{
|
||||
|
||||
init(code:any){
|
||||
this.selectCode = code
|
||||
this.myMaterialModalShow = true
|
||||
this.getLibraryList()
|
||||
generageAdd(data:any){
|
||||
data.type_ = 'generate'
|
||||
this.store.commit("addGenerateMaterialFils", data);
|
||||
},
|
||||
|
||||
selectImgItem(imgData:any){
|
||||
this.selectImgListIds = this.selectImgList.map((v:any)=>v.id)
|
||||
if(this.selectImgListIds.indexOf(imgData.id) === -1){
|
||||
this.selectImgList.push(imgData)
|
||||
this.selectImgListIds.push(imgData.id)
|
||||
}else{
|
||||
let index = this.selectImgListIds.indexOf(imgData.id)
|
||||
this.selectImgList.splice(index,1)
|
||||
this.selectImgListIds.splice(index,1)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//改变页码
|
||||
changePage(current: number, pageSize: number){
|
||||
this.currentPage = current
|
||||
this.pageSize = pageSize
|
||||
this.getLibraryList()
|
||||
},
|
||||
|
||||
handleChange(){
|
||||
this.getLibraryList()
|
||||
},
|
||||
|
||||
//选择所有的图片
|
||||
selectAllImg(){
|
||||
if(this.selectImgListIds.length == this.imgList.length){
|
||||
this.selectImgListIds = []
|
||||
this.selectImgList = []
|
||||
}else{
|
||||
this.selectImgListIds = this.imgList.map((v:any) => v.id)
|
||||
this.selectImgList = this.imgList
|
||||
}
|
||||
},
|
||||
|
||||
getLibraryList(){
|
||||
let data = {
|
||||
level1Type:this.selectCode,
|
||||
@@ -203,17 +136,8 @@ export default defineComponent({
|
||||
});
|
||||
},
|
||||
|
||||
confirmSelect(){
|
||||
if(!this.selectImgList.length){
|
||||
message.error('Please select at least one image')
|
||||
return
|
||||
}
|
||||
this.$emit('confirmSelect',this.selectImgList)
|
||||
this.closeModal()
|
||||
},
|
||||
|
||||
closeModal(){
|
||||
this.myMaterialModalShow = false
|
||||
// this.myMaterialModalShow = false
|
||||
this.searchPictureName = ''
|
||||
this.designType = null
|
||||
this.selectImgList = []
|
||||
@@ -227,8 +151,86 @@ export default defineComponent({
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.my_material_modal{
|
||||
.generate{
|
||||
height: 30rem;
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
&.generate::-webkit-scrollbar{display: none;}
|
||||
|
||||
.generate_checkbox,.generage_input{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
.generate_checkbox{
|
||||
div{
|
||||
margin-right: 4rem;
|
||||
label{
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
input{
|
||||
margin-right: .5rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
span{
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.generage_input{
|
||||
input{
|
||||
font-size: 12px;
|
||||
padding: .3rem;
|
||||
border-radius: .5rem;
|
||||
width: 70%;
|
||||
border: 1px solid rgba(0,0,0,.15);
|
||||
|
||||
&input:-moz-placeholder{
|
||||
color: rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
&input:-ms-input-placeholder {
|
||||
color: rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
&input::-webkit-input-placeholder {
|
||||
color: rgba(0,0,0,.15);
|
||||
}
|
||||
}
|
||||
.generage_btn{
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.generage_img{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.generage_img_item{
|
||||
cursor: pointer;
|
||||
margin: 0 2rem 2rem 0;
|
||||
&.active{
|
||||
opacity: .5;
|
||||
// border: 2px solid;
|
||||
border-radius: 1rem;
|
||||
img{
|
||||
transform: scale(.9);
|
||||
}
|
||||
}
|
||||
img{
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.my_material_modal{
|
||||
border-radius: 2rem;
|
||||
.ant-modal-close{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
|
||||
@@ -348,6 +348,9 @@ export default defineComponent({
|
||||
border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
||||
z-index: 1049;
|
||||
background-color: #fff;
|
||||
.header_right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -1,26 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal class="my_material_modal"
|
||||
<div class="my_material_modal">
|
||||
<!-- <a-modal class="my_material_modal"
|
||||
v-model:visible="myMaterialModalShow"
|
||||
:footer="null"
|
||||
width="80%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
>
|
||||
> -->
|
||||
<div class="my_material_header">
|
||||
<div class="my_material_title">My Library</div>
|
||||
<div class="my_material_header_right">
|
||||
<div class="content_search_block">
|
||||
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
</div>
|
||||
|
||||
<div class="icon iconfont icon-guanbi icon_close" @click="closeModal"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my_material_content">
|
||||
<div class="material_content_top">
|
||||
<!-- <div class="material_content_top">
|
||||
<div class="material_content_top_title"></div>
|
||||
<div class="material_content_top_right">
|
||||
<div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'MarketingSketch'">
|
||||
@@ -45,35 +42,22 @@
|
||||
<div>all</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="material_content_body scroll_style">
|
||||
<div class="content_img_item" v-for="(img) in imgList" :key="img.id" @click="selectImgItem(img)">
|
||||
<div :class="['content_img_item_block', selectImgListIds.indexOf(img.id) > -1 ? 'select_item_img' :'']">
|
||||
<img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="img.url" :key="img.url"/>
|
||||
<div class="content_img_item_block" :class="{active:img?.checked}">
|
||||
<img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="img.url" :key="img.url" :alt="img.name"/>
|
||||
</div>
|
||||
<div class="content_img_name">{{img.name}}</div>
|
||||
</div>
|
||||
<div class="no_data_block" v-show="!imgList.length && !isShowLoading">
|
||||
<img src="@/assets/images/homePage/null_img.png">
|
||||
<!-- <div class="content_img_name">{{img.name}}</div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="no_data_block loading_block" v-show="isShowLoading">
|
||||
<a-spin size="large"></a-spin>
|
||||
</div>
|
||||
<div class="material_confirm" @click="confirmSelect()" v-show="imgList.length">Confirm</div>
|
||||
<div class="table_pagination" v-show="imgList.length">
|
||||
<a-pagination
|
||||
|
||||
v-model:current="currentPage"
|
||||
v-model:pageSize="pageSize"
|
||||
:total="total"
|
||||
:showSizeChanger="false"
|
||||
:showQuickJumper="true"
|
||||
@change="changePage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<!-- </a-modal> -->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -81,12 +65,14 @@
|
||||
import { defineComponent, ref} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useStore } from "vuex";
|
||||
import GO from '@/tool/GO';
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
let myMaterialModalShow = ref(false)
|
||||
let imgList = ref([])
|
||||
let selectImgList:any = ref([])
|
||||
let selectImgListIds:any = ref([])
|
||||
let store = useStore()
|
||||
let isShowLoading:any = ref(false)
|
||||
let selectCode:any = ref('')
|
||||
let currentPage:any = ref(1)
|
||||
@@ -126,8 +112,7 @@ export default defineComponent({
|
||||
return{
|
||||
myMaterialModalShow,
|
||||
imgList,
|
||||
selectImgList,
|
||||
selectImgListIds,
|
||||
store,
|
||||
isShowLoading,
|
||||
selectCode,
|
||||
currentPage,
|
||||
@@ -144,20 +129,24 @@ export default defineComponent({
|
||||
|
||||
init(code:any){
|
||||
this.selectCode = code
|
||||
this.myMaterialModalShow = true
|
||||
// this.myMaterialModalShow = true
|
||||
if(this.imgList.length == 0){
|
||||
this.getLibraryList()
|
||||
}
|
||||
},
|
||||
|
||||
selectImgItem(imgData:any){
|
||||
this.selectImgListIds = this.selectImgList.map((v:any)=>v.id)
|
||||
if(this.selectImgListIds.indexOf(imgData.id) === -1){
|
||||
this.selectImgList.push(imgData)
|
||||
this.selectImgListIds.push(imgData.id)
|
||||
}else{
|
||||
let index = this.selectImgListIds.indexOf(imgData.id)
|
||||
this.selectImgList.splice(index,1)
|
||||
this.selectImgListIds.splice(index,1)
|
||||
}
|
||||
// this.selectImgListIds = this.selectImgList.map((v:any)=>v.id)
|
||||
// if(this.selectImgListIds.indexOf(imgData.id) === -1){
|
||||
// this.selectImgList.push(imgData)
|
||||
// this.selectImgListIds.push(imgData.id)
|
||||
// }else{
|
||||
// let index = this.selectImgListIds.indexOf(imgData.id)
|
||||
// this.selectImgList.splice(index,1)
|
||||
// this.selectImgListIds.splice(index,1)
|
||||
// }
|
||||
imgData.type_ = 'material'
|
||||
this.store.commit("addGenerateMaterialFils", imgData);
|
||||
},
|
||||
|
||||
|
||||
@@ -173,20 +162,12 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
//选择所有的图片
|
||||
selectAllImg(){
|
||||
if(this.selectImgListIds.length == this.imgList.length){
|
||||
this.selectImgListIds = []
|
||||
this.selectImgList = []
|
||||
}else{
|
||||
this.selectImgListIds = this.imgList.map((v:any) => v.id)
|
||||
this.selectImgList = this.imgList
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
getLibraryList(){
|
||||
let data = {
|
||||
level1Type:this.selectCode,
|
||||
level2Type:this.designType,
|
||||
// level2Type:this.designType,
|
||||
page:this.currentPage,
|
||||
pictureName:this.searchPictureName,
|
||||
size:this.pageSize,
|
||||
@@ -194,7 +175,17 @@ export default defineComponent({
|
||||
this.isShowLoading = true
|
||||
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
|
||||
(rv: any) => {
|
||||
let aa:any = []
|
||||
this.imgList = rv.content
|
||||
rv.content.forEach((item:any) => {
|
||||
if(!item.id_){
|
||||
item.id_ = GO.id++
|
||||
aa.push(item)
|
||||
}else{
|
||||
aa.push(item)
|
||||
}
|
||||
});
|
||||
this.imgList = aa
|
||||
this.total = rv.total
|
||||
this.isShowLoading = false
|
||||
}
|
||||
@@ -203,21 +194,11 @@ export default defineComponent({
|
||||
});
|
||||
},
|
||||
|
||||
confirmSelect(){
|
||||
if(!this.selectImgList.length){
|
||||
message.error('Please select at least one image')
|
||||
return
|
||||
}
|
||||
this.$emit('confirmSelect',this.selectImgList)
|
||||
this.closeModal()
|
||||
},
|
||||
|
||||
closeModal(){
|
||||
this.myMaterialModalShow = false
|
||||
this.searchPictureName = ''
|
||||
this.designType = null
|
||||
this.selectImgList = []
|
||||
this.selectImgListIds = []
|
||||
this.imgList = []
|
||||
this.currentPage = 1
|
||||
this.pageSize = 10
|
||||
@@ -228,7 +209,10 @@ export default defineComponent({
|
||||
</script>
|
||||
<style lang="less">
|
||||
.my_material_modal{
|
||||
|
||||
height: 30rem;
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
&.my_material_modal::-webkit-scrollbar{display: none;}
|
||||
.ant-modal-close{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
@@ -251,19 +235,16 @@ export default defineComponent({
|
||||
|
||||
.my_material_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 6.6rem;
|
||||
background: #F7F7F7;
|
||||
padding: 0 3.4rem 0 3.1rem;
|
||||
|
||||
.my_material_title{
|
||||
font-size: 1.8rem;
|
||||
color: #030303;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
height: auto;
|
||||
padding: 0;
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2rem;
|
||||
background-color: #fff;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
.my_material_header_right{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -274,14 +255,16 @@ export default defineComponent({
|
||||
display: flex;
|
||||
|
||||
.search_input{
|
||||
width: 30rem;
|
||||
width: 15rem;
|
||||
padding-left: 1.5rem;
|
||||
height: 4rem;
|
||||
line-height: 3.8rem;
|
||||
background: #FFFFFF;
|
||||
// height: 4rem;
|
||||
// line-height: 3.8rem;
|
||||
// background: #FFFFFF;
|
||||
border: 0.1rem solid #F1F1F1;
|
||||
font-size: 1.6rem;
|
||||
// font-size: 1.6rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
height: 3rem;
|
||||
|
||||
&::placeholder {
|
||||
color: #C2C2C2;
|
||||
@@ -289,9 +272,9 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.search_icon_block{
|
||||
width: 6rem;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
width: 5rem;
|
||||
height: 3rem;
|
||||
line-height: 3rem;
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
cursor: pointer;
|
||||
@@ -314,7 +297,8 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.my_material_content{
|
||||
padding: 0 3rem 3.5rem 3rem;
|
||||
// padding: 0 3rem 3.5rem 3rem;
|
||||
padding: 0;
|
||||
height: calc(100% - 6.6rem);
|
||||
position: relative;
|
||||
|
||||
@@ -377,28 +361,38 @@ export default defineComponent({
|
||||
|
||||
.material_content_body{
|
||||
width: 100%;
|
||||
height: calc(100% - 19rem);
|
||||
// height: calc(100% - 19rem);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
&.generate::-webkit-scrollbar{display: none;}
|
||||
|
||||
.content_img_item{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 0 1.4rem;
|
||||
margin-bottom: 2.8rem;
|
||||
|
||||
// padding: 0 1.4rem;
|
||||
// margin-bottom: 2.8rem;
|
||||
margin: 0 2rem 2rem 0;
|
||||
padding: 0;
|
||||
.content_img_item_block{
|
||||
border: 0.1rem solid transparent;
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
// border: 0.1rem solid transparent;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
opacity: .5;
|
||||
img{
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.select_item_img{
|
||||
border-color: #343579;
|
||||
// border-color: #343579;
|
||||
}
|
||||
|
||||
.print_content_img{
|
||||
|
||||
@@ -1,186 +1,261 @@
|
||||
<template>
|
||||
<div class="collection_modal_item">
|
||||
<div class="modal_left">
|
||||
<div class="switch_type_list">
|
||||
<div class="switch_type_item select_swtich">
|
||||
<div
|
||||
@click="open(1)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Upload</span>
|
||||
</div>
|
||||
<div @click="openLibrary()" class="switch_type_item">
|
||||
<span>My Library</span>
|
||||
<div
|
||||
@click="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Library</span>
|
||||
</div>
|
||||
<div @click="openLibrary()" class="switch_type_item">
|
||||
<div
|
||||
@click="open(3)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Generate</span>
|
||||
</div>
|
||||
<div class="design_template_button" @click.stop="changeTemplateModal()" v-show="fileList.length>2">Design</div>
|
||||
</div>
|
||||
|
||||
<div class="moodboard_body">
|
||||
<div class="upload_img_body scroll_style" >
|
||||
<div v-show="openClick == 1" class="moodboard_body">
|
||||
<div class="upload_img_body scroll_style">
|
||||
<div class="upload_item">
|
||||
<div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
|
||||
<a-spin :indicator="indicator" tip="Uploading..."/>
|
||||
<div
|
||||
class="upload_file_item"
|
||||
v-for="(file, index) in fileList"
|
||||
:key="file"
|
||||
>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'uploading'"
|
||||
>
|
||||
<a-spin
|
||||
:indicator="indicator"
|
||||
tip="Uploading..."
|
||||
/>
|
||||
</div>
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'done'">
|
||||
<img :src="file?.imgUrl" class="upload_img">
|
||||
<div class="delete_file_block" @click="deleteFile(index)">Delete</div>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<img :src="file?.imgUrl" class="upload_img" />
|
||||
<div
|
||||
class="delete_file_block"
|
||||
@click="deleteFile(file)"
|
||||
>
|
||||
Delete
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_file_item upload_component" v-show="fileList.length < 10">
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item upload_component"
|
||||
v-show="moodboarList.length != 8"
|
||||
>
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload
|
||||
...upload,
|
||||
}"
|
||||
:headers="{Authorization:token}"
|
||||
:headers="{ Authorization: token }"
|
||||
v-model:file-list="fileList"
|
||||
:before-upload="beforeUpload"
|
||||
multiple
|
||||
:maxCount="10"
|
||||
:maxCount="8 - moodboarList.length+fileList.length"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file)=>fileUploadChange(file)"
|
||||
@change="(file) => fileUploadChange(file)"
|
||||
>
|
||||
<div class="upload_tip_block" v-show="fileList.length < 10">
|
||||
<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
v-show=" moodboarList.length != 8"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_max_tip">
|
||||
<!-- <div class="upload_max_tip">
|
||||
<span class="icon iconfont icon-zhuyi"></span>
|
||||
<span>Maximum 10 images can be uploaded, Maximum 2M per image</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Material ref="Material" @confirmSelect="confirmSelect"></Material>
|
||||
|
||||
<a-modal class="moodboard_template_modal"
|
||||
v-model:visible="templateModal"
|
||||
:footer="null"
|
||||
width="47rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
<span
|
||||
>Maximum 10 images can be uploaded, Maximum 2M per
|
||||
image</span
|
||||
>
|
||||
<div class="moodboard_template_content">
|
||||
<div class="moodboard_template_header">
|
||||
<div class="moodboard_template_title">MoodBoard Design</div>
|
||||
<div class="icon iconfont icon-guanbi close_icon" @click.stop="changeTemplateModal()"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="moodboard_template_block">
|
||||
<div class="moodboard_template_info">
|
||||
<MoodTemplate :fileList="this.templateFileList" :moodTemplateId="moodTemplateId"></MoodTemplate>
|
||||
<div class="moodboard_template_refetch_content">
|
||||
<div class="button_second" @click="refetchTemplate()">Re-fetch</div>
|
||||
<Material
|
||||
v-show="openClick == 2"
|
||||
ref="Material"
|
||||
@confirmSelect="confirmSelect"
|
||||
></Material>
|
||||
<Generate
|
||||
v-show="openClick == 3"
|
||||
ref="Generate"
|
||||
:msg="sonData"
|
||||
></Generate>
|
||||
</div>
|
||||
<div v-show="moodboarList.length" class="modal_right">
|
||||
<div class="modal_layout">
|
||||
<div class="modal_text">
|
||||
<div>Thumbnail preview of selected moodboard</div>
|
||||
<div class="modal_btn started_btn" @click="layout()">layout</div>
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<div class="modal_img_item" v-for="item,index in moodboarList" :key="item" @click="deleteFile(item)">
|
||||
<img v-lazy="item.imgUrl">
|
||||
<div class="checked" >
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button_second submit_button" @click="submitTemplate()">Submit</div>
|
||||
</div>
|
||||
<div class="modal_accomplish">
|
||||
<div class="modal_text">
|
||||
<div>Layout of selected moodboard</div>
|
||||
<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">Edit</div>
|
||||
</div>
|
||||
<div class="modal_img" :class="{active:flex_direction}">
|
||||
<!-- <div v-for="item,index in moodb_className" :class="[item]" class="modal_imgItem">
|
||||
<img :src="moodboarList[index].imgUrl">
|
||||
</div> -->
|
||||
<div v-for="item,index in layoutList" :class="[moodb_className[index]]" class="modal_imgItem">
|
||||
<img :src="item.imgUrl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout>
|
||||
|
||||
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
||||
import { defineComponent, h,ref } from 'vue'
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import {getCookie} from '@/tool/cookie'
|
||||
import {getUploadUrl} from '@/tool/util'
|
||||
import {useStore} from 'vuex'
|
||||
import { message, Upload } from 'ant-design-vue';
|
||||
import Material from '@/component/HomePage/Material.vue'
|
||||
import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
|
||||
import { defineComponent, h, ref ,computed} from "vue";
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { getUploadUrl } from "@/tool/util";
|
||||
import { useStore } from "vuex";
|
||||
import { message, Upload } from "ant-design-vue";
|
||||
import Material from "@/component/HomePage/Material.vue";
|
||||
import Generate from "@/component/HomePage/Generate.vue";
|
||||
import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
|
||||
import layout from "@/component/HomePage/layout.vue";
|
||||
import GO from "@/tool/GO";
|
||||
import moodb from "@/tool/moodb";
|
||||
export default defineComponent({
|
||||
components:{Material,MoodTemplate},
|
||||
setup(){
|
||||
let fileList:any = ref([])
|
||||
let templateModal:any = ref(false)
|
||||
let templateFileList:any = ref([])
|
||||
components: { Material, MoodTemplate, Generate,layout },
|
||||
setup() {
|
||||
let lessenList: any = ref([]);
|
||||
let fileList: any = ref([]);
|
||||
let templateModal: any = ref(false);
|
||||
let templateFileList: any = ref([]);
|
||||
let openClick: any = ref(1);
|
||||
let moodb_className:any = ref([]);
|
||||
let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
|
||||
let layoutList:any = []//选中后随机生成的list
|
||||
return {
|
||||
fileList,
|
||||
lessenList,
|
||||
templateModal,
|
||||
templateFileList
|
||||
}
|
||||
templateFileList,
|
||||
openClick,
|
||||
moodb_className,
|
||||
flex_direction,
|
||||
layoutList,
|
||||
};
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
indicator : h(LoadingOutlined, {
|
||||
data() {
|
||||
return {
|
||||
indicator: h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '2.4rem',
|
||||
fontSize: "2.4rem",
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
upload:{
|
||||
isPin:0,
|
||||
level1Type:'Moodboard',
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
upload: {
|
||||
isPin: 0,
|
||||
level1Type: "Moodboard",
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token:'',
|
||||
uploadUrl:'',
|
||||
moodTemplateId:'',//模板id
|
||||
store:useStore()
|
||||
}
|
||||
token: "",
|
||||
uploadUrl: "",
|
||||
moodTemplateId: "", //模板id
|
||||
store: useStore(),
|
||||
sonData: {
|
||||
cli: "Moodboard",
|
||||
},
|
||||
mounted(){
|
||||
this.token = getCookie('token') || ''
|
||||
this.uploadUrl = getUploadUrl()
|
||||
moodb_:moodb.moodb_,
|
||||
moodboarList:computed(()=>{
|
||||
|
||||
return [...useStore().state.UploadFilesModule.moodboardFiles,
|
||||
...useStore().state.UploadFilesModule.generateFiles,
|
||||
...useStore().state.UploadFilesModule.MaterialFiles]
|
||||
}),
|
||||
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
openLibrary(){
|
||||
// watcheffect(){
|
||||
// let breviaryList = this.store.state.UploadFilesModule.moodboardFiles.filter(
|
||||
// (v: any) => v.checked == true
|
||||
// );
|
||||
// this.store.commit("setMoodboardFile", breviaryList);
|
||||
// console.log(22);
|
||||
// },
|
||||
mounted() {
|
||||
this.token = getCookie("token") || "";
|
||||
this.uploadUrl = getUploadUrl();
|
||||
|
||||
},
|
||||
methods: {
|
||||
open(num: Number) {
|
||||
this.openClick = num;
|
||||
if(num ==2 ){
|
||||
let material:any = this.$refs.Material
|
||||
material.init('Moodboard')
|
||||
}else if (num == 3){
|
||||
// let Generate:any = this.$refs.Generate
|
||||
// Generate.init('generate')
|
||||
}
|
||||
},
|
||||
fileUploadChange(data:any){
|
||||
let file = data.file
|
||||
if(file.status === 'done'){
|
||||
let res = JSON.parse(file.xhr.response)
|
||||
file.imgUrl = res.data.url
|
||||
file.resData = res.data
|
||||
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
|
||||
this.store.commit('setMoodboardFile',fileList)
|
||||
this.store.commit('clearMoodTemplateId')
|
||||
}else if(file.status === 'error'){
|
||||
let index = -1
|
||||
this.fileList.forEach((ele:any,index1:any) => {
|
||||
if(file.uid === ele.uid){
|
||||
index = index1
|
||||
fileUploadChange(data: any) {
|
||||
let file = data.file;
|
||||
if (file.status === "done") {
|
||||
let res = JSON.parse(file.xhr.response);
|
||||
file.imgUrl = res.data.url;
|
||||
file.resData = res.data;
|
||||
file.type_ = 'upload';
|
||||
file.id_ = GO.id++
|
||||
let fileList = this.fileList.filter(
|
||||
(v: any) => v.status === "done"
|
||||
);
|
||||
let arr = [...this.store.state.UploadFilesModule.generateFiles,...this.store.state.UploadFilesModule.MaterialFiles,...this.store.state.UploadFilesModule.moodboardFiles]
|
||||
if(arr.length >= 8){
|
||||
message.error('You can select up to 8 images')
|
||||
}else{
|
||||
this.store.commit("setMoodboardFile", fileList);
|
||||
this.store.commit("clearMoodTemplateId");
|
||||
}
|
||||
} else if (file.status === "error") {
|
||||
let index = -1;
|
||||
this.fileList.forEach((ele: any, index1: any) => {
|
||||
if (file.uid === ele.uid) {
|
||||
index = index1;
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
if (index > -1) {
|
||||
this.fileList.splice(index, 1);
|
||||
}
|
||||
message.error(file.name + 'upload failed')
|
||||
message.error(file.name + "upload failed");
|
||||
}
|
||||
},
|
||||
|
||||
beforeUpload(file:any){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload Image file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 5MB!');
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
|
||||
deleteFile(index:any){
|
||||
this.fileList.splice(index, 1)
|
||||
this.store.commit('setMoodboardFile',this.fileList)
|
||||
this.store.commit('clearMoodTemplateId')
|
||||
},
|
||||
recollection(){
|
||||
this.fileList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.moodboardFiles))
|
||||
let moodTemplateId = this.store.state.UploadFilesModule.allBoardData.moodTemplateId
|
||||
this.store.commit('setMoodboardFile',this.fileList)
|
||||
this.store.commit('setMoodTemplateId',moodTemplateId)
|
||||
},
|
||||
|
||||
confirmSelect(event:any){
|
||||
for(let item of event){
|
||||
let data = {
|
||||
@@ -188,134 +263,230 @@ export default defineComponent({
|
||||
resData:item,
|
||||
status:'done',
|
||||
}
|
||||
if(this.fileList.length == 10){
|
||||
if(this.fileList.length == 8){
|
||||
message.error('Maximum number of allowable file uploads has been exceeded')
|
||||
break
|
||||
}
|
||||
}else{
|
||||
this.fileList.push(data)
|
||||
}
|
||||
}
|
||||
this.store.commit('setMoodboardFile',this.fileList)
|
||||
this.store.commit('clearMoodTemplateId')
|
||||
|
||||
},
|
||||
|
||||
changeTemplateModal(){
|
||||
this.templateModal = !this.templateModal
|
||||
if(this.templateModal){
|
||||
this.templateFileList = this.fileList.map((v:any)=>{
|
||||
let data = {
|
||||
...v,
|
||||
imgUrl:v.imgUrl.replace(/\s/g, encodeURIComponent(' '))
|
||||
beforeUpload(file: any) {
|
||||
const isJpgOrPng =
|
||||
file.type === "image/jpeg" ||
|
||||
file.type === "image/png" ||
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/bmp";
|
||||
if (!isJpgOrPng) {
|
||||
message.error("You can only upload Image file!");
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error("Image must smaller than 5MB!");
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
|
||||
deleteFile(item: any) {
|
||||
if(item.type_ == 'generate' || item.type_ == 'material'){
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
|
||||
}else{
|
||||
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
|
||||
let moodboard
|
||||
this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
|
||||
if(items.id_ == item.id_){
|
||||
moodboard = index
|
||||
|
||||
}
|
||||
return data
|
||||
})
|
||||
this.moodTemplateId = this.store.state.UploadFilesModule.moodTemplateId || this.templateFileList.length
|
||||
this.fileList.splice(moodboard,1)
|
||||
this.store.commit("setMoodboardFile", this.fileList);
|
||||
}
|
||||
this.store.commit("clearMoodTemplateId");
|
||||
},
|
||||
|
||||
randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值
|
||||
let index = Math.floor(Math.random() * (max - min)) + min;
|
||||
while(index === num){
|
||||
index = Math.floor(Math.random() * (max - min)) + min;
|
||||
}
|
||||
return index
|
||||
|
||||
recollection() {
|
||||
this.fileList = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.moodboardFiles
|
||||
)
|
||||
);
|
||||
let moodTemplateId =
|
||||
this.store.state.UploadFilesModule.allBoardData.moodTemplateId;
|
||||
this.store.commit("setMoodboardFile", this.fileList);
|
||||
this.store.commit("setMoodTemplateId", moodTemplateId);
|
||||
},
|
||||
|
||||
//随机重置图片顺序
|
||||
refetchTemplate(){
|
||||
let arr= Array.from({length:this.templateFileList.length})
|
||||
for(let item of this.templateFileList){
|
||||
let index = this.randomRange(0,this.templateFileList.length,-1)
|
||||
while(arr[index]){
|
||||
index = this.randomRange(0,this.templateFileList.length,-1)
|
||||
}
|
||||
arr[index] = item
|
||||
}
|
||||
this.templateFileList = arr
|
||||
changeTemplateModal() {
|
||||
let layout:any = this.$refs.layout
|
||||
// layout.init('moodboard')
|
||||
layout.init()
|
||||
},
|
||||
layout(){
|
||||
let arr = [...this.store.state.UploadFilesModule.generateFiles,...this.store.state.UploadFilesModule.MaterialFiles,...this.store.state.UploadFilesModule.moodboardFiles]
|
||||
this.layoutList = arr
|
||||
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
|
||||
let moodb = this.moodb_[arr.length-1][random]
|
||||
|
||||
//提交模板
|
||||
submitTemplate(){
|
||||
this.fileList = JSON.parse(JSON.stringify(this.templateFileList))
|
||||
this.store.commit('setMoodboardFile',this.fileList)
|
||||
this.store.commit('setMoodTemplateId',this.moodTemplateId)
|
||||
this.changeTemplateModal()
|
||||
console.log(moodb.filter((item,index)=> item == 'w2h1'));
|
||||
|
||||
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
|
||||
this.flex_direction = true
|
||||
}else{
|
||||
this.flex_direction = false
|
||||
}
|
||||
this.moodb_className = this.moodb_[arr.length-1][random]
|
||||
},
|
||||
setmoodbClass(val:any){
|
||||
this.moodb_className = val
|
||||
}
|
||||
})
|
||||
// randomRange(min: any, max: any, num: any) {
|
||||
// // min最小值，max最大值 num排除的值
|
||||
// let index = Math.floor(Math.random() * (max - min)) + min;
|
||||
// while (index === num) {
|
||||
// index = Math.floor(Math.random() * (max - min)) + min;
|
||||
// }
|
||||
// return index;
|
||||
// },
|
||||
|
||||
// //随机重置图片顺序
|
||||
// refetchTemplate() {
|
||||
// let arr = Array.from({ length: this.templateFileList.length });
|
||||
// for (let item of this.templateFileList) {
|
||||
// let index = this.randomRange(
|
||||
// 0,
|
||||
// this.templateFileList.length,
|
||||
// -1
|
||||
// );
|
||||
// while (arr[index]) {
|
||||
// index = this.randomRange(
|
||||
// 0,
|
||||
// this.templateFileList.length,
|
||||
// -1
|
||||
// );
|
||||
// }
|
||||
// arr[index] = item;
|
||||
// }
|
||||
// this.templateFileList = arr;
|
||||
// },
|
||||
|
||||
// //提交模板
|
||||
// submitTemplate() {
|
||||
// // this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
|
||||
// // this.store.commit("setMoodboardFile", this.fileList);
|
||||
// // this.store.commit("setMoodTemplateId", this.moodTemplateId);
|
||||
// // this.changeTemplateModal();
|
||||
// },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.collection_modal_item{
|
||||
padding: 1.5rem 2.6rem 4rem;
|
||||
.collection_modal_item {
|
||||
// padding: 1.5rem 2.6rem 4rem;
|
||||
height: 100%;
|
||||
|
||||
.switch_type_list{
|
||||
display: flex;
|
||||
.modal_left {
|
||||
padding-top: 4rem;
|
||||
width: 47%;
|
||||
// width: 50rem;
|
||||
.switch_type_list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.switch_type_item{
|
||||
.switch_type_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
// padding: 0 2rem;
|
||||
height: 4rem;
|
||||
background: #fff;
|
||||
border-radius: 0.8rem;
|
||||
line-height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
margin-right: 2.2rem;
|
||||
color: #5B5E69;
|
||||
// margin-right: 2.2rem;
|
||||
margin-right: 8rem;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
|
||||
&.select_swtich{
|
||||
color: #343579;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transform-origin: left;
|
||||
transform: scale(1);
|
||||
transition: 0.3s all;
|
||||
&.switch_type_item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: 3px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 6px;
|
||||
width: 0px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
&.select_swtich {
|
||||
color: #000;
|
||||
// font-weight: 900;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
&.select_swtich::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.switch_icon{
|
||||
.switch_icon {
|
||||
font-size: 1.8rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.design_template_button{
|
||||
background: #E6E6F6;
|
||||
padding: 0 2.7rem;
|
||||
font-size: 1.4rem;
|
||||
height: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
cursor: pointer;
|
||||
color: #343579;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.moodboard_body{
|
||||
margin-top: 1rem;
|
||||
.moodboard_body {
|
||||
height: calc(100% - 5rem);
|
||||
|
||||
.upload_img_body{
|
||||
padding-top: 2.5rem;
|
||||
height: 30rem;
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
&.moodboard_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.upload_img_body {
|
||||
height: calc(100% - 3rem);
|
||||
overflow-y: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.upload_file_item{
|
||||
.upload_file_item {
|
||||
margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
border: 1px solid #F5F5F5;
|
||||
// width: 16.5rem;
|
||||
// height: 16.5rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border: 1px solid #f5f5f5;
|
||||
vertical-align: top;
|
||||
|
||||
&.upload_component{
|
||||
position: relative;
|
||||
&.upload_component {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.upload_file_item_content{
|
||||
:deep(.ant-upload-picture-card-wrapper) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
:deep(.ant-upload-select-picture-card) {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border: 0.3rem solid #ededed;
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
.upload_file_item_content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -323,25 +494,25 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
&:hover .delete_file_block{
|
||||
&:hover .delete_file_block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.upload_img{
|
||||
.upload_img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.delete_file_block{
|
||||
.delete_file_block {
|
||||
display: none;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
height: 4rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
height: 3rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 4rem;
|
||||
color: #ffffff;
|
||||
line-height: 3rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -349,77 +520,123 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
.upload_img_icon{
|
||||
.upload_img_icon {
|
||||
width: 4.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_max_tip{
|
||||
.upload_max_tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.4rem;
|
||||
color: #030303;
|
||||
|
||||
.icon-zhuyi{
|
||||
.icon-zhuyi {
|
||||
font-size: 1.6rem;
|
||||
margin-right: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.moodboard_template_modal{
|
||||
|
||||
.ant-modal-body{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.moodboard_template_content{
|
||||
background: #F2F3FB;
|
||||
padding-bottom: 2.9rem;
|
||||
|
||||
.moodboard_template_header{
|
||||
.modal_right{
|
||||
flex: 1;
|
||||
margin-left: 3rem;
|
||||
.modal_layout,.modal_accomplish{
|
||||
.modal_text{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 2rem 0 2.5rem;
|
||||
height: 6.6rem;
|
||||
|
||||
.moodboard_template_title{
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
color: #030303;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.close_icon{
|
||||
font-size: 1.8rem;
|
||||
color: #AEB2B7;
|
||||
}
|
||||
.modal_layout{
|
||||
.modal_img{
|
||||
width: 40rem;
|
||||
height: 5rem;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
&.modal_img::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.modal_img_item{
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0 1rem 1rem 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.checked{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.modal_img_item:hover .checked{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.moodboard_template_block{
|
||||
padding: 0 3.1rem 0;
|
||||
|
||||
.moodboard_template_info{
|
||||
background: #fff;
|
||||
|
||||
.moodboard_template_refetch_content{
|
||||
padding: 3.1rem 0 2rem;
|
||||
|
||||
.button_second{
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.modal_accomplish{
|
||||
// margin-top: 2rem;
|
||||
height: 30rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.modal_text{
|
||||
padding-top: 2rem;
|
||||
padding-block: 2rem;
|
||||
}
|
||||
.modal_img{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
&.active{
|
||||
flex-direction: row;
|
||||
}
|
||||
.modal_imgItem{
|
||||
position: relative;
|
||||
img{
|
||||
position: absolute;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.wh1{
|
||||
width: 23%;
|
||||
height: 48%;
|
||||
}
|
||||
.wh4{
|
||||
width: 48.5%;
|
||||
height: 100%;
|
||||
}
|
||||
.w1h2{
|
||||
width: 23%;
|
||||
height: 100%;
|
||||
}
|
||||
.w2h1{
|
||||
width: 48.5%;
|
||||
height: 48%;
|
||||
}
|
||||
}
|
||||
.submit_button{
|
||||
margin: 2rem auto 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -4,11 +4,26 @@
|
||||
<div class="left_upload_header">
|
||||
<div class="upload_header_item">
|
||||
<div class="switch_type_list">
|
||||
<div class="switch_type_item select_swtich">
|
||||
<div
|
||||
@click="open(1)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Upload</span>
|
||||
</div>
|
||||
<div @click="openLibrary()" class="switch_type_item">
|
||||
<span>My Library</span>
|
||||
<div
|
||||
@click="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Library</span>
|
||||
</div>
|
||||
<div
|
||||
@click="open(3)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Generate</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -17,7 +32,7 @@
|
||||
<div v-show="fileList.length>1 || (moodBoards.length && fileList.length)" class="recollection_button" @click="generatePrint()">Generate</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="printboard_body">
|
||||
<div v-show="openClick == 1" class="printboard_body">
|
||||
<div class="upload_img_body">
|
||||
<div class="upload_item">
|
||||
<div :class="['upload_file_item']" v-for="(file, index) in fileList" :key="file">
|
||||
@@ -65,6 +80,8 @@
|
||||
<span>Maximum 15 images can be uploaded, Maximum 2M per image</span>
|
||||
</div>
|
||||
</div>
|
||||
<Material v-show="openClick == 2" ref="Material" @confirmSelect="confirmSelect"></Material>
|
||||
<Generate v-show="openClick == 3" ref="Generate" :msg="sonData"></Generate>
|
||||
</div>
|
||||
<div class="generate_print">
|
||||
<div class="generate_print_header">
|
||||
@@ -88,7 +105,6 @@
|
||||
</div>
|
||||
|
||||
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
|
||||
<Material ref="Material" @confirmSelect="confirmSelect"></Material>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@@ -101,20 +117,24 @@ import { Https } from "@/tool/https";
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import Cropper from '@/component/HomePage/Cropper.vue'
|
||||
import Material from '@/component/HomePage/Material.vue'
|
||||
import Generate from "@/component/HomePage/Generate.vue";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
Cropper,
|
||||
Material
|
||||
Material,
|
||||
Generate
|
||||
},
|
||||
setup(){
|
||||
let store:any =useStore()
|
||||
let fileList:any = ref([]),//选中的文件id数据
|
||||
printImgList:any = ref([]), //print的印花图片
|
||||
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboardFiles})
|
||||
let openClick: any = ref(1);
|
||||
return {
|
||||
fileList,
|
||||
printImgList,
|
||||
moodBoards
|
||||
moodBoards,
|
||||
openClick
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
@@ -150,6 +170,9 @@ export default defineComponent({
|
||||
currentFileNum:0, //当前上传的文件数
|
||||
isUpload:false,
|
||||
generateloading:false,
|
||||
sonData: {
|
||||
cli: "Printboard",
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
@@ -158,6 +181,9 @@ export default defineComponent({
|
||||
this.uploadUrl = getUploadUrl()
|
||||
},
|
||||
methods:{
|
||||
open(num: Number) {
|
||||
this.openClick = num;
|
||||
},
|
||||
openLibrary(){
|
||||
let material:any = this.$refs.Material
|
||||
material.init('Printboard')
|
||||
|
||||
@@ -80,26 +80,6 @@ export default defineComponent({
|
||||
this.textScroll()
|
||||
let userInfo:any = getCookie("userInfo")
|
||||
this.userInfo = JSON.parse(userInfo);
|
||||
console.log(22);
|
||||
|
||||
const data = {
|
||||
"user_id": "83",
|
||||
"session_id": "",
|
||||
"message": "Hello, can you tell me what holiday is on July 1st",
|
||||
};
|
||||
|
||||
axios.post('/api/python/chatStream', data, {onDownloadProgress: (progressEvent) => {
|
||||
// console.log(11);
|
||||
// num = progressEvent.event.currentTarget.response
|
||||
console.log(progressEvent);
|
||||
|
||||
},
|
||||
}).then((res)=>{
|
||||
console.log(res);
|
||||
}).catch((response) => {
|
||||
console.log(response);
|
||||
// var res = http.responseText
|
||||
});
|
||||
},
|
||||
directives:{
|
||||
fade:{
|
||||
@@ -168,46 +148,33 @@ const data = {
|
||||
|
||||
"session_id":""
|
||||
}
|
||||
console.log(getCookie('token'));
|
||||
|
||||
let interaction = {onDownloadProgress: (progressEvent:any) => {
|
||||
this.clearTimer()
|
||||
console.log(progressEvent);
|
||||
console.log(progressEvent.event.currentTarget.response);
|
||||
|
||||
if(a){
|
||||
this.dialogue.push({
|
||||
state:1,
|
||||
// if(a){
|
||||
// this.dialogue.push({
|
||||
// state:1,
|
||||
// str:progressEvent.event.currentTarget.response
|
||||
})
|
||||
a = false
|
||||
}else{
|
||||
this.dialogue[this.dialogue.length].str = progressEvent.event.currentTarget.response
|
||||
}
|
||||
// })
|
||||
// a = false
|
||||
// }else{
|
||||
// this.dialogue[this.dialogue.length].str = progressEvent.event.currentTarget.response
|
||||
// }
|
||||
},
|
||||
}
|
||||
// Https.axiosPost(Https.httpUrls.pythonChatStream, data,interaction).then(
|
||||
// (rv: any) => {
|
||||
// a = true
|
||||
// this.createTimer()
|
||||
// }
|
||||
// ).catch(res=>{
|
||||
// this.createTimer()
|
||||
// });
|
||||
Https.axiosPost(Https.httpUrls.pythonChatStream, data,interaction).then(
|
||||
(rv: any) => {
|
||||
a = true
|
||||
this.createTimer()
|
||||
}
|
||||
).catch(res=>{
|
||||
this.createTimer()
|
||||
});
|
||||
|
||||
// new Promise((resolve, reject) => {
|
||||
|
||||
axios.post('/api/python/chatStream', data, {onDownloadProgress: (progressEvent) => {
|
||||
// console.log(11);
|
||||
// num = progressEvent.event.currentTarget.response
|
||||
console.log(progressEvent);
|
||||
|
||||
},
|
||||
}).then((res)=>{
|
||||
console.log(res);
|
||||
}).catch((response) => {
|
||||
console.log(response);
|
||||
// var res = http.responseText
|
||||
});
|
||||
|
||||
// axios.post("/api/python/chatStream", data,{
|
||||
// onDownloadProgress: (progressEvent:any) => {
|
||||
@@ -266,15 +233,17 @@ const data = {
|
||||
<style lang="less" scoped>
|
||||
.robot{
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
right: 50px;
|
||||
bottom: .5rem;
|
||||
// bottom: 2.5rem;
|
||||
right: 2.5rem;
|
||||
// right: 5rem;
|
||||
z-index: 9999;
|
||||
// width: 400px;
|
||||
.robot_top{
|
||||
// width: 70%;
|
||||
width: 250px;
|
||||
width: 25rem;
|
||||
margin-left: auto;
|
||||
height: 140px;
|
||||
height: 14rem;
|
||||
overflow-x: hidden;
|
||||
transition: .3s all;
|
||||
opacity: 0;
|
||||
@@ -284,15 +253,15 @@ const data = {
|
||||
}
|
||||
&.robot_top::-webkit-scrollbar{display: none;}
|
||||
.robot_text{
|
||||
font-size: 14px;
|
||||
padding: 5px 10px;
|
||||
font-size: 1.4rem;
|
||||
padding: .5rem 1rem;
|
||||
display: inline-block;
|
||||
border-radius: 20px;
|
||||
border-radius: 2rem;
|
||||
max-width: 80%;
|
||||
}
|
||||
.text_left,.text_right{
|
||||
margin: 20px 0;
|
||||
font-size: 12px;
|
||||
margin: 2rem 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.text_left{
|
||||
display: flex;
|
||||
@@ -327,14 +296,14 @@ const data = {
|
||||
transition: .3s all;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
margin-right: 40px;
|
||||
margin-right: 4rem;
|
||||
&.active{
|
||||
opacity: 1;
|
||||
}
|
||||
input{
|
||||
border: none;
|
||||
font-size: 12px;
|
||||
width: 250px;
|
||||
font-size: 1.2rem;
|
||||
width: 25rem;
|
||||
}
|
||||
.robot_btn{
|
||||
display: flex;
|
||||
@@ -352,8 +321,7 @@ const data = {
|
||||
.robot_img{
|
||||
margin-left: auto;
|
||||
img{
|
||||
width: 100px;
|
||||
width: 80px;
|
||||
width: 8rem;
|
||||
// margin-left: 40px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
378
src/component/HomePage/Upload.vue
Normal file
378
src/component/HomePage/Upload.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<div class="moodboard_body">
|
||||
<div class="upload_img_body scroll_style" >
|
||||
<div class="upload_item">
|
||||
<div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
|
||||
<a-spin :indicator="indicator" tip="Uploading..."/>
|
||||
</div>
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'done'">
|
||||
<img :src="file?.imgUrl" class="upload_img">
|
||||
<div class="delete_file_block" @click="deleteFile(index)">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_file_item upload_component" v-show="fileList.length < 10">
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload
|
||||
}"
|
||||
:headers="{Authorization:token}"
|
||||
v-model:file-list="fileList"
|
||||
:before-upload="beforeUpload"
|
||||
multiple
|
||||
:maxCount="10"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file)=>fileUploadChange(file)"
|
||||
>
|
||||
<div class="upload_tip_block" v-show="fileList.length < 10">
|
||||
<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_max_tip">
|
||||
<span class="icon iconfont icon-zhuyi"></span>
|
||||
<span>Maximum 10 images can be uploaded, Maximum 2M per image</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, h} from 'vue'
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import {getUploadUrl} from '@/tool/util'
|
||||
import {getCookie} from '@/tool/cookie'
|
||||
import { message, Upload } from 'ant-design-vue';
|
||||
import {useStore} from 'vuex'
|
||||
|
||||
export default defineComponent({
|
||||
props: ["msg"],
|
||||
setup(prop) {
|
||||
console.log(prop.msg);
|
||||
|
||||
let fileList:any = ref([])
|
||||
|
||||
return{
|
||||
fileList
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
indicator : h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '2.4rem',
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
uploadUrl:'',
|
||||
upload:{
|
||||
isPin:0,
|
||||
level1Type:'Moodboard',
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token:'',
|
||||
store:useStore(),
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.token = getCookie('token') || ''
|
||||
this.uploadUrl = getUploadUrl()
|
||||
},
|
||||
methods:{
|
||||
|
||||
beforeUpload(file:any){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload Image file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 5MB!');
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
fileUploadChange(data:any){
|
||||
let file = data.file
|
||||
if(file.status === 'done'){
|
||||
let res = JSON.parse(file.xhr.response)
|
||||
file.imgUrl = res.data.url
|
||||
file.resData = res.data
|
||||
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
|
||||
this.store.commit('setMoodboardFile',fileList)
|
||||
this.store.commit('clearMoodTemplateId')
|
||||
}else if(file.status === 'error'){
|
||||
let index = -1
|
||||
this.fileList.forEach((ele:any,index1:any) => {
|
||||
if(file.uid === ele.uid){
|
||||
index = index1
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
}
|
||||
message.error(file.name + 'upload failed')
|
||||
}
|
||||
},
|
||||
deleteFile(index:any){
|
||||
this.fileList.splice(index, 1)
|
||||
this.store.commit('setMoodboardFile',this.fileList)
|
||||
this.store.commit('clearMoodTemplateId')
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.generate{
|
||||
// background: #030303;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.my_material_modal{
|
||||
border-radius: 2rem;
|
||||
.ant-modal-close{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
position: absolute;
|
||||
top: -1.8rem;
|
||||
right: -1.8rem;
|
||||
}
|
||||
|
||||
.ant-modal-header{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-modal-body{
|
||||
background: #F2F3FB;
|
||||
height: 80vh;
|
||||
min-height: 72rem;
|
||||
overflow-y: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.my_material_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 6.6rem;
|
||||
background: #F7F7F7;
|
||||
padding: 0 3.4rem 0 3.1rem;
|
||||
|
||||
.my_material_title{
|
||||
font-size: 1.8rem;
|
||||
color: #030303;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.my_material_header_right{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.content_search_block{
|
||||
margin-right: 5rem;
|
||||
display: flex;
|
||||
|
||||
.search_input{
|
||||
width: 30rem;
|
||||
padding-left: 1.5rem;
|
||||
height: 4rem;
|
||||
line-height: 3.8rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #F1F1F1;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
|
||||
&::placeholder {
|
||||
color: #C2C2C2;
|
||||
}
|
||||
}
|
||||
|
||||
.search_icon_block{
|
||||
width: 6rem;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-sousuo{
|
||||
font-size: 2rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon_close{
|
||||
color: rgba(174, 178, 183, 1);
|
||||
font-size: 2.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.my_material_content{
|
||||
padding: 0 3rem 3.5rem 3rem;
|
||||
height: calc(100% - 6.6rem);
|
||||
position: relative;
|
||||
|
||||
.material_content_top{
|
||||
padding: 1.3rem 0 2.1rem;
|
||||
height: 7rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.material_content_top_title{
|
||||
font-size: 20px;
|
||||
color: #030303;
|
||||
}
|
||||
|
||||
.material_content_top_right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.select_block{
|
||||
background: #FFFFFF;
|
||||
color: #1A1A1A !important;
|
||||
margin-right: 2.3rem;
|
||||
|
||||
.icon-xiala{
|
||||
color: #1A1A1A !important;
|
||||
}
|
||||
}
|
||||
|
||||
.check_all_block{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.6rem;
|
||||
color: #64686D;
|
||||
cursor: pointer;
|
||||
|
||||
&.check_all{
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
.check_block{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
background: #EBECF4;
|
||||
border: 0.1rem solid #64686D;
|
||||
padding: 0.3rem;
|
||||
margin-right: 0.7rem;
|
||||
|
||||
.check_block_body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #343579;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.material_content_body{
|
||||
width: 100%;
|
||||
height: calc(100% - 19rem);
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
.content_img_item{
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 0 1.4rem;
|
||||
margin-bottom: 2.8rem;
|
||||
|
||||
.content_img_item_block{
|
||||
border: 0.1rem solid transparent;
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&.select_item_img{
|
||||
border-color: #343579;
|
||||
}
|
||||
|
||||
.print_content_img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content_img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.content_img_name{
|
||||
width: 16.5rem;
|
||||
height: 3.5rem;
|
||||
line-height: 3.5rem;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.4rem;
|
||||
color: #030303;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.no_data_block{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
|
||||
&.loading_block{
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.material_confirm{
|
||||
width: 9.8rem;
|
||||
height: 3.6rem;
|
||||
line-height: 3.6rem;
|
||||
font-size: 1.4rem;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
color: #FFFFFF;
|
||||
background: #343579;
|
||||
cursor: pointer;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.table_pagination{
|
||||
position: absolute;
|
||||
bottom: 3.5rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -6,21 +6,37 @@
|
||||
width="80%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
>
|
||||
<template #title>
|
||||
<div class="collection_title">
|
||||
<div class="collection_title_text">
|
||||
<div v-show="collectionStep === 1">Moodboard</div>
|
||||
<div v-show="collectionStep === 2"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Printboard</div>
|
||||
<div v-show="collectionStep === 3"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Colorboard</div>
|
||||
<div v-show="collectionStep === 4"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Sketchboard</div>
|
||||
<div v-show="collectionStep === 5"><span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span>Markets Sketch</div>
|
||||
</template>
|
||||
<template #closeIcon>
|
||||
<div class="header_right_block" @click.stop="">
|
||||
<div v-if="collectionStep < 5" class="next_step_button" @click.stop="nextStep()">Next Step</div>
|
||||
<div v-else class="next_step_button" @click.stop="finishCollection()">Finish</div>
|
||||
<div class="header_cancel_button" @click.stop="cancelDsign()">Cancel</div>
|
||||
<div v-show="collectionStep === 2">Printboard</div>
|
||||
<div v-show="collectionStep === 3">Colorboard</div>
|
||||
<div v-show="collectionStep === 4">Sketchboard</div>
|
||||
<div v-show="collectionStep === 5">Markets Sketch</div>
|
||||
<div class="collection_title_text_intro">select moodboard for your collection</div>
|
||||
</div>
|
||||
<div>
|
||||
<a-progress :strokeWidth= 13 :width= 60 strokeColor="#341e57" type="circle" :percent="collectionStep*25" :format="percent => `${collectionStep}/4`" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="collection_closeIcon" @click.stop="cancelDsign()">
|
||||
<!-- <div class="header_right_block" @click.stop="">
|
||||
<div class="header_cancel_button" >Cancel</div>
|
||||
</div> -->
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
<div class="collection_page">
|
||||
<!-- <div v-if="collectionStep < 5" class="next_step_button" @click.stop="nextStep()">Next Step</div> -->
|
||||
<!-- <div v-else class="next_step_button" @click.stop="finishCollection()">Finish</div> -->
|
||||
<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
|
||||
<i v-if="collectionStep < 5" class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
|
||||
<i v-else class="fi fi-rr-arrow-small-right" @click.stop="finishCollection()"></i>
|
||||
<!-- <span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span> -->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<div class="collection_modal_body">
|
||||
<MoodboardUpload ref="MoodboardUpload" v-show="collectionStep === 1"></MoodboardUpload>
|
||||
<PrintboardUpload ref="PrintboardUpload" v-show="collectionStep === 2"></PrintboardUpload>
|
||||
@@ -34,6 +50,8 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent ,createVNode } from 'vue'
|
||||
|
||||
import Generate from '@/component/HomePage/Generate.vue'
|
||||
import MoodboardUpload from '@/component/HomePage/MoodboardUpload.vue'
|
||||
import PrintboardUpload from '@/component/HomePage/PrintboardUpload.vue'
|
||||
import ColorboardUpload from '@/component/HomePage/ColorboardUpload.vue'
|
||||
@@ -44,6 +62,7 @@ import { Modal,message } from 'ant-design-vue';
|
||||
import {useStore} from 'vuex'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
Generate,
|
||||
MoodboardUpload,
|
||||
PrintboardUpload,
|
||||
ColorboardUpload,
|
||||
@@ -89,6 +108,7 @@ export default defineComponent({
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
// centered:true,
|
||||
onOk() {
|
||||
_this.showCollectionModal = false
|
||||
@@ -114,6 +134,70 @@ export default defineComponent({
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.collection_modal{
|
||||
// max-width: 120rem;
|
||||
.collection_title,.collection_closeIcon,.collection_page{
|
||||
position: absolute;
|
||||
}
|
||||
.collection_title{
|
||||
top: 4rem;
|
||||
display: flex;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 900;
|
||||
color: rgba(0,0,0,.65);
|
||||
align-items: center;
|
||||
.collection_title_text{
|
||||
margin-right: 4rem;
|
||||
}
|
||||
.collection_title_text_intro{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
color: rgba(0,0,0,.45);
|
||||
}
|
||||
}
|
||||
.collection_closeIcon{
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
cursor: pointer;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.fi-rr-cross-small::before{
|
||||
padding: .2rem;
|
||||
border-radius: 5px;
|
||||
border: solid 2px rgba(0, 0, 0, 0.25);
|
||||
transition: 1s all;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
&.collection_closeIcon:hover .fi-rr-cross-small::before{
|
||||
border: solid 2px rgba(0, 0, 0, 0.55);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
.collection_page{
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 3rem;
|
||||
.fi-rr-arrow-small-left{
|
||||
margin-right: 10rem;
|
||||
}
|
||||
.fi{
|
||||
cursor: pointer;
|
||||
}
|
||||
.fi::before{
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
border: solid 2px rgba(0, 0, 0, 0.25);
|
||||
transition: 1s all;
|
||||
}
|
||||
.fi:hover.fi::before{
|
||||
border: solid 2px rgba(0, 0, 0, 0.55);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
.header_icon_fanhui{
|
||||
margin-right: 1rem;
|
||||
font-size: 2rem;
|
||||
@@ -155,3 +239,20 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.collection_modal{
|
||||
max-width: 1200px ;
|
||||
.ant-modal-content{
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
.ant-modal-header{
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
}
|
||||
.ant-modal-body{
|
||||
padding: 8rem 5rem !important;
|
||||
height: calc(60vh - 6.4rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
394
src/component/HomePage/layout.vue
Normal file
394
src/component/HomePage/layout.vue
Normal file
@@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal
|
||||
class="layout_modal"
|
||||
v-model:visible="layout"
|
||||
:footer="null"
|
||||
width="47rem"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="false"
|
||||
>
|
||||
<div class="layout_content">
|
||||
<div class="layout_header">
|
||||
<div class="layout_title">MoodBoard Design</div>
|
||||
<div
|
||||
class="icon iconfont icon-guanbi close_icon"
|
||||
@click.stop="init()"
|
||||
></div>
|
||||
</div>
|
||||
<div class="layout_nav">
|
||||
<div v-for="item,index in layoutList" :key="item">
|
||||
<img :src="item.imgUrl">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout_centent" :class="{active:flex_direction}">
|
||||
<!-- <div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem">
|
||||
<img :src="item.imgUrl">
|
||||
</div> -->
|
||||
<draggable
|
||||
v-model="layoutList"
|
||||
group="people"
|
||||
@start="drag=true"
|
||||
@end="drag=false"
|
||||
animation= "150"
|
||||
item-key="id">
|
||||
<template #item="{element,index}">
|
||||
<div :data-id="element.id_" :class="moodbClassName[index]" class="modal_imgItem">
|
||||
<img :src="element.imgUrl">
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
<!-- <div v-for="item,index in moodb_className" :class="item" class="modal_imgItem">
|
||||
<img :src="layoutList[index].imgUrl" alt="">
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="layout_left">
|
||||
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
|
||||
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout_right">
|
||||
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
|
||||
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="button_second submit_button"
|
||||
@click="submitTemplate()"
|
||||
>
|
||||
Submit
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, h, ref ,computed,reactive, toRefs} from "vue";
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { useStore } from "vuex";
|
||||
import moodb from "@/tool/moodb";
|
||||
import draggable from 'vuedraggable'
|
||||
export default defineComponent({
|
||||
props:["moodb_className",'flex_direction'],
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
setup(prop) {
|
||||
let fileList: any = ref([]);
|
||||
let layout: any = ref(false);
|
||||
let templateFileList: any = ref([]);
|
||||
let openClick: any = ref(1);
|
||||
let drag = false;
|
||||
return {
|
||||
fileList,
|
||||
layout,
|
||||
templateFileList,
|
||||
openClick,
|
||||
drag,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicator: h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: "2.4rem",
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
moodTemplateId: "", //模板id
|
||||
store: useStore(),
|
||||
|
||||
layoutList:computed(()=>{
|
||||
return [...(useStore().state.UploadFilesModule.moodboardFiles),
|
||||
...(useStore().state.UploadFilesModule.generateFiles),
|
||||
...(useStore().state.UploadFilesModule.MaterialFiles)]
|
||||
}),
|
||||
layoutListaa:[
|
||||
{
|
||||
id_:1,
|
||||
name:'2',
|
||||
},
|
||||
{
|
||||
id_:2,
|
||||
name:'2',
|
||||
},
|
||||
{
|
||||
id_:3,
|
||||
name:'2',
|
||||
},
|
||||
],
|
||||
moodb : moodb.moodb_,
|
||||
moodbList:{},
|
||||
moodbClassName:[],
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
directives:{
|
||||
layout:{
|
||||
mounted (el,layout) {
|
||||
// console.log(el,layout);
|
||||
layout.value.style = {
|
||||
rotate:'',
|
||||
left:'',
|
||||
top:'',
|
||||
width:'',
|
||||
height:'',
|
||||
}
|
||||
},
|
||||
updated (el,layout) {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.layout = !this.layout
|
||||
let layoutList = [...this.store.state.UploadFilesModule.moodboardFiles,
|
||||
...this.store.state.UploadFilesModule.generateFiles,
|
||||
...this.store.state.UploadFilesModule.MaterialFiles]
|
||||
console.log(this.moodb[layoutList.length]);
|
||||
this.moodbList = this.moodb[layoutList.length-1]
|
||||
this.moodbClassName = this.moodb_className
|
||||
},
|
||||
setmoodb(item:any){
|
||||
console.log(item);
|
||||
this.moodbClassName = item
|
||||
this.$emit('setmoodbClass',this.moodbClassName)
|
||||
},
|
||||
//开始拖拽事件
|
||||
onStart(){
|
||||
this.drag=true;
|
||||
},
|
||||
//拖拽结束事件
|
||||
onEnd() {
|
||||
this.drag=false;
|
||||
},
|
||||
// setmoodbClassName(){
|
||||
// },
|
||||
//获取图片宽高
|
||||
// getimgWH(){
|
||||
// let layoutList = [...(useStore().state.UploadFilesModule.moodboardFiles),
|
||||
// ...(useStore().state.UploadFilesModule.generateFiles),
|
||||
// ...(useStore().state.UploadFilesModule.MaterialFiles)]
|
||||
|
||||
|
||||
// return new Promise(res => {
|
||||
// var img = document.createElement("img");
|
||||
// img.src = item.imgUrl
|
||||
// img.addEventListener("load", function () {
|
||||
// document.body.appendChild(img);
|
||||
// var w = img.offsetWidth;
|
||||
// var h = img.offsetHeight;
|
||||
// img.remove()
|
||||
// res({ w, h });
|
||||
// })
|
||||
// })
|
||||
// layoutList.forEach(item => {
|
||||
// let img = document.createElement('img')
|
||||
// img.addEventListener("load",function(){
|
||||
// document.body.appendChild(img);
|
||||
// var w = img.offsetWidth;
|
||||
// var h = img.offsetHeight;
|
||||
// console.log(w,h);
|
||||
// img.remove()
|
||||
// })
|
||||
|
||||
// });
|
||||
// },
|
||||
// layoutcli(num: Number) {
|
||||
// this.openClick = num;
|
||||
// if(num ==2 ){
|
||||
// let material:any = this.$refs.Material
|
||||
// material.init('Moodboard')
|
||||
// }else if (num == 3){
|
||||
// let material:any = this.$refs.Material
|
||||
// material.init('generate')
|
||||
// }
|
||||
// },
|
||||
|
||||
|
||||
randomRange(min: any, max: any, num: any) {
|
||||
// min最小值，max最大值 num排除的值
|
||||
let index = Math.floor(Math.random() * (max - min)) + min;
|
||||
while (index === num) {
|
||||
index = Math.floor(Math.random() * (max - min)) + min;
|
||||
}
|
||||
return index;
|
||||
},
|
||||
|
||||
//随机重置图片顺序
|
||||
// refetchTemplate() {
|
||||
// let arr = Array.from({ length: this.templateFileList.length });
|
||||
// for (let item of this.templateFileList) {
|
||||
// let index = this.randomRange(
|
||||
// 0,
|
||||
// this.templateFileList.length,
|
||||
// -1
|
||||
// );
|
||||
// while (arr[index]) {
|
||||
// index = this.randomRange(
|
||||
// 0,
|
||||
// this.templateFileList.length,
|
||||
// -1
|
||||
// );
|
||||
// }
|
||||
// arr[index] = item;
|
||||
// }
|
||||
// this.templateFileList = arr;
|
||||
// },
|
||||
changeTemplateModal(){
|
||||
this.layout = !this.layout
|
||||
},
|
||||
//提交模板
|
||||
submitTemplate() {
|
||||
this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
|
||||
this.store.commit("setMoodboardFile", this.fileList);
|
||||
this.store.commit("setMoodTemplateId", this.moodTemplateId);
|
||||
this.changeTemplateModal();
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.layout_modal {
|
||||
width: 80% !important;
|
||||
.ant-modal-body {
|
||||
padding: 0;
|
||||
height: calc(60vh - 6.4rem);
|
||||
}
|
||||
.ant-modal-content{
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.layout_content {
|
||||
// background: #f2f3fb;
|
||||
// padding-bottom: 2.9rem;
|
||||
height: 100%;
|
||||
.layout_header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 2rem 0 2.5rem;
|
||||
height: 6.6rem;
|
||||
|
||||
.layout_title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
color: #030303;
|
||||
}
|
||||
|
||||
.close_icon {
|
||||
font-size: 1.8rem;
|
||||
color: #aeb2b7;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.layout_nav{
|
||||
display: flex;
|
||||
margin-top: 2rem;
|
||||
justify-content: center;
|
||||
img{
|
||||
width:5rem;
|
||||
cursor: pointer;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
}
|
||||
.layout_centent{
|
||||
display: flex;
|
||||
height: 60%;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
padding: 3rem 0;
|
||||
justify-content: space-between;
|
||||
>div{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
margin: auto;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&.active{
|
||||
>div{
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
.layout_centent_bor{
|
||||
|
||||
}
|
||||
.modal_imgItem{
|
||||
position: relative;
|
||||
img{
|
||||
position: absolute;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wh1{
|
||||
width: 23%;
|
||||
height: 48%;
|
||||
}
|
||||
.wh4{
|
||||
width: 48.5%;
|
||||
height: 100%;
|
||||
}
|
||||
.w1h2{
|
||||
width: 23%;
|
||||
height: 100%;
|
||||
}
|
||||
.w2h1{
|
||||
width: 48.5%;
|
||||
height: 48%;
|
||||
}
|
||||
.layout_left{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
overflow-x: hidden;
|
||||
// background-color: #000;
|
||||
width: 8%;
|
||||
height: 50%;
|
||||
&.layout_left::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.layout_left_items{
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
margin-bottom: 2rem;
|
||||
cursor: pointer;
|
||||
.layout_left_item{
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.submit_button {
|
||||
margin: 2rem auto 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +1,14 @@
|
||||
import {Module} from 'vuex'
|
||||
import {RootState} from '../index'
|
||||
import { message } from "ant-design-vue";
|
||||
|
||||
interface UploadFiles{
|
||||
moodboardFiles:any,
|
||||
printboardFiles:any,
|
||||
generatePrintFiles:any,
|
||||
generateFiles:any,
|
||||
MaterialFiles:any,
|
||||
generateList:any,
|
||||
colorBoards:any,
|
||||
skecthboardFiles:any,
|
||||
marketingSketchFiles:any,
|
||||
@@ -17,6 +21,9 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
||||
moodboardFiles:[],
|
||||
printboardFiles:[],
|
||||
generatePrintFiles:[],
|
||||
generateFiles:[],
|
||||
MaterialFiles:[],
|
||||
generateList:[],
|
||||
colorBoards:[],
|
||||
skecthboardFiles:[],
|
||||
marketingSketchFiles:[],
|
||||
@@ -33,6 +40,53 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
||||
setGeneratePrintFile(state,files){
|
||||
state.generatePrintFiles = files
|
||||
},
|
||||
addGenerateMaterialFils(state,data){
|
||||
let file
|
||||
let arr = [...state.generateFiles,...state.MaterialFiles,...state.moodboardFiles]
|
||||
if(data.type_ == 'generate'){
|
||||
file = state.generateFiles
|
||||
}else{
|
||||
file = state.MaterialFiles
|
||||
}
|
||||
if(file.length == 0){
|
||||
if(arr.length >= 8){
|
||||
message.error('You can select up to 8 images')
|
||||
}else{
|
||||
data.checked = true
|
||||
file.push(data)
|
||||
}
|
||||
}else{
|
||||
let str = true
|
||||
for (let index = 0; index < file.length; index++) {
|
||||
if(file[index].id_ == data.id_){
|
||||
// data.id_ = GO.id++
|
||||
str = false
|
||||
}
|
||||
}
|
||||
if(str){
|
||||
if(arr.length >= 8){
|
||||
message.error('You can select up to 8 images')
|
||||
}else{
|
||||
data.checked = true
|
||||
file.push(data)
|
||||
}
|
||||
}else{
|
||||
data.checked = false
|
||||
file = file.filter((v:any)=> v.id_ != data.id_)
|
||||
}
|
||||
}
|
||||
if(data.type_ == 'generate'){
|
||||
state.generateFiles = file
|
||||
}else{
|
||||
state.MaterialFiles = file
|
||||
}
|
||||
},
|
||||
getGenerateList(state,list){
|
||||
state.generateList = list
|
||||
},
|
||||
// setGenerateFils(state,files){
|
||||
// state.generateFiles = files
|
||||
// },
|
||||
setColorboardList(state,colorBoards){
|
||||
state.colorBoards = colorBoards
|
||||
},
|
||||
@@ -47,6 +101,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
||||
moodboardFiles:state.moodboardFiles,
|
||||
printboardFiles:state.printboardFiles,
|
||||
generatePrintFiles:state.generatePrintFiles,
|
||||
generateFiles:state.generateFiles,
|
||||
colorBoards:state.colorBoards,
|
||||
skecthboardFiles:state.skecthboardFiles,
|
||||
marketingSketchFiles:state.marketingSketchFiles,
|
||||
@@ -60,6 +115,8 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
||||
state.moodboardFiles = []
|
||||
state.printboardFiles = []
|
||||
state.generatePrintFiles=[]
|
||||
state.generateFiles = []
|
||||
state.MaterialFiles = []
|
||||
state.colorBoards = []
|
||||
state.skecthboardFiles = []
|
||||
state.marketingSketchFiles = []
|
||||
|
||||
4
src/tool/GO.ts
Normal file
4
src/tool/GO.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export default {
|
||||
id : 1,
|
||||
testUrl:'http://192.168.1.5:10086'
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
import axios from 'axios'
|
||||
// import qs from 'qs'
|
||||
// import message from '@/components/public/message/src'
|
||||
|
||||
import router from '@/router/index'
|
||||
import {getCookie} from '@/tool/cookie'
|
||||
// import cookie from '@/tools/cookie.js'
|
||||
@@ -15,11 +14,12 @@ axios.defaults.headers.post['lang'] = 'en'; //配置语言请求头
|
||||
axios.defaults.withCredentials = true; //跨域携带cookie
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
if(process.env.NODE_ENV == "development"){
|
||||
axios.defaults.baseURL = ""; //配置接口地址
|
||||
}else{
|
||||
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址
|
||||
}
|
||||
// if(process.env.NODE_ENV == "development"){
|
||||
// axios.defaults.baseURL = ""; //配置接口地址
|
||||
// }else{
|
||||
// axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址
|
||||
// }
|
||||
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //配置接口地址
|
||||
|
||||
//POST传参序列化(添加请求拦截器)
|
||||
axios.interceptors.request.use((config) => {
|
||||
@@ -99,6 +99,7 @@ export const Https = {
|
||||
saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点
|
||||
libraryModelsDot:'/api/library/modelsDot',//Models打点预览
|
||||
pythonChatStream:'/api/python/chatStream',//机器人助力
|
||||
workspaceDetail:'http://192.168.1.5:10086/api/workspace/detail',//用户习惯详情
|
||||
|
||||
},
|
||||
|
||||
|
||||
12
src/tool/moodb.ts
Normal file
12
src/tool/moodb.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
export default {
|
||||
moodb_ : [
|
||||
[['wh4']],
|
||||
[['wh4','wh4']],
|
||||
[['wh4','w1h2','w1h2'],['w1h2','w1h2','wh4'],['w2h1','w2h1','wh4'],['wh4','w2h1','w2h1']],
|
||||
[['wh1','wh1','w1h2','wh4'],['w1h2','wh1','wh1','wh4'],['wh4','wh1','wh1','w1h2'],['w1h2','w1h2','w1h2','w1h2']],
|
||||
[['wh1','wh1','wh1','wh1','wh4'],['wh1','wh1','wh4','wh1','wh1'],['wh4','wh1','wh1','wh1','wh1'],['w1h2','w1h2','w1h2','wh1','wh1'],['wh1','wh1','w1h2','w1h2','w1h2'],['w1h2','w1h2','wh1','wh1','w1h2'],['w1h2','wh1','wh1','w1h2','w1h2']],
|
||||
[['wh1','wh1','wh1','wh1','w1h2','w1h2'],['wh1','wh1','w1h2','wh1','wh1','w1h2'],['w1h2','w1h2','wh1','wh1','wh1','wh1'],['wh1','wh1','wh1','wh1','w2h1','w2h1'],['wh1','wh1','w2h1','w2h1','wh1','wh1'],['w2h1','w2h1','wh1','wh1','wh1','wh1']],
|
||||
[['wh1','wh1','wh1','wh1','wh1','wh1','w1h2'],['wh1','wh1','wh1','wh1','w1h2','wh1','wh1'],['wh1','wh1','w1h2','wh1','wh1','wh1','wh1'],['w1h2','wh1','wh1','wh1','wh1','wh1','wh1'],['wh1','wh1','wh1','wh1','wh1','wh1','w2h1']],
|
||||
[['wh1','wh1','wh1','wh1','wh1','wh1','wh1','wh1']]
|
||||
]
|
||||
}
|
||||
@@ -53,7 +53,7 @@
|
||||
@click="resDesignCollection()">
|
||||
Redesign
|
||||
</div>
|
||||
<div class="system_scale">
|
||||
<!-- <div class="system_scale">
|
||||
<div class="system_silder">
|
||||
<a-slider id="system_silder" :tooltipVisible="true"
|
||||
v-model:value="system_scale_value" :tip-formatter="formatter"
|
||||
@@ -78,7 +78,7 @@
|
||||
switch_open ? "Category" : "Outfit"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="select_block" v-show="!switch_open">
|
||||
<a-select ref="select" v-model:value="designType" :options="disignTypeList">
|
||||
<template #suffixIcon><span class="icon iconfont icon-xiala"
|
||||
@@ -86,12 +86,12 @@
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_top_right">
|
||||
<!-- <div class="right_top_right">
|
||||
<div class="content_header_button" @click="selectModels()">
|
||||
<span class="content_header_button_des">Mannequins</span><span
|
||||
class="icon iconfont icon-xiala"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="right_content_block">
|
||||
@@ -1226,3 +1226,18 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.ant-modal-root{
|
||||
|
||||
.ant-modal-mask{
|
||||
background: linear-gradient(45deg, #eee4f3, #f3f4e6);
|
||||
}
|
||||
.ant-modal-centered{
|
||||
top: 7rem;
|
||||
|
||||
}
|
||||
}
|
||||
.ant-message{
|
||||
z-index: 1049 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -399,7 +399,9 @@ export default defineComponent({
|
||||
};
|
||||
// this.loginType = 'email'
|
||||
// this.emailStap = 2;
|
||||
|
||||
let loginTime = true
|
||||
if(loginTime){
|
||||
loginTime = false
|
||||
Https.axiosPost(Https.httpUrls.preLogin, data).then(
|
||||
(rv: any) => {
|
||||
// if (rv) {
|
||||
@@ -416,6 +418,11 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
);
|
||||
setTimeout(() => {
|
||||
loginTime = true
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -14,10 +14,14 @@ module.exports = defineConfig({
|
||||
: '10086',
|
||||
|
||||
proxy: {
|
||||
"/api": {
|
||||
// target: 'https://www.aida.com.hk', //后端接口地址
|
||||
target: process.env.VUE_APP_BASE_URL,
|
||||
changeOrigin: true, //是否允许跨越
|
||||
// "/api": {
|
||||
// // target: 'https://www.aida.com.hk', //后端接口地址
|
||||
// target: process.env.VUE_APP_BASE_URL,
|
||||
// changeOrigin: true, //是否允许跨越
|
||||
// }
|
||||
'http://192.168.1.5:10086/api':{
|
||||
target:'http://18.167.251.121:5567',
|
||||
changeOrigin:true,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user