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

<template>
	<view class="container home clearfix" :style="{paddingBottom:isIphoneX?'140rpx':'98rpx',paddingTop:CustomBar+'px'}">	
		<cu-custom :navbar-data='nvabarData'  @navigateBack="hanldNavigateBack"></cu-custom>
		<!-- 头部轮播 -->
		<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" :style="{paddingTop:inputActive == 'fixed'?(CustomBar+2)+'px':''} ">
				<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-info" @click.stop="this.$api.navToListPage({type:'1',value:firstModulesName})">
						<image class="tui-skeleton-fillet" :src="firstModulesImage"></image>
						<text class="tui-skeleton-fillet">{{firstModulesName}}</text>
					</view>
					<view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'2',value:secondModulesName})">
						<image class="tui-skeleton-fillet" :src="secondModulesImage"></image>
						<text class="tui-skeleton-fillet">{{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 tui-skeleton-fillet" @click="this.$api.navToListPage({type:'3',value:thirdModulesName})">
					<text class="tip">{{thirdModulesName}}</text>
					<text class="tit">更多</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.productID)"
							>
								<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 class="" v-if="!hasLogin">
									<view class="title-none" v-if="item.price1TextFlag == '1'">
										<text class="p big">尚未公开价格</text>
									</view>
									<view class="price tui-skeleton-rect" v-else>
										<text class="p sm">￥</text>
										<text class="p big">{{item.retailPrice.toFixed(2)}}</text>
									</view>
								</view>
								<view v-else class="no-price">
									<text class="p-no">价格:</text>
									<uni-stars :stars="parseInt(item.price1Grade)"></uni-stars>
								</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>
		<!-- 底部tabbar -->
		<cu-tabbar :active-index ="0"></cu-tabbar>
	</view>
</template>

<script>
	import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
	import authorize from '@/common/config/authorize.js'
	import modalLayer from "@/components/modal-layer"
	import cuTabbar from '@/components/cu-tabbar.vue'
	import btSearch from '@/components/uni-search/bt-search.vue'
	import uniStars from '@/components/uni-stars/uni-stars.vue'
	import { queryHomeInfo } from "@/api/use.js"
	import { queryPreferred } from "@/api/product.js"
	import { mapMutations} from 'vuex';
	export default {
		components:{
			tuiSkeleton,
			modalLayer,
			btSearch,
			uniStars,
			cuTabbar
		},
		data() {
			return {
				nvabarData: {		//顶部自定义导航
					showCapsule: 0, // 是否显示左上角图标  1表示显示  0表示不显示,
					showSearch: 0,
					title: '首页',  // 导航栏 中间的标题
				},
				userID:'',
				inputActive:'float',
				hotSearchText:'你想要的这里都有',
				clickPath:'/pages/search/search',
				current:0,
				mode:'round',
				modallayer:false,
				bannerImageList:[],
				hotGoodsList:[],
				skeletonShow: true,
				isIphoneX:this.$store.state.isIphoneX,
				CustomBar:this.CustomBar,// 顶部导航栏高度
				organizeProducts:[],//常用商品
				firstModulesName:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAAZU0AACaPrfbB8I435.png', //优惠模块1
				secondModulesName:'', //优惠模块2
				firstModulesImage:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAAZU0AACaPrfbB8I435.png',//优惠模块icon1
				secondModulesImage:'',//优惠模块icon2
				thirdModulesName:'', //优惠模块3
				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: {
			...mapMutations(['hasLogin']),
			async initData(){
				this.skeletonShow = true;
				let hotGoodsList = await this.$util.json('hotGoodsList'); 
				this.hotGoodsList = hotGoodsList;
			},	
			getCheekeyCode(){
				this.getHomeInformation()
				this.getOrganizeProducts()
			},		
			getHomeInformation(){		
				queryHomeInfo({}).then(res =>{
					let data = res.data;
					this.bannerImageList = data.bannerImageList
					this.mallPageModules = data.mallPageModules
					this.$store.commit('updateAllNum',data.shoppingCartCount)
					this.firstModulesName= data.firstModulesName
					this.secondModulesName= data.secondModulesName
					this.firstModulesImage= data.firstModulesImage
					this.secondModulesImage= data.secondModulesImage
					this.thirdModulesName= data.thirdModulesName
					this.skeletonShow = false;
				})
			},
			getOrganizeProducts(){//获取模块三商品
				queryPreferred({userId:this.userID,preferredFlag:100,pageNum:1,pageSize:5}).then(res =>{
					this.organizeProducts = res.data.results
				})
			},
			//轮播图切换修改背景色
			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);
				// uni.navigateToMiniProgram({
				// 	appId: 'wx5a5cda32926f55ac',
				// 	path: '/pages/tabBar/home/home',
				// 	extraData: {
				// 		'data1': 'test'
				// 	},
				// 	envVersion: 'develop',
				// 	success(res) {
				// 		console.log(res)
				// 		// 打开成功
						
				// 	}
				// })
			},
			navto(url){
				this.$api.navigateTo(url)
			},
			telPhoneTo(){
				let self = this;
				this.$api.get('/home/afterSale',{}, 
					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.$api.getStorage().then((resolve) =>{
				this.userID = resolve.userID
				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:34rpx 24rpx 14rpx 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-26;
			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-26;
			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-28;
				color: $text-color;
				text-align: right;
			}
			.icon-xiayibu{
				flex: 0.6;
				color: $text-color;
				text-align: left;
				font-size: $font-size-24;
			}
		}
	}	
	.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-24;
			color: $text-color;
			line-height: 36rpx;
			border-radius: 10rpx;			
			image{
				width: 210rpx;
				height: 217rpx;
				border-radius: 10rpx;
			}
			.title-none{
				font-size: $font-size-26;
				color: #FF2A2A;
				line-height: 20rpx;
				margin-top: 18rpx;
			}
			.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-24;
					color: $color-system;
					margin-right: 5rpx;
				}
				image{
					width:30rpx;
					height: 36rpx;
				}
			}
			.price{
				color:#FF2A2A;
				line-height: 20rpx;
				margin-top: 18rpx;
				.sm{
					font-size: $font-size-24;
				}
				.big{
					font-size: $font-size-28;
				}
			}
		}
	}
	.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-24;
				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-24;
			color: $text-color;
			line-height: 80rpx;
			padding-top: 20rpx;
		}
	}
</style>