389 lines
10 KiB
Vue
389 lines
10 KiB
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="100%" height="100%" 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>{{ $t('brandDNA.Addbrand') }}</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="left">
|
|
<div class="item">
|
|
<div class="text">{{ $t('brandDNA.BrandName') }} <span style="color: red;">*</span></div>
|
|
<input type="text" v-model="brandName">
|
|
</div>
|
|
<div class="item">
|
|
<div class="text">{{ $t('brandDNA.BrandSlogan') }} <span style="color: red;">*</span></div>
|
|
<input type="text" v-model="brandSlogan">
|
|
</div>
|
|
<div class="item">
|
|
<div class="text">{{ $t('brandDNA.BrandLogo') }} <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 + '/aida/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">{{ $t('brandDNA.BrandTextarea') }}</div>
|
|
<textarea v-model="generateText" :placeholder="$t('brandDNA.textarea')"></textarea>
|
|
</div>
|
|
<div class="btn">
|
|
<div class="gallery_btn" style="width: 13rem;" v-show="!isGenerateLoad" @click="generate">{{ $t('brandDNA.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;">{{ $t('Habit.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;
|
|
data.brandName = ''
|
|
data.brandSlogan = ''
|
|
data.generateText = ''
|
|
data.uploadList = []
|
|
}
|
|
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> |