aida_front/src/component/WorksPage/publish.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 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 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 = {}
		}
		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

				});
		}

        return {
            publish,
			publishMask,
			...toRefs(publishData),
			// textarea,
			// setCopy,
			init,
			setPermissionsItem,
			setPermissions,
			// download,
			// setScaleImageIndex,
			// LikeFile,
			setCover,
			cancelDsign,
			setPublish,
        };
    },
    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_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>