mz/pages/index/home.vue

<template>
	<view class="container">
		<view class="container">
			<!-- <view class="swiper">
				<view class="swiper-box">
					<swiper circular="true" autoplay="true" @change="swiperChange">
						<swiper-item v-for="swiper in banner" :key="swiper.id">
							<image :src="swiper.pic"></image>
						</swiper-item>
					</swiper>
					<view class="indicator">
						<view class="dots" v-for="(swiper, index) in banner" :class="[swiperCurrent >= index ? 'on' : '']"
							:key="index"></view>
					</view>
				</view>
			</view> -->
			<view class="top-banner">
				<image src="../../static/img/banner.png" mode="widthFix"></image>
			</view>
			<view class="banner" style="margin: 20rpx atuo;background-color: #fff;" @click="ToDoclist"
				v-if="userInfo.type && (userInfo.type == 1 || userInfo.type == 3)">
				<image src="../../static/img/goxzyy.png" mode="widthFix"
					style="width: 700rpx;margin: auto;display: block;"></image>
			</view>
			<view class="Live-list"
				v-if="userInfo.type && (userInfo.type == 1 || userInfo.type == 3) && (DoctorList.length > 0)">
				<view class="list-name flex" @click="ToDoclist">
					<view class="list-tip">
						<view class="tip"></view>
						咨询问诊
					</view>
					<view class="list-more">
						更多
						<text class="iconfont iconenter"></text>
					</view>
				</view>
				<view v-for="(item, index) in DoctorList" :key="index" class="template flex_item"
					@click="ToExpert(item.uid)">
					<view class="left-img">
						<image :src="item.photo"></image>
					</view>
					<view class="center-word">
						<text class="one">{{ item.name }}</text>
						<text class="two">
							职位：{{ item.doctor_level == 1 ? "初级" : item.doctor_level == 2 ? "中级" : item.doctor_level == 3 ? "副高级" : "正高级"}}
						</text>
					</view>
					<view class="right-label flex">
						<image src="../../static/img/img014.png"></image>
						咨询问诊
					</view>
				</view>
			</view>
			<view class="Live-list" v-if="broadList.length > 0">
				<view class="list-name flex" @click="ToLive">
					<view class="list-tip">
						<view class="tip"></view>
						正在直播
					</view>
					<view class="list-more">
						更多
						<text class="iconfont iconenter"></text>
					</view>
				</view>
				<scroll-view class="floor-list" scroll-x>
					<view class="scoll-wrapper position-relative">
						<view class="floor-item" v-for="ls in broadList" @click="ToLiveDetails(ls)">
							<view class="img-box">
								<image class="list-image" :src="ls.image"></image>
								<view class="tip">好评</view>
							</view>
							<view class="title clamp">{{ls.title}}</view>
							<view class="tip-box flex_item">
								<view v-for="item in ls.label" class="tip">{{item}}</view>
							</view>
							<view class="info ellipsis">{{ls.abstract}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="Live-list">
				<view class="list-name flex" @click="ToCourse">
					<view class="list-tip">
						<view class="tip"></view>
						精选好课
					</view>
					<view class="list-more">
						更多
						<text class="iconfont iconenter"></text>
					</view>
				</view>
				<view id="list-box" class="list-box">
					<view class="guess-section flex">
						<view class="guess-item" v-for="ls in courseList" @click="ToCourseDetails(ls)">
							<view class="imagewrapper">
								<image :src="ls.image"></image>
							</view>
							<text class="title clamp">{{ls.title}}</text>
							<view class="tip-box flex_item">
								<view v-for="item in ls.label" class="tip">{{item}}</view>
							</view>
							<view class="info clamp">￥{{ls.money}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getDoctorList
	} from '@/api/doctor.js';
	import {
		course_list
	} from '@/api/course.js';
	import {
		getUserInfo
	} from '@/api/login.js';
	export default {
		data() {
			return {
				userInfo: '',
				header_color: 'linear-gradient(52deg, rgba(151,143,250,1) 0%, rgba(126,153,254,1) 100%)', //轮播图背景色渐变
				navP: 0, // 导航栏透明度
				DoctorList: [],
				limit: 10, //每次加载数据条数
				page: 1, //当前页数
				loadingType: 'more', //加载更多状态
				loading: 0, //判断是否为点击搜索按钮跳转加载
				addr_color: '',
				swiperCurrent: 0, //轮播图
				swiperHeight: 300,
				banner: '', //轮播图
				recommend: '', //列表数据
				courseList: '', //专题列表
				broadList: '', //直播列表
			};
		},
		onLoad(option) {
			let obj = this
			if (option.spread) {
				// 存储邀请人
				this.spread = option.spread;
				uni.setStorageSync('spread', option.spread);
			}
			getUserInfo({}).then(e => {
				obj.userInfo = e.data
				uni.setStorageSync('userInfo', e.data);
				if (!obj.userInfo.ext_info) {
					uni.navigateTo({
						url: '/pages/index/identity'
					})
				}
				let gz = uni.getStorageSync('gz') || 'more'
				if (obj.userInfo.subscribe != 1 && gz == 'more') {
					uni.showModal({
						title: '温馨提醒',
						content: '为更好的接收消息推送，请关注公众号。',
						success: res => {
							uni.setStorageSync('gz','loaded')
							// 判断是否点击了确认
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/erweima'
								});
							}
						}
					});
				}
			})
			this.loadData();
			this.getDoctorList()
		},
		onShow() {
			let obj = this;
			getUserInfo({})
				.then(function(e) {
					obj.userInfo = e.data;
					uni.setStorageSync('userInfo', e.data);
					if (obj.userInfo.type == 2) {
						uni.setTabBarItem({
							index: 0,
							text: '首页',
							iconPath: 'static/tabBar/tab-home.png',
							selectedIconPath: 'static/tabBar/tab-home-current.png'
						});
						uni.setTabBarItem({
							index: 1,
							text: '我的病人',
							iconPath: 'static/tabBar/tab-cate.png',
							selectedIconPath: 'static/tabBar/tab-cate-current.png',
							visible: true
						});
						uni.setTabBarItem({
							index: 2,
							text: '科普学习',
							iconPath: 'static/tabBar/tab-study.png',
							selectedIconPath: 'static/tabBar/tab-study-current.png',
							visible: false
						});
						uni.setTabBarItem({
							index: 3,
							text: '接单',
							iconPath: 'static/tabBar/jd.png',
							selectedIconPath: 'static/tabBar/jd-act.png',
							visible: true
						})
						uni.setTabBarItem({
							index: 4,
							text: '我的',
							iconPath: 'static/tabBar/tab-my.png',
							selectedIconPath: 'static/tabBar/tab-my-current.png'
						});
					}
					if (obj.userInfo.type == 3) {
						uni.setTabBarItem({
							index: 0,
							text: '首页',
							iconPath: 'static/tabBar/tab-home.png',
							selectedIconPath: 'static/tabBar/tab-home-current.png'
						});
						uni.setTabBarItem({
							index: 1,
							text: '咨询记录',
							iconPath: 'static/tabBar/tab-cate.png',
							selectedIconPath: 'static/tabBar/tab-cate-current.png',
							visible: true
						});
						uni.setTabBarItem({
							index: 2,
							text: '科普学习',
							iconPath: 'static/tabBar/tab-study.png',
							selectedIconPath: 'static/tabBar/tab-study-current.png',
							visible: false
						});
						uni.setTabBarItem({
							index: 3,
							text: '发布订单',
							iconPath: 'static/tabBar/jd.png',
							selectedIconPath: 'static/tabBar/jd-act.png',
							pagePath: '/pages/dd/dd',
							visible: true
						})

						uni.setTabBarItem({
							index: 4,
							text: '我的',
							iconPath: 'static/tabBar/tab-my.png',
							selectedIconPath: 'static/tabBar/tab-my-current.png'
						});
					}
					if (obj.userInfo.type == 1) {
						console.log('普通用户')
						uni.setTabBarItem({
							index: 0,
							text: '首页',
							iconPath: 'static/tabBar/tab-home.png',
							selectedIconPath: 'static/tabBar/tab-home-current.png',
							visible: true
						});
						uni.setTabBarItem({
							index: 1,
							text: '咨询记录',
							iconPath: 'static/tabBar/tab-cate.png',
							selectedIconPath: 'static/tabBar/tab-cate-current.png',
							visible: true
						});
						// uni.setTabBarItem({
						// 	index: 2,
						// 	text: '科普学习',
						// 	iconPath: 'static/tabBar/tab-study.png',
						// 	selectedIconPath: 'static/tabBar/tab-study-current.png',
						// 	visible: true
						// });
						uni.setTabBarItem({
							index: 3,
							text: '接单',
							iconPath: 'static/tabBar/jd.png',
							selectedIconPath: 'static/tabBar/jd-act.png',
							visible: false
						})
						uni.setTabBarItem({
							index: 4,
							text: '我的',
							iconPath: 'static/tabBar/tab-my.png',
							selectedIconPath: 'static/tabBar/tab-my-current.png',
							visible: true
						});
					}
				})
				.catch(function(e) {
					console.log(e);
				});
		},
		methods: {
			ToRegister(item) {
				if (item == 1) {
					uni.navigateTo({
						url: '/pages/doctor/doclist'
					});
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			},
			add() {
				let log = this.$log.getLog();
				// uni.showModal({
				// 	title: '日志',
				// 	content: JSON.stringify(log),
				// 	showCancel: false,
				// });
				this.$log.showLog();
			},
			loadData() {
				let obj = this;
				course_list({
						page: obj.page,
						limit: obj.limit
					})
					.then(data => {
						obj.banner = data.data.banner;
						obj.recommend = data.data.recommend;
						obj.courseList = data.data.recommend['精品课程排行'].list;
						if (data.data.recommend['在线直播'].list) {
							obj.broadList = data.data.recommend['在线直播'].list;
						}
					})
					.catch(e => {
						console.log(e.message);
					});
			},
			//获取医生列表
			getDoctorList(type) {
				let obj = this;
				//这里是将订单挂载到tab列表下
				if (type !== 'refresh') {
					//没有更多数据直接跳出方法
					if (obj.loadingType === 'nomore') {
						return;
					} else {
						// 设置当前为数据载入中
						obj.loadingType = 'loading';
					}
				} else {
					//当重新加载数据时更新状态为可继续添加数据
					obj.loadingType = 'more';
				}
				getDoctorList({
						hospital: '',
						keyword: '',
						sort: '',
						page: obj.page,
						limit: obj.limit
					})
					.then(data => {
						if (type === 'refresh') {
							obj.DoctorList = [];
						}
						obj.DoctorList = obj.DoctorList.concat(data.data.list);
						//判断是否还有下一页，有是more  没有是nomore
						if (obj.limit == obj.DoctorList.length) {
							obj.page++;
							obj.loadingType = 'more';
						} else {
							obj.loadingType = 'nomore';
						}
						// 判断是否为刷新数据
						if (type === 'refresh') {
							// 判断是否为点击搜索按钮跳转加载
							if (obj.loading == 1) {
								uni.hideLoading();
							} else {
								uni.stopPullDownRefresh();
							}
						}
					})
					.catch(e => {
						console.log(e.message);
						if (e.message == '请登录') {
							uni.showModal({
								title: '提示',
								content: '您未登录，是否马上登陆',
								success: function(res) {
									if (res.confirm) {
										interceptor();
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
						obj.loadingType = 'nomore';
						// obj.$api.msg(e.message);
						uni.hideLoading();
					});
			},
			//专题列表
			ToCourse() {
				let recommend = this.recommend['精品课程排行'];
				uni.navigateTo({
					url: '/pages/course/course?recommend_id=' + recommend.id + '&type=' + recommend.type +
						'&title=' + recommend.title + '&typesetting=' + recommend.typesetting
				});
			},
			//专题详情
			ToCourseDetails(item) {
				console.log(item)
				let id = item.link_id;
				uni.navigateTo({
					url: '/pages/course/detail?id=' + id
				});
			},
			//医生详情
			ToExpert(item) {
				uni.navigateTo({
					url: '/pages/doctor/expert?id=' + item
				});
			},
			//医生列表
			ToDoclist() {
				uni.navigateTo({
					url: '/pages/doctor/doclist'
				});
			},
			//直播列表
			ToLive() {
				console.log(this.recommend)
				let recommend = this.recommend['在线直播'];
				uni.navigateTo({
					url: '/pages/live/list?recommend_id=' + recommend.id + '&type=' + recommend.type +
						'&title=' +
						recommend.title + '&typesetting=' + recommend.typesetting
				});
			},
			//直播详情
			ToLiveDetails(ls) {
				console.log(ls)
				uni.navigateTo({
					url: '/pages/live/details?id=' + ls.link_id
				});
			},
			//轮播图
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			}
		}
	};
</script>

<style lang="scss">
	// page {
	// 	background: #ffffff;
	// 	height: 100%;
	// }

	// .container {
	// 	width: 100%;
	// 	// padding: 90rpx 60rpx;
	// }

	// .name {
	// 	padding: 60rpx 0rpx;
	// 	color: #323232;
	// 	font-size: 50rpx;
	// 	font-weight: bold;
	// }

	// .image {
	// 	width: 100%;
	// 	height: 250rpx;
	// 	position: relative;
	// 	margin-bottom: 65rpx;

	// 	image {
	// 		width: 100%;
	// 		height: 100%;
	// 	}

	// 	.identity {
	// 		position: absolute;
	// 		top: 60rpx;
	// 		left: 50rpx;
	// 		color: #ffffff;
	// 		font-size: 40rpx;
	// 	}

	// 	.info {
	// 		position: absolute;
	// 		left: 50rpx;
	// 		top: 125rpx;
	// 		color: #ffffff;
	// 		font-size: 24rpx;
	// 		opacity: 0.5;
	// 	}
	// }
	// .top-img {
	// 	width: 100%;
	// 	margin-bottom: 20rpx;
	// 	image {
	// 		width: 100%;

	// 	}
	// }
	page {
		background: #f5f5f5;
	}

	.top_header {
		padding: 25rpx 0rpx;

		.top-address {
			position: fixed;
			top: 0;
			width: 100% !important;
			z-index: 999;
			padding-bottom: 25rpx;

			//地址
			.header {
				width: 100%;
				padding: 0 4%;
				height: 100rpx;
				display: flex;
				align-items: center;

				.addr {
					height: 60rpx;
					flex-shrink: 0;
					display: flex;
					align-items: center;
					font-size: 36rpx;
					font-weight: bold;
					width: 90%;
					color: #ffffff;

					.icon {
						height: 60rpx;
						margin-right: 15rpx;
						display: flex;
						align-items: center;
						font-size: 42rpx;
						color: #ffffff;
					}
				}

				.config {
					width: 120rpx;
					height: 60rpx;
					flex-shrink: 0;
					display: flex;

					.message {
						width: 65rpx;
						height: 65rpx;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						font-size: 42rpx;
						color: #ffffff;
					}
				}
			}
		}

		.zhanwei {
			width: 100% !important;
			height: 60rpx;
		}
	}

	.search-box {
		height: 120rpx;
	}

	//搜索框
	.input-box {
		width: 80%;
		margin-left: 25rpx;
		height: 70rpx;
		background-color: #ffffff;
		border-radius: 50rpx;
		position: relative;
		display: flex;
		align-items: center;

		.icon {
			display: flex;
			align-items: center;
			position: absolute;
			top: 0;
			left: 35rpx;
			width: 60rpx;
			height: 70rpx;
			font-size: 34rpx;
			color: #c0c0c0;
		}

		input {
			padding-left: 100rpx;
			height: 28rpx;
			font-size: 28rpx;
		}
	}

	.queding {
		color: #ffffff;
		font-size: 35rpx;
		padding: 25rpx 25rpx;
	}

	//轮播图
	.swiper {
		width: 100%;
		display: flex;
		justify-content: center;

		.swiper-box {
			width: 100%;
			height: 346rpx;
			overflow: hidden;
			// box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;

			swiper {
				width: 100%;
				height: 346rpx;

				swiper-item {
					image {
						width: 100%;
						height: 346rpx;
					}
				}
			}

			.indicator {
				position: absolute;
				bottom: 20upx;
				left: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;

				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;

					&.on {
						width: (100%/3);
					}
				}
			}
		}
	}

	//正在直播
	.Live-list {
		margin-top: 25rpx;
		width: 100%;
		background-color: #ffffff;
		font-size: 24rpx;
		padding: 35rpx 35rpx;

		.list-name {
			padding-bottom: 35rpx;

			.list-tip {
				position: relative;
				padding-left: 25rpx;
				color: #6786fb;
				font-size: 32rpx;

				.tip {
					position: absolute;
					left: 0rpx;
					width: 10rpx;
					height: 45rpx;
					background-color: #6786fb;
					border-radius: 25rpx;
				}
			}

			.list-more {
				color: #999999;
				font-size: 24rpx;
			}
		}
	}

	.scoll-wrapper {
		display: flex;
		align-items: flex-start;

		.floor-item {
			width: 220rpx;
			font-size: $font-sm + 2rpx;
			margin-right: 25rpx;

			.img-box {
				position: relative;

				.list-image {
					width: 220rpx;
					height: 144rpx;
					border-radius: 15rpx;
					box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.04);
				}

				.tip {
					position: absolute;
					right: 15rpx;
					top: 0rpx;
					background: #ff6700;
					width: 45rpx;
					text-align: center;
					font-size: 18rpx;
					color: #ffffff;
					padding: 10rpx 0rpx;
					border-bottom-left-radius: 25rpx;
					border-bottom-right-radius: 25rpx;
				}
			}

			.tip-box {
				display: flex;
				flex-wrap: wrap;
				padding-top: 5rpx;

				.tip {
					background: rgba(103, 134, 251, 0.18);
					color: #6786FB;
					margin-right: 15rpx;
					margin-top: 10rpx;
					padding: 2rpx 10rpx;
				}
			}

			.title {
				font-size: 26rpx !important;
				font-weight: 500;
			}

			.info {
				color: #999999;
				font-size: 24rpx;
				padding-top: 15rpx;
			}
		}
	}

	/*公用边框样式*/
	%icon {
		margin-right: 10rpx;
		display: inline-block;
		padding: 2rpx 10rpx;
		border: 1rpx solid $color-yellow;
		color: $color-yellow;
		line-height: 1;
		font-size: $font-base;
		border-radius: 10rpx;
	}

	//精选好课
	.guess-section {
		display: flex;
		flex-wrap: wrap;

		.guess-item {
			position: relative;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			width: 47%;
			margin-bottom: 2%;
			background-color: white;
			padding-bottom: 30rpx;
			// &:nth-child(2n + 1) {
			// 	margin-right: 15rpx;
			// }
		}

		.tip-box {
			display: flex;
			flex-wrap: wrap;
			padding-top: 5rpx;

			.tip {
				background: rgba(103, 134, 251, 0.18);
				color: #6786FB;
				margin-right: 15rpx;
				margin-top: 10rpx;
				padding: 2rpx 10rpx;
			}
		}

		.imagewrapper {
			width: 100%;
			height: 204rpx;
			margin-bottom: 15rpx;

			image {
				border-radius: 15rpx;
				width: 100%;
				height: 100%;
			}
		}

		.title {
			font-size: 30rpx;
			color: $font-color-dark;
		}

		.info {
			color: #e73932;
			padding-top: 15rpx;
			font-size: 30rpx;
		}
	}

	.preferred_centent {
		width: 100%;

		.preferred_item {
			width: 100%;
			height: 100%;
			border-top: 1px solid #f0f0f0;
			padding: 35rpx 0rpx;

			.goods_image image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 100%;
			}

			.goods_name {
				padding-left: 25rpx;
				width: 50%;

				.goods_title {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 30rpx;
					font-weight: 400;
				}

				.goods_info {
					padding-top: 15rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.btn-tpl {
				margin-left: 10rpx;
				border: 2rpx solid #305cec;
				padding: 13rpx 20rpx;
				color: #6786fb;
				border-radius: 15rpx;

				.tpl-img {
					padding-right: 10rpx;

					image {
						margin-top: 8rpx;
						width: 35rpx;
						height: 35rpx;
					}
				}
			}
		}
	}

	.top-banner {
		width: 100%;

		image {
			width: 100%;
		}
	}

	.template {
		width: 100%;
		background: #ffffff;
		overflow: hidden;
		padding: 25rpx;
		box-shadow: 0px 5px 5px 0px rgba(35, 24, 21, 0.06);
		border-radius: 12rpx;
		position: relative;

		.left-img {
			width: 140rpx;
			height: 140rpx;

			image {
				width: 100%;
				height: 100%;
				;
				border-radius: 100%;
			}
		}

		.center-word {
			width: 52%;
			padding-left: 25rpx;

			.one {
				font-size: $uni-font-size-lg - 2rpx;
				font-weight: 500;
				color: $uni-text-color;
				line-height: 36rpx;
				display: block;
				margin-bottom: 10rpx;
			}

			.two {
				font-size: $uni-font-size-sm;
				font-weight: 500;
				color: #666666;
				line-height: 36rpx;
				display: block;
			}
		}

		.right-label {
			padding: 16rpx;
			border: 1px solid $base-color;
			border-radius: 7rpx;
			font-size: $font-sm - 1rpx;
			font-weight: 500;
			color: $base-color;
			align-items: center;

			image {
				width: 30rpx;
				height: 26rpx;
				margin-right: 8rpx;
			}
		}
	}
</style>