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

<template>
	<view class="container home clearfix" :style="{paddingTop:CustomBar+'px'}">	
		<cm-custom :navbar-data='nvabarData'></cm-custom>
		<!-- 头部轮播 -->
		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="5"></tui-skeleton>
		<view class="container-home tui-skeleton">
			<view class="swiper-banner-box" >
				<swiper class="tui-banner-swiper tui-banner tui-skeleton-fillet" :autoplay="true" :interval="5000" :duration="500"  @change="swiperChange" :circular="true">
					<swiper-item v-for="(item,index) in bannerImageList" :key="index">
						<image :src="item" class="tui-slide-image" mode="scaleToFill"/>
					</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>	  
				</view>
			</view>
			<view class="cate-section clearfix">
				<!-- 自定义分类导航栏 -->
				<view class="tabbar clearfix">
					<view class="cate-item" v-for="(nav,idx) in productsClassifyList" :key="idx" @click.stop="navToListPage(nav)">
						<image class="tui-skeleton-circular" :src="nav.classifyImage"></image>
						<text class="tui-skeleton-fillet">{{nav.classifyName}}</text>
					</view>
				</view>
				<!-- 优选分类 -->
				<view class="tabbar bot clearfix">
					<view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'1',value:firstModulesName})">
						<image class="tui-skeleton-circular" :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-circular" :src="secondModulesImage"></image>
						<text class="tui-skeleton-fillet">{{secondModulesName}}</text>
					</view>
					<view class="cate-item-info" @click="showTost">
						<image class="tui-skeleton-circular" :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-circular" :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:thirdModulesName})">
					<text class="tip tui-skeleton-fillet">{{thirdModulesName}}</text>
					<text class="tit tui-skeleton-fillet">更多</text>
					<text class="iconfont icon-xiayibu"></text>
				</view>
				<view class="hotgoods-swiper">
					<view class="scoll-wrapper clearfix">
						<view class="floor-item" v-for="(item, index) in organizeProducts" :key="index" @click.stop="navToDetailPage(item.productID)">
							<image class="tui-skeleton-fillet" :src="item.mainImage" mode="aspectFill"></image>
							<view class="floor-item-content">
								<view class="title tui-skeleton-rect">
									<text class="mclap">{{item.name}}</text>
								</view>
								<view class="" v-if="hasLogin">
									<view v-if="userIdentity == 4">
										<view class="title-none" v-show="item.price1TextFlag == '1'">
											<text class="p big">未公开价格</text>
										</view>
										<view class="title-none" v-show="item.price1TextFlag == '2'">
											<text class="p big">价格仅会员可见</text>
											<text class="p btn" @click.stop="this.$api.navigateTo(`/pages/login/apply?clubStatus=${clubStatus}`)">去升级</text>
										</view>
										<view class="price tui-skeleton-rect" v-show="item.price1TextFlag == '0'">
											<text class="p sm">￥</text>
											<text class="p big">{{item.retailPrice!=null ? item.retailPrice.toFixed(2):''}}</text>
										</view>
									</view>
									<view v-else>
										<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!=null ? item.retailPrice.toFixed(2):''}}</text>
										</view>
									</view>
								</view>
								<view v-else class="no-price">
									<text class="p-no">价格:</text>
									<view class="p-stars">
										<uni-stars :stars="parseInt(item.price1Grade)"></uni-stars>
									</view>
								</view>	
							</view>
						</view>
					</view>
				</view>	
			</view>
			<!-- 底部 -->
			<view class="footer-section ">
				<view class="s-header member  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="scaleToFill"></image>
				</view>
				<view class="f-tab-section">
					<!-- 优选分类 -->
					<view class="tabbar clearfix">
						<view class="cate-item" @click="showTost">
							<image class="tui-skeleton-circular" :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-circular" :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-circular" :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-circular" :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 '@/common/config/authorize.js'
	import modalLayer from "@/components/modal-layer"
	import cmCustom from '@/components/cm-module/home/cm-custom.vue'
	import uniStars from '@/components/uni-stars/uni-stars.vue'
	import { userInfoLogin, queryHomeInfo } from "@/api/use.js"
	import { queryPreferred } from "@/api/product.js"
	import { mapState,mapMutations} from 'vuex';
	export default {
		components:{
			tuiSkeleton,
			modalLayer,
			cmCustom,
			uniStars,
		},
		data() {
			return {
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				},
				nvabarData: {//顶部自定义导航
					showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
					showSearch: 0,
					title: '采美采购商城', // 导航栏 中间的标题
					haveBack:false,
					textLeft:this.$store.state.isIphone,
					textColor:'#FFFFFF'
				},
				CustomBar:this.CustomBar,// 顶部导航栏高度
				userID:'',
				clubStatus:'',
				current:0,
				mode:'round',
				modallayer:false,
				isLogin:false,
				bannerImageList:[],
				skeletonShow: true,
				userIdentity:'',
				organizeProducts:[],//常用商品
				productsClassifyList:[
					{classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
					{classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
					{classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
					{classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
					{classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'}
				],//分类导航
				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://admin-b.caimei365.com/userfiles/1/images/photo/2020/05/%E4%BC%9A%E5%91%98%E4%B8%AD%E5%BF%83%403x.png'},
					{text:'在线客服',icon:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/05/%E5%9C%A8%E7%BA%BF%E5%AE%A2%E6%9C%8D%403x.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.getHomeInformation()
			this.getOrganizeProducts()
		},
		computed: {
			...mapState(['hasLogin','userInfo','isWxAuthorize'])
		},
		methods: {
			...mapMutations(['login','logout']),
			getWxAuthorize(){
				authorize.getCode('weixin').then(wechatcode =>{// 根据微信的code获取用户登录状态:1已登录过 -1未登录过
					authorize.getUserInfo('weixin').then(wxResponse =>{
						userInfoLogin({code:wechatcode,encryptedData:wxResponse.encryptedData,iv:wxResponse.iv}).then(response =>{
							this.isLogin = true;
							this.userID = response.data.userID;						
							this.userIdentity = response.data.userIdentity;						
							this.clubStatus = response.data.clubStatus;						
							this.$store.commit('updateStatus',response.data)
							this.login(response.data);
							uni.setStorageSync('token',response.data.token)
							uni.removeStorageSync('sessionid')
							uni.setStorageSync('sessionid','JSESSIONID='+response.data.sessionId)
							if(response.data.userIdentity ==1){
								this.$api.navigateTo('/seller/pages/index/index')
							}
						}).catch(error =>{
							this.isLogin = false;
							this.logout()
							uni.removeStorageSync('sessionid')
							uni.setStorageSync('sessionid','JSESSIONID='+error.data)
							this.$store.commit('updateStatus',error.data)
						})
					})
				})
			},		
			getHomeInformation(){		
				queryHomeInfo({}).then(res =>{
					let data = res.data;
					this.bannerImageList = data.bannerImageList
					this.mallPageModules = data.mallPageModules
					this.firstModulesName= data.firstModulesName
					this.secondModulesName= data.secondModulesName
					this.firstModulesImage= data.firstModulesImage
					this.secondModulesImage= data.secondModulesImage
					this.thirdModulesName= data.thirdModulesName
					this.productsClassifyList = data.productsClassifyList
					this.skeletonShow = false;
					this.$store.commit('updateAllNum',data.shoppingCartCount)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			getOrganizeProducts(){//获取模块三商品
				queryPreferred({userId:this.userID,preferredFlag:100,pageNum:1,pageSize:6}).then(res =>{
					this.organizeProducts = res.data.results
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.current = index;
			},
			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:'0',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)
			},
			swiperNavtopage(link){
				this.$api.navigateTo(`/h5/pages/activity/activity?productID=4204&path=${link}`)
			},
			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){//实时获取到滚动的值
			if(e.scrollTop>50){
				this.inputActive = 'fixed'
			}else{
				this.inputActive = 'float'
			}	
		},
		onPullDownRefresh() {//下拉刷新
			this.getHomeInformation()
			this.getOrganizeProducts()
			uni.stopPullDownRefresh()
		},
		onShareAppMessage(res){//分享转发
			if (res.from === 'button') {
		      // 来自页面内转发按钮
		    }
			return {
			  title: '采美采购商城-生美/医美采购服务平台',
			  path: 'pages/tabBar/home/home',
			  imageUrl:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAWWkhAAXDP4-6m_c397.png'
			}
		},
		onShow(){
			this.modallayer = false;
			authorize.getSetting().then(res =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
				if(res == 1){
					
					this.getWxAuthorize()
				}
			})			
		}
	}
</script>

<style lang="scss">
	page,.home{
		width: 100%;
		height: auto;
	}	
	.container-home{
		background: #FFFFFF;
	}
	.swiper-banner-box{
		width: 100%;
		height: 340rpx;
		padding-top:100rpx;
		background:#FFFFFF url(https://admin-b.caimei365.com/userfiles/1/images/photo/2020/05/%E8%83%8C%E6%99%AF2%402x.png)no-repeat;
		position: relative;
		background-size: cover;
	}	
	.tui-banner-swiper {
		width: 700rpx;
		margin: 0 auto;
		height: 340rpx;
		border-radius: 24rpx;
		overflow: hidden;
		transform: translateY(0);
		box-shadow:0px 3px 6px rgba(225,86,22,0.08);
		margin-top: 10rpx;
		.banner-item{
			border-radius: 24rpx;
		}
		.tui-slide-image {
			width: 100%;
			height: 340rpx;
			display: block;
		}
	}
	.swiper__dots-box{
		position: absolute;
		bottom: 24rpx;
		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;
			&.bot{
				padding: 16rpx 24rpx;
				border-radius: 20rpx;
				box-shadow:0px 3px 6px rgba(225,86,22,0.07);
				border: 1px solid #F9F9F9;
			}
		}
		.cate-item {
			width: 118rpx;
			margin-right: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;
				border-radius: 32rpx;
			}	
		}
		.cate-item-info {
			width: 118rpx;
			margin-right:59.5rpx;
			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: 90rpx;
				height: 90rpx;
				margin-bottom: 16rpx;
				border-radius: 32rpx;
			}	
			button.contact-btn{
				width: 118rpx;
				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: 90rpx;
					height: 90rpx;
					margin-bottom: 0;
					border-radius: 32rpx;
				}
			}
		}
	}
	.hotgoods-section{
		background: #FFFFFF;
		.s-header{
			display:flex;
			align-items:center;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 20rpx 20rpx 0 0;
			.tip{
				flex: 4;
				font-size: 30rpx;
				color: $text-color;
				font-weight: bolder;
				padding-left: 24rpx;
			}
			.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;
		padding-top: 24rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		// box-shadow:0px 3px 6px rgba(225,86,22,0.07);
		.scoll-wrapper{
			width: 702rpx;
			height: auto;
			padding:24rpx 24rpx 0 24rpx;
			background: #F7F7F7;
			border-radius: 20rpx;
			.floor-item{
				width: 341rpx;
				margin-right: 20rpx;
				font-size: $font-size-24;
				color: $text-color;
				background: #FFFFFF;
				line-height: 36rpx;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				float: left;
				&:nth-child(2n){
					margin-right: 0;
				}
				image{
					width: 341rpx;
					height: 341rpx;
					border-radius: 20rpx 20rpx 0 0;
					display: block;
					margin-bottom: 20rpx;
				}
				.floor-item-content{
					width: 311rpx;
					padding: 0 15rpx;
				}
				.title-none{
					font-size: $font-size-26;
					color: #FF2A2A;
					line-height: 80rpx;
					.btn{
						display: inline-block;
						float: right;
						width: 112rpx;
						height: 44rpx;
						background: $btn-confirm;
						line-height: 44rpx;
						font-size: $font-size-24;
						color: #FFFFFF;
						text-align: center;
						border-radius: 22rpx;
						margin-top: 17rpx;
					}
				}
				.title{
					width: 100%;
					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: 76rpx;
					line-height: 76rpx;
					display: flex;
					.p-no{
						font-size: $font-size-24;
						color: $color-system;
						margin-right: 5rpx;
					}
					.p-stars{
						margin-top: 3rpx;
					}
				}
				.price{
					color:#FF2A2A;
					line-height: 80rpx;
					.sm{
						font-size: $font-size-24;
					}
					.big{
						font-size: $font-size-28;
					}
				}
			}
		}
	}
	.footer-section{
		width: 702rpx;
		padding: 0  24rpx 0 24rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.s-header{
			display:flex;
			align-items:center;
			height: 80rpx;
			line-height: 80rpx;
			.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>