收藏页面调整

zxl

2025-08-11 4636de7dcbd3bd4eba7597536b9bdebb1c33900c

收藏页面调整

 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": {

 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">&#xe608;</text>
          </view>
          <view>收藏列表</view>
        </view>
        </view -->
        <view class="order-item" @click="navigateTo('/pages/mine/activity/myActivity')">
          <view>
            <text class="iconfont">&#xe635;</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 {

 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: [

 pages/video/myCollect.vue

File was renamed from pages/mine/myCollect/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;

 static/tabbar/vip.png