xiaochengxu/components/MainPage/MainPage.vue

<template>
	<view class="main">
		<view class="back" />
		
		<view class="top">
			<image :src="mainPageData.toppic.picurl" mode="widthFix" class="top_image" />
			<view style="width: 750rpx;height: 40rpx;position: relative;bottom: 0;" />
			<view class="top_action_panel">
				<view class="top_action_item_panal" style="left: 24rpx;" @click="onTouchTopPanel(1)">
					<image src="../../static/images/mainview/hezuo.png" style="width: 79rpx;height: 67rpx;position: absolute;right: 131rpx;top: 37rpx;"/>
					<!--title-->
					<u-text text="成为大富翁"
						:bold="true"
						size="28rpx"
						color="#333333"
						lineHeight="40rpx"
						margin="123rpx 0 23rpx 0"
					/>
				</view>
				<view class="top_action_item_panal" style="right: 24rpx;" @click="onTouchTopPanel(2)">
					<image src="../../static/images/mainview/ditu.png" style="width: 79rpx;height: 67rpx;position: absolute;right: 131rpx;top: 37rpx;"/>
					<!--title-->
					<u-text text="大富翁区域"
						:bold="true"
						size="28rpx"
						color="#333333"
						lineHeight="40rpx"
						margin="123rpx 0 23rpx 0"
					/>
				</view>
			</view>
		</view>
		<!--间隙-->
		<u-gap height="35rpx"/>
		<!--品牌项目-->
		<view class="project">
			<!--title-->
			<u-text text="品牌项目" :bold="true"
				color="#333333"
				size="36rpx"
			/>
			<u-gap height="21rpx"/>
			<!--品牌项目搞定了-->
			<view v-if="mainPageData.brandpro.length == 0" style="width: 750rpx;height: 180rpx;background-color: #FFFFFF;position: relative;border-radius: 20rpx;">
					<!--如果没有从服务器获取到数据的时候-->
			</view>
			<!--轮播图-->
			<view style="margin-bottom: 20rpx;" v-else>
				<u-swiper :list="mainPageData.brandpro"
					keyName="picurl"
					:showTitle="false"
					:autoplay="true"
					circular
					imgMode="widthFix"
					@change="e => project_indicator_current = e.current"
					@click="onClickSwiper"
				>
				</u-swiper>
				<u-gap height="15rpx"/>
				<view
					class="indicator"
				>
					<view
						class="indicator__dot"
						v-for="(item,index) in mainPageData.brandpro" :key="index"
						:class="[index === project_indicator_current && 'indicator__dot__active']"
					/>
				</view>
			</view>
		</view>
		<u-gap height="40rpx"/>
		<!-- 英雄榜-->
		<HeroList/>
		<u-gap height="45rpx"/>
		<BusinessDynamics/>
		<u-gap height="30rpx"/>
		<CommonQuestion />
		<u-gap height="75rpx"/>
	</view>
</template>

<script>
	import HeroList from "@/components/HeroList/HeroList.vue"
	import CommonQuestion from "@/components/CommonQuestion/CommonQuestion.vue"
	import BusinessDynamics from "@/components/BusinessDynamics/BusinessDynamics.vue"
	var Define			= getApp().globalData.Define;
	var mainPageData	=  getApp().globalData.mainPageData;
	export default {
		name:"MainPage",
		mixins: [uni.$u.mixin],
		///注册组件
		components:{
			HeroList,
			BusinessDynamics,
			CommonQuestion
		},
		data() {
			return {
				mainPageData,
				///品牌项目当前轮播的indicator的索引
				project_indicator_current : 0,
			};
		},
		methods:{
			onTouchTopPanel(id){
				var Player	= getApp().globalData.Player;
				var token	= Player.user_token;
				if(!token || token == ''){
					//需要先登录
					uni.$u.toast('请先登录');
					uni.navigateTo({
						url:"/pages/WxLogin/WxLogin",
					})
				}else{
					if(id==1){
						uni.navigateTo({
							url:"/pages/CooperationApply/CooperationApply",
						})	
					}else{
						uni.navigateTo({
							url:'/pages/PartnerArea/PartnerArea'
						})
					}
				}
			},
			/**
			 * @param {Object} index 点击轮播图得回调函数，index从0开始
			 */
			onClickSwiper(index){
				
				var data	= this.mainPageData.brandpro[index];
				var sortid	= data.sortid;
				console.log("点击了第"+sortid+"张轮播图！");
				if(sortid == 1){
					getApp().globalData.showingSkipData	= data;
					uni.navigateTo({
						url:'/pages/SkipView/SkipView'
					})
					return;
				}
				
				var Player	= getApp().globalData.Player;
				var token	= Player.user_token;
				if(!token || token == ''){
					//需要先登录
					uni.$u.toast('请先登录');
					uni.navigateTo({
						url:"/pages/WxLogin/WxLogin",
					})
					return;
				}
				if(sortid == 2){
					//加入我们，跳转到成为大富翁界面
					uni.navigateTo({
						url:'/pages/CooperationApply/CooperationApply'
					})
					return;
				}
				if(sortid == 3){
					//跳转到录单界面
					this.$fire.fire(Define.FireKeys.ChangeMainBottomIndex,1);
				}
			},			
		}
	}
</script>

<style  lang="scss" scoped>
	.top{
		width: 750rpx;
		height: auto;
		position: relative;
		//background-color: #39B54A;
		&_image{
			width: 750rpx;
			height: auto;
			position: relative;
			top: 0rpx;
		}
		&_action_panel{
			@include flex(row);
			width: 750rpx;
			height: 186rpx;
			//background-color: #0081FF;
			position: absolute;
			bottom: 0rpx;
			display: flex;
			flex-direction: row;
		}
		&_action_item_panal{
			width: 341rpx;
			height: 186rpx;
			background-color: #FFFFFF;
			position: absolute;
			box-shadow: 0rpx 3rpx 5rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			//justify-content: center;
			align-items: center;
		}
	}
	///品牌项目
	.project{
		height: 360rpx;
		position: relative;
		margin-left: 24rpx;
		margin-right: 24rpx;
		//background-color: #2979FF;
	}
	///轮播的自定义indecator
	.indicator{
		@include flex(row);
		justify-content: center;
		&__dot {
			height: 12rpx;
			width: 12rpx;
			border-radius: 100rpx;
			background-color: #E2E2E2;
			margin: 0 16rpx;
			transition: background-color 0.3s;
			
			&__active{
				background-color: #D49B4B;
				width: 17rpx;
				height: 10rpx;
				border-radius: 50rpx;
			}
		}
	}
</style>