From 1be879fbe48602dd78c5dfca1c773b90afd8fd6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Wed, 24 Dec 2025 12:04:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=B4=A6=E5=8F=B7=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/login.ts               |  16 +
 src/views/Workshop/profile.vue | 939 +++++++++++++++++----------------
 2 files changed, 497 insertions(+), 458 deletions(-)

diff --git a/src/api/login.ts b/src/api/login.ts
index 83a33f2..ee2b979 100644
--- a/src/api/login.ts
+++ b/src/api/login.ts
@@ -59,3 +59,19 @@ export const googleAuth = (data: GoogleAuthParamsType): Promise<LoginResponse> =
     params: data
   })
 }
+
+
+/** 更改用户信息
+ * @param data 包含用户信息的对象
+ * @param data.username 用户名
+ * @param data.email 邮箱
+ * @param data.password 密码
+ * @returns 包含更新后的用户信息的对象
+*/
+export const updateUserInfo = (data: any) => {
+  return request({
+    url: '/api/auth/updateUserInfo',
+    method: 'post',
+    data
+  })
+}
diff --git a/src/views/Workshop/profile.vue b/src/views/Workshop/profile.vue
index e212011..fb34c17 100644
--- a/src/views/Workshop/profile.vue
+++ b/src/views/Workshop/profile.vue
@@ -1,494 +1,517 @@
 <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'
-import { getCustomerList, type CustomerListParams,customerCheckin } from '@/api/workshop'
-import MyEvent from '@/utils/myEvent'
+	import { ref, reactive, onMounted, inject } from 'vue'
+	import router from '@/router'
+	import { showConfirmDialog, showToast } from 'vant'
+	import { useUserInfoStore, useOverallStore } from '@/stores'
+	import { LogOut } from '@/api/login'
+	import { getCustomerList, type CustomerListParams, customerCheckin } from '@/api/workshop'
+	import MyEvent from '@/utils/myEvent'
+	import { encryptPassword } from '@/utils/tools'
+	import { updateUserInfo } from '@/api/login'
 
-const props = defineProps<{
-  isCustomer?: boolean
-}>()
+	const props = defineProps<{
+		isCustomer?: boolean
+	}>()
 
-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)
-  const params = {
-    username: form.name.value,
-    email: form.email.value,
-  }
-  console.log(params)
-  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 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: '' },
+		email: { msg: '', value: '' },
+		password: { show: true, msg: '', value: '' }
+	})
+	const open = () => {
+		form.name.value = userInfoStore.state.userInfo.username
+		form.email.value = userInfoStore.state.userInfo.email
+		form.password.value = ''
+		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 = () => {
+		form.password.value = ''
+		isEdit.value = true
+	}
+	const confirm = () => {
+		const password = form.password.value
+		const params = {
+			username: form.name.value,
+			email: form.email.value,
+			password
+		}
+		if (password) {
+			if (password.length < 6) {
+				return showToast('Password must be at least 6 characters')
+			} else {
+				params.password = encryptPassword(password)
+			}
+		} else {
+			params.password = userInfoStore.state.userInfo.password
+		}
 
-const showSwitchCustomerPopup = ref(false)
-const custmerParams = ref<CustomerListParams>({
-  current: 1,
-  size: 5,
-  desc: true
-})
-const customerList = ref<any[]>([])
-const pager = reactive({
-  loading: false,
-  noMore: false,
-  total: null as number | null
-})
-const customerListEl = ref<HTMLElement | null>(null)
+		overallStore.setLoading(true)
+		updateUserInfo(params).then((res) => {
+			overallStore.setLoading(false)
+			showToast('Update success')
+			userInfoStore.setUserInfo({
+				...userInfoStore.state.userInfo,
+				...params
+			})
+			form.password.value = ''
+			isEdit.value = false
+		})
+	}
+	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 loadCustomers = async (reset = false) => {
-  if (pager.loading) return
-  if (reset) {
-    custmerParams.value.current = 1
-    pager.noMore = false
-    customerList.value = []
-  }
-  if (pager.noMore) return
-  pager.loading = true
-  try {
-    const res: any = await getCustomerList(custmerParams.value)
-    let list: any[] = []
-    const pages = res?.pages ?? res?.data?.pages ?? null
-    if (res && Array.isArray(res.records)) {
-      list = res.records
-      pager.total = res.total ?? pager.total
-    } else if (res && Array.isArray(res.data)) {
-      list = res.data
-    } else if (res && res.data && Array.isArray(res.data.list)) {
-      list = res.data.list
-      pager.total = res.data.total ?? pager.total
-    }
+	const showSwitchCustomerPopup = ref(false)
+	const custmerParams = ref<CustomerListParams>({
+		current: 1,
+		size: 5,
+		desc: true
+	})
+	const customerList = ref<any[]>([])
+	const pager = reactive({
+		loading: false,
+		noMore: false,
+		total: null as number | null
+	})
+	const customerListEl = ref<HTMLElement | null>(null)
 
-    if (reset) customerList.value = list
-    else customerList.value = customerList.value.concat(list)
+	const loadCustomers = async (reset = false) => {
+		if (pager.loading) return
+		if (reset) {
+			custmerParams.value.current = 1
+			pager.noMore = false
+			customerList.value = []
+		}
+		if (pager.noMore) return
+		pager.loading = true
+		try {
+			const res: any = await getCustomerList(custmerParams.value)
+			let list: any[] = []
+			const pages = res?.pages ?? res?.data?.pages ?? null
+			if (res && Array.isArray(res.records)) {
+				list = res.records
+				pager.total = res.total ?? pager.total
+			} else if (res && Array.isArray(res.data)) {
+				list = res.data
+			} else if (res && res.data && Array.isArray(res.data.list)) {
+				list = res.data.list
+				pager.total = res.data.total ?? pager.total
+			}
 
-    if (pages != null) {
-      if (custmerParams.value.current >= pages) {
-        pager.noMore = true
-      } else {
-        custmerParams.value.current += 1
-      }
-    } else {
-      if (list.length === 0 || list.length < custmerParams.value.size) {
-        pager.noMore = true
-      } else {
-        custmerParams.value.current += 1
-      }
-    }
-  } catch (e) {
-    // ignore error for now
-  } finally {
-    pager.loading = false
-  }
-}
+			if (reset) customerList.value = list
+			else customerList.value = customerList.value.concat(list)
 
-const onScroll = (e: Event) => {
-  const el = e.target as HTMLElement
-  if (!el) return
-  if (pager.loading || pager.noMore) return
-  if (el.scrollTop + el.clientHeight >= el.scrollHeight - 50) {
-    loadCustomers(false)
-  }
-}
-// 打开customer选择时关闭profile弹窗 如果不是点击confirem关闭则重新打开profile弹窗
-const handleShowPopup = (flag: boolean) => {
-  showSwitchCustomerPopup.value = flag
-  show.value = !flag
-  if (flag) {
-    loadCustomers(true)
-  }
-}
-const handleChangeChecked = (item) => {
-  customerList.value.forEach((customer) => {
-    customer.checked = customer.vipId === item.vipId
-  })
-}
-const handleSelectCustomer = () => {
-  const selectedCustomer = customerList.value.find((customer) => customer.checked)
-  if (selectedCustomer) {
-    emit('selected-customer', selectedCustomer)
-  }
-  if(!props.isCustomer){
-    // show.value = true
-    customerCheckin({ nickname: selectedCustomer.name }).then((res) => {
-      useUserInfoStore().resetGenerateParams()
-      MyEvent.emit('clear-generate-state')
-      useUserInfoStore().setCustomerInfo(res)
-    })
-  }
-  showSwitchCustomerPopup.value = false
-}
+			if (pages != null) {
+				if (custmerParams.value.current >= pages) {
+					pager.noMore = true
+				} else {
+					custmerParams.value.current += 1
+				}
+			} else {
+				if (list.length === 0 || list.length < custmerParams.value.size) {
+					pager.noMore = true
+				} else {
+					custmerParams.value.current += 1
+				}
+			}
+		} catch (e) {
+			// ignore error for now
+		} finally {
+			pager.loading = false
+		}
+	}
 
-const handleFetchCustomerList = () => {
-  loadCustomers(true)
-}
-MyEvent.add('update-customer-list', handleFetchCustomerList)
+	const onScroll = (e: Event) => {
+		const el = e.target as HTMLElement
+		if (!el) return
+		if (pager.loading || pager.noMore) return
+		if (el.scrollTop + el.clientHeight >= el.scrollHeight - 50) {
+			loadCustomers(false)
+		}
+	}
+	// 打开customer选择时关闭profile弹窗 如果不是点击confirem关闭则重新打开profile弹窗
+	const handleShowPopup = (flag: boolean) => {
+		showSwitchCustomerPopup.value = flag
+		show.value = !flag
+		if (flag) {
+			loadCustomers(true)
+		}
+	}
+	const handleChangeChecked = (item) => {
+		customerList.value.forEach((customer) => {
+			customer.checked = customer.vipId === item.vipId
+		})
+	}
+	const handleSelectCustomer = () => {
+		const selectedCustomer = customerList.value.find((customer) => customer.checked)
+		if (selectedCustomer) {
+			emit('selected-customer', selectedCustomer)
+		}
+		if (!props.isCustomer) {
+			// show.value = true
+			customerCheckin({ nickname: selectedCustomer.name }).then((res) => {
+				useUserInfoStore().resetGenerateParams()
+				MyEvent.emit('clear-generate-state')
+				useUserInfoStore().setCustomerInfo(res)
+			})
+		}
+		showSwitchCustomerPopup.value = false
+	}
 
-const openSwitchCustomerPopup = (flag = true) => {
-  showSwitchCustomerPopup.value = flag
-}
+	const handleFetchCustomerList = () => {
+		loadCustomers(true)
+	}
+	MyEvent.add('update-customer-list', handleFetchCustomerList)
 
-onMounted(() => {
-  handleFetchCustomerList()
-})
+	const openSwitchCustomerPopup = (flag = true) => {
+		showSwitchCustomerPopup.value = flag
+	}
 
-defineExpose({ open, close, openSwitchCustomerPopup })
+	onMounted(() => {
+		handleFetchCustomerList()
+	})
+
+	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>
-      <form class="box" @submit.prevent.stop="confirm">
-        <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"
-			  required
-            />
-            <!-- <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>
+			<form class="box" @submit.prevent.stop="confirm">
+				<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"
+							required
+						/>
+						<!-- <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" v-if="form.password">
-          <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" v-if="isEdit">
+					<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 type="submit" class="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>
-      </form>
-    </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 ref="customerListEl" class="cusomter-list" @scroll="onScroll">
-      <div
-        class="customer-item flex flex-align-center flex-between"
-        v-for="(item, index) in customerList"
-        :key="index + 'customer'"
-        @click="handleChangeChecked(item)"
-      >
-        <div class="info">
-          <div class="name">{{ item.name }}</div>
-          <div class="id">{{ item.vipId }}</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="list-footer">
-      <div v-if="pager.loading">Loading...</div>
-      <div v-else-if="pager.noMore">No more</div>
-    </div>
-    <div class="confirm-btn" @click="handleSelectCustomer">Confirm</div>
-  </van-popup>
+				<template v-if="isEdit">
+					<button type="submit" class="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>
+			</form>
+		</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 ref="customerListEl" class="cusomter-list" @scroll="onScroll">
+			<div
+				class="customer-item flex flex-align-center flex-between"
+				v-for="(item, index) in customerList"
+				:key="index + 'customer'"
+				@click="handleChangeChecked(item)"
+			>
+				<div class="info">
+					<div class="name">{{ item.name }}</div>
+					<div class="id">{{ item.vipId }}</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="list-footer">
+			<div v-if="pager.loading">Loading...</div>
+			<div v-else-if="pager.noMore">No more</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;
-      }
-    }
-  }
-  .list-footer {
-    text-align: center;
-    padding: 2rem 0;
-    font-size: 3rem;
-    color: #9b9b9b;
-  }
-  .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;
-  }
-}
+	.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;
+				}
+			}
+		}
+		.list-footer {
+			text-align: center;
+			padding: 2rem 0;
+			font-size: 3rem;
+			color: #9b9b9b;
+		}
+		.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>