|
|
@@ -1,15 +1,29 @@
|
|
|
<template>
|
|
|
- <view class="container home clearfix" :style="{paddingTop:CustomBar+'px'}">
|
|
|
- <customer ref="customer" :navbar-data='nvabarData'></customer>
|
|
|
+ <view class="container home clearfix">
|
|
|
+ <!-- 首页自定义导航栏 -->
|
|
|
+ <view class='navbar-wrap' :style="{height:(CustomBar+55)+'px',paddingTop:StatusBar+'px'}" :class="inputActive">
|
|
|
+ <view class="navbar-text"
|
|
|
+ :style="{color:navbarData.textColor ? navbarData.textColor:'',lineHeight:(CustomBar - StatusBar)+'px;',fontSize:fontSizeSetting+'px;',paddingLeft:navbarData.textLeft ? '' : 12+'px'}" :class="platformClass">
|
|
|
+ {{navbarData.title ? navbarData.title : " "}}
|
|
|
+ </view>
|
|
|
+ <view class="search-input">
|
|
|
+ <view class="gosearch-btn" @click="this.$api.navigateTo(clickPath)">
|
|
|
+ <view class="search-icon">
|
|
|
+ <text class="iconfont icon-iconfonticonfontsousuo1"></text>
|
|
|
+ </view>
|
|
|
+ <view class="search-text">{{hotSearchText}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<!-- 主页内容 -->
|
|
|
<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
|
|
|
- <view class="container-home tui-skeleton">
|
|
|
+ <view class="container-home tui-skeleton" :style="{paddingTop:CustomBar+'px'}">
|
|
|
<!-- 轮播 -->
|
|
|
<banner :list="bannerImageList" v-if="isNavRequest"></banner>
|
|
|
</view>
|
|
|
<!-- 楼层 -->
|
|
|
<view class="container-section tui-skeleton">
|
|
|
- <page-floor :list="pageList" :userIdentity="userIdentity" :pageType='1' v-if="isRequest"></page-floor>
|
|
|
+
|
|
|
</view>
|
|
|
<!-- 侧边 -->
|
|
|
<scroll-top :isScrollTop="isScrollTop" :bottom="50"></scroll-top>
|
|
|
@@ -19,20 +33,18 @@
|
|
|
<script>
|
|
|
import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
|
|
|
import authorize from '@/common/config/authorize.js'
|
|
|
- import customer from '@/components/cm-module/homeIndex/customer.vue'
|
|
|
+ import btSearch from '@/components/uni-search/bt-search.vue'
|
|
|
import banner from '@/components/cm-module/homeIndex/banner.vue'
|
|
|
- import pageFloor from '@/components/cm-module/homeIndex/pageFloor.vue'
|
|
|
import { mapState,mapMutations} from 'vuex';
|
|
|
export default {
|
|
|
components:{
|
|
|
tuiSkeleton,
|
|
|
- customer,
|
|
|
+ btSearch,
|
|
|
banner,
|
|
|
- pageFloor
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- nvabarData: {//顶部自定义导航
|
|
|
+ navbarData: {//顶部自定义导航
|
|
|
showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
|
|
|
showSearch: 0,
|
|
|
title: '呵呵商城', // 导航栏 中间的标题
|
|
|
@@ -40,17 +52,28 @@
|
|
|
textLeft:this.$store.state.isIphone,
|
|
|
textColor:'#FFFFFF'
|
|
|
},
|
|
|
+ inputActive:'bgnone',
|
|
|
+ clickPath:'/search/pages/search/search',
|
|
|
+ hotSearchText:'搜索商品',
|
|
|
CustomBar:this.CustomBar,// 顶部导航栏高度
|
|
|
+ StatusBar: this.StatusBar,
|
|
|
+ fontSizeSetting:this.fontSizeSetting,
|
|
|
+ screenWidth:this.screenWidth,
|
|
|
+ capsule:this.capsule,
|
|
|
+ platformClass:this.platformClass,
|
|
|
userID:0,
|
|
|
clubStatus:'',
|
|
|
current:0,
|
|
|
mode:'round',
|
|
|
modallayer:false,
|
|
|
isLogin:false,
|
|
|
- skeletonShow: true,
|
|
|
+ skeletonShow: false,
|
|
|
userIdentity:'',
|
|
|
flootData:[],//楼层
|
|
|
- bannerImageList:[],//轮播
|
|
|
+ bannerImageList:[
|
|
|
+ image:'',
|
|
|
+
|
|
|
+ ],//轮播
|
|
|
navBarsList:[],//导航分类
|
|
|
templateData:{},
|
|
|
pageList:[],//楼层
|
|
|
@@ -203,9 +226,9 @@
|
|
|
},
|
|
|
onPageScroll(e){//实时获取到滚动的值
|
|
|
if(e.scrollTop>50){
|
|
|
- this.inputActive = 'fixed'
|
|
|
+ this.inputActive = 'bgclass'
|
|
|
}else{
|
|
|
- this.inputActive = 'float'
|
|
|
+ this.inputActive = 'bgnone'
|
|
|
}
|
|
|
if(e.scrollTop>400){
|
|
|
this.isScrollTop = true
|
|
|
@@ -229,7 +252,7 @@
|
|
|
},
|
|
|
onShow(){
|
|
|
this.modallayer = false
|
|
|
- this.InitAuthorize()
|
|
|
+ // this.InitAuthorize()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -238,6 +261,103 @@
|
|
|
page{
|
|
|
background-color: #FFFFFF;
|
|
|
}
|
|
|
+ .navbar-wrap {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ top: 0;
|
|
|
+ z-index: 100000;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-image: linear-gradient(0deg, #f83c6c 0%, #fa55bf 100%);
|
|
|
+ background-size: cover;
|
|
|
+ border-bottom:none;
|
|
|
+ &.bgnone{
|
|
|
+ background: rgba(255,255,255,0);
|
|
|
+ }
|
|
|
+ &.bgclass{
|
|
|
+ background: #f83c6c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .navbar-text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .navbar-text.center{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .navbar-text.left{
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 45px;
|
|
|
+ }
|
|
|
+ .navbar-icon {
|
|
|
+ position: fixed;
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .navbar-icon .iconfont {
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 44rpx;
|
|
|
+ padding-right:40rpx;
|
|
|
+ margin-top: 1px;
|
|
|
+ }
|
|
|
+ .navbar-icon .icon-iconfonticonfontsousuo1 {
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .navbar-icon view {
|
|
|
+ height: 18px;
|
|
|
+ border-left: 0.5px solid rgba(0,0,0, 0.3);
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+ .navbar-loading {
|
|
|
+ background: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .search-input{
|
|
|
+ width: 100%;
|
|
|
+ height: 110rpx;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .gosearch-btn{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ background: #F0F0F0;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ color: #8A8A8A;
|
|
|
+ background: #FFFFFF;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 80rpx;
|
|
|
+ .search-icon{
|
|
|
+ width: 80rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ position:absolute ;
|
|
|
+ left: 0;
|
|
|
+ top: 2rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 70rpx;
|
|
|
+ .icon-iconfonticonfontsousuo1{
|
|
|
+ margin:0 6rpx;
|
|
|
+ font-size: $font-size-34;
|
|
|
+ color: #8A8A8A;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-text{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ line-height: 70rpx;
|
|
|
+ color: #8A8A8A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .container-home{
|
|
|
+ background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-index-bg.png)top center no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ min-height: 528rpx;
|
|
|
+ }
|
|
|
.container-section{
|
|
|
width: 100%;
|
|
|
height: auto;
|
