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-06-21 10:30:09 +08:00
parent dc93403506
commit 8b0af784de
20 changed files with 476 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -36,7 +36,7 @@
<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：{{ scaleImageData?.portfolioType=='History'? 'collection' : 'generate' }}</div>
<div class="generate_item_title_left scaleImage_chunk_title">{{$t('newScaleImage.Type')}}：{{ scaleImageData?.portfolioType=='History'? 'Collection' : 'Printboard' }}</div>
</div>
<div v-if="true" class="newScaleImage_right_content_collection">
<div class="scaleImage_chunk_item content_left_collection_detail">
@@ -53,7 +53,7 @@
<img v-for="item in scaleImageData?.designPythonOutfitList" v-lazy="item.designUrl">
</div>
</div>
<div class="started_btn" @click="setChoose" :title="systemUser.value != 1?'请先登录或者升级为正式用户': scaleImageData.openSource == 0?'作者不允许二次创作':''" :class="{active:systemUser.value != 1?true:scaleImageData.openSource == 0}">二创</div>
<div class="started_btn" @click="setChoose" :title="systemUser.value != 1?$t('newScaleImage.jsContent1'): scaleImageData.openSource == 0?$t('newScaleImage.jsContent2'):''" :class="{active:systemUser.value != 1?true:scaleImageData.openSource == 0}">{{$t('newScaleImage.SecondaryCreation')}}</div>
</div>
<div v-else class="newScaleImage_right_content_generate">
<div class="scaleImage_chunk_item content_left_generate_item">
@@ -93,11 +93,11 @@
</div>
<div class="detail_right_date detail_left_right_item">
<div class="detail_right_date_setUp">
<div>创建时间</div>
<div>{{$t('newScaleImage.CreationTime')}}</div>
<span>{{ scaleImageData.createDate }}</span>
</div>
<div class="detail_right_date_upData">
<div>更新时间</div>
<div>{{$t('newScaleImage.UpdateTime')}}</div>
<span>{{ scaleImageData.updateDate }}</span>
</div>
</div>
@@ -145,12 +145,12 @@
</div>
</div>
<div class="newScaleImage_right_comment scaleImage_chunk_item">
<div class="scaleImage_chunk_title">Comment</div>
<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 class="scaleImage_chunk_title">{{$t('newScaleImage.Comment')}}</div>
<div v-show="commentList.length === 0" class="newScaleImage_right_comment_null">
<div class="scaleImage_chunk_title">{{$t('newScaleImage.NoComments')}}</div>
<div class="scaleImage_chunk_title">{{$t('newScaleImage.first')}}</div>
</div>
<div v-else class="newScaleImage_right_comment_content">
<div v-show="commentList.length !== 0" class="newScaleImage_right_comment_content">
<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">
@@ -158,45 +158,62 @@
<div class="detail_left_content_item_content">
<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 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 v-show="true" class="left_content_item_unfold" @click="()=>item.unfold = !item.unfold">展开</div> -->
</div>
<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="scaleImageData?.imgUrl"> -->
<div class="left_content_item_btn">
<div class="left_content_item_delete" v-if="userInfo.userName === item.userName" @click="setDelete(item)">删除</div>
<div class="left_content_item_unfold" @click="()=>item.detailUnfold = !item.detailUnfold">{{item.detailUnfold?$t('newScaleImage.Collapse'):$t('newScaleImage.unfold')}}</div>
</div>
<div class="detail_left_content_item_content">
<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>
<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 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>
回复
</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="false" class="left_content_item_unfold">展开</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="userInfo.userName === children.userName" @click="setDelete(children)">删除</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="newScaleImage_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 class="newScaleImage_right_comment_setComment" @click.stop="">
<input type="text" ref="commentInputFocus" v-model="commentText" :placeholder="commentInput">
@@ -214,16 +231,20 @@
<script lang="ts">
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 { getCookie } from "@/tool/cookie";
// import domTurnImg from '@/tool/domTurnImg'
import { useStore } from "vuex";
import { useRouter } from 'vue-router'
import { downloadIamge,setPubDate } from "@/tool/util";
import { message } from "ant-design-vue";
import { useI18n } from 'vue-i18n';
export default defineComponent({
setup() {
let {t} = useI18n()
//首先在setup中定义
console.log(getCookie('userInfo'));
let userInfo = ref({});
const store = useStore();
const router = useRouter()
let scaleImage: any = ref(false);//弹窗
@@ -248,6 +269,8 @@ export default defineComponent({
commentText:'',
commentInput:'',//评论框提示词
commentList:[],
isNoData:false,
isShowMark:false,
})
let systemUser = computed(()=>{
return store.state.UserHabit.systemUser
@@ -271,6 +294,8 @@ export default defineComponent({
imgData.scaleImageData = {}
imgData.commentText = ''
imgData.scaleImageList = []
imgData.getCommentData.page = 1
imgData.getCommentData.size = 10
document.removeEventListener('click',removeCommentReply)
}
let download = ()=>{
@@ -309,7 +334,22 @@ export default defineComponent({
if(str == 'zan'){
}else{
getCommentPage()
getCommentPage('')
nextTick(()=>{
let imgParent:any = document.querySelector('.newScaleImage_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
@@ -319,13 +359,11 @@ export default defineComponent({
let setChoose = () =>{
if(systemUser.value.value !== 1){
return message.info('请先登录或者升级为正式用户')
return message.info(t('newScaleImage.jsContent1'))
}
if(imgData.scaleImageData.openSource == 0){
return message.info('作者不允许二次创作哦')
return message.info(t('newScaleImage.jsContent2'))
}
console.log(imgData.scaleImageData);
router.push({name:'homePage',params: {id:imgData.scaleImageData.id,type:'Works'}})
// router.push({name:'homePage',params: {id:imgData.scaleImageData.userLikeGroupSourceId,type:'Works'}})
}
@@ -337,14 +375,14 @@ export default defineComponent({
imgData.commentReply.leve2Id = value.id
}
imgData.commentReply.name = value.userName
imgData.commentInput = `回复${imgData.commentReply.name}的评论`
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 = '请输入评论内容'
imgData.commentInput = t('newScaleImage.jsContent3')
}
let setComment = ()=>{
let data = {
@@ -360,17 +398,21 @@ export default defineComponent({
Https.axiosPost(Https.httpUrls.portfolioComment, data)
.then((rv) => {
imgData.commentText = ''
getCommentPage()
getCommentPage('comment')
})
.catch((rv) => {
});
}
let getCommentPage = ()=>{
let getCommentPage = (str:any)=>{
let data = imgData.getCommentData
imgData.isShowMark = true
Https.axiosPost(Https.httpUrls.portfolioCommentPage,data).then(
(rv: any) => {
imgData.commentList = rv.content
imgData.commentList.forEach((item:any)=>{
if(rv.content.length == imgData.commentList.length&&str != 'comment'){
imgData.isNoData = true
return
}
rv.content.forEach((item:any)=>{
item.createTimes = setPubDate(item.createTime)
if (item.childCommentVOList) {
item.childCommentVOList.forEach((obj:any)=>{
@@ -378,8 +420,13 @@ export default defineComponent({
})
}
})
// imgData.commentList.push(...rv.content)
imgData.commentList = rv.content
imgData.isShowMark = false
}
).catch((res)=>{
imgData.isShowMark = false
}
)
}
@@ -398,6 +445,9 @@ export default defineComponent({
})
.catch((rv) => {
});
}
let setDelete = (value:any)=>{
}
watch(()=>imgData.scaleImageIndex,
(newVal,oldVal)=>{
@@ -407,7 +457,12 @@ export default defineComponent({
imgData.scaleImageMarginTop = `${contentItemHeight*-(newVal) - contentItemHeight/2}rem`
}
)
onMounted(()=>{
let user:any = getCookie('userInfo')
userInfo = JSON.parse(user)
})
return {
userInfo,
scaleImage,
scaleImageMask,
...toRefs(imgData),
@@ -424,9 +479,25 @@ export default defineComponent({
setCommentReply,
setComment,
setPortfolioLike,
setDelete,
};
},
directives:{
commentUnfold:{
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])
if(commentDomSon.offsetHeight > maxHeight){
commentBtn.style.display = 'block'
}else if(!binding.value.detailUnfold){
commentBtn.style.display = 'none'
}
}
},
mousewheel:{
mounted (el,binding:any) {
// let contentHeight = Number(getComputedStyle(el).getPropertyValue('--content-height').split('rem')[0]);
@@ -504,11 +575,17 @@ export default defineComponent({
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;
&.active{
max-height: max-content;
}
}
.scaleImage_chunk_title_comment{
font-size: 1.6rem;
@@ -754,6 +831,7 @@ export default defineComponent({
.newScaleImage_right_comment{
display: flex;
flex-direction: column;
padding-bottom: 0;
>.scaleImage_chunk_title{
text-align: center;
}
@@ -771,8 +849,8 @@ export default defineComponent({
}
.newScaleImage_right_comment_content{
max-height: 60rem;
overflow-y: auto;
// max-height: 60rem;
// overflow-y: auto;
.detail_left_content_item{
display: flex;
margin-bottom: var(--margin);
@@ -812,7 +890,7 @@ export default defineComponent({
display: flex;
align-items: center;
margin-top: 1rem;
.left_content_item_reply,.left_content_item_thumbs,.left_content_item_unfold{
.left_content_item_reply,.left_content_item_thumbs,.left_content_item_unfold,.left_content_item_delete{
cursor: pointer;
}
.left_content_item_reply:hover{
@@ -827,9 +905,36 @@ export default defineComponent({
display: flex;
}
}
.left_content_item_unfold{
.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{
@@ -839,12 +944,27 @@ export default defineComponent({
}
}
}
.newScaleImage_right_comment_loading{
text-align: center;
>span{
height: 7rem;
width: 6rem;
display: block;
margin: 0 auto;
}
}
.newScaleImage_right_comment_setComment{
display: flex;
align-items: center;
height: 4rem;
height: 8rem;
justify-content: center;
margin-top: var(--padding);
margin-top: 5rem;
position: sticky;
z-index: 2;
padding-bottom: var(--padding);
padding-top: var(--padding);
bottom: 0;
background: #f5f5f5;
input,.detail_left_setComment_btn{
border-radius: 1rem;
}