153 lines
3.1 KiB
Vue
153 lines
3.1 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
|
||
import SelectItem from "@/components/selectStyle/selectItem.vue";
|
||
import HeaderTitle from '@/components/HeaderTitle.vue'
|
||
import { useRouter } from 'vue-router'
|
||
import editProfile1 from '@/assets/images/workshop/selectStyle/selectStyle1.png'
|
||
import editProfile2 from '@/assets/images/workshop/selectStyle/selectStyle2.png'
|
||
import editProfile3 from '@/assets/images/workshop/selectStyle/selectStyle3.png'
|
||
import editProfile4 from '@/assets/images/workshop/selectStyle/selectStyle4.png'
|
||
import { useGenerateStore } from '@/stores'
|
||
const router = useRouter()
|
||
|
||
//const props = defineProps({
|
||
//})
|
||
const emit = defineEmits([
|
||
'view-type'
|
||
])
|
||
const generateStore = useGenerateStore()
|
||
let data = reactive({
|
||
selectList:
|
||
[
|
||
{
|
||
id:1,
|
||
imgUrl:editProfile1,
|
||
},
|
||
{
|
||
id:2,
|
||
imgUrl:editProfile2,
|
||
},
|
||
{
|
||
id:3,
|
||
imgUrl:editProfile3,
|
||
},
|
||
{
|
||
id:4,
|
||
imgUrl:editProfile4,
|
||
},
|
||
],
|
||
select:computed(()=>generateStore.userData.style)
|
||
})
|
||
|
||
const selectItem = (item)=>{
|
||
generateStore.selectStyle(item)
|
||
}
|
||
|
||
const updateStyle = ({item,index})=>{
|
||
generateStore.updateStyle(item)
|
||
data.selectList[index] = {
|
||
id:9,
|
||
imgUrl:item.imgUrl,
|
||
}
|
||
}
|
||
|
||
const toProduct = ()=>{
|
||
router.push({ path: 'product' })
|
||
}
|
||
onMounted(()=>{
|
||
emit('view-type', 1)
|
||
console.log(useGenerateStore())
|
||
})
|
||
onUnmounted(()=>{
|
||
})
|
||
defineExpose({})
|
||
const { selectList, select } = toRefs(data);
|
||
</script>
|
||
<template>
|
||
<header-title style-type="2" />
|
||
<div class="selectStyle">
|
||
<div class="text">
|
||
<div class="title">
|
||
What’s your Style?
|
||
</div>
|
||
<div class="info">
|
||
Select the outfit that matches you the most.
|
||
</div>
|
||
</div>
|
||
<div class="selectContent">
|
||
<SelectItem :selectList="selectList" v-model:select="select" @selectItem="selectItem" @updateStyle="updateStyle" />
|
||
</div>
|
||
</div>
|
||
<div class="footer placeholder"></div>
|
||
<div class="footer">
|
||
<button @click.stop="toProduct">Continue</button>
|
||
</div>
|
||
</template>
|
||
<style lang="less" scoped>
|
||
.header-title {
|
||
--header-title-background: #f6f6f6;
|
||
}
|
||
.selectStyle{
|
||
width: 100%;
|
||
flex: 1;
|
||
// height: 100%;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #f6f6f6;
|
||
overflow: hidden;
|
||
> .text{
|
||
text-align: center;
|
||
width: 100%;
|
||
margin-top: 3.4rem;
|
||
margin-bottom: 7.2rem;
|
||
> .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{
|
||
padding: 0 3.5rem;
|
||
flex: 1;
|
||
overflow: auto;
|
||
}
|
||
}
|
||
.footer {
|
||
position: fixed;
|
||
width: 100%;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 11.2rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
background-color: #f6f6f6;
|
||
&.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> |