kola-web
2 days ago
100 changed files with 3813 additions and 432 deletions
@ -0,0 +1,10 @@ |
|||||||
|
{ |
||||||
|
"navigationStyle": "custom", |
||||||
|
"usingComponents": { |
||||||
|
"van-overlay": "@vant/weapp/overlay/index", |
||||||
|
"van-loading": "@vant/weapp/loading/index", |
||||||
|
"navbar": "/components/navbar/index", |
||||||
|
"popup": "/components/popup/index", |
||||||
|
"van-popup": "@vant/weapp/popup/index" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,398 @@ |
|||||||
|
page { |
||||||
|
background-color: rgba(242, 244, 245, 1); |
||||||
|
} |
||||||
|
.page { |
||||||
|
height: 100vh; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
box-sizing: border-box; |
||||||
|
.page-container { |
||||||
|
flex: 1; |
||||||
|
overflow: hidden; |
||||||
|
.user { |
||||||
|
margin: 0 30rpx; |
||||||
|
padding: 32rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
gap: 20rpx; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 24rpx; |
||||||
|
box-shadow: 0rpx 4rpx 18rpx 0rpx rgba(0, 0, 0, 0.06); |
||||||
|
.avatar { |
||||||
|
flex-shrink: 0; |
||||||
|
width: 108rpx; |
||||||
|
height: 108rpx; |
||||||
|
border-radius: 50%; |
||||||
|
border: 2px solid #fff; |
||||||
|
} |
||||||
|
.wrap { |
||||||
|
flex: 1; |
||||||
|
.w-header { |
||||||
|
.name { |
||||||
|
margin-right: 16rpx; |
||||||
|
display: inline; |
||||||
|
font-size: 36rpx; |
||||||
|
color: rgba(28, 107, 255, 1); |
||||||
|
} |
||||||
|
.age { |
||||||
|
margin-right: 16rpx; |
||||||
|
padding: 0 14rpx; |
||||||
|
border-radius: 20rpx; |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
gap: 6rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
line-height: 32rpx; |
||||||
|
border: 1px solid #fff; |
||||||
|
background-color: rgba(28, 107, 255, 1); |
||||||
|
.icon { |
||||||
|
width: 28rpx; |
||||||
|
height: 28rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.site { |
||||||
|
padding: 0 14rpx; |
||||||
|
border-radius: 20rpx; |
||||||
|
background-color: rgba(32, 196, 255, 1); |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
gap: 6rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
line-height: 32rpx; |
||||||
|
.icon { |
||||||
|
width: 28rpx; |
||||||
|
height: 28rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.w-footer { |
||||||
|
margin-top: 22rpx; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
.content { |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(0, 0, 0, 0.3); |
||||||
|
} |
||||||
|
.doc { |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(28, 107, 255, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.scroll-view { |
||||||
|
height: 100%; |
||||||
|
.date { |
||||||
|
padding-top: 20rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(173, 179, 180, 1); |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.f-header-list { |
||||||
|
margin: 24rpx 32rpx 24rpx; |
||||||
|
padding: 32rpx; |
||||||
|
border-radius: 32rpx; |
||||||
|
box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(0, 0, 0, 0.06); |
||||||
|
background: linear-gradient(9deg, #f3fdfb 0%, #eaf2ff 100%); |
||||||
|
border: 2rpx solid #ffffff; |
||||||
|
.content { |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
line-height: 48rpx; |
||||||
|
} |
||||||
|
.l-item { |
||||||
|
margin-top: 24rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
line-height: 48rxp; |
||||||
|
padding: 20rpx 32rpx; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 84rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.doctor { |
||||||
|
padding: 15rpx 30rpx; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
.avatar { |
||||||
|
position: relative; |
||||||
|
padding-left: 16rpx; |
||||||
|
flex-shrink: 0; |
||||||
|
.a-img { |
||||||
|
width: 80rpx; |
||||||
|
height: 80rpx; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
.label { |
||||||
|
position: absolute; |
||||||
|
top: 68rpx; |
||||||
|
right: 0; |
||||||
|
padding: 0 8rpx; |
||||||
|
width: 84rpx; |
||||||
|
height: 28rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
line-height: 28rpx; |
||||||
|
font-size: 20rpx; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
text-align: center; |
||||||
|
background: linear-gradient(356deg, #f23a2f 0%, #fc684f 100%); |
||||||
|
border-radius: 35rpx 35rpx 35rpx 35rpx; |
||||||
|
overflow: hidden; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
} |
||||||
|
.d-container { |
||||||
|
flex: 1; |
||||||
|
margin-left: 74rpx; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: flex-end; |
||||||
|
.message { |
||||||
|
padding: 26rpx 32rpx; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 32rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
line-height: 48rpx; |
||||||
|
white-space: pre-line; |
||||||
|
} |
||||||
|
.week { |
||||||
|
padding: 26rpx 32rpx; |
||||||
|
background: linear-gradient(91deg, #1c6bff 0%, #73a4ff 100%); |
||||||
|
border-radius: 32rpx; |
||||||
|
.w-title { |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
.w-container { |
||||||
|
margin-top: 24rpx; |
||||||
|
.w-content { |
||||||
|
padding: 32rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(40, 48, 49, 1); |
||||||
|
line-height: 48rpx; |
||||||
|
border-radius: 24rpx; |
||||||
|
background-color: rgba(247, 247, 250, 1); |
||||||
|
white-space: pre-line; |
||||||
|
} |
||||||
|
.w-wrap { |
||||||
|
padding: 16rpx 32rpx; |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(2, 1fr); |
||||||
|
background-color: rgba(247, 247, 250, 1); |
||||||
|
border-radius: 24rpx; |
||||||
|
.row { |
||||||
|
padding: 16rpx 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
.content { |
||||||
|
margin-left: 16rpx; |
||||||
|
} |
||||||
|
&:nth-of-type(2n-1)::after { |
||||||
|
margin: 0 16rpx; |
||||||
|
content: ''; |
||||||
|
width: 1rpx; |
||||||
|
height: 40rpx; |
||||||
|
background-color: rgba(161, 164, 172, 0.35); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.card1 { |
||||||
|
width: 502rpx; |
||||||
|
height: 340rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 114rpx 56rpx 0; |
||||||
|
.content { |
||||||
|
text-align: center; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
line-height: 48rpx; |
||||||
|
} |
||||||
|
.btn { |
||||||
|
margin-top: 18rpx; |
||||||
|
height: 64rpx; |
||||||
|
border-radius: 84rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
background: linear-gradient( 356deg, #1D6BFF 0%, #4F8DFF 100%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.patient { |
||||||
|
padding: 15rpx 30rpx; |
||||||
|
display: flex; |
||||||
|
.avatar { |
||||||
|
padding-right: 16rpx; |
||||||
|
flex-shrink: 0; |
||||||
|
.a-img { |
||||||
|
width: 80rpx; |
||||||
|
height: 80rpx; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
} |
||||||
|
.p-container { |
||||||
|
flex: 1; |
||||||
|
margin-right: 74rpx; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: flex-start; |
||||||
|
.guide { |
||||||
|
padding: 32rpx 30rpx; |
||||||
|
border-radius: 32rpx 0 32rpx 32rpx; |
||||||
|
background: linear-gradient(13deg, #ffffff 8%, #e8f0f1 100%); |
||||||
|
border: 2rpx solid #ffffff; |
||||||
|
.title { |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(40, 48, 49, 1); |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.sub-title { |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(154, 161, 162, 1); |
||||||
|
margin-bottom: 30rpx; |
||||||
|
} |
||||||
|
.list { |
||||||
|
.l-item { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 16rpx; |
||||||
|
margin-bottom: 30rpx; |
||||||
|
.order { |
||||||
|
flex-shrink: 0; |
||||||
|
width: 28rpx; |
||||||
|
height: 28rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
border-radius: 6rpx; |
||||||
|
background: #67baca; |
||||||
|
} |
||||||
|
.content { |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(40, 48, 49, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.tip { |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(103, 113, 114, 1); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
.icon { |
||||||
|
width: 44rpx; |
||||||
|
height: 44rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.message { |
||||||
|
padding: 26rpx 32rpx; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 40rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
white-space: pre-line; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.place { |
||||||
|
height: 15vh; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.page-footer { |
||||||
|
padding: 32rpx 30rpx calc(32rpx + env(safe-area-inset-bottom)); |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
gap: 28rpx; |
||||||
|
border-radius: 32rpx 32rpx 0 0; |
||||||
|
box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(40, 48, 49, 0.04); |
||||||
|
border: 2rpx solid #ffffff; |
||||||
|
background-color: #fff; |
||||||
|
.send { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(40, 48, 49, 1); |
||||||
|
height: 76rpx; |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(40, 48, 49, 0.04); |
||||||
|
border-radius: 140rpx 140rpx 140rpx 140rpx; |
||||||
|
border: 2rpx solid #f2f4f5; |
||||||
|
.icon { |
||||||
|
width: 36rpx; |
||||||
|
height: 36rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.send-date { |
||||||
|
flex-shrink: 0; |
||||||
|
font-size: 24rpx; |
||||||
|
color: #283031; |
||||||
|
text-align: center; |
||||||
|
.icon { |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.popup-message { |
||||||
|
padding: 30rpx; |
||||||
|
background-color: rgba(242, 244, 245, 1); |
||||||
|
.title { |
||||||
|
padding: 0 32rpx 32rpx; |
||||||
|
font-size: 36rpx; |
||||||
|
color: rgba(40, 48, 49, 1); |
||||||
|
font-weight: bold; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.list { |
||||||
|
max-height: 50vh; |
||||||
|
overflow-y: auto; |
||||||
|
overflow-x: hidden; |
||||||
|
.l-item { |
||||||
|
margin-bottom: 24rpx; |
||||||
|
padding: 30rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(40, 48, 49, 1); |
||||||
|
border-radius: 24rpx; |
||||||
|
background-color: #fff; |
||||||
|
&.active { |
||||||
|
color: #fff; |
||||||
|
background: linear-gradient(356deg, #1d6bff 0%, #4f8dff 100%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.submit { |
||||||
|
margin-top: 24rpx; |
||||||
|
width: 690rpx; |
||||||
|
height: 84rpx; |
||||||
|
font-size: 36rpx; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
font-weight: bold; |
||||||
|
background: linear-gradient(356deg, #1d6bff 0%, #4f8dff 100%); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
border-radius: 64rpx 64rpx 64rpx 64rpx; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,388 @@ |
|||||||
|
import dayjs from 'dayjs' |
||||||
|
const licia = require('miniprogram-licia') |
||||||
|
|
||||||
|
const app = getApp<IAppOption>() |
||||||
|
|
||||||
|
interface IMessageItem { |
||||||
|
msgId: string |
||||||
|
msgContentType: '1' | '2' | '3' | '4' | '5' // 1:欢迎语 2: 文本 3: 出诊时间 4: 随访计划 5: 复诊提醒
|
||||||
|
msgContent: any |
||||||
|
msgVisitTime: string |
||||||
|
msgVisitTimeType?: string |
||||||
|
msgFromType: '1' | '2' // 1: 患者 2: 医生
|
||||||
|
msgCreateTime: string // 消息创建时间
|
||||||
|
msgCreateTimeName?: string // 消息创建时间
|
||||||
|
showTime?: boolean |
||||||
|
questionId?: string // 问题ID
|
||||||
|
doctorId?: string |
||||||
|
doctorName?: string |
||||||
|
doctorAvatar?: string |
||||||
|
msgOtherInfo?: any // 其他信息
|
||||||
|
} |
||||||
|
|
||||||
|
Page({ |
||||||
|
data: { |
||||||
|
popupShow: false, |
||||||
|
popupType: 'selectDoctor', |
||||||
|
popupParams: {}, |
||||||
|
|
||||||
|
patientId: '', |
||||||
|
|
||||||
|
expend: false, |
||||||
|
scrollTop: 0, |
||||||
|
scrollIntoView: '', |
||||||
|
doctorDetail: {} as any, |
||||||
|
doctorList: {}, |
||||||
|
|
||||||
|
questionActive: 0, |
||||||
|
questionList: [] as any, |
||||||
|
questionActiveList: [] as any[], |
||||||
|
headerQuestionList: [] as any, |
||||||
|
|
||||||
|
isLoad: false, |
||||||
|
isFinish: false, |
||||||
|
messageList: [ |
||||||
|
// { msgFromType: '2', msgContentType: '1', msgContent: '你的注射日还未填写，随访计划还未生成哦！' },
|
||||||
|
// { msgFromType: '2', msgContentType: '2', msgContent: '' },
|
||||||
|
// { msgFromType: '2', msgContentType: '3', msgContent: '' },
|
||||||
|
// { msgFromType: '2', msgContentType: '4', msgContent: '' },
|
||||||
|
// { msgFromType: '2', msgContentType: '5', msgContent: '' },
|
||||||
|
] as IMessageItem[], |
||||||
|
nextMsgId: '', |
||||||
|
unReadCount: 0, |
||||||
|
firstNotReadMsgId: 0, |
||||||
|
isVisitAdl: 2, |
||||||
|
adlMsgId: 0, |
||||||
|
|
||||||
|
messageListShow: false, |
||||||
|
wordIndex: 0, |
||||||
|
wordList: [], |
||||||
|
|
||||||
|
userInfo: {} as any, |
||||||
|
|
||||||
|
week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], |
||||||
|
timeDay: { 1: '上午', 2: '下午' }, |
||||||
|
}, |
||||||
|
onLoad(options) { |
||||||
|
this.setData({ |
||||||
|
patientId: options.id || '', |
||||||
|
}) |
||||||
|
app.waitLogin({ type: 2 }).then(() => { |
||||||
|
app.getUserInfo(2).then((userInfo) => { |
||||||
|
this.setData({ |
||||||
|
userInfo, |
||||||
|
}) |
||||||
|
}) |
||||||
|
this.getDetail() |
||||||
|
// this.getQuestionCommonList(this.data.questionActive)
|
||||||
|
this.getMessageList() |
||||||
|
this.getWordList() |
||||||
|
}) |
||||||
|
}, |
||||||
|
onShow() {}, |
||||||
|
getDetail() { |
||||||
|
wx.ajax({ |
||||||
|
method: 'GET', |
||||||
|
url: '?r=wtx/doctor/patient/get-detail', |
||||||
|
data: { |
||||||
|
patientId: this.data.patientId, |
||||||
|
}, |
||||||
|
}).then((res) => { |
||||||
|
this.setData({ |
||||||
|
patientInfo: { |
||||||
|
...res.patientInfo, |
||||||
|
createTimeName: dayjs(res.patientInfo.createTime).format('YYYY年MM月DD日'), |
||||||
|
}, |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
getMessageList() { |
||||||
|
if (this.data.isLoad || this.data.isFinish) return |
||||||
|
this.setData({ |
||||||
|
isLoad: true, |
||||||
|
}) |
||||||
|
const nextMsgId = this.data.nextMsgId |
||||||
|
wx.ajax({ |
||||||
|
method: 'GET', |
||||||
|
url: '?r=wtx/doctor/message-interact/get-message-list', |
||||||
|
data: { |
||||||
|
nextMsgId, |
||||||
|
patientId: this.data.patientId, |
||||||
|
}, |
||||||
|
}).then((res) => { |
||||||
|
res.messageList.map((item) => { |
||||||
|
if (item.msgContentType === '1') { |
||||||
|
item.msgOtherInfo = JSON.parse(item.msgOtherInfo) |
||||||
|
} else if (item.msgContentType === '3') { |
||||||
|
item.msgOtherInfo = JSON.parse(item.msgOtherInfo) |
||||||
|
} else if (item.msgContentType === '4') { |
||||||
|
item.msgContent = JSON.parse(item.msgContent) |
||||||
|
} else if (item.msgContentType === '5') { |
||||||
|
item.msgContent = JSON.parse(item.msgContent) |
||||||
|
} |
||||||
|
return item |
||||||
|
}) |
||||||
|
if (!this.data.nextMsgId && !res.messageList.length) { |
||||||
|
res.messageList = [ |
||||||
|
{ |
||||||
|
msgId: '0', |
||||||
|
msgContentType: '0', |
||||||
|
msgContent: '', |
||||||
|
msgVisitTime: '', |
||||||
|
msgFromType: '2', |
||||||
|
}, |
||||||
|
] |
||||||
|
} |
||||||
|
this.setData({ |
||||||
|
messageList: [...res.messageList.reverse(), ...this.data.messageList], |
||||||
|
nextMsgId: res.nextMsgId, |
||||||
|
unReadCount: res.unReadCount, |
||||||
|
firstNotReadMsgId: res.firstNotReadMsgId, |
||||||
|
isVisitAdl: res.isVisitAdl, |
||||||
|
adlMsgId: res.adlMsgId, |
||||||
|
isLoad: false, |
||||||
|
isFinish: nextMsgId === res.nextMsgId, |
||||||
|
}) |
||||||
|
this.filterCreateTime() |
||||||
|
if (!nextMsgId) { |
||||||
|
this.handleView() |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
getWordList() { |
||||||
|
wx.ajax({ |
||||||
|
method: 'GET', |
||||||
|
url: '?r=wtx/doctor/message-interact/get-common-word-list', |
||||||
|
data: { |
||||||
|
patientId: this.data.patientId, |
||||||
|
}, |
||||||
|
}).then((res) => { |
||||||
|
this.setData({ |
||||||
|
wordList: res, |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
scrolltoupper(e) { |
||||||
|
if (e.detail.direction === 'top') { |
||||||
|
this.getMessageList() |
||||||
|
} |
||||||
|
}, |
||||||
|
handleView(index = -1) { |
||||||
|
this.setData({ |
||||||
|
scrollIntoView: index > -1 ? `view${index}` : `place`, |
||||||
|
}) |
||||||
|
}, |
||||||
|
getQuestionCommonList(questionActive: number) { |
||||||
|
wx.ajax({ |
||||||
|
method: 'GET', |
||||||
|
url: '?r=wtx/doctor/message-interact/get-question-list', |
||||||
|
data: {}, |
||||||
|
}).then((res) => { |
||||||
|
this.setData({ |
||||||
|
questionList: res, |
||||||
|
questionActiveList: res[questionActive].questionList, |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
formatTime(date: string) { |
||||||
|
let msgCreateTimeName = '' |
||||||
|
if (dayjs().format('YYYY-MM-DD') === dayjs(date).format('YYYY-MM-DD')) { |
||||||
|
msgCreateTimeName = dayjs(date).format('HH:mm') |
||||||
|
} else if (dayjs().format('YYYY-MM-DD') === dayjs(date).add(1, 'day').format('YYYY-MM-DD')) { |
||||||
|
msgCreateTimeName = `昨天 ${dayjs(date).format('HH:mm')}` |
||||||
|
} else if (dayjs().diff(date, 'day') < 7) { |
||||||
|
msgCreateTimeName = dayjs(date).format(`dddd HH:mm`) |
||||||
|
} else { |
||||||
|
msgCreateTimeName = dayjs(date).format('YYYY-MM-DD HH:mm') |
||||||
|
} |
||||||
|
return msgCreateTimeName |
||||||
|
}, |
||||||
|
filterCreateTime() { |
||||||
|
const gapTime = 5 * 60 * 1000 |
||||||
|
const { messageList } = this.data |
||||||
|
|
||||||
|
let preTime = 0 |
||||||
|
messageList.forEach((item, index) => { |
||||||
|
if (index === 0) { |
||||||
|
item.showTime = true |
||||||
|
preTime = dayjs(item.msgCreateTime).valueOf() |
||||||
|
item.msgCreateTimeName = this.formatTime(item.msgCreateTime) |
||||||
|
} else { |
||||||
|
const curTime = dayjs(item.msgCreateTime).valueOf() |
||||||
|
if (curTime - preTime > gapTime) { |
||||||
|
item.showTime = true |
||||||
|
item.msgCreateTimeName = this.formatTime(item.msgCreateTime) |
||||||
|
preTime = dayjs(item.msgCreateTime).valueOf() |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
this.setData({ |
||||||
|
messageList, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleSendShow() { |
||||||
|
this.setData({ |
||||||
|
messageListShow: true, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handlePopupMessageClose() { |
||||||
|
this.setData({ |
||||||
|
messageListShow: false, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleWord(e) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
this.setData({ |
||||||
|
wordIndex: index, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleSendWord() { |
||||||
|
const { messageList, wordList, wordIndex, userInfo } = this.data |
||||||
|
const { wordId, word } = wordList[wordIndex] |
||||||
|
console.log(wordList[wordIndex]) |
||||||
|
this.setData({ |
||||||
|
messageList: [ |
||||||
|
...messageList, |
||||||
|
{ |
||||||
|
msgId: '', |
||||||
|
msgContentType: '2', |
||||||
|
msgContent: word, |
||||||
|
msgVisitTime: '', |
||||||
|
msgFromType: '2', |
||||||
|
msgCreateTime: dayjs().format('YYYY-MM-DD HH:mm:ss'), |
||||||
|
doctorAvatar: userInfo.doctorAvatar, |
||||||
|
doctorName: userInfo.doctorName, |
||||||
|
}, |
||||||
|
], |
||||||
|
}) |
||||||
|
this.filterCreateTime() |
||||||
|
this.handlePopupMessageClose() |
||||||
|
this.handleView() |
||||||
|
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/doctor/message-interact/send-word-message', |
||||||
|
data: { |
||||||
|
patientId: this.data.patientId, |
||||||
|
wordId, |
||||||
|
}, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleSendDate() { |
||||||
|
const { |
||||||
|
messageList, |
||||||
|
userInfo: { doctorName, doctorAvatar, clinic, clinicType }, |
||||||
|
} = this.data |
||||||
|
if (!clinic || (Array.isArray(clinic) && !clinic.length)) { |
||||||
|
wx.showToast({ |
||||||
|
title: '还未录入您的出诊时间～', |
||||||
|
icon: 'none', |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
wx.showModal({ |
||||||
|
title: '提示', |
||||||
|
content: '将您的出诊时间发送给患者？', |
||||||
|
confirmColor: 'rgba(29, 107, 255, 1)', |
||||||
|
success: (res) => { |
||||||
|
if (res.confirm) { |
||||||
|
this.setData({ |
||||||
|
messageList: [ |
||||||
|
...messageList, |
||||||
|
{ |
||||||
|
msgId: '', |
||||||
|
msgContentType: '3', |
||||||
|
msgContent: '以下是我的出诊时间', |
||||||
|
msgVisitTime: clinic, |
||||||
|
msgVisitTimeType: clinicType, |
||||||
|
msgFromType: '2', |
||||||
|
msgCreateTime: dayjs().format('YYYY-MM-DD HH:mm:ss'), |
||||||
|
msgOtherInfo: { |
||||||
|
Clinic: clinic, |
||||||
|
ClinicType: clinicType, |
||||||
|
}, |
||||||
|
doctorAvatar: doctorAvatar, |
||||||
|
doctorName: doctorName, |
||||||
|
}, |
||||||
|
], |
||||||
|
}) |
||||||
|
this.filterCreateTime() |
||||||
|
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/doctor/message-interact/send-visit-time', |
||||||
|
data: { |
||||||
|
patientId: this.data.patientId, |
||||||
|
}, |
||||||
|
}) |
||||||
|
this.handleView() |
||||||
|
} |
||||||
|
}, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleReferral() { |
||||||
|
const { userInfo } = this.data |
||||||
|
wx.showModal({ |
||||||
|
title: '', |
||||||
|
content: '您将给患者发送复诊提醒卡片？', |
||||||
|
confirmText: '发送', |
||||||
|
confirmColor: 'rgba(29, 107, 255, 1)', |
||||||
|
success: (res) => { |
||||||
|
if (res.confirm) { |
||||||
|
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/doctor/message-interact/send-revisit', |
||||||
|
data: { |
||||||
|
patientId: this.data.patientId, |
||||||
|
}, |
||||||
|
}).then((res) => { |
||||||
|
this.setData({ |
||||||
|
messageList: [ |
||||||
|
...this.data.messageList, |
||||||
|
{ |
||||||
|
msgId: '', |
||||||
|
msgContentType: '5', |
||||||
|
msgVisitTime: '', |
||||||
|
msgContent: res, |
||||||
|
msgFromType: '2', |
||||||
|
msgCreateTime: dayjs().format('YYYY-MM-DD HH:mm:ss'), |
||||||
|
doctorAvatar: userInfo.doctorAvatar, |
||||||
|
doctorName: userInfo.doctorName, |
||||||
|
}, |
||||||
|
], |
||||||
|
}) |
||||||
|
this.handleView() |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleQuestionTab(e) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
this.setData({ |
||||||
|
questionActive: index, |
||||||
|
questionActiveList: this.data.questionList[index].questionList, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleFooter() { |
||||||
|
this.setData({ |
||||||
|
expend: !this.data.expend, |
||||||
|
}) |
||||||
|
if (this.data.expend) { |
||||||
|
setTimeout(() => { |
||||||
|
this.handleView() |
||||||
|
}, 300) |
||||||
|
} |
||||||
|
}, |
||||||
|
handlePopupCancel() { |
||||||
|
this.setData({ |
||||||
|
popupShow: false, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleFile() { |
||||||
|
wx.navigateTo({ |
||||||
|
url: `/doctor/pages/file/index?id=${this.data.patientId}`, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleBack() { |
||||||
|
wx.navigateBack() |
||||||
|
}, |
||||||
|
}) |
||||||
@ -0,0 +1,150 @@ |
|||||||
|
<navbar fixed title="问医生" custom-style="background:{{background}}" back> |
||||||
|
<van-icon name="arrow-left" slot="left" size="18px" color="#000" bind:tap="handleBack" /> |
||||||
|
</navbar> |
||||||
|
<view |
||||||
|
class="page" |
||||||
|
style="background: url('{{imageUrl}}bg24.png?t={{Timestamp}}') no-repeat top center/100% 602rpx;padding-top:{{pageTop+21}}px;" |
||||||
|
> |
||||||
|
<view class="page-container" id="page-container"> |
||||||
|
<view class="user"> |
||||||
|
<image class="avatar" src="{{patientInfo.userAvatar}}"></image> |
||||||
|
<view class="wrap"> |
||||||
|
<view class="w-header"> |
||||||
|
<view class="name">{{patientInfo.patientName}}</view> |
||||||
|
<view class="age"> |
||||||
|
<image class="icon" src="{{imageUrl}}icon91.png?t={{Timestamp}}"></image> |
||||||
|
{{patientInfo.ageYear}}岁 |
||||||
|
</view> |
||||||
|
<view class="site"> |
||||||
|
<image class="icon" src="{{imageUrl}}icon104.png?t={{Timestamp}}"></image> |
||||||
|
{{patientInfo.provinceName}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="w-footer"> |
||||||
|
<view class="content">入组时间:{{patientInfo.createTimeName}}</view> |
||||||
|
<view class="doc" bind:tap="handleFile"> |
||||||
|
查看档案 |
||||||
|
<van-icon name="arrow" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<scroll-view |
||||||
|
class="scroll-view" |
||||||
|
scroll-y="{{true}}" |
||||||
|
scroll-top="{{scrollTop}}" |
||||||
|
scroll-into-view="{{scrollIntoView}}" |
||||||
|
scroll-with-animation |
||||||
|
bindscrolltoupper="scrolltoupper" |
||||||
|
> |
||||||
|
<view wx:for="{{messageList}}" wx:key="msgId" wx:for-item="message" wx:for-index="mIndex" id="view{{mIndex}}"> |
||||||
|
<view class="date" wx:if="{{message.showTime}}">{{message.msgCreateTimeName}}</view> |
||||||
|
<view class="f-header-list" wx:if="{{message.msgContentType==='1'}}"> |
||||||
|
<view class="content">{{message.msgOtherInfo.title}}</view> |
||||||
|
<view class="l-item" wx:for="{{message.msgOtherInfo.hotQuestion}}" wx:key="questionId"> |
||||||
|
{{item.question}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="doctor" wx:elif="{{message.msgFromType==='2'}}"> |
||||||
|
<view class="d-container"> |
||||||
|
<view class="message" wx:if="{{message.msgContentType==='2'}}">{{message.msgContent }}</view> |
||||||
|
<view class="week" wx:elif="{{message.msgContentType==='3'}}"> |
||||||
|
<view class="w-title">{{message.msgContent}}：</view> |
||||||
|
<view class="w-container"> |
||||||
|
<view class="w-content" wx:if="{{message.msgOtherInfo.ClinicType==2}}">{{message.msgOtherInfo.Clinic}}</view> |
||||||
|
<view class="w-wrap" wx:else> |
||||||
|
<view class="row" wx:for="{{message.msgOtherInfo.Clinic}}" wx:key="index"> |
||||||
|
<view class="label">{{week[item.weekday-1]}}</view> |
||||||
|
<view class="content">{{timeDay[item.timeType]}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view |
||||||
|
class="card1" |
||||||
|
style="background: url('{{imageUrl}}bg29.png?t={{Timestamp}}') no-repeat top center/100%" |
||||||
|
wx:elif="{{message.msgContentType==='4'}}" |
||||||
|
> |
||||||
|
<view class="content"> |
||||||
|
{{message.msgContent.weekInfo}} |
||||||
|
<view></view> |
||||||
|
{{message.msgContent.examInfo}} |
||||||
|
</view> |
||||||
|
<view class="btn">点击查看</view> |
||||||
|
</view> |
||||||
|
<view |
||||||
|
class="card1" |
||||||
|
style="background: url('{{imageUrl}}bg30.png?t={{Timestamp}}') no-repeat top center/100%" |
||||||
|
wx:elif="{{message.msgContentType==='5'}}" |
||||||
|
> |
||||||
|
<view class="content"> |
||||||
|
{{message.msgContent.weekInfo}} |
||||||
|
<view></view> |
||||||
|
{{message.msgContent.examInfo}} |
||||||
|
</view> |
||||||
|
<view class="btn">点击立即查看</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="avatar"> |
||||||
|
<image class="a-img" mode="aspectFill" src="{{message.doctorAvatar}}"></image> |
||||||
|
<view class="label">{{message.doctorName}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="patient" wx:elif="{{message.msgFromType==='1'}}"> |
||||||
|
<view class="avatar"> |
||||||
|
<image class="a-img" mode="aspectFill" src="{{patientInfo.userAvatar}}"></image> |
||||||
|
</view> |
||||||
|
<view class="p-container"> |
||||||
|
<view class="message" wx:if="{{message.msgContentType==='2'}}">{{message.msgContent}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view id="place" class="place"></view> |
||||||
|
</scroll-view> |
||||||
|
</view> |
||||||
|
<van-overlay show="{{ expend }}" bind:click="handleFooter"></van-overlay> |
||||||
|
<view class="page-footer"> |
||||||
|
<view class="send" bind:tap="handleSendShow">发送消息</view> |
||||||
|
<view class="send-date" bind:tap="handleSendDate"> |
||||||
|
<image class="icon" src="{{imageUrl}}/icon112.png?t={{Timestamp}}"></image> |
||||||
|
<view>我的出诊时间</view> |
||||||
|
</view> |
||||||
|
<view class="send-date" bind:tap="handleReferral"> |
||||||
|
<image class="icon" src="{{imageUrl}}/icon113.png?t={{Timestamp}}"></image> |
||||||
|
<view style="color: #67baca">复诊提醒</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<van-popup |
||||||
|
show="{{ messageListShow }}" |
||||||
|
style="--popup-close-icon-color: #283031" |
||||||
|
position="bottom" |
||||||
|
round |
||||||
|
bind:close="handlePopupMessageClose" |
||||||
|
closeable |
||||||
|
> |
||||||
|
<view class="popup-message"> |
||||||
|
<view class="title">发送消息</view> |
||||||
|
<view class="list"> |
||||||
|
<view |
||||||
|
class="l-item {{wordIndex===index && 'active'}}" |
||||||
|
wx:for="{{wordList}}" |
||||||
|
wx:key="wordId" |
||||||
|
bind:tap="handleWord" |
||||||
|
data-index="{{index}}" |
||||||
|
> |
||||||
|
{{item.word}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="submit" bind:tap="handleSendWord">发送</view> |
||||||
|
</view> |
||||||
|
</van-popup> |
||||||
|
|
||||||
|
<popup |
||||||
|
show="{{popupShow}}" |
||||||
|
type="{{popupType}}" |
||||||
|
params="{{popupParams}}" |
||||||
|
bind:ok="handlePopupOk" |
||||||
|
bind:cancel="handlePopupCancel" |
||||||
|
></popup> |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
{ |
||||||
|
"navigationBarTitleText": "出血记录", |
||||||
|
"usingComponents": {} |
||||||
|
} |
||||||
@ -0,0 +1,87 @@ |
|||||||
|
page { |
||||||
|
background-color: rgba(247, 247, 250, 1); |
||||||
|
} |
||||||
|
.page { |
||||||
|
padding: 32rpx; |
||||||
|
.card1 { |
||||||
|
padding: 0 32rpx; |
||||||
|
border-radius: 24rpx; |
||||||
|
background-color: #fff; |
||||||
|
.row { |
||||||
|
padding: 32rpx 0; |
||||||
|
display: flex; |
||||||
|
gap: 48rpx; |
||||||
|
border-bottom: 1px solid rgba(247, 247, 250, 1); |
||||||
|
&:last-of-type { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
.label { |
||||||
|
flex-shrink: 0; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(137, 141, 151, 1); |
||||||
|
} |
||||||
|
.content { |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(0, 0, 0, 1); |
||||||
|
display: flex; |
||||||
|
gap: 20rpx; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.card2 { |
||||||
|
margin-top: 24rpx; |
||||||
|
padding: 0 32rpx 32rpx; |
||||||
|
border-radius: 24rpx; |
||||||
|
background-color: #fff; |
||||||
|
.title { |
||||||
|
padding: 32rpx 0 24rpx; |
||||||
|
font-size: 36rpx; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.content { |
||||||
|
padding: 24rpx 32rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
line-height: 48rpx; |
||||||
|
background-color: rgba(247, 247, 250, 1); |
||||||
|
border-radius: 12rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.footer { |
||||||
|
position: fixed; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
padding: 16rpx 40rpx calc(16rpx + env(safe-area-inset-bottom)); |
||||||
|
background-color: rgba(255, 255, 255, 1); |
||||||
|
display: flex; |
||||||
|
gap: 26rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
.cancel { |
||||||
|
flex: 1; |
||||||
|
padding: 22rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(246, 74, 58, 1); |
||||||
|
border-radius: 84rpx; |
||||||
|
border: 1px solid #f64a3a; |
||||||
|
} |
||||||
|
.submit { |
||||||
|
flex: 1; |
||||||
|
padding: 22rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 32rpx; |
||||||
|
color: #fff; |
||||||
|
background: linear-gradient(356deg, #f23a2f 0%, #fc684f 100%); |
||||||
|
border-radius: 84rpx; |
||||||
|
border: 1px solid #f64a3a; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
const app = getApp<IAppOption>() |
||||||
|
|
||||||
|
Page({ |
||||||
|
data: { |
||||||
|
recordId: '', |
||||||
|
patientId: '', |
||||||
|
|
||||||
|
detail: {} as any, |
||||||
|
}, |
||||||
|
onLoad(options) { |
||||||
|
this.setData({ |
||||||
|
recordId: options.id, |
||||||
|
patientId: options.pid || '', |
||||||
|
}) |
||||||
|
app.waitLogin({ type: 2 }).then(() => { |
||||||
|
this.getDetail() |
||||||
|
}) |
||||||
|
}, |
||||||
|
getDetail() { |
||||||
|
wx.ajax({ |
||||||
|
method: 'GET', |
||||||
|
url: '?r=wtx/doctor/treatment/get-bleeding-detail', |
||||||
|
data: { |
||||||
|
recordId: this.data.recordId, |
||||||
|
patientId: this.data.patientId, |
||||||
|
}, |
||||||
|
}).then((res) => { |
||||||
|
this.setData({ |
||||||
|
detail: res, |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
export {} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
<view class="page"> |
||||||
|
<view class="card1"> |
||||||
|
<view class="row"> |
||||||
|
<view class="label">出血日期</view> |
||||||
|
<view class="content">{{detail.bleedingDate}}</view> |
||||||
|
</view> |
||||||
|
<view class="row"> |
||||||
|
<view class="label">出血关节</view> |
||||||
|
<view class="content"> |
||||||
|
<view class="item" wx:for="{{detail.bleedingPartList}}" wx:for-item="subItem" wx:key="bleedingId"> |
||||||
|
{{subItem.bleedingPartName}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="card2" wx:if="{{detail.remark}}"> |
||||||
|
<view class="title">其他情况备注</view> |
||||||
|
<view class="content"> |
||||||
|
{{detail.remark}} |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
{ |
||||||
|
"navigationStyle": "custom", |
||||||
|
"usingComponents": { |
||||||
|
"van-circle": "@vant/weapp/circle/index", |
||||||
|
"ec-canvas": "/components/ec-canvas/ec-canvas", |
||||||
|
"navbar": "/components/navbar/index", |
||||||
|
"calendar": "/components/calendar/index" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,406 @@ |
|||||||
|
page { |
||||||
|
background-color: rgba(246, 246, 246, 1); |
||||||
|
} |
||||||
|
|
||||||
|
.page { |
||||||
|
.page-header { |
||||||
|
position: relative; |
||||||
|
padding-bottom: 44rpx; |
||||||
|
margin-bottom: 58rpx; |
||||||
|
border-radius: 0 0 32rpx 32rpx; |
||||||
|
transition: all 0.3s; |
||||||
|
background-color: rgba(255, 255, 255, 1); |
||||||
|
border-radius: 0 0 32rpx 32rpx; |
||||||
|
filter: drop-shadow(0rpx 8rpx 20rpx rgba(24, 57, 107, 0.05)); |
||||||
|
.calendar-wrap { |
||||||
|
margin-top: 48rpx; |
||||||
|
.calendar-header { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
gap: 48rpx; |
||||||
|
.left, |
||||||
|
.right { |
||||||
|
padding: 8rpx 10rpx 10rpx 8rpx; |
||||||
|
background: #ffffff; |
||||||
|
border-radius: 12rpx 12rpx 12rpx 12rpx; |
||||||
|
border: 2rpx solid rgba(174, 182, 205, 0.18); |
||||||
|
.icon { |
||||||
|
display: block; |
||||||
|
width: 30rpx; |
||||||
|
height: 30rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.current-date { |
||||||
|
display: flex; |
||||||
|
align-items: baseline; |
||||||
|
gap: 8rpx; |
||||||
|
font-size: 52rpx; |
||||||
|
color: #091f44; |
||||||
|
font-weight: bold; |
||||||
|
.name { |
||||||
|
font-size: 32rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.calendar { |
||||||
|
margin: 16rpx 0 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.legend { |
||||||
|
padding-right: 40rpx; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
gap: 48rpx; |
||||||
|
.l-item { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 12rpx; |
||||||
|
.dot { |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-radius: 50%; |
||||||
|
&.dot1 { |
||||||
|
background-color: rgba(5, 134, 255, 1); |
||||||
|
} |
||||||
|
&.dot2 { |
||||||
|
background-color: rgba(246, 74, 58, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
.name { |
||||||
|
font-size: 28rpx; |
||||||
|
color: #aeb6cd; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.more { |
||||||
|
position: absolute; |
||||||
|
bottom: -32rpx; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
width: 84rpx; |
||||||
|
height: 44rpx; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 0 0 16rpx 16rpx; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
&.active { |
||||||
|
.icon { |
||||||
|
transform: rotate(180deg); |
||||||
|
} |
||||||
|
} |
||||||
|
.icon { |
||||||
|
transition: all 0.3s; |
||||||
|
width: 44rpx; |
||||||
|
height: 44rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.form { |
||||||
|
margin: 80rpx 40rpx 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 18rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
font-weight: bold; |
||||||
|
.picker { |
||||||
|
flex: 1; |
||||||
|
.picker-content { |
||||||
|
padding: 22rpx 32rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 12rpx; |
||||||
|
.content { |
||||||
|
flex: 1; |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
font-weight: normal; |
||||||
|
&:empty::after { |
||||||
|
content: attr(data-place); |
||||||
|
color: rgba(161, 164, 172, 0.5); |
||||||
|
} |
||||||
|
} |
||||||
|
.tril { |
||||||
|
width: 0; |
||||||
|
height: 0; |
||||||
|
border-style: solid; |
||||||
|
border-width: 12rpx 12rpx 0 12rpx; |
||||||
|
border-color: rgba(207, 209, 213, 1) transparent transparent transparent; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.page-container { |
||||||
|
padding: 0 40rpx 40rpx; |
||||||
|
.module1 { |
||||||
|
margin-top: 32rpx; |
||||||
|
padding: 24rpx 32rpx 32rpx; |
||||||
|
background: #ffffff; |
||||||
|
box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(0, 0, 0, 0.06); |
||||||
|
border-radius: 24rpx 24rpx 24rpx 24rpx; |
||||||
|
.title { |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.container { |
||||||
|
margin-top: 32rpx; |
||||||
|
height: 600rpx; |
||||||
|
#mychart-dom-bar { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.tabs { |
||||||
|
margin-top: 48rpx; |
||||||
|
display: flex; |
||||||
|
padding: 8rpx; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 112rpx; |
||||||
|
.tab { |
||||||
|
flex: 1; |
||||||
|
padding: 16rpx; |
||||||
|
text-align: center; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(137, 141, 151, 1); |
||||||
|
&.active { |
||||||
|
color: #fff; |
||||||
|
border-radius: 112rpx; |
||||||
|
background-color: rgba(28, 107, 255, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.doc { |
||||||
|
margin-top: 32rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: flex-end; |
||||||
|
gap: 58rpx; |
||||||
|
.total { |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(137, 141, 151, 1); |
||||||
|
.num { |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(28, 107, 255, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
.more { |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(28, 107, 255, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
.tab1 { |
||||||
|
.tab1-module { |
||||||
|
margin-top: 32rpx; |
||||||
|
padding: 32rpx; |
||||||
|
background: linear-gradient(3deg, #ffffff 0%, #fff4f3 100%); |
||||||
|
box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(0, 0, 0, 0.06); |
||||||
|
border-radius: 24rpx 24rpx 24rpx 24rpx; |
||||||
|
border: 2rpx solid #ffffff; |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(2, 1fr); |
||||||
|
.item { |
||||||
|
padding: 0 0 0 48rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 24rpx; |
||||||
|
&:first-of-type { |
||||||
|
border-right: 1px solid rgba(0, 0, 0, 0.09); |
||||||
|
} |
||||||
|
.icon { |
||||||
|
width: 96rpx; |
||||||
|
height: 96rpx; |
||||||
|
background: linear-gradient(159deg, #1dd4ac 0%, #1c6bff 100%); |
||||||
|
box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(28, 107, 255, 0.1); |
||||||
|
border-radius: 122rpx 122rpx 122rpx 122rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
.i-img { |
||||||
|
width: 52rpx; |
||||||
|
height: 52rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.wrap { |
||||||
|
.name { |
||||||
|
font-size: 24rpx; |
||||||
|
color: rgba(161, 164, 172, 1); |
||||||
|
} |
||||||
|
.num { |
||||||
|
font-size: 40rpx; |
||||||
|
font-weight: bold; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
.sub { |
||||||
|
font-size: 24rpx; |
||||||
|
color: rgba(161, 164, 172, 1); |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.tab1-list { |
||||||
|
margin-top: 32rpx; |
||||||
|
.list-item { |
||||||
|
display: flex; |
||||||
|
gap: 16rpx; |
||||||
|
.aside { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
gap: 16rpx; |
||||||
|
.order { |
||||||
|
margin-top: 8rpx; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-radius: 50%; |
||||||
|
background-clip: content-box; |
||||||
|
background-color: rgba(28, 107, 255, 1); |
||||||
|
border: 4rpx solid rgba(28, 107, 255, 0.3); |
||||||
|
} |
||||||
|
.line { |
||||||
|
flex: 1; |
||||||
|
border-right: 1px dashed rgba(28, 107, 255, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
.container { |
||||||
|
flex: 1; |
||||||
|
padding-bottom: 16rpx; |
||||||
|
.date { |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
padding-bottom: 16rpx; |
||||||
|
} |
||||||
|
.wrap { |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 24rpx; |
||||||
|
padding: 16rpx 32rpx 16rpx 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
.title { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 20rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
font-weight: bold; |
||||||
|
&::before { |
||||||
|
content: ''; |
||||||
|
width: 12rpx; |
||||||
|
height: 36rpx; |
||||||
|
border-radius: 0 7rpx 7rpx 0; |
||||||
|
background: rgba(28, 107, 255, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
.progress { |
||||||
|
min-width: 148rpx; |
||||||
|
height: 88rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 40rpx; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
background: #0586ff; |
||||||
|
border-radius: 16rpx 16rpx 16rpx 16rpx; |
||||||
|
&::after { |
||||||
|
margin-top: 10rpx; |
||||||
|
content: '%'; |
||||||
|
font-size: 24rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.tab2 { |
||||||
|
.tab2-list { |
||||||
|
margin-top: 32rpx; |
||||||
|
.list-item { |
||||||
|
display: flex; |
||||||
|
gap: 16rpx; |
||||||
|
.aside { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
gap: 16rpx; |
||||||
|
.order { |
||||||
|
margin-top: 8rpx; |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-radius: 50%; |
||||||
|
background-clip: content-box; |
||||||
|
background-color: rgba(28, 107, 255, 1); |
||||||
|
border: 4rpx solid rgba(28, 107, 255, 0.3); |
||||||
|
} |
||||||
|
.line { |
||||||
|
flex: 1; |
||||||
|
border-right: 1px dashed rgba(28, 107, 255, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
.container { |
||||||
|
flex: 1; |
||||||
|
padding-bottom: 16rpx; |
||||||
|
.date { |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
padding-bottom: 16rpx; |
||||||
|
} |
||||||
|
.wrap { |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 24rpx; |
||||||
|
padding: 16rpx 32rpx 16rpx 0; |
||||||
|
.title { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 20rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgbargba(137, 141, 151, 1) (1, 1, 5, 1); |
||||||
|
padding-bottom: 16rpx; |
||||||
|
font-weight: bold; |
||||||
|
&::before { |
||||||
|
content: ''; |
||||||
|
width: 12rpx; |
||||||
|
height: 36rpx; |
||||||
|
border-radius: 0 7rpx 7rpx 0; |
||||||
|
background: rgba(28, 107, 255, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
.row { |
||||||
|
padding: 16rpx 32rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 16rpx; |
||||||
|
.legend { |
||||||
|
width: 16rpx; |
||||||
|
height: 16rpx; |
||||||
|
border-radius: 50%; |
||||||
|
&.legend1 { |
||||||
|
background: linear-gradient(180deg, #54e5ff 0%, #0588ff 100%); |
||||||
|
} |
||||||
|
&.legend2 { |
||||||
|
background: linear-gradient(166deg, #acf8e0 0%, #22dca1 100%); |
||||||
|
} |
||||||
|
} |
||||||
|
.label { |
||||||
|
flex: 1; |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(137, 141, 151, 1); |
||||||
|
} |
||||||
|
.num { |
||||||
|
width: 5em; |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(137, 141, 151, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,573 @@ |
|||||||
|
const app = getApp<IAppOption>() |
||||||
|
const echarts = require('@/components/ec-canvas/echarts.js') |
||||||
|
const licia = require('miniprogram-licia') |
||||||
|
import dayjs from 'dayjs' |
||||||
|
|
||||||
|
Page({ |
||||||
|
data: { |
||||||
|
patientId: '', |
||||||
|
|
||||||
|
cirlcleColor1: { |
||||||
|
'0%': 'rgba(174, 248, 225, 1)', |
||||||
|
'100%': 'rgba(31, 219, 160, 1)', |
||||||
|
}, |
||||||
|
cirlcleColor2: { |
||||||
|
'0%': 'rgba(188, 223, 255, 1)', |
||||||
|
'100%': 'rgba(0, 132, 255, 1)', |
||||||
|
}, |
||||||
|
cirlcleColor3: { |
||||||
|
'0%': 'rgba(246, 74, 58, 1)', |
||||||
|
'100%': 'rgba(255, 185, 1, 1)', |
||||||
|
}, |
||||||
|
|
||||||
|
calendarCurrent: { |
||||||
|
year: dayjs().year(), |
||||||
|
month: dayjs().month() + 1, |
||||||
|
}, |
||||||
|
calendarConfig: { |
||||||
|
multi: false, |
||||||
|
weekMode: true, |
||||||
|
hideHeader: true, |
||||||
|
autoChoosedWhenJump: true, |
||||||
|
firstDayOfWeek: 'Mon', |
||||||
|
theme: 'data-view', |
||||||
|
takeoverTap: true, |
||||||
|
highlightToday: true, |
||||||
|
onlyShowCurrentMonth: true, |
||||||
|
disableMode: { |
||||||
|
type: 'after', |
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
beginDate: dayjs().subtract(1, 'M').startOf('month').format('YYYY-MM-DD'), |
||||||
|
endDate: dayjs().format('YYYY-MM-DD'), |
||||||
|
|
||||||
|
tabActve: 2, |
||||||
|
iDays: '', |
||||||
|
|
||||||
|
list2: [] as any[], |
||||||
|
total2: 0, |
||||||
|
pagination2: { |
||||||
|
page: 1, |
||||||
|
pages: 1, |
||||||
|
count: 1, |
||||||
|
}, |
||||||
|
|
||||||
|
list3: [] as any[], |
||||||
|
total3: 0, |
||||||
|
pagination3: { |
||||||
|
page: 1, |
||||||
|
pages: 1, |
||||||
|
count: 1, |
||||||
|
}, |
||||||
|
}, |
||||||
|
ecDataTrendComponent: null as any, |
||||||
|
onLoad(options: any) { |
||||||
|
this.setData({ |
||||||
|
patientId: options.id || '', |
||||||
|
}) |
||||||
|
this.ecDataTrendComponent = this.selectComponent('#mychart-dom-bar') |
||||||
|
}, |
||||||
|
handleUpdate() { |
||||||
|
this.getDetail() |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
getDetail() { |
||||||
|
const rangeDate = this.getRangeDate() |
||||||
|
wx.ajax({ |
||||||
|
method: 'GET', |
||||||
|
url: '?r=wtx/doctor/treatment/get-health', |
||||||
|
data: { |
||||||
|
patientId: this.data.patientId, |
||||||
|
...rangeDate, |
||||||
|
}, |
||||||
|
}).then((res) => { |
||||||
|
console.log('res: ', res) |
||||||
|
this.setCalendarTodos({ bleedDate: res.examDateList, injectionDate: res.bleedDateList }) |
||||||
|
const astList = {} |
||||||
|
const altList = {} |
||||||
|
const cfRecordList = {} |
||||||
|
res.astList = res.astList || [] |
||||||
|
res.altList = res.altList || [] |
||||||
|
res.cfRecordList = res.cfRecordList || [] |
||||||
|
res.astList.forEach((item: any) => { |
||||||
|
astList[item.beginDate] = item.ast |
||||||
|
}) |
||||||
|
res.altList.forEach((item: any) => { |
||||||
|
altList[item.beginDate] = item.alt |
||||||
|
}) |
||||||
|
res.cfRecordList.forEach((item: any) => { |
||||||
|
cfRecordList[item.beginDate] = item.clottingFactor |
||||||
|
}) |
||||||
|
const initParams = { |
||||||
|
astList, |
||||||
|
altList, |
||||||
|
cfRecordList, |
||||||
|
} |
||||||
|
console.log('DEBUGPRINT[107]: index.ts:102: initParams=', initParams) |
||||||
|
this.initChart(initParams, rangeDate) |
||||||
|
}) |
||||||
|
}, |
||||||
|
getRangeDate() { |
||||||
|
const { beginDate, endDate } = this.data |
||||||
|
|
||||||
|
return { |
||||||
|
beginDate, |
||||||
|
endDate, |
||||||
|
} |
||||||
|
}, |
||||||
|
setCalendarTodos({ bleedDate = [], injectionDate = [] }: { bleedDate: any[]; injectionDate: string[] }) { |
||||||
|
const calendar = this.selectComponent('#calendar').calendar |
||||||
|
const dates: any[] = [] |
||||||
|
const intersectDate = licia.intersect(bleedDate, injectionDate) |
||||||
|
const filterAdlDate = bleedDate.filter((item) => !intersectDate.includes(item)) |
||||||
|
const filterMedication = injectionDate.filter((item) => !intersectDate.includes(item)) |
||||||
|
|
||||||
|
filterAdlDate.forEach((Date: string) => { |
||||||
|
dates.push({ |
||||||
|
year: Date.split('-')[0], |
||||||
|
month: Date.split('-')[1], |
||||||
|
date: Date.split('-')[2], |
||||||
|
color: ['rgba(5, 134, 255, 1)'], |
||||||
|
}) |
||||||
|
}) |
||||||
|
filterMedication.forEach((Date: string) => { |
||||||
|
dates.push({ |
||||||
|
year: Date.split('-')[0], |
||||||
|
month: Date.split('-')[1], |
||||||
|
date: Date.split('-')[2], |
||||||
|
color: ['rgba(246, 74, 58, 1)'], |
||||||
|
}) |
||||||
|
}) |
||||||
|
intersectDate.forEach((Date: string) => { |
||||||
|
dates.push({ |
||||||
|
year: Date.split('-')[0], |
||||||
|
month: Date.split('-')[1], |
||||||
|
date: Date.split('-')[2], |
||||||
|
color: ['rgba(5, 134, 255, 1)', 'rgba(246, 74, 58, 1)'], |
||||||
|
}) |
||||||
|
}) |
||||||
|
calendar.setTodos({ |
||||||
|
// 待办点标记设置
|
||||||
|
pos: 'bottom', // 待办点标记位置 ['top', 'bottom']
|
||||||
|
dotColor: 'purple', // 待办点标记颜色
|
||||||
|
circle: false, // 待办圆圈标记设置（如圆圈标记已签到日期），该设置与点标记设置互斥
|
||||||
|
showLunar: true, |
||||||
|
showLabelAlways: true, // 点击时是否显示待办事项（圆点/文字），在 circle 为 true 及当日历配置 showLunar 为 true 时，此配置失效
|
||||||
|
dates, |
||||||
|
}) |
||||||
|
}, |
||||||
|
afterCalendarRender() { |
||||||
|
const calendar = this.selectComponent('#calendar').calendar |
||||||
|
const { year, month } = calendar.getCurrentYM() |
||||||
|
this.setData({ |
||||||
|
calendarCurrent: { |
||||||
|
year, |
||||||
|
month, |
||||||
|
}, |
||||||
|
}) |
||||||
|
app.waitLogin().then(() => { |
||||||
|
this.handleUpdate() |
||||||
|
}) |
||||||
|
this.handleIsDisableRight() |
||||||
|
}, |
||||||
|
onSwipe() { |
||||||
|
const calendar = this.selectComponent('#calendar').calendar |
||||||
|
const { year, month } = calendar.getCurrentYM() |
||||||
|
this.setData({ |
||||||
|
calendarCurrent: { |
||||||
|
year, |
||||||
|
month, |
||||||
|
}, |
||||||
|
}) |
||||||
|
this.handleIsDisableRight() |
||||||
|
}, |
||||||
|
handleCalendarSwitch(e: any) { |
||||||
|
const { type } = e.currentTarget.dataset |
||||||
|
const calendar = this.selectComponent('#calendar').calendar |
||||||
|
let { year, month } = this.data.calendarCurrent |
||||||
|
const { weekMode } = calendar.getCalendarConfig() |
||||||
|
if (type === 'prev') { |
||||||
|
month -= 1 |
||||||
|
if (month < 1) { |
||||||
|
month = 12 |
||||||
|
year -= 1 |
||||||
|
} |
||||||
|
} else if (type === 'next') { |
||||||
|
month += 1 |
||||||
|
if (month > 12) { |
||||||
|
month = 1 |
||||||
|
year += 1 |
||||||
|
} |
||||||
|
} |
||||||
|
if (weekMode) { |
||||||
|
calendar.weekModeJump({ |
||||||
|
year: year, |
||||||
|
month: month, |
||||||
|
date: 1, |
||||||
|
}) |
||||||
|
} else { |
||||||
|
calendar.jump({ |
||||||
|
year: year, |
||||||
|
month: month, |
||||||
|
date: 1, |
||||||
|
}) |
||||||
|
} |
||||||
|
this.setData({ |
||||||
|
calendarCurrent: { |
||||||
|
year, |
||||||
|
month, |
||||||
|
}, |
||||||
|
beginDate: dayjs(`${year}-${month}-01`).startOf('month').format('YYYY-MM-DD'), |
||||||
|
endDate: dayjs(`${year}-${month}-01`).endOf('month').format('YYYY-MM-DD'), |
||||||
|
}) |
||||||
|
this.handleIsDisableRight() |
||||||
|
}, |
||||||
|
handleCalendarCurrent() { |
||||||
|
const calendar = this.selectComponent('#calendar').calendar |
||||||
|
const { weekMode } = calendar.getCalendarConfig() |
||||||
|
if (weekMode) { |
||||||
|
calendar.weekModeJump() |
||||||
|
} else { |
||||||
|
calendar.jump() |
||||||
|
} |
||||||
|
const { year, month } = calendar.getCurrentYM() |
||||||
|
this.setData({ |
||||||
|
calendarCurrent: { |
||||||
|
year, |
||||||
|
month, |
||||||
|
}, |
||||||
|
}) |
||||||
|
this.handleIsDisableRight() |
||||||
|
}, |
||||||
|
handleCalendarMore() { |
||||||
|
const calendar = this.selectComponent('#calendar').calendar |
||||||
|
const { weekMode } = calendar.getCalendarConfig() |
||||||
|
let { year, month } = this.data.calendarCurrent |
||||||
|
console.log(calendar) |
||||||
|
if (weekMode) { |
||||||
|
calendar.switchView('month').then(() => { |
||||||
|
calendar.jump({ |
||||||
|
year: year, |
||||||
|
month: month, |
||||||
|
date: 1, |
||||||
|
}) |
||||||
|
}) |
||||||
|
} else { |
||||||
|
calendar.switchView('week').then(() => { |
||||||
|
calendar.weekModeJump({ |
||||||
|
year: year, |
||||||
|
month: month, |
||||||
|
date: 1, |
||||||
|
}) |
||||||
|
}) |
||||||
|
if (dayjs().month() + 1 === month && dayjs().year() === year) { |
||||||
|
calendar.weekModeJump() |
||||||
|
} |
||||||
|
} |
||||||
|
this.setData({ |
||||||
|
['calendarConfig.weekMode']: !weekMode, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleIsDisableRight() { |
||||||
|
const { year, month } = this.data.calendarCurrent |
||||||
|
// 是否大于等于当月
|
||||||
|
const calendarCurrentNum = Number(year * 12) + Number(month) |
||||||
|
const currentNum = Number(dayjs().year() * 12) + Number(dayjs().month() + 1) |
||||||
|
|
||||||
|
if (calendarCurrentNum >= currentNum) { |
||||||
|
this.setData({ |
||||||
|
disableRight: true, |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.setData({ |
||||||
|
disableRight: false, |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
initChart({ altList = {}, astList = {}, cfRecordList = {} }, rangeDate) { |
||||||
|
const arr = this.generateDateArray(rangeDate.beginDate, rangeDate.endDate) |
||||||
|
const astArr: Number[] = [] |
||||||
|
const altArr: Number[] = [] |
||||||
|
const cfRecordArr: Number[] = [] |
||||||
|
arr.forEach((item: any) => { |
||||||
|
astArr.push(astList[item] ? Number(astList[item]) : 0) |
||||||
|
altArr.push(altList[item] ? Number(altList[item]) : 0) |
||||||
|
cfRecordArr.push(cfRecordList[item] ? Number(cfRecordList[item]) : 0) |
||||||
|
}) |
||||||
|
console.log(altArr) |
||||||
|
this.ecDataTrendComponent.init((canvas, width, height, dpr) => { |
||||||
|
let chart = echarts.init(canvas, null, { |
||||||
|
width: width, |
||||||
|
height: height, |
||||||
|
devicePixelRatio: dpr, // new
|
||||||
|
}) |
||||||
|
canvas.setChart(chart) |
||||||
|
|
||||||
|
var option = { |
||||||
|
dataZoom: [ |
||||||
|
{ |
||||||
|
type: 'inside', // 内置于坐标系中
|
||||||
|
startValue: 0, |
||||||
|
endValue: 7, |
||||||
|
xAxisIndex: [0], |
||||||
|
}, |
||||||
|
], |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis', |
||||||
|
axisPointer: { |
||||||
|
type: 'shadow', |
||||||
|
}, |
||||||
|
confine: true, |
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.5)', |
||||||
|
textStyle: { |
||||||
|
color: '#fff', |
||||||
|
fontSize: 10, |
||||||
|
}, |
||||||
|
order: 'seriesDesc', |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
bottom: 0, |
||||||
|
padding: 0, |
||||||
|
itemGap: 5, |
||||||
|
itemWidth: 8, |
||||||
|
itemHeight: 8, |
||||||
|
icon: 'circle', |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
top: '30', |
||||||
|
left: '5', |
||||||
|
right: '0', |
||||||
|
bottom: '45', |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: 'category', |
||||||
|
axisLabel: { |
||||||
|
color: 'rgba(161, 164, 172, 1)', |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
lineStyle: { |
||||||
|
type: 'solid', |
||||||
|
color: 'rgba(137, 141, 151, 0.23)', |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: true, |
||||||
|
showMinLine: false, |
||||||
|
lineStyle: { |
||||||
|
type: 'dotted', |
||||||
|
color: 'rgba(137, 141, 151, 0.23)', |
||||||
|
}, |
||||||
|
}, |
||||||
|
data: arr, |
||||||
|
}, |
||||||
|
yAxis: [ |
||||||
|
{ |
||||||
|
type: 'value', |
||||||
|
name: '单位:%', |
||||||
|
axisLabel: { |
||||||
|
color: 'rgba(161, 164, 172, 1)', |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: false, |
||||||
|
lineStyle: { |
||||||
|
type: 'solid', |
||||||
|
color: 'rgba(161, 164, 172, 1)', |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: true, |
||||||
|
showMinLine: false, |
||||||
|
lineStyle: { |
||||||
|
type: 'dotted', |
||||||
|
color: 'rgba(137, 141, 151, 0.23)', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'value', |
||||||
|
name: '单位:U/L', |
||||||
|
position: 'right', |
||||||
|
axisLabel: { |
||||||
|
color: 'rgba(161, 164, 172, 1)', |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: false, |
||||||
|
lineStyle: { |
||||||
|
type: 'solid', |
||||||
|
color: 'rgba(161, 164, 172, 1)', |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: true, |
||||||
|
showMinLine: false, |
||||||
|
lineStyle: { |
||||||
|
type: 'dotted', |
||||||
|
color: 'rgba(137, 141, 151, 0.23)', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: 'AST天门冬氨酸氨基转移酶', |
||||||
|
data: astArr, |
||||||
|
type: 'line', |
||||||
|
yAxisIndex: 1, |
||||||
|
lineStyle: { width: 4 }, |
||||||
|
symbolSize: 6, |
||||||
|
color: { |
||||||
|
type: 'linear', |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: 'rgba(1, 132, 255, 1)', // 0% 处的颜色
|
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: 'rgba(85, 229, 255, 1)', // 100% 处的颜色
|
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false
|
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'ALT丙氨酸氨基转移酶', |
||||||
|
yAxisIndex: 1, |
||||||
|
data: altArr, |
||||||
|
type: 'line', |
||||||
|
lineStyle: { width: 4 }, |
||||||
|
symbolSize: 6, |
||||||
|
color: { |
||||||
|
type: 'linear', |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: 'rgba(246, 74, 58, 1)', // 0% 处的颜色
|
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: 'rgba(255, 187, 0, 1)', // 100% 处的颜色
|
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false
|
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '凝血因子水平', |
||||||
|
data: cfRecordArr, |
||||||
|
type: 'line', |
||||||
|
lineStyle: { width: 4 }, |
||||||
|
symbolSize: 6, |
||||||
|
color: { |
||||||
|
type: 'linear', |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: 'rgba(31, 220, 160, 1)', // 0% 处的颜色
|
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: 'rgba(174, 248, 225, 1)', // 100% 处的颜色
|
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false
|
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
// dataZoom: {
|
||||||
|
// show: true, // 为true 滚动条出现
|
||||||
|
// realtime: true,
|
||||||
|
// type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
|
||||||
|
// height: 20, // 表示滚动条的高度，也就是粗细
|
||||||
|
// start: 20, // 表示默认展示20%～80%这一段。
|
||||||
|
// end: 80,
|
||||||
|
// },
|
||||||
|
} |
||||||
|
|
||||||
|
chart.setOption(option) |
||||||
|
return chart |
||||||
|
}) |
||||||
|
}, |
||||||
|
generateDateArray(startDate, endDate) { |
||||||
|
const dates: string[] = [] |
||||||
|
let currentDate = dayjs(startDate) |
||||||
|
|
||||||
|
while (currentDate.isBefore(dayjs(endDate).add(1, 'day'))) { |
||||||
|
dates.push(currentDate.format('YYYY-MM-DD')) |
||||||
|
currentDate = currentDate.add(1, 'day') |
||||||
|
} |
||||||
|
|
||||||
|
return dates |
||||||
|
}, |
||||||
|
|
||||||
|
handleTab(e: any) { |
||||||
|
const { active } = e.currentTarget.dataset |
||||||
|
this.setData({ |
||||||
|
tabActve: active, |
||||||
|
}) |
||||||
|
this.getList(1) |
||||||
|
}, |
||||||
|
handleFile() { |
||||||
|
wx.navigateTo({ |
||||||
|
url: `/doctor/pages/file/index?id=${this.data.patientId}`, |
||||||
|
}) |
||||||
|
}, |
||||||
|
getList(newPage = 1) { |
||||||
|
const { tabActve } = this.data |
||||||
|
const dateRange = this.getRangeDate() |
||||||
|
wx.ajax({ |
||||||
|
method: 'GET', |
||||||
|
url: '?r=wtx/doctor/treatment/get-health-exam-list', |
||||||
|
data: { |
||||||
|
patientId: this.data.patientId, |
||||||
|
examType: tabActve, |
||||||
|
page: newPage, |
||||||
|
...dateRange, |
||||||
|
}, |
||||||
|
}).then((res) => { |
||||||
|
res.list = res.list.map((item) => { |
||||||
|
return { |
||||||
|
...item, |
||||||
|
beginDate: item.beginDate ? dayjs(item.beginDate).format('YYYY.MM.DD') : null, |
||||||
|
endDate: item.endDate ? dayjs(item.endDate).format('YYYY.MM.DD') : null, |
||||||
|
} |
||||||
|
}) |
||||||
|
if (tabActve == 2) { |
||||||
|
const list = res.page === 1 ? res.list : [...this.data.list2, ...res.list] |
||||||
|
this.setData({ |
||||||
|
total2: res.count, |
||||||
|
list2: list, |
||||||
|
iDays: res.iDays, |
||||||
|
pagination2: { |
||||||
|
page: res.page, |
||||||
|
pages: res.pages, |
||||||
|
count: res.count, |
||||||
|
}, |
||||||
|
}) |
||||||
|
} |
||||||
|
if (tabActve == 3) { |
||||||
|
const list = res.page === 1 ? res.list : [...this.data.list3, ...res.list] |
||||||
|
this.setData({ |
||||||
|
total3: res.count, |
||||||
|
list3: list, |
||||||
|
iDays: res.iDays, |
||||||
|
pagination3: { |
||||||
|
page: res.page, |
||||||
|
pages: res.pages, |
||||||
|
count: res.count, |
||||||
|
}, |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleBack() { |
||||||
|
wx.navigateBack() |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
export {} |
||||||
@ -0,0 +1,172 @@ |
|||||||
|
<navbar fixed title="查看他的健康变化" custom-style="background:{{background}}" back> |
||||||
|
<van-icon name="arrow-left" slot="left" size="18px" color="#000" bind:tap="handleBack" /> |
||||||
|
</navbar> |
||||||
|
<view class="page"> |
||||||
|
<view |
||||||
|
class="page-header" |
||||||
|
style="padding-top:{{pageTop}}px;background:#fff url('{{imageUrl}}bg27.png?t={{Timestamp}}') no-repeat top center/100% 368rpx" |
||||||
|
> |
||||||
|
<view class="calendar-wrap"> |
||||||
|
<view class="calendar-header"> |
||||||
|
<view class="left" bind:tap="handleCalendarSwitch" data-type="prev"> |
||||||
|
<!-- <image class="icon" src="{{imageUrl}}calendar-left-disabled.png?t={{Timestamp}}"></image> --> |
||||||
|
<image class="icon" src="{{imageUrl}}calendar-left.png?t={{Timestamp}}"></image> |
||||||
|
</view> |
||||||
|
<view class="current-date"> |
||||||
|
{{calendarCurrent.year}} |
||||||
|
<view class="name">年</view> |
||||||
|
{{calendarCurrent.month}} |
||||||
|
<view class="name">月</view> |
||||||
|
</view> |
||||||
|
<view class="right"> |
||||||
|
<image |
||||||
|
wx:if="{{disableRight}}" |
||||||
|
class="icon" |
||||||
|
src="{{imageUrl}}calendar-right-disabled.png?t={{Timestamp}}" |
||||||
|
></image> |
||||||
|
<image |
||||||
|
wx:else |
||||||
|
bind:tap="handleCalendarSwitch" |
||||||
|
data-type="next" |
||||||
|
class="icon" |
||||||
|
src="{{imageUrl}}calendar-right.png?t={{Timestamp}}" |
||||||
|
></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="calendar"> |
||||||
|
<calendar |
||||||
|
bind:afterCalendarRender="afterCalendarRender" |
||||||
|
bind:onSwipe="onSwipe" |
||||||
|
config="{{calendarConfig}}" |
||||||
|
id="calendar" |
||||||
|
></calendar> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="legend"> |
||||||
|
<view class="l-item"> |
||||||
|
<view class="dot dot1"></view> |
||||||
|
<view class="name">已复诊</view> |
||||||
|
</view> |
||||||
|
<view class="l-item"> |
||||||
|
<view class="dot dot2"></view> |
||||||
|
<view class="name">出血</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="more {{!calendarConfig.weekMode && 'active'}}" bindtap="handleCalendarMore"> |
||||||
|
<image class="icon" src="{{imageUrl}}icon84.png?t={{Timestamp}}"></image> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="form"> |
||||||
|
<picker class="picker" mode="date" end="{{endDate}}" model:value="{{beginDate}}" bind:change="handleUpdate"> |
||||||
|
<view class="picker-content"> |
||||||
|
<view class="content" data-place="开始时间">{{beginDate}}</view> |
||||||
|
<view class="tril"></view> |
||||||
|
</view> |
||||||
|
</picker> |
||||||
|
- |
||||||
|
<picker class="picker" mode="date" start="{{beginDate}}" model:value="{{endDate}}" bind:change="handleUpdate"> |
||||||
|
<view class="picker-content"> |
||||||
|
<view class="content" data-place="结束时间">{{endDate}}</view> |
||||||
|
<view class="tril"></view> |
||||||
|
</view> |
||||||
|
</picker> |
||||||
|
</view> |
||||||
|
<view class="page-container"> |
||||||
|
<view class="module1"> |
||||||
|
<view class="title">他的健康变化</view> |
||||||
|
<view class="container"> |
||||||
|
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="tabs"> |
||||||
|
<view class="tab {{tabActve===2 && 'active'}}" bind:tap="handleTab" data-active="{{2}}">凝血因子</view> |
||||||
|
<view class="tab {{tabActve===3 && 'active'}}" bind:tap="handleTab" data-active="{{3}}">生化检查</view> |
||||||
|
</view> |
||||||
|
<view class="doc"> |
||||||
|
<view class="total" wx:if="{{tabActve===3}}"> |
||||||
|
已记录 |
||||||
|
<text class="num">{{pagination2.count}}</text> |
||||||
|
条 |
||||||
|
</view> |
||||||
|
<view class="more" bind:tap="handleFile"> |
||||||
|
查看档案 |
||||||
|
<van-icon name="arrow" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="tab1" wx:if="{{tabActve===2}}"> |
||||||
|
<view class="tab1-module"> |
||||||
|
<view class="item"> |
||||||
|
<view class="icon"> |
||||||
|
<image class="i-img" src="{{imageUrl}}icon57.png?t={{Timestamp}}"></image> |
||||||
|
</view> |
||||||
|
<view class="wrap"> |
||||||
|
<view class="name">因子检查</view> |
||||||
|
<view class="num"> |
||||||
|
{{pagination2.count}} |
||||||
|
<text class="sub">次</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="item"> |
||||||
|
<view class="icon"> |
||||||
|
<image class="i-img" src="{{imageUrl}}icon58.png?t={{Timestamp}}"></image> |
||||||
|
</view> |
||||||
|
<view class="wrap"> |
||||||
|
<view class="name">注射后</view> |
||||||
|
<view class="num"> |
||||||
|
{{iDays || '--'}} |
||||||
|
<text class="sub">天</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="tab1-list"> |
||||||
|
<view class="list-item" wx:for="{{list2}}" wx:key="index"> |
||||||
|
<view class="aside"> |
||||||
|
<view class="order"></view> |
||||||
|
<view class="line"></view> |
||||||
|
</view> |
||||||
|
<view class="container"> |
||||||
|
<view class="date" wx:if="{{item.beginDate && item.endDate}}">{{item.beginDate}}~{{item.endDate}}</view> |
||||||
|
<view class="date" wx:elif="{{item.beginDate || item.endDate}}">{{item.beginDate || item.endDate}}</view> |
||||||
|
<view class="date" wx:else>--</view> |
||||||
|
<view class="wrap"> |
||||||
|
<view class="title">{{item.periodName}}</view> |
||||||
|
<view class="progress" wx:if="{{item.clottingFactor}}">{{item.clottingFactor}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="tab2" wx:elif="{{tabActve===3}}"> |
||||||
|
<view class="tab2-list"> |
||||||
|
<view class="list-item" wx:for="{{list3}}" wx:key="index"> |
||||||
|
<view class="aside"> |
||||||
|
<view class="order"></view> |
||||||
|
<view class="line"></view> |
||||||
|
</view> |
||||||
|
<view class="container"> |
||||||
|
<view class="date" wx:if="{{item.beginDate && item.endDate}}">{{item.beginDate}}~{{item.endDate}}</view> |
||||||
|
<view class="date" wx:elif="{{item.beginDate || item.endDate}}">{{item.beginDate || item.endDate}}</view> |
||||||
|
<view class="date" wx:else>未填写</view> |
||||||
|
<view class="wrap"> |
||||||
|
<view class="title">{{item.periodName}}</view> |
||||||
|
<view class="row"> |
||||||
|
<view class="legend legend1"></view> |
||||||
|
<view class="label">AST天门冬氨酸氨基转移酶</view> |
||||||
|
<view class="num" wx:if="{{item.ast}}">{{item.ast}}U/L</view> |
||||||
|
<view class="num" wx:else>--</view> |
||||||
|
</view> |
||||||
|
<view class="row"> |
||||||
|
<view class="legend legend2"></view> |
||||||
|
<view class="label">ALT丙氨酸氨基转移酶</view> |
||||||
|
<view class="num" wx:if="{{item.alt}}">{{item.alt}}U/L</view> |
||||||
|
<view class="num" wx:else>--</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
{ |
||||||
|
"navigationStyle": "custom", |
||||||
|
"usingComponents": { |
||||||
|
"navbar": "/components/navbar/index", |
||||||
|
"doctor-tab-bar": "/doctor/components/doctor-tab-bar/index" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,76 @@ |
|||||||
|
page { |
||||||
|
background-color: rgba(247, 247, 250, 1); |
||||||
|
} |
||||||
|
.page { |
||||||
|
padding: 0 30rpx calc(150rpx + env(safe-area-inset-bottom)); |
||||||
|
background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%); |
||||||
|
.list { |
||||||
|
.list-item { |
||||||
|
margin-bottom: 24rpx; |
||||||
|
padding: 30rpx; |
||||||
|
border-radius: 24rpx; |
||||||
|
display: flex; |
||||||
|
background-color: #fff; |
||||||
|
.photo { |
||||||
|
position: relative; |
||||||
|
flex-shrink: 0; |
||||||
|
width: 208rpx; |
||||||
|
height: 156rpx; |
||||||
|
.photo-img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 12rpx; |
||||||
|
} |
||||||
|
.play { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
width: 56rpx; |
||||||
|
height: 56rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.wrap { |
||||||
|
flex: 1; |
||||||
|
padding-left: 24rpx; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
.title { |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
line-height: 44rpx; |
||||||
|
min-width: 0; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
display: -webkit-box; |
||||||
|
-webkit-line-clamp: 2; |
||||||
|
-webkit-box-orient: vertical; |
||||||
|
} |
||||||
|
.w-footer { |
||||||
|
margin-top: 20rpx; |
||||||
|
display: flex; |
||||||
|
gap: 68rpx; |
||||||
|
.date { |
||||||
|
width: 7em; |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(18, 18, 18, 0.4); |
||||||
|
} |
||||||
|
.eye { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
.icon { |
||||||
|
width: 32rpx; |
||||||
|
height: 32rpx; |
||||||
|
} |
||||||
|
.num { |
||||||
|
margin-left: 10rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(18, 18, 18, 0.4); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,63 @@ |
|||||||
|
const dayjs = require('dayjs') |
||||||
|
const app = getApp<IAppOption>() |
||||||
|
|
||||||
|
Page({ |
||||||
|
data: { |
||||||
|
list: [] as any[], |
||||||
|
total: 0, |
||||||
|
pagination: { |
||||||
|
page: 1, |
||||||
|
pages: 1, |
||||||
|
count: 1, |
||||||
|
}, |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
app.waitLogin({ type: 2 }).then(() => { |
||||||
|
this.getList() |
||||||
|
}) |
||||||
|
}, |
||||||
|
getList(newPage = 1) { |
||||||
|
wx.ajax({ |
||||||
|
method: 'GET', |
||||||
|
url: '?r=wtx/doctor/knowledge/list', |
||||||
|
data: { |
||||||
|
page: newPage, |
||||||
|
}, |
||||||
|
}).then((res) => { |
||||||
|
res.list.forEach((item: any) => { |
||||||
|
item.UpdateTime = dayjs(item.UpdateTime).format('YYYY-MM-DD') |
||||||
|
}) |
||||||
|
const list = res.page === 1 ? res.list : [...this.data.list, ...res.list] |
||||||
|
this.setData({ |
||||||
|
total: res.count, |
||||||
|
list, |
||||||
|
pagination: { |
||||||
|
page: res.page, |
||||||
|
pages: res.pages, |
||||||
|
count: res.count, |
||||||
|
}, |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
onReachBottom() { |
||||||
|
const { page, pages } = this.data.pagination |
||||||
|
if (pages > page) { |
||||||
|
this.getList(page + 1) |
||||||
|
} |
||||||
|
}, |
||||||
|
handleDetail(e) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
const params = this.data.list[index] |
||||||
|
if (params.Type == 1) { |
||||||
|
wx.navigateTo({ |
||||||
|
url: `/doctor/pages/knowledgeDetail/index?id=${params.Id}`, |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
wx.navigateTo({ |
||||||
|
url: `/doctor/pages/knowledgeDetailVideo/index?id=${params.Id}`, |
||||||
|
}) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
export {} |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
<navbar fixed title="小助手" custom-style="background:{{background}}"></navbar> |
||||||
|
|
||||||
|
<view |
||||||
|
class="page" |
||||||
|
style="background: url('{{imageUrl}}bg28.png?t={{Timestamp}}') no-repeat top center/100% 602rpx;padding-top: {{pageTop + 20}}px;" |
||||||
|
> |
||||||
|
<view class="list"> |
||||||
|
<view class="list-item" wx:for="{{list}}" wx:key="Id" bind:tap="handleDetail" data-index="{{index}}"> |
||||||
|
<view class="photo"> |
||||||
|
<image class="photo-img" mode="aspectFill" src="{{item.CoverImg}}"></image> |
||||||
|
<image wx:if="{{item.Type==2}}" class="play" src="{{imageUrl}}icon22.png?t={{Timestamp}}"></image> |
||||||
|
</view> |
||||||
|
<view class="wrap"> |
||||||
|
<view class="title">{{item.Title}}</view> |
||||||
|
<view class="w-footer"> |
||||||
|
<view class="date">{{item.UpdateTime}}</view> |
||||||
|
<view class="eye"> |
||||||
|
<image class="icon" src="{{imageUrl}}icon6.png?t={{Timestamp}}"></image> |
||||||
|
<view class="num" wx:if="{{item.ViewTimes>0}}">{{item.ViewTimes}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<pagination pagination="{{pagination}}"></pagination> |
||||||
|
</view> |
||||||
|
|
||||||
|
<doctor-tab-bar></doctor-tab-bar> |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
{ |
||||||
|
"navigationBarTitleText": "知识库详情", |
||||||
|
"usingComponents": { |
||||||
|
"mp-html": "mp-html", |
||||||
|
"star": "/components/star/index" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,86 @@ |
|||||||
|
.page { |
||||||
|
padding: 60rpx 30rpx calc(120rpx + env(safe-area-inset-bottom)); |
||||||
|
.title { |
||||||
|
font-size: 40rpx; |
||||||
|
color: rgba(1, 1, 5, 1); |
||||||
|
line-height: 64rpx; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.info { |
||||||
|
margin-top: 20rpx; |
||||||
|
padding-bottom: 24rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 86rpx; |
||||||
|
.date { |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(18, 18, 18, 0.4); |
||||||
|
} |
||||||
|
.eye { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
.icon { |
||||||
|
width: 32rpx; |
||||||
|
height: 32rpx; |
||||||
|
} |
||||||
|
.num { |
||||||
|
margin-left: 10rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(18, 18, 18, 0.4); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.animate { |
||||||
|
position: fixed; |
||||||
|
z-index: 1; |
||||||
|
left: 1000000px; |
||||||
|
bottom: calc(env(safe-area-inset-bottom) + 80rpx); |
||||||
|
transform: translateX(-50%); |
||||||
|
width: 200rpx; |
||||||
|
height: 400rpx; |
||||||
|
&.active { |
||||||
|
left: 75%; |
||||||
|
} |
||||||
|
} |
||||||
|
.footer { |
||||||
|
position: fixed; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
padding-bottom: env(safe-area-inset-bottom); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
background-color: #fff; |
||||||
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05); |
||||||
|
.btn { |
||||||
|
flex: 1; |
||||||
|
padding: 24rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
border: none; |
||||||
|
background-color: transparent; |
||||||
|
outline: none; |
||||||
|
&::after { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
.icon { |
||||||
|
width: 36rpx; |
||||||
|
height: 36rpx; |
||||||
|
} |
||||||
|
.num { |
||||||
|
margin-left: 12rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(1, 1, 5, 0.4); |
||||||
|
&.active { |
||||||
|
color: rgba(242, 58, 47, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.line { |
||||||
|
height: 28rpx; |
||||||
|
width: 1px; |
||||||
|
background-color: rgba(1, 1, 5, 0.16); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,93 @@ |
|||||||
|
const dayjs = require('dayjs') |
||||||
|
const licia = require('miniprogram-licia') |
||||||
|
const app = getApp<IAppOption>() |
||||||
|
|
||||||
|
Page({ |
||||||
|
data: { |
||||||
|
id: '', |
||||||
|
detail: {} as any, |
||||||
|
LikeTimes: 0, |
||||||
|
|
||||||
|
starShow: false, |
||||||
|
}, |
||||||
|
onLoad(options) { |
||||||
|
this.setData({ |
||||||
|
id: options.id, |
||||||
|
}) |
||||||
|
app.waitLogin({type:2}).then(() => { |
||||||
|
this.handleView() |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleView() { |
||||||
|
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/doctor/knowledge/view', |
||||||
|
data: { |
||||||
|
Id: this.data.id, |
||||||
|
}, |
||||||
|
}).then(() => { |
||||||
|
this.getDetail() |
||||||
|
}) |
||||||
|
}, |
||||||
|
getDetail() { |
||||||
|
wx.ajax({ |
||||||
|
method: 'GET', |
||||||
|
url: '?r=wtx/doctor/knowledge/detail', |
||||||
|
data: { |
||||||
|
Id: this.data.id, |
||||||
|
}, |
||||||
|
}).then((res) => { |
||||||
|
res.UpdateTime = dayjs(res.UpdateTime).format('YYYY-MM-DD') |
||||||
|
this.setData({ |
||||||
|
detail: res, |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
_timer: null as any, |
||||||
|
handleLike() { |
||||||
|
this.setData({ |
||||||
|
'detail.LikeTimes': Number(this.data.detail.LikeTimes) + 1, |
||||||
|
'detail.IsLike': true, |
||||||
|
LikeTimes: this.data.LikeTimes + 1, |
||||||
|
starShow: true, |
||||||
|
}) |
||||||
|
const header = this.selectComponent('#animate') |
||||||
|
header.start() |
||||||
|
if (this._timer) { |
||||||
|
clearInterval(this._timer) |
||||||
|
} |
||||||
|
this._timer = setTimeout(() => { |
||||||
|
this.setData({ |
||||||
|
starShow: false, |
||||||
|
}) |
||||||
|
}, 2000) |
||||||
|
this.likePost() |
||||||
|
}, |
||||||
|
likePost: licia.debounce(function (this: any) { |
||||||
|
const { id, LikeTimes } = this.data |
||||||
|
this.setData({ |
||||||
|
LikeTimes: 0, |
||||||
|
}) |
||||||
|
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/doctor/knowledge/like', |
||||||
|
data: { |
||||||
|
Id: id, |
||||||
|
LikeTimes, |
||||||
|
}, |
||||||
|
}) |
||||||
|
}, 1000), |
||||||
|
onShareAppMessage() { |
||||||
|
this.setData({ |
||||||
|
'detail.ShareTimes': Number(this.data.detail.ShareTimes) + 1, |
||||||
|
'detail.IsShare': true, |
||||||
|
}) |
||||||
|
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/doctor/knowledge/share', |
||||||
|
data: { Id: this.data.id }, |
||||||
|
}) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
export {} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
<view class="page"> |
||||||
|
<view class="title">{{detail.Title}}</view> |
||||||
|
<view class="info"> |
||||||
|
<view class="date">{{detail.UpdateTime}}</view> |
||||||
|
<view class="eye"> |
||||||
|
<image class="icon" src="{{imageUrl}}icon6.png?t={{Timestamp}}"></image> |
||||||
|
<view class="num" wx:if="{{detail.ViewNum > 0}}">{{detail.ViewTimes}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<mp-html class="mp-html" content="{{detail.Content}}"></mp-html> |
||||||
|
<star id="animate" class="animate {{starShow&&'active'}}"></star> |
||||||
|
<view class="footer"> |
||||||
|
<button class="btn" open-type="share"> |
||||||
|
<image wx:if="{{detail.IsShare}}" class="icon" src="{{imageUrl}}icon7.png?t={{Timestamp}}"></image> |
||||||
|
<image wx:else class="icon" src="{{imageUrl}}icon9.png?t={{Timestamp}}"></image> |
||||||
|
<view class="num {{detail.IsShare && 'active'}}" wx:if="{{detail.ShareTimes>0}}">{{detail.ShareTimes}}</view> |
||||||
|
</button> |
||||||
|
<view class="line"></view> |
||||||
|
<view class="btn" bindtap="handleLike"> |
||||||
|
<image wx:if="{{detail.IsLike}}" class="icon" src="{{imageUrl}}icon8.png?t={{Timestamp}}"></image> |
||||||
|
<image wx:else class="icon" src="{{imageUrl}}icon10.png?t={{Timestamp}}"></image> |
||||||
|
<view class="num {{detail.IsLike && 'active'}}" wx:if="{{detail.LikeTimes>0}}">{{detail.LikeTimes}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
{ |
||||||
|
"navigationStyle": "custom", |
||||||
|
"usingComponents": { |
||||||
|
"mp-video-swiper": "@miniprogram-component-plus/video-swiper", |
||||||
|
"navbar": "/components/navbar/index", |
||||||
|
"van-slider": "@vant/weapp/slider/index", |
||||||
|
"star": "/components/star/index" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,109 @@ |
|||||||
|
.page { |
||||||
|
background-color: #000; |
||||||
|
.swiper { |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
.swiper-item { |
||||||
|
position: relative; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
.video { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.play { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
width: 90rpx; |
||||||
|
height: 104rpx; |
||||||
|
} |
||||||
|
.swiper-item-footer { |
||||||
|
padding: 80rpx 30rpx calc(34rpx + env(safe-area-inset-bottom)); |
||||||
|
width: 100%; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
background: linear-gradient(to top, rgba(20, 20, 20, 0.88) 0%, rgba(20, 20, 20, 0) 100%); |
||||||
|
.title { |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
.progress { |
||||||
|
margin-top: 24rpx; |
||||||
|
.slider-btn { |
||||||
|
width: 200vw; |
||||||
|
height: 80rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
.container { |
||||||
|
margin-top: 24rpx; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
.user { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
.avatar { |
||||||
|
width: 76rpx; |
||||||
|
height: 76rpx; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
.name { |
||||||
|
margin-left: 16rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
.options { |
||||||
|
padding-right: 26rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 64rpx; |
||||||
|
.o-item { |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
border: none; |
||||||
|
outline: none; |
||||||
|
background: transparent; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
line-height: 1; |
||||||
|
&::after { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
.icon { |
||||||
|
width: 36rpx; |
||||||
|
height: 36rpx; |
||||||
|
} |
||||||
|
.num { |
||||||
|
margin-top: 6rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
&.active { |
||||||
|
color: rgba(246, 74, 58, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.animate { |
||||||
|
position: fixed; |
||||||
|
z-index: 10000000; |
||||||
|
right: 1000000px; |
||||||
|
bottom: calc(env(safe-area-inset-bottom) + 110rpx); |
||||||
|
width: 200rpx; |
||||||
|
height: 400rpx; |
||||||
|
&.active { |
||||||
|
right: -20rpx; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,237 @@ |
|||||||
|
const licia = require('miniprogram-licia') |
||||||
|
const app = getApp<IAppOption>() |
||||||
|
|
||||||
|
Page({ |
||||||
|
data: { |
||||||
|
id: '', |
||||||
|
activeId: '', |
||||||
|
LikeTimes: 0, |
||||||
|
|
||||||
|
current: 0, |
||||||
|
videoList: [] as any, |
||||||
|
|
||||||
|
beforeLoading: false, |
||||||
|
beforeEnd: false, |
||||||
|
afterLoading: false, |
||||||
|
afterEnd: false, |
||||||
|
|
||||||
|
starShow: false, |
||||||
|
}, |
||||||
|
onLoad(options) { |
||||||
|
this.setData({ |
||||||
|
id: options.id, |
||||||
|
activeId: options.id, |
||||||
|
}) |
||||||
|
app.waitLogin({ type: 2 }).then(() => { |
||||||
|
this.handleView() |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleView() { |
||||||
|
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/doctor/knowledge/view', |
||||||
|
data: { |
||||||
|
Id: this.data.activeId, |
||||||
|
}, |
||||||
|
}).then(() => { |
||||||
|
this.getDetail() |
||||||
|
}) |
||||||
|
}, |
||||||
|
getDetail() { |
||||||
|
wx.ajax({ |
||||||
|
method: 'GET', |
||||||
|
url: '?r=wtx/doctor/knowledge/detail', |
||||||
|
data: { |
||||||
|
Id: this.data.id, |
||||||
|
}, |
||||||
|
}).then(async (res) => { |
||||||
|
this.setData({ |
||||||
|
videoList: [res], |
||||||
|
afterLoading: true, |
||||||
|
beforeLoading: true, |
||||||
|
}) |
||||||
|
this.playCurrentVideo() |
||||||
|
await this.getList('after') |
||||||
|
await this.getList('before') |
||||||
|
}) |
||||||
|
}, |
||||||
|
getList(sort: 'before' | 'after') { |
||||||
|
const { id } = this.data |
||||||
|
return wx |
||||||
|
.ajax({ |
||||||
|
method: 'GET', |
||||||
|
url: '?r=wtx/doctor/knowledge/video-sort-list', |
||||||
|
data: { |
||||||
|
Id: id, |
||||||
|
sort, |
||||||
|
}, |
||||||
|
}) |
||||||
|
.then((res) => { |
||||||
|
const { videoList, current } = this.data |
||||||
|
if (sort === 'before') { |
||||||
|
const newVideoList = [...res.list, ...videoList] |
||||||
|
this.setData({ |
||||||
|
videoList: newVideoList, |
||||||
|
beforeLoading: false, |
||||||
|
current: res.list.length + current, |
||||||
|
beforeEnd: res.length === 0, |
||||||
|
}) |
||||||
|
} |
||||||
|
if (sort === 'after') { |
||||||
|
const newVideoList = [...videoList, ...res.list] |
||||||
|
this.setData({ |
||||||
|
videoList: newVideoList, |
||||||
|
afterLoading: false, |
||||||
|
afterEnd: res.length === 0, |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleChange(e: any) { |
||||||
|
const { beforeLoading, afterLoading, beforeEnd, afterEnd, videoList } = this.data |
||||||
|
const { current } = e.detail |
||||||
|
this.setData({ |
||||||
|
current, |
||||||
|
starShow: false, |
||||||
|
}) |
||||||
|
if (current === 0 && !beforeLoading && beforeEnd) { |
||||||
|
this.setData({ |
||||||
|
beforeLoading: true, |
||||||
|
}) |
||||||
|
this.getList('before') |
||||||
|
} |
||||||
|
if (current === videoList.length - 1 && !afterLoading && afterEnd) { |
||||||
|
this.setData({ |
||||||
|
afterLoading: true, |
||||||
|
}) |
||||||
|
this.getList('after') |
||||||
|
} |
||||||
|
this.playCurrentVideo() |
||||||
|
}, |
||||||
|
playCurrentVideo() { |
||||||
|
const { current, videoList } = this.data |
||||||
|
videoList.forEach((item: any, index: number) => { |
||||||
|
if (!item.ctx) { |
||||||
|
item.ctx = wx.createVideoContext(`video-${item.Id}`) |
||||||
|
} |
||||||
|
item.drag = false |
||||||
|
if (index === current) { |
||||||
|
item.ctx.play() |
||||||
|
} else { |
||||||
|
item.ctx.pause() |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
handlePlay(e: any) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
const key = `videoList[${index}].play` |
||||||
|
this.setData({ |
||||||
|
[key]: true, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handlePause(e: any) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
const key = `videoList[${index}].play` |
||||||
|
this.setData({ |
||||||
|
[key]: false, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleTimeUpdate(e: any) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
const { videoList } = this.data |
||||||
|
if (videoList[index].drag) return |
||||||
|
const { currentTime, duration } = e.detail |
||||||
|
const progress = (currentTime / duration) * 100 |
||||||
|
const progressKey = `videoList[${index}].progress` |
||||||
|
const durationKey = `videoList[${index}].duration` |
||||||
|
this.setData({ |
||||||
|
[progressKey]: progress, |
||||||
|
[durationKey]: duration, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleTogglePlay(e) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
const { videoList } = this.data |
||||||
|
if (videoList[index].play) { |
||||||
|
videoList[index].ctx.pause() |
||||||
|
} else { |
||||||
|
videoList[index].ctx.play() |
||||||
|
} |
||||||
|
}, |
||||||
|
handleDragStart(e: any) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
const key = `videoList[${index}].drag` |
||||||
|
this.setData({ |
||||||
|
[key]: true, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleDragEnd(e: any) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
const { videoList } = this.data |
||||||
|
const duration = videoList[index].duration |
||||||
|
const drapProgress = e.detail |
||||||
|
const currentTime = (drapProgress / 100) * duration |
||||||
|
videoList[index].ctx.seek(currentTime) |
||||||
|
const dragKey = `videoList[${index}].drag` |
||||||
|
this.setData({ |
||||||
|
[dragKey]: false, |
||||||
|
}) |
||||||
|
}, |
||||||
|
_timer: null as any, |
||||||
|
handleLike(e: any) { |
||||||
|
const { index } = e.currentTarget.dataset |
||||||
|
const { videoList } = this.data |
||||||
|
const currentVideo = videoList[index] |
||||||
|
const LikeTimes = Number(currentVideo.LikeTimes) + 1 |
||||||
|
const key = `videoList[${index}].LikeTimes` |
||||||
|
this.setData({ |
||||||
|
LikeTimes: this.data.LikeTimes + 1, |
||||||
|
[key]: LikeTimes, |
||||||
|
[`videoList[${index}].IsLike`]: true, |
||||||
|
starShow: true, |
||||||
|
}) |
||||||
|
const header = this.selectComponent('#animate') |
||||||
|
header.start() |
||||||
|
if (this._timer) { |
||||||
|
clearInterval(this._timer) |
||||||
|
} |
||||||
|
this._timer = setTimeout(() => { |
||||||
|
this.setData({ |
||||||
|
starShow: false, |
||||||
|
}) |
||||||
|
}, 2000) |
||||||
|
this.likePost() |
||||||
|
}, |
||||||
|
likePost: licia.debounce(function (this: any) { |
||||||
|
const { activeId, LikeTimes } = this.data |
||||||
|
this.setData({ |
||||||
|
LikeTimes: 0, |
||||||
|
}) |
||||||
|
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/doctor/knowledge/like', |
||||||
|
data: { |
||||||
|
Id: activeId, |
||||||
|
LikeTimes, |
||||||
|
}, |
||||||
|
}) |
||||||
|
}, 1000), |
||||||
|
onShareAppMessage() { |
||||||
|
const { current, videoList } = this.data |
||||||
|
const currentVideo = videoList[current] |
||||||
|
this.setData({ |
||||||
|
[`videoList[${current}].ShareTimes`]: Number(currentVideo.ShareTimes) + 1, |
||||||
|
[`videoList[${current}].IsShare`]: true, |
||||||
|
}) |
||||||
|
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/doctor/knowledge/share', |
||||||
|
data: { Id: this.data.activeId }, |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleBack() { |
||||||
|
wx.navigateBack() |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
export {} |
||||||
@ -0,0 +1,74 @@ |
|||||||
|
<navbar fixed custom-style="background:{{background}};color:#fff"> |
||||||
|
<van-icon name="arrow-left" slot="left" size="18px" color="#fff" bind:tap="handleBack" /> |
||||||
|
<view slot="title" style="color: #fff">视频</view> |
||||||
|
</navbar> |
||||||
|
<view class="page"> |
||||||
|
<swiper class="swiper" vertical="{{true}}" current="{{current}}" bindchange="handleChange"> |
||||||
|
<swiper-item class="swiper-item" wx:for="{{videoList}}" wx:key="Id"> |
||||||
|
<video |
||||||
|
id="video-{{item.Id}}" |
||||||
|
class="video" |
||||||
|
src="{{item.VideoSrc}}" |
||||||
|
loop |
||||||
|
object-fit="contain" |
||||||
|
enable-play-gesture |
||||||
|
enable-progress-gesture |
||||||
|
show-center-play-btn="{{false}}" |
||||||
|
play-btn-position="center" |
||||||
|
controls="{{false}}" |
||||||
|
bindprogress="handleProgress" |
||||||
|
bindplay="handlePlay" |
||||||
|
bindpause="handlePause" |
||||||
|
bindtimeupdate="handleTimeUpdate" |
||||||
|
data-index="{{index}}" |
||||||
|
bind:tap="handleTogglePlay" |
||||||
|
></video> |
||||||
|
<image |
||||||
|
wx:if="{{!item.play}}" |
||||||
|
class="play" |
||||||
|
class="play" |
||||||
|
src="{{imageUrl}}icon19.png?t={{Timestamp}}" |
||||||
|
catch:tap="handleTogglePlay" |
||||||
|
data-index="{{index}}" |
||||||
|
></image> |
||||||
|
<view class="swiper-item-footer"> |
||||||
|
<view class="title">{{item.Title}}</view> |
||||||
|
<view class="progress"> |
||||||
|
<van-slider |
||||||
|
value="{{item.progress}}" |
||||||
|
active-color="#fff" |
||||||
|
bar-height="4" |
||||||
|
inactive-color="rgba(255, 255, 255, 0.29)" |
||||||
|
bind:drag-start="handleDragStart" |
||||||
|
bind:change="handleDragEnd" |
||||||
|
use-button-slot |
||||||
|
data-index="{{index}}" |
||||||
|
> |
||||||
|
<view class="slider-btn" slot="button"></view> |
||||||
|
</van-slider> |
||||||
|
</view> |
||||||
|
<view class="container"> |
||||||
|
<view class="user"> |
||||||
|
<image class="avatar" src="{{imageUrl}}logo1.png?t={{Timestamp}}"></image> |
||||||
|
<view class="name">基因知识库</view> |
||||||
|
</view> |
||||||
|
<view class="options"> |
||||||
|
<button class="o-item" open-type="share"> |
||||||
|
<image wx:if="{{item.IsShare}}" class="icon" src="{{imageUrl}}icon7.png?t={{Timestamp}}"></image> |
||||||
|
<image wx:else class="icon" src="{{imageUrl}}icon20.png?t={{Timestamp}}"></image> |
||||||
|
<view class="num {{item.IsShare && 'active'}}">{{item.ShareTimes}}</view> |
||||||
|
</button> |
||||||
|
<view class="o-item" bind:tap="handleLike" data-index="{{index}}"> |
||||||
|
<image wx:if="{{item.IsLike}}" class="icon" src="{{imageUrl}}icon8.png?t={{Timestamp}}"></image> |
||||||
|
<image wx:else class="icon" src="{{imageUrl}}icon21.png?t={{Timestamp}}"></image> |
||||||
|
<view class="num {{item.IsLike && 'active'}}">{{item.LikeTimes}}</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</swiper-item> |
||||||
|
</swiper> |
||||||
|
</view> |
||||||
|
|
||||||
|
<star id="animate" class="animate {{starShow&&'active'}}"></star> |
||||||
|
|
||||||
|
After Width: | Height: | Size: 243 KiB |
|
After Width: | Height: | Size: 219 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 146 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 111 KiB |
|
After Width: | Height: | Size: 912 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 940 B |
|
After Width: | Height: | Size: 894 B |
|
After Width: | Height: | Size: 806 B |
Loading…
Reference in new issue