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-26 17:26:31 +08:00
parent 15077d37ea
commit c661454590
43 changed files with 1494 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,7 +12,7 @@
:destroyOnClose="true"
>
<div class="generalModel_btn">
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
<div class="generalModel_closeIcon" @click.stop="cancelDsign('')">
<i class="fi fi-rr-cross-small"></i>
</div>
<!-- <div class="collection_closeIcon" @click.stop="download()">
@@ -24,7 +24,10 @@
<div class="newScaleImage_content_right">
<div class="newScaleImage_content_right_img">
<div>
<img :src="scaleImageList[scaleImageIndex]">
<img v-show="scaleImageIndex > 0" :src="scaleImageList[scaleImageIndex]">
<div v-show="scaleImageIndex == 0">
<fullScreenImg :src="scaleImageList[scaleImageIndex]" width="100%" :center="true"></fullScreenImg>
</div>
<!-- <img :src="scaleImageData?.canvasUrl"> -->
</div>
</div>
@@ -44,16 +47,58 @@
<div class="scaleImage_chunk_title_intro">
Overall
</div> -->
<div class="scaleImage_chunk_title">{{scaleImageData.portfolioName}}</div>
<div class="scaleImage_chunk_title_intro">{{scaleImageData.portfolioDes}}</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?.imgUrl">
</div> -->
<div class="detail_right_user_content">
<div class="scaleImage_chunk_title_intro">@{{scaleImageData.userName}}</div>
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div>
<div class="scaleImage_chunk_btn">关注</div> -->
</div>
</div>
<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}}</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="userInfo?.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 class="scaleImage_chunk_item content_left_collection_content" v-show="scaleImageData.openSource == 1">
<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 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 v-if="systemUser.value == 1" 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">
@@ -75,18 +120,9 @@
</div>
</div>
</div>
<div class="newScaleImage_right_detail">
<div v-if="false" class="newScaleImage_right_detail">
<div class="scaleImage_chunk_item">
<div class="detail_right_user detail_left_right_item">
<!-- <div class="detail_right_user_head">
<img v-lazy="scaleImageData?.imgUrl">
</div> -->
<div class="detail_right_user_content">
<div class="scaleImage_chunk_title">{{scaleImageData.userName}}</div>
<!-- <div class="scaleImage_chunk_title_intro">个性签名</div>
<div class="scaleImage_chunk_btn">关注</div> -->
</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> -->
@@ -101,27 +137,7 @@
<span>{{ scaleImageData.updateDate }}</span>
</div>
</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>
<!-- <div class="detail_right_auther detail_left_right_item">
<div class="scaleImage_chunk_title">Auther Other Products</div>
<div class="detail_right_auther_img">
@@ -150,8 +166,14 @@
<div class="scaleImage_chunk_title">{{$t('newScaleImage.NoComments')}}</div>
<div class="scaleImage_chunk_title">{{$t('newScaleImage.first')}}</div>
</div> -->
<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>
<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" v-for="item,index in commentList" :key="item.id">
<!-- <div class="detail_left_content_item_img">
<img v-lazy="scaleImageData?.imgUrl">
</div> -->
@@ -170,13 +192,12 @@
<span>123</span>
</div> -->
<div class="left_content_item_btn">
{{userInfo.userName }}{{item.userName}}
<div class="left_content_item_delete" v-if="userInfo.userName === item.userName" @click="setDelete(item)">删除</div>
<div class="left_content_item_delete" v-if="userInfo?.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 in item.childCommentVOList" :key="children.id">
<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>
@@ -196,7 +217,7 @@
<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_delete" v-if="userInfo?.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>
@@ -216,12 +237,7 @@
</span>
</div>
</div>
<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>
</div>
</div>
@@ -230,18 +246,22 @@
</template>
<script lang="ts">
import { defineComponent,watch,getCurrentInstance, h, ref ,toRefs,computed,reactive,triggerRef, nextTick, onMounted} from "vue";
import { defineComponent,watch,getCurrentInstance, createVNode, 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 { useStore } from "vuex";
import { useRouter } from 'vue-router'
import { downloadIamge,setPubDate } from "@/tool/util";
import { message } from "ant-design-vue";
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'
export default defineComponent({
setup() {
components:{fullScreenImg},
emits:['deletePorfolio'],
setup(props:any,{emit}) {
let {t} = useI18n()
//首先在setup中定义
let userInfo = ref({});
@@ -288,7 +308,10 @@ export default defineComponent({
document.addEventListener('click',removeCommentReply)
// let scaleImageList = this.store.state.UploadFilesModule.moodboard
}
let cancelDsign = ()=>{
let cancelDsign = (id:any)=>{
if(id){
emit('deletePorfolio',id)
}
scaleImage.value = false
imgData.scaleImageIndex = 0
imgData.scaleImageData = {}
@@ -385,6 +408,9 @@ export default defineComponent({
imgData.commentInput = t('newScaleImage.jsContent3')
}
let setComment = ()=>{
if(!imgData.commentText){
return message.info(t('LibraryPage.jsContent7'))
}
let data = {
"accountId": 0,
"comment": imgData.commentText,
@@ -398,21 +424,20 @@ export default defineComponent({
Https.axiosPost(Https.httpUrls.portfolioComment, data)
.then((rv) => {
imgData.commentText = ''
getCommentPage('comment')
getCommentPage({str:'comment',id:imgData.scaleImageData.id})
})
.catch((rv) => {
});
}
let getCommentPage = (str:any)=>{
let getCommentPage = (value:any)=>{
let data = imgData.getCommentData
imgData.isShowMark = true
Https.axiosPost(Https.httpUrls.portfolioCommentPage,data).then(
(rv: any) => {
if(rv.content.length == imgData.commentList.length&&str != 'comment'){
imgData.isNoData = true
return
}
rv.content.forEach((item:any)=>{
if(value.id == item.portfolioId){
item.unfold = true
}
item.createTimes = setPubDate(item.createTime)
if (item.childCommentVOList) {
item.childCommentVOList.forEach((obj:any)=>{
@@ -422,8 +447,10 @@ export default defineComponent({
})
// 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
@@ -453,8 +480,64 @@ export default defineComponent({
.catch((rv) => {
});
}
let setDelete = (value:any)=>{
let setDeleteComment = (value:any,index:any,childrenIndex:any)=>{
console.log(value);
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)=>{
@@ -466,7 +549,7 @@ export default defineComponent({
)
onMounted(()=>{
let user:any = getCookie('userInfo')
userInfo = JSON.parse(user)
userInfo.value = JSON.parse(user)
})
return {
userInfo,
@@ -484,9 +567,10 @@ export default defineComponent({
LikeFile,
setChoose,
setCommentReply,
deletePortfolio,
setComment,
setPortfolioLike,
setDelete,
setDeleteComment,
};
},
directives:{
@@ -590,9 +674,15 @@ export default defineComponent({
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;
@@ -612,7 +702,24 @@ export default defineComponent({
// 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);
}
}
}
.newScaleImage_left{
display: flex;
width: 60%;
@@ -643,6 +750,10 @@ export default defineComponent({
>div{
width: 100%;
height: auto;
>div{
width: 100%;
height: 100%;
}
img{
// width: auto;
max-width: 100%;
@@ -717,6 +828,12 @@ export default defineComponent({
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;
}
@@ -744,7 +861,7 @@ export default defineComponent({
}
}
.content_left_collection_detail{
height: calc(8rem + var(--padding) * 2);
// height: calc(8rem + var(--padding) * 2);
display: flex;
flex-direction: column;
align-items: flex-start;
@@ -752,6 +869,9 @@ export default defineComponent({
.scaleImage_chunk_title{
margin-right: 1rem;
}
>div{
margin-bottom: .5rem;
}
}
.content_left_collection_content{
flex: 1;
@@ -825,12 +945,7 @@ export default defineComponent({
.detail_left_right_item{
margin-bottom: var(--margin);
}
.detail_left_right_item_click{
cursor: pointer;
i{
color: #9e9ea7;
}
}
.detail_left_right_item:last-child{
margin-bottom: 0;
}
@@ -964,18 +1079,18 @@ export default defineComponent({
align-items: center;
height: 8rem;
justify-content: center;
margin-top: 3rem;
position: sticky;
z-index: 2;
padding-bottom: var(--padding);
padding-top: var(--padding);
bottom: 0;
top: 0;
background: #f5f5f5;
input,.detail_left_setComment_btn{
border-radius: 1rem;
}
input{
padding-left: var(--padding);
flex: 1;
height: 100%;
width: 50%;
font-size: 2rem;
@@ -1040,23 +1155,7 @@ export default defineComponent({
height: auto
}
}
.detail_right_look_operation{
display: flex;
justify-content: space-between;
>div{
display: flex;
align-items: center;
font-size: 2rem;
i{
display: flex;
font-size: 2rem;
color: #9e9ea7;
}
span{
margin-left: calc(var(--padding) / 2);
}
}
}
.detail_right_date{
display: flex;
justify-content: space-between;