lanecarford_front/src/views/Workshop/selectModel.vue

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
import HeaderTitle from '@/components/HeaderTitle.vue'
import { useRouter } from 'vue-router'
import imgReturn from '@/assets/images/workshop/posture/posture_1.png'
import { useGenerateStore } from '@/stores'
const router = useRouter()
//const props = defineProps({
//})
const emit = defineEmits([
	'view-type'
])
const generateStore = useGenerateStore()
let data = reactive({
	modelList: 
	[
		{
			id:1,
			imgUrl:imgReturn,
		},
		{
			id:2,
			imgUrl:imgReturn,
		},
		{
			id:3,
			imgUrl:imgReturn,
		},
		{
			id:4,
			imgUrl:imgReturn,
		},
		{
			id:5,
			imgUrl:imgReturn,
		},
		{
			id:6,
			imgUrl:imgReturn,
		},

	],
	selectModel:computed(()=>generateStore.userData.model),
})

const setSelectedModelId = (item)=>{
	generateStore.selectModel(item)
}
onMounted(()=>{
	emit('view-type', 1)
})
const toProduct = ()=>{
	router.push({ path: 'product' })
}
onUnmounted(()=>{
})
defineExpose({})
const { modelList, selectModel } = toRefs(data);
</script>
<template>
	<header-title style-type="2" />
	<div class="selectModel">
		<div class="text">
			<div class="title">
				Pick a Model Photo!
			</div>
			<div class="info">
				Try one of our sample images
			</div>
		</div>
		<div class="selectContent">
			<div class="modelList">
				<div v-for="item in modelList" :key="item.id" class="item" @click.stop="setSelectedModelId(item)">
					<img :src="item.imgUrl" alt="">
					<div class="icon" v-if="item.id == selectModel.id">
						<SvgIcon  name="modelSelected" size="60" />
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="footer placeholder"></div>
	<div class="footer">
		<button @click.stop="toProduct">Continue</button>
	</div>
</template>
<style lang="less" scoped>
	.selectModel{
		width: 100%;
		// height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		> .text{
			text-align: center;
			width: 100%;
			margin-top: 3.4rem;
			margin-bottom: 6rem;
			> .title{
				font-family: satoshiBold;
				font-weight: 700;
				font-size: 9.6rem;
				line-height: 124%;
			}
			> .info{
				font-size: 4rem;
				font-weight: 400;
				line-height: 124%;
				margin-top: 1.3rem;
			}
		}
		> .selectContent{
			flex: 1;
			overflow-y: auto;
			padding: 0 11.8rem;
			> .modelList{
				padding: .6rem 2rem;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				> .item{
					width: calc((100% - 2.5rem * 2) / 3);
					border: 2px solid #D9D9D9;
					border-radius: 1rem;
					margin-bottom: 5.4rem;
					height: 75rem;
					> img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
					> .icon{
						position: absolute;
						width: 6rem;
						height: 6rem;
						bottom: -1.8rem;
						right: -2.1rem;
					}
				}
			}
		}
	}
	.footer {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		height: 11.2rem;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background-color: #fff;
		box-shadow: -2.6rem -1.4rem 3.47rem 0 rgba(0, 0, 0, 0.05);
		&.placeholder{
			position: relative;
		}
		> button {
			width: 24.6rem;
			height: 5.9rem;
			border-radius: 0.7rem;
			box-sizing: content-box;
			border: 0.3rem solid #000;
			background-color: #000;
			font-family: satoshiBold;
			font-weight: 700;
			font-size: 3.6rem;
			color: #fff;
			margin-right: 5rem;
			&:active {
				opacity: 0.7;
			}
		}
	}
</style>