|
@@ -2,33 +2,20 @@
|
|
|
<!-- #ifdef H5 -->
|
|
|
<view>
|
|
|
<view class="bg-container"></view>
|
|
|
- <zj-page-layout
|
|
|
- :hasFooter="false"
|
|
|
- :isScroll="true"
|
|
|
- :refresherTriggered="refresherTriggered"
|
|
|
- @refresherrefresh="refresherrefresh"
|
|
|
- @scrolltolower="scrolltolower">
|
|
|
- <template slot="header">
|
|
|
+ <zj-page-layout :hasFooter="false" :isScroll="true" :refresherTriggered="refresherTriggered"
|
|
|
+ @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower">
|
|
|
+ <!-- <template slot="header">
|
|
|
<view class="header-container" :style="cuStyle">二手空调</view>
|
|
|
- </template>
|
|
|
+ </template> -->
|
|
|
|
|
|
<view class="all-container">
|
|
|
<view class="search-container">
|
|
|
- <u-search
|
|
|
- placeholder="输入商品名称搜索"
|
|
|
- :showAction="false"
|
|
|
- clearabled
|
|
|
- v-model="keyword">
|
|
|
+ <u-search placeholder="输入商品名称搜索" :showAction="false" clearabled v-model="keyword">
|
|
|
</u-search>
|
|
|
</view>
|
|
|
|
|
|
<view class="swiper-container card mt30">
|
|
|
- <u-swiper
|
|
|
- :list="bannerList"
|
|
|
- indicator
|
|
|
- indicatorMode="line"
|
|
|
- circular
|
|
|
- ></u-swiper>
|
|
|
+ <u-swiper :list="bannerList" indicator indicatorMode="line" circular></u-swiper>
|
|
|
</view>
|
|
|
|
|
|
<view class="category-container card mt30">
|
|
@@ -39,11 +26,7 @@
|
|
|
</view>
|
|
|
|
|
|
<view class="tab-container mt30">
|
|
|
- <u-tabs
|
|
|
- :list="tabList"
|
|
|
- @click="click"
|
|
|
- :scrollable="false"
|
|
|
- lineColor="#01C30B">
|
|
|
+ <u-tabs :list="tabList" @click="click" :scrollable="false" lineColor="#01C30B">
|
|
|
</u-tabs>
|
|
|
</view>
|
|
|
|
|
@@ -108,20 +91,31 @@
|
|
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
|
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
|
|
],
|
|
|
- categoryList: [1,2,3,4],
|
|
|
- tabList: [
|
|
|
- {name: '默认顺序', value: 1},
|
|
|
- {name: '在售商品', value: 2},
|
|
|
- {name: '离我最近', value: 3},
|
|
|
- {name: '人气最高', value: 4},
|
|
|
+ categoryList: [1, 2, 3, 4],
|
|
|
+ tabList: [{
|
|
|
+ name: '默认顺序',
|
|
|
+ value: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '在售商品',
|
|
|
+ value: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '离我最近',
|
|
|
+ value: 3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '人气最高',
|
|
|
+ value: 4
|
|
|
+ },
|
|
|
],
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
- computed:{
|
|
|
- cuStyle(){
|
|
|
- return `height:${this.CustomBar-this.StatusBar}px; padding-top:${this.StatusBar}px;`
|
|
|
- },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ cuStyle() {
|
|
|
+ return `height:${this.CustomBar-this.StatusBar}px; padding-top:${this.StatusBar}px;`
|
|
|
+ },
|
|
|
},
|
|
|
|
|
|
async onLoad() {
|
|
@@ -137,31 +131,31 @@
|
|
|
}).then(res => {
|
|
|
this.loadStatus = 0;
|
|
|
let list = res.data.records;
|
|
|
- if(list.length < 10){
|
|
|
- this.loadStatus = 2;
|
|
|
+ if (list.length < 10) {
|
|
|
+ this.loadStatus = 2;
|
|
|
}
|
|
|
this.dataList = this.dataList.concat(list);
|
|
|
}).catch(() => {
|
|
|
- this.loadStatus = 2;
|
|
|
- }).finally(res => {
|
|
|
- this.refresherTriggered = false;
|
|
|
- })
|
|
|
+ this.loadStatus = 2;
|
|
|
+ }).finally(res => {
|
|
|
+ this.refresherTriggered = false;
|
|
|
+ })
|
|
|
},
|
|
|
|
|
|
// 滚动到底部
|
|
|
scrolltolower(e) {
|
|
|
- if (this.loadStatus === 0) {
|
|
|
- this.pageNum++;
|
|
|
- this.getList();
|
|
|
- }
|
|
|
+ if (this.loadStatus === 0) {
|
|
|
+ this.pageNum++;
|
|
|
+ this.getList();
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
// 触发下拉刷新
|
|
|
refresherrefresh(e) {
|
|
|
- this.refresherTriggered = true;
|
|
|
- this.dataList = [];
|
|
|
- this.pageNum = 1;
|
|
|
- this.getList();
|
|
|
+ this.refresherTriggered = true;
|
|
|
+ this.dataList = [];
|
|
|
+ this.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
},
|
|
|
|
|
|
}
|
|
@@ -169,50 +163,58 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.all-container {
|
|
|
- padding: 0 30rpx 30rpx;
|
|
|
-}
|
|
|
-.header-container {
|
|
|
- font-size: 32rpx;
|
|
|
- color: #ffffff;
|
|
|
- height: 88rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-weight: 600;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.bg-container {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 750rpx;
|
|
|
- height: 750rpx;
|
|
|
- background: linear-gradient(to bottom, $theme-color, #f4f2f2);
|
|
|
-}
|
|
|
-.card {
|
|
|
- @include zj-card;
|
|
|
-}
|
|
|
-.swiper-container {
|
|
|
- border-radius: 20rpx;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-.category-container {
|
|
|
- display: flex;
|
|
|
- padding: 30rpx 0;
|
|
|
- .item {
|
|
|
- width: 25%;
|
|
|
+ .all-container {
|
|
|
+ padding: 0 30rpx 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-container {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ height: 88rpx;
|
|
|
display: flex;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- image {
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- }
|
|
|
- .name {
|
|
|
- font-size: 28rpx;
|
|
|
- margin-top: 16rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-container {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 750rpx;
|
|
|
+ background: linear-gradient(to bottom, $theme-color, #f4f2f2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .card {
|
|
|
+ @include zj-card;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-container {
|
|
|
+ border-radius: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-container {
|
|
|
+ display: flex;
|
|
|
+ padding: 30rpx 0;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ width: 25%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-</style>
|
|
|
+</style>
|