fix
This commit is contained in:
X1627315083
362
src/component/LibraryPage/createBrand.vue
Normal file
362
src/component/LibraryPage/createBrand.vue
Normal file
@@ -0,0 +1,362 @@
|
||||
<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 Slogen <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 the name, logo, and slogan you want to generate'"></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">
|
||||
<i class="fi fi-br-loading"></i>
|
||||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user