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

push Develop

Browse Source
This commit is contained in:
X1627315083
2024-06-17 09:39:01 +08:00
parent c93483e36f
commit 363b880276
55 changed files with 5880 additions and 1359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,32 +23,37 @@
<div class="newScaleImage_left">
<div class="newScaleImage_content_right">
<div class="newScaleImage_content_right_img">
<img :src="scaleImageList[scaleImageIndex]?.designPythonOutfitUrl">
<div>
<img :src="scaleImageList[scaleImageIndex]">
<!-- <img :src="scaleImageData?.canvasUrl"> -->
</div>
</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?.designPythonOutfitUrl" :key="item.id">
<div class="nav_centent" v-mousewheel="{allLength:scaleImageData.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}" :src="item" :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">type：{{ scaleImageList[scaleImageIndex]?.portfolioType=='History'? 'collection' : 'generate' }}</div>
<div class="generate_item_title_left scaleImage_chunk_title">type：{{ scaleImageData?.portfolioType=='History'? 'collection' : 'generate' }}</div>
</div>
<div v-if="true" class="newScaleImage_right_content_collection">
<!-- <div class="scaleImage_chunk_item content_left_collection_detail">
<div class="scaleImage_chunk_title">设计模式:</div>
<div class="scaleImage_chunk_item content_left_collection_detail">
<!-- <div class="scaleImage_chunk_title">设计模式:</div>
<div class="scaleImage_chunk_title_intro">
Overall
</div>
</div> -->
</div> -->
<div class="scaleImage_chunk_title">{{scaleImageData.portfolioName}}</div>
<div class="scaleImage_chunk_title_intro">{{scaleImageData.portfolioDes}}</div>
</div>
<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-for="item in scaleImageData?.designPythonOutfitList" v-lazy="item.designUrl">
</div>
</div>
<div class="started_btn" @click="setChoose">二创</div>
<div class="started_btn" @click="setChoose" :title="scaleImageData.openSource == 0?'发布者不允许二次创作~':''" :class="{active:scaleImageData.openSource == 0}">二创</div>
</div>
<div v-else class="newScaleImage_right_content_generate">
<div class="scaleImage_chunk_item content_left_generate_item">
@@ -74,7 +79,7 @@
<div class="scaleImage_chunk_item">
<div class="detail_right_user detail_left_right_item">
<div class="detail_right_user_head">
<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
<!-- <img v-lazy="scaleImageData?.imgUrl"> -->
</div>
<div class="detail_right_user_content">
<div class="scaleImage_chunk_title">名字</div>
@@ -83,41 +88,42 @@
</div>
</div>
<div class="detail_right_work_detail detail_left_right_item">
<div class="scaleImage_chunk_title">{{ scaleImageData.portfolioName }}</div>
<div class="scaleImage_chunk_title_intro">{{ scaleImageData.portfolioDes }}</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>{{ scaleImageList[scaleImageIndex].createDate }}</span>
<span>{{ scaleImageData.createDate }}</span>
</div>
<div class="detail_right_date_upData">
<div>更新时间</div>
<span>{{ scaleImageList[scaleImageIndex].updateDate }}</span>
<span>{{ scaleImageData.updateDate }}</span>
</div>
</div>
<div class="detail_right_look_operation detail_left_right_item">
<div class="detail_left_right_item_click">
<!-- <div class="detail_left_right_item_click">
<svg :adminLike="!!true" xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span>321</span>
</div>
<div class="detail_left_right_item_click">
<i v-if="true" :adminLike="!!true" class="fi fi-sr-thumbs-up" style="color: rgba(158, 158, 167);"></i>
</div> -->
<div class="detail_left_right_item_click" @click="setPortfolioLike">
<i v-if="scaleImageData?.isLike == 1" :adminLike="!!true" class="fi fi-sr-thumbs-up" style="color: rgba(158, 158, 167);"></i>
<i v-else class="fi fi-rr-social-network"></i>
<span>321</span>
<span>{{scaleImageData.likeNum}}</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
</svg>
<span>321</span>
</svg> -->
<i class="fi fi-sr-eye"></i>
<span>{{scaleImageData.likeNum}}</span>
</div>
<div>
<i class="fi fi-rr-comment-alt-dots"></i>
<span>321</span>
<span>{{scaleImageData.likeNum}}</span>
</div>
</div>
<div class="detail_right_auther detail_left_right_item">
@@ -144,41 +150,50 @@
</div>
<div class="newScaleImage_right_comment scaleImage_chunk_item">
<div class="scaleImage_chunk_title">Comment</div>
<div v-if="false" class="newScaleImage_right_comment_null">
<div v-if="commentList.length === 0" class="newScaleImage_right_comment_null">
<div class="scaleImage_chunk_title">No Comments</div>
<div class="scaleImage_chunk_title">You can be the first!</div>
</div>
<div v-else class="newScaleImage_right_comment_content">
<div class="detail_left_content_item">
<div class="detail_left_content_item_img">
<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
</div>
<div class="detail_left_content_item" v-for="item in commentList" :key="item.id">
<!-- <div class="detail_left_content_item_img">
<img v-lazy="scaleImageData?.imgUrl">
</div> -->
<div class="detail_left_content_item_content">
<div class="scaleImage_chunk_title">名字</div>
<div class="scaleImage_chunk_title_intro">个性签名</div>
<div class="scaleImage_chunk_title_comment" :class="[true?'active':'']">这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论</div>
<div class="scaleImage_chunk_title_intro">{{ item?.userName }}</div>
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div> -->
<div class="scaleImage_chunk_title" :class="[item.unfold?'':'active']">{{ item.comment }}</div>
<div class="scaleImage_chunk_title_intro" style="font-size: 1.2rem;" v>{{ item.createTimes }}</div>
<div class="detail_left_content_item_btn">
<div class="left_content_item_reply">回复</div>
<div class="left_content_item_thumbs">
<div class="left_content_item_reply" @click.stop="setCommentReply(item,'parent')">
<i class="fi fi-rr-comment-alt-dots"></i>
回复
</div>
<!-- <div class="left_content_item_thumbs">
<i class="fi fi-sr-thumbs-up" :adminSix="!!true" style="color: rgb(158, 158, 167);"></i>
<span>123</span>
</div>
<div v-show="true" class="left_content_item_unfold">展开</div>
</div> -->
<div v-show="true" class="left_content_item_unfold" @click="()=>item.unfold = !item.unfold">展开</div>
</div>
<div class="detail_left_content_item_replyContent">
<div class="detail_left_content_item_replyContent" v-for="children in item.childCommentVOList" :key="children.id">
<div class="detail_left_content_item_img">
<img v-lazy="scaleImageList[scaleImageIndex]?.imgUrl">
<!-- <img v-lazy="scaleImageData?.imgUrl"> -->
</div>
<div class="detail_left_content_item_content">
<div class="scaleImage_chunk_title">名字</div>
<div class="scaleImage_chunk_title_intro">个性签名</div>
<div class="scaleImage_chunk_title_comment" :class="[true?'active':'']"><span class="scaleImage_chunk_title">@名字</span>这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论这是一条评论</div>
<div class="scaleImage_chunk_title">{{ children?.userName }}<span v-if="children?.replyTo" class="replyIcon"></span>{{ children?.replyTo }}</div>
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div> -->
<div class="scaleImage_chunk_title" :class="[item.unfold?'':'active']">{{ children.comment }}</div>
<div class="scaleImage_chunk_title_intro" style="font-size: 1.2rem;" v>{{ children.createTimes }}</div>
<div class="detail_left_content_item_btn">
<div class="left_content_item_reply">回复</div>
<div class="left_content_item_thumbs">
<div class="left_content_item_reply" @click.stop="setCommentReply(children,'son')">
<i class="fi fi-rr-comment-alt-dots"></i>
回复
</div>
<!-- <div class="left_content_item_thumbs">
<i class="fi fi-sr-thumbs-up" :adminSix="!!true" style="color: rgb(158, 158, 167);"></i>
<span>123</span>
</div>
</div> -->
<div v-show="false" class="left_content_item_unfold">展开</div>
</div>
</div>
@@ -186,9 +201,9 @@
</div>
</div>
</div>
<div class="newScaleImage_right_comment_setComment">
<input type="text" placeholder="回复Wxd的评论">
<div class="detail_left_setComment_btn">
<div class="newScaleImage_right_comment_setComment" @click.stop="">
<input type="text" ref="commentInputFocus" v-model="commentText" :placeholder="commentInput">
<div class="detail_left_setComment_btn" @click="setComment">
<i class="fi fi-ss-paper-plane-top"></i>
</div>
</div>
@@ -200,12 +215,12 @@
</template>
<script lang="ts">
import { defineComponent,watch,getCurrentInstance, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
import { defineComponent,watch,getCurrentInstance, h, ref ,toRefs,computed,reactive,triggerRef, nextTick, onMounted} from "vue";
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";
import { downloadIamge,setPubDate } from "@/tool/util";
export default defineComponent({
setup() {
@@ -217,10 +232,24 @@ export default defineComponent({
generateValue:'123123',
loadingShow:false,
scaleImageMarginTop:0,
commentReply:{
leve1Id:null,
leve2Id:null,
name:'',
},
scaleImageList:[],
scaleImageIndex:0,//当前图片索引
scaleImageData:{},//当前图片内容
getCommentData:{
portfolioId:0,
page:1,
size:10
},
commentText:'',
commentInput:'',//评论框提示词
commentList:[],
})
let commentInputFocus:any = ref()
let textarea: any = ref(null)
let setCopy = ()=>{
textarea.value.select()
@@ -228,18 +257,17 @@ export default defineComponent({
}
let init = (item:any)=>{
scaleImage.value = true
// imgData.scaleImageList = list
// imgData.scaleImageIndex = index
// let data = list[index]
getDetail(item.id)
getDetail(item,'')
document.addEventListener('click',removeCommentReply)
// let scaleImageList = this.store.state.UploadFilesModule.moodboard
}
let cancelDsign = ()=>{
scaleImage.value = false
imgData.scaleImageIndex = 0
imgData.scaleImageData = {}
imgData.commentText = ''
document.removeEventListener('click',removeCommentReply)
}
let download = ()=>{
downloadIamge(imgData.scaleImageList[imgData.scaleImageIndex].imgUrl)
@@ -257,25 +285,109 @@ export default defineComponent({
// let parent:any = this.$parent
// parent.likeFile(item,str)
// },
let getDetail = (value:any)=>{
let getDeatilData = {}
let getDetail = (value:any,str:string)=>{
imgData.loadingShow = true
let data = value
// Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
// (rv: any) => {
// imgData.scaleImageData = rv
// console.log(imgData.scaleImageData);
// }
// ).catch((res)=>{
// }
// )
getDeatilData = value
Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
(rv: any) => {
imgData.loadingShow = false
imgData.scaleImageData = rv
let canvasUrl = [rv.canvasUrl]
var findUrl = rv.designPythonOutfitList.map((obj:any) => obj.designUrl);
imgData.scaleImageList = canvasUrl.concat(findUrl);
imgData.scaleImageIndex = 0
imgData.getCommentData.portfolioId = rv.id
if(str == 'zan'){
}else{
getCommentPage()
}
}).catch((res)=>{
imgData.loadingShow = false
}
)
}
let setChoose = () =>{
router.push({name:'homePage',params: {id:imgData.scaleImageList[imgData.scaleImageIndex].userLikeGroupSourceId,type:'Works'}})
if(imgData.scaleImageData.openSource == 0)return
router.push({name:'homePage',params: {id:imgData.scaleImageData.userLikeGroupSourceId,type:'Works'}})
}
let setCommentReply = (value:any,str:any)=>{
imgData.commentReply.leve1Id = value.id
imgData.commentReply.leve2Id = null
if(str == 'son'){
imgData.commentReply.leve1Id = value.parentLevel1Id
imgData.commentReply.leve2Id = value.id
}
imgData.commentReply.name = value.userName
imgData.commentInput = `回复${imgData.commentReply.name}的评论`
commentInputFocus.value.focus()
}
let removeCommentReply = ()=>{
imgData.commentReply.leve1Id = null
imgData.commentReply.leve2Id = null
imgData.commentReply.name = ''
imgData.commentInput = '请输入评论内容'
}
let setComment = ()=>{
let data = {
"accountId": 0,
"comment": imgData.commentText,
"createTime": "",
"id": '',
"isDeleted": 0,
"parentLevel1Id": imgData.commentReply.leve1Id,
"parentLevel2Id": imgData.commentReply.leve2Id,
"portfolioId": imgData.scaleImageData.id,
}
Https.axiosPost(Https.httpUrls.portfolioComment, data)
.then((rv) => {
imgData.commentText = ''
getCommentPage()
})
.catch((rv) => {
});
}
let getCommentPage = ()=>{
let data = imgData.getCommentData
Https.axiosPost(Https.httpUrls.portfolioCommentPage,data).then(
(rv: any) => {
imgData.commentList = rv.content
imgData.commentList.forEach((item:any)=>{
item.createTimes = setPubDate(item.createTime)
if (item.childCommentVOList) {
item.childCommentVOList.forEach((obj:any)=>{
obj.createTimes = setPubDate(obj.createTime)
})
}
})
}
).catch((res)=>{
}
)
}
let setPortfolioLike = ()=>{
let data = {id:imgData.scaleImageData.id}
let url
if(imgData.scaleImageData.isLike == 1){
url = Https.httpUrls.portfolioNoLike
}else{
url = Https.httpUrls.portfolioLike
}
Https.axiosGet(url, {params:data})
.then((rv) => {
getDetail(getDeatilData,'zan')
})
.catch((rv) => {
});
}
watch(()=>imgData.scaleImageIndex,
(newVal,oldVal)=>{
let dom:any = document.querySelector('.newScaleImage_left .nav_centent')
if(!dom) return
getDetail(imgData.scaleImageList[newVal])
let contentItemHeight = Number(getComputedStyle(dom).getPropertyValue('--snap-size').split('rem')[0]);
imgData.scaleImageMarginTop = `${contentItemHeight*-(newVal) - contentItemHeight/2}rem`
}
@@ -284,6 +396,7 @@ export default defineComponent({
scaleImage,
scaleImageMask,
...toRefs(imgData),
commentInputFocus,
textarea,
setCopy,
init,
@@ -292,6 +405,9 @@ export default defineComponent({
setScaleImageIndex,
LikeFile,
setChoose,
setCommentReply,
setComment,
setPortfolioLike,
};
},
directives:{
@@ -329,6 +445,7 @@ export default defineComponent({
}
},
},
data() {
return {
@@ -339,26 +456,6 @@ export default defineComponent({
mounted() {
},
methods: {
// init(list:any,index:any,dialogueIndex:any){
// },
// cancelDsign(){
// this.scaleImage = false
// // this.scaleImageList = []
// // this.scaleImageIndex = 0
// },
// download(){
// // downloadIamge(this.scaleImageList[this.scaleImageIndex].imgUrl)
// },
// setScaleImageIndex(index:any){
// // this.scaleImageIndex = index
// // console.log(this.scaleImageIndex);
// },
// LikeFile(item:any,str:string){
// let parent:any = this.$parent
// parent.likeFile(item,str)
// },
},
});
</script>
@@ -427,39 +524,54 @@ export default defineComponent({
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
height: var(--content-height);
// height: var(--content-height);
height: 100%;
position: relative;
overflow: hidden;
overflow-y: auto;
.newScaleImage_content_right_img{
height: 100%;
width: auto;
width: 60%;
overflow-x: auto;
width: 70%;
margin-left: auto;
// width: 100%;
display: flex;
justify-content: center;
img{
width: auto;
max-width: 100%;
height: 100%;
object-fit: contain;
margin-right: 2rem;
}
img:last-child{
margin-right: 0;
// justify-content: center;
justify-content: right;
overflow-y: auto;
&.newScaleImage_content_right_img::-webkit-scrollbar{display: none;}
>div{
width: 100%;
height: auto;
img{
// width: auto;
max-width: 100%;
height: 100%;
// height: 100%;
object-fit: contain;
width: 100%;
margin-right: 2rem;
}
img:last-child{
margin-right: 0;
}
}
}
--count: 50;
--snap-size: 10rem;
--offset: 2;
.nav_centent{
width: auto;
// width: auto;
display: flex;
flex-direction: column;
position: absolute;
right: 0;
padding-top: calc(var(--content-height) / 2);
padding-left: 10rem;
// padding-left: 10rem;
transition: all .2s;
left: 0;
width: 30%;
}
.nav_centent_img{
max-width: calc(var(--snap-size) - 2rem);
@@ -481,17 +593,17 @@ export default defineComponent({
transition: all .1s;
&.active1{
// border: 4px solid rgb(148, 230, 255);
transform: scale(1.4) translateX(-30%);
transform: scale(1.4) translateX(30%);
z-index: 2;
}
&.active2{
// border: 4px solid rgb(216, 255, 172);
transform: scale(1.6) translateX(-60%);
transform: scale(1.6) translateX(60%);
z-index: 3;
}
&.active3{
// border: 4px solid rgb(148, 233, 183);
transform: scale(1.4) translateX(-30%);
transform: scale(1.4) translateX(30%);
z-index: 2;
}
}
@@ -527,12 +639,16 @@ export default defineComponent({
// }
.started_btn{
margin-bottom: var(--margin);
&.active{
cursor: no-drop;
}
}
.content_left_collection_detail{
height: calc(8rem + var(--padding) * 2);
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
justify-content: center;
.scaleImage_chunk_title{
margin-right: 1rem;
}
@@ -611,6 +727,9 @@ export default defineComponent({
}
.detail_left_right_item_click{
cursor: pointer;
i{
color: #9e9ea7;
}
}
.detail_left_right_item:last-child{
margin-bottom: 0;
@@ -654,6 +773,16 @@ export default defineComponent({
flex: 1;
margin-left: 1rem;
width: calc(100% - 6rem - 1rem);
.replyIcon{
width: 0;
height: 0;
vertical-align: middle;
border: .5rem solid transparent;
border-left: 1rem solid #000;
border-right: none;
display: inline-block;
margin: 0 1rem;
}
>div{
margin-top: .4rem;
>span{
@@ -666,6 +795,7 @@ export default defineComponent({
.detail_left_content_item_btn{
display: flex;
align-items: center;
margin-top: 1rem;
.left_content_item_reply,.left_content_item_thumbs,.left_content_item_unfold{
cursor: pointer;
}
@@ -711,6 +841,7 @@ export default defineComponent({
border: .2rem solid var(--border-color);
}
.detail_left_setComment_btn{
cursor: pointer;
width: 4rem;
height: 4rem;
background: rgba(57, 33, 91);