公司小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

231 lines
5.6 KiB

<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>