mabao/pages/index/index.vue

<template>
	<view class="main">
		<view class="">
			<u-search :clearabled="true" shape="round" :show-action="true" placeholder="搜索医生姓名、医院名" v-model="keyword"></u-search>
		</view>
		<view class="indexswiper" style="margin-top: 10rpx;">
			<u-swiper :list="list" mode="dot"></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" data-index="1">
					<u-grid-item>
						<u-image width="120rpx" height="120rpx" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/toolimg/indexphone.png" shape="circle"></u-image>
						<view class="grid-text">电话咨询</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="">
					<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="">
					<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="">
					<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="listtext" 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;box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);">
			<view class="cu-item" style="margin: 0;">
				<view class="flex justify-between">
					<swiper :current="currentindex" style="width: 430rpx;height: 430rpx;" :indicator-dots="false" :autoplay="true"
					 :circular="true" :interval="3000" :duration="1000">
						<swiper-item>
							<view class="image">
								<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" mode=""></image>
								<!-- <view class="cu-bar bg-shadeBottom">
									<text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text>
								</view> -->
							</view>
						</swiper-item>
						<swiper-item>
							<view class="image">
								<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" mode=""></image>
								<!-- <view class="cu-bar bg-shadeBottom">
									<text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text>
								</view> -->
							</view>
						</swiper-item>
						<swiper-item>
							<view class="image">
								<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" mode=""></image>
								<!-- <view class="cu-bar bg-shadeBottom">
									<text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text>
								</view> -->
							</view>
						</swiper-item>
					</swiper>
					<view class="margin-left-xs" style="width: 360rpx;">
						<image style="width: 100%;height: 50%;" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
						 mode=""></image>
						<image style="width: 100%;height: 50%;" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"
						 mode=""></image>
					</view>
				</view>
				<swiper :current="currentindex" style="height: 100rpx;" :indicator-dots="false" :vertical="true" :autoplay="true"
				 :circular="true" :interval="3000" :duration="1000">
					<swiper-item>
						<view class="cu-list menu">
							<view class="cu-item">
								<!-- <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view> -->
								<view class="content flex-sub">
									<view class="text-grey">主标题主标题</view>
									<view class="text-gray text-sm flex justify-between">
										第一副标题副标题副标题副标题副标题副标题副标题
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="cu-list menu">
							<view class="cu-item">
								<!-- <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view> -->
								<view class="content flex-sub">
									<view class="text-grey">主标题主标题</view>
									<view class="text-gray text-sm flex justify-between">
										第二副标题副标题副标题副标题副标题副标题副标题
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="cu-list menu">
							<view class="cu-item">
								<!-- <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view> -->
								<view class="content flex-sub">
									<view class="text-grey">主标题主标题</view>
									<view class="text-gray text-sm flex justify-between">
										第三副标题副标题副标题副标题副标题副标题副标题
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="tltleStyle" @click="gototest">
			<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">
								<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 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>
	</view>
</template>

<script>
	import {
		getLocation
	} from "../../common/authorize.js"
	var user = require('../../common/user.js');
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				hasLogin: 'verifyJwt'
			}),
			...mapState(['user'])
		},
		onShow() {
			this.GetCurrentAddress()
			this.getDoctorList()
		},
		onLoad(options) {

		},
		data() {
			return {
				scrollTop: 0,
				keyword: "",
				loadText: {
					nomore: '暂无更多医生推荐'
				},
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					}
				],
				test: [1, 2, 3, 4, 5],
				currentindex: 0,
				listtext: [
					"xxxxxxxxxxx",
					"yyyyyyyyyyy",
					"zzzzzzzzzzz"
				],
				doctorList: [],
				latitude: 0,
				longitude: 0
			}
		},
		methods: {
			//监听滚动
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			gotoxuanze(e) {
				uni.navigateTo({
					url: '../doctor_related/select_doctor?index=' + e.currentTarget.dataset.index
				})
			},
			gotoinfo(e) {
				uni.navigateTo({
					url: "../doctor_related/doctor_info?id=" + e.currentTarget.dataset.id
				})
			},
			getDoctorList: async function() {
				let res = await this.$request.post("/api/v1/docter/docterList", {
					page: 1,
					latitude: this.latitude,
					longitude: this.longitude
				})
				let status = user.islogin(res)
				console.log(res)
				if (status) {
					this.doctorList = res.data.data

				}
			},
			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
					}
				}
			},
			//获取当前地址
			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;

	}

	.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: 52rpx;
		left: 35rpx;
		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>