mabao/pages/doctor_related/select_doctor.vue

<template>
	<view class="">
		<view class="margin-bottom-sm bg-white">
			<u-dropdown>
				<u-dropdown-item @change="allserive" v-model="value1" :title="options1[value1].label" :options="options1"></u-dropdown-item>
				<u-dropdown-item @change="city" v-model="value2" :title="options2[value2].label" :options="options2"></u-dropdown-item>
				<u-dropdown-item @change="recommend" v-model="value3" :title="options3[value3].label" :options="options3"></u-dropdown-item>
			</u-dropdown>
			<view class="main">
				<u-search :clearabled="false" shape="round" :show-action="false" placeholder="搜索医生姓名、医院名" v-model="keyword"></u-search>
				<view class="margin-top-sm text-df text-bold" @click="xuanzetime" v-if="istime">
					选择时间：{{showtime}}
					<u-picker mode="multiSelector" @confirm="callbacktime" v-model="show" :default-selector='[0, 1]' range-key="start_time_period"
					 :range="multiSelector"></u-picker>
				</view>
				<view style="width: 100%;">
					<view class="recommendstyle margin-top-sm" v-for="(item,index) in doctorList" :key="index">
						<view class="base_item" @click="gotoinfo" :data-id="item.id">
							<view class="base_item_zi">
								<view class="base_item_zi_items">
									<view class="base_item_zi_content">
										<u-image :fade="true" duration="450" width="120rpx" height="120rpx" :src="item.avatar" shape="circle">
										</u-image>
										<view class="follow_style" @click.stop="submitCollect" :data-index="index" :data-id="item.id" v-if="item.is_collect==0">
											关注
										</view>
										<view class="follow_style" @click.stop="submitCollect" :data-index="index" :data-id="item.id" style="background-color: #fff;color: rgb(208, 105, 150);border:2rpx solid rgb(208, 105, 150);"
										 v-else>
											已关注
										</view>
										<view class="content_right">
											<view class="" style="display: flex;align-items: center;">
												<text style="font-size: 32rpx; font-weight: bold;">{{item.name}}</text>
												<text class="text_style" v-for="(itm,index) in item.label" :key="index">{{itm}}</text>
											</view>
											<view class="m_gray_small">
												科室：{{item.office.name}} {{item.qualification.name}}
											</view>
											<view class="flex justify-start align-center flex-wrap" style="position: relative;">
												<u-tag v-if="item.is_chat==1" style="margin-top:20rpx ; margin-right: 20rpx;" text="图文" shape="circle" mode="dark"
												 type="info" />
												<u-tag v-if="item.is_phone==1" style="margin-top:20rpx ; margin-right: 20rpx;" text="电话" shape="circle"
												 mode="dark" type="info" />
												<u-tag v-if="item.is_appoint==1" style="margin-top:20rpx ; margin-right: 20rpx;" text="门诊" shape="circle"
												 mode="dark" type="info" />
											</view>
										</view>
									</view>
									<view class="foot_juli padding-sm">
										<u-line color="#f6f6f6" />
										<view class="flex justify-center margin-top-sm" style="color: rgba(0,0,0,0.54);">
											<view class="text-sm" style="flex: 1; text-align: left;">
												评分：
												<text style="color: #FF7B72;">{{item.score}}</text>
											</view>
											<view class="text-sm" style="flex: 1; text-align: center;">
												服务：
												<text style="color: #FF7B72;">{{item.service_persons}}</text>
											</view>
											<view class="text-sm" style="flex: 1; text-align: right;">
												距离：
												<text style="color: #FF7B72;">{{parseInt(item.distance/1000)}}km</text>
											</view>
										</view>
										<view class="doctor_style margin-top-sm">
											<view class="doctor_style_item">
												{{item.intro}}
											</view>
											<view class="text-black flex justify-between align-center margin-top-sm" style="font-size: 30rpx;">
												<view class="jisu">急速响应</view>
												<view class="">
													服务
													<text class="text-red text-bold text-xl">￥{{item.phone_price/100}}</text>
													起
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="margin-tb padding-tb-xs">
			<u-loadmore :status="nomore" :icon-type="flower" />
		</view>
		<u-back-top :scroll-top="scrollTop" bottom="80" top="400"></u-back-top>
	</view>
</template>

<script>
	var user = require('../../common/user.js');
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		onLoad(options) {
			if (options.index) {
				this.value1 = options.index
				if (this.value1 == 3) {
					this.istime = true
				} else {
					this.istime = false
				}
			}
			if (options.value != "") {
				this.keyword = options.value
			}
		},
		onShow() {
			this.getDoctorList()
		},
		mounted() {
			this.gettime()
		},
		data() {
			return {
				scrollTop: 0,
				keyword: "",
				test: [1, 2, 3, 4, 5],
				value1: 0,
				value2: 0,
				value3: 0,
				options1: [{
						label: '全部服务',
						value: 0,
					}, {
						label: '电话咨询',
						value: 1,
					},
					{
						label: '图文咨询',
						value: 2,
					},
					{
						label: '门诊预约',
						value: 3,
					}
				],
				options2: [{
						label: '成都市',
						value: 0,
					}, {
						label: 'xx市',
						value: 1,
					},
					{
						label: 'xx市',
						value: 2,
					},
				],
				options3: [{
						label: '推荐排序',
						value: 0,
					}, {
						label: '距离最近',
						value: 1,
					},
					{
						label: '好评最多',
						value: 2,
					},
					{
						label: '服务最多',
						value: 3,
					},
				],
				doctorList: [],
				timeday: "", //年月日
				timehour: "", //时分
				multiSelector: [],
				params: {
					year: false,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				show: false,
				istime: false,
				showtime: "",
				pageindex: 1
			}
		},
		watch: {
			keyword: function(newtext, jiu) {
				if (typeof newtext === 'string') {
					if (newtext.trim().length !== 0) {
						this.debounce(this.changeStr, 2000);
					} else {}
				}
				if (newtext == "") {
					this.list = []
				}
			}
		},
		onReachBottom() {
			this.getDoctorList()
		},
		methods: {
			//监听滚动
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			debounce(fn, wait) {
				if (this.fun !== null) {
					clearTimeout(this.fun)
				}
				this.fun = setTimeout(fn, wait)
			},
			allserive(value) {
				this.value1 = value
				if (this.value1 == 3) {
					this.istime = true
				} else {
					this.istime = false
				}
				this.timeday = ""
				this.timehour = ""
				this.pageindex = 1
				this.doctorList = []
				this.getDoctorList()
			},
			city(value) {
				this.value2 = value
			},
			recommend(value) {
				this.value3 = value
				this.timeday = ""
				this.timehour = ""
				this.pageindex = 1
				this.doctorList = []
				this.getDoctorList()
			},
			gotoinfo(e) {
				uni.navigateTo({
					url: "./doctor_info?id=" + e.currentTarget.dataset.id + "&time=" + this.showtime
				})
			},
			submitCollect: async function(e) {
				let res = await this.$request.post("/api/v1/collection/submitCollect", {
					type: 1,
					relation_id: e.currentTarget.dataset.id,
				})
				if (res.status == 0) {
					if (res.data.is_collect == 0) {
						uni.showToast({
							title: "取消成功",
							icon: "none"
						})
						this.doctorList[e.currentTarget.dataset.index].is_collect = res.data.is_collect
					} else {
						uni.showToast({
							title: "关注成功",
							icon: "none"
						})
						this.doctorList[e.currentTarget.dataset.index].is_collect = res.data.is_collect
					}
				}
			},
			getDoctorList: async function() {
				let res = await this.$request.post("/api/v1/docter/docterList", {
					page: this.pageindex,
					list_type: this.value1,
					name: this.keyword,
					sort_type: this.value3,
					latitude: uni.getStorageSync("latitude"),
					longitude: uni.getStorageSync("longitude"),
					schedule_date: this.timeday,
					time_period_id: this.timehour
				}, )
				if (res.status == 0) {
					if (this.pageindex > res.data.last_page) {
						uni.showToast({
							title: "没有更多了",
							icon: "none"
						})
					} else {
						this.doctorList = this.doctorList.concat(res.data.data)
						this.pageindex++
					}
				}
			},
			gettime: async function() {
				let res = await this.$request.post("/api/v1/docter/timePeriodList")
				console.log(res)
				if (res.status == 0) {
					res.data.list.forEach(item => {
						item.start_time_period = item.start_time_period + '-' + item.end_time_period
					})
					this.multiSelector.push(res.data.dates)
					this.multiSelector.push(res.data.list)
					this.showtime = res.data.dates[0] + ' ' + res.data.list[0].start_time_period
				}
			},
			changeStr() {
				this.timeday = ""
				this.timehour = ""
				this.pageindex = 1
				this.doctorList = []
				this.getDoctorList()
			},
			xuanzetime() {
				this.show = !this.show
			},
			//返回时间
			callbacktime(arr) {
				this.timeday = this.multiSelector[0][arr[0]]
				this.timehour = this.multiSelector[1][arr[1]].id
				this.showtime = this.multiSelector[0][arr[0]] + " " + this.multiSelector[1][arr[1]].start_time_period
				this.pageindex = 1
				this.doctorList = []
				this.getDoctorList()
			}
		}
	};
</script>

<style scoped lang="scss">
	.main {
		padding-top: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;

	}

	.gridstyle {
		height: 450rpx;
		background-color: #fff;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);
		margin-top: 20rpx;
	}

	.doctor_style {
		color: rgba(0, 0, 0, 0.54);
	}

	.doctor_style_item {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.jisu {
		color: rgb(238, 170, 63);
	}

	.follow_style {
		position: absolute;
		bottom: 60rpx;
		left: 38rpx;
		z-index: 1;
		width: 106rpx;
		height: 40rpx;
		padding: 4rpx 0;
		background-color: rgb(208, 105, 150);
		box-sizing: border-box;
		color: #fff;
		text-align: center;
		border-radius: 60rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.base_item {
		// position: absolute;
		// top: 0;
		// left: 0;
		// right: 0;
		// z-index: 1;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	.base_item_zi {
		// padding-top: 20rpx;
		// margin: 20rpx 20rpx;
		position: relative;
		box-sizing: border-box;
	}

	.base_item_zi_items {
		box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);
		background-color: #fff;
		position: relative;
		border-radius: 8rpx;
		box-sizing: border-box;
	}

	.base_item_zi_content {
		display: flex;
		justify-content: center;
		padding: 30rpx 30rpx;
		overflow: hidden;
		position: relative;
		width: 100%;
		box-sizing: border-box;
	}

	.text_style {
		font-size: 24rpx;
		color: rgba(0, 0, 0, .54);
		display: block;
		margin-left: 10rpx;
	}

	.m_gray_small {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: rgba(0, 0, 0, 0.54);
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.content_right {
		flex: 1;
		margin-left: 20rpx;
		overflow: hidden;
		position: relative;
		box-sizing: border-box;
	}

	.foot_item {
		background-color: #F7F7F7;
		box-sizing: border-box;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.tltleStyle {
		padding: 30rpx 30rpx 15rpx 15rpx;
		// font-weight: bold;
		// font-size: 40rpx;
	}
</style>