From 9ac342cdebca34f39243d4d724709f55dc02baac Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期二, 29 七月 2025 12:01:41 +0800
Subject: [PATCH] 活动列表问题，视频主页图片显示问题
---
pages/mine/activity/detail.vue | 102 +++---
pages/mine/myCollect/myCollect.vue | 799 ++++++++++++++++++++++---------------------------
pages/video/home-page.vue | 27 +
3 files changed, 435 insertions(+), 493 deletions(-)
diff --git a/pages/mine/activity/detail.vue b/pages/mine/activity/detail.vue
index df6e476..a467972 100644
--- a/pages/mine/activity/detail.vue
+++ b/pages/mine/activity/detail.vue
@@ -1,5 +1,5 @@
<template>
- <view class="container" @touchstart="touchStart" @touchend="touchEnd">
+ <view class="container" @touchstart="touchStart" @touchend="touchEnd">
<!-- 椤堕儴娴锋姤鍥� -->
<!-- 鍔ㄦ�佸皝闈㈠尯鍩� -->
<view class="cover-container">
@@ -68,8 +68,13 @@
<script>
import '@/components/uview-components/uview-ui';
- import {changeCollect} from '@/api/collect.js'
- import {getActivityDetail, activityReport} from '@/api/activity.js';
+ import {
+ changeCollect
+ } from '@/api/collect.js'
+ import {
+ getActivityDetail,
+ activityReport
+ } from '@/api/activity.js';
export default {
data() {
return {
@@ -182,7 +187,9 @@
this.activityInfo.startTime = res.data.data.startTime;
this.activityInfo.endTime = res.data.data.endTime;
this.activityInfo.activityLocation = res.data.data.activityLocation;
- this.activityInfo.activityContent = '<h2>娲诲姩浠嬬粛</h2>' + res.data.data.activityContent;
+ this.activityInfo.activityContent = '<h2>娲诲姩浠嬬粛</h2>' + this.processRichText(res.data.data.activityContent);
+
+
this.activityInfo.activityType = res.data.data.activityType;
this.activityInfo.limitUserNum = res.data.data.limitUserNum;
this.reportBtn = res.data.data.isReport;
@@ -190,6 +197,26 @@
this.activityInfo.url = res.data.data.url;
}
})
+ },
+ // 鍦ㄨ幏鍙栧瘜鏂囨湰鏁版嵁鍚庡鐞�
+ processRichText(content) {
+ // 澶勭悊鍥剧墖
+ content = content.replace(/<img[^>]*>/gi, (match) => {
+ if (!/style=['"]/.test(match)) {
+ return match.replace(/<img/, '<img style="max-width:100% !important;height:auto !important;display:block;margin:10px auto;border-radius:8rpx;"');
+ }
+ return match;
+ });
+
+ // 澶勭悊瑙嗛
+ content = content.replace(/<video[^>]*>/gi, (match) => {
+ if (!/style=['"]/.test(match)) {
+ return match.replace(/<video/, '<video style="max-width:100% !important;height:auto !important;display:block;margin:10px auto;"');
+ }
+ return match;
+ });
+
+ return content;
},
loadDetailData() {
//鑾峰緱璇︽儏鎺ュ彛
@@ -281,14 +308,25 @@
margin-bottom: 15rpx;
}
+ /* 淇敼鍚庣殑鏍峰紡 */
.status-bar {
- position: absolute;
- bottom: 40rpx;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
width: 100%;
display: flex;
align-items: center;
- padding: 10px 15px;
+ padding: 20rpx 30rpx;
justify-content: space-between;
+ background-color: #fff;
+ box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
+ z-index: 100;
+ }
+
+ /* 璋冩暣瀹瑰櫒搴曢儴鍐呰竟璺� */
+ .container {
+ padding-bottom: 120rpx;
}
.signup-btn {
@@ -344,53 +382,19 @@
.rich-text-container {
padding: 15px;
+ overflow: hidden;
+ /* 闃叉鍐呭婧㈠嚭 */
}
.rich-text-content {
+ width: 100%;
+ max-width: 100%; /* 闄愬埗鏈�澶у搴� */
line-height: 1.6;
color: #333;
font-size: 28rpx;
- }
-
- .rich-text-content img {
- max-width: 100%;
- height: auto;
- display: block;
- margin: 10px auto;
- }
-
- .rich-text-content video {
- max-width: 100%;
- height: auto;
- display: block;
- margin: 10px auto;
- }
-
- .rich-text-content p {
- margin-bottom: 10px;
- }
-
- .rich-text-content h1,
- .rich-text-content h2,
- .rich-text-content h3,
- .rich-text-content h4 {
- margin: 20px 0 10px;
- color: #222;
- }
-
- .rich-text-content h1 {
- font-size: 24px;
- }
-
- .rich-text-content h2 {
- font-size: 22px;
- }
-
- .rich-text-content h3 {
- font-size: 20px;
- }
-
- .rich-text-content h4 {
- font-size: 18px;
+ word-wrap: break-word;
+ /* 闀垮崟璇嶆崲琛� */
+ overflow: hidden;
+ /* 闅愯棌婧㈠嚭鍐呭 */
}
</style>
\ No newline at end of file
diff --git a/pages/mine/myCollect/myCollect.vue b/pages/mine/myCollect/myCollect.vue
index f6217f8..d198b7a 100644
--- a/pages/mine/myCollect/myCollect.vue
+++ b/pages/mine/myCollect/myCollect.vue
@@ -1,6 +1,5 @@
<template>
-
- <view class="activity-container">
+ <view class="page-container">
<!-- 椤堕儴 Tab 瀵艰埅 -->
<view class="tab-nav">
<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{active: currentTab === index}"
@@ -9,355 +8,389 @@
</view>
</view>
- <!-- 瑙嗛鍒楄〃 -->
- <view class="activity-list">
- <view v-if="currentTab === 0">
- <scroll-view scroll-y class="activity-list" style="height: 100vh;" @scrolltolower="loadMore"
- :lower-threshold="100">
- <view v-if="videoCollects.length > 0">
- <view v-for="(item, idx) in videoCollects" :key="item.id" class="video-item">
- <!-- 瑙嗛灏侀潰+鎾斁鎸夐挳 -->
- <view class="video-cover-container" @click="jumpToPlay(idx)">
- <image :src="item.coverUrl" mode="aspectFill" class="video-cover" />
- <view class="play-icon">
- <u-icon name="play-circle-fill" size="60" color="#fff"></u-icon>
- </view>
- <view class="video-duration" v-if="item.duration">{{ item.duration }}</view>
- </view>
-
- <!-- 瑙嗛淇℃伅 -->
- <view class="video-info" @click="jumpToPlay(idx)">
- <view class="video-title">{{ item.authorName || '鏈煡浣滆��' }}</view>
- <view class="video-meta">
- <text class="video-weight" v-if="item.weight > 0">
- <u-icon name="thumb-up-fill" size="24" color="#999"></u-icon>
- {{ item.weight }}
- </text>
- </view>
- </view>
-
- <!-- 鎿嶄綔鎸夐挳 -->
- <view class="video-actions">
- <button class="cancel-btn" @click.stop="handleCancelCollection(item,'video',idx)">
- 鍙栨秷鏀惰棌
- </button>
- </view>
- </view>
- </view>
- <view v-else class="empty-tip">
- <text>鏆傛棤鏀惰棌瑙嗛</text>
- </view>
- <view class="load-more">
- <u-loadmore v-if="videoCollects.length > 0"
- :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'" :load-text="{
- loadmore: '涓婃媺鍔犺浇鏇村',
- loading: '姝ｅ湪鍔犺浇',
- nomore: '娌℃湁鏇村浜�'
- }" />
- </view>
- </scroll-view>
-
-
-
- </view>
-
- <view v-if="currentTab === 1">
- <scroll-view scroll-y class="activity-list" style="height: 100vh;" @scrolltolower="loadMore"
- :lower-threshold="100">
- <view v-if="goodsCollects.length > 0">
- <view v-for="(item, idx) in goodsCollects" :key="item.id" class="activity-item">
- <!-- 灏侀潰鍖哄煙 -->
- <block>
- <image :src="item.original" mode="aspectFill" class="activity-cover" />
- </block>
-
- <!-- 娲诲姩淇℃伅 -->
- <view class="activity-info">
- <view class="activity-title">{{ item.goodsName }}</view>
- <view class="activity-meta">
- <text class="activity-time">浠锋牸:{{ item.price }}鍏�</text>
- <text class="activity-location">{{ item.storeName || '鏆傛棤' }}</text>
- </view>
- </view>
-
- <!-- 鎿嶄綔鍖哄煙 -->
- <view class="action-container">
- <button class="cancel-btn" @click="handleCancelCollection(item,'goods',idx)"
- hover-class="cancel-btn-hover">
- 鍙栨秷鏀惰棌
- </button>
- </view>
-
- </view>
- </view>
- <view v-else class="empty-tip">
-
- <text>鏆傛棤鏀惰棌鍟嗗搧</text>
- </view>
- <view class="load-more">
- <u-loadmore v-if="goodsCollects.length > 0"
- :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'" :load-text="{
- loadmore: '涓婃媺鍔犺浇鏇村',
- loading: '姝ｅ湪鍔犺浇',
- nomore: '娌℃湁鏇村浜�'
- }" />
- </view>
- </scroll-view>
- </view>
-
- <view v-if="currentTab === 2">
- <scroll-view scroll-y class="activity-list" style="height: 80vh;" @scrolltolower="loadMore"
- :lower-threshold="100">
- <view v-if="activityCollects.length > 0">
- <view v-for="(item, idx) in activityCollects" :key="item.id" class="activity-item">
- <!-- 灏侀潰鍖哄煙 -->
- <block v-if="item.coverType === '鍥剧墖' || item.coverType === '瑙嗛'">
- <image :src="item.cover" mode="aspectFill" class="activity-cover" />
- </block>
- <block v-if="item.coverType === '鏂囧瓧'">
- <view class="activity-cover text-cover">{{ item.cover }}</view>
- </block>
- <!-- 娲诲姩淇℃伅 -->
- <view class="activity-info">
- <view class="activity-title">{{ item.activityName }}</view>
- <view class="activity-meta">
- <text class="activity-time">{{ item.startTime }}</text>
- <text class="activity-time"> {{ item.endTime }}</text>
- <text class="activity-location">{{ item.activityLocation || '鏆傛棤' }}</text>
- </view>
- </view>
- <!-- 鎿嶄綔鍖哄煙 -->
- <view class="action-container">
- <button class="cancel-btn" @click="handleCancelCollection(item,'activity', idx)"
- hover-class="cancel-btn-hover">
- 鍙栨秷鏀惰棌
- </button>
- </view>
-
+ <!-- 瑙嗛鏀惰棌鍒楄〃 -->
+ <view v-if="currentTab === 0" class="list-container">
+ <scroll-view scroll-y class="scroll-view" @scrolltolower="loadMore" :lower-threshold="100">
+ <view v-if="videoCollects.length > 0">
+ <view v-for="(item, idx) in videoCollects" :key="item.id" class="collect-item">
+ <!-- 瑙嗛灏侀潰 -->
+ <image v-if="tem.videoContentType === 'img'" class="cover-image" :src="item.imgs[0]" mode="aspectFill"></image>
+
+ <view v-else class="cover-container">
+ <video class="cover-image"
+ :src="item.videoUrl"
+ initial-time='0.01'
+ muted
+ :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>
+ <!-- 瑙嗛淇℃伅 -->
+ <view class="info-container">
+ <view class="title">{{ item.title || '鏃犳爣棰樿棰�' }}</view>
+ <view class="meta">
+ <view class="meta-item">
+ <u-icon name="account-fill" size="24" color="#999"></u-icon>
+ {{ item.authorName || '鏈煡浣滆��' }}
+ </view>
+ <view class="meta-item" v-if="item.weight > 0">
+ <u-icon name="thumb-up-fill" size="24" color="#999"></u-icon>
+ {{ item.weight }}
+ </view>
+ </view>
+ </view>
+ <!-- 鍙栨秷鏀惰棌鎸夐挳 -->
+ <view class="action-container">
+ <button class="cancel-btn" @click.stop="handleCancelCollection(item, 'video', idx)"
+ hover-class="cancel-btn-hover">
+ 鍙栨秷鏀惰棌
+ </button>
+ </view>
</view>
- <view v-else class="empty-tip">
- <text>鏆傛棤鏀惰棌娲诲姩</text>
- </view>
- <view class="load-more">
- <u-loadmore v-if="activityCollects.length > 0"
- :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'" :load-text="{
- loadmore: '涓婃媺鍔犺浇鏇村',
- loading: '姝ｅ湪鍔犺浇',
- nomore: '娌℃湁鏇村浜�'
- }" />
- </view>
- <view style="height: 150rpx"></view>
- </scroll-view>
-
- </view>
-
-
-
+ </view>
+ <view v-else class="empty-tip">
+ <image src="/static/empty.png" mode="aspectFit" />
+ <text>鏆傛棤鏀惰棌瑙嗛</text>
+ </view>
+ <view class="load-more">
+ <u-loadmore v-if="videoCollects.length > 0" :status="loadStatus" :load-text="{
+ loadmore: '涓婃媺鍔犺浇鏇村',
+ loading: '姝ｅ湪鍔犺浇',
+ nomore: '娌℃湁鏇村浜�'
+ }" />
+ </view>
+ </scroll-view>
</view>
+ <!-- 鍟嗗搧鏀惰棌鍒楄〃 -->
+ <view v-if="currentTab === 1" class="list-container">
+ <scroll-view scroll-y class="scroll-view" @scrolltolower="loadMore" :lower-threshold="100">
+ <view v-if="goodsCollects.length > 0">
+ <view v-for="(item, idx) in goodsCollects" :key="item.id" class="collect-item">
+ <!-- 鍟嗗搧灏侀潰 -->
+ <view class="cover-container">
+ <image :src="item.original" mode="aspectFill" class="cover-image" />
+ </view>
+ <!-- 鍟嗗搧淇℃伅 -->
+ <view class="info-container">
+ <view class="title">{{ item.goodsName }}</view>
+ <view class="meta">
+ <view class="meta-item">
+ <u-icon name="rmb-circle-fill" size="24" color="#FF5500"></u-icon>
+ {{ item.price }}鍏�
+ </view>
+ <view class="meta-item">
+ <u-icon name="home-fill" size="24" color="#999"></u-icon>
+ {{ item.storeName || '鏆傛棤' }}
+ </view>
+ </view>
+ </view>
+
+ <!-- 鍙栨秷鏀惰棌鎸夐挳 -->
+ <view class="action-container">
+ <button class="cancel-btn" @click.stop="handleCancelCollection(item, 'goods', idx)"
+ hover-class="cancel-btn-hover">
+ 鍙栨秷鏀惰棌
+ </button>
+ </view>
+ </view>
+ </view>
+ <view v-else class="empty-tip">
+ <image src="/static/empty.png" mode="aspectFit" />
+ <text>鏆傛棤鏀惰棌鍟嗗搧</text>
+ </view>
+ <view class="load-more">
+ <u-loadmore v-if="goodsCollects.length > 0" :status="loadStatus" :load-text="{
+ loadmore: '涓婃媺鍔犺浇鏇村',
+ loading: '姝ｅ湪鍔犺浇',
+ nomore: '娌℃湁鏇村浜�'
+ }" />
+ </view>
+ </scroll-view>
+ </view>
+
+ <!-- 娲诲姩鏀惰棌鍒楄〃 -->
+ <view v-if="currentTab === 2" class="list-container">
+ <scroll-view scroll-y class="scroll-view" @scrolltolower="loadMore" :lower-threshold="100">
+ <view v-if="activityCollects.length > 0">
+ <view v-for="(item, idx) in activityCollects" :key="item.id" class="collect-item">
+ <!-- 娲诲姩灏侀潰 -->
+ <view class="cover-container">
+ <image v-if="item.coverType === '鍥剧墖' || item.coverType === '瑙嗛'" :src="item.cover"
+ mode="aspectFill" class="cover-image" />
+ <view v-else-if="item.coverType === '鏂囧瓧'" class="text-cover">
+ {{ item.cover }}
+ </view>
+ </view>
+
+ <!-- 娲诲姩淇℃伅 -->
+ <view class="info-container">
+ <view class="title">{{ item.activityName }}</view>
+ <view class="meta">
+ <view class="meta-item">
+ <u-icon name="calendar-fill" size="24" color="#999"></u-icon>
+ {{ item.startTime }} ~ {{ item.endTime }}
+ </view>
+ <view class="meta-item">
+ <u-icon name="map-pin-fill" size="24" color="#999"></u-icon>
+ {{ item.activityLocation || '鏆傛棤' }}
+ </view>
+ </view>
+ </view>
+
+ <!-- 鍙栨秷鏀惰棌鎸夐挳 -->
+ <view class="action-container">
+ <button class="cancel-btn" @click.stop="handleCancelCollection(item, 'activity', idx)"
+ hover-class="cancel-btn-hover">
+ 鍙栨秷鏀惰棌
+ </button>
+ </view>
+ </view>
+ </view>
+ <view v-else class="empty-tip">
+ <image src="/static/empty.png" mode="aspectFit" />
+ <text>鏆傛棤鏀惰棌娲诲姩</text>
+ </view>
+ <view class="load-more">
+ <u-loadmore v-if="activityCollects.length > 0" :status="loadStatus" :load-text="{
+ loadmore: '涓婃媺鍔犺浇鏇村',
+ loading: '姝ｅ湪鍔犺浇',
+ nomore: '娌℃湁鏇村浜�'
+ }" />
+ </view>
+ </scroll-view>
+ </view>
</view>
-
</template>
<script>
- import '@/components/uview-components/uview-ui';
- import storage from '@/utils/storage';
- import {getAuthorCollectVideoPage} from '@/api/user.js'
import {
- getFilePreviewUrl
- } from '@/api/common.js'
- import {
- changeCollect,
- getMyCollectList
+ getMyCollectList,
+ changeCollect
} from '@/api/collect.js'
- import {
- ifError
- } from 'assert'
- export default {
+ import storage from '@/utils/storage'
+ export default {
data() {
return {
- total: 0,
- loading: false,
- noMore: false,
- currentTab: 0, // 褰撳墠閫変腑鐨則ab绱㈠紩
+ currentTab: 0,
tabs: ['瑙嗛', '鍟嗗搧', '娲诲姩'],
- //
- videoCollects: [], // 鏀惰棌瑙嗛鍒楄〃
- goodsCollects: [], // 鏀惰棌鍟嗗搧鍒楄〃
- activityCollects: [], // 鏀惰棌娲诲姩鍒楄〃
- collectForm: {
- collectType: '',
- refId: '',
- },
+ videoCollects: [],
+ goodsCollects: [],
+ activityCollects: [],
query: {
authorId: '',
type: 'video',
pageNumber: 1,
- pageSize: 5,
- }
+ pageSize: 5
+ },
+ loading: false,
+ noMore: false,
+ total: 0
+ }
+ },
+ computed: {
+ loadStatus() {
+ return this.loading ? 'loading' : this.noMore ? 'nomore' : 'loadmore'
}
},
onLoad() {
- this.currentTab = 0;
this.query.authorId = storage.getUserInfo().id
- this.getintit()
+ this.loadData()
+ },
+ onPullDownRefresh() {
+ this.query.pageNumber = 1
+ this.noMore = false
+ this.videoCollects = []
+ this.goodsCollects = []
+ this.activityCollects = []
+ this.loadData().finally(() => {
+ uni.stopPullDownRefresh()
+ })
},
methods: {
- jumpToPlay(index) {
- const playInfo = {
- videoList: this.videoCollects,
- nomore: this.noMore,
- pageNumber: this.query.pageNumber,
- playIndex: index
- }
- uni.setStorageSync("playInfo", playInfo)
- uni.navigateTo({
- url: `/pages/video/video-play?authorId=${this.query.authorId}&videoFrom=collect`
- });
+ async getVideoCover(videoPath) {
+ return null;
},
- /**
- * 涓嬫媺鍒锋柊鏃�
- */
- onPullDownRefresh() {
- this.currentTab = 0;
- this.query.pageNumber = 1; // 閲嶇疆椤电爜
- this.noMore = false;
- this.videoCollects = [];
- this.goodsCollects = []; // 鏀惰棌鍟嗗搧鍒楄〃
- this.activityCollects = []; // 鏀惰棌娲诲姩鍒楄〃// 娓呯┖鏁版嵁
- this.getintit();
- },
- loadMore() {
- this.loading = true;
- // 寤惰繜鎵ц璁︰I鏈夊弽搴旀椂闂�
- setTimeout(() => {
- this.query.pageNumber += 1;
- this.getintit();
- }, 300);
- },
+
+
+ // 璺宠浆鍒拌棰戞挱鏀鹃〉
+ // jumpToPlay(index) {
+ // const playInfo = {
+ // videoList: this.videoCollects,
+ // nomore: this.noMore,
+ // pageNumber: this.query.pageNumber,
+ // playIndex: index
+ // }
+ // uni.setStorageSync("playInfo", playInfo)
+ // uni.navigateTo({
+ // url: `/pages/video/video-play?authorId=${this.query.authorId}&videoFrom=collect`
+ // })
+ // },
+
+ // 鍙栨秷鏀惰棌
handleCancelCollection(item, type, index) {
- console.log(item)
- this.collectForm.collectType = type;
- this.collectForm.refId = item.id;
- changeCollect(this.collectForm).then(res => {
- if (res.data.code === 200) {
- uni.showToast({
- title: res.data.msg, // 鎻愮ず鏂囧瓧
- icon: 'none', // 鍥炬爣绫诲瀷锛坰uccess/loading/none锛�
- mask: true // 鏄惁鏄剧ず閫忔槑钂欏眰锛堥槻姝㈣Е鎽哥┛閫忥級
- });
- this.query.pageNumber = 1
- // 鍥犱负瑙嗛璧扮殑mq鏈夊欢杩燂紝鍓嶇鐩存帴鍒犻櫎璇ュ厓绱犺揪鍒版晥鏋�
- if (type === 'video') {
- this.videoCollects.splice(index, 1)
- } else {
- this.noMore = false
- this.getintit()
+ uni.showModal({
+ title: '鎻愮ず',
+ content: '纭畾瑕佸彇娑堟敹钘忓悧锛�',
+ success: (res) => {
+ if (res.confirm) {
+ changeCollect({
+ collectType: type,
+ refId: item.id
+ }).then(res => {
+ if (res.data.code === 200) {
+ uni.showToast({
+ title: res.data.msg,
+ icon: 'none'
+ })
+ if (type === 'video') {
+ this.videoCollects.splice(index, 1)
+ } else {
+ this.query.pageNumber = 1
+ this.noMore = false
+ this.loadData()
+ }
+ }
+ })
}
}
+ })
+ },
- })
- },
- getUrl(params) {
- getFilePreviewUrl(params).then(res => {
- return res.data.data
- })
- },
- // 鍒囨崲tab
+ // 鍒囨崲鏍囩椤�
switchTab(index) {
if (this.currentTab !== index) {
this.currentTab = index
- //鍒囨崲鏃堕〉鐮佸綊0
- this.query.pageNumber = 0;
- // 娓呯┖鏁版嵁
- this.videoCollects = [];
- this.goodsCollects = [];
- this.activityCollects = [];
- // 瀹為檯椤圭洰涓彲浠ュ湪杩欓噷娣诲姞鍔犺浇鏁版嵁鐨勯�昏緫
- this.getintit()
+ this.query.pageNumber = 1
+ this.query.type = ['video', 'goods', 'activity'][index]
+ this.videoCollects = []
+ this.goodsCollects = []
+ this.activityCollects = []
+ this.loadData()
}
},
- async getintit() {
+
+ // 鍔犺浇鏇村
+ loadMore() {
+ if (!this.loading && !this.noMore) {
+ this.query.pageNumber += 1
+ this.loadData()
+ }
+ },
+
+ // 鍔犺浇鏁版嵁
+ async loadData() {
+ if (this.loading) return
+
+ this.loading = true
uni.showLoading({
title: '鍔犺浇涓�'
- });
- if (this.currentTab === 0) {
- this.query.type = 'video';
- getAuthorCollectVideoPage(this.query).then(res => {
- uni.hideLoading();
- this.loading = false;
+ })
- if (res.data.code === 200) {
- const newData = res.data.data
- this.total = res.data.total || 0;
- // 杩藉姞鎴栨浛鎹㈡暟鎹�
- this.videoCollects = this.query.pageNumber === 1 ?
- newData :
- [...this.videoCollects, ...newData];
- // 鍒ゆ柇鏄惁杩樻湁鏇村鏁版嵁
- this.noMore = newData.length < this.query.pageSize ||
- this.videoCollects.length >= this.total;
- }
- })
- } else if (this.currentTab === 1) {
- this.query.type = 'goods';
+ try {
getMyCollectList(this.query).then(res => {
- uni.hideLoading();
- this.loading = false;
if (res.data.code === 200) {
const newData = res.data.data
- this.total = res.data.total || 0;
+ this.total = res.data.total || 0
- this.goodsCollects = this.query.pageNumber === 1 ?
- newData :
- [...this.goodsCollects, ...newData];
- // 鍒ゆ柇鏄惁杩樻湁鏇村鏁版嵁
- this.noMore = newData.length < this.query.pageSize ||
- this.goodsCollects.length >= this.total;
- }
- })
- } else if (this.currentTab === 2) {
- this.query.type = 'activity';
- getMyCollectList(this.query).then(res => {
- uni.hideLoading();
- this.loading = false;
- if (res.data.code === 200) {
- const newData = res.data.data
- this.total = res.data.total || 0;
+ // 鏍规嵁褰撳墠鏍囩椤垫洿鏂板搴旀暟鎹�
+ if (this.currentTab === 0) {
+ this.videoCollects = this.query.pageNumber === 1 ?
+ newData :
+ [...this.videoCollects, ...newData]
+ } else if (this.currentTab === 1) {
+ this.goodsCollects = this.query.pageNumber === 1 ?
+ newData :
+ [...this.goodsCollects, ...newData]
+ } else if (this.currentTab === 2) {
+ this.activityCollects = this.query.pageNumber === 1 ?
+ newData :
+ [...this.activityCollects, ...newData]
+ }
- this.activityCollects = this.query.pageNumber === 1 ?
- newData :
- [...this.activityCollects, ...newData];
this.noMore = newData.length < this.query.pageSize ||
- this.activityCollects.length >= this.total;
+ (this.currentTab === 0 ? this.videoCollects :
+ this.currentTab === 1 ? this.goodsCollects : this.activityCollects)
+ .length >= this.total
}
+ });
+
+ } catch (error) {
+ console.error(error)
+ uni.showToast({
+ title: '鍔犺浇澶辫触',
+ icon: 'none'
})
+ } finally {
+ this.loading = false
+ uni.hideLoading()
}
-
}
}
}
</script>
<style lang="scss">
- .text-cover {
- display: flex;
- align-items: center;
- justify-content: center;
- background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
- color: #fff;
- font-size: 28rpx;
- padding: 16rpx;
- line-height: 1.4;
+ .page-container {
+ padding: 20rpx;
+ background-color: #f5f5f5;
+ min-height: 100vh;
}
- /* 瑙嗛鍒楄〃涓撶敤鏍峰紡 */
- .video-item {
+ .tab-nav {
+ display: flex;
+ background-color: #fff;
+ border-radius: 12rpx;
+ margin-bottom: 20rpx;
+ box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+
+ .tab-item {
+ flex: 1;
+ text-align: center;
+ padding: 24rpx 0;
+ font-size: 28rpx;
+ color: #666;
+ position: relative;
+
+ &.active {
+ color: #007AFF;
+ font-weight: bold;
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 80rpx;
+ height: 6rpx;
+ background-color: #007AFF;
+ border-radius: 3rpx;
+ }
+ }
+ }
+ }
+
+ .list-container {
+ background-color: #fff;
+ border-radius: 12rpx;
+ padding: 20rpx;
+ box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+
+ .scroll-view {
+ height: calc(100vh - 200rpx);
+ }
+ }
+
+ .collect-item {
display: flex;
padding: 24rpx 0;
border-bottom: 1rpx solid #f5f5f5;
@@ -368,18 +401,31 @@
}
}
- .video-cover-container {
+ .cover-container {
position: relative;
- width: 240rpx;
- height: 160rpx;
+ width: 250rpx;
+ height: 180rpx;
border-radius: 12rpx;
overflow: hidden;
margin-right: 24rpx;
flex-shrink: 0;
- .video-cover {
+ .cover-image {
width: 100%;
height: 100%;
+ }
+
+ .text-cover {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+ color: #fff;
+ font-size: 28rpx;
+ padding: 16rpx;
+ line-height: 1.4;
}
.play-icon {
@@ -390,7 +436,7 @@
opacity: 0.9;
}
- .video-duration {
+ .duration {
position: absolute;
right: 8rpx;
bottom: 8rpx;
@@ -402,14 +448,14 @@
}
}
- .video-info {
+ .info-container {
flex: 1;
+ height: 160rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
- height: 160rpx;
- .video-title {
+ .title {
font-size: 30rpx;
color: #333;
font-weight: bold;
@@ -419,22 +465,21 @@
overflow: hidden;
}
- .video-meta {
+ .meta {
display: flex;
- justify-content: space-between;
- font-size: 24rpx;
- color: #999;
+ flex-wrap: wrap;
-
-
- .video-weight {
+ .meta-item {
display: flex;
align-items: center;
+ margin-right: 20rpx;
+ font-size: 24rpx;
+ color: #999;
}
}
}
- .video-actions {
+ .action-container {
margin-left: 20rpx;
flex-shrink: 0;
@@ -458,6 +503,7 @@
image {
width: 300rpx;
+ height: 300rpx;
margin-bottom: 30rpx;
opacity: 0.6;
}
@@ -469,138 +515,7 @@
}
}
- .activity-container {
- padding: 20rpx;
- background-color: #f5f5f5;
- min-height: 100vh;
- }
-
- /* Tab 瀵艰埅鏍峰紡 */
- .tab-nav {
- display: flex;
- background-color: #fff;
- border-radius: 12rpx;
- margin-bottom: 20rpx;
- box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
- }
-
- .tab-item {
- flex: 1;
- text-align: center;
- padding: 24rpx 0;
- font-size: 28rpx;
- color: #666;
- position: relative;
-
- &.active {
- color: #007AFF;
- font-weight: bold;
-
- &::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 50%;
- transform: translateX(-50%);
- width: 80rpx;
- height: 6rpx;
- background-color: #007AFF;
- border-radius: 3rpx;
- }
- }
- }
-
- /* 娲诲姩鍒楄〃鏍峰紡 */
- .activity-list {
- background-color: #fff;
- border-radius: 12rpx;
- padding: 20rpx;
- box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
- }
-
- .activity-item {
- display: flex;
+ .load-more {
padding: 20rpx 0;
- border-bottom: 1rpx solid #eee;
-
- &:last-child {
- border-bottom: none;
- }
- }
-
- .activity-cover {
- width: 200rpx;
- height: 140rpx;
- border-radius: 8rpx;
- margin-right: 20rpx;
- }
-
- .activity-info {
- flex: 1;
- position: relative;
- }
-
- .activity-title {
- font-size: 32rpx;
- color: #333;
- font-weight: bold;
- margin-bottom: 12rpx;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
- }
-
- .activity-meta {
- font-size: 24rpx;
- color: #999;
- margin-bottom: 16rpx;
-
- text {
- display: block;
- margin-bottom: 8rpx;
- }
- }
-
- .activity-status {
- position: absolute;
- right: 0;
- top: 0;
- font-size: 24rpx;
- padding: 4rpx 12rpx;
- border-radius: 20rpx;
-
- &.signed {
- color: #007AFF;
- background-color: rgba(0, 122, 255, 0.1);
- }
-
- &.ended {
- color: #999;
- background-color: rgba(153, 153, 153, 0.1);
- }
-
- &.canceled {
- color: #ff3b30;
- background-color: rgba(255, 59, 48, 0.1);
- }
- }
-
- /* 绌虹姸鎬佹彁绀� */
- .empty-tip {
- text-align: center;
- padding: 100rpx 0;
-
- image {
- width: 300rpx;
- margin-bottom: 30rpx;
- opacity: 0.6;
- }
-
- text {
- display: block;
- font-size: 28rpx;
- color: #999;
- }
}
</style>
\ No newline at end of file
diff --git a/pages/video/home-page.vue b/pages/video/home-page.vue
index 340c171..c00838f 100644
--- a/pages/video/home-page.vue
+++ b/pages/video/home-page.vue
@@ -74,6 +74,7 @@
v-for="(item, index) in videoList"
:key="item.id"
>
+
<image class="video-cover" @click="playAuthorVideo(index)" :src="item.videoContentType === 'video' ? item.coverUrl : item.imgs[0]" mode="aspectFill"></image>
<view class="video-info">
<view class="video-stats">
@@ -103,7 +104,16 @@
:key="item.id"
@click="playCollectVideo(index)"
>
- <image class="video-cover" :src="item.videoContentType === 'video' ? item.coverUrl : item.imgs[0]" mode="aspectFill"></image>
+ <image v-if="tem.videoContentType === 'img'" class="video-cover" :src="item.imgs[0]" mode="aspectFill"></image>
+ <video v-else class="video-cover"
+ :src="item.videoUrl"
+ initial-time='0.01'
+ muted
+ :controls="false"
+ :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">
@@ -123,7 +133,13 @@
:key="item.id"
@click="playLikeVideo(index)"
>
- <image class="video-cover" :src="item.videoContentType === 'video' ? item.coverUrl : item.imgs[0]" mode="aspectFill"></image>
+ <video class="video-cover"
+ :src="item.videoContentType === 'video' ? item.videoUrl : item.imgs[0]" mode="aspectFill"
+ initial-time='0.01'
+ muted
+ :controls="false"
+ :show-center-play-btn="false"
+ object-fit="cover"></video>
<view class="video-info">
<view class="video-stats">
<view class="stat">
@@ -246,6 +262,13 @@
this.getAuthorVideoPage();
},
methods: {
+ getCoverUrl(item) {
+ if (item.videoContentType === 'video') {
+ // OSS瑙嗛灏侀潰鍙傛暟锛堝畬鏁存牸寮忥級
+ return `${item.videoUrl}?x-oss-process=video/snapshot,t_1000,f_jpg,m_fast`
+ }
+ return item.imgs?.[0]
+ },
dialogClose() {
this.opVideo = {
id: '',
--
Gitblit v1.8.0