style: 样式修改
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user