Skip to content

M
mallapp
Commit 0a9ebd79 authored by 吴春's avatar 吴春
Browse files
Options

11

parent 04381314
Show whitespace changes
Inline Side-by-side
Showing with 55 additions and 65 deletions
components/tradeActivity/tradeIndex.vue
View file @ 0a9ebd79
...@@ -11,17 +11,14 @@ ...@@ -11,17 +11,14 @@
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
<!-- 内容区 -->
<scroll-view class="tradeIndex-scroll" scroll-y @scrolltolower="loadMore" :lower-threshold="150"
refresher-enabled :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
<!-- 空状态 --> <!-- 空状态 -->
<view class="tradeIndex-empty" v-if="!loading && listData.length === 0"> <view class="tradeIndex-empty" v-if="!loading && listData.length === 0">
<image class="tradeIndex-empty-icon" <image class="tradeIndex-empty-icon"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/empty.png" mode="aspectFit" /> src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/empty.png" mode="aspectFit" />
<text class="tradeIndex-empty-text">暂无内容</text> <text class="tradeIndex-empty-text">暂无内容</text>
</view> </view>
<!-- 内容区 -->
<view v-if="listData.length > 0" class="tradeIndex-content">
<!-- 瀑布流 --> <!-- 瀑布流 -->
<view class="tradeIndex-waterfall" v-if="listData.length > 0"> <view class="tradeIndex-waterfall" v-if="listData.length > 0">
<view class="waterfall-left"> <view class="waterfall-left">
...@@ -71,19 +68,18 @@ ...@@ -71,19 +68,18 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 加载更多 -->
<view class="tradeIndex-loading" v-if="loading && !refreshing">
<view class="loading-dot"></view>
<text class="loading-text">加载中...</text>
</view> </view>
<!-- 加载更多按钮 -->
<view class="tradeIndex-loadmore" v-if="listData.length > 0 && !noMore" @click="loadMore">
<text v-if="loading">加载中...</text>
<text v-else>点击加载更多</text>
</view>
<!-- 没有更多了 -->
<view class="tradeIndex-nomore" v-if="!loading && noMore && listData.length > 0"> <view class="tradeIndex-nomore" v-if="!loading && noMore && listData.length > 0">
<view class="nomore-line"></view> <view class="nomore-line"></view>
<text class="nomore-text">没有更多了</text> <text class="nomore-text">没有更多了</text>
<view class="nomore-line"></view> <view class="nomore-line"></view>
</view> </view>
<view style="height: 30rpx;"></view>
</scroll-view>
</view> </view>
</template> </template>
...@@ -97,6 +93,7 @@ ...@@ -97,6 +93,7 @@
}, },
data() { data() {
return { return {
mainColor: '#ff4544',
tabs: [{ tabs: [{
name: '推荐', name: '推荐',
type: '0' type: '0'
...@@ -134,6 +131,9 @@ ...@@ -134,6 +131,9 @@
} }
}, },
mounted() { mounted() {
// if (this.$uiConfig && this.$uiConfig.mainColor) {
// this.mainColor = this.$uiConfig.mainColor;
// }
this.loadData(true); this.loadData(true);
}, },
methods: { methods: {
...@@ -188,7 +188,6 @@ ...@@ -188,7 +188,6 @@
this.loadData(false); this.loadData(false);
}, },
goDetail(item) { goDetail(item) {
console.log('[tradeIndex] 点击条目:', item);
let gotoUrl = ''; let gotoUrl = '';
//载体项目 //载体项目
if (item.DataType == 1) { if (item.DataType == 1) {
...@@ -216,13 +215,16 @@ ...@@ -216,13 +215,16 @@
<style lang="scss"> <style lang="scss">
.tradeIndex { .tradeIndex {
width: 100%; display: flex;
height: 100%; flex-direction: column;
overflow: hidden;
background-color: #f8f8f8; background-color: #f8f8f8;
} }
/* ========== Tab 栏 ========== */ /* ========== Tab 栏 ========== */
.tradeIndex-tabs { .tradeIndex-tabs {
flex-shrink: 0;
height: 100rpx;
background-color: #fff; background-color: #fff;
position: sticky; position: sticky;
top: 0; top: 0;
...@@ -271,9 +273,9 @@ ...@@ -271,9 +273,9 @@
background: linear-gradient(90deg, #ff6b6b, #ff4544); background: linear-gradient(90deg, #ff6b6b, #ff4544);
} }
/* ========== 滚动区域 ========== */ /* ========== 内容区域 ========== */
.tradeIndex-scroll { .tradeIndex-content {
height: calc(100vh - 120rpx); padding: 20rpx 24rpx 0;
} }
/* ========== 空状态 ========== */ /* ========== 空状态 ========== */
...@@ -281,14 +283,15 @@ ...@@ -281,14 +283,15 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 160rpx 0 100rpx; justify-content: center;
padding: 100rpx 0;
} }
.tradeIndex-empty-icon { .tradeIndex-empty-icon {
width: 200rpx; width: 120rpx;
height: 200rpx; height: 120rpx;
opacity: 0.35; opacity: 0.35;
margin-bottom: 32rpx; margin-bottom: 16rpx;
} }
.tradeIndex-empty-text { .tradeIndex-empty-text {
...@@ -301,7 +304,6 @@ ...@@ -301,7 +304,6 @@
.tradeIndex-waterfall { .tradeIndex-waterfall {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
padding: 20rpx 24rpx 0;
} }
.waterfall-left { .waterfall-left {
...@@ -395,41 +397,29 @@ ...@@ -395,41 +397,29 @@
letter-spacing: 0.5rpx; letter-spacing: 0.5rpx;
} }
/* ========== 加载更多 ========== */ /* ========== 加载更多按钮 ========== */
.tradeIndex-loading { .tradeIndex-loadmore {
display: flex; background-color: #fff;
align-items: center; border-radius: 20rpx;
justify-content: center; overflow: hidden;
padding: 32rpx 0; margin: 30rpx 24rpx 40rpx;
} box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.07);
transition: box-shadow 0.25s ease, transform 0.25s ease;
.loading-dot {
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background-color: #ff4544;
margin-right: 12rpx;
animation: loadingPulse 1.2s ease-in-out infinite;
}
.loading-text {
font-size: 26rpx;
color: #b0b0b0;
letter-spacing: 1rpx;
} }
@keyframes loadingPulse { .tradeIndex-loadmore:active {
transform: scale(0.98);
0%, box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
100% {
opacity: 0.4;
transform: scale(0.8);
} }
50% { .tradeIndex-loadmore text {
opacity: 1; display: flex;
transform: scale(1.2); align-items: center;
} justify-content: center;
height: 80rpx;
font-size: 28rpx;
font-weight: 500;
letter-spacing: 2rpx;
} }
.tradeIndex-nomore { .tradeIndex-nomore {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment