aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

封装设置衣服类型的下拉菜单

Browse Source
This commit is contained in:
X1627315083
2024-04-25 14:39:28 +08:00
parent d66a07785a
commit 4cfd33bcc7
8 changed files with 284 additions and 556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/component/Detail/DesignDetailAlter.vue
View File

@@ -47,7 +47,9 @@
v-show="file?.status === 'done'"
>
<img :src="file?.url" class="upload_img" />
<div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
<!-- <div class="operate_file_block" v-show="selectCode == 'Sketchboard'">
<div class="select_img_type">
<div
class="select_category"
@@ -89,7 +91,7 @@
</div>
</div>
</div>
</div>
</div> -->
<div
class="delete_file_block"
@click.stop="deleteFile(index)"
@@ -136,48 +138,7 @@
<div class="content_img_item" v-for="(file) in clothesList" :key="file.id" :class="{active:selectCode !== 'Moodboard'}">
<div class="content_img_item_block" :class="{active:file?.checked}">
<img :class="[ selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
<div v-if="selectCode == 'Sketchboard'" class="operate_file_block">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ file.level2Type }}
<div
v-if="!body"
:class="[
'icon',
'iconfont',
'icon-xiala',
file.categoryShow
? 'icon_rotate'
: '',
]"
></div>
</div>
<div
v-if="!body"
class="category_list"
v-show="file.categoryShow"
>
<div
:class="[
'category_item',
file.level2Type == cate.value
? 'select_category_item'
: '',
]"
v-for="(
cate, index
) in disignTypeList"
:key="index"
@click.stop="selectFileCategory(file, cate)"
>
{{ cate.value }}
</div>
</div>
</div>
</div>
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="clothesList" :item="file" ></sketchCategory>
</div>
</div>
<div v-show="total > clothesList.length" class="material_content_list_loding" v-observe>
@@ -307,10 +268,12 @@ import DesignDetailEnd from './DesignDetailEnd.vue';
import { getCookie } from "@/tool/cookie";
import { openGuide,driverObj__ } from "@/tool/guide";
import { useI18n } from 'vue-i18n';
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
export default defineComponent({
props: ["msg"],
components:{
Draggable,Sketch,DesignDetailEnd,Chrome
Draggable,Sketch,DesignDetailEnd,Chrome,sketchCategory
},
setup(prop) {
const store = useStore();
@@ -321,10 +284,7 @@ export default defineComponent({
let body = inject('body')//父组件传过来的数据
let openClick = ref(1);
let searchPictureName = ref('')
//模型印花
let disignTypeList = [
]
let total = ref(0)
let pageSize = ref(10)
let currentPage = ref(1)
@@ -342,14 +302,15 @@ export default defineComponent({
let selectColorList = ref({
})
let workspace = ref({})
let sketchCatecoryList = computed(()=>{
return store.state.Workspace.workspacePosition
})
let {t} = useI18n()
return{
store,
current,
openClick,
searchPictureName,
disignTypeList,
total,
pageSize,
currentPage,
@@ -367,6 +328,7 @@ export default defineComponent({
workspace,
driver__,
body,
sketchCatecoryList,
t,
}
},
@@ -435,18 +397,7 @@ export default defineComponent({
},
},
computed:{
getSketchLabel(value) {
return (value) => {
let lable = "";
for (let item of this.disignTypeList) {
if (item.value === value) {
value = item.value;
break;
}
}
return lable;
};
},
getSelectRGB(selectColor){
@@ -484,7 +435,6 @@ export default defineComponent({
workspaceCom(newVal,oldVal){
this.workspace = newVal
this.upload.gender = newVal?.sexEnum?.name
this.getPosition()
},
},
mounted () {
@@ -552,28 +502,7 @@ export default defineComponent({
return this.store?.state?.Workspace?.workspace
})
},
getPosition(){
let params
if(this.workspace.sexEnum.name == 'Female'){
params = 'FemalePosition'
}else{
params = 'MalePosition'
}
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv) => {
if (rv) {
// let arr = []
// rv.forEach((item) => {
// let obj = {
// value:item.value,
// name:item.name,
// key:item.key,
// }
// arr.push(obj)
// });
this.disignTypeList = rv
}
})
},
deleteFile(num){
this.uploadList.splice(num, 1)
},
@@ -586,6 +515,12 @@ export default defineComponent({
file.id = res.data.id;
file.url = res.data.url;
file.resData = res.data;
this.sketchCatecoryList.forEach((item) => {
if(item.value == res.data.level2Type){
file.categoryValue = item?.name;
file.category = item?.value;
}
});
file.designType = res.data.designType
let type = this.body?this.current.type:res.data.level2Type
file.level2Type = type;
@@ -653,31 +588,6 @@ export default defineComponent({
},
// this.getLibraryList('Moodboard')
// this.getLibraryList('Printboard')
showFileCategory(file) {
file.categoryShow = true;
document.addEventListener("click", this.hiddenFileCategory);
},
selectFileCategory(file, cate) {
file.level2Type = cate.name;
for (let item of this.clothesList) {
item.categoryShow = false;
}
for (let item of this.uploadList) {
item.categoryShow = false;
}
this.setSketchLibrary(file)
let DesignDetailEnd = this.$refs.DesignDetailEnd
if(DesignDetailEnd.sketchImg.id == file.id){
this.selectImgItem(file)
}
},
hiddenFileCategory() {
for (let item of this.clothesList) {
item.categoryShow = false;
}
document.removeEventListener("click", this.hiddenFileCategory);
},
setSketchLibrary(item){
let data = {
libraryId:[item.id],
@@ -727,10 +637,18 @@ export default defineComponent({
size:this.pageSize+this.clothesList.length,
}
this.isShowLoading = true
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
(rv) => {
if(this.selectCode == 'Sketchboard'){
rv.content.forEach((vItem)=>{
this.sketchCatecoryList.forEach((item) => {
if(item.value == vItem.level2Type){
vItem.categoryValue = item.name
vItem.category = item.value
}
});
})
}
this.clothesList = rv.content
this.isShowLoading = false
this.total = rv.total

11
src/component/Detail/habit.vue
View File

@@ -408,7 +408,6 @@ export default defineComponent({
}else{
num = 1
}
this.singleTypeList = this.position[num].value
this.store.commit("setWorkspacePosition", this.position[num].value);
@@ -421,11 +420,21 @@ export default defineComponent({
await new Promise(async (resolve) => {
await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'FemalePosition'}}).then((rv: any) => {
if (rv) {
rv.forEach((item:any) => {
let name = item.name
item.name = item.value
item.value = name
});
this.position[0].value = rv
}
})
await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'MalePosition'}}).then((rv: any) => {
if (rv) {
rv.forEach((item:any) => {
let name = item.name
item.name = item.value
item.value = name
});
this.position[1].value = rv
}
})

164
src/component/HomePage/ColorboardUpload.vue
View File

@@ -6,7 +6,7 @@
</div>
<div class="modal_img">
<div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" >
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`,'background-image':color?.gradient?`linear-gradient(${color?.gradient?.angle}deg,${setGradient(color.gradient)})`:'none'}">
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
</div>
</div>
<div>
@@ -49,27 +49,7 @@
</div>
</div>
</div> -->
<div class="color_setting_operate" v-show="gradientShow">
<div class="color_setting_operate_item color_setting_operate_control">
<div class="operate_item_box">
<div>线性</div>
</div>
<div class="operate_item_box operate_item_angle">
<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event)" @touchstart="mousedownGradientAngle($event)">
<div :style="{'transform':`rotate(${gradient.angle}deg)`}"></div>
</div>
<!-- <input type="number"> -->
</div>
<div class="operate_item_box">
<div>删除</div>
</div>
</div>
<div class="color_setting_operate_item color_setting_operate_input">
<div class="color_setting_operate_bg" :style="{'background-image':`linear-gradient(90deg,${setGradient(gradient)})`}">
</div>
<div v-for="item,index in gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient($event,item,index)" @touchstart="mousedownGradient($event,item,index)"></div>
</div>
</div>
</div>
<!-- <div class="color_review_block">
<div class="clear_button" @click="clearCurrentColor()">Clear</div>
@@ -167,30 +147,7 @@ export default defineComponent({
})
let driver__ = inject('driver__')
let {t} = useI18n()
let gradient = ref({
gradientList:[
{
rgba:{
r:117,
g:119,
b:255,
a:1,
},
left:'0%'
},{
rgba:{
r:0,
g:222,
b:152,
a:1,
},
left:'100%'
},
],
angle:45,
selectIndex:-1,
})
let gradientShow = ref(false)
return {
fileList,
colorList,
@@ -198,8 +155,6 @@ export default defineComponent({
selectColorList,
driver__,
t,
gradient,
gradientShow,
}
},
watch:{
@@ -214,21 +169,7 @@ export default defineComponent({
handler(newVal,oldVal){
this.colorList[this.selectIndex] = newVal.rgba
let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
if(this.gradient.selectIndex>-1 && this.gradientShow){
this.gradient.gradientList[this.gradient.selectIndex].color = `rgb(${newVal.rgba.r},${newVal.rgba.g},${newVal.rgba.b})`
this.gradient.gradientList[this.gradient.selectIndex].rgba = {
r:newVal.rgba.r,
g:newVal.rgba.g,
b:newVal.rgba.b,
a:1,
}
}
this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
if(this.gradientShow){
// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
}else{
this.colorList[this.selectIndex].gradient = ''
}
this.setColorboardList(colorList)
// this.clearSelectColor()
},
@@ -256,27 +197,6 @@ export default defineComponent({
return data
}
},
setGradient(){
// return this.setGradientAngle(gradient)
return (gradient)=>{
console.log(gradient,'222');
let gradientStr = ''
gradient.gradientList.sort((a, b) => {
let aArr = a.left.split('%')[0]
let bArr = b.left.split('%')[0]
return aArr - bArr;
});
gradient.gradientList.forEach((item,index)=>{
let str = ','
if(gradient.gradientList.length == index+1)str = ''
gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}`
})
console.log(`linear-gradient(${gradient.angle}deg, ${gradientStr})`);
return `${gradientStr}`
}
}
},
data(){
return{
@@ -312,29 +232,9 @@ export default defineComponent({
const backIcon = document.createElement('div');
backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
let colorDom = document.querySelector('.colorboard_upload_modal .vc-chrome-controls .vc-chrome-active-color')
// console.log(colorDom);
dropperDom.appendChild(backIcon);
colorDom.addEventListener('click',()=>{
// this.colorList[this.selectIndex]
console.log(123123123123);
this.gradient.selectIndex = 0
this.gradientShow = !this.gradientShow
if(this.gradientShow){
if(this.selectColor.rgba.r){
this.gradient.gradientList[this.gradient.selectIndex].rgba = {
r:this.selectColor.rgba.r,
g:this.selectColor.rgba.g,
b:this.selectColor.rgba.b,
a:1,
}
}
this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
}else{
this.colorList[this.selectIndex].gradient = ''
}
})
backIcon.addEventListener('click', async ()=>{
try {
const dropper = new EyeDropper();
@@ -374,7 +274,6 @@ export default defineComponent({
},
//选择不同的色块
selectColorItem(index,color){
this.gradientShow = false
let hex
if(color?.r){
hex = this.rgbaToHex([color.r,color.g,color.b,color.a?color.a:1])
@@ -619,59 +518,6 @@ export default defineComponent({
this.selectColor = {rgba:this.colorList[0],hex:hex}, //顔色选择器默认颜色
this.store.commit('setColorboardList',colorList)
},
mousedownGradient(event,item,index){
event.stopPropagation();
this.gradient.selectIndex = index
let gradientRgba = this.gradient.gradientList[index].rgba
let rgba = [gradientRgba.r,gradientRgba.g,gradientRgba.b,gradientRgba.a?gradientRgba.a:1]
let hex = this.rgbaToHex(rgba)
this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
// isMoible() true为移动端
let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
let position = {
x:event.x,
left:event.target.style.left?event.target.style.left.split('%')[0]:0
}
let mousedownGradient = (e)=>{
let left = (e.x - position.x)/gradientWidth*100+Number(position.left)
left = (left<0?0:left>100?100:left)
// event.target.style.left = (left<0?0:left>100?100:left)+'%'
item.left = left+'%'
}
let mouseupGradient = ()=>{
window.removeEventListener('mousemove',mousedownGradient)
window.removeEventListener('mouseup',mouseupGradient)
}
window.addEventListener('mousemove',mousedownGradient)
window.addEventListener('mouseup',mouseupGradient)
// event.target.addEventListener('touchmove',)
},
mousedownGradientAngle(event){
event.stopPropagation();
// isMoible() true为移动端
console.log(event.target.getBoundingClientRect());
let domPosition = event.target.getBoundingClientRect()
console.log(domPosition.x+domPosition.width/2);
let position = {
x:domPosition.x+domPosition.width/2,
y:domPosition.y+domPosition.height/2,
}
let angle = this.gradient.angle
let mousedownGradientAngle = (e)=>{
let X = position.x
let Y = position.y
let x = e.x - X
let y = Y - e.y
angle = Math.atan2(x,y)*(180 / Math.PI)
this.gradient.angle = angle
}
let mouseupGradientAngle = ()=>{
window.removeEventListener('mousemove',mousedownGradientAngle)
window.removeEventListener('mouseup',mouseupGradientAngle)
}
window.addEventListener('mousemove',mousedownGradientAngle)
window.addEventListener('mouseup',mouseupGradientAngle)
}
}
})
</script>

58
src/component/HomePage/Generate.vue
View File

@@ -78,46 +78,6 @@
v-show="file?.status === 'done'"
>
<img :src="file?.imgUrl" class="upload_img" />
<div v-if="type_.type2 == 'Sketchboard'" class="operate_file_block">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ file.categoryValue }}
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
file.categoryShow
? 'icon_rotate'
: '',
]"
></div>
</div>
<div
class="category_list"
v-show="file.categoryShow"
>
<div
:class="[
'category_item',
file.category == cate.name
? 'select_category_item'
: '',
]"
v-for="(
cate, index
) in sketchCatecoryList"
:key="index"
@click.stop="selectFileCategory(file, cate)"
>
{{ cate.value }}
</div>
</div>
</div>
</div>
<div
class="delete_file_block"
:class="[driver__.driver?'hideEvents':'']"
@@ -742,23 +702,7 @@ export default defineComponent({
message.warning(res.errMsg);
}
},
showFileCategory(file: any) {
file.categoryShow = true;
document.addEventListener("click", this.hiddenFileCategory);
},
selectFileCategory(file: any, cate: any) {
file.categoryValue = cate?.value;
file.category = cate.name;
file.categoryShow = false
// this.store.commit("setSketchboardFile", this.sketchboardList);
},
hiddenFileCategory() {
for (let item of this.sketchboardList) {
item.categoryShow = false;
}
document.removeEventListener("click", this.hiddenFileCategory);
},
setSketchboardItem(item:any){
if(this.checkboxImage){
return

73
src/component/HomePage/Material.vue
View File

@@ -21,46 +21,7 @@
<div class="material_content_body scroll_style">
<div v-for="item,index in imgList" :key="item" class="content_img_item" :class="[ item?.checked ? 'active':'' , selectCode == 'Moodboard' ? 'moodb':'' ]" >
<img :src="item?.imgUrl" @click.stop="selectImgItem(item)">
<div v-if="selectCode == 'Sketchboard'" class="operate_file_block">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(item)"
>
{{ item?.categoryValue }}
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
item?.categoryShow
? 'icon_rotate'
: '',
]"
></div>
</div>
<div
class="category_list"
v-show="item?.categoryShow"
>
<div
:class="[
'category_item',
item?.category == cate.name
? 'select_category_item'
: '',
]"
v-for="(
cate, index
) in disignTypeList"
:key="index"
@click.stop="selectFileCategory(item, cate)"
>
{{ cate.value }}
</div>
</div>
</div>
</div>
<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></sketchCategory>
<div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
<a-checkbox v-model:checked="item.pin">{{ $t('Material.PIN') }}</a-checkbox>
</div>
@@ -86,8 +47,11 @@ import { useStore } from "vuex";
import GO from '@/tool/GO';
import { useI18n } from 'vue-i18n';
import { openGuide,driverObj__ } from "@/tool/guide";
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
export default defineComponent({
components: { sketchCategory },
props: ["msg",'disignTypeList'],
setup(prop) {
let myMaterialModalShow = ref(false)
@@ -388,35 +352,6 @@ export default defineComponent({
this.isShowLoading = false
});
},
showFileCategory(file: any) {
file.categoryShow = true;
document.addEventListener("click", this.hiddenFileCategory);
},
selectFileCategory(file: any, cate: any) {
file.categoryValue = cate.value;
file.category = cate.name;
for (let item of (this.imgList as any)) {
item.categoryShow = false;
}
this.setSketchLibrary(file)
},
hiddenFileCategory() {
for (let item of (this.imgList as any)) {
item.categoryShow = false;
}
document.removeEventListener("click", this.hiddenFileCategory);
},
setSketchLibrary(item:any){
let data = {
libraryId:[item.id],
level2Type:item.category,
}
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
(rv: any) => {
}
).catch((res)=>{
});
},
}
})
</script>

162
src/component/HomePage/SketchboardUpload.vue
View File

@@ -46,51 +46,7 @@
v-show="file?.status === 'done'"
>
<img :src="file?.imgUrl" class="upload_img" />
<div class="operate_file_block">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ file.categoryValue }}
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
file.categoryShow
? 'icon_rotate'
: '',
]"
></div>
</div>
<div
class="category_list"
v-show="file.categoryShow"
>
<div
:class="[
'category_item',
file.category == cate.value
? 'select_category_item'
: '',
]"
v-for="(
cate, index
) in sketchCatecoryList"
:key="index"
@click="
selectFileCategory(
file,
cate
)
"
>
{{ cate.value }}
</div>
</div>
</div>
</div>
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="file" :driver__="driver__.driver"></sketchCategory>
<div
class="delete_like_file_block"
@click.stop="deleteFile(file)"
@@ -196,53 +152,7 @@
<div v-for="item,index in generateList" class="modal_imgItem Guide_1_13_2" :class="[driver__.driver?'showEvents':'',item?.checked?'active':'']">
<img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt="">
<img v-show="item.status == 'Success'" :src="item.imgUrl" @click.stop="generageAdd(item)">
<div class="operate_file_block" :class="[driver__.driver?'hideEvents':'']">
<div class="select_img_type">
<div
class="select_category Guide_1_13"
@click.stop="showFileCategory(item)"
>
{{ item.categoryValue }}
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
item.categoryShow
? 'icon_rotate'
: '',
]"
></div>
</div>
<div
class="category_list Guide_1_13_1"
:class="[driver__.driver?'showEvents':'']"
v-show="item.categoryShow"
>
<div
:class="[
'category_item',
item.category == cate.name
? 'select_category_item'
: '',
]"
v-for="(
cate, index
) in sketchCatecoryList"
:key="index"
@click.stop="
selectFileCategory(
item,
cate
)
"
>
{{ cate.value }}
</div>
</div>
</div>
</div>
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="generateList" :item="item" :driver__="driver__.driver" ></sketchCategory>
<div
class="delete_like_file_block"
>
@@ -287,8 +197,10 @@ import scaleImage from "@/component/HomePage/scaleImage.vue";
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
import { useI18n } from "vue-i18n";
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
export default defineComponent({
components: { Material, Generate,scaleImage },
components: { Material, Generate,scaleImage,sketchCategory },
setup() {
let fileList: any = ref([
]);
@@ -521,7 +433,7 @@ export default defineComponent({
name:'',
}
this.sketchCatecoryList.forEach((item:any) => {
if(item.name == res.data.level2Type){
if(item.value == res.data.level2Type){
category.value = item?.value
category.name = item?.name
}
@@ -530,8 +442,8 @@ export default defineComponent({
file.resData = res.data;
// file.pin = false;
//category用来数据处理
file.categoryValue = category?.value;
file.category = category?.name;
file.categoryValue = category?.name;
file.category = category?.value;
file.categoryShow = false;
file.id_ = GO.id++
file.id = res.data.id
@@ -580,58 +492,6 @@ export default defineComponent({
}
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
},
showFileCategory(file: any) {
file.categoryShow = true;
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
}
})
document.addEventListener("click", this.hiddenFileCategory);
},
selectFileCategory(file: any, cate: any) {
if(this.openClick == 3){
for (let item of this.generateList) {
item.categoryShow = false;
}
file.categoryValue = cate.value;
file.category = cate.name;
if(this.driver__.driver){
driverObj__.moveNext()
}
// this.store.commit("sketchGenerateFiles", this.fileList);
}else{
for (let item of this.fileList) {
item.categoryShow = false;
}
file.categoryValue = cate.value;
file.category = cate.name;
this.store.commit("setSketchboardFile", this.fileList);
nextTick().then(()=>{
if(this.driver__.driver){
driverObj__.moveNext()
// driverObj__.moveTo(13)
}
})
}
},
hiddenFileCategory() {
if(this.openClick == 3){
for (let item of this.generateList) {
item.categoryShow = false;
}
}else{
for (let item of this.fileList) {
item.categoryShow = false;
}
}
document.removeEventListener("click", this.hiddenFileCategory);
},
ifMaximumLength(){
clearTimeout(this.inputTime)
let inputBox = document.getElementsByClassName('sketchboard_upload_modal')[0].getElementsByClassName('input_box')[0]
@@ -882,9 +742,9 @@ export default defineComponent({
element.id_ = GO.id++
if(element.category){
this.sketchCatecoryList.forEach((itemCategory:any) => {
if(itemCategory.name == element.category){
element.categoryValue = itemCategory?.value
element.category = itemCategory?.name
if(itemCategory.value == element.category){
element.categoryValue = itemCategory?.name
element.category = itemCategory?.value
}
});
}

197
src/component/HomePage/sketchCategory.vue Normal file
View File

@@ -0,0 +1,197 @@
<template>
<div class="operate_file_block">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(item)"
>
{{ item.categoryValue }}
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
item.categoryShow
? 'icon_rotate'
: '',
]"
></div>
</div>
<div
class="category_list"
v-show="item.categoryShow"
>
<div
:class="[
'category_item',
item.category == cate.value
? 'select_category_item'
: '',
]"
v-for="(
cate, index
) in disignTypeList"
:key="index"
@click="
selectFileCategory(
item,
cate
)
"
>
{{ cate.name }}
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,ref ,nextTick} from "vue";
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
export default defineComponent({
name:'filterComponent',
props:{
disignTypeList:{
type:Object
},
item:{
type:Object
},
generateList:{
type:Array
},
isSetSketchCategory:{
type:Boolean,
default:false,
},
driver__:{
type:Boolean,
default:false,
}
},
setup(props:any){
let showFileCategory = (file:any)=> {
file.categoryShow = true;
nextTick().then(()=>{
if(props.driver__.driver){
driverObj__.moveNext()
}
})
document.addEventListener("click", hiddenFileCategory);
}
let hiddenFileCategory = () => {
for (let item of props.generateList) {
item.categoryShow = false;
}
document.removeEventListener("click", hiddenFileCategory);
}
let selectFileCategory = (file: any, cate: any) => {
for (let item of props.generateList) {
item.categoryShow = false;
}
file.categoryValue = cate.name;
file.category = cate.value;
if(props.isSetSketchCategory){
setSketchLibrary(props.item)
}
if(props.driver__.driver){
driverObj__.moveNext()
}
// this.store.commit("sketchGenerateFiles", this.fileList);
}
let setSketchLibrary = (item:any)=>{
let data = {
libraryId:[item.id],
level2Type:item.category,
}
Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
(rv: any) => {
}
).catch((res)=>{
});
}
return {
showFileCategory,
selectFileCategory,
}
},
});
</script>
<style lang="less">
//衣服类型下拉菜单
.operate_file_block{
width: 100%;
height: 3rem;
font-size: 1.6rem;
color: #FFFFFF;
position: absolute;
left: 0;
bottom: 0;
.select_img_type{
height: 100%;
line-height: 3rem;
text-align: center;
background: rgba(0,0,0,0.6);
position: relative;
overflow: initial !important;
.select_category{
display: flex;
align-items: center;
justify-content: center;
.icon-xiala{
margin-left: 0.8rem;
}
}
.icon_rotate{
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform: rotate(180deg);
animation-direction: 0.5s;
}
.category_list{
position: absolute;
width: 100%;
cursor: pointer;
position: absolute;
// top: 3.1rem;
margin-top: .2rem;
left: 0;
// background: rgba(0,0,0,0.4);
background-color: rgb(177 177 177);
border: 1px solid #343579;
border-radius: 0.8rem;
// overflow: hidden;
z-index: 3;
height: 9rem;
overflow-x: hidden;
&.category_list::-webkit-scrollbar{display: none;}
.category_item{
text-align: left;
font-size: 1.4rem;
padding: 1rem 1.5rem;
line-height: 1.6rem;
font-weight: 600;
color: #595959;
&.select_category_item{
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
}
&:hover{
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
}
}
}
}
}
</style>