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">
				<u-grid-item @click="tests">
					<u-image width="120rpx" height="120rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg" shape="circle"></u-image>
					<view class="grid-text">电话咨询</view>
				</u-grid-item>
				<u-grid-item>
					<u-image width="120rpx" height="120rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg" shape="circle"></u-image>
					<view class="grid-text">图文咨询</view>
				</u-grid-item>
				<u-grid-item>
					<u-image width="120rpx" height="120rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg" shape="circle"></u-image>
					<view class="grid-text">门诊预约</view>
				</u-grid-item>
				<u-grid-item>
					<u-image width="120rpx" height="120rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg" shape="circle"></u-image>
					<view class="grid-text">疫苗接种</view>
				</u-grid-item>
				<u-grid-item>
					<u-image width="120rpx" height="120rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg" shape="circle"></u-image>
					<view class="grid-text">儿保预约</view>
				</u-grid-item>
				<u-grid-item>
					<u-image width="120rpx" height="120rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg" shape="circle"></u-image>
					<view class="grid-text">服务包</view>
				</u-grid-item>
			</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 test" :key="index">
				<view class="base_item">
					<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="https://file.supermm.me/UEditor/uploadFile/2020-09-21/D229A665CBFB4817A518A5C47726AB18.jpg"
								 shape="circle">
								</u-image>
								<view class="follow_style" v-if="true">
									关注
								</view>
								<view class="follow_style" 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;">张三</text>
										<text class="text_style">全科医学科</text>
										<text class="text_style">医生</text>
									</view>
									<view class="m_gray_small">
										昆明市西山区永昌西区社区卫生服务中心昆明市西山区永昌西区社区卫生服务中心
									</view>
									<view class="flex justify-start align-center flex-wrap" style="position: relative;">
										<u-tag style="margin-top:20rpx ; margin-right: 20rpx;" text="图文" shape="circle" mode="dark" type="info" />
										<u-tag style="margin-top:20rpx ; margin-right: 20rpx;" text="电话" shape="circle" mode="dark" type="info" />
										<u-tag 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;">5.0分</text>
									</view>
									<view class="text-sm" style="flex: 1; text-align: center;">
										服务：
										<text style="color: #FF7B72;">7人</text>
									</view>
									<view class="text-sm" style="flex: 1; text-align: right;">
										距离：
										<text style="color: #FF7B72;">650km</text>
									</view>
								</view>
								<view class="doctor_style margin-top-sm">
									<view class="doctor_style_item">
										2010年毕业于红河卫校，2010年8月工作至今，从事预防接种工作7年，对预防接种工作排苗等其他流程熟练，对接种疫苗后出现的一些不良反应有一定经验。
									</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">￥19.90</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>
	var user = require('../../common/user.js');
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				hasLogin: 'verifyJwt'
			}),
			...mapState(['user'])
		},
		onLoad(options) {
			this.getDoctorList()
		},

		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"
				]
			}
		},
		methods: {
			//监听滚动
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			tests() {
				uni.navigateTo({
					url: '../doctor_related/select_doctor'
				})
			},
			gototest() {
				uni.navigateTo({
					url: "../login/login"
				})
			},
			getDoctorList: async function() {
				let res = await this.$request.post("/api/v1/docter/docterList", {
					page: 1,
				})
				console.log(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>