aida_front/src/component/LibraryPage/createBrand.vue

<template>
	<div class="createBrand" ref="createBrand">
		<a-modal class="generalModel" 
            v-model:visible="showLoadsBrandDNA" 
            :footer="null" 
            width="98rem"
			height="65rem"
            :maskClosable="false"
			:mask="false"
            :centered="true"
			:closable="false"
			:get-container="() => $refs.createBrand"
			wrapClassName="#app"
			:keyboard="false"
        >
			<div class="generalModel_btn">
				<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
					<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="black"/>
						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="black"/>
					</svg>
				</div>
			</div>
			<div class="modal_title_text">
				<div>Add brand</div>
			</div>
			<div class="content">
				<div class="left">
					<div class="item">
						<div class="text">Brand Name <span style="color: red;">*</span></div>
						<input type="text" v-model="brandName">
					</div>
					<div class="item">
						<div class="text">Brand Slogan <span style="color: red;">*</span></div>
						<input type="text" v-model="brandSlogan">
					</div>
					<div class="item">
						<div class="text">Brand Logo <span style="color: red;">*</span></div>
						<div class="imgItemBox">
							<div class="imgItem" v-for="(item,index) in uploadList" :key="index">
								<img :src="item.url" alt="">
								<span class="icon iconfont icon-shanchu" @click.stop="deleteFile(index)"></span>
							</div>
							<div class="upload_item" v-show="uploadList.length < 1">
								<div class="upload_file_item upload_component">
									<a-upload
										:action="uploadUrl + '/api/history/brandLogoUpload'"
										list-type="picture-card"
										:capture="null"
										:headers="{ Authorization: token }"
										v-model:file-list="uploadList"
										:before-upload="beforeUpload"
										:maxCount="8"
										accept=".jpg,.png,.jpeg,.bmp"
										@change="(file) => upFileUploadChange(file)"
									>
										<div
											class="upload_tip_block"
										>
											<i class="fi fi-br-upload"></i>
											<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
										</div>
									</a-upload>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="or">
					<div class="text">or</div>
				</div>
				<div class="right">
					<div class="item">
						<div class="text">Brand Name </div>
						<textarea v-model="generateText" :placeholder="'Please enter your thoughts about this brand, and we will help you generate the name, logo, and slogan.'"></textarea>
					</div>
					<div class="btn">
						<div class="gallery_btn" style="width: 13rem;" v-show="!isGenerateLoad" @click="generate">Generate</div>
						<div class="gallery_btn" style="width: 13rem;" v-show="isGenerateLoad">					
							<span class="fi fi-br-loading"></span>
						</div>
					</div>
				</div>
			</div>
			<div style="width: 100%; display: flex;">
				<div class="gallery_btn" @click="submitAddBrand" style="width: 13rem; margin-left: auto;">OK</div>
			</div>
			<div class="mark_loading" v-show="isShowMark">
				<a-spin size="large" />
			</div>
		</a-modal>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { getCookie } from "@/tool/cookie";
import { Modal,message } from 'ant-design-vue';
import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'

export default defineComponent({
	components:{
	},
	props:{
	},
	emits:['submitBrandAdd'],
	setup(props,{emit}) {
		const {t} = useI18n()
		const store = useStore();
		const data = reactive({
			uploadList:[] as any,
			uploadUrl:getUploadUrl(),
			token:getCookie("token"),
			showLoadsBrandDNA:false,
			brandName:'',
			brandSlogan:'',
			isShowMark:false,
			generateText:'',
			isGenerateLoad:false,
		})
		const dataDom = reactive({
		})
		const cancelDsign = ()=>{
			data.showLoadsBrandDNA = false;
		}
		const upFileUploadChange = (value:any)=>{
            let file = value.file;
			let bor = true
            if (file.status === "done") {
                let res = JSON.parse(file.xhr.response);
				if(res.errCode == 0){
					file.url = res.data.minioUrl;
					file.minioUrl = res.data.brandLogo;
					let fileList = data.uploadList.filter(
						(v:any) => v.status === "done"
					);
					data.uploadList = fileList
				}else{
					bor = false
				}
            } else if (file.status === "error") {
				bor = false
            }
			if(!bor){
                let res = JSON.parse(file.xhr.response);
				let index = -1;
                data.uploadList.forEach((ele:any, index1:any) => {
                    if (file.uid === ele.uid) {
                        index = index1;
                    }
                });
                if (index > -1) {
                    data.uploadList.splice(index, 1);
                }
                message.warning(res.errMsg);
			}
			
        }
		let beforeUpload=(file:any,fileList:any)=>{
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
            if (!isJpgOrPng) {
                message.info(t('PrintboardUpload.jsContent1'));
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
                message.info(t('PrintboardUpload.jsContent2'));
            }
        }
		const submitAddBrand = ()=>{
			if(!data.brandName || !data.brandSlogan || !data.uploadList?.[0]?.minioUrl){
                message.info(t('PrintboardUpload.jsContent7'));
				return
			}
			data.isShowMark = true
			let value = {
				"brandLogo": data.uploadList?.[0]?.minioUrl,
				"brandName": data.brandName,
				"brandSlogan": data.brandSlogan,
			}
			Https.axiosPost(Https.httpUrls.brandDNASaveOrUpdate,value).then((res:any)=>{
				data.isShowMark = false
				cancelDsign()
				emit('submitBrandAdd')
			}).catch((err:any)=>{
				// console.log(err)
				data.isShowMark = false
			})
		}
		const openAddBrand = ()=>{
			data.showLoadsBrandDNA = true;
			data.brandName = '';
			data.brandSlogan = '';
			data.uploadList = [];
		}
		const deleteFile = (index:number)=>{
			data.uploadList.splice(index,1)
		}
		const generate = ()=>{
			if(!data.generateText){
                message.info(t('PrintboardUpload.jsContent6'));
				return
			}
			let value = {
				prompt:data.generateText
			}
			data.isGenerateLoad = true
			Https.axiosPost(Https.httpUrls.brandDNAGenerate,{},{params:value}).then((res:any)=>{
				console.log(res)
				data.brandName = res.brandName;
				data.brandSlogan = res.brandSlogan;
				data.uploadList = [{minioUrl:res.brandLogo,url:res.minioUrl}];
				data.isGenerateLoad = false
			}).catch((err:any)=>{
				data.isGenerateLoad = false	
			})
		}
		return{
			...toRefs(dataDom),
			...toRefs(data),
			cancelDsign,
			upFileUploadChange,
			beforeUpload,
			submitAddBrand,
			deleteFile,
			openAddBrand,
			generate,
		}
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	.createBrand{
		width: 100%;
		height: 100%;
		position: relative;
		:deep(.generalModel){
			.content{
				display: flex;
				> .left,>.right{
					flex-shrink: 0;
					> .item{
						font-size: 1.8rem;
						font-weight: 600;
						> .text{
							margin-bottom: 1rem;
						}
					}
				}
				> .left{
					width: 32rem;
					padding-right: 2rem;
					> .item{
						margin-bottom: 2rem;
						&:last-child{
							margin-bottom: 0;	
						}
						> input{
							width: 100%;
							border: 2px solid #000;
							border-radius: 4rem;
							padding: 1.5rem 2rem;

						}
						> .imgItemBox{
							height: 10rem;
							> .imgItem{
								width: 10rem;
								height: 10rem;
								position: relative;
								border-radius: 50%;
								overflow: hidden;
								img{
									width: 100%;
									height: 100%;
									object-fit: contain;
								}
								> .icon{
									position: absolute;
									right: 2rem;
									top: 2rem;
									display: none;
									cursor: pointer;
								}
								&:hover{
									> .icon{
										display: block;
									}
								}
							}
							> .upload_item{
								width: 10rem;
								height: 10rem;
								align-items: center;
								justify-content: center;
							}
						}
						
					}
				}
				> .or{
					flex: 1;
					color: #eaeaea;
					position: relative;
					font-size: 1.8rem;
					> .text{
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
					}
					&::after,
					&::before{
						content: '';
						display: block;
						width: 1px;
						height: 45%;
						left: 50%;
						transform: translateX(-50%);
						position: absolute;
						background: #eaeaea;
					}
					&::after{
						top: 0;
					}
					&::before{
						bottom: 0;
					}
				}
				> .right{
					width: 47rem;
					padding-left: 2rem;
					> .item{
						> textarea{
							resize: none;
							width: 100%;
							border: 2px solid #000;
							padding: 1.5rem 2rem;
							border-radius: 2rem;
							height: 17rem;
						}
					}
					> .btn{
						display: flex;
						width: 100%;
						> .gallery_btn{
							margin-left: auto;
							width: 13rem;
							height: 6rem;
							display: flex;
							justify-content: center;
							align-items: center;
							> span{
								display: flex;
								text-align: center;
								line-height: 6rem;
								animation: whirl 1s infinite linear;
								@keyframes whirl {
									0%{
										transform: rotate(0deg);
									}
									50%{
										transform: rotate(180deg);
									}
									100%{
										transform: rotate(360deg);
									}
								}

							}
						}
					}
					
				}
			}
		}
	}
</style>