卖家控制台弹窗提示页面

2026-04-08 14:19:42 +08:00
parent fe93b375c4
commit 103028f98a
9 changed files with 300 additions and 1 deletions
--- a/src/assets/icons/sellerToolTipClose.svg
+++ b/src/assets/icons/sellerToolTipClose.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.75 0.5C30.2139 0.50007 30.6592 0.684683 30.9873 1.0127C31.3153 1.34085 31.499 1.78607 31.499 2.25C31.499 2.71394 31.3153 3.15919 30.9873 3.4873L18.4746 16L30.9873 28.5127C31.3153 28.8409 31.499 29.2861 31.499 29.75C31.499 30.2139 31.3153 30.6592 30.9873 30.9873C30.6592 31.3153 30.2139 31.499 29.75 31.499C29.2861 31.499 28.8409 31.3153 28.5127 30.9873L16 18.4746L3.4873 30.9873C3.15919 31.3153 2.71394 31.499 2.25 31.499C1.78607 31.499 1.34085 31.3153 1.0127 30.9873C0.684683 30.6592 0.50007 30.2139 0.5 29.75C0.5 29.286 0.684623 28.8409 1.0127 28.5127L13.5254 16L1.0127 3.4873C0.684684 3.15919 0.500071 2.71394 0.5 2.25C0.5 1.78596 0.684621 1.34087 1.0127 1.0127C1.34087 0.684621 1.78596 0.5 2.25 0.5C2.71394 0.500071 3.15919 0.684684 3.4873 1.0127L16 13.5254L28.5127 1.0127C28.8409 0.684623 29.286 0.5 29.75 0.5Z" fill="black" stroke="black"/>
+</svg>
--- a/src/assets/images/sellerToolTip/sellerToolTip-1.png
+++ b/src/assets/images/sellerToolTip/sellerToolTip-1.png
--- a/src/assets/images/sellerToolTip/sellerToolTip-2.png
+++ b/src/assets/images/sellerToolTip/sellerToolTip-2.png
--- a/src/assets/images/sellerToolTip/sellerToolTip-3.png
+++ b/src/assets/images/sellerToolTip/sellerToolTip-3.png
--- a/src/component/home/design/childModel.vue
+++ b/src/component/home/design/childModel.vue
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -1719,5 +1719,19 @@ export default {
    IncorrectEmailFormat: '请输入正确的邮箱格式',
    CompleteVerificationCode: '请输入完整的验证码',
    PleaseEnterYourAccountNumberOrPassword: '请输入您的账号或密码'
-  }
+  },
+	SellerToolTip: {
+		title: '如何上架你的设计',
+		titleInfo: '按照以下4个步骤将你的设计发布到市场。',
+		step1Title: '选择系列',
+		step1Info: '选择你要上架的设计系列。',
+		step2Title: '选择草图',
+		step2Info: '挑选你要上架的草图，可同时选择多个。',
+		step3Title: '编辑草图详情',
+		step3Info: '详情信息已从AiDA自动填充，请检查并补充任何缺失的信息。',
+		step4Title: '上架发布',
+		step4Info: '发布后，你的设计将立即在市场上线。',
+		showAgain: '不再提示',
+		GetStarted: '开始体验',
+	}
 }
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -1770,5 +1770,19 @@ export default {
 		IncorrectEmailFormat: 'The email format is incorrect',
 		CompleteVerificationCode: 'Please enter the complete verification code.',
 		PleaseEnterYourAccountNumberOrPassword: 'Please enter your account number or password'
+	},
+	SellerToolTip: {
+		title: 'How to List your Design',
+		titleInfo: 'Follow these 4 steps to publish your design to the marketplace.',
+		step1Title: 'Select Collection',
+		step1Info: 'Choose the design collection you want to list from.',
+		step2Title: 'Select Sketch',
+		step2Info: 'Pick the sketch you want to list. You can select multiple at a time.',
+		step3Title: 'Edit Sketch Details',
+		step3Info: 'Details are pre-filled from AiDA. Review and complete any missing information.',
+		step4Title: 'Listing Live',
+		step4Info: 'Publish and your design goes live on the marketplace.',
+		showAgain: 'Don’t show me again',
+		GetStarted: 'Get Started',
 	}
 }
--- a/src/views/SellerDashboard/index.vue
+++ b/src/views/SellerDashboard/index.vue
@@ -15,14 +15,17 @@
 		<div class="view">
 			<router-view></router-view>
 		</div>
+		<toolTipBox v-model:visible="visible" @close="()=>{}"></toolTipBox>
 	</div>
 </template>

 <script setup>
 	import { ref, computed } from "vue"
 	import { useRoute, useRouter } from "vue-router"
+	import toolTipBox from './toolTipBox.vue'
 	const route = useRoute()
 	const router = useRouter()
+	const visible = ref(false)
 	const list = ref([
 		{
 			icon: "seller-brandProfile",
--- a/src/views/SellerDashboard/toolTipBox.vue
+++ b/src/views/SellerDashboard/toolTipBox.vue
@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import sellerToolTipImg1 from '@/assets/images/sellerToolTip/sellerToolTip-1.png'
+import sellerToolTipImg2 from '@/assets/images/sellerToolTip/sellerToolTip-2.png'
+import sellerToolTipImg3 from '@/assets/images/sellerToolTip/sellerToolTip-3.png'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+	visible: {
+		type: Boolean,
+		default: false,
+	}
+})
+const emit = defineEmits([
+	'update:visible','close'
+])
+const {t} = useI18n()
+let data = reactive({
+	visible: props.visible,
+	stepList: [
+		{
+			img: sellerToolTipImg1,
+			title: t('SellerToolTip.step1Title'),
+			info: t('SellerToolTip.step1Info'),
+		},{
+			img: sellerToolTipImg2,
+			title: t('SellerToolTip.step2Title'),
+			info: t('SellerToolTip.step2Info'),
+		},{
+			img: sellerToolTipImg3,
+			title: t('SellerToolTip.step3Title'),
+			info: t('SellerToolTip.step3Info'),
+		},{
+			title: t('SellerToolTip.step4Title'),
+			info: t('SellerToolTip.step4Info'),
+		}
+	],
+	showAgain: false,
+})
+let toolTipBoxRef = ref(null)
+
+const cleardata = ()=>{
+	emit('update:visible', false)
+	emit('close', data.showAgain)
+}
+
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const { showAgain } = toRefs(data);
+</script>
+<template>
+    <div ref="toolTipBoxRef" class="toolTipBox" v-if="visible">
+		<a-modal
+			class="collection generalModel"
+			v-model:visible="data.visible"
+			:footer="null"
+			:get-container="() => toolTipBoxRef"
+			width="126.2rem"
+			:maskClosable="false"
+			:centered="true"
+			:closable="false"
+			:mask="true"
+			:keyboard="false"
+			:destroyOnClose="false"
+			:zIndex="1000"
+		>
+			<div class="generalModel_btn">
+				<div class="generalModel_closeIcon" @click.stop="cleardata()">
+					<SvgIcon name="sellerToolTipClose" size="30"></SvgIcon>
+				</div>
+			</div>
+			<div class="titleBox">
+				<div class="title">
+					{{t('SellerToolTip.title')}}
+				</div>
+				<div class="info">
+					{{t('SellerToolTip.titleInfo')}}
+				</div>
+			</div>
+			<div class="stepBox">
+				<div class="step" v-for="(item, index) in data.stepList" :key="index" :class="{'active': index === 2}">
+					<div class="stepNum">
+						<div class="num">
+							{{index}}
+						</div>
+					</div>
+					<div class="title">
+						{{item.title}}
+					</div>
+					<div class="info">
+						{{item.info}}
+					</div>
+					<div class="imgBox" v-if="item.img">
+						<img :src="item.img" alt="">
+					</div>
+				</div>
+			</div>
+			<div class="bottom">
+				<div class="showAgain">
+					<label>
+						<input type="checkbox" v-model="showAgain">
+						{{t('SellerToolTip.showAgain')}}
+					</label>
+				</div>
+				<div class="gallery_btn" @click="cleardata()">
+					{{t('SellerToolTip.GetStarted')}}
+					<i class="fi fi-rr-arrow-small-right"></i>
+				</div>
+			</div>
+		</a-modal>
+	</div>
+	
+</template>
+<style lang="less" scoped>
+	.toolTipBox{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		:deep(.generalModel){
+			height: auto;
+			.ant-modal-body{
+				padding: 6.2rem 8rem;
+				.generalModel_btn{
+					.generalModel_closeIcon{
+						transform: translate(0%, 0%);
+						top: 4rem;
+						right: 4rem;
+					}
+				}
+			}
+		}
+		.titleBox{
+			margin-bottom: 5.2rem;
+			.title{
+				font-size: 3.2rem;
+				font-weight: 400;
+				color:#000000;
+				line-height: 130%;
+				font-family: 'pingfang_semibold';
+				margin-bottom: 1.2rem;
+			}
+			.info{
+				font-weight: 400;
+				font-size: 2.4rem;
+				line-height: 130%;
+				color: #979797;
+			}
+		}
+		.stepBox{
+			margin: 0 1.3rem;
+			display: flex;
+			gap: 7rem;
+			margin-bottom: 9.7rem;
+			.step{
+				--itemWidth: 21.2rem;
+				--textColor: #585858;
+				--indexBgColor: #f6f6f6;
+				--indexTextColor: #000000;
+				--indexBorderColor: #C7C7C7;
+				&:hover{
+					--textColor: #000;
+					--indexBgColor: #000;
+					--indexTextColor: #fff;
+					--indexBorderColor: #000;
+				}
+				width: var(--itemWidth);
+				> div{
+					transition: all .3s;
+				}
+				&.active{
+					--itemWidth: 23.2rem;
+				}
+				.stepNum{
+					width: 6.4rem;
+					height: 6.4rem;
+					margin-bottom: 2.6rem;
+					position: relative;
+					font-weight: 500;
+					font-size: 2.8rem;
+					> .num{
+						position: relative;
+						z-index: 2;
+						color: var(--indexTextColor);
+						background-color: var(--indexBgColor);
+						width: 100%;
+						height: 100%;
+						border-radius: 50%;
+						border: 2px solid var(--indexBorderColor);
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						transition: all .3s;
+					}
+					&::after{
+						content: '';
+						display: block;
+						width: calc(var(--itemWidth) + 8px);
+						height: 1.5px;
+						background-color: #C7C7C7;
+						position: absolute;
+						top: 50%;
+						left: 100%;
+						transform: translate(0%,-50%);
+					}
+				}
+				&:last-child .stepNum::after{
+					display: none;
+				}
+				.title{
+					font-weight: 500;
+					font-size: 2.4rem;
+					line-height: 130%;
+					color: var(--textColor);
+					margin-bottom: 2.6rem;
+				}
+				.info{
+					font-weight: 400;
+					font-size: 1.8rem;
+					line-height: 120%;
+					letter-spacing: -1%;
+					color: var(--textColor);
+					margin-bottom: 2.6rem;
+				}
+				.imgBox{
+					width: 21.2rem;
+					img{
+						width: 100%;
+						object-fit: contain;
+					}
+				}
+			}
+		}
+		.bottom{
+			display: flex;
+			margin: 0 1.3rem;
+			align-items: center;
+			justify-content: space-between;
+			.showAgain{
+				> label{
+					cursor: pointer;
+					font-family: pingfang_regular;
+					font-weight: 400;
+					font-size: 1.4rem;
+					line-height: 150%;
+					letter-spacing: -1%;
+					display: flex;
+					gap: 1.1rem;
+				}
+			}
+			> .gallery_btn{
+				padding: 0 3rem;
+				display: flex;
+				> i{
+					margin-left: 1.2rem;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+			}
+		}
+	}
+</style>