aida_front/src/views/SellerDashboard/BrandProfile/index.vue

<template>
	<div class="brand-profile-index mini-scrollbar">
		<div class="header">
			<div class="bg">
				<img v-if="banner" :src="banner" />
				<div v-else class="null">
					<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 @click="onChangeBanner">Change Brand Banner</button>
			</div>
			<!-- 头像 -->
			<div class="avatar">
				<img v-if="avatar" :src="avatar" />
				<div v-else class="null">
					<svg-icon name="seller-user" size="48" />
				</div>
				<span class="icon" @click="onChangeAvatar">
					<svg-icon name="seller-camera" size="24" />
				</span>
			</div>
		</div>
		<brand-info :is-edit="isEdit" ref="brandInfoRef" />
	</div>
	<div class="and-profile-footer">
		<template v-if="isEdit">
			<div class="btns">
				<button class="cancel" @click="onCancel">Cancel</button>
				<button class="submit" @click="onSubmit">Save Change</button>
			</div>
			<p class="tip">Changes will be reflected on your Stylish Parade brand page.</p>
		</template>
		<template v-else>
			<div class="btns">
				<button class="edit" @click="onEdit">Edit</button>
			</div>
			<p class="tip">&nbsp;</p>
		</template>
	</div>
	<image-clip-dialog ref="imageClipDialogRef" />
</template>

<script setup>
	import { ref } from "vue"
	import BrandInfo from "./brand-info.vue"
	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
	}
	const onCancel = () => {
		isEdit.value = false
	}
	const onSubmit = () => {
		brandInfoRef.value
			.submit()
			.then((res) => {
				console.log(res)
				isEdit.value = false
			})
			.catch(() => {})
	}
</script>
<style scoped lang="less">
	.brand-profile-index {
		flex: 1;
		overflow-y: auto;
		padding: 0 8rem;
		margin: 0 7rem;
		> .header {
			position: relative;
			margin-bottom: 6rem;
			> .bg {
				position: relative;
				> img {
					width: 100%;
					height: auto;
					border-radius: 1.2rem;
				}
				> .null {
					width: 100%;
					height: 23rem;
					border-radius: 1.2rem;
					border: 1px dashed #b0b0b0;
					background: #f9f9f9;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					> .tip {
						margin-top: 1.2rem;
						font-family: pingfang_medium;
						font-size: 1.6rem;
						color: rgba(153, 153, 153, 0.6);
					}
				}
				> button {
					position: absolute;
					bottom: 1.6rem;
					right: 1.6rem;
					padding: 0 2.7rem;
					border-radius: 4rem;
					height: 4.5rem;
					border: none;
					background-color: #fff;
					box-shadow: 0.2rem 0.2rem 1.2rem 0 rgba(0, 0, 0, 0.1);
					font-family: pingfang_medium;
					font-size: 1.6rem;
					cursor: pointer;
					color: #000;
					&:active {
						opacity: 0.8;
					}
				}
			}
			> .avatar {
				position: absolute;
				left: 6rem;
				bottom: -4rem;
				> img,
				> .null {
					width: 12rem;
					height: 12rem;
					border-radius: 1.2rem;
					border: 0.15rem solid #919191;
				}
				> .null {
					background-color: #f2f1f1;
				}
				> .icon {
					position: absolute;
					width: 5rem;
					height: 5rem;
					border-radius: 50%;
					background: rgba(146, 146, 146, 0.96);
					right: -1.6rem;
					bottom: -1.6rem;
					cursor: pointer;
				}
			}
		}
	}
	.and-profile-footer {
		margin: 0 15rem;
		> .btns {
			margin-top: 3rem;
			display: flex;
			justify-content: flex-end;
			padding-right: 1.6rem;
			gap: 1.3rem;
			> button {
				height: 6rem;
				border-radius: 6rem;
				padding: 0 4rem;
				background-color: #000;
				color: #fff;
				font-size: 1.6rem;
				border: none;
				cursor: pointer;
				&:active:not(:disabled) {
					opacity: 0.8;
				}
				&:disabled {
					opacity: 0.5;
					cursor: not-allowed;
				}
			}
			> .cancel {
				background-color: #fff;
				color: #000;
				border: 0.15rem solid #000;
			}
		}
		> .tip {
			padding-right: 1.6rem;
			margin-top: 0.7rem;
			font-family: pingfang_regular;
			font-size: 1.4rem;
			text-align: right;
			color: #999;
		}
	}
</style>