Skip to content

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

11

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