mabao/pages/index/index.vue

<template>
	<view class="main">
		<view class="">
			<u-search :clearabled="true" shape="round" search-icon-color="#EEAA3F" @custom="searchvalue" :show-action="true"
			 placeholder="搜索医生、医院、服务包" v-model="keyword"></u-search>
		</view>
		<view class="margin-top-sm margin-bottom-sm">
			<official-account></official-account>
		</view>
		<view class="indexswiper" style="margin-top: 10rpx;">
			<u-swiper :list="ordinary" :imghos="imghos" mode="dot" @click="gotoarticle"></u-swiper>
		</view>
		<view class="tltleStyle">
			<u-section title="精选服务" font-size="40" line-color="#0B73BA" :bold="true" :right="false"></u-section>
		</view>
		<view class="gridstyle">
			<u-grid :col="3" :border="false">
				<view @click="gotoxuanze(item)" data-index="1" v-for="(item,index) in icons" :key="index">
					<u-grid-item>
						<u-image width="120rpx" height="120rpx" :src="item.image" shape="circle"></u-image>
						<view class="grid-text">{{item.name}}</view>
					</u-grid-item>
				</view>
				<!-- <view class="" @click="gotoxuanze" data-index="2">
					<u-grid-item>
						<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/indextu.png"
						 shape="circle"></u-image>
						<view class="grid-text">图文咨询</view>
					</u-grid-item>
				</view> -->
				<!-- <view class="" @click="gotoxuanze" data-index="3">
					<u-grid-item>
						<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/indexmen.png"
						 shape="circle"></u-image>
						<view class="grid-text">门诊预约</view>
					</u-grid-item>
				</view> -->
				<!-- <view class="" @click="vaccines">
					<u-grid-item>
						<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/indexyimiao.png"
						 shape="circle"></u-image>
						<view class="grid-text">疫苗接种</view>
					</u-grid-item>
				</view> -->
				<!-- <view class="" @click="childcare">
					<u-grid-item>
						<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/indexerbao.png"
						 shape="circle"></u-image>
						<view class="grid-text">儿保预约</view>
					</u-grid-item>
				</view> -->
				<!-- <view class="" @click="servicepacks">
					<u-grid-item>
						<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/indexservice.png"
						 shape="circle"></u-image>
						<view class="grid-text">服务包</view>
					</u-grid-item>
				</view> -->
			</u-grid>
		</view>
		<view class="margin-top-sm">
			<u-notice-bar type="error" bg-color="white" color="black" border-radius="15" :list="configInfo.notices" mode="vertical"></u-notice-bar>
		</view>
		<view class="tltleStyle">
			<u-section title="热门推荐" font-size="40" line-color="#0B73BA" :bold="true" :right="false"></u-section>
		</view>
		<view class="cu-card case" style="margin-top: 20rpx;background-color: transparent;border-radius: 16rpx;position: relative;">
			<swiper @change="swiperChange" :indicator-dots="false" style="height: 426rpx;border-radius:16rpx;background-color: transparent;"
			 :autoplay="true" :interval="3000" :duration="1000" :current="itemcurrent">
				<swiper-item style="background-color: transparent;" v-for="(item,index) in hotlist" :key="index">
					<view class="cu-item shadow" style="margin: 0;background-color: transparent;height: 100%;" @click="gotojournalism(index)">
						<view class="image">
							<image :src="imghos+item.image" style="height: 426rpx;" mode="heightFix"></image>
							<!-- <view class="cu-bar bg-shadeBottom" style="background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0));bottom:44rpx ;">
								<text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text>
							</view> -->
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="dots">
				<view :class="index==itemcurrent?'dot active':'dot'" v-for="(item,index) in hotlist" :key="index"></view>
			</view>
		</view>
		<view class="tltleStyle">
			<u-section title="推荐医生" font-size="40" line-color="#0B73BA" :bold="true" :right="false"></u-section>
		</view>
		<view style="width: 100%;">
			<view class="recommendstyle margin-top-sm" v-for="(item,index) in doctorList" :key="index">
				<view class="base_item">
					<view class="base_item_zi" @click.stop="gotoinfo" :data-id="item.id">
						<view class="base_item_zi_items">
							<view class="base_item_zi_content" style="height: 241rpx;background-color:#FBFBFB;">
								<image style="width: 120rpx;height: 120rpx;border-radius: 50%;" :src="item.avatar">
								</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_texts" :key="index">{{itm.label_name}}</text>
									</view>
									<view class="m_gray_small">
										科室：<text style="color:#333333;">{{item.office.name||'暂无'}} {{item.qualification.name||'暂无'}}</text>
									</view>
									<view class="flex justify-start align-center flex-wrap" style="position: relative;">
										<u-tag bg-color="#F2F2F2" color="#666666" border-color="#F2F2F2" v-if="item.is_chat==1" style="margin-top:20rpx ; margin-right: 20rpx;"
										 text="图文" shape="circle" />
										<u-tag bg-color="#F2F2F2" color="#666666" border-color="#F2F2F2" v-if="item.is_phone==1" style="margin-top:20rpx ; margin-right: 20rpx;"
										 text="电话" shape="circle" />
										<u-tag bg-color="#F2F2F2" color="#666666" border-color="#F2F2F2" v-if="item.is_appoint==1" style="margin-top:20rpx ; margin-right: 20rpx;"
										 text="门诊" shape="circle" />
									</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;">{{item.distance!='未知'?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 flex align-center">
											<image src="../../static/img/speed.png" style="width: 30rpx;height: 30rpx;margin-right: 10rpx;margin-top: 6rpx;"
											 mode=""></image>急速响应
										</view>
										<view class="">
											服务
											<text class="text-red text-bold text-xl" style="margin-right: 10rpx;">￥{{getpricemin([item.phone_price,item.chat_price,item.appoint_price])/100}}</text>
											起
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="margin-tb padding-tb-xs">
			<u-loadmore :status="nomore" :load-text="loadText" :icon-type="flower" />
		</view>
		<u-back-top :scroll-top="scrollTop" bottom="80" top="400"></u-back-top>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {
		getLocation
	} from "../../common/authorize.js"
	var user = require('../../common/user.js');
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	import store from '@/store'
	export default {
		computed: {
			...mapGetters({
				hasLogin: 'verifyJwt'
			}),
			...mapState(['user'])
		},
		onShow() {
			this.GetCurrentAddress()
			this.getDoctorList()
			this.getindexImg()
			this.hasLogin = store.getters['verifyJwt']
		},
		onLoad(options) {
			this.getconfigData()
			this.imghos = this.$imgHost
		},
		data() {
			return {
				itemcurrent: 0,
				scrollTop: 0,
				keyword: "",
				loadText: {
					nomore: '暂无更多医生推荐'
				},
				doctorList: [],
				latitude: 0,
				longitude: 0,
				pageindex: 1,
				configInfo: {},
				icons: [],
				imghos: "",
				hotlist: [],
				ordinary: []
			}
		},
		onHide() {
			this.pageindex = 1
			this.doctorList = []
		},
		onReachBottom() {
			this.getDoctorList()
		},
		onShareAppMessage() {
			return {
				title: "熙宝健康",
				success: res => {
					console.log(res)
				}
			}
		},
		methods: {
			gotoarticle(index) {
				uni.navigateTo({
					url: './article?url=' + this.ordinary[index].url
				})
			},
			gotojournalism(index) {
				uni.navigateTo({
					url: './article?url=' + this.hotlist[index].url
				})
			},
			//取服务价格最小值
			getpricemin(arr) {
				return Math.min(...arr)
			},
			getindexImg: async function() {
				let res = await this.$request.post("/api/v1/common/icons", {
					type: 1
				})
				if (res.status == 200) {
					this.icons = res.data
				}
			},
			swiperChange(e) {
				this.itemcurrent = e.detail.current
			},
			catchTouchMove() {
				return false
			},
			//监听滚动
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			gotoxuanze(item) {
				if (this.hasLogin) {
					if (item.id == 4) {
						uni.navigateTo({
							url: "../vaccines/vaccines_info"
						})
						return false
					}
					if (item.id == 5) {
						uni.navigateTo({
							url: "../childcare/child_care"
						})
						return false
					}
					if (item.id == 6) {
						uni.navigateTo({
							url: "../service_packs/introduce"
						})
						return false
					}
					uni.navigateTo({
						url: '../doctor_related/select_doctor?index=' + item.id
					})
				} else {
					uni.showModal({
						title: "提示",
						content: "暂未登录，请前往登录",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "../login/login"
								})
							}
						}
					})
				}

			},
			gotoinfo(e) {
				if (this.hasLogin) {
					uni.navigateTo({
						url: "../doctor_related/doctor_info?id=" + e.currentTarget.dataset.id + "&index=1"
					})
				} else {
					uni.showModal({
						title: "提示",
						content: "暂未登录，请前往登录",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "../login/login"
								})
							}
						}
					})
				}

			},
			getDoctorList: async function() {
				let res = await this.$request.post("/api/v1/docter/docterList", {
					page: this.pageindex,
					latitude: this.latitude,
					longitude: this.longitude
				}, false)
				if (res.status == 0) {
					// this.doctorList = res.data.data
					if (this.pageindex > res.data.last_page) {

					} else {
						this.doctorList = this.doctorList.concat(res.data.data)
						this.pageindex++
					}
				}
			},
			submitCollect: async function(e) {
				if (this.hasLogin) {
					let res = await this.$request.post("/api/v1/collection/submitCollect", {
						type: 1,
						relation_id: e.currentTarget.dataset.id
					}, false)
					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
						}
					}
				} else {
					uni.showModal({
						title: "提示",
						content: "暂未登录，请前往登录",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "../login/login"
								})
							}
						}
					})
				}
			},
			servicepacks() {
				uni.navigateTo({
					url: "../service_packs/introduce"
				})
			},
			searchvalue(value) {
				uni.navigateTo({
					url: "../doctor_related/select_doctor?value=" + value
				})
			},
			childcare() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: "../childcare/child_care"
					})
				} else {
					uni.showModal({
						title: "提示",
						content: "暂未登录，请前往登录",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "../login/login"
								})
							}
						}
					})
				}
			},
			vaccines() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: "../vaccines/vaccines_info"
					})
				} else {
					uni.showModal({
						title: "提示",
						content: "暂未登录，请前往登录",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "../login/login"
								})
							}
						}
					})
				}

			},
			getconfigData: async function() {
				let res = await this.$request.post("/api/v1/common/configList", {}, false)
				console.log(res)
				if (res.status == 0) {
					this.configInfo = res.data
					this.hotlist = res.data.banners.filter(item => item.type == 1)
					this.ordinary = res.data.banners.filter(item => item.type == 2)
				}
			},
			//获取当前地址
			GetCurrentAddress() {
				getLocation().then(res => {
					this.latitude = res.latitude
					this.longitude = res.longitude
					uni.setStorageSync("latitude", res.latitude)
					uni.setStorageSync("longitude", res.longitude)
				}).catch(res => {

				})
			},
		}
	};
</script>

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

	}

	.dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 30rpx;
		display: flex;
		justify-content: center;
	}

	.dots .dot {
		margin: 0 8rpx;
		width: 10rpx;
		height: 10rpx;
		background: rgba(0, 0, 0, .3);
		border-radius: 8rpx;
		transition: all .6s;
	}

	.dots .dot.active {
		width: 24rpx;
		height: 10rpx;
		background: #fff;
	}

	.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: 76rpx;
		left: 37rpx;
		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 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		margin-left: 15rpx;
		background-color: #E5F5FF;
		color: #0B73B9;
		// width: 100rpx;
		height: 28rpx;
		font-size: 20rpx;
		border-radius: 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>