kola-web
1 week ago
25 changed files with 1154 additions and 20 deletions
@ -0,0 +1,5 @@
@@ -0,0 +1,5 @@
|
||||
{ |
||||
"navigationStyle": "default", |
||||
"navigationBarTitleText": "复诊记录", |
||||
"usingComponents": {} |
||||
} |
||||
@ -0,0 +1,110 @@
@@ -0,0 +1,110 @@
|
||||
page { |
||||
background-color: rgba(246, 248, 249, 1); |
||||
} |
||||
|
||||
.page { |
||||
padding: 48rpx 32rpx; |
||||
.card { |
||||
display: flex; |
||||
gap: 14rpx; |
||||
.aside { |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
.line-top, |
||||
.line-bottom { |
||||
border-right: 1px dashed rgba(185, 130, 255, 1); |
||||
} |
||||
.line-bottom { |
||||
flex: 1; |
||||
} |
||||
.line-top { |
||||
height: 10rpx; |
||||
flex-shrink: 0; |
||||
} |
||||
.circle { |
||||
flex-shrink: 0; |
||||
position: relative; |
||||
width: 28rpx; |
||||
height: 28rpx; |
||||
background-color: rgba(185, 130, 255, 0.34); |
||||
border-radius: 50%; |
||||
&::after { |
||||
content: ''; |
||||
display: block; |
||||
position: absolute; |
||||
width: 16rpx; |
||||
height: 16rpx; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
background-color: rgba(185, 130, 255, 1); |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
} |
||||
.container { |
||||
.date { |
||||
font-size: 36rpx; |
||||
color: rgba(33, 29, 46, 1); |
||||
} |
||||
.wrap { |
||||
margin-top: 24rpx; |
||||
padding: 30rpx; |
||||
background: linear-gradient(180deg, #f9f5ff 0%, #ffffff 21.88%, #ffffff 100%); |
||||
border-radius: 24rpx 24rpx 24rpx 24rpx; |
||||
border: 2rpx solid #ffffff; |
||||
.title { |
||||
margin-left: -30rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 20rpx; |
||||
font-size: 32rpx; |
||||
color: rgba(33, 29, 46, 1); |
||||
&::before { |
||||
content: ''; |
||||
width: 8rpx; |
||||
height: 32rpx; |
||||
border-radius: 0 4rpx 4rpx 0; |
||||
background: #b982ff; |
||||
} |
||||
} |
||||
.list { |
||||
.list-item { |
||||
margin-top: 24rpx; |
||||
display: flex; |
||||
gap: 20rpx; |
||||
font-size: 32rpx; |
||||
color: rgba(105, 104, 110, 1); |
||||
&::before { |
||||
margin-top: 16rpx; |
||||
flex-shrink: 0; |
||||
content: ''; |
||||
width: 10rpx; |
||||
height: 10rpx; |
||||
border-radius: 50%; |
||||
background-color: #7d7d82; |
||||
} |
||||
} |
||||
} |
||||
.next-date { |
||||
margin-top: 24rpx; |
||||
padding: 24rpx 32rpx; |
||||
background: #fff7e9; |
||||
border-radius: 16rpx 16rpx 16rpx 16rpx; |
||||
border: 2rpx solid #ffffff; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 16rpx; |
||||
.icon { |
||||
width: 36rpx; |
||||
height: 36rpx; |
||||
} |
||||
font-size: 32rpx; |
||||
color: rgba(248, 166, 26, 1); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
const _app = getApp<IAppOption>(); |
||||
|
||||
Page({ |
||||
data: {}, |
||||
onLoad() {}, |
||||
}); |
||||
|
||||
export {} |
||||
@ -0,0 +1,22 @@
@@ -0,0 +1,22 @@
|
||||
<view class="page"> |
||||
<view class="card"> |
||||
<view class="aside"> |
||||
<view class="line-top"></view> |
||||
<view class="circle"></view> |
||||
<view class="line-bottom"></view> |
||||
</view> |
||||
<view class="container"> |
||||
<view class="date">复诊时间：2025-06-11</view> |
||||
<view class="wrap"> |
||||
<view class="title">复诊方案</view> |
||||
<view class="list"> |
||||
<view class="list-item">生物制剂IGF-1R抗体(替妥尤单抗) 第2次使用</view> |
||||
<view class="list-item">传统免疫抑制剂（如：吗替麦考酚酯、环孢素等、甲氨蝶呤）</view> |
||||
</view> |
||||
<view class="next-date"> |
||||
<image class="icon" src="/images/icon172.png"></image> |
||||
下次复诊时间：2025-06-11</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
@ -0,0 +1,9 @@
@@ -0,0 +1,9 @@
|
||||
{ |
||||
"navigationStyle": "default", |
||||
"navigationBarTitleText": "复诊提醒录入", |
||||
"usingComponents": { |
||||
"van-stepper": "@vant/weapp/stepper/index", |
||||
"van-icon": "@vant/weapp/icon/index", |
||||
"popup": "/components/popup/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,172 @@
@@ -0,0 +1,172 @@
|
||||
page { |
||||
background-color: rgba(246, 248, 249, 1); |
||||
} |
||||
|
||||
.page { |
||||
padding: 30rpx 30rpx 200rpx; |
||||
.card { |
||||
margin-bottom: 24rpx; |
||||
padding: 32rpx; |
||||
background-color: #fff; |
||||
border-radius: 24rpx; |
||||
.c-title { |
||||
margin-left: -32rpx; |
||||
font-size: 36rpx; |
||||
color: rgba(33, 29, 46, 1); |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 22rpx; |
||||
&::before { |
||||
display: block; |
||||
content: ''; |
||||
width: 8rpx; |
||||
height: 32rpx; |
||||
background: #b982ff; |
||||
} |
||||
.sub { |
||||
flex: 1; |
||||
text-align: right; |
||||
font-size: 28rpx; |
||||
color: rgba(185, 130, 255, 1); |
||||
} |
||||
} |
||||
.c-title1 { |
||||
font-size: 36rpx; |
||||
color: rgba(33, 29, 46, 1); |
||||
text-align: center; |
||||
} |
||||
.date { |
||||
margin-top: 24rpx; |
||||
padding: 0 32rpx; |
||||
height: 84rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
border-radius: 16rpx; |
||||
background-color: rgba(246, 248, 249, 1); |
||||
color: rgba(173, 172, 178, 1); |
||||
.content { |
||||
font-size: 32rpx; |
||||
} |
||||
&.active { |
||||
color: rgba(33, 29, 46, 1); |
||||
} |
||||
} |
||||
.check-item { |
||||
margin-top: 24rpx; |
||||
font-size: 32rpx; |
||||
color: rgba(33, 29, 46, 1); |
||||
padding: 18rpx 32rpx; |
||||
font-size: 32rpx; |
||||
color: rgba(33, 29, 46, 1); |
||||
line-height: 48rpx; |
||||
border-radius: 16rpx; |
||||
background-color: rgba(246, 248, 249, 1); |
||||
border: 1px solid rgba(246, 248, 249, 1); |
||||
box-sizing: border-box; |
||||
&.active { |
||||
border-color: rgba(185, 130, 255, 1); |
||||
background: rgba(250, 246, 255, 1); |
||||
color: rgba(185, 130, 255, 1); |
||||
} |
||||
} |
||||
.step { |
||||
margin-top: 34rpx; |
||||
display: flex; |
||||
justify-content: center; |
||||
.stepper { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 10rpx; |
||||
} |
||||
.pm-input { |
||||
width: 120rpx; |
||||
background-color: #fff; |
||||
font-size: 48rpx; |
||||
color: rgba(33, 29, 46, 1); |
||||
display: flex; |
||||
align-items: baseline; |
||||
&::after { |
||||
display: inline-block; |
||||
content: '次'; |
||||
font-size: 28rpx; |
||||
} |
||||
} |
||||
.pm { |
||||
width: 80rpx; |
||||
height: 80rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 50%; |
||||
font-size: 24rpx; |
||||
color: rgba(107, 114, 128, 1); |
||||
background-color: rgba(246, 248, 249, 1); |
||||
} |
||||
} |
||||
.tip { |
||||
margin-top: 32rpx; |
||||
font-size: 28rpx; |
||||
color: rgba(248, 166, 26, 1); |
||||
text-align: center; |
||||
} |
||||
.radio-wrap { |
||||
margin-top: 24rpx; |
||||
display: flex; |
||||
gap: 32rpx; |
||||
.radio { |
||||
flex: 1; |
||||
height: 76rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 32rpx; |
||||
color: rgba(173, 172, 178, 1); |
||||
background: #f6f8f9; |
||||
border-radius: 64rpx 64rpx 64rpx 64rpx; |
||||
&.active { |
||||
background-color: rgba(185, 130, 255, 1); |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.page-footer { |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
padding: 20rpx 30rpx 80rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
gap: 26rpx; |
||||
background-color: #fff; |
||||
box-shadow: 0 10rpx 10rpx rgba(204, 204, 204, 0.3); |
||||
.cancel { |
||||
flex: 1; |
||||
height: 88rpx; |
||||
background: #ffffff; |
||||
border-radius: 48rpx 48rpx 48rpx 48rpx; |
||||
border: 1px solid #b982ff; |
||||
font-size: 32rpx; |
||||
color: rgba(185, 130, 255, 1); |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.submit { |
||||
flex: 1; |
||||
height: 88rpx; |
||||
font-size: 32rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
background: linear-gradient(180deg, #e98ff8 0%, #b073ff 100%); |
||||
border-radius: 48rpx 48rpx 48rpx 48rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,23 @@
@@ -0,0 +1,23 @@
|
||||
const _app = getApp<IAppOption>(); |
||||
|
||||
Page({ |
||||
data: { |
||||
popupShow: false, |
||||
popupType: 'popup19', |
||||
popupParams: {}, |
||||
}, |
||||
onLoad() {}, |
||||
|
||||
// popup 确认（继续退出）
|
||||
handlePopupOk() { |
||||
this.setData({ popupShow: false }) |
||||
wx.navigateBack() |
||||
}, |
||||
|
||||
// popup 取消
|
||||
handlePopupCancel() { |
||||
this.setData({ popupShow: false }) |
||||
}, |
||||
}); |
||||
|
||||
export {} |
||||
@ -0,0 +1,69 @@
@@ -0,0 +1,69 @@
|
||||
<view class="page"> |
||||
<view class="card"> |
||||
<view class="c-title">您的复诊时间</view> |
||||
<picker mode="date"> |
||||
<view class="date active"> |
||||
<view class="content">年 / 月 / 日</view> |
||||
<van-icon name="arrow-down" /> |
||||
</view> |
||||
</picker> |
||||
</view> |
||||
<view class="card"> |
||||
<view class="c-title">您复诊后的方案是？（多选）</view> |
||||
<view class="check-item">1、激素静脉冲击治疗</view> |
||||
<view class="check-item active">2、生物制剂IGF-1R 抗体（替妥尤单抗）</view> |
||||
</view> |
||||
<view class="card"> |
||||
<view class="c-title1">您是第几次使用替妥尤单抗？</view> |
||||
<view class="step"> |
||||
<van-stepper |
||||
value="{{ 1 }}" |
||||
min="{{1}}" |
||||
max="{{99}}" |
||||
bind:change="onChange" |
||||
custom-class="stepper" |
||||
plus-class="pm" |
||||
minus-class="pm" |
||||
input-class="pm-input" |
||||
> |
||||
<view class="pm" slot="plus"> |
||||
<van-icon name="plus" /> |
||||
</view> |
||||
<view class="pm" slot="minus"> |
||||
<van-icon name="minus" /> |
||||
</view> |
||||
</van-stepper> |
||||
</view> |
||||
<view class="tip">注：替妥尤单抗常规疗程共 8 次注射（每3周1次）</view> |
||||
</view> |
||||
<view class="card"> |
||||
<view class="c-title"> |
||||
您的下次复诊时间 |
||||
<view class="sub">配合就医建议周期</view> |
||||
</view> |
||||
<picker mode="date"> |
||||
<view class="date active"> |
||||
<view class="content">年 / 月 / 日</view> |
||||
<van-icon name="arrow-down" /> |
||||
</view> |
||||
</picker> |
||||
<view class="radio-wrap"> |
||||
<view class="radio active">21天后</view> |
||||
<view class="radio">1个月后</view> |
||||
<view class="radio">2个月后</view> |
||||
</view> |
||||
</view> |
||||
<view class="page-footer"> |
||||
<view class="cancel">取消</view> |
||||
<view class="submit">提交</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<popup |
||||
id="popup" |
||||
show="{{popupShow}}" |
||||
type="{{popupType}}" |
||||
params="{{popupParams}}" |
||||
bind:ok="handlePopupOk" |
||||
bind:cancel="handlePopupCancel" |
||||
/> |
||||
Loading…
Reference in new issue