新增home页面
This commit is contained in:
X1627315083
99
src/views/Workshop/home.vue
Normal file
99
src/views/Workshop/home.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from "vue";
|
||||
import HeaderTitle from '@/components/HeaderTitle.vue'
|
||||
import FooterNavigation from '@/components/FooterNavigation.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
|
||||
//const props = defineProps({
|
||||
//})
|
||||
const emit = defineEmits([
|
||||
'view-type'
|
||||
])
|
||||
|
||||
// const data = reactive({
|
||||
// })
|
||||
|
||||
onMounted(()=>{
|
||||
emit('view-type', 1)
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
// const { } = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<header-title style-type="2" />
|
||||
<div class="homeNavPage">
|
||||
<div class="title">
|
||||
Welcome Back,
|
||||
What can I help you today?
|
||||
</div>
|
||||
<div class="navBox">
|
||||
<div class="navTitle">
|
||||
Explore
|
||||
</div>
|
||||
<div class="navList">
|
||||
<div class="item" @click="()=>router.push('/stylist/index')">
|
||||
<img src="@/assets/images/nav1.png" alt="">
|
||||
</div>
|
||||
<div class="item" @click="()=>router.push('/workshop/uploadFace')">
|
||||
<img src="@/assets/images/nav2.png" alt="">
|
||||
</div>
|
||||
<div class="item" @click="()=>router.push('/stylist/index')">
|
||||
<img src="@/assets/images/nav3.png" alt="">
|
||||
</div>
|
||||
<div class="item" @click="()=>router.push('/stylist/customer')">
|
||||
<img src="@/assets/images/nav4.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer-navigation />
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.header-title {
|
||||
--header-title-background: #fff;
|
||||
--header-title-height: 12rem !important;
|
||||
}
|
||||
.homeNavPage{
|
||||
> .title{
|
||||
padding: 0 8.4rem;
|
||||
font-family: satoshiBold;
|
||||
font-weight: 700;
|
||||
margin-top: 6.8rem;
|
||||
font-size: 9.6rem;
|
||||
line-height: 124%;
|
||||
background: radial-gradient(99.56% 47.68% at 99.56% 93.08%, #E6E6E6 0%, #443E37 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
|
||||
linear-gradient(120.09deg, #B3B3B3 0%, rgba(255, 255, 255, 0) 35.41%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent; /* 文字本身透明，显示渐变背景 */
|
||||
background-clip: text;
|
||||
}
|
||||
> .navBox{
|
||||
> .navTitle{
|
||||
padding: 0 8.4rem;
|
||||
font-family: satoshiBold;
|
||||
font-weight: 700;
|
||||
font-size: 5.2rem;
|
||||
margin: 6.3rem 0;
|
||||
}
|
||||
> .navList{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 7.4rem;
|
||||
gap: 4.8rem;
|
||||
> .item{
|
||||
width: 44.2rem;
|
||||
height: 41.6rem;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import { onMounted, onUnmounted, reactive, ref, toRefs } from "vue";
|
||||
import HeaderTitle from '@/components/HeaderTitle.vue'
|
||||
import FooterNavigation from '@/components/FooterNavigation.vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
|
||||
import { useGenerateStore } from '@/stores'
|
||||
import { generateTryOnEffect, setTryOnEffectFavorite, cancelTryOnEffectFavorite } from '@/api/workshop'
|
||||
import { generateTryOnEffect, setTryOnEffectFavorite, cancelTryOnEffectFavorite, addTryOnEffectComment } from '@/api/workshop'
|
||||
const router = useRouter()
|
||||
//const props = defineProps({
|
||||
//})
|
||||
@@ -20,6 +20,12 @@ let data = reactive({
|
||||
|
||||
const generateStore = useGenerateStore()
|
||||
|
||||
const vanDialogShow = ref(false)
|
||||
const feedbackForm = ref({
|
||||
text:'',
|
||||
state:1,//是否提交状态
|
||||
})
|
||||
|
||||
// const setSelectedModelId = (item)=>{
|
||||
// data.selectedModelId = item.id;
|
||||
// }
|
||||
@@ -79,6 +85,33 @@ const setLike = ()=>{
|
||||
}
|
||||
}
|
||||
|
||||
const feedback = ()=>{
|
||||
vanDialogShow.value = true
|
||||
}
|
||||
|
||||
const closeFeedback = ()=>{
|
||||
vanDialogShow.value = false
|
||||
feedbackForm.value.text = ''
|
||||
feedbackForm.value.state = 1
|
||||
}
|
||||
|
||||
const handleSubmit = ()=>{
|
||||
if(feedbackForm.value.state == 1){
|
||||
let value = {
|
||||
tryOnEffectsId:generateStore.originalTryOnIdNoRein,
|
||||
visitRecordId:generateStore.visitRecordId,
|
||||
customerId:generateStore.customerId,
|
||||
suggestion:feedbackForm.value.text,
|
||||
}
|
||||
addTryOnEffectComment(value).then(()=>{
|
||||
feedbackForm.value.state = 2
|
||||
})
|
||||
}else{
|
||||
closeFeedback()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emit('view-type', 1)
|
||||
if (generateStore.isGenerate) {
|
||||
@@ -110,6 +143,7 @@ const { isLoading } = toRefs(data);
|
||||
<img :src="generateStore.originalTryOn.tryOnUrl" />
|
||||
<div class="operation">
|
||||
<div @click="setLike"><SvgIcon :name="`love_${generateStore.originalTryOn.isLike ? '1' : '0'}`" size="35" /></div>
|
||||
<div @click="feedback"><SvgIcon name="pen" size="40" /></div>
|
||||
<div @click="startGenerate"><SvgIcon name="reload" size="35" /></div>
|
||||
<!-- <div><SvgIcon name="download" size="35" /></div> -->
|
||||
</div>
|
||||
@@ -122,6 +156,28 @@ const { isLoading } = toRefs(data);
|
||||
</div>
|
||||
</div>
|
||||
<footer-navigation is-placeholder v-if="!isLoading"/>
|
||||
<van-dialog v-model:show="vanDialogShow" :show-confirm-button="false" width="52.8rem">
|
||||
<div class="feedback">
|
||||
<div class="feedbackClose" @click="closeFeedback"><SvgIcon name="close" size="40" /></div>
|
||||
<div class="succeedIcon" v-if="feedbackForm.state == 2">
|
||||
<img src="@/assets/images/workshop/succeed.png" />
|
||||
</div>
|
||||
<div class="content" state='1' v-if="feedbackForm.state == 1">
|
||||
<div class="title">User Feedback</div>
|
||||
<div class="info">Do you have any suggestions<br /> for this outfit? </div>
|
||||
</div>
|
||||
<div class="content" state='2' v-else>
|
||||
<div class="title">Congratulation!</div>
|
||||
<div class="info">Your feedback will be very<br /> helpful to us.</div>
|
||||
</div>
|
||||
<div class="feedbackForm" v-if="feedbackForm.state == 1">
|
||||
<textarea v-model="feedbackForm.text" placeholder="Please enter your feedback" />
|
||||
</div>
|
||||
<div class="submit" @click="handleSubmit">
|
||||
Confirm
|
||||
</div>
|
||||
</div>
|
||||
</van-dialog>
|
||||
<div class="loading-container" v-if="isLoading">
|
||||
<GenerateLoading title="Generating Results..." />
|
||||
</div>
|
||||
@@ -229,4 +285,75 @@ const { isLoading } = toRefs(data);
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
}
|
||||
.feedback{
|
||||
position: relative;
|
||||
border-radius: 3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
> .succeedIcon{
|
||||
width: 12.8rem;
|
||||
height: 12.8rem;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
> .feedbackClose{
|
||||
position: absolute;
|
||||
top: 3.5rem;
|
||||
right: 3rem;
|
||||
}
|
||||
> .content{
|
||||
padding-top: 5.8rem;
|
||||
text-align: center;
|
||||
margin-bottom: 3.7rem;
|
||||
&.content[data-state='2']{
|
||||
margin-top: 5.2rem;
|
||||
margin-bottom: 5.8rem;
|
||||
}
|
||||
> .title{
|
||||
font-family: satoshiBold;
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
line-height: 2rem;
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
> .info{
|
||||
font-size: 3.2rem;
|
||||
line-height: 4.4rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
> .feedbackForm{
|
||||
margin-bottom: 5.1rem;
|
||||
> textarea{
|
||||
width: 43.1rem;
|
||||
height: 29.4rem;
|
||||
border-radius: 2.7rem;
|
||||
background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
|
||||
linear-gradient(0deg, #F4F4F4, #F4F4F4);
|
||||
border: .274rem solid;
|
||||
border-image-source: radial-gradient(80.79% 50% at 50% 50%, #EFAC85 0%, rgba(255, 255, 255, 0) 100%),
|
||||
radial-gradient(99.56% 93.08% at 99.56% 93.08%, #E6E6E6 0%, #443E37 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
|
||||
linear-gradient(120.09deg, #B3B3B3 0%, rgba(255, 255, 255, 0) 35.41%);
|
||||
box-shadow: 0px 1.1rem 1rem 0px #0000001A;
|
||||
padding: 2.4rem 2.1rem;
|
||||
}
|
||||
}
|
||||
> .submit{
|
||||
width: 26.8rem;
|
||||
line-height: 6.4rem;
|
||||
border-radius: 1.5rem;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
border: 1.54px solid #000000;
|
||||
font-size: 3.2rem;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
margin: 0 auto 3.6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user