fix
This commit is contained in:
X1627315083
@@ -249,6 +249,7 @@ export default defineComponent({
|
||||
showPlacementModal(data:any,sex:any){
|
||||
// this.sex = arr[0].value
|
||||
this.sex = sex
|
||||
console.log(data)
|
||||
this.placementShow = true
|
||||
this.printObject = {
|
||||
...data
|
||||
|
||||
408
src/component/LibraryPage/brandDetail.vue
Normal file
408
src/component/LibraryPage/brandDetail.vue
Normal file
@@ -0,0 +1,408 @@
|
||||
<template>
|
||||
<div class="brandDetail">
|
||||
<div class="title">
|
||||
<div @click="back" class="back">< Back</div>
|
||||
<div>
|
||||
<div class="gallery_btn" @click="compute">Compute</div>
|
||||
<div>
|
||||
<a-progress :percent="100" size="small" :showInfo="false" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="userDetail">
|
||||
<div class="logo">
|
||||
<img :src="logoUrl" alt="">
|
||||
<div class="upload_box">
|
||||
<i class="fi fi-rr-camera"></i>
|
||||
<a-upload
|
||||
class="upload"
|
||||
:capture="null"
|
||||
list-type="picture-card"
|
||||
:before-upload="beforeUpload"
|
||||
:customRequest="function(){}"
|
||||
:maxCount="1"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
>
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img :src="uploadUrl?uploadUrl:userDetail.avatar" alt=""> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="name">
|
||||
<span v-if="!isEditUserName">{{ brandName }}</span>
|
||||
<input v-else type="text" v-model="brandName">
|
||||
<i v-if="!isEditUserName" class="fi fi-rr-edit" @click="openEdit('userName')"></i>
|
||||
<i v-else class="fi fi-br-check" @click="editChek('userName')"></i>
|
||||
</div>
|
||||
<div class="slogan">
|
||||
<div>Brand slonan:</div>
|
||||
<span v-if="!isEditDescribe">{{ brandSlogan }}</span>
|
||||
<input v-else type="text" v-model="brandSlogan">
|
||||
<i v-if="!isEditDescribe" class="fi fi-rr-edit" @click="openEdit('brandSlogan')"></i>
|
||||
<i v-else class="fi fi-br-check" @click="editChek('brandSlogan')"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div style="display: flex;">
|
||||
<a-upload
|
||||
class="upload"
|
||||
:capture="null"
|
||||
:before-upload="beforeUpload"
|
||||
:customRequest="customRequest "
|
||||
:multiple="true"
|
||||
:maxCount="15"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
>
|
||||
<div class="gallery_btn">Upload</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="imgBox">
|
||||
<div class="imgItem" v-for="item,index in imgList" :key="item.id">
|
||||
<img :src="item.url" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="total">
|
||||
<a-pagination
|
||||
v-model:current="currentPage"
|
||||
v-model:pageSize="pageSize"
|
||||
:total="total"
|
||||
:showQuickJumper="true"
|
||||
:showSizeChanger="false"
|
||||
@change="changePage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" :cropperFileData="cropperFileData" :isRound="true"></Cropper>
|
||||
<!-- <loadBrandDNA ref="loadBrandDNA"></loadBrandDNA> -->
|
||||
</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 { Modal,message } from 'ant-design-vue';
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import Cropper from '@/component/HomePage/Cropper.vue'
|
||||
// import loadBrandDNA from '@/component/LibraryPage/loadBrandDNA.vue'
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
Cropper
|
||||
},
|
||||
|
||||
emits:['update:isShowMark','handleBack'],
|
||||
props: {
|
||||
isShowMark:{type:Boolean,default:false},
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
|
||||
uploadUrl:'',
|
||||
uploadFile:undefined,
|
||||
isEditUserName:false,
|
||||
isEditDescribe:false,
|
||||
brandName:'',
|
||||
brandSlogan:'',
|
||||
minioUrl:'',
|
||||
detail:{} as any,
|
||||
logoUrl:'',
|
||||
uploadList:[],
|
||||
upload:{},
|
||||
token:getCookie("token"),
|
||||
isShowMark:false,
|
||||
imgList:[],
|
||||
total:0,
|
||||
pageSize:10,
|
||||
currentPage:1,
|
||||
})
|
||||
const dataDom = reactive({
|
||||
Cropper:null as any,
|
||||
loadBrandDNA:null as any,
|
||||
})
|
||||
const customRequest = (event:any)=>{
|
||||
console.log(data.detail)
|
||||
let new_data = {
|
||||
file:event.file,
|
||||
brandId:data.detail.id,
|
||||
}
|
||||
data.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.brandDNAUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
||||
(rv: any) => {
|
||||
getLibraryList()
|
||||
data.isShowMark = false
|
||||
}
|
||||
).catch((res)=>{
|
||||
getLibraryList()
|
||||
data.isShowMark = false
|
||||
});
|
||||
}
|
||||
let fileUploadChange = (data:any)=>{
|
||||
let file = data.file
|
||||
// file.id = res.data.id?res.data.id:""
|
||||
var reader = new FileReader();
|
||||
reader.onload = (e:any) => {
|
||||
let data_new;
|
||||
if (typeof e.target.result === 'object') {
|
||||
// 把Array Buffer转化为blob 如果是base64不需要
|
||||
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
|
||||
} else {
|
||||
data_new = e.target.result;
|
||||
}
|
||||
dataDom.Cropper.getOptionImg(data_new)
|
||||
};
|
||||
reader.readAsArrayBuffer(file.originFileObj);
|
||||
dataDom.Cropper.changeShowModal(true)
|
||||
}
|
||||
let getLibraryList = ()=>{
|
||||
let value = {
|
||||
// classificationIdList:labelArr,
|
||||
level1Type:'BrandDNA',
|
||||
level2Type:'',
|
||||
page:data.currentPage,
|
||||
// modelSex:sex.value?sex.value:'',
|
||||
// pictureName:searchPictureName.value,
|
||||
size:data.pageSize,
|
||||
brandId:data.detail.id,
|
||||
// intersection:intersection.value,
|
||||
}
|
||||
data.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.queryLibraryPage,value).then(
|
||||
(rv: any) => {
|
||||
data.imgList = rv.content
|
||||
data.total = rv.total
|
||||
data.isShowMark = false
|
||||
}
|
||||
).catch((res)=>{
|
||||
data.isShowMark = false
|
||||
});
|
||||
}
|
||||
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(useI18n().t('PrintboardUpload.jsContent1'));
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.info(useI18n().t('PrintboardUpload.jsContent2'));
|
||||
}
|
||||
}
|
||||
let handleCropperSuccess = (event:any)=>{
|
||||
let {file, fileData,base64} =event
|
||||
data.uploadUrl = base64
|
||||
data.uploadFile = file
|
||||
dataDom.Cropper.closeCropper()
|
||||
if(!data.uploadFile)return
|
||||
let param = new FormData();
|
||||
param.append('file',data.uploadFile);
|
||||
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
||||
Https.axiosPost(Https.httpUrls.brandLogoUpload,param,config)
|
||||
.then((rv)=>{
|
||||
data.logoUrl = rv.minioUrl
|
||||
data.minioUrl = rv.brandLogo
|
||||
uploadBrand()
|
||||
})
|
||||
}
|
||||
const openEdit = (str:string)=>{
|
||||
if(str == 'userName'){
|
||||
data.isEditUserName = true
|
||||
}
|
||||
if(str == 'brandSlogan'){
|
||||
data.isEditDescribe = true
|
||||
}
|
||||
}
|
||||
const editChek = (str:string)=>{
|
||||
if(str == 'userName')data.isEditUserName = false
|
||||
if(str == 'brandSlogan')data.isEditDescribe = false
|
||||
uploadBrand()
|
||||
}
|
||||
const getBranDetailData = (value:any)=>{
|
||||
data.detail = value
|
||||
data.brandName = value.brandName;
|
||||
data.brandSlogan = value.brandSlogan;
|
||||
data.logoUrl = value.minioUrl
|
||||
data.minioUrl = value.brandLogo
|
||||
getLibraryList()
|
||||
// emit("update:isShowMark",true)
|
||||
// setTimeout(()=>{
|
||||
// emit("update:isShowMark",false)
|
||||
// },2000)
|
||||
}
|
||||
const back = ()=>{
|
||||
emit("handleBack")
|
||||
}
|
||||
const uploadBrand = ()=>{
|
||||
let value = {
|
||||
"brandLogo": data.minioUrl,
|
||||
"brandName": data.brandName,
|
||||
"brandSlogan": data.brandSlogan,
|
||||
"id": data.detail.id,
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.brandDNASaveOrUpdate,value).then((res:any)=>{
|
||||
}).catch((err:any)=>{
|
||||
// console.log(err)
|
||||
})
|
||||
}
|
||||
const compute = ()=>{
|
||||
|
||||
}
|
||||
const changePage = (current:number, pageSize:number)=>{
|
||||
data.currentPage = current
|
||||
data.pageSize = pageSize
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
getBranDetailData,
|
||||
fileUploadChange,
|
||||
back,
|
||||
customRequest,
|
||||
beforeUpload,
|
||||
handleCropperSuccess,
|
||||
openEdit,
|
||||
editChek,
|
||||
compute,
|
||||
changePage,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.brandDetail{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
font-size: 2.2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
> .back{
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> .userDetail{
|
||||
display: flex;
|
||||
margin-top: 4rem;
|
||||
align-items: center;
|
||||
> .logo{
|
||||
position: relative;
|
||||
margin-right: 3rem;
|
||||
> img{
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
object-fit: contain;
|
||||
border-radius: 50%;
|
||||
}
|
||||
> .upload_box{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
> i{
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: rgba(0,0,0,.5);
|
||||
color: #fff;
|
||||
font-size: 2rem;
|
||||
}
|
||||
> .upload{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .info{
|
||||
> .name, > .slogan{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> i{
|
||||
cursor: pointer;
|
||||
margin-left: 1rem;
|
||||
display: flex;
|
||||
}
|
||||
> div{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> input{
|
||||
min-width: 20rem;
|
||||
height: 3.6rem;
|
||||
border-radius: 4rem;
|
||||
border: 1px solid;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
> .name{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .content{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
:deep(.upload){
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-left: auto;
|
||||
> .ant-upload-list{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
> .imgBox{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
> .imgItem{
|
||||
width: 100px;
|
||||
margin: 1rem;
|
||||
aspect-ratio: 1 / 2.5;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .total{
|
||||
text-align: center;
|
||||
}
|
||||
// > .upload_item{
|
||||
// width: 10rem;
|
||||
// height: 10rem;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
68
src/component/LibraryPage/loadBrandDNA.vue
Normal file
68
src/component/LibraryPage/loadBrandDNA.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="loadsBrandDNA" ref="loadsBrandDNA">
|
||||
<a-modal class="generalModel"
|
||||
v-model:visible="showLoadsBrandDNA"
|
||||
:footer="null"
|
||||
width="70rem"
|
||||
:maskClosable="false"
|
||||
:mask="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:get-container="() => $refs.loadsBrandDNA"
|
||||
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>1231425324</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'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
props:{
|
||||
},
|
||||
emits:[],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const data = reactive({
|
||||
showLoadsBrandDNA:true,
|
||||
})
|
||||
const dataDom = reactive({
|
||||
})
|
||||
const cancelDsign = ()=>{
|
||||
data.showLoadsBrandDNA = false;
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
cancelDsign,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.loadsBrandDNA{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user