aida_front/src/component/WorksPage/publish.vue

<template>
		<a-modal
            class="publish_modal"
            v-model:visible="publish"
            :footer="null"
            width="50%"
            :maskClosable="false"
            :centered="true"
            :closable="false"
            :mask="publishMask"
			:keyboard="false"
			:destroyOnClose="true"
        >
		<div class="publish_btn">
			<div class="collection_closeIcon" @click.stop="cancelDsign()">
				<i class="fi fi-rr-cross-small"></i>
			</div>
		</div>
		<div class="publish_content">
			<div class="modal_title_text">
				<div>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">Cover Picture</div>
						<div class="publish_content_shrink publish_content_item">
							<img v-lazy="selectDate.url" alt="">
						</div>
					</div>
					<div class="publidh_left_thubnai publidh_content_item">
						<div class="publidh_content_item_title">Select Cover Picture</div>
						<div class="publidh_left_thubnail_list publish_content_item">
							<img v-for="item in getPublishDate.groupDetails" :class="{selectActive:item.designOutfitId === subPublishDate.coverId}" v-lazy="item.url" @click="setCover(item)" alt="">
						</div>
					</div>
				</div>
				<div class="publidh_right">
					<div class="publidh_right_name publidh_content_item">
						<div class="publidh_content_item_title">Name</div>
						<input type="text" v-model="subPublishDate.portfolioName">
					</div>
					<div class="publidh_right_name publidh_content_item">
						<div class="publidh_content_item_title">Description</div>
						<textarea ref="textarea" v-model="subPublishDate.portfolioDes"></textarea>
					</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">
							<span class="icon iconfont icon-zhuyi"></span>This will publish your work to the square for all users to see.
						</div>
					</div>
					<div class="publidh_right_btn">
						<div class="started_btn" @click="setClose">Close</div>
						<div class="started_btn">Save as draft</div>
						<div class="started_btn" @click="setPublish">Publish</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, h, 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 } from "@/tool/util";

export default defineComponent({
    setup() {
        let publish: any = ref(false);//弹窗
		let publishMask:any = ref(false)//弹窗遮罩
		let publishData:any = reactive({
			publishName:'123123',
			loadingShow:false,
			publishMarginTop:0,
			publishList:[],
			publishIndex:0,//当前图片索引
			isShowMark:false,
			selectDate:{
				url:'',
			},
			getPublishDate:{
			},
			subPublishDate:{
			},
		})
		// 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);
			publishData.getPublishDate = data
			publish.value = true
			publishData.selectDate.url = data.groupDetails[0].url
			publishData.subPublishDate = {
				userLikeGroupId : data.id,
				coverId : data.groupDetails[0].designOutfitId,
				accountId : JSON.parse(userInfo).userId,
				createDate:'',
				idDeleted:'',
				id:'',
				portfolioDes:'',
				portfolioName:data.name,
				portfolioType:'History',
				status:'',
				updateDate:'',
				collectionId:'',
			}
			// publishData.publishList = list
			// publishData.publishIndex = index
			// let publishList = this.store.state.UploadFilesModule.moodboard
		}
		// let download = ()=>{
		// 	downloadIamge(publishData.publishList[publishData.publishIndex].imgUrl)
		// }
		// let setScaleImageIndex = (index:any)=>{
		// 	publishData.publishIndex = index
		// }
		// let LikeFile = (item:any,str:string)=>{
		// 	const currentInstance = getCurrentInstance();
		// 	let parent:any = currentInstance?.parent
		// 	console.log(parent);
			
		// 	parent.likeFile(item,str)
		// }
	
		// LikeFile(item:any,str:string){
		// 	let parent:any = this.$parent
		// 	parent.likeFile(item,str)
		// },
		let setCover = (item:any)=>{
		    publishData.subPublishDate.coverId = item.designOutfitId
			publishData.selectDate.url = item.url

		}
		let cleardata = ()=>{
		    publish.value = false
			publishData.isShowMark = false
			publishData.getPublishDate = {}
			publishData.subPublishDate = {}
		}
		let cancelDsign = ()=>{
			Modal.confirm({
                title: 'Your changes will be lost if you navigate away from this page. Are you sure you want to leave this page?',
                icon: createVNode(ExclamationCircleOutlined),
                okText: 'Yes',
                cancelText: 'No',
				mask:false,
                centered:true,
                onOk() {
					cleardata()
                }
            });
		}
		let setPublish= ()=>{
			let _this = this
			Modal.confirm({
                title: 'This will publish your work to the square for all users to see. Please confirm whether to publish?',
                icon: createVNode(ExclamationCircleOutlined),
                okText: 'Yes',
                cancelText: 'No',
				mask:false,
                centered:true,
                onOk() {
					subPublish()
                }
            });
		}
		let subPublish = ()=>{
			let data = publishData.subPublishDate
			publishData.isShowMark = true
			Https.axiosPost(Https.httpUrls.publish, data)
                .then((rv) => {
					console.log(rv);
					cleardata()
					publishData.isShowMark = false
                })
                .catch((rv) => {
					publishData.isShowMark = false

				});
		}

        return {
            publish,
			publishMask,
			...toRefs(publishData),
			// textarea,
			// setCopy,
			init,
			// download,
			// setScaleImageIndex,
			// LikeFile,
			setCover,
			cancelDsign,
			setPublish,
        };
    },
    data() {
        return {
            // moodTemplateId: "", //模板id
			
        };
    },
    mounted() {
    },
    methods: {
		// init(list:any,index:any,dialogueIndex:any){
			
		// },
		// cancelDsign(){
		// 	this.publish = false
		// 	// this.publishList = []
		// 	// this.publishIndex = 0
		// },
		// download(){
		// 	// downloadIamge(this.publishList[this.publishIndex].imgUrl)
		// },
		// setScaleImageIndex(index:any){
		// 	// this.publishIndex = index
		// 	// console.log(this.publishIndex);
			
		// },
		// LikeFile(item:any,str:string){
		// 	let parent:any = this.$parent
		// 	parent.likeFile(item,str)
		// },
    },
});
</script>

<style lang="less">
.publish_modal {
	-moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
	position: relative;
	border-radius: 1rem;
	overflow: hidden;
	.ant-modal-body {
        padding: 0;
		// height: calc(65vh - 6.4rem);
		height: calc(65rem*1.2);
		// background-color: #181818;
    }
	.ant-modal-btn{
		
	}
	.ant-modal-body{
		padding: calc(4rem*1.2) calc(5rem*1.2);
		
	}
	.publish_page{
		overflow-y: auto;
		height: 100%;
		&.publish_page::-webkit-scrollbar{display: none;}
	}

	.fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{
		font-size: 2rem;
	}
    .publish_btn {
		.collection_closeIcon{
			position: absolute;
			top: calc(2rem*1.2);
			right: calc(2rem*1.2);
			cursor: pointer;
			width: calc(4rem*1.2);
			height: calc(4rem*1.2);
			display: flex;
			align-items: center;
			justify-content: center;
			&.left{
				left: calc(2rem*1.2);
			}
			.fi-rr-cross-small::before{
				padding: calc(.2rem*1.2);
				border-radius: 5px;
				border: solid 2px rgba(0, 0, 0, 0.22);
				transition: .3s all;
				color: rgba(0, 0, 0, 0.7);
			}
			&.collection_closeIcon:hover .fi-rr-cross-small::before{
				border: solid 2px rgba(0, 0, 0, 5);
				color: rgba(0, 0, 0, 1);
			}
			.fi-rr-down-to-line{
				transition: .3s all;
				color: rgba(0, 0, 0, .5);
			}
			.fi-rr-down-to-line:hover{
				color: rgba(0, 0, 0, 1);
			}
		}
	}
	.publish_content{
		display: flex;
	    flex-direction: column;
		height: 100%;
	}
	.publish_content_bottom{
		--border-color: #c4c4c4;
		display: flex;
		justify-content: space-between;
		flex: 1;
		.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%;
			
			.publish_content_shrink{
				width: 100%;
				img{
					width: 100%;
					height: 100%;
					object-fit: contain;
					max-height: 30rem;
				}
			}
			.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;
				}
			}
		}
	
	}
}
</style>