caimei-applets-caimei/pages/tabBar/home/home.vue

<template>
	<view class="container home clearfix">	
		<!-- 头部轮播 -->
		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="9"></tui-skeleton>
		<view :class="'container-home-'+ inputActive" class="tui-skeleton">
			<view :class="'search-input-' + inputActive">
				<bt-search :clickPath="clickPath" :toestText='hotSearchText'></bt-search>
			</view>
			<view class="banner-section">
				<!-- <uni-swiper-dot :info="bannerList" :current="current" field="content" :mode="mode" > -->
				<swiper class="banner tui-banner tui-skeleton-rect" circular @change="swiperChange" :autoplay="true" :interval="5000" :duration="500" :circular="false">
					<swiper-item v-for="(item, index) in bannerImageList" :key="index" class="banner-item"> 
						<image :src="item" />
					</swiper-item>
				</swiper>
				<view class="swiper__dots-box" v-if="bannerImageList.length > 1">
					<view v-for="(item,idx) in bannerImageList" 
						  :key="idx" 
						  :class="[idx===current?'swiper__dots-long':'none']" 
						  :data-index="current" class="swiper__dots-item" />
				</view>
				<!-- </uni-swiper-dot> -->
			</view>
			<view class="cate-section clearfix">
				<!-- 自定义分类导航栏 -->
				<view class="tabbar clearfix">
					<view class="cate-item" v-for="(nav,idx) in productsClassify" :key="idx" @click.stop="navToListPage(nav)">
						<image class="tui-skeleton-fillet" :src="nav.classifyImage"></image>
						<text class="tui-skeleton-rect">{{nav.classifyName}}</text>
					</view>
				</view>
				<!-- 优选分类 -->
				<view class="tabbar clearfix">
					<view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'1',value:mallPageModules.firstModulesName})">
						<image class="tui-skeleton-fillet" :src="mallPageModules.firstModulesImage"></image>
						<text class="tui-skeleton-fillet">{{mallPageModules.firstModulesName}}</text>
					</view>
					<view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'2',value:mallPageModules.secondModulesName})">
						<image class="tui-skeleton-fillet" :src="mallPageModules.secondModulesImage"></image>
						<text class="tui-skeleton-fillet">{{mallPageModules.secondModulesName}}</text>
					</view>
					<view class="cate-item-info" @click="showTost">
						<image class="tui-skeleton-fillet" :src="navInforList[0].icon"></image>
						<text class="tui-skeleton-fillet">{{navInforList[0].text}}</text>
					</view>
					<view class="cate-item-info">
						<!-- #ifdef MP-WEIXIN -->
						<button class="contact-btn" open-type="contact" @bindcontact="handleContact">
							<image class="tui-skeleton-fillet" :src="navInforList[1].icon"></image>
						</button>	
						<!-- #endif -->
						<text class="tui-skeleton-fillet">{{navInforList[1].text}}</text>
					</view>
				</view>
			</view>
			<!-- 热销商品 -->
			<view class="hotgoods-section">
				<view class="s-header" @click="this.$api.navToListPage({type:'3',value:mallPageModules.thirdModulesName})">
					<text class="tip tui-skeleton-fillet">{{mallPageModules.thirdModulesName}}</text>
					<text class="tit tui-skeleton-fillet">更多</text>
					<text class="iconfont icon-xiayibu"></text>
				</view>
				<view class="hotgoods-swiper">
					<scroll-view class="floor-list" scroll-x>
						<view class="scoll-wrapper">
							<view 
								v-for="(item, index) in organizeProducts" :key="index"
								class="floor-item"
								@click.stop="navToDetailPage(item.id)"
							>
								<image class="tui-skeleton-fillet" :src="item.mainImage" mode="aspectFill"></image>
								<view class="title tui-skeleton-rect">
									<text class="mclap">{{item.name}}</text>
								</view>
								<view v-if="isLogin" class="price tui-skeleton-rect">
									<text class="p sm">￥</text>
									<text class="p big">{{item.retailPrice.toFixed(2)}}</text>
								</view>
								<view v-else class="no-price">							
									<text vi-else class="p-no tui-skeleton-rect" @click.stop="navto('/pages/login/login?type=3')">登录查看价格<text class="iconfont icon-xiayibu" style="font-size: 22rpx;margin: 0 6rpx;"></text></text>
								</view>		
							</view>
						</view>
					</scroll-view>
				</view>	
			</view>
			<!-- 底部 -->
			<view class="footer-section ">
				<view class="s-header tui-skeleton-fillet">
					<text class="tip">医美机构正品联盟</text>
				</view>
				<view class="f-content tui-skeleton-fillet" @click="navto('/pages/service/member')">
					<image class="tui-banner" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AEwQlAAjGFdpI2LM357.png" mode=""></image>
				</view>
				<view class="f-tab-section">
					<!-- 优选分类 -->
					<view class="tabbar clearfix">
						<view class="cate-item" @click="showTost">
							<image class="tui-skeleton-fillet" :src="navServerList[0].icon"></image>
							<text class="tui-skeleton-fillet">{{navServerList[0].text}}</text>
						</view>
						<view class="cate-item" @click="navto(navServerList[1].path)">
							<image class="tui-skeleton-fillet" :src="navServerList[1].icon"></image>
							<text class="tui-skeleton-fillet">{{navServerList[1].text}}</text>
						</view>
						<view class="cate-item" @click="navto(navServerList[2].path)">
							<image class="tui-skeleton-fillet" :src="navServerList[2].icon"></image>
							<text class="tui-skeleton-fillet">{{navServerList[2].text}}</text>
						</view>
						<view class="cate-item" @click="telPhoneTo">
							<image class="tui-skeleton-fillet" :src="navServerList[3].icon"></image>
							<text class="tui-skeleton-fillet">{{navServerList[3].text}}</text>
						</view>
					</view>
				</view>
				<view class="f-text tui-skeleton-fillet">
					<view class="">
						<image class="logo" src="../../../static/logo-c@2x.png" mode=""></image>
						<text class="">采美365网</text>
					</view>
				</view>
			</view>	
		</view>
		<!-- 透明模态层 -->
		<modal-layer v-if='modallayer'></modal-layer>
	</view>
</template>

<script>
	import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
	import authorize from '@/config/authorize.js'
	import modalLayer from "@/components/modal-layer"
	import btSearch from '@/components/uni-search/bt-search.vue'
	
	import { mapMutations} from 'vuex';
	export default {
		components:{
			tuiSkeleton,
			modalLayer,
			btSearch
		},
		data() {
			return {
				userID:'',
				inputActive:'float',
				hotSearchText:'你想要的这里都有',
				clickPath:'/pages/search/search',
				current:0,
				mode:'round',
				modallayer:false,
				isLogin:false,
				bannerImageList:[],
				hotGoodsList:[],
				skeletonShow: true,
				organizeProducts:[],//常用商品
				productsClassify:[], //导航分类
				mallPageModules:'', //优惠模块分类
				navInforList:[
					{text:'会员中心',icon:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAAZU0AACaPrfbB8I435.png'},
					{text:'在线客服',icon:'https://img.caimei365.com/group1/M00/03/8D/Cmis215XHXWABv0rAACt9b8scec656.png'}
				],
				navServerList:[
					{text:'会员优惠',icon:'../../../static/temp/server1@2x.png',path:'/pages/service/member'},
					{text:'售后无忧',icon:'../../../static/temp/server2@2x.png',path:'/pages/service/aftersale'},
					{text:'购物须知',icon:'../../../static/temp/server3@2x.png',path:'/pages/service/shoppingnotice'},
					{text:'联系我们',icon:'../../../static/temp/server4@2x.png',path:''},
				]
			}
		},
		onLoad() {
			this.initData()
		},
		methods: {
			async initData(){
				this.skeletonShow = true;
				let hotGoodsList = await this.$util.json('hotGoodsList'); 
				this.hotGoodsList = hotGoodsList;
			},	
			getCheekeyCode(){
				authorize.getCode('weixin').then(wechatcode =>{
					// console.log(wechatcode);
					// 根据微信的code获取用户登录状态:1已登录过 -1未登录过
					this.$api.get('/login/doLogin',{userOrganizeID:this.userOrganizeID,code:wechatcode},
						response =>{
							// console.log(response);
							if(response.code == '1'){
								this.isLogin = true;
								this.userID = response.data.userID;						
								let user_key = {code:response.code,openid:response.data.openid,userID:response.data.userID}
								this.$store.commit('updateStatus',user_key)
								uni.setStorageSync('cookieKey','JSESSIONID='+response.data.sessionId)
								this.getHomeInformation()
							}else{
								this.isLogin = false;
								this.userID ='';
								let user_key = {code:response.code,tel:response.data,userID:this.userID,openid:''}
								this.$store.commit('updateStatus',user_key)
								this.getHomeInformation()
								// this.$store.commit('updateAllNum',0)
							}
						}
					)
				})
			},		
			getHomeInformation(){				
				this.$api.get('/home/information',{userID:this.userID,organizeID:this.userOrganizeID}, 
					response => {
						if(response.code =='1'){
							let data = response.data;
							this.organizeProducts = data.organizeProducts
							this.productsClassify = data.productsClassify
							this.bannerImageList = data.bannerImageList
							this.mallPageModules = data.mallPageModules
							this.$store.commit('updateAllNum',response.data.count)
						}
						this.skeletonShow = false
					}
				)
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.current = index;
				// console.log('current',this.current)
				// this.titleNViewBackground = this.carouselList[index].background;
			},
			formatMoney(num){
				return num.toString().replace(/\d+/, function (n) { // 先提取整数部分
					return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) { // 对整数部分添加分隔符
						return $1 + ",";
					});
				});
			},
			//分类导航跳转
			navToListPage(nav){
				let self = this;
				uni.setStorage({
					key: 'commodity_id',
					data: nav.id,
					success: function () {
						self.$api.navToListPage({type:'商品分类',value:nav.classifyName,id:nav.id});
					}
				})
			},
			navToDetailPage(id) {//跳转商品详情页
				this.modallayer = true;
				this.$api.navigateTo(`/pages/goods/product?id=${id}`)
			},
			handleContact(e){
				console.log(e.detail.path)
				console.log(e.detail.query)
			},
			showTost(){
				this.$util.msg("正在开发中，敬请期待~",2000);
			},
			navto(url){
				this.$api.navigateTo(url)
			},
			telPhoneTo(){
				let self = this;
				this.$api.get('/home/afterSale',{organizeID:this.userOrganizeID}, 
					response => {
						console.log(response.data.contactNumber)
						uni.makePhoneCall({
							phoneNumber:response.data.contactNumber //仅为示例
						});
					}
				)	
			}
		},
		onPageScroll(e){
			// console.log(e.scrollTop);//实时获取到滚动的值
			if(e.scrollTop>50){
				this.inputActive = 'fixed'
			}else{
				this.inputActive = 'float'
			}	
		},
		onPullDownRefresh() {//下拉刷新
			this.getHomeInformation()
			uni.stopPullDownRefresh()
		},
		onShareAppMessage(res){//分享转发
			if (res.from === 'button') {
		      // 来自页面内转发按钮
		      console.log(res.target)
		    }
			return {
			  title: '采美采购商城-生美/医美采购服务平台',
			  path: 'pages/tabBar/home/home',
			  imageUrl:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAWWkhAAXDP4-6m_c397.png'
			}
		},
		onShow(){
			this.modallayer = false;
			this.getCheekeyCode()
		}
	}
</script>

<style lang="scss">
	page,.home{
		width: 100%;
		height: auto;
	}			
	.container-home-float{
		padding-top: 0;
	}
	.container-home-fixed{
		padding-top: 100rpx;
	}
	.search-input-float{
		width: 100%;
		height:auto;
	}
	.search-input-fixed{
		width: 100%;
		height:auto;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		background: #FFFFFF;
	}
	.banner-section{
		width: 100%;
		height: 366rpx;
		position: relative;
	}	
	.banner{
		width: 100%;
		height: 366rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.swiper__dots-box{
		position: absolute;
		bottom: 10px;
		left: 0;
		right: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		.swiper__dots-item{
			width: 8rpx;
			height: 8rpx;
			border-radius: 100%;
			margin-left: 6px;
			background-color:rgba(255,255,255,.7);
		}
		.swiper__dots-long{
			width: 32rpx;
			height: 8rpx;
			border-radius: 4rpx;
			background-color: #ffff;
			transition: all 0.4s;
		}
	}
	/* 分类 */
	.cate-section {
		width: 702rpx;
		height: auto;
		padding: 48rpx 24rpx; 
		background: #fff;
		.tabbar{
			margin-bottom: 26rpx;
		}
		.cate-item {
			width: 118rpx;
			margin-right:28rpx;
			margin-bottom:28rpx;
			display: flex;
			float: left;
			flex-direction: column;
			align-items: center;
			font-size: $font-size-sb;
			color: $text-color;
			line-height: 36rpx;
			&:last-child{
				margin-right: 0;
			}
			&:nth-child(5n){
				margin-right: 0;
			}
			image {
				width: 90rpx;
				height: 90rpx;
				margin-bottom: 8rpx;
			}	
		}
		.cate-item-info {
			width: 160rpx;
			margin-right:20.666rpx;
			display: flex;
			float: left;
			flex-direction: column;
			align-items: center;
			font-size: $font-size-sb;
			color: $text-color;
			line-height: 36rpx;
			&:last-child{
				margin-right: 0;
			}
			image {
				width: 160rpx;
				height: 90rpx;
				margin-bottom: 16rpx;
			}	
			button.contact-btn{
				width: 160rpx;
				height: 90rpx;
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-sizing: border-box;
				text-align: center;
				text-decoration: none;
				border-radius: 0;
				-webkit-tap-highlight-color: transparent;
				overflow: hidden;
				background-color:#FFFFFF;
				margin-bottom: 16rpx;
				image{
					width: 160rpx;
					height: 90rpx;
					margin-bottom: 0;
				}
			}
		}
	}
	/* 活动 */
	.hot-section{
		padding:0 24rpx 48rpx 24rpx; 
		background: #FFFFFF;
		.ht-l{
			width: 339rpx;
			height: 188rpx;
			float: left;
			image{
				width: 339rpx;
				height: 188rpx;
				border-radius:10rpx;
			}
		}
		.ht-r{
			width: 339rpx;
			height: 188rpx;
			float: right;
			image{
				width: 339rpx;
				height: 188rpx;
				border-radius:10rpx;
			}
		}
	}
	.hotgoods-section{
		padding: 4rpx 0 24rpx 24rpx;
		background: #fff;
		.s-header{
			display:flex;
			align-items:center;
			height: 40rpx;
			line-height: 40rpx;
			.tip{
				flex: 4;
				font-size: 30rpx;
				color: $text-color;
				font-weight: bolder;
			}
			.tit{
				flex: 4.4;
				font-size: $font-size-base;
				color: $text-color;
				text-align: right;
			}
			.icon-xiayibu{
				flex: 0.6;
				color: $text-color;
				text-align: left;
				font-size: $font-size-sm;
			}
		}
	}	
	.hotgoods-swiper{
		width: 100%;
		height: auto;				
		overflow: hidden;
		scroll-view{
			padding: 26rpx 0;
			width: 100%;
		}
		.scoll-wrapper{
			display:flex;
			align-items: flex-start;
		}
		.floor-item{
			width: 210rpx;
			padding-right: 24rpx;
			font-size: $font-size-sm;
			color: $text-color;
			line-height: 36rpx;
			border-radius: 10rpx;
			image{
				width: 210rpx;
				height: 217rpx;
				border-radius: 10rpx;
			}
			.title{
				width: 210rpx;
				height: 72rpx;
				display: flex;
				flex-direction: column;
				.mclap{
					width: 100%;
					line-height: 36rpx;
					text-overflow:ellipsis;
					display: -webkit-box;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					font-size: 26rpx;
				}
			}
			.no-price{
				height: 36rpx;
				line-height: 36rpx;
				display: flex;
				margin-top: 8rpx;
				.p-no{
					font-size: $font-size-sm;
					color: #F8C499;
					margin-left: 10rpx;
				}
				image{
					width:30rpx;
					height: 36rpx;
				}
			}
			.price{
				color:#FF2A2A;
				line-height: 20rpx;
				margin-top: 18rpx;
				.sm{
					font-size: $font-size-sm;
				}
				.big{
					font-size: $font-size-base;
				}
			}
		}
	}
	.footer-section{
		width: 702rpx;
		padding: 0  24rpx 30rpx 24rpx;
		.s-header{
			display:flex;
			align-items:center;
			height: 40rpx;
			line-height: 40rpx;
			margin-bottom: 38rpx;
			.tip{
				flex: 1;
				font-size: 30rpx;
				color: $text-color;
				font-weight: bolder;
			}
		}
		.f-content{
			width: 100%;
			image{
				width: 100%;
				height: 350rpx;
			}
		}
		/*底部服务导航*/
		.f-tab-section {
			width: 100%;
			height: auto;
			padding: 38rpx 0; 
			background: #fff;
			/*底部服务导航*/
			.cate-item {
				width: 99rpx;
				margin-right: 102rpx;
				float: left;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: $font-size-sm;
				color: $text-color;
				&:last-child{
					margin-right: 0;
				}
				image {
					width: 75rpx;
					height: 75rpx;
					margin-bottom: 8rpx;
					border-radius: 50%;
				}
			}
		}	
		.f-text{
			.logo{
				width: 80rpx;
				height: 80rpx;
				float: left;
				margin: 0 6rpx;
			}
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-size-sm;
			color: $text-color;
			line-height: 80rpx;
			padding-top: 20rpx;
		}
	}
</style>