1208 lines
35 KiB
Vue
1208 lines
35 KiB
Vue
<template>
|
|
<!-- width="78%" -->
|
|
<div ref="newScaleImageMobileModal"></div>
|
|
<a-modal
|
|
class="newScaleImageMobile_modal generalModel"
|
|
v-model:visible="scaleImage"
|
|
:footer="null"
|
|
:get-container="() => $refs.newScaleImageMobileModal"
|
|
width="100%"
|
|
height="70%"
|
|
:maskClosable="false"
|
|
:centered="true"
|
|
:closable="false"
|
|
:mask="scaleImageMask"
|
|
:keyboard="false"
|
|
:destroyOnClose="true"
|
|
>
|
|
<div class="generalModel_btn">
|
|
<div class="generalModel_closeIcon" @click.stop="cancelDsign('')">
|
|
<svg width="100%" height="100%" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
|
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
|
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
|
</svg>
|
|
|
|
</div>
|
|
<!-- <div class="collection_closeIcon" @click.stop="download()">
|
|
<i class="fi fi-rr-down-to-line"></i>
|
|
</div> -->
|
|
</div>
|
|
<div class="newScaleImageMobile_page">
|
|
<div class="newScaleImageMobile_right">
|
|
<div class="newScaleImageMobile_right_content">
|
|
<div v-if="true" class="newScaleImageMobile_right_content_collection" style="border: none;">
|
|
<div class="scaleImage_chunk_item content_left_collection_detail">
|
|
<!-- <div class="scaleImage_chunk_title">设计模式:</div>
|
|
<div class="scaleImage_chunk_title_intro">
|
|
Overall
|
|
</div> -->
|
|
<!-- <div class="scaleImage_chunk_title_intro">zhh</div> -->
|
|
<div class="detail_right_user detail_left_right_item">
|
|
<div class="detail_right_user_head">
|
|
<img v-lazy="scaleImageData?.avatar">
|
|
</div>
|
|
<div class="detail_right_user_content">
|
|
<!-- <div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div> -->
|
|
<div>
|
|
<div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div>
|
|
<div v-if="scaleImageData.isFollow == 0" class="started_btn" @click="setFollow()" >{{$t('newScaleImage.Follow')}}</div>
|
|
<div v-else class="started_btn" @click="setFollow()" >{{$t('newScaleImage.Unfollow')}}</div>
|
|
</div>
|
|
<div v-if="scaleImageData.original == 1" class="scaleImage_chunk_title_intro scaleImage_chunk_title_Original">{{$t('newScaleImage.Original')}}</div>
|
|
<div v-else @click="originalGetDetail()" class="scaleImage_chunk_title_intro">{{$t('newScaleImage.from')}}<span :class="{active:scaleImageData.jumpable == 1}"> @{{ scaleImageData.originalUserName }}/{{ scaleImageData.portfolioName }}</span></div>
|
|
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div>
|
|
<div class="scaleImage_chunk_btn">关注</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="false" class="scaleImage_chunk_item content_left_collection_content" v-show="scaleImageData.openSource == 1">
|
|
<div class="scaleImage_chunk_title">{{scaleImageData.Collection}}</div>
|
|
<div class="content_left_collection_content_list">
|
|
<img v-for="item in scaleImageData?.designPythonOutfitList" v-lazy="item.designUrl">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="newScaleImageMobile_left">
|
|
<div class="newScaleImageMobile_content_right">
|
|
<div class="newScaleImageMobile_content_right_img">
|
|
<swiper
|
|
:pagination="{
|
|
dynamicBullets: true,
|
|
}"
|
|
:slides-per-view="1"
|
|
:space-between="50"
|
|
:modules="[Pagination]"
|
|
>
|
|
<swiper-slide v-for="item in scaleImageList">
|
|
<fullScreenImg :src="item" width="100%" :center="true"></fullScreenImg>
|
|
</swiper-slide>
|
|
</swiper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="newScaleImageMobile_right">
|
|
<div class="newScaleImageMobile_right_content">
|
|
<div v-if="true" class="newScaleImageMobile_right_content_collection">
|
|
<div class="scaleImage_chunk_item content_left_collection_detail">
|
|
<div class="scaleImage_chunk_title">
|
|
{{$t('newScaleImage.Title')}}:
|
|
<span class="scaleImage_chunk_title_intro">{{scaleImageData.portfolioName}}</span>
|
|
</div>
|
|
<div v-show="scaleImageData.portfolioDes" class="scaleImage_chunk_title">
|
|
{{$t('newScaleImage.Describe')}}: <span>{{scaleImageData.portfolioDes}}</span>
|
|
</div>
|
|
<div class="scaleImage_chunk_title_intro">{{scaleImageData.createDate?.split('T')[0]}} {{scaleImageData.createDate?.split('T')[1]}}</div>
|
|
<div class="detail_right_look_operation detail_left_right_item">
|
|
<!-- <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" @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>{{scaleImageData.likeNum}}</span>
|
|
</div>
|
|
<div>
|
|
<i class="fi fi-sr-eye"></i>
|
|
<span>{{scaleImageData.viewNums}}</span>
|
|
</div>
|
|
<div>
|
|
<i class="fi fi-rr-comment-alt-dots"></i>
|
|
<span>{{commentList.length}}</span>
|
|
</div>
|
|
<div v-if="userDetail?.userName === scaleImageData.userName" @click="deletePortfolio" class="detail_left_right_item_click">
|
|
<i class="icon iconfont icon-shanchu operate_icon"></i>
|
|
<!-- <span>{{$t('newScaleImage.Delete')}}</span> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="false" class="scaleImage_chunk_item content_left_collection_content" v-show="scaleImageData.openSource == 1">
|
|
<div class="scaleImage_chunk_title">{{scaleImageData.Collection}}</div>
|
|
<div class="content_left_collection_content_list">
|
|
<img v-for="item in scaleImageData?.designPythonOutfitList" v-lazy="item.designUrl">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="false" class="newScaleImageMobile_right_detail">
|
|
<div class="scaleImage_chunk_item">
|
|
<div class="detail_right_work_detail detail_left_right_item">
|
|
</div>
|
|
<div class="detail_right_date detail_left_right_item">
|
|
<div class="detail_right_date_setUp">
|
|
<div>{{$t('newScaleImage.CreationTime')}}</div>
|
|
<span>{{ scaleImageData.createDate }}</span>
|
|
</div>
|
|
<div class="detail_right_date_upData">
|
|
<div>{{$t('newScaleImage.UpdateTime')}}</div>
|
|
<span>{{ scaleImageData.updateDate }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="newScaleImageMobile_right_comment scaleImage_chunk_item">
|
|
<div class="scaleImage_chunk_title">{{$t('newScaleImage.Comment')}}</div>
|
|
<!-- <div v-show="commentList.length === 0" class="newScaleImageMobile_right_comment_null">
|
|
<div class="scaleImage_chunk_title">{{$t('newScaleImage.NoComments')}}</div>
|
|
<div class="scaleImage_chunk_title">{{$t('newScaleImage.first')}}</div>
|
|
</div> -->
|
|
<div class="newScaleImageMobile_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>
|
|
<div v-show="commentList.length !== 0" class="newScaleImageMobile_right_comment_content">
|
|
<div class="detail_left_content_item" v-for="item,index 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_intro">{{ item?.userName }}</div>
|
|
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div> -->
|
|
<div v-commentUnfold="item" class="scaleImage_chunk_title" :class="[item.detailUnfold?'active':'']"><div>{{ item.comment }}</div></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" @click.stop="setCommentReply(item,'parent')">
|
|
<i class="fi fi-rr-comment-alt-dots"></i>
|
|
{{$t('newScaleImage.reply')}}
|
|
</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 class="left_content_item_btn">
|
|
<div class="left_content_item_delete" v-if="userDetail?.userName === item.userName" @click="setDeleteComment(item,index,'')">{{$t('newScaleImage.Delete')}}</div>
|
|
<div class="left_content_item_unfold" @click="()=>item.detailUnfold = !item.detailUnfold">{{item.detailUnfold?$t('newScaleImage.Collapse'):$t('newScaleImage.unfold')}}</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="item.childCommentVOList" class="detail_left_content_item_replyContent_box" :class="[item.unfold?'':'active']">
|
|
<div class="detail_left_content_item_replyContent" v-for="children,childrenIndex in item.childCommentVOList" :key="children.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_intro">{{ children?.userName }}<span v-if="children?.replyTo" class="replyIcon"></span>{{ children?.replyTo }}</div>
|
|
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div> -->
|
|
<div v-commentUnfold="children" class="scaleImage_chunk_title" :class="[children.detailUnfold?'active':'']"><div>{{ children.comment }}</div></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" @click.stop="setCommentReply(children,'son')">
|
|
<i class="fi fi-rr-comment-alt-dots"></i>
|
|
{{$t('newScaleImage.reply')}}
|
|
</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 class="left_content_item_btn">
|
|
<div class="left_content_item_delete" v-if="userDetail?.userName === children.userName" @click="setDeleteComment(children,index,childrenIndex)">{{$t('newScaleImage.Delete')}}</div>
|
|
<div class="left_content_item_unfold" @click="()=>children.detailUnfold = !children.detailUnfold">{{children.detailUnfold?$t('newScaleImage.Collapse'):$t('newScaleImage.unfold')}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="item.childCommentVOList" @click.stop="()=>item.unfold = !item.unfold" class="detail_left_content_item_replyContent_box_btn">
|
|
{{$t('newScaleImage.replyAll')}}
|
|
<div class="icon iconfont icon-xiala" :class="{active:item.unfold}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="newScaleImageMobile_right_comment_loading" v-show="!isNoData">
|
|
<span class="page_loading" v-show="!isShowMark"></span>
|
|
<span v-show="isShowMark">
|
|
<a-spin size="large" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mark_loading" v-show="loadingShow">
|
|
<a-spin size="large" />
|
|
</div>
|
|
</div>
|
|
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent,watch,getCurrentInstance, createVNode, ref ,toRefs,computed,reactive,triggerRef, nextTick, onMounted} from "vue";
|
|
import { Https } from "@/tool/https";
|
|
// import domTurnImg from '@/tool/domTurnImg'
|
|
import { useStore } from "vuex";
|
|
import { useRouter } from 'vue-router'
|
|
import { downloadIamge,setPubDate } from "@/tool/util";
|
|
import { Modal,message } from "ant-design-vue";
|
|
import { useI18n } from 'vue-i18n';
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import fullScreenImg from '@/component/HomePage/fullScreenImg.vue'
|
|
import { Swiper, SwiperSlide } from 'swiper/vue';
|
|
import 'swiper/css';
|
|
import { Pagination } from 'swiper/modules';
|
|
export default defineComponent({
|
|
components:{fullScreenImg,Swiper,SwiperSlide},
|
|
emits:['deletePorfolio','uploadLikeAndLook'],
|
|
setup(props:any,{emit}) {
|
|
let {t} = useI18n()
|
|
//首先在setup中定义
|
|
let userDetail:any= computed(()=>{
|
|
return store.state.UserHabit.userDetail
|
|
})
|
|
const store = useStore();
|
|
const router = useRouter()
|
|
let scaleImage: any = ref(false);//弹窗
|
|
let scaleImageMask:any = ref(false)//弹窗遮罩
|
|
let imgData:any = reactive({
|
|
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:[],
|
|
isNoData:false,
|
|
isShowMark:false,
|
|
})
|
|
let commentInputFocus:any = ref()
|
|
let textarea: any = ref(null)
|
|
let setCopy = ()=>{
|
|
textarea.value.select()
|
|
document.execCommand("copy");
|
|
}
|
|
let init = (item:any)=>{
|
|
scaleImage.value = true
|
|
// let data = list[index]
|
|
getDetail(item,'')
|
|
document.addEventListener('click',removeCommentReply)
|
|
// let scaleImageList = this.store.state.UploadFilesModule.moodboard
|
|
}
|
|
let cancelDsign = (id:any)=>{
|
|
if(id){
|
|
emit('deletePorfolio',id)
|
|
}
|
|
scaleImage.value = false
|
|
imgData.scaleImageIndex = 0
|
|
emit('uploadLikeAndLook',imgData.scaleImageData)
|
|
imgData.scaleImageData = {}
|
|
imgData.commentText = ''
|
|
imgData.scaleImageList = []
|
|
imgData.getCommentData.page = 1
|
|
imgData.getCommentData.size = 10
|
|
document.removeEventListener('click',removeCommentReply)
|
|
}
|
|
let download = ()=>{
|
|
downloadIamge(imgData.scaleImageList[imgData.scaleImageIndex].imgUrl)
|
|
}
|
|
let setScaleImageIndex = (index:any)=>{
|
|
imgData.scaleImageIndex = index
|
|
}
|
|
let LikeFile = (item:any,str:string)=>{
|
|
const currentInstance = getCurrentInstance();
|
|
let parent:any = currentInstance?.parent
|
|
parent.likeFile(item,str)
|
|
}
|
|
|
|
// LikeFile(item:any,str:string){
|
|
// let parent:any = this.$parent
|
|
// parent.likeFile(item,str)
|
|
// },
|
|
let getDeatilData = {}
|
|
let originalGetDetail = ()=>{
|
|
if(imgData.scaleImageData.jumpable != 1){
|
|
return message.info(t('newScaleImage.jsContent6'))
|
|
}
|
|
getDetail({id:imgData.scaleImageData.originalPortfolioId},'')
|
|
}
|
|
let getDetail = (value:any,str:string)=>{
|
|
imgData.loadingShow = true
|
|
let data = value
|
|
getDeatilData = value
|
|
Https.axiosPost(Https.httpUrls.getPorfolioDetail,data).then(
|
|
(rv: any) => {
|
|
imgData.loadingShow = false
|
|
imgData.scaleImageData = rv
|
|
let canvasUrl = [rv.canvasUrl]
|
|
var findUrl = []
|
|
if(rv.designPythonOutfitList){
|
|
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('')
|
|
nextTick(()=>{
|
|
let imgParent:any = document.querySelector('.newScaleImageMobile_modal .page_loading')
|
|
new IntersectionObserver(
|
|
(entries, observer) => {
|
|
// 如果不是相交，则直接返回
|
|
// console.log(entries[0]);
|
|
|
|
if (!entries[0].intersectionRatio) return;
|
|
imgData.getCommentData.size += 10
|
|
getCommentPage('')
|
|
},
|
|
// { root:worksPage }
|
|
).observe(imgParent);
|
|
})
|
|
|
|
}
|
|
}).catch((res)=>{
|
|
imgData.loadingShow = false
|
|
}
|
|
)
|
|
}
|
|
|
|
let setChoose = () =>{
|
|
if(userDetail.value.systemUser !== 1){
|
|
return message.info(t('newScaleImage.jsContent1'))
|
|
}
|
|
if(imgData.scaleImageData.openSource == 0){
|
|
return message.info(t('newScaleImage.jsContent2'))
|
|
}
|
|
router.push({name:'homePage',params: {id:imgData.scaleImageData.id,type:'Works'}})
|
|
// 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 = `${t('newScaleImage.reply')} ${imgData.commentReply.name}`
|
|
commentInputFocus.value.focus()
|
|
}
|
|
let removeCommentReply = ()=>{
|
|
imgData.commentReply.leve1Id = null
|
|
imgData.commentReply.leve2Id = null
|
|
imgData.commentReply.name = ''
|
|
imgData.commentInput = t('newScaleImage.jsContent3')
|
|
}
|
|
let setComment = ()=>{
|
|
if(!imgData.commentText){
|
|
return message.info(t('LibraryPage.jsContent7'))
|
|
}
|
|
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({str:'comment',id:imgData.scaleImageData.id})
|
|
})
|
|
.catch((rv) => {
|
|
});
|
|
}
|
|
let getCommentPage = (value:any)=>{
|
|
let data = imgData.getCommentData
|
|
imgData.isShowMark = true
|
|
Https.axiosPost(Https.httpUrls.portfolioCommentPage,data).then(
|
|
(rv: any) => {
|
|
rv.content.forEach((item:any)=>{
|
|
if(value.id == item.portfolioId){
|
|
item.unfold = true
|
|
}
|
|
item.createTimes = setPubDate(item.createTime,t)
|
|
if (item.childCommentVOList) {
|
|
item.childCommentVOList.forEach((obj:any)=>{
|
|
obj.createTimes = setPubDate(obj.createTime,t)
|
|
})
|
|
}
|
|
})
|
|
// imgData.commentList.push(...rv.content)
|
|
imgData.commentList = rv.content
|
|
imgData.isShowMark = false
|
|
if(rv.total == rv.content.length&&value?.str != 'comment'){
|
|
imgData.isNoData = true
|
|
}
|
|
}
|
|
).catch((res)=>{
|
|
imgData.isShowMark = false
|
|
}
|
|
)
|
|
}
|
|
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) => {
|
|
if(imgData.scaleImageData.isLike == 1){
|
|
imgData.scaleImageData.likeNum -= 1
|
|
imgData.scaleImageData.isLike = 0
|
|
}else{
|
|
imgData.scaleImageData.likeNum += 1
|
|
imgData.scaleImageData.isLike = 1
|
|
}
|
|
// getDetail(getDeatilData,'zan')
|
|
})
|
|
.catch((rv) => {
|
|
});
|
|
}
|
|
let setDeleteComment = (value:any,index:any,childrenIndex:any)=>{
|
|
Modal.confirm({
|
|
title: t('newScaleImage.jsContent4'),
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Ok',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
centered:true,
|
|
onOk() {
|
|
let data = {
|
|
"accountId": 0,
|
|
"comment": "",
|
|
"createTime": "",
|
|
"id": value.id,
|
|
"isDeleted": 0,
|
|
"parentLevel1Id": 0,
|
|
"parentLevel2Id": 0,
|
|
"portfolioId": imgData.scaleImageData.id,
|
|
}
|
|
Https.axiosPost(Https.httpUrls.commentDelete, data)
|
|
.then((rv) => {
|
|
let commentData = {
|
|
str:'comment',
|
|
id:imgData.scaleImageData.id,
|
|
}
|
|
getCommentPage(commentData)
|
|
})
|
|
.catch((rv) => {
|
|
});
|
|
},
|
|
onCancel(){
|
|
}
|
|
});
|
|
|
|
}
|
|
let deletePortfolio = ()=>{
|
|
Modal.confirm({
|
|
title: t('newScaleImage.jsContent5'),
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
centered:true,
|
|
onOk() {
|
|
let data = {
|
|
id:imgData.scaleImageData.id
|
|
}
|
|
Https.axiosGet(Https.httpUrls.porfolioDelete, {params:data})
|
|
.then((rv) => {
|
|
cancelDsign(imgData.scaleImageData.id)
|
|
})
|
|
.catch((rv) => {
|
|
});
|
|
},
|
|
onCancel(){
|
|
}
|
|
});
|
|
}
|
|
watch(()=>imgData.scaleImageIndex,
|
|
(newVal,oldVal)=>{
|
|
let dom:any = document.querySelector('.newScaleImageMobile_left .nav_centent')
|
|
if(!dom) return
|
|
let contentItemHeight = Number(getComputedStyle(dom).getPropertyValue('--snap-size').split('rem')[0]);
|
|
imgData.scaleImageMarginTop = `${contentItemHeight*-(newVal) - contentItemHeight/2}rem`
|
|
}
|
|
)
|
|
onMounted(()=>{
|
|
})
|
|
return {
|
|
userDetail,
|
|
scaleImage,
|
|
scaleImageMask,
|
|
...toRefs(imgData),
|
|
commentInputFocus,
|
|
textarea,
|
|
setCopy,
|
|
init,
|
|
cancelDsign,
|
|
download,
|
|
setScaleImageIndex,
|
|
originalGetDetail,
|
|
LikeFile,
|
|
setChoose,
|
|
setCommentReply,
|
|
deletePortfolio,
|
|
setComment,
|
|
setPortfolioLike,
|
|
setDeleteComment,
|
|
Pagination,
|
|
};
|
|
},
|
|
directives:{
|
|
commentUnfold:{
|
|
mounted (el,binding) {
|
|
let parent = el.parentNode
|
|
let commentBtn = parent.querySelector('.left_content_item_unfold')
|
|
let commentDomSon = el.querySelector('div')
|
|
let maxHeight = Number((window.getComputedStyle(el).maxHeight).split('px')[0])
|
|
if(commentDomSon.offsetHeight > maxHeight){
|
|
commentBtn.style.display = 'block'
|
|
}else if(!binding.value.detailUnfold){
|
|
commentBtn.style.display = 'none'
|
|
}
|
|
},
|
|
// updated (el,binding) {
|
|
// let parent = el.parentNode
|
|
// let commentBtn = parent.querySelector('.left_content_item_unfold')
|
|
// let commentDomSon = el.querySelector('div')
|
|
// let maxHeight = Number((window.getComputedStyle(el).maxHeight).split('px')[0])
|
|
// console.log(commentDomSon.offsetHeight , maxHeight);
|
|
|
|
// if(commentDomSon.offsetHeight > maxHeight){
|
|
// commentBtn.style.display = 'block'
|
|
// }else if(!binding.value.detailUnfold){
|
|
// commentBtn.style.display = 'none'
|
|
// }
|
|
|
|
|
|
// }
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
// moodTemplateId: "", //模板id
|
|
|
|
};
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less">
|
|
.newScaleImageMobile_modal {
|
|
--margin: 3rem;
|
|
--padding: 2rem;
|
|
--border-color: #c4c4c4;
|
|
--background-color:#f5f5f5;
|
|
--content-height: 60rem;
|
|
--auther_wh: 8rem;
|
|
--count: 50;
|
|
--snap-size: 10rem;
|
|
--offset: 2;
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.swiper{
|
|
padding-bottom: 2rem;
|
|
}
|
|
.swiper-pagination{
|
|
.swiper-pagination-bullet-active{
|
|
background: #000;
|
|
}
|
|
}
|
|
.generalModel_closeIcon{
|
|
border-radius: 50%;
|
|
background: #949494;
|
|
}
|
|
.newScaleImageMobile_modal {
|
|
box-shadow: none;
|
|
height: 100%;
|
|
margin: 0;
|
|
max-width: 100%;
|
|
&.generalModel{
|
|
.ant-modal-content{
|
|
height: 100%;
|
|
}
|
|
.ant-modal-body{
|
|
padding: 6rem 4rem;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.newScaleImageMobile_page{
|
|
overflow-y: auto;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
&.newScaleImageMobile_page::-webkit-scrollbar{display: none;}
|
|
}
|
|
|
|
|
|
.scaleImage_chunk_item{
|
|
// background: var(--background-color);
|
|
padding: var(--padding) 0;
|
|
border-radius: var(--padding);
|
|
// margin-bottom: var(--margin);
|
|
}
|
|
.scaleImage_chunk_btn{
|
|
padding: .5rem 1rem;
|
|
border-radius: 4px;
|
|
border: .2rem solid var(--border-color);
|
|
background: #fff;
|
|
cursor: pointer;
|
|
|
|
}
|
|
.scaleImage_chunk_title{
|
|
font-size: 2.2rem;
|
|
font-weight: 600;
|
|
color: #000;
|
|
overflow: hidden;
|
|
max-height: 100px;
|
|
text-align: left;
|
|
&.active{
|
|
max-height: max-content;
|
|
}
|
|
span{
|
|
font-size: 1.8rem;
|
|
font-weight: 300;
|
|
color: #535353;
|
|
}
|
|
}
|
|
.scaleImage_chunk_title_comment{
|
|
font-size: 1.6rem;
|
|
font-weight: 600;
|
|
color: #000;
|
|
max-height: 8.5rem;
|
|
overflow: hidden;
|
|
&.active{
|
|
max-height: max-content;
|
|
}
|
|
}
|
|
.scaleImage_chunk_title_intro{
|
|
font-size: 1.6rem;
|
|
font-weight: 300;
|
|
color: #535353;
|
|
// overflow: hidden;
|
|
// text-overflow: ellipsis;
|
|
// white-space: nowrap;
|
|
}
|
|
.detail_right_look_operation{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
>div{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 2rem;
|
|
i{
|
|
display: flex;
|
|
font-size: 2rem;
|
|
color: #9e9ea7;
|
|
}
|
|
span{
|
|
margin-left: calc(var(--padding) / 2);
|
|
}
|
|
}
|
|
}
|
|
.mark_loading{
|
|
position: absolute;
|
|
}
|
|
.detail_right_user{
|
|
display: flex;
|
|
width: 100%;
|
|
.detail_right_user_content{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
align-items: flex-start;
|
|
.scaleImage_chunk_title_Original{
|
|
color: #000;
|
|
background: #c9a2ff;
|
|
padding: 0 1rem;
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
}
|
|
.scaleImage_chunk_title_intro{
|
|
span{
|
|
&.active{
|
|
cursor: pointer;
|
|
color: #000;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.detail_right_user_head{
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
margin-right: var(--margin);
|
|
flex-shrink: 0;
|
|
img{
|
|
width: 7rem;
|
|
height: 7rem;
|
|
object-fit: cover;
|
|
}
|
|
|
|
}
|
|
.detail_right_user_head:hover{
|
|
|
|
}
|
|
|
|
}
|
|
.newScaleImageMobile_left{
|
|
display: flex;
|
|
width: 100%;
|
|
// position: sticky;
|
|
top: 0;
|
|
height: 55vh;
|
|
.newScaleImageMobile_content_right{
|
|
display: flex;
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
// height: var(--content-height);
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
// overflow-y: auto;
|
|
.newScaleImageMobile_content_right_img{
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: right;
|
|
overflow-y: auto;
|
|
&.newScaleImageMobile_content_right_img::-webkit-scrollbar{display: none;}
|
|
img{
|
|
max-width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
width: 100%;
|
|
}
|
|
img:last-child{
|
|
margin-right: 0;
|
|
}
|
|
|
|
}
|
|
|
|
.nav_centent{
|
|
// width: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
right: 0;
|
|
padding-top: calc(var(--content-height) / 2);
|
|
// padding-left: 10rem;
|
|
transition: all .2s;
|
|
left: 0;
|
|
width: 30%;
|
|
}
|
|
.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;
|
|
padding: .5rem 0;
|
|
background-color: #ffffff;
|
|
border: 1px solid #777777;
|
|
object-position: 50%,50%;
|
|
border-radius: calc(1rem*1.2);
|
|
cursor: pointer;
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
// padding: 1rem;
|
|
margin: 1rem;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
transition: all .1s;
|
|
&.active1{
|
|
// border: 4px solid rgb(148, 230, 255);
|
|
transform: scale(1.4) translateX(30%);
|
|
z-index: 2;
|
|
}
|
|
&.active2{
|
|
// border: 4px solid rgb(216, 255, 172);
|
|
transform: scale(1.6) translateX(60%);
|
|
z-index: 3;
|
|
}
|
|
&.active3{
|
|
// border: 4px solid rgb(148, 233, 183);
|
|
transform: scale(1.4) translateX(30%);
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.newScaleImageMobile_right{
|
|
width: 100%;
|
|
// padding-left: var(--margin);
|
|
.newScaleImageMobile_right_content{
|
|
display: flex;
|
|
flex-direction: column;
|
|
// height: var(--content-height);
|
|
.detail_left_right_item_click{
|
|
cursor: pointer;
|
|
i{
|
|
color: #9e9ea7;
|
|
}
|
|
}
|
|
.generate_item_title_left{
|
|
font-size: 2.4rem;
|
|
}
|
|
.newScaleImageMobile_right_content_type{
|
|
padding: var(--padding) 0;
|
|
margin-bottom: var(--margin);
|
|
border-bottom: .2rem solid var(--border-color);
|
|
}
|
|
.newScaleImageMobile_right_content_collection,.newScaleImageMobile_right_content_generate{
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
.newScaleImageMobile_right_content_collection{
|
|
border-bottom: .5px solid #9e9ea7;
|
|
&.newScaleImageMobile_right_content_collection::-webkit-scrollbar{display: none;}
|
|
text-align: center;
|
|
// .content_left_collection_btn{
|
|
// display: flex;
|
|
// justify-content: space-around;
|
|
// }
|
|
.started_btn{
|
|
margin-bottom: var(--margin);
|
|
&.active{
|
|
cursor: no-drop;
|
|
}
|
|
}
|
|
.content_left_collection_detail{
|
|
// height: calc(8rem + var(--padding) * 2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
.scaleImage_chunk_title{
|
|
margin-right: 1rem;
|
|
}
|
|
>div{
|
|
margin-bottom: .5rem;
|
|
}
|
|
}
|
|
.content_left_collection_content{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
.content_left_collection_content_list{
|
|
overflow-x: auto;
|
|
display: flex;
|
|
flex: 1;
|
|
width: 100%;
|
|
align-items: center;
|
|
margin-top: var(--padding);
|
|
img{
|
|
height: 30rem;
|
|
width: auto;
|
|
margin-right: var(--margin);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.newScaleImageMobile_right_content_generate{
|
|
.content_left_generate_item{
|
|
|
|
overflow: hidden;
|
|
.content_left_generate_item_title{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.generate_item_title_right{
|
|
|
|
.generate_item_title_right_img{
|
|
height: 8rem;
|
|
width: auto;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content_left_generate_describe{
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
margin-bottom: 0;
|
|
textarea{
|
|
flex: 1;
|
|
margin-top: var(--padding);
|
|
width: 100% !important;
|
|
height: 10rem !important;
|
|
border-radius: 4rem;
|
|
border: .2rem solid var(--border-color);
|
|
font-size: 1.8rem;
|
|
padding: 1rem;
|
|
color: #575757;
|
|
outline: none; /* 清除默认焦点样式 */
|
|
}
|
|
textarea:focus{
|
|
border: .2rem solid var(--border-color);
|
|
outline: none; /* 清除默认焦点样式 */
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.newScaleImageMobile_right_detail,.newScaleImageMobile_right_comment{
|
|
height: auto;
|
|
.detail_left_right_item{
|
|
margin-bottom: var(--margin);
|
|
}
|
|
|
|
.detail_left_right_item:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.newScaleImageMobile_right_comment{
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-bottom: 0;
|
|
>.scaleImage_chunk_title{
|
|
}
|
|
.newScaleImageMobile_right_comment_null,.newScaleImageMobile_right_comment_content{
|
|
flex: 1;
|
|
}
|
|
.newScaleImageMobile_right_comment_null{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// .scaleImage_chunk_title{
|
|
// font-size: 3rem;
|
|
// }
|
|
|
|
}
|
|
.newScaleImageMobile_right_comment_content{
|
|
// max-height: 60rem;
|
|
// overflow-y: auto;
|
|
.detail_left_content_item{
|
|
display: flex;
|
|
margin-bottom: var(--margin);
|
|
&.detail_left_content_item:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
.detail_left_content_item_img{
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
}
|
|
.detail_left_content_item_content{
|
|
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{
|
|
margin-right: .5rem;
|
|
color: rgba(122, 97, 220);
|
|
}
|
|
}
|
|
|
|
|
|
.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,.left_content_item_delete{
|
|
cursor: pointer;
|
|
}
|
|
.left_content_item_reply:hover{
|
|
color: #000;
|
|
}
|
|
.left_content_item_thumbs{
|
|
display: flex;
|
|
margin-left: 2rem;
|
|
i{
|
|
font-size: 2rem;
|
|
margin-right: 1rem;
|
|
display: flex;
|
|
}
|
|
}
|
|
.left_content_item_btn{
|
|
margin-left: auto;
|
|
margin-right: 1rem;
|
|
display: flex;
|
|
.left_content_item_delete{
|
|
}
|
|
.left_content_item_unfold{
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
|
|
}
|
|
.detail_left_content_item_replyContent_box{
|
|
overflow: hidden;
|
|
transition: all .3s;
|
|
&.active{
|
|
height: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
.detail_left_content_item_replyContent_box_btn{
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
div{
|
|
transition: all .3s;
|
|
}
|
|
.active{
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
.detail_left_content_item_replyContent{
|
|
margin-top: var(--padding);
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.newScaleImageMobile_right_comment_loading{
|
|
text-align: center;
|
|
>span{
|
|
height: 7rem;
|
|
width: 6rem;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
.newScaleImageMobile_right_comment_setComment{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 8rem;
|
|
justify-content: center;
|
|
position: sticky;
|
|
z-index: 2;
|
|
padding-bottom: var(--padding);
|
|
padding-top: var(--padding);
|
|
top: 0;
|
|
background: #fff;
|
|
input,.detail_left_setComment_btn{
|
|
border-radius: 1rem;
|
|
}
|
|
input{
|
|
padding-left: var(--padding);
|
|
flex: 1;
|
|
height: 100%;
|
|
width: 50%;
|
|
font-size: 2rem;
|
|
margin-right: var(--padding);
|
|
border: .2rem solid var(--border-color);
|
|
}
|
|
.detail_left_setComment_btn{
|
|
cursor: pointer;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
background: #000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
i{
|
|
color: #fff;
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.newScaleImageMobile_right_detail{
|
|
|
|
.detail_right_work_detail{
|
|
.scaleImage_chunk_title_intro{
|
|
margin-top: calc(var(--padding) / 2);
|
|
height: auto
|
|
}
|
|
}
|
|
|
|
.detail_right_date{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.detail_right_date_setUp,.detail_right_date_upData{
|
|
width: 45%;
|
|
div{
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
}
|
|
span{
|
|
font-size: 1.8rem;
|
|
}
|
|
}
|
|
}
|
|
.detail_right_auther{
|
|
.detail_right_auther_img{
|
|
width: 100%;
|
|
display: flex;
|
|
margin-top: var(--padding);
|
|
|
|
.detail_right_auther_img_item{
|
|
text-align: center;
|
|
width: var(--auther_wh);
|
|
height: var(--auther_wh);
|
|
flex-shrink: 1;
|
|
margin-right: calc(var(--padding) / 2);
|
|
// margin-right: var(--padding);
|
|
border-radius: var(--padding);
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
img{
|
|
height: 100%;
|
|
max-width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
.detail_right_auther_img_end{
|
|
margin: 0;
|
|
line-height: var(--auther_wh);
|
|
text-align: center;
|
|
background: #e2e2e2;
|
|
font-size: 1.8rem;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |