nurseWeChatAppletUI/pages/medicine/medicine.vue

<template>
	<view class="app">
		<view class="concent">
			<view class="background">
				<image src="/static/logo.png" mode=""></image>
				<view class="detailed">
					<view>
						在“互联网+医疗健康”高速发展的当下，以远程诊疗、大数据、人工智能为代表的新技术应用，越来越多的应用在医疗健康服务当中，依托三甲专家团队赋能基层医疗，打造“医、药、检、险”的全闭环商业模式，实现物联网化医生联合体布局，提供数字化远程医疗解决方案，提升基层医疗水平，提高医疗效率，降低看病成本。
						平台将全力打造“智慧诊所”，为基层全科医生医提供物联网可穿戴式医疗设备，基层医生负责操作收集，医生集团的三甲专家远程出具诊断报告。有效将三甲医院医生、基层医生与患者连接，从而更加方便快捷高效，随时随地满足患者的长期医疗需求。可以为基层医生解决技术缺陷、设备不足等难题；遇到病情紧急严重的还可以打开绿色就医通道进行转诊服务。
					</view>
				</view>
			</view>
		</view>
		<!-- 		<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}">
						<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">
				<view class="lefttabbar">
					<view class="lefttabbarlist">
						<view v-for="(item,index) in hospitalDepartmentList" :key="index"
							:class="tabIndex==index?'actives':'active'" @tap='taptabindex(item,index)'>
							{{item.hospitalName}}
						</view>
					</view>
				</view>
				<view class="righttabbar">
					<view class="productlist">
						<view class="content" v-for="(item,index) in HospitalPersonlist" :key="item.id">
							<image class="hospitalimage" src="/static/header .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">
								预约
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		selectDepartment,
		selectHospitalPerson
	} from '@/api/medicine/index.js'
	import baseurl from '../../api/baseurl';
	export default {
		data() {
			return {
				swiperImgUrls: [],
				autoplay: true, //自动切换轮播图
				hospitalDepartmentList: [], //科室
				HospitalPersonlist: [], //人员
				tabIndex: 0,
				departmentId: null, //人员所属科室id
			};
		},
		methods: {
			//人员
			selectHospitalPersonInfo() {
				selectHospitalPerson(this.departmentId).then(res => {
					this.HospitalPersonlist = res.rows
				})
			},
			//tap科室
			taptabindex(item, index) {
				this.tabIndex = index
				if (this.departmentId != item.id) {
					this.departmentId = item.id
					this.selectHospitalPersonInfo();
				}
			},
			//健康咨询科室
			selectDepartmentinfo() {
				selectDepartment().then(res => {
					this.hospitalDepartmentList = res.data.hospitalDepartmentList
					res.data.poserInfoList.forEach(e => {
						e.image = baseurl + e.posterPictureUrl
						this.swiperImgUrls.push(e.image)
					})
					this.departmentId = this.hospitalDepartmentList[0].id
					this.selectHospitalPersonInfo();
				})
			},
			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() {
				uni.navigateTo({
					url: '/pages/Informationconfirmation/Informationconfirmation'
				})
			},
			// 跳转预约医生界面
			godoctorslist() {
				// uni.navigateTo({
				// 	url: '/pages/doctorslist/doctorslist'
				// })
			},
		},
		onLoad() {
			this.baseurl = baseurl
			this.selectDepartmentinfo()
		},
		//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";
	.concent {
		width: 701rpx;
		height: 100%;
		background: #4C7BC9;
		box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
		border-radius: 20rpx;
		margin: 5% auto 20px;
		padding: 30rpx 0;

		.background {
			position: relative;
			width: 657rpx;
			height: 100%;
			background: #FFFFFF;
			border-radius: 25rpx;
			background-color: white;
			margin: 0 auto;

			.detailed {
				width: 657rpx;
				height: 100%;
				padding: 0 42rpx 20rpx;
				line-height: 56rpx;
			}

			.detailed view {
				text-indent: 2em;
			}

			image {
				width: 178rpx;
				height: 160rpx;
				background: #FFFFFF;
				border-radius: 25px;
				margin-left: 68%;
			}
		}
	}
</style>