卖家ui
This commit is contained in:
李志鹏
166
src/views/SellerDashboard/BrandProfile/image-clip-dialog.vue
Normal file
166
src/views/SellerDashboard/BrandProfile/image-clip-dialog.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="image-clip-dialog generalModel"
|
||||
v-model:visible="show"
|
||||
:footer="null"
|
||||
width="70%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
>
|
||||
<div class="image-clip-dialog-box">
|
||||
<div class="header">
|
||||
<div class="title">{{ data.title }}</div>
|
||||
<div class="right">
|
||||
<div class="submit" v-if="!data.isPreview" @click="onSubmit">
|
||||
<svg-icon name="seller-dui" size="24" />
|
||||
</div>
|
||||
<button @click="onCancel">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<image-clip
|
||||
ref="imageClipRef"
|
||||
:ratio="data.ratio"
|
||||
:url="data.url"
|
||||
@change="(v) => (data.preview_url = v)"
|
||||
/>
|
||||
<div class="preview" v-if="data.isPreview">
|
||||
<div class="title">
|
||||
<span class="icon"><svg-icon name="seller-preview" size="24" /></span>
|
||||
<span class="label">Crop Preview</span>
|
||||
</div>
|
||||
<img :src="data.preview_url" />
|
||||
<div class="submit" @click="onSubmit">
|
||||
<svg-icon name="seller-dui" size="24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue"
|
||||
import ImageClip from "./image-clip.vue"
|
||||
const data = reactive({
|
||||
url: "",
|
||||
title: "Crop Image",
|
||||
preview_url: "",
|
||||
ratio: [1, 1],
|
||||
isPreview: true,
|
||||
callback: null
|
||||
})
|
||||
const show = ref(false)
|
||||
const open = (url, callback, options) => {
|
||||
if (!url || !callback) return
|
||||
data.url = url
|
||||
data.callback = callback
|
||||
data.ratio = [1, 1]
|
||||
data.isPreview = true
|
||||
data.preview_url = ""
|
||||
data.title = "Crop Image"
|
||||
if (options) {
|
||||
if (options.hasOwnProperty("isPreview")) data.isPreview = options.isPreview
|
||||
if (options.hasOwnProperty("ratio")) data.ratio = options.ratio
|
||||
if (options.hasOwnProperty("title")) data.title = options.title
|
||||
}
|
||||
show.value = true
|
||||
}
|
||||
const onCancel = () => {
|
||||
show.value = false
|
||||
}
|
||||
const imageClipRef = ref(null)
|
||||
const onSubmit = () => {
|
||||
imageClipRef.value.getCropBlob().then((blob) => {
|
||||
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
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.image-clip-dialog-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.submit {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 50%;
|
||||
background: #262626;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
> .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5rem;
|
||||
> .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> .image-clip {
|
||||
flex: 1;
|
||||
}
|
||||
> .preview {
|
||||
margin-left: 6rem;
|
||||
width: 28rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2.4rem;
|
||||
> .title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.2rem;
|
||||
> .label {
|
||||
font-family: pingfang_heavy;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
> img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
157
src/views/SellerDashboard/BrandProfile/image-clip.vue
Normal file
157
src/views/SellerDashboard/BrandProfile/image-clip.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="image-clip">
|
||||
<div class="image-clip-body" ref="imageClipBody">
|
||||
<VueCropper
|
||||
ref="cropper"
|
||||
:img="url"
|
||||
crossOrigin="Anonymous"
|
||||
:autoCrop="true"
|
||||
:fixedNumber="ratio"
|
||||
fixed
|
||||
movable
|
||||
centerBox
|
||||
@realTime="onChange"
|
||||
></VueCropper>
|
||||
</div>
|
||||
<div class="clip_opterate">
|
||||
<div class="item" @click="rotateLeft()">
|
||||
<span class="icon iconfont icon-chexiao operate_icon"></span>
|
||||
</div>
|
||||
<div class="item" @click="rotateRight()">
|
||||
<span class="icon iconfont icon-chexiao operate_icon icon_chexiao_sec"></span>
|
||||
</div>
|
||||
<div class="item" @click="changeScale(-0.1)">
|
||||
<span class="operate_icon icon_font">-</span>
|
||||
</div>
|
||||
<div class="item" @click="changeScale(0.1)">
|
||||
<span class="operate_icon icon_font">+</span>
|
||||
</div>
|
||||
<div class="item" @click="refreshCrop()">
|
||||
<span class="icon iconfont icon-shuaxin operate_icon"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, useAttrs, onMounted, onBeforeUnmount } from "vue"
|
||||
import "vue-cropper/dist/index.css"
|
||||
import { VueCropper } from "vue-cropper"
|
||||
const props = defineProps({
|
||||
url: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
ratio: {
|
||||
type: Array,
|
||||
default: () => [1, 1]
|
||||
}
|
||||
})
|
||||
const attrs = useAttrs()
|
||||
|
||||
const onChange = (data) => {
|
||||
if (attrs.onChange) {
|
||||
getCropUrl().then((url) => attrs.onChange(url))
|
||||
}
|
||||
}
|
||||
const cropper = ref(null)
|
||||
const imageClipBody = ref(null)
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
refreshCrop()
|
||||
})
|
||||
onMounted(() => {
|
||||
observer.observe(imageClipBody.value)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
observer.disconnect()
|
||||
})
|
||||
const rotateLeft = () => {
|
||||
cropper.value.rotateLeft()
|
||||
}
|
||||
const rotateRight = () => {
|
||||
cropper.value.rotateRight()
|
||||
}
|
||||
const refreshCrop = () => {
|
||||
cropper.value.refresh()
|
||||
}
|
||||
const changeScale = (num = 1) => {
|
||||
cropper.value.changeScale(num)
|
||||
}
|
||||
const getCropUrl = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
cropper.value.getCropData(resolve)
|
||||
})
|
||||
}
|
||||
const getCropBlob = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
cropper.value.getCropBlob(resolve)
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
getCropUrl,
|
||||
getCropBlob
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.image-clip {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// 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;
|
||||
|
||||
.image-clip-body {
|
||||
width: 100%;
|
||||
height: calc(40rem * 1.2);
|
||||
// height: 53rem;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.clip_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);
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -7,7 +7,7 @@
|
||||
<span class="icon"><svg-icon name="seller-picture" size="60" /></span>
|
||||
<span class="tip">Your brand banner has not been set up yet.</span>
|
||||
</div>
|
||||
<button>Change Brand Banner</button>
|
||||
<button @click="onChangeBanner">Change Brand Banner</button>
|
||||
</div>
|
||||
<!-- 头像 -->
|
||||
<div class="avatar">
|
||||
@@ -15,7 +15,7 @@
|
||||
<div v-else class="null">
|
||||
<svg-icon name="seller-user" size="48" />
|
||||
</div>
|
||||
<span class="icon">
|
||||
<span class="icon" @click="onChangeAvatar">
|
||||
<svg-icon name="seller-camera" size="24" />
|
||||
</span>
|
||||
</div>
|
||||
@@ -37,15 +37,56 @@
|
||||
<p class="tip"> </p>
|
||||
</template>
|
||||
</div>
|
||||
<image-clip-dialog ref="imageClipDialogRef" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue"
|
||||
import BrandInfo from "./brand-info.vue"
|
||||
const banner = ref("http://118.31.39.42:3000/falls/5bd8065cbb396eb5a8ef0a142605139358734e57.png")
|
||||
const avatar = ref("http://118.31.39.42:3000/falls/20251024140128_10355_1.jpg")
|
||||
import ImageClipDialog from "./image-clip-dialog.vue"
|
||||
const banner = ref("")
|
||||
const avatar = ref("")
|
||||
const isEdit = ref(false)
|
||||
const brandInfoRef = ref(null)
|
||||
const imageClipDialogRef = ref(null)
|
||||
|
||||
// 选择本机图片
|
||||
const uploadImg = (onChange) => {
|
||||
const input = document.createElement("input")
|
||||
input.type = "file"
|
||||
input.accept = "image/*"
|
||||
// 监听文件输入框的变化事件
|
||||
input.addEventListener("change", (event) => {
|
||||
event.preventDefault()
|
||||
const file = event.target.files[0]
|
||||
const url = URL.createObjectURL(file)
|
||||
onChange({ url, file })
|
||||
})
|
||||
input.click()
|
||||
}
|
||||
|
||||
const onChangeBanner = () => {
|
||||
uploadImg(({ url }) => {
|
||||
imageClipDialogRef.value.open(
|
||||
url,
|
||||
(file) => {
|
||||
banner.value = URL.createObjectURL(file)
|
||||
},
|
||||
{ ratio: [40, 7], isPreview: false, title: "Crop Brand Banner" }
|
||||
)
|
||||
})
|
||||
}
|
||||
const onChangeAvatar = () => {
|
||||
uploadImg(({ url }) => {
|
||||
imageClipDialogRef.value.open(
|
||||
url,
|
||||
(file) => {
|
||||
avatar.value = URL.createObjectURL(file)
|
||||
},
|
||||
{ ratio: [1, 1], isPreview: true, title: "Crop Avatar" }
|
||||
)
|
||||
})
|
||||
}
|
||||
const onEdit = () => {
|
||||
isEdit.value = true
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user