yogaApp/pages/index/index.vue

<template>
	<view class="page">
		
		<!-- <view class="back"></view> -->
		
		<view class="box">
			
			<view class="fixhead" :style="{ paddingTop: geStatusBarHeight() + 'px'}">
				<selShop :showName="true" :showQR="false" :shop="shop" @changeArea="changeArea"></selShop>
			</view>
			
			<!-- 轮播图区域 -->
			<view class="hometop"> 
				<swiper class="swiperb" @change="change" :current="swiperCurrent"
				  :indicator-dots="false"
				  :autoplay="true"
				  :interval="3000"
				  :duration="1000"
				  :circular="true">
					<swiper-item v-for="(item, i) in swiperList" :key="i">
						<view class="swiper-item" @click="goto(item.ban_url)">
							<image :src="item.ban_img" mode="aspectFill"></image>
						</view> 
					</swiper-item>
				</swiper>
				<view class="dots">
					<block v-for="(item,index) in swiperList" :key="index">
						<view class="dot" :class="index==swiperCurrent ? ' active' : ''"  @click="dotclick(index)">
						</view>
					</block>
				</view>
			</view>
			
			<!-- 功能菜单 -->
			<view class="theme">
				<view  class="thcon" v-for="(item, index) in themeList" :key="index" :style="{ backgroundColor:item.color}" @click="gotoCategory(index)">
					<view class="thinfo">
						<view class="thname">{{item.name}}</view>
						<view class="thtext">{{item.text}}</view>
					</view>
					<view class="thimg">
						<image class="theimg" :src="item.img" mode="aspectFill" lazy-load></image>
					</view>
				</view>
			</view>
			
			<!-- 老师展示 -->
			<view class="teacher-list">
				<view class="teach-title">
					<view class="tname">老师展示</view>
					<view class="tredr" @tap="gotoTeacherMore()">更多<uni-icons type="right" size="13" color="#848a97"></uni-icons></view>
				</view>
				<view class="card" v-for="(item, i) in teacherList" :key="i" @tap="gotoTeacher(item)">
					<view class="limg imgload">
						<image :src="getimgRemoteFile(item.avatar)" mode="aspectFill"></image>
					</view>
					<view class="tlcon">
						<view class="tlname">
							{{item.userName}}
						</view>
						<view class="tlinfo">
							{{item.intro}}
						</view>
					</view>
				</view>
				<uni-load-more iconType="circle" :status="loadStatus" />
			</view>
			 
		</view>
		 
		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
		
		<!-- top 返回顶部-->
		<top ref="topId"></top>
		
		<!-- service 客服-->
		<service ref="serviceId" @goservice="goservice"></service>
		
		<u-toast ref="uToast" />

	</view>
</template>

<script>
	import checkupdate from "@/uni_modules/uni-upgrade-center-app/utils/check-update.js"
	import { myCache,getcartNum,getRemoteFile,ifnonet } from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	import top from "../components/top.vue";
	import service from "../components/service.vue";
	import selShop from "../components/selShop.vue";
	
	export default {
		components: {
		  openlogin,
		  top,
		  service,
		  selShop
		},
		data() {
			return {
				swiperCurrent:0,
				openId:"",
				phone:"",
				userid:"",
				screenWidth: 375,
				shopid:myCache('myshopid')?myCache('myshopid'):'',
				shop:myCache('myshop')?myCache('myshop'):'',
				// banner
				swiperList:[
					{
						ban_img:"../../static/image/b1.jpg"
					},
					{
						ban_img:"../../static/image/b2.png"
					}
				],// myCache('swiperCache'),
				themeList: [
					{
						name: "瑜伽传承",
						text: "传承瑜伽",
						img: '../../static/image/theme/y1.jpg',
						color:'#c4dfe4'
					}, 
					{
						name: "了解场馆",
						text: "场馆介绍",
						img: '../../static/image/theme/y2.jpg',
						color:'#c7d7bd'
					}, 
					{
						name: "瑜伽用品",
						text: "瑜伽好物",
						img: '../../static/image/theme/y3.jpg',
						color:'#f9d1c8'
					}, 
					{
						name: "线上大咖课",
						text: "大咖教师",
						img: '../../static/image/theme/y4.jpg',
						color:'#fff9e6'
					}, 
					{
						name: "课程预约",
						text: "超值课程",
						img: '../../static/image/theme/y1.jpg',
						color:'#c4ccdf'
					}, 
					{
						name: "教练风采",
						text: "风采展示",
						img: '../../static/image/theme/y2.jpg',
						color:'#fceaac'
					}, 
					{
						name: "练习瞬间",
						text: "记录美好",
						img: '../../static/image/theme/y3.jpg',
						color:'#d5e7c1'
					}, 
					{
						name: "教练培训",
						text: "专业课程",
						img: '../../static/image/theme/y4.jpg',
						color:'#c4ccdf'
					}, 
					{
						name: "瑜伽欣赏",
						text: "瑜伽科普",
						img: '../../static/image/theme/y3.jpg',
						color:'#efdddd'
					}, 
					{
						name: "瑜伽常识",
						text: "瑜伽科普",
						img: '../../static/image/theme/y4.jpg',
						color:'#dcd1bd'
					}, 
				], // 主题分类
				teacherList: [
					// {
					// 	id:11,
					// 	name: "Madeline 老师 (女)",
					// 	info: "资深课程导师，国内知名大学专业毕业系统的学习与研究，顺利通过了所授课程的等级证书考核",
					// 	img: '../../static/image/theme/t2.png'
					// },
				], //教师列表
				loadStatus:'more',
				page: {
					pageNum: 1,
					pageSize: 10,
					visitStore: myCache('myshopid')?myCache('myshopid'):'',
				},
			};
		},
		onLoad() {
			// 获取屏幕宽度
			const systemInfo = uni.getSystemInfoSync();
			this.screenWidth = systemInfo.windowWidth;
			this.$forceUpdate(); 
			
			// 客服电话获取缓存
			this.getservice();
			
			// 获取老师信息
			this.loadData();
		},
		onShow() {
			
			this.openId = myCache('openId');
			var user = myCache('user');
			this.userid = user.userid? user.userid:'';
			this.phone = user.userphone;
			if(!this.shopid){
				uni.showModal({
					title: '提示',
					content: '请选择门店信息！',
					showCancel: false,
					confirmText: '确定'
				});
			}
			
			// 检查网络
			if (ifnonet()) {
				uni.navigateTo({
					url: '/pages/error/nonet'
				});
				return false;
			}
			
			var cartnum=getcartNum();
			if(cartnum>0){
				// 底部菜单消息角标
				uni.setTabBarBadge({
					//显示未读消息条数
				    index: 4,
				    text: cartnum+''
				});
			}
			else{
				uni.removeTabBarBadge({
					index: 4
				})
			}
			
			// banner
			// this.getBanner();
			
			// 版本更新
			checkupdate();

		},
		mounted() {
			if(this.userid==""||this.userid=="0"){
				this.$refs.loginId.open();
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},500);
		},
		onPageScroll(e) {
			//调用子组件方法
			this.$refs.topId.topData(e.scrollTop);
		},
		methods: {
			getimgRemoteFile(img){
				if(img){
					img=img.split(',')[0];
					// return getRemoteFile(img)
					 return img
				}
				else{
					return require("@/static/image/theme/t2.png");
				}
			},
			// 切换门店
			changeArea(item){
				console.log(item)
				this.shop=item.storeName;
				this.shopid=item.id;
				// 老师切换
				this.teacherList=[];
				this.loadStatus="more";
				this.page={
					pageNum: 1,
					pageSize: 10,
					visitStore:this.shopid
				}
				this.$forceUpdate();
				this.loadData();
			},
			
			dotclick(index){
				this.swiperCurrent = index;
				this.$forceUpdate();
			},
			change(e) {
				this.swiperCurrent = e.detail.current;
				this.$forceUpdate();
			},
			goservice(val){
				console.log(val);
			}, 
			async getservice(){
				// 获取客服信息 
				// const {data: res} = await uni.$http.post('/platform/getHotline');
				// if (res) {
				// 	myCache('linemobile',res);
				// }
			},
			checknetwork(){
				console.log('checknetwork')
				// 判断当前网络
				uni.onNetworkStatusChange(function(res) { 
					console.log('onNetworkStatusChange',res);
					if (res.isConnected) {
						// 网络可以连接
						uni.showModal({
							title: '系统提示',
					        content: '当前设备网络已恢复',
					        showCancel: false,
					        confirmText: '知道了'
					    });
						
					} else {
					    uni.showModal({
					        title: '系统提示',
					        content: '当前设备无网络或网络较差',
					        cancelText: '取消',
					        confirmText: '确定',
					        success: (res) => {
					            if (res.confirm) {
					                uni.reLaunch({
					                    url:'/pages/index/index'
					                });
					            } else {
					                // #ifdef H5
					                uni.navigateTo({
					                    url:'/pages/login/login'
					                })
					                // #endif
					                // #ifdef APP-PLUS
					                plus.runtime.quit();
					                // #endif
					            }
					        }
					    })
					}
				});
			},
			// 获取老师
			async getTeacherList() {
				const {data: res} = await uni.$http.post('/api/context/getList', this.page);
				if(res.data&&res.data.length>0){
					this.loadStatus="noMore";
					this.teacherList=res.data;
					this.$forceUpdate();
					// res.forEach((cell,idx)=>{
					// 	this.teacherList.push(cell);
					// });
				}
				else{
					this.loadStatus="noMore";
				}
			},
			loadData(){
				// 加载
				if(this.loadStatus=="more") {
					this.loadStatus="loading";
					setTimeout(() => {
						this.getTeacherList();
					}, 300);
				}
			},
			async getBanner() {
				// banner
				const {data: res} = await uni.$http.post('/platform/getbanner');
				if (res&&res.length>0) {
					this.swiperList=res;
					// 保存海报信息
					myCache('swiperCache',this.swiperList);
					this.$forceUpdate();
				}
			},
			gotoCategory(index){
				if(index==0||index==1){
					// 瑜伽传承 了解场馆
					uni.reLaunch({
						url: `/pages/category/category?id=${index}`
					});
				}
				else if(index==2){
					// 瑜伽用品
					uni.reLaunch({
						url: `/pages/product/list?id=0`
					});
				}
				else if(index==3){
					// 线上大咖课
					uni.reLaunch({
						url: `/pages/product/list?id=2`
					});
				}
				else if(index==4){
					// 必须登录
					// 课程预约
					if(this.userid==""||this.userid=="0"){
						this.$refs.loginId.open();
					}
					else{
						// 课程预约
						uni.navigateTo({
							url: `/pages/user/courselist`
						});
					}
				}
				else if(index==5){
					// 教练风采
					uni.reLaunch({
						url: `/pages/category/category?id=2`
					});
				}
				else if(index==6){
					// 练习瞬间
					uni.reLaunch({
						url: `/pages/category/category?id=3`
					});
				}
				else if(index==7){
					// 教练培训
					uni.reLaunch({
						url: `/pages/product/list`
					});
				}
				else if(index==8){
					// 瑜伽欣赏
					uni.reLaunch({
						url: `/pages/category/category?id=4`
					});
				}
				else if(index==9){
					// 瑜伽常识
					uni.reLaunch({
						url: `/pages/category/category?id=5`
					});
				}
			},
			getPhoneNumber(e){
				if(e.phone){
					this.phone = e.phone
				}
				if(e.userid){
					this.userid = e.userid
				}
			},
			gotoTeacherMore(){
				// 教练风采
				uni.reLaunch({
					url: `/pages/category/category?id=2`
				});
			},
			gotoTeacher(info){
				uni.navigateTo({
					url: `/pages/teacher/detail?id=${info.userId}&name=${info.userName}`
				});
			},
			navToList(id){
				uni.navigateTo({
					url: `/pages/product/detail?id=${id}`
				})
			},
			goto(url){
				console.log('url',url);
				// 首页  1 ；我的 2 ，我的订单 3 
				// 分类  /pages/category/category?id=分类id
				// 商品  /pages/product/detail?id=商品id
				if(url){
					if(url=='1'){
						// 首页
						uni.switchTab({
							url: '/pages/index/index'
						});
					}
					else if(url=='2'){
						// 我的
						uni.switchTab({
							url: '/pages/user/user'
						});
					}
					else if(url=='3'){
						// 我的订单
						uni.navigateTo({
							url: `/pages/order/orderlist?id=0`
						});
					}
					else{
						if (url.includes('/pages/category/category')) {
							uni.reLaunch({
								url: url
							});
						}
						else{
							uni.navigateTo({
								url: url
							});
						}
					}
				}
			},
			focus(){
				uni.navigateTo({
					url: `/pages/index/list`
				});
			},
			// 获取状态栏高度
			geStatusBarHeight(){
			    return uni.getSystemInfoSync()['statusBarHeight'];
			},
			// 获取导航栏高度
			getNavBarHeight(){
				return 45+uni.getSystemInfoSync()['statusBarHeight'];
			},
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 0;
		position: relative;
		background-image: url('@/static/image/bg.jpg');
		background-attachment: fixed;
		background-size: cover;
		background-position: center center;
	}
	
	/* 首页固定标题 */
	.fixhead{
		display: flex;
		flex-direction: row;
		align-items: self-end;
		width: 100%;
		margin: 16rpx 0;
	} 
	.hometop{
		width: 100%;
		height: 360rpx;
		position: relative;
		display: flex;
	}
	
	/* banner */
	.swiper-bg {
		background: linear-gradient(180deg, #619af7 0%, #F2F2F2 100%);
		width: 100%;
		height: 420rpx;
		padding-top: 0;
	}
	.swiperb {
		width: 100%;
		height: 360rpx;
		margin: 10rpx 0 0 0;
		.swiper-item, image {
			margin: auto;
			height: 100%;
			width: 100%;
		}
	}
	.dots {
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		// 这里一定要注意兼容不然很可能踩坑          
		transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		z-index: 99;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		.dot {
			width: 16rpx;
			height: 16rpx;
			transition: all .6s;
			background: rgba(255, 255, 255, .3);
			margin-right: 16rpx;
			border-radius: 16rpx;
		}
		.active {
			width: 16rpx;
			height: 16rpx;
			background: #fff;
		}
	}
	
	/* 主题 */
	.theme{
		display: flex;
		flex-wrap: wrap; /* 允许换行 */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin: 40rpx 0 0 20rpx;
		box-sizing: border-box;
		.thcon{
			flex: 1 1 46%; /* 每个项目占用容器宽度的50%，即一行显示两个 */
			box-sizing: border-box; /* 确保padding和border不会影响宽度计算 */
			display: flex;
			flex-direction: row;
			padding: 30rpx 24rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 10rpx 16rpx 2rpx rgba(0, 0, 0, 0.1);
		}
		.thinfo{
			display: flex;
			flex-direction: column;
			flex: 1;
			.thname{
				font-size: 32rpx;
				color:#000;
			}
			.thtext{
				margin-top: 10rpx;
				font-size: 28rpx;
				color:#787b7c;
			}
		}
		.thimg{
			width: 100rpx;
			height: 100rpx;
			margin-left: 10rpx;
			.theimg{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
	 
	/* 老师列表  */
	.teacher-list {
		display: flex;
		flex-direction: column;
		margin:20rpx;
		.teach-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.tname {
				font-size: 36rpx;
				font-weight: 600;
				color: #323334;
				margin-top: 12rpx;
			}
			.tredr {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #848a97;
				margin-top: 12rpx;
				margin-right: 10rpx;
			}
		}
		.card {
			display: flex;
			flex-direction: row;
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			padding: 24rpx 20rpx 20rpx 22rpx;
			.limg{
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				>image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
			}
			.tlcon {
				display: flex;
				flex-direction: column;
				.tlname {
					font-size: 30rpx;
					font-weight: 600;
					margin-bottom: 16rpx;
					color: #323334;
				}
				.tlinfo {
					font-size: 28rpx;
					color: #868c99;
					display: flex;
					align-items: center;
					height: 80rpx;
					line-height: 40rpx;
					overflow: hidden;
					display: -webkit-box;
					text-overflow: ellipsis; //属性规定当文本溢出包含元素时发生的事情  text-overflow: clip|ellipsis|string; (修剪/省略号/指定字符串)
					-webkit-line-clamp: 2;
					/*要显示的行数*/
					/* autoprefixer: off */
					-webkit-box-orient: vertical; //属性规定框的子元素应该被水平或垂直排列
					/* autoprefixer: on */
					               

				}
			}
		}
	}
	
	/* 活动 */ 
	.active{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
		padding: 6rpx 20rpx;
		.aconl{
			width: 49%;
			height: 180rpx;
			margin-right: 1%;
			.aimg{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
		.aconr{
			width: 49%;
			height: 180rpx;
			margin-left: 1%;
			.aimg{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
	}
	.s-list{
		margin: 36rpx 20rpx 36rpx 20rpx;
		padding: 30rpx 24rpx;
		background: #FFF;
		border-radius: 60rpx;
		box-shadow:0 1px 3px 2px rgba(0, 0, 0, 0.03),inset 0 30px 15px #f5f5f5;
		.scroll-view_H{
			white-space: nowrap;
			width: 100%;
			margin-bottom: 20rpx;
			.product-item{
				position: relative;
				display: inline-block;
				overflow: hidden;
				width: 300rpx;
				padding-bottom: 30rpx;
				margin-right: 20rpx;
				background-color: #f7f7f7;
				border-radius: 0 0 80rpx 0;
			}
			.image-wrapper{
				width: 100%;
				height: 300rpx;
				border-radius: 6rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 88%;
					height: 88%;
					opacity: 1;
					border-radius: 10rpx;
				}
			}
			.title{
				color: #000;
				font-size: 26rpx;
				word-break: break-word;
				white-space: break-spaces;
				margin: 10rpx 10rpx 0 15rpx;
				line-height: 32rpx;
				overflow: hidden;
				// text-overflow: ellipsis;
				// white-space: nowrap;
			}
			.price{
				margin: 20rpx 0 0 10rpx;
				line-height: 1;
				align-items:center;
				color: #00A99A;
				.txt{
					font-size: 22rpx;
				}
				.tint{
					font-size: 28rpx;
					font-weight: 600;
				}
				.txtt{
					font-size: 20rpx;
					margin-left: 7rpx;
				}
			}
		}
	}
	.s-header{
		display:flex;
		flex-direction: row;
		align-items:center;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 0 16rpx 0;
		margin-top: 24rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #eeeeee;
		image{
			flex-shrink: 0;
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
		.tit-box{
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.tit{
			font-size: 30rpx;
			color: #000;
			font-weight: 600;
			margin-left: 6rpx;
		}
		.tit2{
			background-color: #9c9c9c;
			font-size: 22rpx;
			color: #fff;
			width: 120rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			border-radius: 44rpx;
		}
	}
	
</style>