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-05-16 17:14:22 +08:00
parent 5518ac09c6
commit 601e68bcff
13 changed files with 200 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/component/WorksPage/newScaleImage.vue
View File

@@ -23,17 +23,17 @@
<div class="newScaleImage_left">
<div class="newScaleImage_content_right">
<div class="newScaleImage_content_right_img">
<img :src="scaleImageList[scaleImageIndex]?.imgUrl">
<img :src="scaleImageList[scaleImageIndex]?.designPythonOutfitUrl">
</div>
<div class="nav_centent" v-mousewheel="{allLength:scaleImageList.length}" :style="{'margin-top':scaleImageMarginTop}">
<img class="nav_centent_img" v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active2:index == scaleImageIndex, active3:index == scaleImageIndex+1, active1:index == scaleImageIndex-1}" :title="scaleImageIndex" :src="item?.imgUrl" :key="item.id">
<img class="nav_centent_img" v-for="item,index in scaleImageList" @click="setScaleImageIndex(index)" :class="{active2:index == scaleImageIndex, active3:index == scaleImageIndex+1, active1:index == scaleImageIndex-1}" :title="scaleImageIndex" :src="item?.designPythonOutfitUrl" :key="item.id">
</div>
</div>
</div>
<div class="newScaleImage_right">
<div class="newScaleImage_right_content">
<div class="newScaleImage_right_content_type">
<div class="generate_item_title_left scaleImage_chunk_title">类型：collection/generate</div>
<div class="generate_item_title_left scaleImage_chunk_title">type：{{ scaleImageList[scaleImageIndex]?.portfolioType=='History'? 'collection' : 'generate' }}</div>
</div>
<div v-if="true" class="newScaleImage_right_content_collection">
<!-- <div class="scaleImage_chunk_item content_left_collection_detail">
@@ -45,12 +45,13 @@
<div class="scaleImage_chunk_item content_left_collection_content">
<div class="scaleImage_chunk_title">Finished Products</div>
<div class="content_left_collection_content_list">
<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
<!-- <img v-for="item in scaleImageData.collectionElementList" v-lazy="item.url"> -->
<img v-lazy="scaleImageList[scaleImageIndex]?.designPythonOutfitUrl">
<img v-lazy="scaleImageList[scaleImageIndex]?.designPythonOutfitUrl">
<img v-lazy="scaleImageList[scaleImageIndex]?.designPythonOutfitUrl">
</div>
</div>
<div class="started_btn">二创</div>
<div class="started_btn" @click="setChoose">二创</div>
</div>
<div v-else class="newScaleImage_right_content_generate">
<div class="scaleImage_chunk_item content_left_generate_item">
@@ -85,17 +86,17 @@
</div>
</div>
<div class="detail_right_work_detail detail_left_right_item">
<div class="scaleImage_chunk_title">这是一套合成图</div>
<div class="scaleImage_chunk_title_intro">1111111111111111111111111111</div>
<div class="scaleImage_chunk_title">{{ scaleImageData.portfolioName }}</div>
<div class="scaleImage_chunk_title_intro">{{ scaleImageData.portfolioDes }}</div>
</div>
<div class="detail_right_date detail_left_right_item">
<div class="detail_right_date_setUp">
<div>创建时间</div>
<span>2024/11/1/1</span>
<span>{{ scaleImageList[scaleImageIndex].createDate }}</span>
</div>
<div class="detail_right_date_upData">
<div>更新时间</div>
<span>2024/11/1/1</span>
<span>{{ scaleImageList[scaleImageIndex].updateDate }}</span>
</div>
</div>
<div class="detail_right_look_operation detail_left_right_item">
@@ -203,13 +204,16 @@
<script lang="ts">
import { defineComponent,watch,getCurrentInstance, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
// import { Https } from "@/tool/https";
import { Https } from "@/tool/https";
// import { getCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { useRouter } from 'vue-router'
import { downloadIamge } from "@/tool/util";
export default defineComponent({
setup() {
//首先在setup中定义
const router = useRouter()
let scaleImage: any = ref(false);//弹窗
let scaleImageMask:any = ref(false)//弹窗遮罩
let imgData:any = reactive({
@@ -218,6 +222,7 @@ export default defineComponent({
scaleImageMarginTop:0,
scaleImageList:[],
scaleImageIndex:0,//当前图片索引
scaleImageData:{},//当前图片内容
})
let textarea: any = ref(null)
let setCopy = ()=>{
@@ -228,12 +233,15 @@ export default defineComponent({
scaleImage.value = true
imgData.scaleImageList = list
imgData.scaleImageIndex = index
let data = list[index]
getDetail(data)
// let scaleImageList = this.store.state.UploadFilesModule.moodboard
}
let cancelDsign = ()=>{
scaleImage.value = false
imgData.scaleImageList = []
imgData.scaleImageIndex = 0
imgData.scaleImageData = {}
}
let download = ()=>{
downloadIamge(imgData.scaleImageList[imgData.scaleImageIndex].imgUrl)
@@ -244,8 +252,6 @@ export default defineComponent({
let LikeFile = (item:any,str:string)=>{
const currentInstance = getCurrentInstance();
let parent:any = currentInstance?.parent
console.log(parent);
parent.likeFile(item,str)
}
@@ -253,6 +259,20 @@ export default defineComponent({
// let parent:any = this.$parent
// parent.likeFile(item,str)
// },
let getDetail = (value:any)=>{
let data = value
Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
(rv: any) => {
console.log(rv);
imgData.scaleImageData = rv
}
).catch((res)=>{
}
)
}
let setChoose = () =>{
router.push({name:'homePage',params: {id:imgData.scaleImageList[imgData.scaleImageIndex].userLikeGroupSourceId.id,type:'Works'}})
}
watch(()=>imgData.scaleImageIndex,
(newVal,oldVal)=>{
let dom:any = document.querySelector('.newScaleImage_left .nav_centent')
@@ -272,6 +292,7 @@ export default defineComponent({
download,
setScaleImageIndex,
LikeFile,
setChoose,
};
},
directives:{
@@ -499,9 +520,11 @@ export default defineComponent({
.nav_centent_img{
max-width: calc(var(--snap-size) - 2rem);
height: calc(var(--snap-size) - 2rem);
width: calc(var(--snap-size) - 2rem);
object-fit: contain;
width: auto;
background-color: #fff;
padding: .5rem 0;
background-color: #ffffff;
border: 1px solid #777777;
object-position: 50%,50%;
border-radius: calc(1rem*1.2);
cursor: pointer;
@@ -820,6 +843,7 @@ export default defineComponent({
display: flex;
justify-content: space-between;
.detail_right_date_setUp,.detail_right_date_upData{
width: 45%;
div{
font-size: 2rem;
font-weight: 600;

100
src/component/WorksPage/publish.vue
View File

@@ -26,36 +26,30 @@
<div class="publidh_content_item">
<div class="publidh_content_item_title">Cover Picture</div>
<div class="publish_content_shrink publish_content_item">
<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
<img v-lazy="selectDate.url" alt="">
</div>
</div>
<div class="publidh_left_thubnai publidh_content_item">
<div class="publidh_content_item_title">Select Cover Picture</div>
<div class="publidh_left_thubnail_list publish_content_item">
<img v-lazy="'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center'" alt="">
<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
<img v-lazy="'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center'" alt="">
<img v-lazy="'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center'" alt="">
<img v-for="item in getPublishDate.groupDetails" :class="{selectActive:item.designOutfitId === subPublishDate.coverId}" v-lazy="item.url" @click="setCover(item)" alt="">
</div>
</div>
</div>
<div class="publidh_right">
<div class="publidh_right_name publidh_content_item">
<div class="publidh_content_item_title">Name</div>
<input type="text">
<input type="text" v-model="subPublishDate.portfolioName">
</div>
<div class="publidh_right_name publidh_content_item">
<div class="publidh_content_item_title">Description</div>
<textarea ref="textarea"></textarea>
<textarea ref="textarea" v-model="subPublishDate.portfolioDes"></textarea>
</div>
<!-- <div class="publidh_right_name publidh_content_item">
<div class="publidh_content_item_title">Thumbnail preview</div>
<input type="text">
</div> -->
<div class="publidh_right_name publidh_content_item">
<div class="publidh_content_item publidh_right_zhuyi">
<div class="publidh_content_item_intro">
<span class="icon iconfont icon-zhuyi"></span>This will publish your work to the square for all users to see.
</div>
@@ -67,16 +61,18 @@
</div>
</div>
</div>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
</a-modal>
</template>
<script lang="ts">
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
// import { Https } from "@/tool/https";
// import { getCookie } from "@/tool/cookie";
import { Https } from "@/tool/https";
import { getCookie,setCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal,message } from 'ant-design-vue';
@@ -86,30 +82,55 @@ export default defineComponent({
setup() {
let publish: any = ref(false);//弹窗
let publishMask:any = ref(false)//弹窗遮罩
let publishDate:any = reactive({
let publishData:any = reactive({
publishName:'123123',
loadingShow:false,
publishMarginTop:0,
publishList:[],
publishIndex:0,//当前图片索引
isShowMark:false,
selectDate:{
url:'',
},
getPublishDate:{
},
subPublishDate:{
},
})
// let textarea: any = ref(null)
// let setCopy = ()=>{
// textarea.value.select()
// document.execCommand("copy");
// }
let init = ()=>{
console.log(213123);
let init = (data:any)=>{
let userInfo:any = getCookie("userInfo")
console.log(data);
publishData.getPublishDate = data
publish.value = true
// publishDate.publishList = list
// publishDate.publishIndex = index
publishData.selectDate.url = data.groupDetails[0].url
publishData.subPublishDate = {
userLikeGroupId : data.id,
coverId : data.groupDetails[0].designOutfitId,
accountId : JSON.parse(userInfo).userId,
createDate:'',
idDeleted:'',
id:'',
portfolioDes:'',
portfolioName:data.name,
portfolioType:'History',
status:'',
updateDate:'',
collectionId:'',
}
// publishData.publishList = list
// publishData.publishIndex = index
// let publishList = this.store.state.UploadFilesModule.moodboard
}
// let download = ()=>{
// downloadIamge(publishDate.publishList[publishDate.publishIndex].imgUrl)
// downloadIamge(publishData.publishList[publishData.publishIndex].imgUrl)
// }
// let setScaleImageIndex = (index:any)=>{
// publishDate.publishIndex = index
// publishData.publishIndex = index
// }
// let LikeFile = (item:any,str:string)=>{
// const currentInstance = getCurrentInstance();
@@ -123,11 +144,16 @@ export default defineComponent({
// let parent:any = this.$parent
// parent.likeFile(item,str)
// },
let confrimRename = ()=>{
let setCover = (item:any)=>{
publishData.subPublishDate.coverId = item.designOutfitId
publishData.selectDate.url = item.url
}
let cleardate = ()=>{
let cleardata = ()=>{
publish.value = false
publishData.isShowMark = false
publishData.getPublishDate = {}
publishData.subPublishDate = {}
}
let cancelDsign = ()=>{
Modal.confirm({
@@ -138,7 +164,7 @@ export default defineComponent({
mask:false,
centered:true,
onOk() {
cleardate()
cleardata()
}
});
}
@@ -152,21 +178,36 @@ export default defineComponent({
mask:false,
centered:true,
onOk() {
subPublish()
}
});
}
let subPublish = ()=>{
let data = publishData.subPublishDate
publishData.isShowMark = true
Https.axiosPost(Https.httpUrls.publish, data)
.then((rv) => {
console.log(rv);
cleardata()
publishData.isShowMark = false
})
.catch((rv) => {
publishData.isShowMark = false
});
}
return {
publish,
publishMask,
...toRefs(publishDate),
...toRefs(publishData),
// textarea,
// setCopy,
init,
// download,
// setScaleImageIndex,
// LikeFile,
confrimRename,
setCover,
cancelDsign,
setPublish,
};
@@ -341,6 +382,7 @@ export default defineComponent({
overflow-x: auto;
height: 24rem;
img{
cursor: pointer;
height: 100%;
margin-right: 1rem;
}
@@ -352,8 +394,10 @@ export default defineComponent({
}
.publidh_right{
width: 45%;
.publidh_right_btn{
.publidh_right_zhuyi{
margin-top: auto;
}
.publidh_right_btn{
display: flex;
align-items: center;
justify-content: flex-end;