diff --git a/src/assets/icons/reTry.svg b/src/assets/icons/reTry.svg index 230cd29..b5bb72e 100644 --- a/src/assets/icons/reTry.svg +++ b/src/assets/icons/reTry.svg @@ -1,9 +1,7 @@ - - - - - - - - - + + + + + + + \ No newline at end of file diff --git a/src/components/gradientButton.vue b/src/components/gradientButton.vue index 3acfb3a..a2968d9 100644 --- a/src/components/gradientButton.vue +++ b/src/components/gradientButton.vue @@ -48,11 +48,11 @@ const {} = toRefs(data); left: 50%; border-radius: var(--gradientButtonBorderRadius); transform: translate(-50%, -50%); - background: linear-gradient(125deg, - #f1f1f1 0%, - #000 40%, - #000 65%, - #fff 100%); + background: linear-gradient(156deg, + #d3d3d3 0%, + #8a8682 40%, + #8a8682 65%, + #ebebeb 100%); } } \ No newline at end of file diff --git a/src/components/selectStyle/selectItem.vue b/src/components/selectStyle/selectItem.vue index c9baa4b..c3c2c73 100644 --- a/src/components/selectStyle/selectItem.vue +++ b/src/components/selectStyle/selectItem.vue @@ -82,22 +82,11 @@ const {} = toRefs(data);
-
- + - -
+ --> @@ -109,7 +98,7 @@ const {} = toRefs(data); flex-wrap: wrap; justify-content: space-between; > .item{ - width: calc(50% - 3.1rem / 2); + width: calc(50% - 3.5rem / 2); position: relative; // margin-bottom: 3.3rem; display: flex; @@ -126,7 +115,7 @@ const {} = toRefs(data); align-items: center; flex-wrap: wrap; height: 45rem; - margin: 2.4rem 0; + margin: 2.3rem 0; background-color: #fff; justify-content: center; border: .6px solid #acacac; @@ -170,26 +159,26 @@ const {} = toRefs(data); // max-height: 50%; } } - > .btn{ - display: flex; - align-items: center; - justify-content: flex-end; - > div{ - color: #000; - margin-right: 1.2rem; - border-radius: 50%; - width: 5.2rem; - height: 5.2rem; - padding: 1rem; - background-color: #fff; - &:last-child{ - margin-right: 0rem; - } - &:hover{ - color: #000; - } - } - } + // > .btn{ + // display: flex; + // align-items: center; + // justify-content: flex-end; + // > div{ + // color: #000; + // margin-right: 1.2rem; + // border-radius: 50%; + // width: 5.2rem; + // height: 5.2rem; + // padding: 1rem; + // background-color: #fff; + // &:last-child{ + // margin-right: 0rem; + // } + // &:hover{ + // color: #000; + // } + // } + // } } } \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index 307d257..4eed819 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -121,7 +121,7 @@ const router = createRouter({ { path: '/workshop/selectStyle', name: 'selectStyle', - component: () => import('../views/Workshop/selectStyle.vue'), + component: () => import('../views/Workshop/selectStyle/index.vue'), meta: { verify: () => VerifyIDs(2) } }, { diff --git a/src/stores/modules/generate.ts b/src/stores/modules/generate.ts index 4be5501..f985ef3 100644 --- a/src/stores/modules/generate.ts +++ b/src/stores/modules/generate.ts @@ -15,7 +15,12 @@ export const useGenerateStore = defineStore({ isLike: false, //是否喜欢 status: '' }, - styleList: [{}, {}, {}, {}], + styleList: [ + {id:'',taskId:'',status:'',path:''}, + {id:'',taskId:'',status:'',path:''}, + {id:'',taskId:'',status:'',path:''}, + {id:'',taskId:'',status:'',path:''}, + ], model: { id: '' }, @@ -98,6 +103,12 @@ export const useGenerateStore = defineStore({ taskId:'', status: '' } + this.styleList = [ + {id:'',taskId:'',status:'',path:''}, + {id:'',taskId:'',status:'',path:''}, + {id:'',taskId:'',status:'',path:''}, + {id:'',taskId:'',status:'',path:''}, + ] }, //模特相关 selectModel(data: any) { @@ -107,7 +118,12 @@ export const useGenerateStore = defineStore({ this.isGenerate = isGenerate }, clearProductData() { - this.styleList = [{}, {}, {}, {}] + this.styleList = [ + {id:'',taskId:'',status:'',path:''}, + {id:'',taskId:'',status:'',path:''}, + {id:'',taskId:'',status:'',path:''}, + {id:'',taskId:'',status:'',path:''}, + ] this.style = { id: '', path: '', diff --git a/src/views/Workshop/homeNav.vue b/src/views/Workshop/homeNav.vue index e3472a8..1a35eff 100644 --- a/src/views/Workshop/homeNav.vue +++ b/src/views/Workshop/homeNav.vue @@ -19,20 +19,6 @@ const navDisabledList = ref([]) // const data = reactive({ // }) -const clickSwitchVIPID = ()=>{ - showConfirmDialog({ - title: 'Switch VIP ID?', - message: 'You have unsaved changes. Your progress will be lost.', - confirmButtonText: 'Yes', - cancelButtonText: 'Cancel', - }) - .then(() => { - MyEvent.emit('clear-generate-state') - MyEvent.emit('clearAllCache') - router.push({ name: 'customer', query: { demo: 1 } }) - }) - .catch(() => {}) -} const openFlow = (item: any)=>{ item.click && item.click() const query = route.query diff --git a/src/views/Workshop/index.vue b/src/views/Workshop/index.vue index 741e417..1f99d79 100644 --- a/src/views/Workshop/index.vue +++ b/src/views/Workshop/index.vue @@ -21,8 +21,11 @@ + - + \ No newline at end of file diff --git a/src/views/asistant/components/GenerateLoading.vue b/src/views/asistant/components/GenerateLoading.vue index 721480e..0714ea7 100644 --- a/src/views/asistant/components/GenerateLoading.vue +++ b/src/views/asistant/components/GenerateLoading.vue @@ -113,7 +113,7 @@ onMounted(() => { .loading-image { width: 36.4rem; height: 36.4rem; - animation: rotate 1s linear infinite; + animation: rotate 1.5s ease-in-out infinite; } .loading-shadow { @@ -146,11 +146,14 @@ onMounted(() => { } @keyframes rotate { - from { - transform: rotate(0deg); + 0% { + transform: translateY(0px); } - to { - transform: rotate(360deg); + 50% { + transform: translateY(-100px); + } + 100% { + transform: translateY(0px); } } diff --git a/src/views/login/WelcomePage.vue b/src/views/login/WelcomePage.vue index 75c2c50..e7ecf31 100644 --- a/src/views/login/WelcomePage.vue +++ b/src/views/login/WelcomePage.vue @@ -55,6 +55,7 @@ const goToLogin = () => { .title { font-family: 'satoshiMedium'; line-height: 120%; + font-size: 11rem; // letter-spacing: -0.02em; } .subtitle { diff --git a/src/views/login/customer.vue b/src/views/login/customer.vue index 23d660a..c83541d 100644 --- a/src/views/login/customer.vue +++ b/src/views/login/customer.vue @@ -74,7 +74,7 @@ import { ref, computed } from 'vue' import { useRouter } from 'vue-router' import { useGenerateStore, useUserInfoStore } from '@/stores' -import { showToast } from 'vant' +import { showToast, closeToast } from 'vant' import { customerCheckin, createCustomer, type CreateCustomerParams } from '@/api/workshop' import Profile from '../Workshop/profile.vue' import MyEvent from '@/utils/myEvent' @@ -86,6 +86,7 @@ const handleOpenProfile = () => { const router = useRouter() const generateStore = useGenerateStore() +const loading = ref(false) type PageMode = 'form' | 'entry' | 'create' const pageMode = ref('entry') @@ -104,50 +105,45 @@ const customerData = ref({ }) const handleConfirm = async () => { - if (pageMode.value === 'form') { - if (customerData.value.nickname === '') { - showToast({ - message: 'please input the nickname' - }) - return - } + if (loading.value) return + const nickname = (customerData.value.nickname || '').trim() + const vipId = (customerData.value.vipId || '').trim() - customerCheckin({ nickname: customerData.value.nickname }).then((res) => { - useUserInfoStore().resetGenerateParams() - generateStore.setCustomerInfo(res) - MyEvent.emit('clear-generate-state') - router.push('/workshop/home') - }) - } else { - if (customerData.value.vipId === '') { - showToast({ - message: 'please input the VIP ID' - }) - return - } - if (customerData.value.nickname === '') { - showToast({ - message: 'please input the nickname' - }) - return - } + if (!nickname) { + showToast({ message: 'please input the nickname' }) + return + } - createCustomer({ - nickname: customerData.value.nickname, - vipId: customerData.value.vipId - } as CreateCustomerParams).then((res) => { - showToast({ - message: 'Customer created successfully' - }) - handleBack() + if (pageMode.value === 'create' && !vipId) { + showToast({ message: 'please input the VIP ID' }) + return + } + + loading.value = true + showToast({ message: 'Processing...', duration: 0, type: 'loading' }) + try { + if (pageMode.value === 'create') { + await createCustomer({ nickname, vipId } as CreateCustomerParams) + showToast({ message: 'Customer created successfully' }) MyEvent.emit('update-customer-list') - }) + } + + const res = await customerCheckin({ nickname }) + useUserInfoStore().resetGenerateParams() + generateStore.setCustomerInfo(res) + MyEvent.emit('clear-generate-state') + router.push('/workshop/home') + } catch (err: any) { + showToast({ message: err?.message || 'Operation failed' }) + } finally { + loading.value = false + closeToast() } } const handleShowPopup = (flag: Boolean) => { // showPopup.value = flag - profileRef.value.openSwitchCustomerPopup(flag) + profileRef.value.handleShowPopup(flag) } const handleSelectCustomer = (value) => { diff --git a/src/views/stylist/dressfor.vue b/src/views/stylist/dressfor.vue index c276fba..e75eeeb 100644 --- a/src/views/stylist/dressfor.vue +++ b/src/views/stylist/dressfor.vue @@ -220,7 +220,7 @@ onUnmounted(() => { background-size: cover; background-position: center; background-repeat: no-repeat; - padding: 6rem 0 0 0; + padding: 15.9rem 0 0 0; .content { .loading-container { :deep(.loading-image) { @@ -229,10 +229,11 @@ onUnmounted(() => { animation: none; } :deep(.loading-shadow) { + background-color: #000; width: 9.2rem; height: 2.4rem; filter: blur(6px); - opacity: 0.5; + opacity: 0.2; margin: 2.4rem 0 0; // background-color: #d9d9d9; } @@ -247,8 +248,10 @@ onUnmounted(() => { font-weight: 700; line-height: 1.12; background: #b3b3b3; - background: linear-gradient(120deg, #b3b3b3 1%, rgba(0, 0, 0, 0) 48%), - linear-gradient(344deg, #b3b3b2 16%, #000000 66%); + background: radial-gradient(80.79% 50% at 50% 50%, #d1c7c2 0%, rgba(255, 255, 255, 0) 100%), + radial-gradient(99.56% 93.08% at 99.56% 93.08%, #e6e6e6 0%, #000000 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; background-clip: text; @@ -325,7 +328,7 @@ onUnmounted(() => { text-align: center; border-radius: 4.6rem; padding: 0 2.15rem; - &.active{ + &.active { background-color: #f5f5f5; } } diff --git a/src/views/stylist/index.vue b/src/views/stylist/index.vue index 8544b66..5ab31e4 100644 --- a/src/views/stylist/index.vue +++ b/src/views/stylist/index.vue @@ -166,7 +166,7 @@ const handleContinue = () => { display: flex; flex-direction: column; padding: 2rem; - padding-top: 6rem; + padding-top: 10rem; } .header { @@ -178,6 +178,8 @@ const handleContinue = () => { color: white; line-height: 96%; font-family: 'satoshiBold'; + letter-spacing: -0.04rem; + margin-bottom: 3.2rem; } .sub-title{ font-family: 'satoshiRegular'; diff --git a/src/views/stylist/sex.vue b/src/views/stylist/sex.vue index 1bf1cc1..90b8cfb 100644 --- a/src/views/stylist/sex.vue +++ b/src/views/stylist/sex.vue @@ -59,11 +59,14 @@ const handleSelect = (value: string) => { font-weight: 700; font-size: 11rem; line-height: 106%; + letter-spacing: -0.02rem; + margin-bottom: 4.6rem; } .desc { font-family: 'satoshiRegular'; - font-size: 4rem; + font-size: 6rem; line-height: 132%; + letter-spacing: 0.02rem; } .select-list { display: flex;