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 @@ |
|||||||
{ |
{ |
||||||
"navigationBarTitleText": "健康档案", |
"navigationBarTitleText": "健康档案", |
||||||
"usingComponents": {} |
"navigationBarBackgroundColor": "#F6F6F6", |
||||||
|
"usingComponents": { |
||||||
|
"van-icon": "@vant/weapp/icon/index" |
||||||
|
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,150 +1,233 @@ |
|||||||
page { |
page { |
||||||
background-color: rgba(246, 246, 246, 1); |
background-color: #f6f6f6; |
||||||
} |
} |
||||||
.page { |
.page { |
||||||
.page-header { |
padding: 32rpx 32rpx 80rpx; |
||||||
padding: 32rpx 40rpx; |
.card { |
||||||
|
margin-bottom: 32rpx; |
||||||
|
padding: 32rpx; |
||||||
background-color: #fff; |
background-color: #fff; |
||||||
font-size: 36rpx; |
border-radius: 24rpx; |
||||||
color: rgba(34, 34, 34, 1); |
.c-title { |
||||||
} |
font-size: 36rpx; |
||||||
.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; |
|
||||||
color: rgba(34, 34, 34, 1); |
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 { |
.radio-group { |
||||||
margin: 0 40rpx 0; |
margin-top: 32rpx; |
||||||
padding-bottom: 16rpx; |
display: grid; |
||||||
.list-item { |
grid-template-columns: repeat(1, 1fr); |
||||||
margin-top: 24rpx; |
gap: 24rpx; |
||||||
padding: 38rpx 32rpx; |
.radio-item { |
||||||
background-color: #fff; |
padding: 32rpx; |
||||||
box-sizing: border-box; |
background-color: rgba(248, 248, 248, 1); |
||||||
border-radius: 24rpx; |
border-radius: 24rpx; |
||||||
display: flex; |
display: flex; |
||||||
align-items: center; |
align-items: center; |
||||||
gap: 20rpx; |
gap: 24rpx; |
||||||
border: 2px solid transparent; |
.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 { |
&.active { |
||||||
border-color: #0eb66d; |
.radio { |
||||||
.check-icon { |
position: relative; |
||||||
border: none; |
border-color: rgba(14, 182, 109, 1); |
||||||
background: linear-gradient(94deg, #0eb66d 0%, #00d277 100%); |
background-color: rgba(14, 182, 109, 1); |
||||||
.icon-inner { |
&::after { |
||||||
opacity: 1; |
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; |
flex-shrink: 0; |
||||||
width: 44rpx; |
width: 40rpx; |
||||||
height: 44rpx; |
height: 40rpx; |
||||||
border-radius: 8rpx; |
border-radius: 8rpx; |
||||||
border: 1px solid rgba(187, 187, 187, 1); |
border: 1px solid rgba(34, 34, 34, 0.2); |
||||||
display: flex; |
display: flex; |
||||||
align-items: center; |
align-items: center; |
||||||
justify-content: center; |
justify-content: center; |
||||||
box-sizing: border-box; |
.icon { |
||||||
.icon-inner { |
display: none; |
||||||
width: 22rpx; |
|
||||||
height: 12rpx; |
|
||||||
border-left: 4rpx solid #fff; |
|
||||||
border-bottom: 4rpx solid #fff; |
|
||||||
transform: rotate(-45deg) translate(2rpx, -4rpx); |
|
||||||
opacity: 0; |
|
||||||
} |
} |
||||||
} |
} |
||||||
.content { |
.content { |
||||||
font-size: 40rpx; |
font-size: 36rpx; |
||||||
color: rgba(34, 34, 34, 1); |
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 { |
.date { |
||||||
margin: 24rpx 40rpx 0; |
margin-top: 32rpx; |
||||||
.other-input { |
padding: 28rpx 32rpx; |
||||||
width: 100%; |
display: flex; |
||||||
padding: 24rpx 32rpx; |
align-items: center; |
||||||
background-color: #fff; |
justify-content: space-between; |
||||||
border-radius: 24rpx; |
background-color: rgba(246, 246, 246, 1); |
||||||
box-sizing: border-box; |
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; |
font-size: 36rpx; |
||||||
color: rgba(34, 34, 34, 1); |
color: rgba(34, 34, 34, 0.7); |
||||||
min-height: 120rpx; |
&.active { |
||||||
|
color: rgba(34, 34, 34, 1); |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
.textarea { |
||||||
.footer { |
margin-top: 32rpx; |
||||||
position: fixed; |
padding: 26rpx 32rpx; |
||||||
bottom: 0; |
background-color: rgba(248, 248, 248, 1); |
||||||
left: 0; |
border-radius: 24rpx; |
||||||
box-sizing: border-box; |
min-height: 160rpx; |
||||||
padding: 32rpx 40rpx 40rpx; |
width: 100%; |
||||||
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; |
|
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
border: 1px solid rgba(14, 182, 109, 1); |
font-size: 32rpx; |
||||||
font-size: 40rpx; |
color: rgba(34, 34, 34, 1); |
||||||
border-radius: 12rpx; |
|
||||||
color: rgba(14, 182, 109, 1); |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
} |
} |
||||||
.next { |
.input { |
||||||
flex: 1; |
margin-top: 32rpx; |
||||||
height: 96rpx; |
padding: 26rpx 32rpx; |
||||||
box-sizing: border-box; |
background-color: rgba(248, 248, 248, 1); |
||||||
font-size: 40rpx; |
border-radius: 24rpx; |
||||||
border-radius: 12rpx; |
} |
||||||
color: #fff; |
.place-input { |
||||||
background: linear-gradient(0deg, rgba(14, 182, 109, 1), rgba(0, 210, 119, 1)); |
color: rgba(34, 34, 34, 0.4); |
||||||
|
} |
||||||
|
.image-group { |
||||||
|
margin-top: 32rpx; |
||||||
display: flex; |
display: flex; |
||||||
align-items: center; |
flex-wrap: wrap; |
||||||
justify-content: center; |
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 { |
#drug-page { |
||||||
.p-item.active { |
.radio-item.active .radio { |
||||||
background: linear-gradient(270deg, #b384f4 0%, #5956e9 100%); |
|
||||||
} |
|
||||||
.list-item.active { |
|
||||||
border-color: rgba(89, 86, 233, 1); |
border-color: rgba(89, 86, 233, 1); |
||||||
.check-icon { |
background-color: rgba(89, 86, 233, 1); |
||||||
border-color: transparent; |
|
||||||
background: linear-gradient(270deg, #5956e9 0%, #b384f4 100%); |
|
||||||
} |
|
||||||
} |
} |
||||||
.prev { |
.check-item.active .check { |
||||||
border-color: rgba(89, 86, 233, 1); |
border-color: rgba(89, 86, 233, 1); |
||||||
color: rgba(89, 86, 233, 1); |
background-color: rgba(89, 86, 233, 1); |
||||||
} |
} |
||||||
.next { |
.submit { |
||||||
background: linear-gradient(90deg, #b384f4 0%, #5956e9 100%); |
background: linear-gradient(270deg, #5956e9 0%, #b384f4 100%); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,45 +1,115 @@ |
|||||||
<wxs src="../../utils/tools.wxs" module="tools" /> |
<wxs src="../../utils/tools.wxs" module="tools" /> |
||||||
<view class="page" id="{{theme === 'DRUG' && 'drug-page'}}"> |
<view class="page" id="{{theme === 'DRUG' && 'drug-page'}}"> |
||||||
<view class="page-header">您好！为了更好地了解您的病情，请您完成以下{{questions.length}}个简单问题，便于医生评估您的近期状况：</view> |
<block wx:for="{{questions}}" wx:for-index="qIndex" wx:key="QuestionNo"> |
||||||
<view class="progress"> |
<view class="card" wx:if="{{item.visible}}"> |
||||||
<view |
<view class="c-title">{{item.displayNo}}. {{item.QuestionContent}}</view> |
||||||
class="p-item {{index <= currentIndex && 'active'}}" |
<view wx:if="{{item.Description}}" class="tip">{{item.Description}}</view> |
||||||
wx:for="{{questions}}" |
|
||||||
wx:key="QuestionNo" |
|
||||||
></view> |
|
||||||
</view> |
|
||||||
|
|
||||||
<block wx:for="{{questions}}" wx:key="QuestionNo" wx:for-item="question" wx:for-index="qIndex"> |
<!-- 单选 QuestionType=1 --> |
||||||
<view class="question-section" wx:if="{{qIndex === currentIndex}}"> |
<view wx:if="{{item.QuestionType === 1}}" class="radio-group"> |
||||||
<view class="list-title">{{question.QuestionContent}}</view> |
|
||||||
<view class="list"> |
|
||||||
<view |
<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="{{item.optionList}}" |
||||||
wx:for="{{question.optionList}}" |
wx:for-item="opt" |
||||||
wx:key="key" |
wx:key="key" |
||||||
bind:tap="handleSelect" |
class="radio-item {{tools.eq(opt.key, item.Answer) && 'active'}}" |
||||||
data-key="{{item.key}}" |
bind:tap="handleRadioSelect" |
||||||
|
data-index="{{qIndex}}" |
||||||
|
data-key="{{opt.key}}" |
||||||
> |
> |
||||||
<view class="check-icon"> |
<view class="radio"></view> |
||||||
<view class="icon-inner"></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> |
||||||
<view class="content">{{item.value}}</view> |
<view class="content">{{opt.value}}</view> |
||||||
</view> |
</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)))}}"> |
<input |
||||||
<textarea |
wx:if="{{item.QuestionType === 2 && item.HasOther === 1 && tools.include(99, item.Answer)}}" |
||||||
class="other-input" |
class="input" |
||||||
placeholder="请输入其他内容" |
placeholder-class="place-input" |
||||||
value="{{question.OtherText}}" |
placeholder="请输入其他内容" |
||||||
bindinput="handleOtherInput" |
value="{{item.OtherText}}" |
||||||
maxlength="200" |
bindinput="handleOtherInput" |
||||||
></textarea> |
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> |
||||||
</view> |
</view> |
||||||
</block> |
</block> |
||||||
|
<view class="submit" bind:tap="handleSubmit">提交</view> |
||||||
<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> |
</view> |
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue