From 4636de7dcbd3bd4eba7597536b9bdebb1c33900c Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期一, 11 八月 2025 14:19:14 +0800
Subject: [PATCH] 收藏页面调整
---
pages/tabbar/user/my.vue | 127 ++++++++++++++++++++++---
pages.json | 63 ++++--------
pages/video/myCollect.vue | 41 ++++----
static/tabbar/vip.png | 0
pages/video/home-page.vue | 19 ++-
5 files changed, 165 insertions(+), 85 deletions(-)
diff --git a/pages.json b/pages.json
index 8ba3292..82346d6 100644
--- a/pages.json
+++ b/pages.json
@@ -424,27 +424,6 @@
}
},
// {
- // "path": "myCollect",
- // "style": {
- // "navigationBarTitleText": "鏀惰棌",
- // "enablePullDownRefresh": true,
- // //涓嬫媺鍒锋柊
- // "navigationStyle": "custom",
- // "app-plus": {
- // "scrollIndicator": "none"
- // },
- // "componentPlaceholder": {
- // "u-navbar": "view",
- // "u-tabs": "view",
- // "u-empty": "view",
- // "u-swipe-action": "view",
- // "u-image": "view",
- // "u-loading": "view",
- // "u-tag": "view"
- // }
- // }
- // },
- // {
// "path": "distribution/list",
// "style": {
// "navigationBarTitleText": "鎺ㄥ箍鍒嗕剑",
@@ -870,27 +849,27 @@
}
}
},
- {
- "path": "myCollect/myCollect",
- "style": {
- "navigationBarTitleText": "鎴戠殑鏀惰棌",
- "enablePullDownRefresh": true,
- //涓嬫媺鍒锋柊
- "componentPlaceholder": {
- "u-icon": "view",
- "u-button": "view",
- "u-form": "view",
- "u-form-item": "view",
- "u-input": "view",
- "u-popup": "view",
- "u-search": "view",
- "u-loading": "view",
- "u-navbar": "view",
- "u-image": "view",
- "u-loadmore": "view"
- }
- }
- },
+ // {
+ // "path": "myCollect/myCollect",
+ // "style": {
+ // "navigationBarTitleText": "鎴戠殑鏀惰棌",
+ // "enablePullDownRefresh": true,
+ // //涓嬫媺鍒锋柊
+ // "componentPlaceholder": {
+ // "u-icon": "view",
+ // "u-button": "view",
+ // "u-form": "view",
+ // "u-form-item": "view",
+ // "u-input": "view",
+ // "u-popup": "view",
+ // "u-search": "view",
+ // "u-loading": "view",
+ // "u-navbar": "view",
+ // "u-image": "view",
+ // "u-loadmore": "view"
+ // }
+ // }
+ // },
{
"path": "myAttention",
"style": {
diff --git a/pages/tabbar/user/my.vue b/pages/tabbar/user/my.vue
index 4ae3257..dc9f101 100644
--- a/pages/tabbar/user/my.vue
+++ b/pages/tabbar/user/my.vue
@@ -17,6 +17,24 @@
</view>
<u-icon style="display: flex;align-items: flex-start;" name="arrow-right"></u-icon>
</view>
+
+ <view class="member-gradient-bg">
+ <view class="member-content">
+ <view class="vip-icon">
+ <image src="/static/tabbar/vip.png" mode="widthFix"></image>
+ </view>
+ <view class="vip-info">
+ <p class="vip-level">缁挎弧绛愪細鍛�</p>
+ <p class="vip-validity">闀挎湡鏈夋晥</p>
+ </view>
+
+ <!-- 浼氬憳鏍囪瘑瑁呴グ -->
+ <view class="vip-badge">
+ <text class="badge-text">灏婁韩鐗规潈</text>
+ </view>
+ </view>
+
+ </view>
<!-- 绉垎锛屼紭鎯犲埜锛屽叧娉紝 -->
<div class="pointBox box">
<u-row text-align="center" gutter="16" class="point">
@@ -85,12 +103,12 @@
</view>
<view>鍏虫敞鍒楄〃</view>
</view>
- <view class="order-item" @click="navigateTo('/pages/mine/myCollect/myCollect')">
+<!-- <view class="order-item" @click="navigateTo('/pages/mine/myCollect/myCollect')">
<view>
<text class="iconfont"></text>
</view>
<view>鏀惰棌鍒楄〃</view>
- </view>
+ </view -->
<view class="order-item" @click="navigateTo('/pages/mine/activity/myActivity')">
<view>
<text class="iconfont"></text>
@@ -110,8 +128,9 @@
<view class="pointBox box" style="margin-top: 20rpx;">
<tool />
</view>
-
-
+ <!-- 鎾戣捣涓嬫柟 -->
+ <view style="height:64px;">
+ </view>
<custom-tabbar bgColor="#ffffff" selected="my"></custom-tabbar>
</view>
</template>
@@ -218,15 +237,86 @@
body {
overflow: auto;
}
+
+.member-gradient-bg {
+ width: 98%;
+ height: 250rpx;
+ margin: 1% 1%;
+ background: linear-gradient(135deg, #FF7A45 0%, #FF5252 100%);
+ border-radius: 24rpx;
+ box-shadow: 0 8rpx 30rpx rgba(255, 82, 82, 0.3);
+ transition: all 0.3s ease;
+
+ &:active {
+ transform: scale(0.98);
+ }
+}
+/* 鍐呭鍖哄煙 */
+.member-content {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ padding: 0 40rpx;
+ box-sizing: border-box;
+}
+/* 浼氬憳淇℃伅 */
+.vip-info {
+ flex: 1;
+ .vip-level {
+ font-size: 40rpx;
+ font-weight: bold;
+ color: #FFFFFF;
+ margin: 0;
+ line-height: 1;
+ text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+ }
+
+ .vip-validity {
+ font-size: 26rpx;
+ color: rgba(255, 255, 255, 0.9);
+ margin: 10rpx 0 0 0;
+ }
+}
+
+/* 浼氬憳鍥炬爣 */
+.vip-icon {
+ width: 100rpx;
+ height: 100rpx;
+ margin-right: 30rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(255, 255, 255, 0.2);
+ border-radius: 50%;
+}
+
+.vip-icon image {
+ width: 60rpx;
+ height: 60rpx;
+}
+/* 鐗规潈鏍囪瘑 */
+.vip-badge {
+ padding: 8rpx 20rpx;
+ background-color: rgba(255, 215, 0, 0.9);
+ border-radius: 30rpx;
+ box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.1);
+}
+
+.badge-text {
+ font-size: 24rpx;
+ color: #E63946;
+ font-weight: 600;
+}
.money {
overflow: hidden;
-
text-overflow: ellipsis;
white-space: nowrap;
}
.user {
+ background: #e7e7e7;
.header {
max-width: 100%;
padding: calc(50rpx + var(--status-bar-height)) 30rpx 0 6%;
@@ -285,14 +375,6 @@
}
}
- .pointBox {
- width: 94%;
- margin: 0 3%;
- background: #fff;
- border-radius: 20rpx;
- box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
- }
-
.point {
text-align: center;
height: 160rpx;
@@ -324,8 +406,12 @@
justify-content: space-around;
align-items: center;
padding: 0 3%;
- color: #999;
-
+ color: #666;
+ background: #fff;
+ border-radius: 20rpx;
+ box-shadow: 0 4rpx 24rpx 0 #f6f6f6;
+ margin: 0 20rpx;
+
.order-item {
position: relative;
line-height: 2em;
@@ -333,14 +419,21 @@
:first-child {
font-size: 48rpx;
- margin-bottom: 10rpx;
+ margin-bottom: 12rpx;
+ color: #333;
}
}
}
+
}
.box {
- transform: translateY(-30rpx);
+ width: 95%;
+ margin: auto;
+ background: #fff;
+ border-radius: 20rpx;
+ box-shadow: 0 4rpx 24rpx 0 #f6f6f6;
+ transform: translateY(-30rpx);
}
.user-name {
diff --git a/pages/video/home-page.vue b/pages/video/home-page.vue
index de28ae4..5580ded 100644
--- a/pages/video/home-page.vue
+++ b/pages/video/home-page.vue
@@ -50,7 +50,7 @@
>
浣滃搧{{`(${videoTotal})`}}
</view>
- <view
+ <view
class="tab-item"
:class="{active: currentTab === 'collect'}"
@click="switchTab('collect')"
@@ -65,7 +65,9 @@
鍠滄
</view>
</view>
-
+
+
+
<!-- 瑙嗛鍒楄〃 -->
<scroll-view class="video-list" scroll-y :show-scrollbar="false" @scrolltolower="getPage" v-show="currentTab === 'works' && videoList.length > 0">
<view class="video-container">
@@ -104,7 +106,10 @@
</view>
</view>
</scroll-view>
- <scroll-view class="video-list" scroll-y :show-scrollbar="false" @scrolltolower="getPage" v-show="currentTab === 'collect' && collectVideoList.length > 0">
+ <view>
+ <mycollect v-show ="currentTab ==='collect'"></mycollect>
+ </view>
+ <!-- <scroll-view class="video-list" scroll-y :show-scrollbar="false" @scrolltolower="getPage" v-show="currentTab === 'collect' && collectVideoList.length > 0">
<view class="video-container">
<view
class="video-item"
@@ -121,7 +126,7 @@
:show-center-play-btn="false"
object-fit="cover"></video>
- <!-- <image class="video-cover" :src="getCoverUrl(item)"></image> -->
+
<view class="video-info">
<view class="video-stats">
<view class="stat">
@@ -132,7 +137,7 @@
</view>
</view>
</view>
- </scroll-view>
+ </scroll-view> -->
<scroll-view class="video-list" scroll-y :show-scrollbar="false" @scrolltolower="getPage" v-show="currentTab === 'likes' && likeVideoList.length > 0">
<view class="video-container">
<view
@@ -195,8 +200,10 @@
import {getAuthorInfo, getAuthorVideoPage, getAuthorCollectVideoPage, getAuthorLikeVideoPage} from '@/api/user.js'
import {subscribe, unSubscribe, delVideo, updateVideo, userDownVideo} from '@/api/video.js'
+import mycollect from '@/pages/video/myCollect.vue'
export default {
- components: {DropdownMenu},
+ components: {DropdownMenu,
+ mycollect},
data() {
return {
options: [
diff --git a/pages/mine/myCollect/myCollect.vue b/pages/video/myCollect.vue
similarity index 93%
rename from pages/mine/myCollect/myCollect.vue
rename to pages/video/myCollect.vue
index 55bf028..40ed744 100644
--- a/pages/mine/myCollect/myCollect.vue
+++ b/pages/video/myCollect.vue
@@ -10,7 +10,7 @@
<!-- 瑙嗛鏀惰棌鍒楄〃 -->
<view v-if="currentTab === 0" class="list-container">
- <scroll-view scroll-y class="scroll-view" @scrolltolower="loadMore" :lower-threshold="100">
+ <scroll-view scroll-y :lower-threshold="100" class="scroll-view-container" @scrolltolower="loadMore" >
<view v-if="videoCollects.length > 0">
<view v-for="(item, idx) in videoCollects" :key="item.id" class="collect-item">
<!-- 瑙嗛灏侀潰 -->
@@ -24,10 +24,6 @@
:controls="false"
:show-center-play-btn="false"
object-fit="cover"></video>
- <!-- <image :src="getVideoCover()" mode="aspectFill" class="cover-image" /> -->
- <!-- <view v-if="item.duration" class="duration">
- {{ formatDuration(item.duration) }}
- </view> -->
</view>
<!-- 瑙嗛淇℃伅 -->
@@ -55,7 +51,7 @@
</view>
</view>
<view v-else class="empty-tip">
- <image src="/static/empty.png" mode="aspectFit" />
+
<text>鏆傛棤鏀惰棌瑙嗛</text>
</view>
<view class="load-more">
@@ -70,7 +66,7 @@
<!-- 鍟嗗搧鏀惰棌鍒楄〃 -->
<view v-if="currentTab === 1" class="list-container">
- <scroll-view scroll-y class="scroll-view" @scrolltolower="loadMore" :lower-threshold="100">
+ <scroll-view scroll-y class="scroll-view-container" @scrolltolower="loadMore" :lower-threshold="100">
<view v-if="goodsCollects.length > 0">
<view v-for="(item, idx) in goodsCollects" :key="item.id" class="collect-item">
<!-- 鍟嗗搧灏侀潰 -->
@@ -103,7 +99,6 @@
</view>
</view>
<view v-else class="empty-tip">
- <image src="/static/empty.png" mode="aspectFit" />
<text>鏆傛棤鏀惰棌鍟嗗搧</text>
</view>
<view class="load-more">
@@ -118,7 +113,7 @@
<!-- 娲诲姩鏀惰棌鍒楄〃 -->
<view v-if="currentTab === 2" class="list-container">
- <scroll-view scroll-y class="scroll-view" @scrolltolower="loadMore" :lower-threshold="100">
+ <scroll-view scroll-y class="scroll-view-container" @scrolltolower="loadMore" :lower-threshold="100">
<view v-if="activityCollects.length > 0">
<view v-for="(item, idx) in activityCollects" :key="item.id" class="collect-item">
<!-- 娲诲姩灏侀潰 -->
@@ -155,7 +150,6 @@
</view>
</view>
<view v-else class="empty-tip">
- <image src="/static/empty.png" mode="aspectFit" />
<text>鏆傛棤鏀惰棌娲诲姩</text>
</view>
<view class="load-more">
@@ -171,13 +165,15 @@
</template>
<script>
- import {
+ import { onMounted } from "vue"
+import {
getMyCollectList,
changeCollect
} from '@/api/collect.js'
import storage from '@/utils/storage'
export default {
+ name:'myCollect',
data() {
return {
currentTab: 0,
@@ -201,9 +197,9 @@
return this.loading ? 'loading' : this.noMore ? 'nomore' : 'loadmore'
}
},
- onLoad() {
- this.query.authorId = storage.getUserInfo().id
- this.loadData()
+ mounted() {
+ this.query.authorId = storage.getUserInfo().id;
+ this.loadData();
},
onPullDownRefresh() {
this.query.pageNumber = 1
@@ -342,7 +338,6 @@
.page-container {
padding: 20rpx;
background-color: #f5f5f5;
- min-height: 100vh;
}
.tab-nav {
@@ -384,12 +379,18 @@
border-radius: 12rpx;
padding: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
-
- .scroll-view {
- height: calc(100vh - 200rpx);
- }
+ height: 70vh;
+
}
-
+ /* 鍐呭鍖哄煙浼樺寲 */
+ .scroll-view-container {
+ width: 100%;
+ padding: 0 10rpx;
+ height: calc(100vh - 554rpx);
+ background-color: #fff;
+ overflow: hidden;
+ padding: 0 10rpx;
+ }
.collect-item {
display: flex;
padding: 24rpx 0;
diff --git a/static/tabbar/vip.png b/static/tabbar/vip.png
new file mode 100644
index 0000000..fa796e6
--- /dev/null
+++ b/static/tabbar/vip.png
Binary files differ
--
Gitblit v1.8.0