171 lines
3.8 KiB
Vue
171 lines
3.8 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- 顶部导航 -->
|
||
<view class="nav">
|
||
<view class="back" @click="onBack">
|
||
<uni-icons type="left" color="#8B2316" size="24"></uni-icons>
|
||
</view>
|
||
<view class="title">群发消息</view>
|
||
<view class="right"></view>
|
||
</view>
|
||
|
||
<!-- 时间展示 -->
|
||
<view class="time-row">{{ currentTime }}</view>
|
||
|
||
<!-- 卡片区域 -->
|
||
<view class="card">
|
||
<view class="card-header">
|
||
<text class="label">{{ patientCount }}位患者：</text>
|
||
<view class="close" @click="onClear">
|
||
<text>×</text>
|
||
</view>
|
||
</view>
|
||
<view class="card-body">
|
||
<view class="line">{{ patientName }}</view>
|
||
<view class="line phone">{{ patientPhone }}</view>
|
||
</view>
|
||
<view class="card-footer">
|
||
<view class="btn-outline" @click="onResend">再发一条</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 占位滚动区域 -->
|
||
<view class="spacer" />
|
||
|
||
<!-- 底部按钮 -->
|
||
<view class="bottom-bar">
|
||
<view class="btn-primary" @click="onSendGroup">群发消息</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
|
||
const currentTime = ref('')
|
||
const patientCount = ref(1)
|
||
const patientName = ref('测试')
|
||
const patientPhone = ref('155555555')
|
||
|
||
const pad = (n) => (n < 10 ? `0${n}` : `${n}`)
|
||
const updateTime = () => {
|
||
const d = new Date()
|
||
currentTime.value = `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
|
||
}
|
||
|
||
onMounted(() => {
|
||
updateTime()
|
||
// 每秒刷新一次时间（如不需要可删除）
|
||
setInterval(updateTime, 1000)
|
||
})
|
||
|
||
const onBack = () => {
|
||
uni.navigateBack()
|
||
}
|
||
const onClear = () => {
|
||
// 清空选择的患者（占位）
|
||
patientCount.value = 0
|
||
patientName.value = ''
|
||
patientPhone.value = ''
|
||
}
|
||
const onResend = () => {
|
||
uni.showToast({ title: '已触发再发一条', icon: 'none' })
|
||
}
|
||
const onSendGroup = () => {
|
||
uni.showToast({ title: '已触发群发', icon: 'none' })
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$page-bg: #f5f5f5;
|
||
$brand: #8B2316;
|
||
$brand-deep: #8B2316;
|
||
$primary: #00cbc0;
|
||
$red: #D32F2F;
|
||
|
||
.page {
|
||
background: $page-bg;
|
||
min-height: 100vh;
|
||
position: relative;
|
||
}
|
||
|
||
.nav {
|
||
height: 88rpx;
|
||
padding: 0 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #fff;
|
||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
|
||
.back { width: 80rpx; display: flex; align-items: center; }
|
||
.title { flex: 1; text-align: center; font-size: 34rpx; color: $red; font-weight: 600; }
|
||
.right { width: 80rpx; }
|
||
}
|
||
|
||
.time-row {
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
padding: 32rpx 0;
|
||
color: #333;
|
||
background: #fff;
|
||
}
|
||
|
||
.card {
|
||
margin: 24rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
|
||
overflow: hidden;
|
||
.card-header {
|
||
position: relative;
|
||
padding: 28rpx 28rpx 12rpx 28rpx;
|
||
.border { height: 2rpx; background: #eee; }
|
||
.label { font-size: 32rpx; color: #333; }
|
||
.close {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-bottom-left-radius: 100rpx;
|
||
background: #8B2316;
|
||
display: flex; align-items: center; justify-content: center;
|
||
text { color: #fff; font-size: 40rpx; font-weight: 500; }
|
||
}
|
||
}
|
||
.card-body {
|
||
padding: 20rpx 28rpx 8rpx 28rpx;
|
||
.line { font-size: 32rpx; color: #333; padding: 16rpx 0; }
|
||
.phone { font-size: 36rpx; }
|
||
}
|
||
.card-footer {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding: 16rpx 28rpx 28rpx 28rpx;
|
||
.btn-outline {
|
||
border: 2rpx solid $red;
|
||
color: $red;
|
||
padding: 10rpx 24rpx;
|
||
border-radius: 28rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.spacer { height: 200rpx; }
|
||
|
||
.bottom-bar {
|
||
position: fixed;
|
||
left: 0; right: 0; bottom: 0;
|
||
background: #00cbc0;
|
||
height: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.btn-primary {
|
||
color: #fff;
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
</style>
|