circulation_ancientCoins_new/pages/index/index.vue

<template>
	<view class="index-page btPadding" v-if="pageShow">
		<view class="header-wrapper flex">
			<view class="left">
				<view class="flex top PfScMedium">
					<view class="ft50 over2">{{doctorInfo.doctor_info.doctor_name}}</view>
					<view v-if="doctor_dept">
						<view class="over2">{{doctor_dept}}</view>
					</view>
				</view>
				<view class="bt over2" v-if="doctorInfo.doctor_info.doctor_desc">
					{{doctorInfo.doctor_info.doctor_desc}}
				</view>
			</view>
			<img class="right" :src="doctorInfo.doctor_info.avator" alt="" @click="enlargePicture(doctorInfo.doctor_info.avator)" v-if="doctorInfo.doctor_info.avator">
		</view>

		<view class="block desc-wrapper" v-if="doctorInfo.doctor_info.doctor_detail">
			<view class="title-wrapper flex">
				<view class="title">
					医生简介
				</view>
				<img :src="cssUrl+'right_bg.png'" alt="">
			</view>

			<view class="con">
				{{doctorInfo.doctor_info.doctor_detail}}
			</view>
		</view>

		<view class="block hospital-wrapper" v-if="hospitals">

			<view class="title-wrapper flex">
				<view class="title">
					出诊信息
				</view>
				<img :src="cssUrl+'right_bg.png'" alt="">
			</view>

			<view class="item" v-for="(item,key) in hospitals">
				<view class="top flex">
					<view class="left">
						<view class="title flex">
							<text class="over2 PfScMedium hospital_name">{{item.hospital_name}}</text>
						</view>
						<view class="date over2 over4" v-if="item.address">
							{{item.address}}
						</view>
					</view>
					<view class="right">
						<view class="flex right-wrapper" style="justify-content:center;" v-if="item.hospital_pos">
							<view class="" @click="toLocation(item)">
								<img :src="cssUrl+'index_nav.svg'" alt="">
								<view class="map-wrap">导航</view>
							</view>

						</view>
					</view>
				</view>

				<view class="center">
					出诊：{{ item.workdate_desc }}
				</view>

				<uni-collapse ref="collapse" v-model="collapseValue[key]" @change="changeCollapse" class="notice-collapse" v-if="item.notice">
					<uni-collapse-item title="就诊须知">
						<view class=" content" >
							<view class="text" v-html="item.notice"></view>
						</view>
					</uni-collapse-item>
				</uni-collapse>

				<view class="bot primary btn btn2" hover-class="hover" @click="toVisitors(item)" v-if="item.type==0">
					预约看病
				</view>
			</view>
		</view>

		<view class="block visit-wrapper" v-if="recentAppoint && this.doctorInfo && !this.doctorInfo.is_all_card">
			<view class="header flex">
				<view class="title-wrapper flex booklist">
					<view class="title">
						最近就诊
					</view>
					<img :src="cssUrl+'right_bg.png'" alt="">
				</view>

				<view class="opt flex" @click="toPrebookList">
					查看全部<img :src="cssUrl+'index_comback2.svg'" alt="">
				</view>
			</view>
		</view>
		<pre-book-list class="preg-books" :dataList="recentAppoint" :topnopadding="true" v-if="this.doctorInfo && !this.doctorInfo.is_all_card"></pre-book-list>
		<tabbar current="1" leftButtonText="主页" v-if="!this.doctorInfo.is_all_card"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar.vue'
	import preBookList from '@/components/preBookList.vue'

	export default {
		data() {
			return {
				collapseValue:[],
				cssUrl:this.cssUrl,
				code:'',
				pageShow:false,
				doctor_id:'',
				doctorInfo:false,
				doctor_dept:false,
				hospitals:false,
				recentAppoint:[],
				loginToken:false,
				state:'',
				workdate:[],
			}
		},
		components:{
			tabbar,
			preBookList,
		},
		onLoad(option) {
		// 	define('DEPART_TYPE_FULL', 0);      // 全功能
		//  define('DEPART_TYPE_COUNT', 1);     // 仅计数
		//  define('DEPART_TYPE_CARD', 2);      // 仅名片
		//  $GLOBALS['depart_type_list'] = array(
		//      DEPART_TYPE_FULL => '全功能',
		//      DEPART_TYPE_COUNT => '仅计数',
		//      DEPART_TYPE_CARD => '仅名片'
		//  );
			if(option.code && option.state) {
				this.code = option.code
				this.state = option.state
			}
		},
		async onShow() {
			this.doctor_id = getApp().globalData.doctorId
			if(!this.doctor_id) return

			var title = '预约就诊'
			if(this.code) title = '登录'
			uni.setNavigationBarTitle({
				title:title
			})
			var token = this.$token.getToken()
			if(this.code && this.state && !token) {
				this.login()
				return
			}
			await this.getDoctorInfo()
		},
		methods: {
			toLocation(hospital){
				var that = this
				uni.showActionSheet({
					itemList: ['腾讯地图', '百度地图', '高德地图'],
					success: function (res) {
						var  lngLat = hospital.hospital_pos.toString().split(',')
						var lng = lngLat[0].toString()
						, lat = lngLat[1].toString()

						var baiduLngLat = that.qqMapTransBMap(lng, lat)
						var mapList = [
							'http://apis.map.qq.com/uri/v1/marker?marker=coord:'+ lat+','+lng+';addr:'+hospital.hospital_name,
							// 'http://apis.map.qq.com/uri/v1/marker?marker=coord:'+ lat+','+lng+';title:'+hospital.hospital_name+ 'addr:'+hospital.address, // new 有title
							'http://api.map.baidu.com/marker?location='+baiduLngLat.lat+','+baiduLngLat.lng+'&title='+hospital.hospital_name+'&content=即将前往目的地&output=html&src=webapp.baidu.openAPIdemo',
							'https://m.amap.com/share/index/lnglat='+hospital.hospital_pos+'&name='+hospital.hospital_name+'&src=uriapi&innersrc=uriapi',
						]
						// location.href(mapList[res.tapIndex])
						 // 判断是否在小程序环境
						if (typeof wx !== 'undefined' && wx.openLocation) {
							// 小程序环境
							// 跳不过去？？ lat？问题？
							// wx.openLocation({
					  		// 	latitude: lat,
							// 	longitude: lng,
							// 	name: hospital.hospital_name || '目的地',
							// 	address: hospital.address || '',
							// 	scale: 18
							// });
							wx.openLocation({
					  			latitude: baiduLngLat.lat,
								longitude: baiduLngLat.lng,
								name: hospital.hospital_name || '目的地',
								address: hospital.address || '',
								scale: 18
							});
						} 
						// 判断是否微信浏览器
						else if (/MicroMessenger/i.test(navigator.userAgent)) {
							location.href = mapList[res.tapIndex];
						}
					},
					fail: function (res) {
					}
				});
			},
			copyAddress(address){
				uni.setClipboardData({
					data: address,
					success: () => {
						uni.showToast({ title: "地址已复制", icon: "none" });
					}
				});
			},
			changeCollapse(e) {
				console.log(e);
			},
			setLoginUserInfo(info) {
				this.$setuinfo.setUinfo(JSON.stringify(info))
			},
			login() {
				this.$http.req('common/get_user_info', {code:this.code,state:this.state}, 'POST').then(data=>{
					if(data == -1) return
					this.$settoken.setToken(data.jwttoken)

					this.setLoginUserInfo(data)

					var stat_info = this.state.split('-');
					if(stat_info.length > 2) {
						uni.removeStorageSync('checkin_depart_id');
						this.$nav.navToPath('/pages/visitors/visitors?type=3&depart_id='+stat_info[2])
						return;
					}
					this.getDoctorInfo()
				});

			},
			async getDoctorInfo() {
				await this.$http.req('user/index_info', {}, 'GET').then(data=>{
					if(data == -1) return

					// var data = JSON.parse(uni.getStorageSync('doctor_info'));
					var checkin_depart_id = uni.getStorageSync('checkin_depart_id');
					if(checkin_depart_id){
						uni.removeStorageSync('checkin_depart_id');
						this.$nav.navToPath('/pages/visitors/visitors?type=3&depart_id='+checkin_depart_id)
						return;
					}

					this.pageShow = true;
					let visitFlag = true;
					this.doctorInfo = data;
					if(this.doctorInfo.doctor_info &&  this.doctorInfo.doctor_info.depart_name && this.doctorInfo.doctor_info.depart_name.length>0){
						this.doctor_dept = this.doctorInfo.doctor_info.depart_name;
					}
					if(this.doctorInfo.hospital_departs && this.doctorInfo.hospital_departs.length>0){
						this.hospitals = this.doctorInfo.hospital_departs;
						this.doctor_dept = this.doctorInfo.hospital_departs[0]['depart_name'];
						this.doctorInfo.doctor_info.depart_name = this.doctor_dept;

						for (var index = 0; index < this.hospitals.length; index++) {
							this.collapseValue[index] = []
						}
					}else{
						visitFlag = false;
					}
					if(this.doctorInfo.visit_list && this.doctorInfo.visit_list.length>0){
						this.recentAppoint = this.doctorInfo.visit_list;
					}
					if(this.doctorInfo.workdate && Object.keys(this.doctorInfo.workdate).length > 0){
						this.workdate = this.doctorInfo.workdate;
					}else{
						visitFlag = false;
					}
					
						this.hospital_departs = this.doctorInfo.hospital_departs.map((item,index)=>{
							item.workdate_desc = this.doctorInfo.workdate_desc[item.depart_id]
							return item
						})
				});
			},
			enlargePicture(imgUrl) {
				  var list = new Array();
				  list[0] = imgUrl;
				  uni.previewImage({
					  loop: true,
					  urls: list
				  });
			},
			toVisitors(hospital){
				uni.setStorageSync('depart_id', hospital.depart_id)
				uni.setStorageSync('depart', JSON.stringify(hospital))
				uni.setStorageSync('doctor_info', JSON.stringify(this.doctorInfo))
				this.$nav.navToPath("/pages/visitors/visitors?type=1&is_preview=1")

			},
			toPrebookList(){
				this.$nav.navToPath("/pages/prebook_list/prebook_list")
			},
			toPrebookDetail(){
				this.$nav.navToPath("/pages/visit_detail/visit_detail")
			},
			qqMapTransBMap(lng, lat) {
			      let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
			      let x = lng;
			      let y = lat;
			      let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
			      let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
			      let lngs = z * Math.cos(theta) + 0.0065;
			      let lats = z * Math.sin(theta) + 0.006;
			      return {
			          lng: lngs,
			          lat: lats
			      }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-page{
		.header-wrapper{
			min-height: 208rpx;
			padding: 27rpx 40rpx 24rpx;
			box-sizing: border-box;
			.left{
				width: 510rpx;
				.top{
					overflow: hidden;
					margin-top: 31rpx;
					& view:first-of-type{
						color: #333;
						letter-spacing: 1.32rpx;
						margin-right: 27rpx;
						max-width: 250rpx;
						font-weight: 500;
					}
					& view:last-of-type{
						view{
							width: auto;
							padding: 0 15rpx;
							min-width: 125rpx;
							margin-top: 5rpx;
							line-height: 42rpx;
							text-align: center;
							font-size: 28rpx;
							background: linear-gradient( 288deg, #FFEED2 0%, #FED9A6 100%);
							border-radius: 8rpx;
							color: #7D501F;
						}
					}
				}
				.bt{
					width: 480rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					color: #666666;
					margin-top: 21rpx;
				}
			}
			.right{
				flex-grow: 1;
				display: block;
				border-radius: 100%;
				height: 160rpx;
				width: 160rpx;
			}
		}
		.block{
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 36rpx 24rpx;
			box-sizing: border-box;
			margin: 0 auto;
			width: 714rpx;
			margin-bottom: 20rpx;
		}
		.desc-wrapper{
			box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.03);
			color: #949699;
			font-size: 30rpx;
			line-height: 50rpx;
			.con{
				overflow-y: auto;
    			max-height: 200rpx;
				color: #666666;
			}
		}
		.title-wrapper{
			.title{
				width: 117rpx;
				height: 42rpx;
				padding-left: 13rpx;
				margin-bottom: 36rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 42rpx;
				text-align: center;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				background: linear-gradient( 98deg, #53C184 0%, #5CD378 100%);
			}
			&.booklist .title{
				margin-bottom: 0rpx;
			}
			img{
				width: 48rpx;
				height: 42rpx;
			}
		}
		.hospital-wrapper{
			.item{
				min-height: 207rpx;
				width: 100%;
				margin-bottom: 36rpx;
				border-bottom: 2rpx solid #F1F1F1;
				padding-bottom: 36rpx;

				&:last-child{
					margin-bottom: 0rpx;
					padding-bottom: 0rpx;
					border-bottom:none !important;
				}
				.top{
					.left{
						flex-grow: 1;
						.title{
							align-items: center;
							flex-wrap: wrap;
							column-gap: 20rpx;
							row-gap: 12rpx;
							.hospital_name{
								color: #333;
								font-size: 32rpx;

							}
							img{
								width: 20rpx;
								height: 32rpx;
							}
							.fixed_hospital{
								border-radius: 6rpx;
								background: #F7FCFF;
								border: 1rpx solid rgba(9, 131, 208, 0.6);
								box-sizing: border-box;
								width: 123rpx;
								height: 40rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 26rpx;
								letter-spacing: 0.69rpx;
								color: #0983D0;
							}

						}
						.date{
							line-height: 40rpx;
							font-size: 28rpx;
							color: #949699;
							margin-top: 22rpx;
						}
					}
					.right{
						width: 172rpx;
						flex-shrink: 0;
						height: 100%;
						color: #666666;
						display: flex;
						justify-content: flex-end;
						.map-wrap{
							font-size: 26rpx;
							font-weight: normal;
							line-height: normal;
							letter-spacing: 0.74rpx;
							color: #666666;
							margin-top: 4rpx;
						}
						img{
							width: 52rpx;
							height: 52rpx;
						}
						.copy_btn{
							display: block;
							line-height: normal;
							text-align: center;
							margin-top: 4rpx;
							font-size: 24rpx;
							color: #30C563;
						}
					}
				}
				.center{
					justify-content: flex-start;
					align-items: center;
					width: 100%;
					box-sizing: border-box;
					min-height: 59rpx;
					padding: 10rpx;
					display: flex;
					z-index: 1;
					background: #F8F6F9;
					font-size: 28rpx;
					line-height: 39rpx;
					color: #666666;
					margin-top: 22rpx;
					margin-bottom: 24rpx;
					word-break: break-all;
				}
				.notice-collapse {
					margin-top: 24rpx;
					::v-deep {
						.uni-collapse-item__title-box{
							padding: 0;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							height: 40rpx;
							line-height: 40rpx;
							color: #303133;
							font-weight: normal;
							margin-top: 0rpx;
						}
						.uni-collapse-item__title{
							border: none !important;
						}
						.uni-collapse-item__title-arrow{
							width: 32rpx;
							height: 32rpx;
							margin-left: 12rpx;
						}
						.uni-icons{
							width: 32rpx;
							height: 32rpx;
						}
						.uni-collapse-item__title-text{
							font-size: 28rpx;
							letter-spacing: 0.22rpx;
							color: #949699;
						}
						.uni-collapse-item__title-wrap{
							width: auto;
							flex: unset;
						}
						.content{
							color:red !important;
						}
						.uni-collapse-item__wrap-content{
							border: none !important;
						}
						.uni-collapse-item__title.is-open{
							margin-bottom: 24rpx;
						}
						.content{
							width: 100%;
							height: auto;
							padding: 24rpx;
							box-sizing: border-box;
							background: #F8F6F9;
							border-radius: 12rpx;
						}
						.content .text{
							font-size: 28rpx;
							font-weight: normal;
							line-height: 40rpx;
							letter-spacing: 0.22rpx;
							color: #666666;
						}

					}
				}

				.bot{
					margin-top: 16rpx;
					font-size: 32rpx;
				}
			}
		}
		.visit-wrapper{
			margin-bottom: 0;
			.header{
				justify-content: space-between;
				.opt{
					align-items: center;
					overflow: hidden;
					font-size: 26rpx;
					color: #949699;
					img{
						width: 20rpx;
						height: 32rpx;
						margin-left: 8rpx;
					}
				}
			}
		}
		.preg-books{
			width: 714rpx;
			margin: 0 auto;
		}


	}
</style>