aida_front/src/views/SellerDashboard/toolTipBox.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import sellerToolTipImg1 from '@/assets/images/seller/sellerToolTip-1.png'
import sellerToolTipImg2 from '@/assets/images/seller/sellerToolTip-2.png'
import sellerToolTipImg3 from '@/assets/images/seller/sellerToolTip-3.png'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { Https } from '@/tool/https'
const props = defineProps({
	visible: {
		type: Boolean,
		default: false,
	}
})
const emit = defineEmits([
	'update:visible','close'
])
const router = useRouter()
const {t} = useI18n()
let data = reactive({
	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 routerPath = ref('')


const cleardata = ()=>{
	emit('update:visible', false)
	emit('close', data.showAgain)
}

const getStarted = ()=>{
	if(data.showAgain){Https.axiosPost(Https.httpUrls.setListingPopup)}
	emit('update:visible', false)
	router.push({path:routerPath.value})
}


onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({routerPath})
const { showAgain } = toRefs(data);
</script>
<template>
    <div ref="toolTipBoxRef" class="toolTipBox" v-if="visible">
		<a-modal
			class="collection generalModel"
			v-model:visible="props.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="seller-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="getStarted">
					{{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_heavy;
				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);
					font-family: pingfang_heavy;
					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>