392 lines
13 KiB
Vue
392 lines
13 KiB
Vue
<template>
|
|
<div ref="cutPrictureModal">
|
|
<a-modal class="generalModel cut_pricture_modal"
|
|
v-model:visible="cutPicuterModal"
|
|
:footer="null"
|
|
:get-container="() => $refs.cutPrictureModal"
|
|
width="75%"
|
|
:maskClosable="false"
|
|
:centered="true"
|
|
:closable="false"
|
|
:keyboard="false"
|
|
:zIndex="999999"
|
|
:mask="false"
|
|
>
|
|
<div class="collection_title">
|
|
<div class="collection_title_text">
|
|
<div>{{ $t('Cropper.Cutpicture') }}</div>
|
|
</div>
|
|
<div class="header_right_block" @click.stop="">
|
|
<div class="header_cancel_button" @click.stop="cancleCropper()">{{ $t('Cropper.Cancel') }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="collection_modal_body">
|
|
<div class="cut_picture_left">
|
|
<div class="cut_picture_body">
|
|
<VueCropper
|
|
ref="cropper"
|
|
:original="option.original"
|
|
:img="option.img"
|
|
:outputSize="option.size"
|
|
:outputType="option.outputType"
|
|
:auto-crop="option.autoCrop"
|
|
:fixedBox="!isRound"
|
|
:movable="true"
|
|
:fixed="isRound"
|
|
:auto-crop-width="option.autoCropWidth"
|
|
:auto-crop-height="option.autoCropWidth"
|
|
:center-box="option.centerBox"
|
|
:can-move="option.canMove" :can-move-box="option.canMoveBox"
|
|
@real-time="realTime"
|
|
></VueCropper>
|
|
</div>
|
|
<div class="cur_picture_opterate">
|
|
<div class="cur_picture_opterate_item" @click="rotateLeft()"><span class="icon iconfont icon-chexiao operate_icon"></span></div>
|
|
<div class="cur_picture_opterate_item" @click="rotateRight()"><span class="icon iconfont icon-chexiao operate_icon icon_chexiao_sec"></span></div>
|
|
<div class="cur_picture_opterate_item" @click="changeScale(-.1)"><span class="operate_icon icon_font">-</span></div>
|
|
<div class="cur_picture_opterate_item" @click="changeScale(.1)"><span class="operate_icon icon_font">+</span></div>
|
|
<div class="cur_picture_opterate_item" @click="refreshCrop()"><span class="icon iconfont icon-shuaxin operate_icon"></span></div>
|
|
</div>
|
|
</div>
|
|
<div class="cut_picture_right">
|
|
<div class="cur_picture_right_header">
|
|
<div class="review_logo icon iconfont icon-yulan"></div>
|
|
<div>{{ $t('Cropper.CropPreview') }}</div>
|
|
</div>
|
|
<div class="cut_picture_review_block" :style="{'width': previews.w + 'px', 'height': previews.h + 'px'}">
|
|
<div class="cut_picture_review_item">
|
|
<div class="cut_picture_review_content" :class="{active:isRound}" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
|
|
<div :style="previews.div">
|
|
<img class="previews_image" :style="previews.img" :src="previews.url">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="next_step_button" @click.stop="finishCropper()">
|
|
<!-- <i class="fi fi-rr-check"></i> -->
|
|
<i class="fi fi-sr-check-circle"></i>
|
|
</div>
|
|
<!-- <div class="cut_picture_review_item">
|
|
<div class="cut_picture_review_block_sec" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
|
|
<div :style="previews.div" >
|
|
<img class="previews_image" :style="previews.img" :src="previews.url">
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent,inject } from 'vue'
|
|
import 'vue-cropper/dist/index.css'
|
|
import { VueCropper } from "vue-cropper";
|
|
// import { openGuide,driverObj__ } from "@/tool/guide";
|
|
import {base64toFile} from '@/tool/util'
|
|
export default defineComponent({
|
|
props:['cropperFileData','isUpload','isRound'],
|
|
components:{
|
|
VueCropper,
|
|
},
|
|
setup(){
|
|
|
|
},
|
|
data(prop){
|
|
return {
|
|
cutPicuterModal:false,
|
|
option: {
|
|
original:false,
|
|
img: '',
|
|
size: 1,
|
|
full: false,
|
|
outputType: 'png',
|
|
autoCrop: true,
|
|
// 只有自动截图开启 宽度高度才生效
|
|
autoCropWidth: prop.isRound?100:360,
|
|
autoCropHeight: prop.isRound?100:360,
|
|
max: 99999,
|
|
centerBox:true,
|
|
canMove:true,
|
|
canMoveBox:true,
|
|
fixedBox:false,
|
|
},
|
|
previews:{},
|
|
}
|
|
},
|
|
mounted(){
|
|
},
|
|
methods:{
|
|
|
|
rotateLeft() {
|
|
let cropper:any = this.$refs.cropper
|
|
cropper.rotateLeft();
|
|
},
|
|
rotateRight() {
|
|
let cropper:any = this.$refs.cropper
|
|
cropper.rotateRight();
|
|
},
|
|
refreshCrop() {
|
|
let cropper:any = this.$refs.cropper
|
|
cropper.refresh();
|
|
},
|
|
|
|
changeScale(num:any) {
|
|
num = num || 1;
|
|
let cropper:any = this.$refs.cropper
|
|
cropper.changeScale(num);
|
|
},
|
|
// 实时预览函数
|
|
realTime(data:any) {
|
|
this.previews = data;
|
|
},
|
|
|
|
getOptionImg(img:any){
|
|
this.option.img = img
|
|
},
|
|
|
|
changeShowModal(type:any){
|
|
this.cutPicuterModal = type
|
|
},
|
|
|
|
finishCropper(){
|
|
let cropper:any = this.$refs.cropper,
|
|
that = this
|
|
|
|
cropper.getCropData((data:any) => {
|
|
// 转换为File对象
|
|
let file = base64toFile(data,this.cropperFileData.name);
|
|
this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData,base64:data})
|
|
})
|
|
|
|
},
|
|
|
|
closeCropper(){
|
|
this.cutPicuterModal = false
|
|
this.option.img = ''
|
|
},
|
|
|
|
cancleCropper(){
|
|
this.cutPicuterModal = false
|
|
this.option.img = ''
|
|
this.$emit('closeCropper')
|
|
}
|
|
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.cut_pricture_modal{
|
|
|
|
// max-width: 1150px ;
|
|
|
|
.collection_title{
|
|
position: absolute;
|
|
width: calc(100% - 10rem*1.2);
|
|
top: calc(3rem*1.2);
|
|
display: flex;
|
|
font-size: var(--aida-fsize2);
|
|
font-weight: 900;
|
|
color: rgba(0,0,0,.65);
|
|
align-items: center;
|
|
.collection_title_text{
|
|
margin-right: calc(4rem*1.2);
|
|
}
|
|
.collection_title_text_intro{
|
|
font-size: var(--aida-fsize1-4);
|
|
font-weight: 400;
|
|
color: rgba(0,0,0,.45);
|
|
}
|
|
}
|
|
.header_right_block{
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
right: calc(2.1rem*1.2);
|
|
height: 100%;
|
|
|
|
.next_step_button{
|
|
padding: 0 calc(1.2rem*1.2);
|
|
height: calc(3.2rem*1.2);
|
|
// background: linear-gradient(160deg, #AC2A3B, #292161);
|
|
background: #000;
|
|
color: #fff;
|
|
border-radius: calc(1.6rem*1.2);
|
|
font-size: calc(1.4rem*1.2);
|
|
line-height: calc(3.2rem*1.2);
|
|
margin-right: calc(1.6rem*1.2);
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header_cancel_button{
|
|
padding: 0 calc(2.1rem*1.2);
|
|
height: calc(3.2rem*1.2);
|
|
background: #E4E5EB;
|
|
border-radius: calc(1.6rem*1.2);
|
|
font-size: calc(1.4rem*1.2);
|
|
color: #030303;
|
|
line-height: calc(3.2rem*1.2);
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.collection_modal_body{
|
|
height: 100%;
|
|
// padding: 1rem 2.5rem 1.4rem 1.4rem;
|
|
box-sizing: border-box;
|
|
// background: #F2F3FB;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.cut_picture_right,.cut_picture_left{
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 80%;
|
|
}
|
|
|
|
.cut_picture_left{
|
|
width: calc(70.7rem*1.2);
|
|
// height: 100%;
|
|
background: #fff;
|
|
border-radius: calc(2rem*1.2);
|
|
padding: calc(1.3rem*1.2) calc(1.3rem*1.2) calc(2rem*1.2);
|
|
box-sizing: border-box;
|
|
|
|
.cut_picture_body{
|
|
width: 100%;
|
|
height: calc(40rem*1.2);
|
|
// height: 53rem;
|
|
background: yellow;
|
|
}
|
|
|
|
.cur_picture_opterate{
|
|
margin: calc(2.7rem*1.2) auto 0;
|
|
border-radius: calc(1.6rem*1.2);
|
|
display: flex;
|
|
overflow: hidden;
|
|
border: 1px solid #E2E2E4;
|
|
width: calc(24rem*1.2);
|
|
|
|
.cur_picture_opterate_item{
|
|
width: calc(4.7rem*1.2);
|
|
height: calc(4rem*1.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-right: 0.1rem solid #E6E8EA;
|
|
cursor: pointer;
|
|
|
|
.icon_chexiao_sec{
|
|
transform: rotateY(180deg); /* 垂直镜像翻转 */
|
|
}
|
|
|
|
.operate_icon{
|
|
font-size: calc(1.8rem*1.2);
|
|
color: rgba(102, 102, 102, 1);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.icon_font{
|
|
font-size: calc(2.5rem*1.2);
|
|
position: relative;
|
|
top: calc(-0.3rem*1.2);
|
|
user-select:none;
|
|
}
|
|
|
|
.icon-shuaxin{
|
|
font-size: calc(1.4rem*1.2);
|
|
}
|
|
|
|
&:last-child{
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cut_picture_right{
|
|
// width: 39.2rem;
|
|
width: calc(52rem*1.2);
|
|
background: #fff;
|
|
border-radius: calc(2rem*1.2);
|
|
margin-block: -5rem;
|
|
.cur_picture_right_header{
|
|
// padding: calc(2rem*1.2);
|
|
padding: 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: var(--aida-fsize1-8);
|
|
font-weight: 400;
|
|
color: #030303;
|
|
line-height: calc(1.8rem*1.2);
|
|
font-weight: bold;
|
|
|
|
.review_logo{
|
|
font-size: calc(1.8rem*1.2);
|
|
color: #333;
|
|
margin-right: calc(1rem*1.2);
|
|
}
|
|
}
|
|
|
|
.cut_picture_review_block{
|
|
width: 100%;
|
|
height: calc(100% - 6.8rem*1.2);
|
|
margin: 0 auto;
|
|
.next_step_button{
|
|
margin-top: 2rem;
|
|
i{
|
|
display: flex;
|
|
// height: 4rem;
|
|
// width: 4rem;
|
|
// background: #000;
|
|
// color: #fff;
|
|
font-weight: 900;
|
|
border-radius: 50%;
|
|
font-size: 4rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.cut_picture_review_item{
|
|
width: 100%;
|
|
// height: 50%;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.cut_picture_review_content{
|
|
transform-origin: 0 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: scale(1) translate(-50%, -50%);
|
|
background: rgba(91,94,105,0.8);
|
|
box-shadow: 0 calc(0.2rem*1.2) calc(0.5rem*1.2) 0 rgba(216,213,239,0.3);
|
|
border-radius: calc(1rem*1.2);
|
|
&.active{
|
|
border-radius: 50%;
|
|
overflow: hidden
|
|
}
|
|
}
|
|
|
|
.cut_picture_review_block_sec{
|
|
transform-origin: 0 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: scale(0.45) translate(-50%, -50%);
|
|
border-radius: 100%;
|
|
background: rgba(91,94,105,0.8);
|
|
box-shadow: 0 calc(0.2rem*1.2) calc(0.5rem*1.2) 0 rgba(216,213,239,0.3);
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|