kola-web
2 days ago
100 changed files with 3813 additions and 432 deletions
@ -0,0 +1,10 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -0,0 +1,4 @@
|
||||
{ |
||||
"navigationBarTitleText": "出血记录", |
||||
"usingComponents": {} |
||||
} |
||||
@ -0,0 +1,87 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -0,0 +1,7 @@
|
||||
{ |
||||
"navigationStyle": "custom", |
||||
"usingComponents": { |
||||
"navbar": "/components/navbar/index", |
||||
"doctor-tab-bar": "/doctor/components/doctor-tab-bar/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,76 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -0,0 +1,7 @@
|
||||
{ |
||||
"navigationBarTitleText": "知识库详情", |
||||
"usingComponents": { |
||||
"mp-html": "mp-html", |
||||
"star": "/components/star/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,86 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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