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

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

@@ -11,7 +11,7 @@
<!-- 图片 -->
<div class="falls_item_img">
<img
v-lazy="item.designPythonOutfitUrl"
v-lazy="item.canvasUrl"
@click="setItemDetail(item)"
:style="{
height: item.style.imgHeihgt + 'px',
@@ -26,30 +26,31 @@
</div>
<div class="falls_item_content">
<div class="falls_item_user">
<img src="http://121.40.53.210:3000/falls/5.png" alt="">
<!-- <img src="http://121.40.53.210:3000/falls/5.png" alt=""> -->
<div class="falls_item_user_detail">
<div>{{item.name}}</div>
<div>{{item.portfolioName}}</div>
<span>地区</span>
</div>
</div>
<div class="falls_item_detail">
<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'}">
<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>
</div> -->
<label @click="portfolioLike(item)">
<i v-if="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>
</div>
<span>{{item.likeNum}}</span>
</label>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>{{item.likeNum}}</span>
</div>
</div>
</div>
@@ -142,6 +143,17 @@ export default defineComponent({
},
// 挂载方法
methods: {
clearData(){
this.width = 300
this.num_x = 1
this.gap_x = 0
this.gap_y = 0
this.poss = []
this.loading = false
this.computedHeight = 0
this.list = []
this.resize()
},
push(arr) {
this.wait_list = this.wait_list.concat(arr);
if (!this.loading) {
@@ -156,7 +168,7 @@ export default defineComponent({
return;
}
let url = this.wait_list[0].designPythonOutfitUrl;
let url = this.wait_list[0].canvasUrl;
let data = this.wait_list[0]
let img = document.createElement("img");
img.src = url;
@@ -181,7 +193,7 @@ export default defineComponent({
let imgHeight = height - this.computedHeight
this.poss[idx] = top + height;
let obj = {
designPythonOutfitUrl:url,
canvasUrl:url,
style: { width, height, top, left, imgHeight },
...data
};
@@ -234,6 +246,9 @@ export default defineComponent({
},
setItemDetail(data){
this.$emit('getImgScale',data)
},
portfolioLike(data){
this.$emit('setPortfolioLike',data)
}
},
})
@@ -321,10 +336,21 @@ export default defineComponent({
display: flex;
width: 40%;
justify-content: space-between;
>div{
>label{
// cursor: pointer;
}
>label,>div{
display: flex;
align-items: center;
i{
font-size: 2rem;
}
svg,i{
width: 10px;
height: 10px;
color: #9e9ea7;
display: flex;
// width: 10px;
// height: 10px;
margin-right: .5rem;
}
span{
margin-left: 3px;

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);

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

@@ -29,35 +29,51 @@
<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-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>
<div class="publidh_content_item_title">Collection Title</div>
<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" v-model="subPublishDate.portfolioDes"></textarea>
</div>
<div class="publidh_right_detail publidh_content_item">
<div class="publidh_content_item_title">Permissions</div>
<!-- <div>
<a-checkbox @change="setPermissions" v-model:checked="setPermissionsAll">All.</a-checkbox>
</div> -->
<!-- <div>
<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isAllowLikes">Whether to allow likes.</a-checkbox>
</div> -->
<!-- <div>
<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isAllowComment">Allow comments or not.</a-checkbox>
</div>
<div>
<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isDisplayArea">Show locale or not.</a-checkbox>
</div> -->
<div>
<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isSecondaryCreation">Whether to allow other users to perform secondary creation.</a-checkbox>
</div>
</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_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>
<!-- <div class="publidh_content_item_intro">
<label >
<span class="icon iconfont icon-zhuyi"></span>
<div>
This will publish your work to the square for all users to see.
</div>
</label>
</div> -->
</div>
<div class="publidh_right_btn">
<div class="started_btn" @click="setClose">Close</div>
<div class="started_btn">Save as draft</div>
<div class="started_btn" @click="setPublish">Publish</div>
<div class="started_btn" @click="cancelDsign">Close</div>
<div class="started_btn" @click="setPublish">{{beenPublished == 0?'Publish':'Updata Publish'}}</div>
</div>
</div>
</div>
@@ -76,26 +92,31 @@ 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';
import { downloadIamge } from "@/tool/util";
import { downloadIamge,base64ToFile } from "@/tool/util";
export default defineComponent({
setup() {
let publish: any = ref(false);//弹窗
let publishMask:any = ref(false)//弹窗遮罩
let publishData:any = reactive({
publishName:'123123',
publishName:'',
loadingShow:false,
publishMarginTop:0,
beenPublished:0,//history回来时候表示是否已经发布0为没发布
publishList:[],
publishIndex:0,//当前图片索引
isShowMark:false,
setPermissionsAll:true,
selectDate:{
url:'',
},
getPublishDate:{
},
subPublishDate:{
},
selectPermissions:{
isAllowComment:true,
isDisplayArea:true,
isSecondaryCreation:true,
}
})
// let textarea: any = ref(null)
// let setCopy = ()=>{
@@ -103,56 +124,51 @@ export default defineComponent({
// document.execCommand("copy");
// }
let init = (data:any)=>{
publishData.beenPublished = data.beenPublished
let userInfo:any = getCookie("userInfo")
console.log(data);
publishData.getPublishDate = data
// console.log(data);
publish.value = true
publishData.selectDate.url = data.groupDetails[0].url
publishData.selectDate.url = data.imgUrl
publishData.subPublishDate = {
userLikeGroupId : data.id,
coverId : data.groupDetails[0].designOutfitId,
userLikeGroupId : data.userlikeGroupId,
// userLikeGroupId : data.id,
coverId : '',
// coverId : data.groupDetails[0].designOutfitId,
accountId : JSON.parse(userInfo).userId,
createDate:'',
idDeleted:'',
id:'',
portfolioDes:'',
portfolioName:data.name,
portfolioName:'',
portfolioType:'History',
status:'',
updateDate:'',
collectionId:'',
// isAllowLikes:true,
}
// publishData.publishList = list
// publishData.publishIndex = index
// let publishList = this.store.state.UploadFilesModule.moodboard
}
// let download = ()=>{
// downloadIamge(publishData.publishList[publishData.publishIndex].imgUrl)
// }
// let setScaleImageIndex = (index:any)=>{
// publishData.publishIndex = index
// }
// let LikeFile = (item:any,str:string)=>{
// const currentInstance = getCurrentInstance();
// let parent:any = currentInstance?.parent
// console.log(parent);
// parent.likeFile(item,str)
// }
// LikeFile(item:any,str:string){
// let parent:any = this.$parent
// parent.likeFile(item,str)
// },
let setCover = (item:any)=>{
publishData.subPublishDate.coverId = item.designOutfitId
publishData.selectDate.url = item.url
}
let setPermissionsItem = ()=>{
// publishData.selectPermissions.isAllowLikes &&
if(publishData.selectPermissions.isAllowComment && publishData.selectPermissions.isDisplayArea && publishData.selectPermissions.isSecondaryCreation){
publishData.setPermissionsAll = true
}else{
publishData.setPermissionsAll = false
}
}
let setPermissions = ()=>{
// publishData.selectPermissions.isAllowLikes = publishData.setPermissionsAll;
publishData.selectPermissions.isAllowComment = publishData.setPermissionsAll
publishData.selectPermissions.isDisplayArea = publishData.setPermissionsAll
publishData.selectPermissions.isSecondaryCreation = publishData.setPermissionsAll
}
let cleardata = ()=>{
publish.value = false
publishData.isShowMark = false
publishData.getPublishDate = {}
publishData.subPublishDate = {}
}
let cancelDsign = ()=>{
@@ -169,7 +185,12 @@ export default defineComponent({
});
}
let setPublish= ()=>{
let _this = this
if(!publishData.subPublishDate.portfolioName){
return message.info('Please enter the name of your work')
}
// if(!publishData.subPublishDate.portfolioDes){
// return message.info('Please enter a description')
// }
Modal.confirm({
title: 'This will publish your work to the square for all users to see. Please confirm whether to publish?',
icon: createVNode(ExclamationCircleOutlined),
@@ -183,13 +204,24 @@ export default defineComponent({
});
}
let subPublish = ()=>{
let data = publishData.subPublishDate
let param = new FormData();
// let fill = dataURLtoFile(publishData.selectDate.url,'collection')
// let aa = new File([fill], 'collection' + ".jpg");
let file = base64ToFile(publishData.selectDate.url,'collection')
param.append('file',file)
publishData.subPublishDate.openSource = publishData.selectPermissions.isSecondaryCreation?1:0
param.append('data',JSON.stringify(publishData.subPublishDate))
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
// let data = publishData.subPublishDate
publishData.isShowMark = true
Https.axiosPost(Https.httpUrls.publish, data)
Https.axiosPost(Https.httpUrls.publish, param,config)
.then((rv) => {
console.log(rv);
cleardata()
publishData.isShowMark = false
message.success('Release success! You can find it in my work')
})
.catch((rv) => {
publishData.isShowMark = false
@@ -204,6 +236,8 @@ export default defineComponent({
// textarea,
// setCopy,
init,
setPermissionsItem,
setPermissions,
// download,
// setScaleImageIndex,
// LikeFile,
@@ -221,26 +255,6 @@ export default defineComponent({
mounted() {
},
methods: {
// init(list:any,index:any,dialogueIndex:any){
// },
// cancelDsign(){
// this.publish = false
// // this.publishList = []
// // this.publishIndex = 0
// },
// download(){
// // downloadIamge(this.publishList[this.publishIndex].imgUrl)
// },
// setScaleImageIndex(index:any){
// // this.publishIndex = index
// // console.log(this.publishIndex);
// },
// LikeFile(item:any,str:string){
// let parent:any = this.$parent
// parent.likeFile(item,str)
// },
},
});
</script>
@@ -262,6 +276,7 @@ export default defineComponent({
display: flex;
justify-content: space-between;
flex: 1;
height: calc(100% - 10rem);
.publidh_left,.publidh_right{
display: flex;
flex-direction: column;
@@ -306,14 +321,18 @@ export default defineComponent({
}
.publidh_left{
width: 45%;
.publidh_content_item{
height: 100%;
}
.publish_content_shrink{
width: 100%;
height: calc(100% - 4rem);
img{
width: 100%;
height: 100%;
object-fit: contain;
max-height: 30rem;
// object-fit: cover;
// max-height: 30rem;
max-height: 100%;
}
}
.publidh_left_thubnai{
@@ -349,6 +368,13 @@ export default defineComponent({
margin-right: 1rem;
}
}
.publidh_right_detail{
display: flex;
flex-direction: column;
label{
display: flex;
}
}
}
}