uniapp-app/pages_app/patientRemark/patientRemark.vue
2025-09-02 19:03:45 +08:00

113 lines
2.5 KiB
Vue

<template>
<view class="remark-page">
<uni-nav-bar
left-icon="left"
title="设置备注和分组"
@clickLeft="goBack"
fixed
color="#8B2316"
height="140rpx"
:border="false"
backgroundColor="#eee"
/>
<view class="form-block">
<view class="label">备注</view>
<input class="input" v-model.trim="remark" placeholder="给患者添加备注名" placeholder-class="ph" maxlength="20"/>
</view>
<view class="form-block">
<view class="label">分组</view>
<view class="iptbox">
<input class="input" v-model.trim="remark" placeholder="通过分组给患者分类" placeholder-class="ph" maxlength="20" readonly/>
<uni-icons type="right" size="20" color="#666"></uni-icons>
</view>
</view>
<view class="form-block">
<view class="label">描述</view>
<textarea class="textarea" v-model.trim="note" placeholder="补充患者关键信息,方便随访患者" placeholder-class="ph" auto-height maxlength="140"/>
</view>
<view class="bottom-bar">
<button class="save-btn" @click="saveRemark">保存</button>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
const remark = ref('')
const note = ref('')
const goBack = () => {
uni.navigateBack()
}
const saveRemark = () => {
if (!remark.value) {
uni.showToast({ title: '请输入备注名', icon: 'none' })
return
}
// TODO: 调用保存接口
uni.showToast({ title: '保存成功', icon: 'success' })
setTimeout(() => goBack(), 700)
}
</script>
<style lang="scss" scoped>
.remark-page{
min-height: 100vh;
background: #f7f7f7;
padding-bottom: 140rpx;
}
.form-block{
.iptbox{
background: #f8f8f8;
display: flex;
align-items: center;
}
background: #fff;
padding: 24rpx 30rpx 30rpx;
.label{
font-size: 28rpx;
color: #666;
margin-bottom: 16rpx;
}
.input{
flex:1;
background: #f8f8f8;
border-radius: 12rpx;
padding: 24rpx;
font-size: 30rpx;
color: #333;
}
.textarea{
background: #f8f8f8;
border-radius: 12rpx;
padding: 24rpx;
font-size: 28rpx;
color: #333;
min-height: 180rpx;
line-height: 1.6;
}
.ph{
color: #bfbfbf;
}
}
.bottom-bar{
position: fixed;
left: 0; right: 0; bottom: 0;
background: #ffffff;
border-top: 1rpx solid #f0f0f0;
padding: 20rpx 24rpx env(safe-area-inset-bottom);
.save-btn{
width: 100%;
height: 92rpx;
background: #8B2316;
color: #fff;
border: none;
border-radius: 12rpx;
font-size: 32rpx;
}
}
</style>