nurseWeChatAppletUI/pages/medicine/medicine.vue
2023-04-13 15:49:34 +08:00

301 lines
9.1 KiB
Vue

<template>
<view class="app">
<view class="swiper">
<swiper :indicator-dots="false" indicator-color='#fff' indicator-active-color='#0086d6' :autoplay="autoplay"
:interval="2000" :duration="1000" class="swiper-box" :circular='true' @change="swiperChange">
<swiper-item v-for="(item ,index) in swiperImgUrls" :key="index">
<view class="swiper-item" v-show="!splits(item)" wx-if="{item}" @tap='goConsultationDetails'>
<image v-if="item" :src="item" mode="widthFix"></image>
</view>
<view class="swiper-item" v-show="splits(item)" v-if="item">
<video :id="'myVideo'+index" :autoplay="false" :src="item" controls show-fullscreen-btn
object-fit="fill" @play="play" @pause="pause" @ended="ended" auto-pause-if-navigate
show-play-btn :enable-progress-gesture='true' :show-center-play-btn='true'
enable-play-gesture auto-pause-if-open-native show-mute-btn></video>
</view>
</swiper-item>
</swiper>
</view>
<view class="hospital">
<view class="appointmenthospital">预约医生</view>
<view class="tabbar" v-if="hospitalDepartmentList.length>0">
<view class="lefttabbar" @touchstart="start" @touchend="end" @touchmove="move">
<view class="lefttabbarlist">
<view v-for="(item,index) in hospitalDepartmentList" :key="index"
:class="tabIndex==index?'actives':'active'" @tap='taptabindex(item,index)'>
{{item.departmentName}}
</view>
</view>
</view>
<view class="righttabbar">
<view class="productlist" @touchstart="start" @touchend="end" @touchmove="move"
v-if="HospitalPersonlist.length>0">
<view class="content" v-for="(item,index) in HospitalPersonlist" :key="item.id">
<image class="hospitalimage" v-if="item.personPictureUrl"
:src="baseurl+item.personPictureUrl" mode=""></image>
<image class="hospitalimage" v-else src="@/static/yis.png" mode=""></image>
<view class="hospitalteacher">{{item.personName}}</view>
<view class="physician">
{{ item.academicTitle=='CHIEF_PHYSICIAN'?'主任医师':''}}
{{ item.academicTitle=='DEPUTY_CHIEF_PHYSICIAN'?'副主任医师':''}}
{{ item.academicTitle=='ATTENDING_DOCTOR'?'主治医师':''}}
{{ item.academicTitle=='PHYSICIAN'?'医师':''}}
{{ item.academicTitle=='HEALER'?'医士':''}}
</view>
<view class="words">{{item.personIntroduce}}
</view>
<view class="appointment" @tap="goappointment(item)">
预约
</view>
</view>
</view>
<view v-else style='margin-top: 100rpx;'>
<u-empty text="暂无" mode="search" icon-size='220'></u-empty>
</view>
</view>
</view>
<view v-else style='margin-top: 100rpx;padding-bottom: 200rpx;'>
<u-empty text="暂无" mode="search" icon-size='220'></u-empty>
</view>
</view>
<u-mask :show="usershow" class='mask'>
<view class="information">
<image src="../../static/information.png" mode=""></image>
<view class="title">
请完善个人信息
</view>
<view class="cancel" @tap='usershow=false'>
取消
</view>
<view class="determine" @tap='goinformation'>
去完善
</view>
</view>
</u-mask>
<u-toast ref="uToast" />
</view>
</template>
<script>
import {
AppIdentification
} from '@/api/AppIdentification/index.js'
import {
selectDepartment,
selectHospitalPerson
} from '@/api/medicine/index.js'
import baseurl from '../../api/baseurl';
export default {
data() {
return {
usershow: false, //完善信息开关
baseurl: '',
swiperImgUrls: [],
autoplay: true, //自动切换轮播图
hospitalDepartmentList: [], //科室
hospitalDepartmenttotal: 0,
HospitalPersonlist: [], //人员
HospitalPersontotal: 0,
tabIndex: 0,
departmentId: null, //人员所属科室id
DepartmentpageNum: 1,
DepartmentpageSize: 100,
personpageNum: 1,
pageSize: 10,
startData: {
clientX: '',
clientY: '',
},
touch: {},
};
},
methods: {
move(event) { //@touchmove触摸移动
let touch = event.touches[0]; //滑动过程中,手指滑动的坐标信息 返回的是Objcet对象
this.touch = touch;
},
// 触摸touch事件
start(e) { //@touchstart 触摸开始
this.startData.pageY = e.changedTouches[0].pageY; //手指按下时的Y坐标
},
end(e) { //@touchend触摸结束
if ((this.startData.pageY - this.touch.pageY) > 100) { //在事件结束时,判断滑动的距离是否达到出发需要执行事件的要求
if (this.hospitalDepartmentList.length >= this.hospitalDepartmenttotal) {} else {
this.DepartmentpageNum++;
//科室
selectDepartment(this.DepartmentpageNum, this.DepartmentpageSize).then(res => {
res.rows.forEach(e => {
this.hospitalDepartmentList.push(e)
})
})
}
if (this.HospitalPersonlist.length >= this.HospitalPersontotal) {} else {
this.personpageNum++;
//人员
selectHospitalPerson(this.personpageNum, this.pageSize, this.departmentId).then(res => {
res.rows.forEach(e => {
this.HospitalPersonlist.push(e)
})
})
}
} else {
// this.touch = {};
}
},
//人员
selectHospitalPersonInfo() {
this.personpageNum = 1
selectHospitalPerson(this.personpageNum, this.pageSize, this.departmentId).then(res => {
this.HospitalPersonlist = res.rows
this.HospitalPersontotal = res.total
})
},
//tap科室
taptabindex(item, index) {
this.tabIndex = index
if (this.departmentId != item.departmentId) {
this.departmentId = item.departmentId
this.selectHospitalPersonInfo();
}
},
//齐鲁名医科室
selectDepartmentinfo() {
this.DepartmentpageNum = 1
this.swiperImgUrls = []
selectDepartment(this.DepartmentpageNum, this.DepartmentpageSize).then(res => {
if (res.rows.length > 0) {
this.hospitalDepartmentList = res.rows
this.hospitalDepartmenttotal = res.total
this.departmentId = this.hospitalDepartmentList[0].departmentId
this.selectHospitalPersonInfo();
if (res.rows[0].poserInfoList.length > 0) {
res.rows[0].poserInfoList.forEach(e => {
e.image = baseurl + e.posterPictureUrl
this.swiperImgUrls.push(e.image)
})
} else {
var img = baseurl + '/profile/appletPicture/healthy.png'
this.swiperImgUrls.push(img)
}
} else {
var img = baseurl + '/profile/appletPicture/healthy.png'
this.swiperImgUrls.push(img)
}
})
},
swiperChange(e) {
this.currentIndex = e.detail.current
let {
current,
source
} = e.detail
this.videoContext = uni.createVideoContext('myVideo' + (current - 1));
//只有手动切换时开始轮播,并且上一页视频暂停
if (source === 'touch') {
this.videoContext.pause(); //暂停
this.autoplay = true
}
},
// 获取数据
GetBanner() {},
// 处理banner返回的是是视频还是图片
splits(url) {
if (url.indexOf('.') != -1) {
var ext = url.substring(url.lastIndexOf('.') + 1);
return ['mp4', 'webm', 'mpeg4', 'ogg'].indexOf(ext) != -1
}
},
// 点击开始/继续播放
play() {
this.autoplay = false
// this.videoContext.requestFullScreen()
},
// 视频暂停
pause() {
this.autoplay = true
},
// 视频结束
ended() {
this.autoplay = true
},
// 跳转预约医生界面
goappointment(item) {
let that = this
const value = uni.getStorageSync('openid');
const value2 = uni.getStorageSync('patientId');
if (value && value2) {
AppIdentification(value2).then(res => {
if (res.code == 200) {
if (res.data.loginFlag) {
that.usershow = false
uni.navigateTo({
url: `/pages/confirmation/confirmation?price=${item.consultingFee}&hospitalPersonId=${item.id}&&personName=${item.personName}`
})
} else {
that.usershow = true
}
} else if (res.code == 9999) {} else {
that.$refs.uToast.show({
title: res.msg,
type: 'error',
url: '/pages/login/login'
})
}
})
} else {
that.$refs.uToast.show({
title: '未登录,请先登录',
type: 'error',
url: '/pages/login/login'
})
}
},
//跳转完善页面
goinformation() {
this.usershow = false
uni.navigateTo({
url: '/pages/information/information'
})
},
goConsultationDetails() {
uni.navigateTo({
url: '/pages/ConsultationDetails/ConsultationDetails'
})
},
},
onLoad() {
this.DepartmentpageNum = 1
this.personpageNum = 1
this.baseurl = baseurl
this.selectDepartmentinfo()
},
onShow() {
this.DepartmentpageNum = 1
this.personpageNum = 1
this.usershow = false
},
//1.分享给朋友
onShareAppMessage(res) {
let pages = getCurrentPages();
let url = pages[pages.length - 1].$page.fullPath
return {
title: '泉医到家',
path: url,
}
},
//2.分享到朋友圈
onShareTimeline(res) {
let pages = getCurrentPages();
let url = pages[pages.length - 1].$page.fullPath
return {
title: '泉医到家',
path: url,
}
},
}
</script>
<style lang="scss">
@import "./medicine.scss";
</style>