469 lines
13 KiB
Vue
469 lines
13 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" :disabled="selectTagList.length > 0" v-model="subPublishDate.portfolioName">
|
|
<!-- <div class="publidh_content_item_tag">
|
|
<a-tag closable color="purple">#RCAworkshop_2024</a-tag>
|
|
</div> -->
|
|
</div>
|
|
<div class="publidh_right_name publidh_content_item">
|
|
<div class="publidh_content_item_title">{{$t('Publish.topic')}}</div>
|
|
<div class="publidh_content_item_tag">
|
|
<div v-for="item,index in selectTagList">
|
|
<a-tooltip v-if="index > 4" :title="+'+'+selectTagList.length - 4">
|
|
<a-tag closable color="purple" @close="handleClose(item,index)">
|
|
{{ item.tag }}
|
|
</a-tag>
|
|
</a-tooltip>
|
|
<a-tag v-else closable color="purple" @close="handleClose(item,index)">
|
|
{{ item.tag }}
|
|
</a-tag>
|
|
</div>
|
|
</div>
|
|
<div class="publidh_content_item_tagList">
|
|
<div v-for="item,index in tagList" @click="pushTag(item,index)">
|
|
<a-tag color="purple">{{ item.tag }}</a-tag>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="publidh_right_name publidh_content_item">
|
|
<div class="publidh_content_item_title">{{$t('Publish.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">{{$t('Publish.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">{{$t('Publish.PermissionsItem1')}}</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">
|
|
<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="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([{tag:'RCAworkshop_2024'}])
|
|
let selectTagList:any = ref([])
|
|
// 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:'',
|
|
// isAllowLikes:true,
|
|
}
|
|
}
|
|
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.subPublishDate = {}
|
|
selectTagList.value = []
|
|
}
|
|
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))
|
|
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 handleClose = (tag:any,index:number)=>{
|
|
let selectTag = selectTagList.value.splice(index,1)[0]
|
|
tagList.value.push(selectTag)
|
|
}
|
|
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.portfolioName = 'AiDA x RCA workshop'
|
|
}
|
|
}
|
|
return {
|
|
publish,
|
|
publishMask,
|
|
...toRefs(publishData),
|
|
// textarea,
|
|
// setCopy,
|
|
tagList,
|
|
selectTagList,
|
|
init,
|
|
setPermissionsItem,
|
|
setPermissions,
|
|
// download,
|
|
// setScaleImageIndex,
|
|
// LikeFile,
|
|
setCover,
|
|
cancelDsign,
|
|
setPublish,
|
|
handleClose,
|
|
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%;
|
|
|
|
}
|
|
:deep(.ant-tag){
|
|
// position: absolute;
|
|
// left: 10px;
|
|
// top: 50%;
|
|
// transform: translateY(-50%);
|
|
}
|
|
// .publidh_content_item_tag{
|
|
// position: relative;
|
|
// .ant-tag{
|
|
// position: absolute;
|
|
// left: 10px;
|
|
// top: 50%;
|
|
// transform: translateY(-50%);
|
|
// }
|
|
// }
|
|
.publish_content_bottom{
|
|
--border-color: #c4c4c4;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
height: calc(100% - 10rem);
|
|
.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_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_content_item_tag{
|
|
border: .2rem solid var(--border-color);
|
|
// height: 4rem;
|
|
padding: 2rem;
|
|
padding-right: 0rem;
|
|
.ant-tag{
|
|
cursor: pointer;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
}
|
|
.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> |