wk450097098
/
mrr.sj.front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

技能推荐

This commit is contained in:
丁杰 2026-06-03 11:40:40 +08:00
parent 14e47ccf0e
commit c54fb1f2a9
1 changed files with 129 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
pages/jingxuan/skill-detail.vue
View File

@ -1,11 +1,7 @@
<template>
<view class="skill-detail-page">
<custom-navbar
title="技能集市"
backgroundColor="#ffffff"
titleColor="#333"
borderBottom="none">
<custom-navbar title="技能集市" backgroundColor="#ffffff" titleColor="#333" borderBottom="none">
</custom-navbar>
<!-- <view class="mock-switch" @click="toggleMockData">
@ -15,32 +11,17 @@
<view class="video-section" v-if="article.videoSrc">
<view class="video-wrapper">
<video
v-if="!tipShow"
id="customVideo"
class="main-video"
:src="article.videoSrc"
:poster="article.poster"
:controls="showNativeControls"
:show-center-play-btn="false"
:muted="isMuted"
object-fit="cover"
@timeupdate="onTimeUpdate"
@loadedmetadata="onLoadedMetaData"
@ended="onEnded"
@play="onPlay"
@pause="onPause"
@fullscreenchange="onFullScreenChange"
>
<cover-image
v-if="!isPlaying && !showNativeControls"
class="center-play-icon"
<video v-if="!tipShow" id="customVideo" class="main-video" :src="article.videoSrc" :poster="article.poster"
:controls="showNativeControls" :show-center-play-btn="false" :muted="isMuted" object-fit="cover"
@timeupdate="onTimeUpdate" @loadedmetadata="onLoadedMetaData" @ended="onEnded" @play="onPlay" @pause="onPause"
@fullscreenchange="onFullScreenChange">
<cover-image v-if="!isPlaying && !showNativeControls" class="center-play-icon"
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bb720bb0-4ada-49f6-9ce5-38abfd613d5d.png"
@click.stop="togglePlay"
></cover-image>
@click.stop="togglePlay"></cover-image>
<cover-view class="custom-control-bar" v-if="!showNativeControls">
<cover-image class="bar-bg" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ce7f28f8-470d-4f5b-9c7e-ff2bf8635226.png"></cover-image>
<cover-image class="bar-bg"
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ce7f28f8-470d-4f5b-9c7e-ff2bf8635226.png"></cover-image>
<cover-view class="bar-content">
<cover-image v-if="isPlaying" class="ctrl-icon" :src="iconPause" @click.stop="togglePlay"></cover-image>
@ -56,20 +37,19 @@
<cover-view class="time-text">{{ formatTime(duration) }}</cover-view>
<cover-image v-if="!isMuted" class="ctrl-icon mute-icon" :src="iconSoundOn" @click.stop="toggleMute"></cover-image>
<cover-image v-if="isMuted" class="ctrl-icon mute-icon" :src="iconMute" @click.stop="toggleMute"></cover-image>
<cover-image v-if="!isMuted" class="ctrl-icon mute-icon" :src="iconSoundOn"
@click.stop="toggleMute"></cover-image>
<cover-image v-if="isMuted" class="ctrl-icon mute-icon" :src="iconMute"
@click.stop="toggleMute"></cover-image>
<cover-image class="ctrl-icon fullscreen-icon" :src="iconFullscreen" @click.stop="toggleFullScreen"></cover-image>
<cover-image class="ctrl-icon fullscreen-icon" :src="iconFullscreen"
@click.stop="toggleFullScreen"></cover-image>
</cover-view>
</cover-view>
</video>
<image
v-else
class="main-video fallback-poster"
:src="article.poster || article.videoSrc"
mode="aspectFill"
></image>
<image v-else class="main-video fallback-poster" :src="article.poster || article.videoSrc" mode="aspectFill">
</image>
</view>
</view>
@ -83,10 +63,7 @@
</view>
<view class="favorite-btn" @click="toggleFavorite">
<image
class="star-icon"
:src="isFavorite ? filledStarUrl : emptyStarUrl"
/>
<image class="star-icon" :src="isFavorite ? filledStarUrl : emptyStarUrl" />
<text :class="{ 'active-fav': isFavorite }">{{ isFavorite ? '已收藏' : '收藏' }}</text>
</view>
</view>
@ -105,17 +82,15 @@
<view class="section-header">
<text class="section-title">相关推荐</text>
<view class="refresh-btn" @click="refreshList">
<image class="refresh-icon" :class="{'is-rotating': isRefreshing}" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/f2152145-df2a-49ab-87f5-f66b3207d0b0.png"></image>
<image class="refresh-icon" :class="{ 'is-rotating': isRefreshing }"
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/f2152145-df2a-49ab-87f5-f66b3207d0b0.png">
</image>
<text>换一批</text>
</view>
</view>
<view class="list-container">
<skill-card
v-for="(item, index) in recommendList"
:key="index"
:item="item"
></skill-card>
<skill-card v-for="(item, index) in recommendList" :key="index" :item="item"></skill-card>
</view>
</view>
@ -324,7 +299,18 @@ export default {
htmlContent: data.detail || ''
};
this.isFavorite = data.collect_state === 1;
this.loadMockRecommend();
request.post("/sj/skill/list", {
page: 1,
limit: 10,
link_type: data.link_type,
link_id: data.link_id
}).then((listRes) => {
if (listRes.code == 200 && listRes.data && listRes.data.list) {
this.recommendList = listRes.data.list;
}
}).catch((err) => {
console.error('获取推荐列表异常', err);
});
} else {
uni.showToast({ title: res.msg || '获取数据失败', icon: 'none' });
}
@ -337,7 +323,7 @@ export default {
toggleFavorite() {
if (!this.isLogin) {
if(this.isPlaying) {
if (this.isPlaying) {
this.getVideoContext().pause();
}
this.tipsText = "您现在还未登录，是否确定前往登录？";
@ -359,7 +345,7 @@ export default {
id: this.articleId,
state: targetState
}).then(res => {
if(res.code == 200) {
if (res.code == 200) {
this.isFavorite = !this.isFavorite;
uni.showToast({ title: this.isFavorite ? '收藏成功' : '已取消收藏', icon: 'none' });
} else {
@ -373,7 +359,7 @@ export default {
},
refreshList() {
if(this.isRefreshing) return;
if (this.isRefreshing) return;
this.isRefreshing = true;
uni.showLoading({ title: '加载中' });
setTimeout(() => {
@ -519,11 +505,13 @@ export default {
margin: 0 10rpx;
flex-shrink: 0;
}
.mute-icon {
width: 38rpx;
height: 30rpx;
flex-shrink: 0;
}
.fullscreen-icon {
width: 30rpx;
height: 30rpx;
@ -636,7 +624,7 @@ export default {
}
.active-fav {
color: #FD5A8C ;
color: #FD5A8C;
}
}
}
@ -654,6 +642,7 @@ export default {
margin-bottom: 24rpx;
line-height: 40rpx;
}
::v-deep img {
max-width: 100%;
height: auto;