Browse Source
本次提交完成了大量功能更新与体验优化： 1. 新增DRUG主题全套资源与样式适配 2. 重构问卷表单页面，支持多题型与条件显示 3. 统一隐私政策页面路径与文案，优化用户协议展示 4. 重构医生端tabbar，优化未读消息逻辑 5. 移除确诊时间范围选择项，简化患者注册流程 6. 优化多个页面的UI样式与交互细节 7. 修复多处逻辑bug与样式问题master
kola-web
3 weeks ago
59 changed files with 751 additions and 404 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 472 KiB |
|
After Width: | Height: | Size: 169 KiB |
|
After Width: | Height: | Size: 170 KiB |
|
After Width: | Height: | Size: 173 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 825 B |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 152 KiB |
@ -1,4 +1,7 @@
@@ -1,4 +1,7 @@
|
||||
{ |
||||
"navigationBarTitleText": "健康档案", |
||||
"usingComponents": {} |
||||
"navigationBarBackgroundColor": "#F6F6F6", |
||||
"usingComponents": { |
||||
"van-icon": "@vant/weapp/icon/index" |
||||
} |
||||
} |
||||
|
||||
@ -1,150 +1,233 @@
@@ -1,150 +1,233 @@
|
||||
page { |
||||
background-color: rgba(246, 246, 246, 1); |
||||
background-color: #f6f6f6; |
||||
} |
||||
.page { |
||||
.page-header { |
||||
padding: 32rpx 40rpx; |
||||
padding: 32rpx 32rpx 80rpx; |
||||
.card { |
||||
margin-bottom: 32rpx; |
||||
padding: 32rpx; |
||||
background-color: #fff; |
||||
font-size: 36rpx; |
||||
color: rgba(34, 34, 34, 1); |
||||
} |
||||
.progress { |
||||
margin: 32rpx 40rpx 0; |
||||
display: flex; |
||||
gap: 14rpx; |
||||
.p-item { |
||||
flex: 1; |
||||
height: 12rpx; |
||||
background-color: #fff; |
||||
border-radius: 56rpx; |
||||
&.active { |
||||
background: linear-gradient(94deg, #0eb66d 0%, #00d277 100%); |
||||
} |
||||
} |
||||
} |
||||
.question-section { |
||||
padding-bottom: 220rpx; |
||||
.list-title { |
||||
margin: 24rpx 40rpx 0; |
||||
font-size: 44rpx; |
||||
border-radius: 24rpx; |
||||
.c-title { |
||||
font-size: 36rpx; |
||||
color: rgba(34, 34, 34, 1); |
||||
font-weight: bold; |
||||
} |
||||
.tip { |
||||
margin-top: 16rpx; |
||||
padding: 22rpx 24rpx; |
||||
background-color: rgba(248, 248, 248, 1); |
||||
border-radius: 16rpx; |
||||
font-size: 28rpx; |
||||
color: rgba(34, 34, 34, 0.7); |
||||
} |
||||
.list { |
||||
margin: 0 40rpx 0; |
||||
padding-bottom: 16rpx; |
||||
.list-item { |
||||
margin-top: 24rpx; |
||||
padding: 38rpx 32rpx; |
||||
background-color: #fff; |
||||
box-sizing: border-box; |
||||
.radio-group { |
||||
margin-top: 32rpx; |
||||
display: grid; |
||||
grid-template-columns: repeat(1, 1fr); |
||||
gap: 24rpx; |
||||
.radio-item { |
||||
padding: 32rpx; |
||||
background-color: rgba(248, 248, 248, 1); |
||||
border-radius: 24rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 20rpx; |
||||
border: 2px solid transparent; |
||||
gap: 24rpx; |
||||
.radio { |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
border-radius: 50%; |
||||
border: 1px solid rgba(34, 34, 34, 0.2); |
||||
} |
||||
.content { |
||||
font-size: 36rpx; |
||||
color: rgba(34, 34, 34, 0.7); |
||||
} |
||||
&.active { |
||||
border-color: #0eb66d; |
||||
.check-icon { |
||||
border: none; |
||||
background: linear-gradient(94deg, #0eb66d 0%, #00d277 100%); |
||||
.icon-inner { |
||||
opacity: 1; |
||||
.radio { |
||||
position: relative; |
||||
border-color: rgba(14, 182, 109, 1); |
||||
background-color: rgba(14, 182, 109, 1); |
||||
&::after { |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
content: ''; |
||||
width: 20rpx; |
||||
height: 20rpx; |
||||
border-radius: 50%; |
||||
background-color: #fff; |
||||
} |
||||
} |
||||
.content { |
||||
color: rgba(34, 34, 34, 1); |
||||
} |
||||
} |
||||
.check-icon { |
||||
} |
||||
} |
||||
.check-group { |
||||
margin-top: 32rpx; |
||||
display: grid; |
||||
gap: 24rpx; |
||||
&.col1 { |
||||
grid-template-columns: repeat(1, 1fr); |
||||
} |
||||
&.col2 { |
||||
grid-template-columns: repeat(2, 1fr); |
||||
} |
||||
.check-item { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 24rpx; |
||||
padding: 26rpx 24rpx; |
||||
border-radius: 16rpx; |
||||
background-color: rgba(248, 248, 248, 1); |
||||
.check { |
||||
flex-shrink: 0; |
||||
width: 44rpx; |
||||
height: 44rpx; |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
border-radius: 8rpx; |
||||
border: 1px solid rgba(187, 187, 187, 1); |
||||
border: 1px solid rgba(34, 34, 34, 0.2); |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
box-sizing: border-box; |
||||
.icon-inner { |
||||
width: 22rpx; |
||||
height: 12rpx; |
||||
border-left: 4rpx solid #fff; |
||||
border-bottom: 4rpx solid #fff; |
||||
transform: rotate(-45deg) translate(2rpx, -4rpx); |
||||
opacity: 0; |
||||
.icon { |
||||
display: none; |
||||
} |
||||
} |
||||
.content { |
||||
font-size: 40rpx; |
||||
font-size: 36rpx; |
||||
color: rgba(34, 34, 34, 1); |
||||
} |
||||
&.active { |
||||
.check { |
||||
border-color: rgba(14, 182, 109, 1); |
||||
background-color: rgba(14, 182, 109, 1); |
||||
.icon { |
||||
color: #fff; |
||||
display: block; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.other-section { |
||||
margin: 24rpx 40rpx 0; |
||||
.other-input { |
||||
width: 100%; |
||||
padding: 24rpx 32rpx; |
||||
background-color: #fff; |
||||
border-radius: 24rpx; |
||||
box-sizing: border-box; |
||||
.date { |
||||
margin-top: 32rpx; |
||||
padding: 28rpx 32rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
background-color: rgba(246, 246, 246, 1); |
||||
border-radius: 16rpx; |
||||
gap: 20rpx; |
||||
color: rgba(34, 34, 34, 0.2); |
||||
.icon { |
||||
flex-shrink: 0; |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
} |
||||
.content { |
||||
flex: 1; |
||||
font-size: 36rpx; |
||||
color: rgba(34, 34, 34, 1); |
||||
min-height: 120rpx; |
||||
color: rgba(34, 34, 34, 0.7); |
||||
&.active { |
||||
color: rgba(34, 34, 34, 1); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.footer { |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
box-sizing: border-box; |
||||
padding: 32rpx 40rpx 40rpx; |
||||
background-color: #fff; |
||||
width: 100%; |
||||
display: flex; |
||||
gap: 30rpx; |
||||
box-shadow: 0 -10rpx 10rpx rgba(204, 204, 204, 0.3); |
||||
.prev { |
||||
flex: 1; |
||||
height: 96rpx; |
||||
.textarea { |
||||
margin-top: 32rpx; |
||||
padding: 26rpx 32rpx; |
||||
background-color: rgba(248, 248, 248, 1); |
||||
border-radius: 24rpx; |
||||
min-height: 160rpx; |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
border: 1px solid rgba(14, 182, 109, 1); |
||||
font-size: 40rpx; |
||||
border-radius: 12rpx; |
||||
color: rgba(14, 182, 109, 1); |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 32rpx; |
||||
color: rgba(34, 34, 34, 1); |
||||
} |
||||
.next { |
||||
flex: 1; |
||||
height: 96rpx; |
||||
box-sizing: border-box; |
||||
font-size: 40rpx; |
||||
border-radius: 12rpx; |
||||
color: #fff; |
||||
background: linear-gradient(0deg, rgba(14, 182, 109, 1), rgba(0, 210, 119, 1)); |
||||
.input { |
||||
margin-top: 32rpx; |
||||
padding: 26rpx 32rpx; |
||||
background-color: rgba(248, 248, 248, 1); |
||||
border-radius: 24rpx; |
||||
} |
||||
.place-input { |
||||
color: rgba(34, 34, 34, 0.4); |
||||
} |
||||
.image-group { |
||||
margin-top: 32rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex-wrap: wrap; |
||||
gap: 20rpx; |
||||
.image-item { |
||||
position: relative; |
||||
width: 200rpx; |
||||
height: 200rpx; |
||||
.img { |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 16rpx; |
||||
} |
||||
.del { |
||||
position: absolute; |
||||
top: -12rpx; |
||||
right: -12rpx; |
||||
width: 44rpx; |
||||
height: 44rpx; |
||||
background-color: rgba(0, 0, 0, 0.5); |
||||
border-radius: 50%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
color: #fff; |
||||
font-size: 24rpx; |
||||
} |
||||
} |
||||
.image-add { |
||||
width: 200rpx; |
||||
height: 200rpx; |
||||
background-color: rgba(248, 248, 248, 1); |
||||
border-radius: 16rpx; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
gap: 12rpx; |
||||
.add-icon { |
||||
font-size: 56rpx; |
||||
color: rgba(34, 34, 34, 0.3); |
||||
} |
||||
.add-text { |
||||
font-size: 24rpx; |
||||
color: rgba(34, 34, 34, 0.4); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.submit { |
||||
height: 96rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
background: linear-gradient(94deg, #0eb66d 0%, #00d277 100%); |
||||
border-radius: 16rpx; |
||||
font-size: 40rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
} |
||||
} |
||||
|
||||
#drug-page { |
||||
.p-item.active { |
||||
background: linear-gradient(270deg, #b384f4 0%, #5956e9 100%); |
||||
} |
||||
.list-item.active { |
||||
.radio-item.active .radio { |
||||
border-color: rgba(89, 86, 233, 1); |
||||
.check-icon { |
||||
border-color: transparent; |
||||
background: linear-gradient(270deg, #5956e9 0%, #b384f4 100%); |
||||
} |
||||
background-color: rgba(89, 86, 233, 1); |
||||
} |
||||
.prev { |
||||
.check-item.active .check { |
||||
border-color: rgba(89, 86, 233, 1); |
||||
color: rgba(89, 86, 233, 1); |
||||
background-color: rgba(89, 86, 233, 1); |
||||
} |
||||
.next { |
||||
background: linear-gradient(90deg, #b384f4 0%, #5956e9 100%); |
||||
.submit { |
||||
background: linear-gradient(270deg, #5956e9 0%, #b384f4 100%); |
||||
} |
||||
} |
||||
|
||||
@ -1,45 +1,115 @@
@@ -1,45 +1,115 @@
|
||||
<wxs src="../../utils/tools.wxs" module="tools" /> |
||||
<view class="page" id="{{theme === 'DRUG' && 'drug-page'}}"> |
||||
<view class="page-header">您好！为了更好地了解您的病情，请您完成以下{{questions.length}}个简单问题，便于医生评估您的近期状况：</view> |
||||
<view class="progress"> |
||||
<view |
||||
class="p-item {{index <= currentIndex && 'active'}}" |
||||
wx:for="{{questions}}" |
||||
wx:key="QuestionNo" |
||||
></view> |
||||
</view> |
||||
<block wx:for="{{questions}}" wx:for-index="qIndex" wx:key="QuestionNo"> |
||||
<view class="card" wx:if="{{item.visible}}"> |
||||
<view class="c-title">{{item.displayNo}}. {{item.QuestionContent}}</view> |
||||
<view wx:if="{{item.Description}}" class="tip">{{item.Description}}</view> |
||||
|
||||
<block wx:for="{{questions}}" wx:key="QuestionNo" wx:for-item="question" wx:for-index="qIndex"> |
||||
<view class="question-section" wx:if="{{qIndex === currentIndex}}"> |
||||
<view class="list-title">{{question.QuestionContent}}</view> |
||||
<view class="list"> |
||||
<!-- 单选 QuestionType=1 --> |
||||
<view wx:if="{{item.QuestionType === 1}}" class="radio-group"> |
||||
<view |
||||
class="list-item {{(question.QuestionType === 2 && tools.include(item.key, question.Answer)) || (question.QuestionType === 1 && tools.eq(question.Answer, item.key)) ? 'active' : ''}}" |
||||
wx:for="{{question.optionList}}" |
||||
wx:for="{{item.optionList}}" |
||||
wx:for-item="opt" |
||||
wx:key="key" |
||||
bind:tap="handleSelect" |
||||
data-key="{{item.key}}" |
||||
class="radio-item {{tools.eq(opt.key, item.Answer) && 'active'}}" |
||||
bind:tap="handleRadioSelect" |
||||
data-index="{{qIndex}}" |
||||
data-key="{{opt.key}}" |
||||
> |
||||
<view class="check-icon"> |
||||
<view class="icon-inner"></view> |
||||
<view class="radio"></view> |
||||
<view class="content">{{opt.value}}</view> |
||||
</view> |
||||
</view> |
||||
<input |
||||
wx:if="{{item.QuestionType === 1 && item.HasOther === 1 && tools.eq(99, item.Answer)}}" |
||||
class="input" |
||||
placeholder-class="place-input" |
||||
placeholder="请输入其他内容" |
||||
value="{{item.OtherText}}" |
||||
bindinput="handleOtherInput" |
||||
data-index="{{qIndex}}" |
||||
/> |
||||
|
||||
<!-- 多选 QuestionType=2 --> |
||||
<view wx:if="{{item.QuestionType === 2}}" class="check-group {{item.Columns == 2 ? 'col2' : 'col1'}}"> |
||||
<view |
||||
wx:for="{{item.optionList}}" |
||||
wx:for-item="opt" |
||||
wx:key="key" |
||||
class="check-item {{tools.include(opt.key, item.Answer) && 'active'}}" |
||||
bind:tap="handleCheckSelect" |
||||
data-index="{{qIndex}}" |
||||
data-key="{{opt.key}}" |
||||
> |
||||
<view class="check"> |
||||
<van-icon name="success" class="icon" /> |
||||
</view> |
||||
<view class="content">{{item.value}}</view> |
||||
<view class="content">{{opt.value}}</view> |
||||
</view> |
||||
</view> |
||||
<view class="other-section" wx:if="{{question.HasOther === 1 && ((question.QuestionType === 2 && tools.include(99, question.Answer)) || (question.QuestionType === 1 && tools.eq(question.Answer, 99)))}}"> |
||||
<textarea |
||||
class="other-input" |
||||
placeholder="请输入其他内容" |
||||
value="{{question.OtherText}}" |
||||
bindinput="handleOtherInput" |
||||
maxlength="200" |
||||
></textarea> |
||||
<input |
||||
wx:if="{{item.QuestionType === 2 && item.HasOther === 1 && tools.include(99, item.Answer)}}" |
||||
class="input" |
||||
placeholder-class="place-input" |
||||
placeholder="请输入其他内容" |
||||
value="{{item.OtherText}}" |
||||
bindinput="handleOtherInput" |
||||
data-index="{{qIndex}}" |
||||
/> |
||||
|
||||
<!-- 日期 QuestionType=3 --> |
||||
<picker |
||||
wx:if="{{item.QuestionType === 3}}" |
||||
mode="date" |
||||
value="{{item.DateValue}}" |
||||
bind:change="handleDateChange" |
||||
data-index="{{qIndex}}" |
||||
> |
||||
<view class="date"> |
||||
<image class="icon" src="{{imageUrl}}{{theme === 'DRUG' ? 'icon87' : 'icon85'}}.png?t={{Timestamp}}"></image> |
||||
<view class="content {{item.DateValue && 'active'}}">{{item.DateValue || '请选择时间'}}</view> |
||||
<van-icon name="arrow-down" /> |
||||
</view> |
||||
</picker> |
||||
|
||||
<!-- 文本 QuestionType=4 --> |
||||
<textarea |
||||
wx:if="{{item.QuestionType === 4}}" |
||||
class="textarea" |
||||
placeholder-class="place-input" |
||||
placeholder="请输入" |
||||
value="{{item.TextValue}}" |
||||
bindinput="handleTextInput" |
||||
data-index="{{qIndex}}" |
||||
maxlength="500" |
||||
auto-height |
||||
></textarea> |
||||
|
||||
<!-- 图片 QuestionType=5 --> |
||||
<view wx:if="{{item.QuestionType === 5}}" class="image-group"> |
||||
<view |
||||
wx:for="{{item.Images}}" |
||||
wx:for-item="img" |
||||
wx:for-index="imgIndex" |
||||
wx:key="imgIndex" |
||||
class="image-item" |
||||
> |
||||
<image class="img" mode="aspectFill" src="{{img.url}}"></image> |
||||
<view class="del" catch:tap="handleImageDelete" data-index="{{qIndex}}" data-imgindex="{{imgIndex}}"> |
||||
<van-icon name="cross" /> |
||||
</view> |
||||
</view> |
||||
<view |
||||
wx:if="{{item.Images.length < 9}}" |
||||
class="image-add" |
||||
bind:tap="handleImageUpload" |
||||
data-index="{{qIndex}}" |
||||
> |
||||
<van-icon name="plus" class="add-icon" /> |
||||
<view class="add-text">添加图片</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</block> |
||||
|
||||
<view class="footer"> |
||||
<view class="prev" wx:if="{{currentIndex > 0}}" bind:tap="handlePrev">上一步</view> |
||||
<view class="next" bind:tap="handleNext">{{currentIndex === questions.length - 1 ? '完成' : '继续'}}</view> |
||||
</view> |
||||
<view class="submit" bind:tap="handleSubmit">提交</view> |
||||
</view> |
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue