124 lines
2.3 KiB
Vue
124 lines
2.3 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- 顶部导航栏 -->
|
||
<uni-nav-bar
|
||
left-icon="left"
|
||
title="修改邮箱"
|
||
@clickLeft="goBack"
|
||
fixed
|
||
color="#8B2316"
|
||
height="140rpx"
|
||
:border="false"
|
||
backgroundColor="#eeeeee"
|
||
/>
|
||
|
||
<view class="content">
|
||
<!-- 邮箱输入框 -->
|
||
<view class="input-wrapper">
|
||
<input
|
||
class="input"
|
||
type="text"
|
||
placeholder="请输入您的邮箱"
|
||
placeholder-class="ph"
|
||
v-model.trim="email"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 提示文案 -->
|
||
<view class="hint">请填写您的真实邮箱，以便联系上您</view>
|
||
</view>
|
||
|
||
<!-- 底部保存按钮 -->
|
||
<view class="footer">
|
||
<button class="save-btn" @click="onSave">保存</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
|
||
const email = ref('')
|
||
|
||
const goBack = () => {
|
||
uni.navigateBack()
|
||
}
|
||
|
||
const isValidEmail = (val) => {
|
||
if (!val) return false
|
||
const re = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/
|
||
return re.test(val)
|
||
}
|
||
|
||
const onSave = () => {
|
||
if (!isValidEmail(email.value)) {
|
||
uni.showToast({ title: '请输入有效的邮箱', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
// 这里调用保存接口（占位）
|
||
// await api.updateEmail({ email: email.value })
|
||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||
setTimeout(() => goBack(), 800)
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
background-color: #fff;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.content {
|
||
padding: 24rpx 30rpx;
|
||
}
|
||
|
||
.input-wrapper {
|
||
background: #fff;
|
||
border: 2rpx solid #e6e6e6;
|
||
border-radius: 16rpx;
|
||
padding: 16rpx 20rpx;
|
||
}
|
||
|
||
.input {
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.ph {
|
||
color: #c7c7c7;
|
||
}
|
||
|
||
.hint {
|
||
margin-top: 24rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.footer {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: env(safe-area-inset-bottom);
|
||
padding: 24rpx 30rpx calc(24rpx + env(safe-area-inset-bottom));
|
||
background-color: #fff;
|
||
}
|
||
|
||
.save-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
text-align: center;
|
||
color: #8b2316;
|
||
font-size: 30rpx;
|
||
border: 2rpx solid #8b2316;
|
||
border-radius: 16rpx;
|
||
background: #fff;
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
</style>
|
||
|
||
|