422 lines
12 KiB
Vue
422 lines
12 KiB
Vue
<template>
|
|
<a-modal
|
|
class="publish_modal generalModel"
|
|
v-model:visible="publish"
|
|
:footer="null"
|
|
width="50%"
|
|
:maskClosable="false"
|
|
:centered="true"
|
|
:closable="false"
|
|
:mask="publishMask"
|
|
:keyboard="false"
|
|
:destroyOnClose="true"
|
|
>
|
|
<div class="generalModel_btn">
|
|
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
|
<i class="fi fi-rr-cross-small"></i>
|
|
</div>
|
|
</div>
|
|
<div class="publish_content">
|
|
<div class="modal_title_text">
|
|
<div>{{$t('Publish.Publish')}}</div>
|
|
<div class="modal_title_text_intro"></div>
|
|
</div>
|
|
<div class="publish_content_bottom">
|
|
<div class="publidh_left">
|
|
<div class="publidh_content_item">
|
|
<div class="publidh_content_item_title">{{$t('Publish.CoverPicture')}}</div>
|
|
<div class="publish_content_shrink publish_content_item">
|
|
<img v-lazy="selectDate.url" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="publidh_right">
|
|
<div class="publidh_right_name publidh_content_item">
|
|
<div class="publidh_content_item_title">{{$t('Publish.CollectionTitle')}}</div>
|
|
<input type="text" v-model="subPublishDate.portfolioName">
|
|
</div>
|
|
<div class="publidh_right_name publidh_content_item">
|
|
<div class="publidh_content_item_title">{{$t('Publish.Description')}}</div>
|
|
<textarea @input="textareaChange()" ref="textarea" v-model="subPublishDate.portfolioDes"></textarea>
|
|
</div>
|
|
<div class="publidh_content_item_tagList">
|
|
<div v-for="item,index in tagList" @click="pushTag(item,index)">
|
|
<a-tag color="purple" :title="item.title">{{ item.tagName }}</a-tag>
|
|
</div>
|
|
</div>
|
|
<div class="publidh_right_detail publidh_content_item">
|
|
<div class="publidh_content_item_title">{{$t('Publish.Permissions')}}</div>
|
|
<div>
|
|
<a-checkbox @change="setPermissionsItem()" v-model:checked="selectPermissions.isSecondaryCreation">{{$t('Publish.PermissionsItem1')}}</a-checkbox>
|
|
</div>
|
|
</div>
|
|
<div class="publidh_content_item publidh_right_zhuyi">
|
|
</div>
|
|
<div class="publidh_right_btn">
|
|
<div class="started_btn" @click="cancelDsign">{{$t('Publish.Close')}}</div>
|
|
<div class="started_btn" @click="setPublish">{{beenPublished == 0?$t('Publish.Publish'):$t('Publish.UpdatePublish')}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mark_loading" v-show="isShowMark">
|
|
<a-spin size="large" />
|
|
</div>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent,watch,createVNode, inject, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
|
|
// import { getCookie } from "@/tool/cookie";
|
|
import { Https } from "@/tool/https";
|
|
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,base64ToFile } from "@/tool/util";
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useStore } from "vuex";
|
|
|
|
export default defineComponent({
|
|
setup(prop,{emit}) {
|
|
let {t} = useI18n()
|
|
const store = useStore();
|
|
let publish: any = ref(false);//弹窗
|
|
let publishMask:any = ref(false)//弹窗遮罩
|
|
let setBeenPublished:any = inject('setBeenPublished')
|
|
let publishData:any = reactive({
|
|
publishName:'',
|
|
loadingShow:false,
|
|
publishMarginTop:0,
|
|
beenPublished:inject('beenPublished'),//history回来时候表示是否已经发布0为没发布
|
|
publishList:[],
|
|
publishIndex:0,//当前图片索引
|
|
isShowMark:false,
|
|
setPermissionsAll:true,
|
|
selectDate:{
|
|
url:'',
|
|
},
|
|
subPublishDate:{
|
|
},
|
|
selectPermissions:{
|
|
isAllowComment:true,
|
|
isDisplayArea:true,
|
|
isSecondaryCreation:true,
|
|
}
|
|
})
|
|
let tagList = ref([{tagId:1,tagName:'#RCAworkshop_2024 ',title:'The process is simple: use AiDA to post your design work on the "Gallery ", and the one with the most likes(at least 20 likes) will be invited to the AiDA Workshop offline event in Hong Kong on November 14th, to exchange ideas with the Royal College of Art (RCA), Jae Lim, co-founder of the renowned fashion brand BESFXXK, and outstanding designers! '}])
|
|
// let textarea: any = ref(null)
|
|
// let setCopy = ()=>{
|
|
// textarea.value.select()
|
|
// document.execCommand("copy");
|
|
// }
|
|
let init = (data:any)=>{
|
|
let userInfo:any = getCookie("userInfo")
|
|
// console.log(data);
|
|
publish.value = true
|
|
publishData.selectDate.url = data.imgUrl
|
|
publishData.subPublishDate = {
|
|
userLikeGroupId : data.userlikeGroupId,
|
|
// userLikeGroupId : data.id,
|
|
coverId : '',
|
|
// coverId : data.groupDetails[0].designOutfitId,
|
|
accountId : JSON.parse(userInfo).userId,
|
|
createDate:'',
|
|
idDeleted:'',
|
|
id:'',
|
|
portfolioDes:'',
|
|
portfolioName:'',
|
|
portfolioType:'History',
|
|
status:'',
|
|
updateDate:'',
|
|
collectionId:'',
|
|
tagsDTO:[],
|
|
// isAllowLikes:true,
|
|
}
|
|
}
|
|
let setCover = (item:any)=>{
|
|
publishData.subPublishDate.coverId = item.designOutfitId
|
|
publishData.selectDate.url = item.url
|
|
|
|
}
|
|
let extractHashtags = (text:any)=>{
|
|
// const regex = /#\S+\s{2}/g;
|
|
const regex = /#\S+\s/g;
|
|
// 使用match方法提取匹配的字符串
|
|
const matches = text.match(regex);
|
|
// 处理提取结果，去掉空格并返回
|
|
return matches ? matches.map((match:any) => match.trim()) : [];
|
|
}
|
|
let textareaChange = ()=>{
|
|
let tagListArr = extractHashtags(publishData.subPublishDate.portfolioDes)
|
|
let tagsDTO:any = []
|
|
tagListArr.forEach((item:any) => {
|
|
const index = tagList.value.findIndex((obj:any) => obj.tagName === item);
|
|
if(index>-1){
|
|
let obj = {
|
|
tagName:tagList.value[index],
|
|
tagId:tagList.value[index].tagId
|
|
}
|
|
tagsDTO.push(tagList.value[index])
|
|
}else{
|
|
tagsDTO.push({tagName:item})
|
|
}
|
|
});
|
|
publishData.subPublishDate.tagsDTO = tagsDTO
|
|
}
|
|
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.subPublishDate = {}
|
|
}
|
|
let cancelDsign = ()=>{
|
|
Modal.confirm({
|
|
title: t('Publish.jsContent1'),
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
centered:true,
|
|
onOk() {
|
|
cleardata()
|
|
}
|
|
});
|
|
}
|
|
let setPublish= ()=>{
|
|
if(!publishData.subPublishDate.portfolioName){
|
|
return message.info(t('Publish.jsContent2'))
|
|
}
|
|
// if(!publishData.subPublishDate.portfolioDes){
|
|
// return message.info('Please enter a description')
|
|
// }
|
|
Modal.confirm({
|
|
title: t('Publish.jsContent3'),
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
centered:true,
|
|
onOk() {
|
|
subPublish()
|
|
}
|
|
});
|
|
}
|
|
let subPublish = ()=>{
|
|
|
|
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))
|
|
param.append('tagsDTO',JSON.stringify(publishData.subPublishDate.tagsDTO))
|
|
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
|
// let data = publishData.subPublishDate
|
|
publishData.isShowMark = true
|
|
Https.axiosPost(Https.httpUrls.publish, param,config)
|
|
.then((rv) => {
|
|
cleardata()
|
|
publishData.isShowMark = false
|
|
emit('setPublish')
|
|
message.success(t('Publish.jsContent4'))
|
|
setBeenPublished()
|
|
})
|
|
.catch((rv) => {
|
|
publishData.isShowMark = false
|
|
|
|
});
|
|
}
|
|
let pushTag = (tag:any,index:number)=>{
|
|
// let selectTag = tagList.value.splice(index,1)[0]
|
|
// selectTagList.value.push(selectTag)
|
|
// if(tag.tag == 'RCAworkshop_2024'){
|
|
// publishData.subPublishDate.portfolioDes = '#AiDA x RCA workshop '
|
|
// }
|
|
publishData.subPublishDate.portfolioDes = publishData.subPublishDate.portfolioDes+tag.tagName
|
|
textareaChange()
|
|
}
|
|
return {
|
|
publish,
|
|
publishMask,
|
|
...toRefs(publishData),
|
|
tagList,
|
|
// textarea,
|
|
// setCopy,
|
|
init,
|
|
textareaChange,
|
|
setPermissionsItem,
|
|
setPermissions,
|
|
// download,
|
|
// setScaleImageIndex,
|
|
// LikeFile,
|
|
setCover,
|
|
cancelDsign,
|
|
setPublish,
|
|
pushTag,
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
// moodTemplateId: "", //模板id
|
|
|
|
};
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.publish_modal {
|
|
.publish_page{
|
|
overflow-y: auto;
|
|
height: 100%;
|
|
&.publish_page::-webkit-scrollbar{display: none;}
|
|
}
|
|
.publish_content{
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
.publish_content_bottom{
|
|
--border-color: #c4c4c4;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
height: calc(100% - 10rem);
|
|
.publidh_content_item_tagList,.publidh_content_item_tag{
|
|
// height: 4rem;
|
|
border-radius: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.publidh_content_item_tagList{
|
|
margin-top: 1rem;
|
|
.ant-tag{
|
|
cursor: pointer;
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
.publidh_left,.publidh_right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.publidh_content_item{
|
|
margin-bottom: 2rem;
|
|
.publidh_content_item_title{
|
|
font-weight: 600;
|
|
font-size: 1.8rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.publidh_content_item_intro{
|
|
font-size: 1.4rem;
|
|
}
|
|
input{
|
|
width: 100%;
|
|
border-radius: 1rem;
|
|
height: 4rem;
|
|
padding-left: 2rem;
|
|
font-size: 2rem;
|
|
border: .2rem solid var(--border-color);
|
|
}
|
|
textarea{
|
|
flex: 1;
|
|
margin-top: var(--padding);
|
|
width: 100% !important;
|
|
height: 10rem !important;
|
|
border-radius: 1rem;
|
|
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; /* 清除默认焦点样式 */
|
|
}
|
|
}
|
|
.publidh_content_item:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
.publidh_left{
|
|
width: 45%;
|
|
.publidh_content_item{
|
|
height: 100%;
|
|
}
|
|
.publish_content_shrink{
|
|
width: 100%;
|
|
height: calc(100% - 4rem);
|
|
img{
|
|
width: 100%;
|
|
object-fit: contain;
|
|
// object-fit: cover;
|
|
// max-height: 30rem;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
.publidh_left_thubnai{
|
|
flex: 1;
|
|
.publidh_left_thubnail_list{
|
|
display: flex;
|
|
overflow-x: auto;
|
|
height: 24rem;
|
|
img{
|
|
cursor: pointer;
|
|
height: 100%;
|
|
margin-right: 1rem;
|
|
}
|
|
img:last-child{
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.publidh_right{
|
|
width: 45%;
|
|
.publidh_right_zhuyi{
|
|
margin-top: auto;
|
|
}
|
|
.publidh_right_btn{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
>div:nth-child(1){
|
|
margin-right: auto;
|
|
}
|
|
>div:nth-child(2){
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
.publidh_right_detail{
|
|
display: flex;
|
|
flex-direction: column;
|
|
label{
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |