mz/pages/index/index.vue

<template>
	<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="Live-list">
			<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>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		getDoctorList
	} from '@/api/doctor.js';
	import {
		course_list
	} from '@/api/course.js';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	export default {
		onPageScroll(e) {
			this.navP = e.scrollTop / 200;
			if (e.scrollTop > 10) {
				this.addr_color = '#333333';
			} else {
				this.addr_color = '#ffffff';
			}
		},
		data() {
			return {
				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) {
			if (option.spread) {
				// 存储邀请人
				this.spread = option.spread;
				uni.setStorageSync('spread', option.spread);
			}
			this.getDoctorList();
			this.loadData();
		},
		computed: {
			...mapState(['userInfo', 'hasLogin'])
		},
		onShow() {
			let obj = this
			saveUrl()
			console.log(this.userInfo, 55);
			// 1是病人 2是医生 3是机构
			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',
					pagePath: '/pages/dd/dd'
				})
				uni.setTabBarItem({
					index: 4,
					text: '我的',
					iconPath: 'static/tabBar/tab-my.png',
					selectedIconPath: 'static/tabBar/tab-my-current.png'
				});
			}
			if (obj.userInfo.type == 1) {
				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: 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'
				});
			}
			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'
				});
				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'
				})
				uni.setTabBarItem({
					index: 4,
					text: '我的',
					iconPath: 'static/tabBar/tab-my.png',
					selectedIconPath: 'static/tabBar/tab-my-current.png'
				});
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.getDoctorList('refresh');
		},
		methods: {
			// onShowLog(){
			// 	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: #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;
					}
				}
			}
		}
	}
</style>