408 lines
10 KiB
Vue
408 lines
10 KiB
Vue
|
<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>
|