style: 样式修改

This commit is contained in:
2025-12-30 14:51:19 +08:00
parent 6a2b456bf3
commit 6156c88429
6 changed files with 515 additions and 504 deletions

View File

@@ -1,57 +1,61 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted, inject } from 'vue' import { ref, reactive, onMounted, inject, watch } from 'vue'
import router from '@/router' import router from '@/router'
import { showConfirmDialog, showToast } from 'vant' import { showConfirmDialog, showToast } from 'vant'
import { useUserInfoStore, useOverallStore,useGenerateStore } from '@/stores' import { useUserInfoStore, useOverallStore, useGenerateStore } from '@/stores'
import { LogOut } from '@/api/login' import { LogOut } from '@/api/login'
import { getCustomerList, type CustomerListParams, customerCheckin } from '@/api/workshop' import { getCustomerList, type CustomerListParams, customerCheckin } from '@/api/workshop'
import MyEvent from '@/utils/myEvent' import MyEvent from '@/utils/myEvent'
import { encryptPassword } from '@/utils/tools' import { encryptPassword } from '@/utils/tools'
import { updateUserInfo } from '@/api/login' import { updateUserInfo } from '@/api/login'
const props = defineProps<{ const props = defineProps<{
isCustomer?: boolean isCustomer?: boolean
}>() }>()
const userInfoStore = useUserInfoStore() const userInfoStore = useUserInfoStore()
const overallStore = useOverallStore() const overallStore = useOverallStore()
const generateStore = useGenerateStore() const generateStore = useGenerateStore()
const emit = defineEmits(['selected-customer']) const emit = defineEmits(['selected-customer', 'change-visible'])
const show = ref(false) const show = ref(false)
const isEdit = ref(false) const isEdit = ref(false)
const form = reactive({ const form = reactive({
name: { msg: '', value: '' }, name: { msg: '', value: '' },
email: { msg: '', value: '' }, email: { msg: '', value: '' },
password: { show: true, msg: '', value: '' } password: { show: true, msg: '', value: '' }
}) })
const open = () => { const open = () => {
form.name.value = userInfoStore.state.userInfo.username form.name.value = userInfoStore.state.userInfo.username
form.email.value = userInfoStore.state.userInfo.email form.email.value = userInfoStore.state.userInfo.email
form.password.value = '' form.password.value = ''
isEdit.value = false isEdit.value = false
show.value = true show.value = true
} }
const close = () => { const close = () => {
show.value = false show.value = false
} }
const onEditItem = (item) => { watch(show, (newVal) => {
emit('change-visible', newVal)
MyEvent.emit('change-profile-visible', newVal)
})
const onEditItem = (item) => {
if (!form[item]) return if (!form[item]) return
form[item].edit = true form[item].edit = true
} }
const onSaveItem = (item) => { const onSaveItem = (item) => {
if (!form[item]) return if (!form[item]) return
form[item].edit = false form[item].edit = false
} }
const switchCustomer = () => { const switchCustomer = () => {
// console.log('switchCustomer') // console.log('switchCustomer')
handleShowPopup(true) handleShowPopup(true)
} }
const edit = () => { const edit = () => {
form.password.value = '' form.password.value = ''
isEdit.value = true isEdit.value = true
} }
const confirm = () => { const confirm = () => {
if (!isEdit.value) return if (!isEdit.value) return
const password = form.password.value const password = form.password.value
const params = { const params = {
@@ -80,8 +84,8 @@
form.password.value = '' form.password.value = ''
isEdit.value = false isEdit.value = false
}) })
} }
const logout = () => { const logout = () => {
showConfirmDialog({ showConfirmDialog({
title: 'Log out', title: 'Log out',
message: 'Are you sure you want to log out?', message: 'Are you sure you want to log out?',
@@ -95,23 +99,23 @@
}) })
}) })
.catch(() => {}) .catch(() => {})
} }
const showSwitchCustomerPopup = ref(false) const showSwitchCustomerPopup = ref(false)
const custmerParams = ref<CustomerListParams>({ const custmerParams = ref<CustomerListParams>({
current: 1, current: 1,
size: 5, size: 5,
desc: true desc: true
}) })
const customerList = ref<any[]>([]) const customerList = ref<any[]>([])
const pager = reactive({ const pager = reactive({
loading: false, loading: false,
noMore: false, noMore: false,
total: null as number | null total: null as number | null
}) })
const customerListEl = ref<HTMLElement | null>(null) const customerListEl = ref<HTMLElement | null>(null)
const loadCustomers = async (reset = false) => { const loadCustomers = async (reset = false) => {
if (pager.loading) return if (pager.loading) return
if (reset) { if (reset) {
custmerParams.value.current = 1 custmerParams.value.current = 1
@@ -155,36 +159,39 @@
} finally { } finally {
pager.loading = false pager.loading = false
} }
} }
const onScroll = (e: Event) => { const onScroll = (e: Event) => {
const el = e.target as HTMLElement const el = e.target as HTMLElement
if (!el) return if (!el) return
if (pager.loading || pager.noMore) return if (pager.loading || pager.noMore) return
if (el.scrollTop + el.clientHeight >= el.scrollHeight - 50) { if (el.scrollTop + el.clientHeight >= el.scrollHeight - 50) {
loadCustomers(false) loadCustomers(false)
} }
} }
// 打开customer选择时关闭profile弹窗 如果不是点击confirem关闭则重新打开profile弹窗 // 打开customer选择时关闭profile弹窗 如果不是点击confirem关闭则重新打开profile弹窗
const handleShowPopup = (flag: boolean) => { let isCustomerOnly = false
const handleShowPopup = (flag: boolean, customer: boolean) => {
// customer: 是否是顾客页面只展示customer选择弹窗
isCustomerOnly = customer
showSwitchCustomerPopup.value = flag showSwitchCustomerPopup.value = flag
if (props.isCustomer) return if (isCustomerOnly) return
show.value = !flag show.value = !flag
if (flag) { if (flag) {
loadCustomers(true) loadCustomers(true)
} }
} }
const handleChangeChecked = (item) => { const handleChangeChecked = (item) => {
customerList.value.forEach((customer) => { customerList.value.forEach((customer) => {
customer.checked = customer.vipId === item.vipId customer.checked = customer.vipId === item.vipId
}) })
} }
const handleSelectCustomer = () => { const handleSelectCustomer = () => {
const selectedCustomer = customerList.value.find((customer) => customer.checked) const selectedCustomer = customerList.value.find((customer) => customer.checked)
if (selectedCustomer) { if (selectedCustomer) {
emit('selected-customer', selectedCustomer) emit('selected-customer', selectedCustomer)
} }
if (!props.isCustomer) { if (!isCustomerOnly) {
// show.value = true // show.value = true
customerCheckin({ nickname: selectedCustomer.name }).then((res) => { customerCheckin({ nickname: selectedCustomer.name }).then((res) => {
useUserInfoStore().resetGenerateParams() useUserInfoStore().resetGenerateParams()
@@ -194,22 +201,22 @@
}) })
} }
showSwitchCustomerPopup.value = false showSwitchCustomerPopup.value = false
} }
const handleFetchCustomerList = () => { const handleFetchCustomerList = () => {
loadCustomers(true) loadCustomers(true)
} }
MyEvent.add('update-customer-list', handleFetchCustomerList) MyEvent.add('update-customer-list', handleFetchCustomerList)
// const openSwitchCustomerPopup = (flag = true) => { // const openSwitchCustomerPopup = (flag = true) => {
// showSwitchCustomerPopup.value = flag // showSwitchCustomerPopup.value = flag
// } // }
onMounted(() => { onMounted(() => {
handleFetchCustomerList() handleFetchCustomerList()
}) })
defineExpose({ open, close, handleShowPopup }) defineExpose({ open, close, handleShowPopup })
</script> </script>
<template> <template>
@@ -334,11 +341,11 @@
</template> </template>
<style scoped lang="less"> <style scoped lang="less">
.van-popup { .van-popup {
max-height: 90%; max-height: 90%;
--van-popup-round-radius: 7.8rem; --van-popup-round-radius: 7.8rem;
} }
.profile { .profile {
margin: 6.5rem 0; margin: 6.5rem 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -447,9 +454,9 @@
margin-top: 17.8rem; margin-top: 17.8rem;
} }
} }
} }
.van-popup.user-popup { .van-popup.user-popup {
height: 116.1rem; height: 116.1rem;
color: #181725; color: #181725;
border-top-left-radius: 7.8rem; border-top-left-radius: 7.8rem;
@@ -519,5 +526,5 @@
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
} }
} }
</style> </style>

View File

@@ -197,7 +197,9 @@ const startRecording = () => {
// 检查浏览器支持 // 检查浏览器支持
if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) { if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
// alert('您的浏览器不支持语音识别功能') // alert('您的浏览器不支持语音识别功能')
showToast('Your browser does not support speech recognition, please try again with another browser') showToast(
'Your browser does not support speech recognition, please try again with another browser'
)
isRecording.value = false isRecording.value = false
return return
} }
@@ -296,7 +298,7 @@ const stopRecording = () => {
.shortcut-item { .shortcut-item {
font-size: 4.2rem; font-size: 4.2rem;
width: fit-content; width: fit-content;
font-family: 'robotoRegular'; font-family: 'satoshiMedium';
white-space: nowrap; white-space: nowrap;
height: 8.1rem; height: 8.1rem;
line-height: 8.1rem; line-height: 8.1rem;
@@ -351,8 +353,8 @@ const stopRecording = () => {
outline: none; outline: none;
background: transparent; background: transparent;
font-size: 4rem; font-size: 4rem;
font-family: 'robotoRegular'; font-family: 'satoshiMedium';
font-weight: 400; font-weight: 500;
line-height: 4.8rem; /* 设置行高等于实际渲染高度,实现垂直居中 */ line-height: 4.8rem; /* 设置行高等于实际渲染高度,实现垂直居中 */
padding: 0; padding: 0;
color: #000; color: #000;
@@ -361,8 +363,8 @@ const stopRecording = () => {
&::placeholder { &::placeholder {
color: #888; color: #888;
letter-spacing: -0.01em; letter-spacing: -0.01em;
font-weight: 400; font-weight: 500;
font-family: 'robotoRegular'; font-family: 'satoshiMedium';
word-spacing: -5px; word-spacing: -5px;
line-height: 4.8rem; line-height: 4.8rem;
} }

View File

@@ -103,13 +103,15 @@ const actionList: ActionItem[] = [
display: flex; display: flex;
margin-bottom: 16px; margin-bottom: 16px;
align-items: flex-start; align-items: flex-start;
color: #000;
.message-text { .message-text {
font-size: 4.2rem; font-size: 4rem;
font-family: 'robotoRegular'; font-family: 'satoshiMedium';
line-height: 121%; line-height: 121%;
font-weight: 400; font-weight: 500;
background-color: #efefef; background-color: #efefef;
padding: 3.43rem 4.35rem; padding: 3.43rem 4.35rem;
letter-spacing: -0.01em;
} }
&.user-message { &.user-message {

View File

@@ -4,7 +4,7 @@
<div class="content"> <div class="content">
<!-- 返回按钮 --> <!-- 返回按钮 -->
<div class="back-button" @click="goBack"> <div class="back-button" @click="goBack">
<img src="@/assets/images/arrow_left.png" class="back-icon" /> <SvgIcon name="left" size="50" color="#fff" />
</div> </div>
<!-- 标题区域 --> <!-- 标题区域 -->
@@ -133,9 +133,9 @@ const handleSuccess = (data: any) => {
cursor: pointer; cursor: pointer;
z-index: 3; z-index: 3;
font-size: 3.4rem; font-size: 3.4rem;
.back-icon { .c-svg {
width: 2.83rem; width: initial;
height: 3.47rem; height: initial;
} }
} }

View File

@@ -2,7 +2,7 @@
<div class="login-page"> <div class="login-page">
<div class="content"> <div class="content">
<div class="back-button" @click="goBack"> <div class="back-button" @click="goBack">
<img src="@/assets/images/arrow_left.png" class="back-icon" /> <SvgIcon name="left" size="50" color="#fff" />
</div> </div>
<div class="header"> <div class="header">
@@ -187,9 +187,9 @@ const handleGoogleSignup = async (accessToken: string) => {
cursor: pointer; cursor: pointer;
z-index: 3; z-index: 3;
font-size: 3.4rem; font-size: 3.4rem;
.back-icon { .c-svg {
width: 2.83rem; width: initial;
height: 3.47rem; height: initial;
} }
} }

View File

@@ -143,7 +143,7 @@ const handleConfirm = async () => {
const handleShowPopup = (flag: Boolean) => { const handleShowPopup = (flag: Boolean) => {
// showPopup.value = flag // showPopup.value = flag
profileRef.value.handleShowPopup(flag) profileRef.value.handleShowPopup(flag,true)
} }
const handleSelectCustomer = (value) => { const handleSelectCustomer = (value) => {
@@ -189,7 +189,7 @@ const handleBack = (e?: Event) => {
.setting { .setting {
z-index: 1; z-index: 1;
padding: 3.67rem 4.9rem 0 8.4rem; padding: 16.4rem 4.9rem 0 8.4rem;
font-size: 7rem; font-size: 7rem;
.c-svg { .c-svg {
width: initial; width: initial;