371 lines
11 KiB
Vue
371 lines
11 KiB
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="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" 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-lazy="'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center'" alt="">
|
||
|
|
<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
|
||
|
|
<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
|
||
|
|
<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
|
||
|
|
<img v-lazy="'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542'" alt="">
|
||
|
|
<img v-lazy="'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center'" alt="">
|
||
|
|
<img v-lazy="'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center'" 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">
|
||
|
|
</div>
|
||
|
|
<div class="publidh_right_name publidh_content_item">
|
||
|
|
<div class="publidh_content_item_title">Description</div>
|
||
|
|
<textarea ref="textarea"></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_right_name publidh_content_item">
|
||
|
|
<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>
|
||
|
|
</a-modal>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
|
||
|
|
// import { Https } from "@/tool/https";
|
||
|
|
// import { getCookie } 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 publishDate:any = reactive({
|
||
|
|
publishName:'123123',
|
||
|
|
loadingShow:false,
|
||
|
|
publishMarginTop:0,
|
||
|
|
publishList:[],
|
||
|
|
publishIndex:0,//当前图片索引
|
||
|
|
})
|
||
|
|
// let textarea: any = ref(null)
|
||
|
|
// let setCopy = ()=>{
|
||
|
|
// textarea.value.select()
|
||
|
|
// document.execCommand("copy");
|
||
|
|
// }
|
||
|
|
let init = ()=>{
|
||
|
|
console.log(213123);
|
||
|
|
publish.value = true
|
||
|
|
// publishDate.publishList = list
|
||
|
|
// publishDate.publishIndex = index
|
||
|
|
// let publishList = this.store.state.UploadFilesModule.moodboard
|
||
|
|
}
|
||
|
|
// let download = ()=>{
|
||
|
|
// downloadIamge(publishDate.publishList[publishDate.publishIndex].imgUrl)
|
||
|
|
// }
|
||
|
|
// let setScaleImageIndex = (index:any)=>{
|
||
|
|
// publishDate.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 confrimRename = ()=>{
|
||
|
|
|
||
|
|
}
|
||
|
|
let cleardate = ()=>{
|
||
|
|
publish.value = false
|
||
|
|
}
|
||
|
|
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() {
|
||
|
|
cleardate()
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
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() {
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
publish,
|
||
|
|
publishMask,
|
||
|
|
...toRefs(publishDate),
|
||
|
|
// textarea,
|
||
|
|
// setCopy,
|
||
|
|
init,
|
||
|
|
// download,
|
||
|
|
// setScaleImageIndex,
|
||
|
|
// LikeFile,
|
||
|
|
confrimRename,
|
||
|
|
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{
|
||
|
|
height: 100%;
|
||
|
|
margin-right: 1rem;
|
||
|
|
}
|
||
|
|
img:last-child{
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.publidh_right{
|
||
|
|
width: 45%;
|
||
|
|
.publidh_right_btn{
|
||
|
|
margin-top: auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-end;
|
||
|
|
>div:nth-child(1){
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
>div:nth-child(2){
|
||
|
|
margin-right: 1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|