|
@@ -1,5 +1,6 @@
|
|
|
<template>
|
|
|
- <view class="container home clearfix">
|
|
|
+ <view class="home tui-skeleton clearfix">
|
|
|
+ <tui-skeleton v-if="skeletonShow" :isLoading ="true" :loadingType="2"></tui-skeleton>
|
|
|
<!-- 首页自定义导航栏 -->
|
|
|
<view class='navbar-wrap' :style="{height:(CustomBar+55)+'px',paddingTop:StatusBar+'px'}" :class="inputActive">
|
|
|
<view class="navbar-text"
|
|
@@ -16,29 +17,41 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 主页内容 -->
|
|
|
- <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="2"></tui-skeleton>
|
|
|
- <view class="container-home tui-skeleton" :style="{paddingTop:CustomBar+'px'}">
|
|
|
+ <view class="container-home " :style="{paddingTop:CustomBar+'px'}">
|
|
|
<!-- 轮播 -->
|
|
|
<banner :list="bannerImageList"></banner>
|
|
|
</view>
|
|
|
<!-- 商品列表 -->
|
|
|
- <view class="container-section tui-skeleton clearfix">
|
|
|
- <view class="product-list" v-for="(pro,index) in productList" :key="index" @click.stop="Details(pro)">
|
|
|
- <view class="product-list-image">
|
|
|
- <image class="product-image" :src="pro.mainImage" mode=""></image>
|
|
|
- <!-- 推荐 -->
|
|
|
- <image class="product-icon" :src="StaticUrl+'recommend.png'" mode="" v-if="pro.recommend === '1'"></image>
|
|
|
+ <view class="container-section">
|
|
|
+ <view class="clearfix" v-for="(floor,index1) in productFloor" :key="index1">
|
|
|
+ <!-- 楼层标题区域 -->
|
|
|
+ <view class="tui-group-name">
|
|
|
+ <view class="tui-group-title ">
|
|
|
+ <view class="tui-group-l">{{floor.title}}</view>
|
|
|
+ <view class="tui-group-r" @click="NavToDetailPage(floor)" v-if="floor.productList.length>=6">
|
|
|
+ <text>更多</text> <tui-icon name="arrowright" :size="20" margin="0 0 0 -4rpx"></tui-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tui-sub__desc">{{floor.description}}</view>
|
|
|
</view>
|
|
|
- <view class="product-list-msg">
|
|
|
- <view class="product-msg-name">{{ pro.name }}</view>
|
|
|
- <view class="product-list-tag" v-if="pro.activeStatus == 1">
|
|
|
- <text class="tag tag-02">活动价</text>
|
|
|
+ <!-- 商品列表区域 -->
|
|
|
+ <view class="product-list" v-for="(pro,index2) in floor.productList" :key="index2" @click.stop="Details(pro)">
|
|
|
+ <view class="product-list-image">
|
|
|
+ <image class="product-image" :src="pro.mainImage" mode=""></image>
|
|
|
+ <!-- 推荐 -->
|
|
|
+ <image class="product-icon" :src="StaticUrl+'recommend.png'" mode="" v-if="pro.recommend === '1'"></image>
|
|
|
</view>
|
|
|
- <view class="product-list-pri">
|
|
|
- <view class="price">¥{{ pro.price | PriceFormat}}</view>
|
|
|
- <view class="carts" @click.stop="handAddCarts(pro)">
|
|
|
- <view class="carts-add">
|
|
|
- <text class="iconfont icon-gouwuche"></text>
|
|
|
+ <view class="product-list-msg">
|
|
|
+ <view class="product-msg-name">{{ pro.name }}</view>
|
|
|
+ <view class="product-list-tag" v-if="pro.activeStatus == 1">
|
|
|
+ <text class="tag tag-02">活动价</text>
|
|
|
+ </view>
|
|
|
+ <view class="product-list-pri">
|
|
|
+ <view class="price">¥{{ pro.price | PriceFormat}}</view>
|
|
|
+ <view class="carts" @click.stop="handAddCarts(pro)">
|
|
|
+ <view class="carts-add">
|
|
|
+ <text class="iconfont icon-gouwuche"></text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -85,7 +98,7 @@
|
|
|
modallayer:false,
|
|
|
skeletonShow: true,
|
|
|
userIdentity:'',
|
|
|
- productList:[],//商品列表
|
|
|
+ productFloor:[],//商品列表
|
|
|
bannerImageList:[],//轮播
|
|
|
pageNum:1,
|
|
|
pageSize:20,
|
|
@@ -111,31 +124,27 @@
|
|
|
...mapMutations(['login','logout']),
|
|
|
async GetWxAuthorize(){
|
|
|
const wechatCode = await authorize.getCode('weixin');// 根据微信的code获取用户登录状态:1已登录过 -1未登录过
|
|
|
- this.UserService.UserWechatAuthorLogin(
|
|
|
- {
|
|
|
- code:wechatCode,
|
|
|
- }
|
|
|
- )
|
|
|
- .then(response =>{
|
|
|
- const _data = JSON.parse(response.data);
|
|
|
- uni.setStorageSync('openId',_data.openId)
|
|
|
- this.userId = _data.userId;
|
|
|
- this.userIdentity = _data.userIdentity;
|
|
|
- this.$store.commit('updateStatus',_data)
|
|
|
- this.login(_data);
|
|
|
- this.GetHomeBnnner()
|
|
|
- this.GetHomeProductList()
|
|
|
- })
|
|
|
- .catch(error =>{
|
|
|
- const _data = JSON.parse(error.data);
|
|
|
- this.logout()
|
|
|
- this.$store.commit('updateStatus',_data)
|
|
|
- uni.setStorageSync('openId',_data.openId)
|
|
|
- this.GetHomeBnnner()
|
|
|
- this.GetHomeProductList()
|
|
|
- })
|
|
|
+ this.UserService.UserWechatAuthorLogin({ code:wechatCode } )
|
|
|
+ .then(response =>{
|
|
|
+ const _data = JSON.parse(response.data);
|
|
|
+ uni.setStorageSync('openId', _data.openId)
|
|
|
+ this.userId = _data.userId;
|
|
|
+ this.userIdentity = _data.userIdentity;
|
|
|
+ this.$store.commit('updateStatus',_data)
|
|
|
+ this.login(_data);
|
|
|
+ this.GetHomeBanner()
|
|
|
+ this.GetHomeProductList()
|
|
|
+ })
|
|
|
+ .catch(error =>{
|
|
|
+ const _data = JSON.parse(error.data);
|
|
|
+ this.logout()
|
|
|
+ this.$store.commit('updateStatus',_data)
|
|
|
+ uni.setStorageSync('openId',_data.openId)
|
|
|
+ this.GetHomeBanner()
|
|
|
+ this.GetHomeProductList()
|
|
|
+ })
|
|
|
},
|
|
|
- GetHomeBnnner(){//初始化首页数据
|
|
|
+ GetHomeBanner(){//初始化首页数据
|
|
|
this.CommonService.GetProductCarousel().then(response =>{
|
|
|
let data = response.data;
|
|
|
this.bannerImageList = data
|
|
@@ -145,38 +154,21 @@
|
|
|
})
|
|
|
},
|
|
|
GetHomeProductList(){//初始化首页商品数据
|
|
|
- this.ProductService.QueryProductList(
|
|
|
- {
|
|
|
- pageNum:1,
|
|
|
- pageSize:this.pageSize,
|
|
|
- }
|
|
|
- )
|
|
|
+ this.ProductService.QueryProductFloor()
|
|
|
.then(response =>{
|
|
|
- let data = response.data;
|
|
|
- this.productList = data.list
|
|
|
- this.hasNextPage = data.hasNextPage
|
|
|
+ this.productFloor = response.data;
|
|
|
this.GetCartNumber();
|
|
|
})
|
|
|
.catch(error =>{
|
|
|
this.$util.msg(error.msg,2000)
|
|
|
})
|
|
|
},
|
|
|
- GetOnReachBottomProductList(){//上滑加载更多
|
|
|
- this.pageNum+=1
|
|
|
- this.ProductService.QueryProductList(
|
|
|
- {
|
|
|
- pageNum:this.pageNum,
|
|
|
- pageSize:this.pageSize,
|
|
|
- }
|
|
|
+ NavToDetailPage(floor) {
|
|
|
+ console.log('跳转');
|
|
|
+ //跳转
|
|
|
+ this.$api.navigateTo(
|
|
|
+ `/pages/goods/good-floorMore?floorId=${floor.floorId}&title=${floor.title}`
|
|
|
)
|
|
|
- .then(response =>{
|
|
|
- let data = response.data;
|
|
|
- this.hasNextPage = data.hasNextPage
|
|
|
- this.productList = this.productList.concat(data.list)
|
|
|
- })
|
|
|
- .catch(error =>{
|
|
|
- this.$util.msg(error.msg,2000)
|
|
|
- })
|
|
|
},
|
|
|
Details(pro){
|
|
|
this.$api.navigateTo(`/pages/goods/product?productId=${pro.productId}`)
|
|
@@ -242,16 +234,20 @@
|
|
|
this.isScrollTop = false
|
|
|
}
|
|
|
},
|
|
|
- onPullDownRefresh() {//下拉刷新
|
|
|
- // this.getHomeInformation()
|
|
|
- uni.stopPullDownRefresh()
|
|
|
- },
|
|
|
- onReachBottom() {
|
|
|
- console.log("用户把这个页面上拉100时触发我的")
|
|
|
- if(this.hasNextPage){
|
|
|
- this.GetOnReachBottomProductList()
|
|
|
- }
|
|
|
+ //下拉刷新
|
|
|
+ onPullDownRefresh() {
|
|
|
+ this.GetHomeBanner()
|
|
|
+ this.GetHomeProductList()
|
|
|
+ setTimeout(()=>{
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ }, 2000)
|
|
|
},
|
|
|
+ // onReachBottom() {
|
|
|
+ // console.log("用户把这个页面上拉100时触发我的")
|
|
|
+ // if(this.hasNextPage){
|
|
|
+ // this.GetOnReachBottomProductList()
|
|
|
+ // }
|
|
|
+ // },
|
|
|
onShareAppMessage(res){//分享转发
|
|
|
if (res.from === 'button') {
|
|
|
// 来自页面内转发按钮
|
|
@@ -263,7 +259,7 @@
|
|
|
}
|
|
|
},
|
|
|
onShow(){
|
|
|
-
|
|
|
+ this.GetCartNumber()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -383,7 +379,7 @@
|
|
|
margin-bottom: 24rpx;
|
|
|
background-color: #FFFFFF;
|
|
|
border-radius: 16rpx;
|
|
|
- &:nth-child(2n){
|
|
|
+ &:nth-child(2n+1){
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
.product-list-image{
|
|
@@ -492,4 +488,38 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .tui-group-name {
|
|
|
+ width: 100%;
|
|
|
+ height: 92rpx;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ }
|
|
|
+ .tui-group-title {
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ .tui-group-l {
|
|
|
+ float: left;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 49rpx;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .tui-group-r {
|
|
|
+ float: right;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ text-align: right;
|
|
|
+ line-height: 49rpx;
|
|
|
+ color: #999999;
|
|
|
+ .icon-xiayibu {
|
|
|
+ font-size: $font-size-30;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-sub__desc {
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ color: rgba(153, 153, 153, 0.9);
|
|
|
+ font-size: $font-size-26;
|
|
|
+ }
|
|
|
</style>
|