uniapp-app/pages_chat/note/note.vue

<template>
  <view class="outpatient-info-page">
    

    <!-- 导航栏 -->
    <navBar title="门诊信息" />
    <!-- 主内容区域 -->
    <view class="content-area">
      <view class="input-container">
        <textarea 
          class="text-input" 
          v-model="outpatientInfo"
          placeholder="请输入门诊信息..."
          :maxlength="500"
          :auto-height="true"
        ></textarea>
        
        <!-- 语音输入按钮 -->
        <!-- <view class="voice-input-btn" @click="startVoiceInput">
          <text class="voice-icon">🎤</text>
        </view> -->
      </view>
    </view>

    <!-- 底部提交按钮 -->
    <view class="bottom-actions">
      <view class="submit-btn" @click="submitInfo">
        <text class="submit-text">提交</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import navBar from '@/components/navBar/navBar.vue'
import api from '@/api/api'
import {onLoad} from '@dcloudio/uni-app'
onLoad((options) => {
    console.log(options.note)
    console.log(decodeURIComponent(options.note))
    outpatientInfo.value = decodeURIComponent(options.note);
})
// 响应式数据
const outpatientInfo = ref('')
const addOutPatientA = () => {
  api.addOutPatientA({
    note: outpatientInfo.value,
    type:2,
    week: "",
	workplace_uuid: "",
    day: "",
    uuid: "",
  }).then(res => {
    console.log(res)
    if(res.code==0){
      uni.navigateBack()
    }
  })
}

// 方法
const goBack = () => {
  uni.navigateBack()
}

const startVoiceInput = () => {
  uni.showToast({
    title: '语音输入功能',
    icon: 'none'
  })
  // 这里可以集成语音识别功能
}

const submitInfo = () => {
  if (!outpatientInfo.value.trim()) {
    uni.showToast({
      title: '请输入门诊信息',
      icon: 'none'
    })
    return
  }
  
  addOutPatientA()
}
</script>

<style lang="scss" scoped>
.outpatient-info-page {
  min-height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

/* 状态栏样式 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  font-size: 28rpx;
  color: #333;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.network-type {
  font-size: 24rpx;
  color: #666;
}

.signal-bars {
  display: flex;
  align-items: end;
  gap: 2rpx;
  margin: 0 10rpx;
}

.bar {
  width: 4rpx;
  background-color: #333;
  border-radius: 1rpx;
}

.bar:nth-child(1) { height: 8rpx; }
.bar:nth-child(2) { height: 12rpx; }
.bar:nth-child(3) { height: 16rpx; }
.bar:nth-child(4) { height: 20rpx; }

.battery-text {
  font-size: 24rpx;
  color: #333;
}

.battery-icon {
  font-size: 20rpx;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.nav-left {
  width: 60rpx;
}

.back-arrow {
  font-size: 50rpx;
  color: #8B2316;
}

.nav-center {
  flex: 1;
  text-align: center;
}

.nav-title {
  font-size: 34rpx;
  color: #8B2316;
  font-weight: 500;
}

.nav-right {
  width: 60rpx;
}

/* 主内容区域 */
.content-area {
  padding: 40rpx 30rpx;
  display: flex;
  flex-direction: column;
}

.input-container {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.text-input {
  flex: 1;
  width: 100%;
  min-height: 600rpx;
  padding: 30rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  font-size: 32rpx;
  color: #333;
  background-color: #fff;
  resize: none;
  outline: none;
  box-sizing: border-box;
}

.text-input:focus {
  border-color: #8B2316;
}

/* 语音输入按钮 */
.voice-input-btn {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  width: 80rpx;
  height: 80rpx;
  background-color: #8B2316;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(139, 35, 22, 0.3);
}

.voice-icon {
  font-size: 36rpx;
  color: #fff;
}

/* 底部提交按钮 */
.bottom-actions {
  position: fixed;
  bottom: 20rpx;
  left:30rpx;
  right: 30rpx;
  background-color: #fff;
  
}

.submit-btn {
  
  background-color: #fff;
  border: 2rpx solid #8B2316;
  border-radius: 12rpx;
  padding: 25rpx;
  color: #8B2316;
  text-align: center;
}

.submit-text {
  color: #8B2316;
  font-size: 32rpx;
  font-weight: 500;
}

.submit-btn:active {
  background-color: #f5f5f5;
}
</style>