uniapp-app/pages_chat/outPatient/publishSuspension.vue

<template>
  <view class="publish-page">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <text class="back-arrow">‹</text>
      </view>
      <view class="nav-center">
        <text class="nav-title">发布停诊公告</text>
      </view>
      <view class="nav-right">
        <text class="save-btn" @click="saveAnnouncement">保存</text>
      </view>
    </view>

    <!-- 表单内容 -->
    <view class="form-container">
      <view class="form-item">
        <text class="form-label">停诊日期</text>
        <picker mode="date" :value="formData.date" @change="onDateChange">
          <view class="picker-input">
            <text class="picker-text">{{ formData.date || '请选择日期' }}</text>
            <text class="picker-arrow">›</text>
          </view>
        </picker>
      </view>

      <view class="form-item">
        <text class="form-label">停诊原因</text>
        <input class="form-input" placeholder="请输入停诊原因" v-model="formData.reason" />
      </view>

      <view class="form-item">
        <text class="form-label">开始时间</text>
        <picker mode="date" :value="formData.startDate" @change="onStartDateChange">
          <view class="picker-input">
            <text class="picker-text">{{ formData.startDate || '请选择开始时间' }}</text>
            <text class="picker-arrow">›</text>
          </view>
        </picker>
      </view>

      <view class="form-item">
        <text class="form-label">结束时间</text>
        <picker mode="date" :value="formData.endDate" @change="onEndDateChange">
          <view class="picker-input">
            <text class="picker-text">{{ formData.endDate || '请选择结束时间' }}</text>
            <text class="picker-arrow">›</text>
          </view>
        </picker>
      </view>

      <view class="form-item">
        <text class="form-label">备注信息</text>
        <textarea class="form-textarea" placeholder="请输入备注信息" v-model="formData.remarks" />
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-actions">
      <view class="publish-btn" @click="publishAnnouncement">
        <text class="btn-text">发布公告</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'

// 响应式数据
const formData = reactive({
  date: '',
  reason: '',
  startDate: '',
  endDate: '',
  remarks: ''
})

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

const onDateChange = (e) => {
  formData.date = e.detail.value
}

const onStartDateChange = (e) => {
  formData.startDate = e.detail.value
}

const onEndDateChange = (e) => {
  formData.endDate = e.detail.value
}

const saveAnnouncement = () => {
  // 保存草稿
  uni.showToast({
    title: '保存成功',
    icon: 'none'
  })
}

const publishAnnouncement = () => {
  if (!formData.date || !formData.reason) {
    uni.showToast({
      title: '请填写必要信息',
      icon: 'none'
    })
    return
  }

  uni.showModal({
    title: '确认发布',
    content: '确定要发布这条停诊公告吗？',
    success: (res) => {
      if (res.confirm) {
        // 发布公告
        uni.showToast({
          title: '发布成功',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.publish-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏样式 */
.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: #e74c3c;
  font-weight: bold;
}

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

.nav-title {
  font-size: 34rpx;
  color: #e74c3c;
  font-weight: bold;
}

.nav-right {
  width: 60rpx;
  text-align: right;
}

.save-btn {
  font-size: 28rpx;
  color: #e74c3c;
}

/* 表单容器 */
.form-container {
  padding: 30rpx;
}

.form-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: bold;
}

.form-input {
  width: 100%;
  font-size: 28rpx;
  color: #333;
  border: none;
  outline: none;
}

.picker-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
}

.picker-text {
  font-size: 28rpx;
  color: #333;
}

.picker-arrow {
  font-size: 24rpx;
  color: #999;
}

.form-textarea {
  width: 100%;
  min-height: 120rpx;
  font-size: 28rpx;
  color: #333;
  border: none;
  outline: none;
  line-height: 1.5;
}

/* 底部按钮 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

.publish-btn {
  background-color: #c0392b;
  border-radius: 12rpx;
  padding: 25rpx;
  text-align: center;
}

.btn-text {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
}
</style>