Merge branch 'main' of http://18.167.251.121:10003/aidlab/lanecarford_front
All checks were successful
git提交控制 AiDA WEB-Node.js main 分支构建部署 / build (20.19.0) (push) Has been skipped
All checks were successful
git提交控制 AiDA WEB-Node.js main 分支构建部署 / build (20.19.0) (push) Has been skipped
This commit is contained in:
李志鹏
6
src/assets/icons/close_nocolor.svg
Normal file
6
src/assets/icons/close_nocolor.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M36.876 6.10352e-05C37.278 8.15739e-05 37.7109 0.0606485 38.082 0.210999C38.4531 0.361329 38.7933 0.601565 39.1025 0.872131C39.3809 1.14276 39.5983 1.50348 39.7529 1.86432C39.9385 2.22508 40 2.6163 40 3.03717C40 3.42815 39.9076 3.81982 39.7529 4.18073C39.5983 4.54161 39.3503 4.87217 39.041 5.17291L23.7295 20.0606L26.6367 22.8575L39.041 34.9473C39.5978 35.5188 39.9069 36.2708 39.876 37.0528C39.8759 37.8347 39.5671 38.5566 38.9795 39.128C38.4227 39.6693 37.649 40.0001 36.8447 40.0001C36.0405 40 35.2674 39.7289 34.6797 39.1876L17.1719 22.1651C16.8935 21.8944 16.6761 21.5641 16.5215 21.2032C16.3669 20.8424 16.2745 20.4514 16.2744 20.0606C16.2744 19.6696 16.3668 19.2778 16.5215 18.8868C16.6761 18.526 16.8935 18.1955 17.1719 17.9249L34.6797 0.902405C34.958 0.631804 35.2979 0.390671 35.6689 0.240295C36.0711 0.0899197 36.4738 6.10352e-05 36.876 6.10352e-05Z" fill="#A2A2A2"/>
|
||||
<path d="M36.876 6.10352e-05C37.278 8.15739e-05 37.7109 0.0606485 38.082 0.210999C38.4531 0.361329 38.7933 0.601565 39.1025 0.872131C39.3809 1.14276 39.5983 1.50348 39.7529 1.86432C39.9385 2.22508 40 2.6163 40 3.03717C40 3.42815 39.9076 3.81982 39.7529 4.18073C39.5983 4.54161 39.3503 4.87217 39.041 5.17291L23.7295 20.0606L26.6367 22.8575L39.041 34.9473C39.5978 35.5188 39.9069 36.2708 39.876 37.0528C39.8759 37.8347 39.5671 38.5566 38.9795 39.128C38.4227 39.6693 37.649 40.0001 36.8447 40.0001C36.0405 40 35.2674 39.7289 34.6797 39.1876L17.1719 22.1651C16.8935 21.8944 16.6761 21.5641 16.5215 21.2032C16.3669 20.8424 16.2745 20.4514 16.2744 20.0606C16.2744 19.6696 16.3668 19.2778 16.5215 18.8868C16.6761 18.526 16.8935 18.1955 17.1719 17.9249L34.6797 0.902405C34.958 0.631804 35.2979 0.390671 35.6689 0.240295C36.0711 0.0899197 36.4738 6.10352e-05 36.876 6.10352e-05Z" stroke="#A2A2A2"/>
|
||||
<path d="M3.12402 39.9999C2.72195 39.9999 2.2891 39.9393 1.91797 39.789C1.5469 39.6387 1.20671 39.3984 0.897461 39.1279C0.619115 38.8572 0.40173 38.4965 0.24707 38.1357C0.0615446 37.7749 4.72544e-05 37.3837 2.62463e-07 36.9628C2.9625e-07 36.5719 0.0924056 36.1802 0.247071 35.8193C0.401736 35.4584 0.649669 35.1278 0.958985 34.8271L16.2705 19.9394L13.3633 17.1425L0.958987 5.05267C0.402194 4.48124 0.0930932 3.72915 0.124027 2.9472C0.124068 2.16533 0.432862 1.44339 1.02051 0.872007C1.5773 0.330652 2.35102 -6.29255e-05 3.15528 -6.28544e-05C3.95949 -3.75358e-05 4.73262 0.271107 5.32032 0.812437L22.8281 17.8349C23.1065 18.1056 23.3239 18.4359 23.4785 18.7968C23.6331 19.1576 23.7255 19.5486 23.7256 19.9394C23.7256 20.3304 23.6332 20.7222 23.4785 21.1132C23.3239 21.474 23.1065 21.8045 22.8281 22.0751L5.32031 39.0976C5.04199 39.3682 4.70214 39.6093 4.33105 39.7597C3.92893 39.9101 3.52615 39.9999 3.12402 39.9999Z" fill="#A2A2A2"/>
|
||||
<path d="M3.12402 39.9999C2.72195 39.9999 2.2891 39.9393 1.91797 39.789C1.5469 39.6387 1.20671 39.3984 0.897461 39.1279C0.619115 38.8572 0.40173 38.4965 0.24707 38.1357C0.0615446 37.7749 4.72544e-05 37.3837 2.62463e-07 36.9628C2.9625e-07 36.5719 0.0924056 36.1802 0.247071 35.8193C0.401736 35.4584 0.649669 35.1278 0.958985 34.8271L16.2705 19.9394L13.3633 17.1425L0.958987 5.05267C0.402194 4.48124 0.0930932 3.72915 0.124027 2.9472C0.124068 2.16533 0.432862 1.44339 1.02051 0.872007C1.5773 0.330652 2.35102 -6.29255e-05 3.15528 -6.28544e-05C3.95949 -3.75358e-05 4.73262 0.271107 5.32032 0.812437L22.8281 17.8349C23.1065 18.1056 23.3239 18.4359 23.4785 18.7968C23.6331 19.1576 23.7255 19.5486 23.7256 19.9394C23.7256 20.3304 23.6332 20.7222 23.4785 21.1132C23.3239 21.474 23.1065 21.8045 22.8281 22.0751L5.32031 39.0976C5.04199 39.3682 4.70214 39.6093 4.33105 39.7597C3.92893 39.9101 3.52615 39.9999 3.12402 39.9999Z" stroke="#A2A2A2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
4
src/assets/icons/profile_white.svg
Normal file
4
src/assets/icons/profile_white.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.2 KiB |
BIN
src/assets/images/checked.png
Normal file
BIN
src/assets/images/checked.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@@ -6,6 +6,8 @@ import { useRouter, useRoute } from 'vue-router'
|
||||
import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
|
||||
import { useGenerateStore } from '@/stores'
|
||||
import { generateTryOnEffect, setTryOnEffectFavorite, cancelTryOnEffectFavorite, addTryOnEffectComment } from '@/api/workshop'
|
||||
import { FlowType } from '@/types/enum'
|
||||
|
||||
const router = useRouter()
|
||||
//const props = defineProps({
|
||||
//})
|
||||
@@ -33,7 +35,11 @@ const feedbackForm = ref({
|
||||
|
||||
const onContinue = ()=>{
|
||||
const query = router.currentRoute.value.query
|
||||
router.push({ path: 'uploadFace', query: {...query} })
|
||||
if(query?.flowType == FlowType.MAIN){
|
||||
router.push({ path: 'uploadFace', query: {...query} })
|
||||
}else{
|
||||
router.push({ path: 'creation', query: {...query} })
|
||||
}
|
||||
}
|
||||
|
||||
const changeModel = ()=>{
|
||||
|
||||
@@ -1,261 +1,392 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, inject } from 'vue'
|
||||
import router from '@/router'
|
||||
import { showConfirmDialog } from 'vant'
|
||||
import { useUserInfoStore, useOverallStore } from '@/stores'
|
||||
import { LogOut } from '@/api/login'
|
||||
const userInfoStore = useUserInfoStore()
|
||||
const overallStore = useOverallStore()
|
||||
const emit = defineEmits(['view-type'])
|
||||
const show = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const form = reactive({
|
||||
name: { msg: '', value: userInfoStore.state.userInfo.username },
|
||||
email: { msg: '', value: userInfoStore.state.userInfo.email },
|
||||
password: { show: false, msg: '', value: userInfoStore.state.userInfo.password }
|
||||
})
|
||||
const open = () => {
|
||||
isEdit.value = false
|
||||
show.value = true
|
||||
}
|
||||
const close = () => {
|
||||
show.value = false
|
||||
}
|
||||
const onEditItem = (item) => {
|
||||
if (!form[item]) return
|
||||
form[item].edit = true
|
||||
}
|
||||
const onSaveItem = (item) => {
|
||||
if (!form[item]) return
|
||||
form[item].edit = false
|
||||
}
|
||||
const switchCustomer = () => {
|
||||
console.log('switchCustomer')
|
||||
}
|
||||
const edit = () => {
|
||||
isEdit.value = true
|
||||
}
|
||||
const confirm = () => {
|
||||
overallStore.setLoading(true)
|
||||
setTimeout(() => {
|
||||
overallStore.setLoading(false)
|
||||
isEdit.value = false
|
||||
}, 1000)
|
||||
}
|
||||
const logout = () => {
|
||||
showConfirmDialog({
|
||||
title: 'Log out',
|
||||
message: 'Are you sure you want to log out?',
|
||||
confirmButtonText: 'Yes',
|
||||
cancelButtonText: 'Cancel'
|
||||
})
|
||||
.then(() => {
|
||||
LogOut().then(() => {
|
||||
userInfoStore.logOut()
|
||||
router.push({ path: '/welcome' })
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
defineExpose({ open })
|
||||
import { ref, reactive, onMounted, inject } from 'vue'
|
||||
import router from '@/router'
|
||||
import { showConfirmDialog } from 'vant'
|
||||
import { useUserInfoStore, useOverallStore } from '@/stores'
|
||||
import { LogOut } from '@/api/login'
|
||||
const userInfoStore = useUserInfoStore()
|
||||
const overallStore = useOverallStore()
|
||||
const emit = defineEmits(['view-type', 'selected-customer'])
|
||||
const show = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const form = reactive({
|
||||
name: { msg: '', value: userInfoStore.state.userInfo.username },
|
||||
email: { msg: '', value: userInfoStore.state.userInfo.email },
|
||||
password: { show: false, msg: '', value: userInfoStore.state.userInfo.password }
|
||||
})
|
||||
const open = () => {
|
||||
isEdit.value = false
|
||||
show.value = true
|
||||
}
|
||||
const close = () => {
|
||||
show.value = false
|
||||
}
|
||||
const onEditItem = (item) => {
|
||||
if (!form[item]) return
|
||||
form[item].edit = true
|
||||
}
|
||||
const onSaveItem = (item) => {
|
||||
if (!form[item]) return
|
||||
form[item].edit = false
|
||||
}
|
||||
const switchCustomer = () => {
|
||||
// console.log('switchCustomer')
|
||||
handleShowPopup(true)
|
||||
}
|
||||
const edit = () => {
|
||||
isEdit.value = true
|
||||
}
|
||||
const confirm = () => {
|
||||
overallStore.setLoading(true)
|
||||
setTimeout(() => {
|
||||
overallStore.setLoading(false)
|
||||
isEdit.value = false
|
||||
}, 1000)
|
||||
}
|
||||
const logout = () => {
|
||||
showConfirmDialog({
|
||||
title: 'Log out',
|
||||
message: 'Are you sure you want to log out?',
|
||||
confirmButtonText: 'Yes',
|
||||
cancelButtonText: 'Cancel'
|
||||
})
|
||||
.then(() => {
|
||||
LogOut().then(() => {
|
||||
userInfoStore.logOut()
|
||||
router.push({ path: '/welcome' })
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const showSwitchCustomerPopup = ref(false)
|
||||
|
||||
const customerList = ref([
|
||||
{ id: 'CUST001', nickname: 'Customer One', checked: true },
|
||||
{ id: 'CUST002', nickname: 'Customer Two', checked: false },
|
||||
{ id: 'CUST003', nickname: 'Customer Three', checked: false },
|
||||
{ id: 'CUST004', nickname: 'Customer Four', checked: false },
|
||||
{ id: 'CUST005', nickname: 'Customer Five', checked: false }
|
||||
])
|
||||
// 打开customer选择时关闭profile弹窗 如果不是点击confirem关闭则重新打开profile弹窗
|
||||
const handleShowPopup = (flag: boolean) => {
|
||||
showSwitchCustomerPopup.value = flag
|
||||
show.value = !flag
|
||||
}
|
||||
const handleChangeChecked = (item) => {
|
||||
customerList.value.forEach((customer) => {
|
||||
customer.checked = customer.id === item.id
|
||||
})
|
||||
}
|
||||
const handleSelectCustomer = () => {
|
||||
const selectedCustomer = customerList.value.find((customer) => customer.checked)
|
||||
if (selectedCustomer) {
|
||||
emit('selected-customer', selectedCustomer)
|
||||
}
|
||||
showSwitchCustomerPopup.value = false
|
||||
}
|
||||
|
||||
const openSwitchCustomerPopup = (flag = true) => {
|
||||
showSwitchCustomerPopup.value = flag
|
||||
}
|
||||
|
||||
defineExpose({ open, close, openSwitchCustomerPopup })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<van-popup class="van-popup" v-model:show="show" position="bottom" round>
|
||||
<div class="profile">
|
||||
<div class="header">
|
||||
<span class="title">Profile</span>
|
||||
<van-icon name="cross" class="close" @click="close" />
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="form-item">
|
||||
<div class="label">Your Name</div>
|
||||
<label class="input">
|
||||
<div class="icon"><SvgIcon name="user" size="64" /></div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter your name"
|
||||
v-model="form.name.value"
|
||||
:readonly="!isEdit"
|
||||
/>
|
||||
<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('name')">
|
||||
<van-popup class="van-popup" v-model:show="show" position="bottom" round>
|
||||
<div class="profile">
|
||||
<div class="header">
|
||||
<span class="title">Profile</span>
|
||||
<van-icon name="cross" class="close" @click="close" />
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="form-item">
|
||||
<div class="label">Your Name</div>
|
||||
<label class="input">
|
||||
<div class="icon"><SvgIcon name="user" size="64" /></div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter your name"
|
||||
v-model="form.name.value"
|
||||
:readonly="!isEdit"
|
||||
/>
|
||||
<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('name')">
|
||||
<SvgIcon name="confirmation" size="37" />
|
||||
</div>
|
||||
<div class="icon" v-else @click="onEditItem('name')">
|
||||
<SvgIcon name="edit" size="37" />
|
||||
</div> -->
|
||||
</label>
|
||||
<p class="error" v-show="form.name.msg">{{ form.name.msg }}</p>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="label">Your Email</div>
|
||||
<label class="input">
|
||||
<div class="icon"><SvgIcon name="email" size="64" /></div>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
v-model="form.email.value"
|
||||
:readonly="!isEdit"
|
||||
required
|
||||
/>
|
||||
<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('email')">
|
||||
</label>
|
||||
<p class="error" v-show="form.name.msg">{{ form.name.msg }}</p>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="label">Your Email</div>
|
||||
<label class="input">
|
||||
<div class="icon"><SvgIcon name="email" size="64" /></div>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
v-model="form.email.value"
|
||||
:readonly="!isEdit"
|
||||
required
|
||||
/>
|
||||
<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('email')">
|
||||
<SvgIcon name="confirmation" size="37" />
|
||||
</div>
|
||||
<div class="icon" v-else @click="onEditItem('email')">
|
||||
<SvgIcon name="edit" size="37" />
|
||||
</div> -->
|
||||
</label>
|
||||
<p class="error" v-show="form.email.msg">{{ form.email.msg }}</p>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="label">Password</div>
|
||||
<label class="input">
|
||||
<div class="icon" @click="form.password.show = !form.password.show">
|
||||
<SvgIcon :name="form.password.show ? 'password_1' : 'password_0'" size="64" />
|
||||
</div>
|
||||
<input
|
||||
:type="form.password.show ? 'text' : 'password'"
|
||||
placeholder="Enter your password"
|
||||
v-model="form.password.value"
|
||||
:readonly="!isEdit"
|
||||
/>
|
||||
<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('password')">
|
||||
</label>
|
||||
<p class="error" v-show="form.email.msg">{{ form.email.msg }}</p>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="label">Password</div>
|
||||
<label class="input">
|
||||
<div class="icon" @click="form.password.show = !form.password.show">
|
||||
<SvgIcon :name="form.password.show ? 'password_1' : 'password_0'" size="64" />
|
||||
</div>
|
||||
<input
|
||||
:type="form.password.show ? 'text' : 'password'"
|
||||
placeholder="Enter your password"
|
||||
v-model="form.password.value"
|
||||
:readonly="!isEdit"
|
||||
/>
|
||||
<!-- <div class="icon" v-if="isEdit" @click.stop="onSaveItem('password')">
|
||||
<SvgIcon name="confirmation" size="37" />
|
||||
</div>
|
||||
<div class="icon" v-else @click="onEditItem('password')">
|
||||
<SvgIcon name="edit" size="37" />
|
||||
</div> -->
|
||||
</label>
|
||||
<p class="error" v-show="form.password.msg">{{ form.password.msg }}</p>
|
||||
</div>
|
||||
</label>
|
||||
<p class="error" v-show="form.password.msg">{{ form.password.msg }}</p>
|
||||
</div>
|
||||
|
||||
<template v-if="isEdit">
|
||||
<button class="confirm" @click="confirm">Confirm</button>
|
||||
<p class="tip">Powered by AiDLab for Lane Crawford</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="switch" @click="switchCustomer">Switch Customer</button>
|
||||
<button class="edit" @click="edit">Edit Profile</button>
|
||||
<button class="logout" @click="logout">Log out</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
<template v-if="isEdit">
|
||||
<button class="confirm" @click="confirm">Confirm</button>
|
||||
<p class="tip">Powered by AiDLab for Lane Crawford</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="switch" @click="switchCustomer">Switch Customer</button>
|
||||
<button class="edit" @click="edit">Edit Profile</button>
|
||||
<button class="logout" @click="logout">Log out</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
<van-popup
|
||||
class="user-popup"
|
||||
v-model:show="showSwitchCustomerPopup"
|
||||
round
|
||||
position="bottom"
|
||||
teleport="body"
|
||||
>
|
||||
<div class="popup-title flex">
|
||||
<div class="title-txt">Saved Customer ID</div>
|
||||
<SvgIcon name="close_nocolor" color="#a1a1a1" size="40" @click="handleShowPopup(false)" />
|
||||
</div>
|
||||
<div class="cusomter-list">
|
||||
<div
|
||||
class="customer-item flex flex-align-center flex-between"
|
||||
v-for="item in customerList"
|
||||
:key="item.id"
|
||||
@click="handleChangeChecked(item)"
|
||||
>
|
||||
<div class="info">
|
||||
<div class="name">{{ item.nickname }}</div>
|
||||
<div class="id">{{ item.id }}</div>
|
||||
</div>
|
||||
<div class="select-box">
|
||||
<div class="check-box flex flex-center" v-show="!item.checked">
|
||||
<div class="check"></div>
|
||||
</div>
|
||||
<img v-show="item.checked" class="checked-icon" src="@/assets/images/checked.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="confirm-btn" @click="handleSelectCustomer">Confirm</div>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.van-popup {
|
||||
max-height: 90%;
|
||||
--van-popup-round-radius: 7.8rem;
|
||||
}
|
||||
.profile {
|
||||
margin: 6.5rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
> .header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 0 7rem;
|
||||
margin-bottom: 8rem;
|
||||
> .title {
|
||||
font-family: satoshiBold;
|
||||
font-size: 4.6rem;
|
||||
color: #181725;
|
||||
}
|
||||
> .close {
|
||||
margin-left: auto;
|
||||
font-size: 5rem;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
}
|
||||
> .box {
|
||||
width: 100%;
|
||||
padding: 0 13rem;
|
||||
> div {
|
||||
width: 100%;
|
||||
margin-top: 5.1rem;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
> button {
|
||||
margin-top: 8.5rem;
|
||||
width: 100%;
|
||||
height: 14.5rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 4rem;
|
||||
border: 0.2rem solid #3b3b3b;
|
||||
font-family: satoshiBold;
|
||||
}
|
||||
> .form-item {
|
||||
> .label {
|
||||
margin-bottom: 2.5rem;
|
||||
font-family: satoshiBold;
|
||||
font-size: 2.9rem;
|
||||
line-height: 120%;
|
||||
color: #262422;
|
||||
}
|
||||
> .input {
|
||||
// width: 100%;
|
||||
height: 13.9rem;
|
||||
border-radius: 2.5rem;
|
||||
border: 0.2rem solid #f1ecec;
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
padding: 0 2.5rem;
|
||||
> * {
|
||||
margin-right: 2.5rem;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
> .icon {
|
||||
// margin: 0 2.5rem;
|
||||
--svg-icon-color: #ababab;
|
||||
}
|
||||
> input {
|
||||
width: 0;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-family: satoshiMedium;
|
||||
font-size: 3.5rem;
|
||||
color: #000;
|
||||
border: none;
|
||||
&::placeholder {
|
||||
color: #ababab;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .error {
|
||||
margin-top: 1rem;
|
||||
font-family: satoshiRegular;
|
||||
font-size: 2.5rem;
|
||||
line-height: 120%;
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
> .switch {
|
||||
background-color: transparent;
|
||||
color: #222;
|
||||
}
|
||||
> .confirm,
|
||||
> .edit,
|
||||
> .logout {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
> .tip {
|
||||
font-family: satoshiRegular;
|
||||
text-align: center;
|
||||
font-size: 3rem;
|
||||
color: #a1a1a1;
|
||||
margin-top: 17.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.van-popup {
|
||||
max-height: 90%;
|
||||
--van-popup-round-radius: 7.8rem;
|
||||
}
|
||||
.profile {
|
||||
margin: 6.5rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
> .header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 0 7rem;
|
||||
margin-bottom: 8rem;
|
||||
> .title {
|
||||
font-family: satoshiBold;
|
||||
font-size: 4.6rem;
|
||||
color: #181725;
|
||||
}
|
||||
> .close {
|
||||
margin-left: auto;
|
||||
font-size: 5rem;
|
||||
color: #a1a1a1;
|
||||
}
|
||||
}
|
||||
> .box {
|
||||
width: 100%;
|
||||
padding: 0 13rem;
|
||||
> div {
|
||||
width: 100%;
|
||||
margin-top: 5.1rem;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
> button {
|
||||
margin-top: 8.5rem;
|
||||
width: 100%;
|
||||
height: 14.5rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 4rem;
|
||||
border: 0.2rem solid #3b3b3b;
|
||||
font-family: satoshiBold;
|
||||
}
|
||||
> .form-item {
|
||||
> .label {
|
||||
margin-bottom: 2.5rem;
|
||||
font-family: satoshiBold;
|
||||
font-size: 2.9rem;
|
||||
line-height: 120%;
|
||||
color: #262422;
|
||||
}
|
||||
> .input {
|
||||
// width: 100%;
|
||||
height: 13.9rem;
|
||||
border-radius: 2.5rem;
|
||||
border: 0.2rem solid #f1ecec;
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
padding: 0 2.5rem;
|
||||
> * {
|
||||
margin-right: 2.5rem;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
> .icon {
|
||||
// margin: 0 2.5rem;
|
||||
--svg-icon-color: #ababab;
|
||||
}
|
||||
> input {
|
||||
width: 0;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-family: satoshiMedium;
|
||||
font-size: 3.5rem;
|
||||
color: #000;
|
||||
border: none;
|
||||
&::placeholder {
|
||||
color: #ababab;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .error {
|
||||
margin-top: 1rem;
|
||||
font-family: satoshiRegular;
|
||||
font-size: 2.5rem;
|
||||
line-height: 120%;
|
||||
color: #ff0000;
|
||||
}
|
||||
}
|
||||
> .switch {
|
||||
background-color: transparent;
|
||||
color: #222;
|
||||
}
|
||||
> .confirm,
|
||||
> .edit,
|
||||
> .logout {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
> .tip {
|
||||
font-family: satoshiRegular;
|
||||
text-align: center;
|
||||
font-size: 3rem;
|
||||
color: #a1a1a1;
|
||||
margin-top: 17.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.van-popup.user-popup {
|
||||
height: 116.1rem;
|
||||
color: #181725;
|
||||
border-top-left-radius: 7.8rem;
|
||||
border-top-right-radius: 7.8rem;
|
||||
.c-svg {
|
||||
width: initial;
|
||||
}
|
||||
.popup-title {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 700;
|
||||
font-family: 'satoshiBold';
|
||||
font-size: 4.8rem;
|
||||
padding: 12rem 7.4rem 7.8rem 6.7rem;
|
||||
border-bottom: 0.26rem solid #e2e2e2b2;
|
||||
}
|
||||
.cusomter-list {
|
||||
padding: 0 7rem 0 6.6rem;
|
||||
font-family: 'satoshiMedium';
|
||||
color: #000;
|
||||
/* Fixed list area: show up to 4 items, enable vertical scroll when overflow */
|
||||
height: 64.8rem; /* 4 * 16.2rem (customer-item height) */
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
.customer-item {
|
||||
height: 16.2rem;
|
||||
border-bottom: 0.26rem solid #e2e2e2b2;
|
||||
.info {
|
||||
.name {
|
||||
font-size: 3.6rem;
|
||||
}
|
||||
.id {
|
||||
font-size: 3.6rem;
|
||||
color: #b3b3b3;
|
||||
}
|
||||
}
|
||||
.checked-icon,
|
||||
.check-box {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.check {
|
||||
width: 4.8rem;
|
||||
height: 4.8rem;
|
||||
border-radius: 50%;
|
||||
border: 0.4rem solid #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.confirm-btn {
|
||||
margin: 4.9rem 12.7rem 0 13.3rem;
|
||||
border: 0.25rem solid #3b3b3b;
|
||||
width: 82rem;
|
||||
height: 14.5rem;
|
||||
border-radius: 2rem;
|
||||
font-family: 'satoshiBold';
|
||||
font-weight: 700;
|
||||
font-size: 4rem;
|
||||
line-height: 14.5rem;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,6 +7,8 @@ import { useRouter } from 'vue-router'
|
||||
import { useGenerateStore, useUserInfoStore } from '@/stores'
|
||||
import { showToast } from 'vant';
|
||||
import { generateRequestOutfit, getRequestOutfit } from '@/api/workshop'
|
||||
import { FlowType } from '@/types/enum'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
//const props = defineProps({
|
||||
@@ -45,7 +47,11 @@ const toProduct = ()=>{
|
||||
generateStore.setIsGenerate(true)
|
||||
}
|
||||
const query = router.currentRoute.value.query
|
||||
router.push({ path: 'product', query: {...query} })
|
||||
if(query?.flowType == FlowType.MAIN){
|
||||
router.push({ path: 'product', query: {...query} })
|
||||
}else{
|
||||
router.push({ path: 'creation', query: {...query} })
|
||||
}
|
||||
}
|
||||
|
||||
const requestOutfit = ({num,index})=>{
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div
|
||||
class="customer-container safe-area-top flex flex-column"
|
||||
:class="{ 'form-mode': pageMode === 'form' }"
|
||||
:class="{ 'form-mode': pageMode !== 'entry' }"
|
||||
>
|
||||
<div class="setting flex flex-between">
|
||||
<SvgIcon name="left" size="70" @click.stop="handleBack" />
|
||||
<SvgIcon name="setting" size="70" />
|
||||
<SvgIcon name="profile_white" size="55" @click="handleOpenProfile" />
|
||||
</div>
|
||||
<template v-if="pageMode === 'entry'">
|
||||
<div class="content flex-1 flex flex-center flex-column">
|
||||
<div class="text">Who is Your Customer?</div>
|
||||
<div class="btn-list flex flex-center">
|
||||
<button class="sandblasted-blurred btn">
|
||||
<button class="sandblasted-blurred btn" @click="handleChangeMode('create')">
|
||||
<span>Create</span>
|
||||
</button>
|
||||
<button class="sandblasted-blurred btn" @click="handleChangeMode('form')">
|
||||
@@ -23,18 +23,27 @@
|
||||
<template v-else>
|
||||
<div class="form-container flex-1 flex flex-column flex-center">
|
||||
<div class="text">
|
||||
<div class="form-title">Customer ID</div>
|
||||
<div class="form-title">{{ formTitle }}</div>
|
||||
<div class="description">
|
||||
<p>Redefine the styling experience with AI.</p>
|
||||
<p>Use Styling Angel to speed up your fashion journey.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-form">
|
||||
<div class="glass-form" :class="{ create: pageMode === 'create' }">
|
||||
<div class="form-field" v-if="pageMode === 'create'">
|
||||
<label class="field-label">VIP ID</label>
|
||||
<input
|
||||
v-model="customerData.vipId"
|
||||
type="text"
|
||||
placeholder="Enter your ID"
|
||||
class="form-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label class="field-label">Nickname</label>
|
||||
<input
|
||||
v-model="customerData.vipId"
|
||||
v-model="customerData.nickname"
|
||||
type="text"
|
||||
placeholder="Enter name"
|
||||
class="form-input"
|
||||
@@ -42,41 +51,45 @@
|
||||
</div>
|
||||
<button class="confirm-btn" @click="handleConfirm">Confirm</button>
|
||||
</div>
|
||||
<div class="show-all">Show All</div>
|
||||
<div v-if="pageMode === 'form'" class="show-all" @click="handleShowPopup(true)">
|
||||
Show All
|
||||
</div>
|
||||
<div class="copyright">Powered by AiDLab for Lane Crawford</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<Profile ref="profileRef" @selected-customer="handleSelectCustomer" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useGenerateStore, useUserInfoStore } from '@/stores'
|
||||
import { showToast } from 'vant'
|
||||
import { customerCheckin } from '@/api/workshop'
|
||||
import Profile from '../Workshop/profile.vue'
|
||||
|
||||
const profileRef = ref<typeof Profile>(null)
|
||||
const handleOpenProfile = () => {
|
||||
profileRef.value.open()
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const generateStore = useGenerateStore()
|
||||
|
||||
type PageMode = 'form' | 'entry'
|
||||
type PageMode = 'form' | 'entry' | 'create'
|
||||
const pageMode = ref<PageMode>('entry')
|
||||
|
||||
const handleBack = (e?: Event) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
if (pageMode.value === 'form') {
|
||||
pageMode.value = 'entry'
|
||||
return
|
||||
}
|
||||
router.go(-1)
|
||||
}
|
||||
const formTitle = computed(() => {
|
||||
return pageMode.value === 'entry' ? 'Customer ID' : 'Create Profile'
|
||||
})
|
||||
|
||||
const handleChangeMode = (mode: PageMode) => {
|
||||
pageMode.value = mode
|
||||
}
|
||||
|
||||
const customerData = ref({
|
||||
vipId: ''
|
||||
vipId: '',
|
||||
nickname: ''
|
||||
// email: ''
|
||||
})
|
||||
|
||||
@@ -88,14 +101,41 @@ const handleConfirm = async () => {
|
||||
})
|
||||
return
|
||||
}
|
||||
if (pageMode.value === 'form') {
|
||||
await customerCheckin({ nickname: customerData.value.nickname }).then((res) => {
|
||||
useUserInfoStore().resetGenerateParams()
|
||||
generateStore.setCustomerInfo(res)
|
||||
router.push('/workshop/home')
|
||||
})
|
||||
} else {
|
||||
// 创建接口
|
||||
}
|
||||
}
|
||||
|
||||
customerCheckin(customerData.value).then((res) => {
|
||||
useUserInfoStore().resetGenerateParams()
|
||||
// console.log('res', res)
|
||||
generateStore.setCustomerInfo(res)
|
||||
// router.push('/workshop/stylist/index')
|
||||
router.push('/workshop/home')
|
||||
})
|
||||
const handleShowPopup = (flag: Boolean) => {
|
||||
// showPopup.value = flag
|
||||
profileRef.value.openSwitchCustomerPopup(flag)
|
||||
}
|
||||
|
||||
const handleSelectCustomer = (value) => {
|
||||
console.log(value)
|
||||
// if (selected) {
|
||||
// customerData.value.nickname = selected.nickname
|
||||
// }
|
||||
}
|
||||
|
||||
const handleBack = (e?: Event) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
if (pageMode.value !== 'entry') {
|
||||
pageMode.value = 'entry'
|
||||
customerData.value = {
|
||||
vipId: '',
|
||||
nickname: ''
|
||||
}
|
||||
return
|
||||
}
|
||||
router.go(-1)
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@@ -180,6 +220,9 @@ const handleConfirm = async () => {
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.create {
|
||||
height: 78.8rem;
|
||||
}
|
||||
|
||||
background: radial-gradient(
|
||||
100% 100% at 0% 0%,
|
||||
|
||||
Reference in New Issue
Block a user