140 lines
5.2 KiB
Vue
140 lines
5.2 KiB
Vue
<template>
|
||
<view class="stop-page">
|
||
<navBar :title="title" />
|
||
|
||
<view class="content-area">
|
||
<!-- 停诊原因 -->
|
||
<view class="form-section">
|
||
<view class="section-title">
|
||
<text class="title-text">停诊原因</text>
|
||
<text class="required">*</text>
|
||
</view>
|
||
<view class="reason-row">
|
||
<view class="reason-btn" :class="{active: reason===1}" @click="selectReason(1)">出差</view>
|
||
<view class="reason-btn" :class="{active: reason===2}" @click="selectReason(2)">休假</view>
|
||
<view class="reason-btn" :class="{active: reason===3}" @click="selectReason(3)">临时安排</view>
|
||
<view class="reason-btn" :class="{active: reason===4}" @click="selectReason(4)">其他</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 停诊时间 -->
|
||
<view class="form-section">
|
||
<view class="section-head">
|
||
<view class="section-title">
|
||
<text class="title-text">停诊时间</text>
|
||
<text class="required">*</text>
|
||
</view>
|
||
<view class="add-more" @click="addRange">+ 再次添加</view>
|
||
</view>
|
||
|
||
<view class="range-list">
|
||
<view class="range-row" v-for="(item,idx) in ranges" :key="idx">
|
||
<uni-datetime-picker type="daterange" value="item" :start="start" @change="(e)=>handleChange(e,idx)" />
|
||
<uni-icons type="minus" size="30" color="#8B2316" @click="removeRange(idx)" v-if="idx > 0"></uni-icons>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 备注 -->
|
||
<view class="form-section">
|
||
<view class="section-title"><text class="title-text">备注</text></view>
|
||
<view class="remark-box">
|
||
<textarea v-model="remark" class="remark" maxlength="300" :placeholder="remarkPh"/>
|
||
<!-- <view class="voice-btn" @click="recordVoice">🎤</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom-actions">
|
||
<view class="confirm-btn" @click="submit">
|
||
<text class="btn-text">确定发布</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onShow } from '@dcloudio/uni-app'
|
||
import navBar from '@/components/navBar/navBar.vue'
|
||
import api from '@/api/api'
|
||
|
||
const title = ref('发布停诊')
|
||
const reason = ref(1)
|
||
const ranges = ref([[]])
|
||
const remark = ref('')
|
||
const remarkPh = '您可以在这里填写想告诉患者的停诊补充信息，最多填写300个字哦~'
|
||
const start = ref(new Date().getTime())
|
||
const end = ref( Date.now()+10*365*24*3600*1000)
|
||
const selectReason = (val) => { reason.value = val }
|
||
const addRange = () => { ranges.value.push([]) }
|
||
|
||
const handleChange = (e,idx) => {
|
||
console.log(e)
|
||
ranges.value[idx] =e;
|
||
}
|
||
const addStopPatient = async () => {
|
||
let date_arr=[]
|
||
ranges.value.forEach(item=>{
|
||
date_arr.push({
|
||
param1:item[0],
|
||
param2:item[1]
|
||
})
|
||
})
|
||
const res = await api.addStopPatient({
|
||
type: reason.value,
|
||
date_list: date_arr,
|
||
note: remark.value
|
||
})
|
||
if(res.code==200){
|
||
uni.showToast({ title: '发布成功', icon: 'none' })
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
|
||
const recordVoice = () => {
|
||
uni.showToast({ title: '语音录入（示意）', icon: 'none' })
|
||
}
|
||
|
||
const submit = () => {
|
||
console.log(ranges.value)
|
||
const invalid = ranges.value.some(r => r.length==0)
|
||
if (invalid) {
|
||
uni.showToast({ title: '请选择停诊起止时间', icon: 'none' })
|
||
return
|
||
}
|
||
addStopPatient()
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.stop-page { min-height: 100vh; background: #fff; }
|
||
.content-area { padding: 30rpx; }
|
||
|
||
.form-section { margin-bottom: 40rpx; }
|
||
.section-head { display: flex; justify-content: space-between; align-items: center; }
|
||
.section-title { display: flex; align-items: center; margin-bottom: 20rpx; }
|
||
.title-text { font-size: 32rpx; color: #8B2316; font-weight: 600; }
|
||
.required { color: #8B2316; margin-left: 6rpx; font-size: 28rpx; }
|
||
|
||
.reason-row { display: flex; gap: 20rpx; flex-wrap: wrap; }
|
||
.reason-btn { flex: 1; text-align: center; height: 80rpx; line-height: 80rpx; border: 2rpx solid #ddd; border-radius: 10rpx; color: #666; }
|
||
.reason-btn.active { border-color: #8B2316; color: #8B2316; background: url('@/static/addoutpa_true.png') right bottom/39rpx 39rpx no-repeat; }
|
||
|
||
.add-more { color: #8B2316; font-size: 28rpx; }
|
||
.range-row { display: flex; align-items: center; gap: 20rpx; margin-bottom: 20rpx; }
|
||
.date-input { flex: 1; height: 80rpx; border: 2rpx solid #ddd; border-radius: 10rpx; display: flex; align-items: center; padding: 0 24rpx; color: #333; }
|
||
.placeholder { color: #999; }
|
||
.to-text { color: #666; }
|
||
|
||
.remark-box { position: relative; }
|
||
.remark { width: 100%; min-height: 220rpx; background: #f2f2f2; border-radius: 10rpx; padding: 20rpx; color: #333; }
|
||
.voice-btn { position: absolute; right: 20rpx; bottom: 20rpx; width: 88rpx; height: 88rpx; border-radius: 50%; background: #8B2316; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40rpx; }
|
||
|
||
.bottom-actions { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; padding: 30rpx; border-top: 1rpx solid #eee; }
|
||
.confirm-btn { background: #8B2316; border-radius: 12rpx; padding: 24rpx 0; text-align: center; }
|
||
.btn-text { color: #fff; font-size: 32rpx; font-weight: 600; }
|
||
</style>
|
||
|