bugfix: 剪切组件顶部来源按钮样式
This commit is contained in:
@@ -27,7 +27,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="origin-item product"
|
class="origin-item product"
|
||||||
:class="{ selected: currentOrigin === 'mainProducImage' }"
|
:class="{ selected: currentOrigin === 'mainProductImage' }"
|
||||||
@click="handleChangeOrigin('mainProductImage')"
|
@click="handleChangeOrigin('mainProductImage')"
|
||||||
>
|
>
|
||||||
{{ $t("Seller.mainProductImage") }}
|
{{ $t("Seller.mainProductImage") }}
|
||||||
@@ -79,258 +79,256 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, computed } from "vue"
|
import { ref, reactive, computed } from "vue"
|
||||||
import ImageClip from "./image-clip.vue"
|
import ImageClip from "./image-clip.vue"
|
||||||
import { useI18n } from "vue-i18n"
|
import { useI18n } from "vue-i18n"
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
type: {
|
||||||
const props = defineProps({
|
type: String,
|
||||||
type: {
|
default: ""
|
||||||
type: String,
|
},
|
||||||
default: ""
|
isProduct: {
|
||||||
},
|
type: Boolean,
|
||||||
isProduct: {
|
default: false
|
||||||
type: Boolean,
|
}
|
||||||
default: false
|
})
|
||||||
}
|
|
||||||
})
|
const tips = computed(() => {
|
||||||
|
if (props.type === "cover") {
|
||||||
const tips = computed(() => {
|
return t("Seller.imageClipCoverTip")
|
||||||
if (props.type === "cover") {
|
}
|
||||||
return t("Seller.imageClipCoverTip")
|
if (props.type === "mainProductImage") {
|
||||||
}
|
return t("Seller.imageClipMainProductImageTip")
|
||||||
if (props.type === "mainProductImage") {
|
}
|
||||||
return t("Seller.imageClipMainProductImageTip")
|
if (props.type === "sketch") {
|
||||||
}
|
return t("Seller.imageClipSketchTip")
|
||||||
if (props.type === "sketch") {
|
}
|
||||||
return t("Seller.imageClipSketchTip")
|
if (props.type === "apparel") {
|
||||||
}
|
return t("Seller.imageClipApparelTip")
|
||||||
if (props.type === "apparel") {
|
}
|
||||||
return t("Seller.imageClipApparelTip")
|
})
|
||||||
}
|
|
||||||
})
|
const data = reactive({
|
||||||
|
url: "",
|
||||||
const data = reactive({
|
title: "Crop Image",
|
||||||
url: "",
|
preview_url: "",
|
||||||
title: "Crop Image",
|
ratio: [1, 1],
|
||||||
preview_url: "",
|
isPreview: true,
|
||||||
ratio: [1, 1],
|
callback: null,
|
||||||
isPreview: true,
|
isProduct: false // 是否商品编辑
|
||||||
callback: null,
|
})
|
||||||
isProduct: false // 是否商品编辑
|
|
||||||
})
|
const currentOrigin = ref("sketch")
|
||||||
|
const coverOrigin = ref([])
|
||||||
const currentOrigin = ref("sketch")
|
const handleChangeOrigin = (type) => {
|
||||||
const coverOrigin = ref([])
|
currentOrigin.value = type
|
||||||
const handleChangeOrigin = (type) => {
|
data.url = coverOrigin.value.filter((el) => el.type === type)[0].url
|
||||||
currentOrigin.value = type
|
}
|
||||||
data.url = coverOrigin.value.filter((el) => el.type === type)[0].url
|
|
||||||
}
|
const show = ref(false)
|
||||||
|
const open = (url, callback, options, origin) => {
|
||||||
const show = ref(false)
|
if (!props.isProduct) {
|
||||||
const open = (url, callback, options, origin) => {
|
if (!url || !callback) return
|
||||||
if (!props.isProduct) {
|
}
|
||||||
if (!url || !callback) return
|
data.url = url
|
||||||
}
|
data.callback = callback
|
||||||
data.url = url
|
data.ratio = options.ratio || [1, 1]
|
||||||
data.callback = callback
|
data.isPreview = true
|
||||||
data.ratio = options.ratio || [1, 1]
|
data.preview_url = ""
|
||||||
data.isPreview = true
|
data.title = options.title || "Crop Image"
|
||||||
data.preview_url = ""
|
if (options) {
|
||||||
data.title = options.title || "Crop Image"
|
if (options.hasOwnProperty("isPreview")) data.isPreview = options.isPreview
|
||||||
if (options) {
|
data.isProduct = options.isProduct
|
||||||
if (options.hasOwnProperty("isPreview")) data.isPreview = options.isPreview
|
}
|
||||||
data.isProduct = options.isProduct
|
if (origin?.length) {
|
||||||
}
|
coverOrigin.value = origin
|
||||||
if (origin?.length) {
|
data.url = origin[0].url
|
||||||
coverOrigin.value = origin
|
}
|
||||||
data.url = origin[0].url
|
show.value = true
|
||||||
}
|
}
|
||||||
show.value = true
|
const onCancel = () => {
|
||||||
}
|
show.value = false
|
||||||
const onCancel = () => {
|
}
|
||||||
show.value = false
|
const imageClipRef = ref(null)
|
||||||
}
|
const onSubmit = () => {
|
||||||
const imageClipRef = ref(null)
|
imageClipRef.value.getCropBlob().then((blob) => {
|
||||||
const onSubmit = () => {
|
if (data.callback) data.callback(blobToFile(blob, "image.png"))
|
||||||
imageClipRef.value.getCropBlob().then((blob) => {
|
onCancel()
|
||||||
if (data.callback) data.callback(blobToFile(blob, "image.png"))
|
})
|
||||||
onCancel()
|
}
|
||||||
|
// 将blob转换为file对象
|
||||||
|
const blobToFile = (blob, fileName) => {
|
||||||
|
return new File([blob], fileName, { type: blob.type })
|
||||||
|
}
|
||||||
|
defineExpose({
|
||||||
|
open
|
||||||
})
|
})
|
||||||
}
|
|
||||||
// 将blob转换为file对象
|
|
||||||
const blobToFile = (blob, fileName) => {
|
|
||||||
return new File([blob], fileName, { type: blob.type })
|
|
||||||
}
|
|
||||||
defineExpose({
|
|
||||||
open
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.image-clip-dialog-box {
|
.image-clip-dialog-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
.submit {
|
|
||||||
width: 4rem;
|
|
||||||
height: 4rem;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #262626;
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
> .header {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
flex-direction: column;
|
||||||
margin-bottom: 5rem;
|
.submit {
|
||||||
&.is-product {
|
width: 4rem;
|
||||||
margin-bottom: 2.4rem;
|
height: 4rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #262626;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
> .title {
|
> .header {
|
||||||
font-family: pingfang_heavy;
|
display: flex;
|
||||||
font-size: 2.4rem;
|
justify-content: space-between;
|
||||||
color: #595959;
|
margin-bottom: 5rem;
|
||||||
|
&.is-product {
|
||||||
|
margin-bottom: 2.4rem;
|
||||||
|
}
|
||||||
|
> .title {
|
||||||
|
font-family: pingfang_heavy;
|
||||||
|
font-size: 2.4rem;
|
||||||
|
color: #595959;
|
||||||
|
}
|
||||||
|
> .right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 2rem;
|
||||||
|
> button {
|
||||||
|
width: 10rem;
|
||||||
|
height: 4.8rem;
|
||||||
|
border-radius: 4rem;
|
||||||
|
border: none;
|
||||||
|
background: #e4e5eb;
|
||||||
|
font-family: pingfang_heavy;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.origin-container {
|
||||||
|
font-weight: 400;
|
||||||
|
color: #000;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
.origin-select {
|
||||||
|
margin-left: 1.2rem;
|
||||||
|
height: 4.8rem;
|
||||||
|
border: 1px solid #c7c7c7;
|
||||||
|
border-radius: 3rem;
|
||||||
|
column-gap: 1.2rem;
|
||||||
|
padding: 0.8rem;
|
||||||
|
.origin-item {
|
||||||
|
height: 3.2rem;
|
||||||
|
line-height: 3.2rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
&.selected {
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
&.sketch {
|
||||||
|
padding: 0 1.9rem;
|
||||||
|
}
|
||||||
|
&.product {
|
||||||
|
padding: 0 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
> .right {
|
> .content {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 2rem;
|
|
||||||
> button {
|
|
||||||
width: 10rem;
|
|
||||||
height: 4.8rem;
|
|
||||||
border-radius: 4rem;
|
|
||||||
border: none;
|
|
||||||
background: #e4e5eb;
|
|
||||||
font-family: pingfang_heavy;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
.origin-container {
|
|
||||||
font-weight: 400;
|
|
||||||
color: #000;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
.origin-select {
|
|
||||||
margin-left: 1.2rem;
|
|
||||||
height: 4.8rem;
|
|
||||||
border: 1px solid #c7c7c7;
|
|
||||||
border-radius: 3rem;
|
|
||||||
column-gap: 1.2rem;
|
|
||||||
padding: 0.8rem;
|
|
||||||
.origin-item {
|
|
||||||
height: 3.2rem;
|
|
||||||
line-height: 3.2rem;
|
|
||||||
border-radius: 2rem;
|
|
||||||
cursor: pointer;
|
|
||||||
&.selected {
|
|
||||||
background-color: #000;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
&.sketch {
|
|
||||||
padding: 0 1.9rem;
|
|
||||||
}
|
|
||||||
&.product {
|
|
||||||
padding: 0 2.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .content {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.crop-wrapper {
|
|
||||||
width: 100%;
|
|
||||||
.tips {
|
|
||||||
text-align: center;
|
|
||||||
color: #585858;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.is-product {
|
|
||||||
column-gap: 18.6rem;
|
|
||||||
.crop-wrapper {
|
.crop-wrapper {
|
||||||
width: initial;
|
width: 100%;
|
||||||
}
|
.tips {
|
||||||
}
|
text-align: center;
|
||||||
> .image-clip {
|
color: #585858;
|
||||||
flex: 1;
|
font-size: 1.4rem;
|
||||||
&.is-product {
|
font-weight: 400;
|
||||||
width: initial;
|
|
||||||
flex: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .preview {
|
|
||||||
margin-left: 6rem;
|
|
||||||
width: 28rem;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2.4rem;
|
|
||||||
min-height: 0;
|
|
||||||
|
|
||||||
> .title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 1.2rem;
|
|
||||||
> .label {
|
|
||||||
font-family: pingfang_heavy;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .preview-image {
|
&.is-product {
|
||||||
width: 100%;
|
column-gap: 18.6rem;
|
||||||
|
.crop-wrapper {
|
||||||
|
width: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .image-clip {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0;
|
&.is-product {
|
||||||
display: flex;
|
width: initial;
|
||||||
align-items: center;
|
flex: none;
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
> .preview-image > img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
> .submit {
|
|
||||||
margin-top: auto;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
&.is-product {
|
|
||||||
margin-left: 0;
|
|
||||||
> .preview-image > img {
|
|
||||||
width: 20.8rem;
|
|
||||||
height: 36.7rem;
|
|
||||||
box-shadow: 4px 4px 16px 0px #0000000f;
|
|
||||||
border: 1px solid #ededed;
|
|
||||||
}
|
}
|
||||||
&.is-cover {
|
}
|
||||||
> .preview-image > img {
|
> .preview {
|
||||||
width: 29.7rem;
|
margin-left: 6rem;
|
||||||
height: 37.5rem;
|
width: 28rem;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2.4rem;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
> .title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1.2rem;
|
||||||
|
> .label {
|
||||||
|
font-family: pingfang_heavy;
|
||||||
|
font-size: 1.6rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.is-apparel {
|
> .preview-image {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
> .preview-image > img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
> .submit {
|
||||||
|
margin-top: auto;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
&.is-product {
|
||||||
|
margin-left: 0;
|
||||||
> .preview-image > img {
|
> .preview-image > img {
|
||||||
width: 100%;
|
width: 20.8rem;
|
||||||
height: auto;
|
height: 36.7rem;
|
||||||
max-height: 100%;
|
box-shadow: 4px 4px 16px 0px #0000000f;
|
||||||
|
border: 1px solid #ededed;
|
||||||
|
}
|
||||||
|
&.is-cover {
|
||||||
|
> .preview-image > img {
|
||||||
|
width: 29.7rem;
|
||||||
|
height: 37.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.is-apparel {
|
||||||
|
> .preview-image > img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user