178 lines
4.0 KiB
Vue
178 lines
4.0 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- 顶部导航栏 -->
|
||
<uni-nav-bar
|
||
left-icon="left"
|
||
:title="title"
|
||
@clickLeft="goBack"
|
||
fixed
|
||
color="#8B2316"
|
||
height="180rpx"
|
||
:border="false"
|
||
backgroundColor="#eeeeee"
|
||
/>
|
||
|
||
<view class="content">
|
||
|
||
<!-- 输入区域（邮箱或其他文本） -->
|
||
<view class="input-wrapper">
|
||
<input
|
||
v-if="editType === 'email'"
|
||
class="input"
|
||
type="text"
|
||
:placeholder="placeholder"
|
||
placeholder-class="ph"
|
||
v-model.trim="content"
|
||
|
||
>
|
||
</input>
|
||
<textarea v-else v-model.trim="content" :placeholder="placeholderTextArea" placeholder-class="ph" auto-height> </textarea>
|
||
</view>
|
||
|
||
|
||
|
||
<!-- 提示文案 -->
|
||
<view class="hint">{{ hint }}</view>
|
||
</view>
|
||
|
||
<!-- 底部保存按钮 -->
|
||
<view class="footer">
|
||
<button class="save-btn" @click="onSave">保存</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
const title = ref('修改邮箱');
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
const content = ref('')
|
||
const editType = ref('');
|
||
const placeholder = ref('请输入您的邮箱');
|
||
const placeholderTextArea = ref('请输入您的个人简介(500字以内)');
|
||
const hint = ref('请填写您的真实邮箱，以便联系上您');
|
||
onLoad((options) => {
|
||
editType.value = options && options.editType ? options.editType : '';
|
||
content.value = (options && options.value) ? options.value : '';
|
||
switch (editType.value) {
|
||
case 'email':
|
||
title.value = '修改邮箱';
|
||
placeholder.value = '请输入您的邮箱';
|
||
hint.value = '请填写您的真实邮箱，以便联系上您';
|
||
break;
|
||
case 'name':
|
||
title.value = '修改姓名';
|
||
placeholder.value = '请输入您的姓名';
|
||
hint.value = '';
|
||
break;
|
||
case 'officePhone':
|
||
title.value = '修改科室电话';
|
||
placeholder.value = '请输入您的科室电话';
|
||
hint.value = '';
|
||
break;
|
||
case 'certificate':
|
||
title.value = '修改执业医师证编号';
|
||
placeholder.value = '请输入您的执业医师证编号';
|
||
hint.value = '';
|
||
break;
|
||
case 'intro':
|
||
title.value = '修改个人简介';
|
||
placeholderTextArea.value = '请输入您的个人简介(500字以内)';
|
||
hint.value = '';
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
})
|
||
|
||
|
||
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 (editType.value === 'email' && !isValidEmail(content.value)) {
|
||
uni.showToast({ title: '请输入有效的邮箱', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
// 将数据回传到上一页（personInfo），监听事件名：writeInfoSaved
|
||
uni.$emit('writeInfoSaved', {
|
||
editType: editType.value,
|
||
content: content.value
|
||
})
|
||
|
||
uni.showToast({ title: '保存成功', icon: 'none' })
|
||
setTimeout(() => goBack(), 300)
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
background-color: #fff;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.content {
|
||
padding: 24rpx 30rpx;
|
||
textarea{
|
||
min-height:400rpx;
|
||
}
|
||
}
|
||
|
||
.input-wrapper {
|
||
background: #fff;
|
||
border: 2rpx solid #e6e6e6;
|
||
border-radius: 16rpx;
|
||
padding: 16rpx 20rpx;
|
||
}
|
||
|
||
.input {
|
||
height: 60rpx;
|
||
line-height:60rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.ph {
|
||
color: #c7c7c7;
|
||
}
|
||
|
||
.hint {
|
||
margin-top: 24rpx;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.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>
|
||
|
||
|