diff --git a/app.json b/app.json
index 1505b19..3f7600a 100644
--- a/app.json
+++ b/app.json
@@ -26,7 +26,11 @@
"pages": [
"pages/repository/repository",
"pages/training/training",
- "pages/policyElucidation/policyElucidation"
+ "pages/policyElucidation/policyElucidation",
+ "pages/onlineAsk/onlineAsk",
+ "pages/administrativeDivision/administrativeDivision",
+ "pages/wzDetails/wzDetails",
+ "pages/spDetails/spDetails"
],
"independent": true
}
diff --git a/pages/home/home.js b/pages/home/home.js
index df2ece8..0419896 100644
--- a/pages/home/home.js
+++ b/pages/home/home.js
@@ -6,13 +6,26 @@ Page({
currentSwiper: 0,
baseUrl: baseUrl,
swiperList: [],
-
// 通知公告数据
currentNotice: 0,
noticeList: [],
},
+ // 查询用户信息
+ getUserInfo(){
+ http.UserInfo({
+ data:{},
+ success:res=>{
+ console.log(789,res);
+ this.setData({
+ user:res.data.area
+ })
+ }
+ })
+ },
+
+
// 轮播
getCarousel() {
http.carousel({
@@ -30,15 +43,21 @@ Page({
http.disaster({
data: {},
success: res => {
- console.log(222, res);
this.setData({
- noticeList:res.rows
+ noticeList: res.rows
})
}
})
},
+ // 区域划分跳转
+ bindXzqh() {
+ wx.navigateTo({
+ url: '/pagesB/pages/administrativeDivision/administrativeDivision',
+ })
+ },
+
// AI问诊
bindAI() {
wx.navigateTo({
@@ -47,45 +66,52 @@ Page({
},
// 问兽医
- bindWsy(){
+ bindWsy() {
wx.navigateTo({
url: '/pagesA/pages/askingSy/askingSy',
})
},
// 找专家
- bindZj(){
- wx.navigateTo({
- url: '/pagesA/pages/expert/expert',
- })
+ bindZj() {
+ wx.navigateTo({
+ url: '/pagesA/pages/expert/expert',
+ })
},
// 去买药
- bindYao(){
- wx.navigateTo({
- url: '/pagesA/pages/medicine/medicine',
- })
+ bindYao() {
+ wx.navigateTo({
+ url: '/pagesA/pages/medicine/medicine',
+ })
},
// 养殖知识库
- bindZsk(){
- wx.navigateTo({
- url: '/pagesB/pages/repository/repository',
- })
+ bindZsk() {
+ wx.navigateTo({
+ url: '/pagesB/pages/repository/repository',
+ })
},
// 在线培训
- bindPx(){
- wx.navigateTo({
- url: '/pagesB/pages/training/training',
- })
+ bindPx() {
+ wx.navigateTo({
+ url: '/pagesB/pages/training/training',
+ })
},
// 政策解读
- bindJd(){
- wx.navigateTo({
- url: '/pagesB/pages/policyElucidation/policyElucidation',
- })
+ bindJd() {
+ wx.navigateTo({
+ url: '/pagesB/pages/policyElucidation/policyElucidation',
+ })
+ },
+
+ // 用户提问
+ bindTw() {
+ wx.navigateTo({
+ url: '/pagesB/pages/onlineAsk/onlineAsk',
+ })
},
@@ -98,13 +124,11 @@ Page({
isHighAccuracy: true,
type: 'gcj02',
success: function (res) {
- console.log(res);
let latitude = res.latitude;
let longitude = res.longitude;
wx.request({
url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${key}`,
success: res => {
- console.log(res);
that.setData({
county: res.data.result.address_component.district //城市
});
@@ -115,6 +139,7 @@ Page({
},
onLoad() {
+ this.getUserInfo()
this.getDisaster()
this.getCarousel()
this.getLocation()
diff --git a/pages/home/home.wxml b/pages/home/home.wxml
index fb30549..78e6c5a 100644
--- a/pages/home/home.wxml
+++ b/pages/home/home.wxml
@@ -1,15 +1,26 @@
-
+
-
- {{county}}
+
+
+
+
+
+
+
+ {{user.name}}
+
+
-
+
@@ -41,7 +52,7 @@
-
+
问兽医
智能匹配医生
平均5分钟恢复
@@ -95,7 +106,7 @@
-
+
-
-
-
+
+
暂无相关政策
请尝试其他筛选条件
@@ -75,15 +63,21 @@
{{item.title}}
-
-
-
+
+
+
+ 正在加载更多...
+
+
+ 已经到底了
+
+
@@ -109,11 +103,10 @@
-
详细解读
-
+
diff --git a/pagesB/pages/policyElucidation/policyElucidation.wxss b/pagesB/pages/policyElucidation/policyElucidation.wxss
index 5a19f11..7871364 100644
--- a/pagesB/pages/policyElucidation/policyElucidation.wxss
+++ b/pagesB/pages/policyElucidation/policyElucidation.wxss
@@ -68,14 +68,7 @@
color: #999;
}
- .search-btn {
- background-color: #2d8c3c;
- color: white;
- font-size: 28rpx;
- padding: 16rpx 30rpx;
- border-radius: 40rpx;
- margin-left: 20rpx;
- }
+
/* 筛选区域 */
.filter-scroll {
@@ -191,13 +184,7 @@
text-align: center;
padding: 80rpx 30rpx;
}
-
- .empty-icon {
- width: 200rpx;
- height: 200rpx;
- margin-bottom: 30rpx;
- opacity: 0.5;
- }
+
.empty-text {
display: block;
@@ -385,4 +372,97 @@
font-size: 24rpx;
color: #999;
margin-bottom: 10rpx;
- }
\ No newline at end of file
+ }
+
+ /* 在原有样式基础上添加以下样式 */
+
+/* 清空按钮样式 */
+.clear-btn {
+ width: 40rpx;
+ height: 40rpx;
+ line-height: 36rpx;
+ text-align: center;
+ background-color: #ccc;
+ color: white;
+ border-radius: 50%;
+ font-size: 30rpx;
+ margin-right: 20rpx;
+ font-weight: bold;
+}
+
+/* 滚动容器 */
+.policy-list {
+ padding: 0 30rpx;
+ box-sizing: border-box;
+}
+
+/* 加载更多样式 */
+.loading-more, .no-more {
+ text-align: center;
+ padding: 40rpx 0;
+ color: #999;
+ font-size: 26rpx;
+}
+
+.loading-more {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.loading-text {
+ margin-left: 10rpx;
+}
+
+.loading-more::before {
+ content: "";
+ width: 30rpx;
+ height: 30rpx;
+ border: 3rpx solid #f3f3f3;
+ border-top: 3rpx solid #2d8c3c;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+.no-more-text {
+ color: #ccc;
+ font-size: 24rpx;
+}
+
+/* 确保政策卡片样式不变 */
+.policy-card {
+ background-color: white;
+ border-radius: 20rpx;
+ padding: 30rpx;
+ margin-bottom: 30rpx;
+ box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.06);
+ transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.policy-card:active {
+ transform: translateY(-4rpx);
+ box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.1);
+}
+
+/* 加载状态 */
+.empty-state {
+ text-align: center;
+ padding: 100rpx 30rpx;
+}
+
+.empty-text {
+ display: block;
+ font-size: 32rpx;
+ color: #999;
+ margin-bottom: 15rpx;
+}
+
+.empty-tip {
+ font-size: 26rpx;
+ color: #ccc;
+}
\ No newline at end of file
diff --git a/pagesB/pages/spDetails/spDetails.js b/pagesB/pages/spDetails/spDetails.js
new file mode 100644
index 0000000..4deb4bd
--- /dev/null
+++ b/pagesB/pages/spDetails/spDetails.js
@@ -0,0 +1,381 @@
+// pages/training/videoDetail/videoDetail.js
+import http from '../../../utils/api'
+const baseUrl = require('../../../utils/baseUrl')
+
+Page({
+ data: {
+ baseUrl: baseUrl,
+ video: {},
+ videoUrl: '',
+ loading: true,
+ fullScreen: false,
+ isPlaying: false,
+ isMuted: false,
+ loop: false,
+ playbackRate: 1,
+ currentTime: 0,
+ duration: 0,
+ videoTags: [],
+ videoError: false,
+ autoplay: false,
+ controlsVisible: true,
+ controlsTimer: null,
+ lastTouchTime: 0,
+ },
+
+ onLoad(options) {
+ console.log('页面参数:', options)
+ this.getVideoDetails(options.id)
+ },
+
+ onReady() {
+ this.videoContext = wx.createVideoContext('videoPlayer', this)
+ console.log('视频上下文创建成功')
+ },
+
+ onUnload() {
+ // 清除定时器
+ if (this.data.controlsTimer) {
+ clearTimeout(this.data.controlsTimer)
+ }
+ // 页面卸载时停止播放
+ if (this.videoContext) {
+ this.videoContext.pause()
+ }
+ },
+
+ // 获取视频详情
+ getVideoDetails(id) {
+ this.setData({
+ loading: true,
+ videoError: false
+ })
+
+ http.videoDetails({
+ data: { id },
+ success: res => {
+ console.log('视频详情响应:', res)
+ if (res.code === 200 && res.data) {
+ const video = res.data
+ console.log('视频数据:', video)
+
+ // 处理视频URL
+ let videoUrl = ''
+ if (video.videoUrl) {
+ videoUrl = this.data.baseUrl + video.videoUrl
+ console.log('视频完整URL:', videoUrl)
+ }
+
+ // 处理视频标签
+ const tags = video.tags ? video.tags.split(',').filter(tag => tag.trim()) : []
+
+ this.setData({
+ video: video,
+ videoUrl: videoUrl,
+ videoTags: tags,
+ loading: false
+ })
+
+ // 设置页面标题
+ wx.setNavigationBarTitle({
+ title: video.title.substring(0, 12) + (video.title.length > 12 ? '...' : '')
+ })
+
+ } else {
+ wx.showToast({
+ title: res.msg || '视频不存在',
+ icon: 'none',
+ duration: 2000
+ })
+ setTimeout(() => {
+ wx.navigateBack()
+ }, 2000)
+ }
+ },
+ fail: err => {
+ console.error('获取视频详情失败:', err)
+ this.setData({
+ loading: false,
+ videoError: true
+ })
+ wx.showToast({
+ title: '加载失败，请重试',
+ icon: 'none',
+ duration: 2000
+ })
+ }
+ })
+ },
+
+ // 返回上一页
+ goBack() {
+ wx.navigateBack()
+ },
+
+ // 视频加载完成
+ onVideoLoaded(e) {
+ console.log('视频元数据加载完成:', e.detail)
+ this.setData({
+ duration: e.detail.duration || 0,
+ videoError: false
+ })
+ },
+
+ // 视频播放错误
+ onVideoError(e) {
+ console.error('视频播放错误详情:', e.detail)
+ this.setData({
+ videoError: true,
+ isPlaying: false
+ })
+
+ wx.showModal({
+ title: '播放错误',
+ content: '视频加载失败，请检查网络或视频链接',
+ showCancel: true,
+ confirmText: '重试',
+ success: (res) => {
+ if (res.confirm) {
+ this.retryVideo()
+ }
+ }
+ })
+ },
+
+ // 视频播放事件
+ onVideoPlay(e) {
+ console.log('视频开始播放')
+ this.setData({
+ isPlaying: true,
+ videoError: false
+ })
+
+ // 播放时隐藏控制栏
+ if (this.data.fullScreen) {
+ this.hideControls()
+ }
+ },
+
+ // 视频暂停事件
+ onVideoPause(e) {
+ console.log('视频暂停')
+ this.setData({
+ isPlaying: false
+ })
+
+ // 暂停时显示控制栏
+ if (this.data.fullScreen) {
+ this.showControls()
+ }
+ },
+
+ // 视频播放结束
+ onVideoEnded(e) {
+ console.log('视频播放结束')
+ this.setData({
+ isPlaying: false,
+ currentTime: 0
+ })
+
+ // 结束播放时显示控制栏
+ if (this.data.fullScreen) {
+ this.showControls()
+ }
+ },
+
+ // 时间更新事件
+ onTimeUpdate(e) {
+ const currentTime = e.detail.currentTime
+ const duration = e.detail.duration
+
+ // 更新当前时间和总时长
+ this.setData({
+ currentTime: currentTime,
+ duration: duration > 0 ? duration : this.data.duration
+ })
+ },
+
+ // 全屏切换事件
+ onFullScreenChange(e) {
+ const fullScreen = e.detail.fullScreen
+ console.log('全屏状态变化:', fullScreen)
+
+ this.setData({
+ fullScreen: fullScreen,
+ controlsVisible: !fullScreen
+ })
+
+ if (fullScreen) {
+ wx.setKeepScreenOn({ keepScreenOn: true })
+ // 进入全屏后自动播放
+ setTimeout(() => {
+ this.videoContext.play()
+ }, 300)
+ } else {
+ wx.setKeepScreenOn({ keepScreenOn: false })
+ // 退出全屏时暂停
+ this.videoContext.pause()
+ }
+ },
+
+ // 进入全屏
+ enterFullScreen() {
+ this.videoContext.requestFullScreen({ direction: 90 })
+ },
+
+ // 退出全屏
+ exitFullScreen() {
+ this.videoContext.exitFullScreen()
+ },
+
+ // 切换播放状态
+ togglePlay() {
+ console.log('切换播放状态，当前状态:', this.data.isPlaying)
+ if (this.data.videoError) {
+ this.retryVideo()
+ return
+ }
+
+ if (this.data.isPlaying) {
+ this.videoContext.pause()
+ } else {
+ this.videoContext.play()
+ }
+ },
+
+ // 切换静音
+ toggleMute() {
+ const isMuted = !this.data.isMuted
+ this.setData({ isMuted: isMuted })
+ this.videoContext.muted(isMuted)
+
+ wx.showToast({
+ title: isMuted ? '已静音' : '已取消静音',
+ icon: 'none',
+ duration: 800
+ })
+ },
+
+ // 切换循环
+ toggleLoop() {
+ const loop = !this.data.loop
+ this.setData({ loop: loop })
+ this.videoContext.loop(loop)
+
+ wx.showToast({
+ title: loop ? '开启循环播放' : '关闭循环播放',
+ icon: 'none',
+ duration: 800
+ })
+ },
+
+ // 切换播放速度
+ toggleSpeed() {
+ const speeds = [0.5, 0.75, 1, 1.25, 1.5, 2]
+ const currentIndex = speeds.indexOf(this.data.playbackRate)
+ const nextIndex = (currentIndex + 1) % speeds.length
+ const nextSpeed = speeds[nextIndex]
+
+ this.setData({ playbackRate: nextSpeed })
+ this.videoContext.playbackRate(nextSpeed)
+
+ wx.showToast({
+ title: `播放速度 ${nextSpeed}x`,
+ icon: 'none',
+ duration: 800
+ })
+ },
+
+ // 重试播放
+ retryVideo() {
+ console.log('重试播放视频')
+ this.setData({
+ videoError: false,
+ loading: true
+ })
+
+ // 重新加载视频
+ setTimeout(() => {
+ this.setData({ loading: false })
+ if (this.videoContext) {
+ this.videoContext.seek(0)
+ this.videoContext.play()
+ }
+ }, 500)
+ },
+
+ // 触摸控制
+ onTouchControl(e) {
+ const type = e.currentTarget.dataset.type
+ const currentTime = this.data.currentTime
+ const duration = this.data.duration
+
+ if (type === 'backward') {
+ const newTime = Math.max(0, currentTime - 10)
+ this.setData({ currentTime: newTime })
+ this.videoContext.seek(newTime)
+
+ wx.showToast({
+ title: '-10秒',
+ icon: 'none',
+ duration: 500
+ })
+ } else if (type === 'forward') {
+ const newTime = Math.min(duration, currentTime + 10)
+ this.setData({ currentTime: newTime })
+ this.videoContext.seek(newTime)
+
+ wx.showToast({
+ title: '+10秒',
+ icon: 'none',
+ duration: 500
+ })
+ }
+ },
+
+ // 触摸移动
+ onTouchMove() {
+ if (this.data.fullScreen) {
+ this.showControls()
+ this.hideControls()
+ }
+ },
+
+ // 显示控制栏
+ showControls() {
+ this.setData({ controlsVisible: true })
+
+ // 清除之前的定时器
+ if (this.data.controlsTimer) {
+ clearTimeout(this.data.controlsTimer)
+ }
+
+ // 3秒后自动隐藏控制栏
+ const timer = setTimeout(() => {
+ if (this.data.isPlaying && this.data.fullScreen) {
+ this.setData({ controlsVisible: false })
+ }
+ }, 3000)
+
+ this.setData({ controlsTimer: timer })
+ },
+
+ // 隐藏控制栏
+ hideControls() {
+ if (this.data.controlsTimer) {
+ clearTimeout(this.data.controlsTimer)
+ }
+
+ const timer = setTimeout(() => {
+ if (this.data.isPlaying && this.data.fullScreen) {
+ this.setData({ controlsVisible: false })
+ }
+ }, 3000)
+
+ this.setData({ controlsTimer: timer })
+ },
+
+
+
+
+})
\ No newline at end of file
diff --git a/pagesB/pages/spDetails/spDetails.json b/pagesB/pages/spDetails/spDetails.json
new file mode 100644
index 0000000..c01e590
--- /dev/null
+++ b/pagesB/pages/spDetails/spDetails.json
@@ -0,0 +1,4 @@
+{
+ "navigationBarTitleText":"视频详情",
+ "usingComponents": {}
+}
\ No newline at end of file
diff --git a/pagesB/pages/spDetails/spDetails.wxml b/pagesB/pages/spDetails/spDetails.wxml
new file mode 100644
index 0000000..f9b654f
--- /dev/null
+++ b/pagesB/pages/spDetails/spDetails.wxml
@@ -0,0 +1,174 @@
+
+
+
+ {{video.title}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 返回
+
+ {{video.title}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{formatTime(currentTime)}}
+
+
+
+
+
+
+ {{formatTime(duration)}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{playbackRate}}x
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{video.publisherName}}
+ {{video.publisherDesc || '视频发布者'}}
+
+
+
+
+
+ 标签
+
+
+ {{item}}
+
+
+
+
+
+
+
+
+
+
+ 加载中...
+
+
+
+
+
+ 视频加载失败
+ 重试
+
+
\ No newline at end of file
diff --git a/pagesB/pages/spDetails/spDetails.wxss b/pagesB/pages/spDetails/spDetails.wxss
new file mode 100644
index 0000000..9cf2bd0
--- /dev/null
+++ b/pagesB/pages/spDetails/spDetails.wxss
@@ -0,0 +1,664 @@
+.video-detail-container {
+ min-height: 100vh;
+ background: linear-gradient(135deg, #0f172a 0%, #1a1e2c 100%);
+ position: relative;
+ }
+
+ /* 导航栏 */
+ .nav-bar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 88rpx;
+ padding: 0 30rpx;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.9) 100%);
+ backdrop-filter: blur(20rpx);
+ z-index: 1000;
+ border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
+ }
+
+ .nav-title {
+ font-size: 34rpx;
+ font-weight: 700;
+ color: #fff;
+ text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+ }
+
+
+
+
+ /* 视频播放器区域 */
+ .video-player-section {
+ width: 100%;
+ height: 500rpx;
+ position: relative;
+ background: #000;
+ overflow: hidden;
+ }
+
+ .video-player {
+ width: 100%;
+ height: 100%;
+ background: #000;
+ }
+
+ /* 视频封面 */
+ .video-cover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: #000;
+ z-index: 2;
+ }
+
+ .cover-image {
+ width: 100%;
+ height: 100%;
+ opacity: 0.9;
+ }
+
+ .cover-play-btn {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 120rpx;
+ height: 120rpx;
+ background: rgba(0, 0, 0, 0.6);
+ backdrop-filter: blur(20rpx);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 3rpx solid rgba(255, 255, 255, 0.3);
+ box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.5);
+ }
+
+ .cover-play-btn .play-icon {
+ width: 50rpx;
+ height: 50rpx;
+ margin-left: 8rpx;
+ filter: brightness(2);
+ }
+
+ /* 全屏控制栏 */
+ .fullscreen-controls {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 10;
+ opacity: 1;
+ transition: opacity 0.3s;
+ }
+
+ .fullscreen-controls.hidden {
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ .fullscreen-top-bar {
+ padding: 80rpx 40rpx 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
+ height: 120rpx;
+ }
+
+ .top-bar-left {
+ display: flex;
+ align-items: center;
+ gap: 16rpx;
+ padding: 16rpx 28rpx;
+ background: rgba(0, 0, 0, 0.6);
+ border-radius: 40rpx;
+ backdrop-filter: blur(20rpx);
+ border: 1rpx solid rgba(255, 255, 255, 0.1);
+ }
+
+ .back-text {
+ color: #fff;
+ font-size: 28rpx;
+ font-weight: 500;
+ text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
+ }
+
+ .top-bar-title {
+ font-size: 32rpx;
+ color: #fff;
+ max-width: 400rpx;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-weight: 600;
+ text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.5);
+ padding: 12rpx 24rpx;
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: 20rpx;
+ backdrop-filter: blur(10rpx);
+ }
+
+ /* 中间播放按钮 */
+ .center-play-btn {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 160rpx;
+ height: 160rpx;
+ background: rgba(0, 0, 0, 0.7);
+ backdrop-filter: blur(30rpx);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 4rpx solid rgba(255, 255, 255, 0.3);
+ z-index: 20;
+ box-shadow:
+ 0 12rpx 60rpx rgba(0, 0, 0, 0.5),
+ inset 0 0 0 1rpx rgba(255, 255, 255, 0.1);
+ animation: pulse 2s infinite;
+ }
+
+ @keyframes pulse {
+ 0% {
+ box-shadow:
+ 0 12rpx 60rpx rgba(0, 0, 0, 0.5),
+ inset 0 0 0 1rpx rgba(255, 255, 255, 0.1);
+ }
+ 50% {
+ box-shadow:
+ 0 12rpx 80rpx rgba(52, 152, 219, 0.4),
+ inset 0 0 0 1rpx rgba(52, 152, 219, 0.3);
+ }
+ 100% {
+ box-shadow:
+ 0 12rpx 60rpx rgba(0, 0, 0, 0.5),
+ inset 0 0 0 1rpx rgba(255, 255, 255, 0.1);
+ }
+ }
+
+ .play-large-icon {
+ width: 70rpx;
+ height: 70rpx;
+ margin-left: 10rpx;
+ filter: brightness(2) drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.5));
+ }
+
+ .play-ripple {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ border: 2rpx solid rgba(255, 255, 255, 0.4);
+ animation: ripple 2s infinite;
+ }
+
+ @keyframes ripple {
+ 0% {
+ width: 0;
+ height: 0;
+ opacity: 1;
+ }
+ 100% {
+ width: 240rpx;
+ height: 240rpx;
+ opacity: 0;
+ }
+ }
+
+ /* 底部控制栏 */
+ .fullscreen-bottom-bar {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 0 40rpx 80rpx;
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%);
+ }
+
+ .fullscreen-progress {
+ display: flex;
+ align-items: center;
+ gap: 24rpx;
+ margin-bottom: 60rpx;
+ padding: 0 20rpx;
+ }
+
+ .progress-time {
+ font-size: 26rpx;
+ color: rgba(255, 255, 255, 0.95);
+ min-width: 90rpx;
+ text-align: center;
+ font-weight: 500;
+ text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
+ }
+
+ .progress-slider-container {
+ flex: 1;
+ position: relative;
+ height: 8rpx;
+ background: rgba(255, 255, 255, 0.2);
+ border-radius: 4rpx;
+ overflow: hidden;
+ }
+
+ .progress-bg {
+ width: 100%;
+ height: 100%;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 4rpx;
+ }
+
+ .progress-current {
+ height: 100%;
+ background: linear-gradient(90deg, #3498db, #9b59b6);
+ border-radius: 4rpx;
+ transition: width 0.1s;
+ }
+
+ .progress-thumb {
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: 28rpx;
+ height: 28rpx;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow:
+ 0 4rpx 12rpx rgba(0, 0, 0, 0.5),
+ 0 0 0 2rpx #3498db;
+ }
+
+ .bottom-controls {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 80rpx;
+ padding: 30rpx 50rpx;
+ background: rgba(0, 0, 0, 0.7);
+ border-radius: 80rpx;
+ backdrop-filter: blur(30rpx);
+ margin: 0 auto;
+ max-width: 700rpx;
+ border: 1rpx solid rgba(255, 255, 255, 0.1);
+ }
+
+ .control-item {
+ width: 90rpx;
+ height: 90rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.1);
+ transition: all 0.2s;
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
+ }
+
+ .control-item:active {
+ background: rgba(255, 255, 255, 0.2);
+ transform: scale(0.9);
+ }
+
+ .control-icon {
+ width: 44rpx;
+ height: 44rpx;
+ filter: brightness(2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.3));
+ }
+
+ .speed-text {
+ color: #fff;
+ font-size: 30rpx;
+ font-weight: 700;
+ background: linear-gradient(135deg, #3498db, #9b59b6);
+ padding: 12rpx 28rpx;
+ border-radius: 40rpx;
+ box-shadow: 0 6rpx 24rpx rgba(52, 152, 219, 0.4);
+ }
+
+ /* 触摸控制区域 */
+ .touch-control-left,
+ .touch-control-center,
+ .touch-control-right {
+ position: absolute;
+ top: 120rpx;
+ bottom: 200rpx;
+ z-index: 5;
+ }
+
+ .touch-control-left {
+ left: 0;
+ width: 30%;
+ }
+
+ .touch-control-center {
+ left: 30%;
+ width: 40%;
+ }
+
+ .touch-control-right {
+ left: 70%;
+ width: 30%;
+ }
+
+ /* 非全屏播放按钮 */
+ .normal-play-btn {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 120rpx;
+ height: 120rpx;
+ background: rgba(0, 0, 0, 0.7);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 3;
+ border: 3rpx solid rgba(255, 255, 255, 0.3);
+ backdrop-filter: blur(10rpx);
+ box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.5);
+ }
+
+ .normal-play-btn .play-icon {
+ width: 50rpx;
+ height: 50rpx;
+ margin-left: 8rpx;
+ filter: brightness(2);
+ }
+
+ /* 视频信息区域 */
+ .video-info-section {
+ height: calc(100vh - 500rpx);
+ background: linear-gradient(180deg, #1a1e2c 0%, #0f172a 100%);
+ }
+
+ .video-header {
+ padding: 50rpx 40rpx 40rpx;
+ border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
+ }
+
+ .video-title {
+ font-size: 40rpx;
+ font-weight: 800;
+ color: #fff;
+ line-height: 1.3;
+ margin-bottom: 30rpx;
+ letter-spacing: 0.5rpx;
+ text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+ }
+
+ .video-description {
+ font-size: 30rpx;
+ color: rgba(255, 255, 255, 0.85);
+ line-height: 1.6;
+ margin-bottom: 40rpx;
+ }
+
+ .video-stats {
+ display: flex;
+ gap: 30rpx;
+ flex-wrap: wrap;
+ }
+
+ .stat-item {
+ display: flex;
+ align-items: center;
+ gap: 14rpx;
+ font-size: 26rpx;
+ color: rgba(255, 255, 255, 0.7);
+ padding: 14rpx 28rpx;
+ background: rgba(255, 255, 255, 0.08);
+ border-radius: 40rpx;
+ backdrop-filter: blur(10rpx);
+ }
+
+
+
+ /* 发布者信息 */
+ .publisher-section {
+ padding: 40rpx;
+ display: flex;
+ align-items: center;
+ gap: 30rpx;
+ border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
+ background: rgba(255, 255, 255, 0.03);
+ margin: 0 20rpx;
+ border-radius: 24rpx;
+ margin-top: 20rpx;
+ }
+
+ .publisher-avatar {
+ width: 120rpx;
+ height: 120rpx;
+ border-radius: 50%;
+ border: 4rpx solid #3498db;
+ box-shadow:
+ 0 12rpx 40rpx rgba(52, 152, 219, 0.5),
+ 0 0 0 1rpx rgba(255, 255, 255, 0.1);
+ background: #1e293b;
+ }
+
+ .publisher-info {
+ flex: 1;
+ }
+
+ .publisher-name {
+ font-size: 36rpx;
+ font-weight: 700;
+ color: #fff;
+ margin-bottom: 12rpx;
+ text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
+ }
+
+ .publisher-desc {
+ font-size: 26rpx;
+ color: rgba(255, 255, 255, 0.6);
+ line-height: 1.4;
+ }
+
+ /* 标签区域 */
+ .tags-section {
+ padding: 40rpx;
+ background: rgba(255, 255, 255, 0.03);
+ margin: 20rpx;
+ border-radius: 24rpx;
+ }
+
+ .section-title {
+ font-size: 32rpx;
+ font-weight: 700;
+ color: #fff;
+ margin-bottom: 30rpx;
+ text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
+ }
+
+ .tags-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20rpx;
+ }
+
+ .tag-item {
+ padding: 16rpx 36rpx;
+ background: linear-gradient(135deg, #3498db, #2ecc71);
+ color: white;
+ border-radius: 40rpx;
+ font-size: 26rpx;
+ font-weight: 600;
+ box-shadow: 0 6rpx 24rpx rgba(52, 152, 219, 0.4);
+ transition: all 0.2s;
+ }
+
+ .tag-item:active {
+ transform: scale(0.95);
+ box-shadow: 0 4rpx 16rpx rgba(52, 152, 219, 0.3);
+ }
+
+ /* 加载中 */
+ .loading-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(135deg, #0f172a 0%, #1a1e2c 100%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ z-index: 2000;
+ }
+
+ .loading-spinner {
+ position: relative;
+ width: 140rpx;
+ height: 140rpx;
+ margin-bottom: 50rpx;
+ }
+
+ .spinner-circle {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 100%;
+ height: 100%;
+ border: 10rpx solid transparent;
+ border-top-color: #3498db;
+ border-right-color: #3498db;
+ border-radius: 50%;
+ animation: spinnerRotate 1.2s linear infinite;
+ box-shadow: 0 0 20rpx rgba(52, 152, 219, 0.3);
+ }
+
+ @keyframes spinnerRotate {
+ 0% {
+ transform: translate(-50%, -50%) rotate(0deg);
+ }
+ 100% {
+ transform: translate(-50%, -50%) rotate(360deg);
+ }
+ }
+
+ .loading-text {
+ font-size: 32rpx;
+ color: rgba(255, 255, 255, 0.8);
+ letter-spacing: 3rpx;
+ font-weight: 500;
+ text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+ }
+
+ /* 错误提示 */
+ .error-container {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ z-index: 2000;
+ background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(26, 30, 44, 0.95));
+ padding: 80rpx 60rpx;
+ border-radius: 40rpx;
+ backdrop-filter: blur(40rpx);
+ border: 1rpx solid rgba(255, 255, 255, 0.1);
+ min-width: 500rpx;
+ box-shadow:
+ 0 20rpx 80rpx rgba(0, 0, 0, 0.5),
+ inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
+ }
+
+ .error-icon {
+ width: 140rpx;
+ height: 140rpx;
+ margin-bottom: 40rpx;
+ filter: brightness(1.5) drop-shadow(0 4rpx 12rpx rgba(0, 0, 0, 0.3));
+ }
+
+ .error-text {
+ font-size: 36rpx;
+ color: #fff;
+ margin-bottom: 50rpx;
+ font-weight: 700;
+ text-align: center;
+ text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+ }
+
+ .retry-btn {
+ padding: 24rpx 80rpx;
+ background: linear-gradient(135deg, #3498db, #2980b9);
+ color: white;
+ border-radius: 50rpx;
+ font-size: 32rpx;
+ font-weight: 700;
+ box-shadow:
+ 0 12rpx 40rpx rgba(52, 152, 219, 0.5),
+ inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
+ transition: all 0.2s;
+ letter-spacing: 2rpx;
+ }
+
+ .retry-btn:active {
+ transform: scale(0.95);
+ box-shadow:
+ 0 6rpx 24rpx rgba(52, 152, 219, 0.4),
+ inset 0 1rpx 0 rgba(255, 255, 255, 0.2);
+ }
+
+ /* 响应式调整 */
+ @media screen and (max-width: 750rpx) {
+ .video-player-section {
+ height: 450rpx;
+ }
+
+ .video-info-section {
+ height: calc(100vh - 450rpx);
+ }
+
+ .video-title {
+ font-size: 36rpx;
+ }
+
+ .video-description {
+ font-size: 28rpx;
+ }
+
+ .bottom-controls {
+ gap: 60rpx;
+ padding: 25rpx 40rpx;
+ max-width: 650rpx;
+ }
+
+ .center-play-btn {
+ width: 140rpx;
+ height: 140rpx;
+ }
+
+ .play-large-icon {
+ width: 60rpx;
+ height: 60rpx;
+ }
+
+ .fullscreen-top-bar {
+ padding: 60rpx 30rpx 0;
+ }
+
+ .fullscreen-bottom-bar {
+ padding: 0 30rpx 60rpx;
+ }
+ }
\ No newline at end of file
diff --git a/pagesB/pages/training/training.js b/pagesB/pages/training/training.js
index 98e8e7a..e208ebe 100644
--- a/pagesB/pages/training/training.js
+++ b/pagesB/pages/training/training.js
@@ -1,489 +1,393 @@
import http from '../../../utils/api'
const baseUrl = require('../../../utils/baseUrl')
+
Page({
data: {
currentTab: 0,
searchKeyword: '',
articleActiveCategory: 0,
- videoActiveCategory: 'all',
- baseUrl:baseUrl,
- // 文章数据
- articles: [
- {
- id: 1,
- title: '微信小程序开发最佳实践',
- description: '深度解析小程序性能优化方案，助你打造流畅用户体验',
- cover: 'https://via.placeholder.com/400x300/3498db/ffffff?text=小程序',
- category: '技术干货',
- author: '张技术',
- readTime: 15,
- date: '2024-01-15',
- views: 2345,
- likes: 189,
- categoryId: 'tech'
- },
- {
- id: 2,
- title: '企业数字化转型的关键路径',
- description: '传统企业如何通过数字化实现业务增长与效率提升',
- cover: 'https://via.placeholder.com/400x300/2ecc71/ffffff?text=数字化',
- category: '商业思维',
- author: '李商业',
- readTime: 20,
- date: '2024-01-12',
- views: 1567,
- likes: 234,
- categoryId: 'business'
- },
- {
- id: 3,
- title: '高效团队管理的7个秘诀',
- description: '打造高绩效团队的实用方法与技巧',
- cover: 'https://via.placeholder.com/400x300/e74c3c/ffffff?text=管理',
- category: '管理技能',
- author: '王经理',
- readTime: 12,
- date: '2024-01-10',
- views: 3210,
- likes: 456,
- categoryId: 'management'
- },
- {
- id: 4,
- title: '前端工程师的职业发展路径',
- description: '从初级到专家，前端工程师的成长路线图',
- cover: 'https://via.placeholder.com/400x300/9b59b6/ffffff?text=前端',
- category: '职业发展',
- author: '赵前端',
- readTime: 18,
- date: '2024-01-08',
- views: 1890,
- likes: 345,
- categoryId: 'career'
- },
- {
- id: 5,
- title: '云原生架构设计与实践',
- description: '基于云原生技术的现代应用架构方案',
- cover: 'https://via.placeholder.com/400x300/1abc9c/ffffff?text=云原生',
- category: '技术干货',
- author: '钱架构',
- readTime: 25,
- date: '2024-01-05',
- views: 2789,
- likes: 512,
- categoryId: 'tech'
- },
- {
- id: 6,
- title: '人工智能在商业中的应用',
- description: 'AI技术如何赋能传统行业实现智能化升级',
- cover: 'https://via.placeholder.com/400x300/f39c12/ffffff?text=AI',
- category: '商业思维',
- author: '孙智能',
- readTime: 22,
- date: '2024-01-03',
- views: 4321,
- likes: 678,
- categoryId: 'business'
- }
- ],
+ videoActiveCategory: '全部',
+ baseUrl: baseUrl,
- // 视频数据
- videos: [
- {
- id: 1,
- title: 'Vue.js 3.0 核心源码解析',
- cover: 'https://via.placeholder.com/400x300/3498db/ffffff?text=Vue3',
- duration: '45:23',
- instructor: {
- name: '前端大神',
- avatar: 'https://via.placeholder.com/40/3498db/ffffff?text=FS'
- },
- level: '高级',
- views: '12.3k',
- tags: ['Vue', '前端', '源码'],
- category: 'tech',
- isRecommended: true
- },
- {
- id: 2,
- title: 'React Hooks 深度解析',
- cover: 'https://via.placeholder.com/400x300/2ecc71/ffffff?text=React',
- duration: '38:45',
- instructor: {
- name: 'React专家',
- avatar: 'https://via.placeholder.com/40/2ecc71/ffffff?text=RE'
- },
- level: '中级',
- views: '8.7k',
- tags: ['React', 'Hooks', '前端'],
- category: 'tech',
- isRecommended: true
- },
- {
- id: 3,
- title: '产品经理必备的7个思维模型',
- cover: 'https://via.placeholder.com/400x300/e74c3c/ffffff?text=产品',
- duration: '52:12',
- instructor: {
- name: '产品专家',
- avatar: 'https://via.placeholder.com/40/e74c3c/ffffff?text=PM'
- },
- level: '中级',
- views: '15.2k',
- tags: ['产品', '思维', '方法论'],
- category: 'business',
- isRecommended: false
- },
- {
- id: 4,
- title: 'Python 数据分析实战',
- cover: 'https://via.placeholder.com/400x300/9b59b6/ffffff?text=Python',
- duration: '41:36',
- instructor: {
- name: '数据科学家',
- avatar: 'https://via.placeholder.com/40/9b59b6/ffffff?text=DS'
- },
- level: '初级',
- views: '23.4k',
- tags: ['Python', '数据分析', '实战'],
- category: 'tech',
- isRecommended: true
- },
- {
- id: 5,
- title: '高效沟通的艺术与技巧',
- cover: 'https://via.placeholder.com/400x300/1abc9c/ffffff?text=沟通',
- duration: '36:58',
- instructor: {
- name: '沟通专家',
- avatar: 'https://via.placeholder.com/40/1abc9c/ffffff?text=CM'
- },
- level: '初级',
- views: '9.8k',
- tags: ['沟通', '职场', '技巧'],
- category: 'management',
- isRecommended: false
- },
- {
- id: 6,
- title: 'Node.js 高性能服务开发',
- cover: 'https://via.placeholder.com/400x300/f39c12/ffffff?text=Node',
- duration: '55:42',
- instructor: {
- name: '后端架构师',
- avatar: 'https://via.placeholder.com/40/f39c12/ffffff?text=BE'
- },
- level: '高级',
- views: '6.5k',
- tags: ['Node.js', '后端', '性能'],
- category: 'tech',
- isRecommended: false
- },
- {
- id: 7,
- title: '职场晋升的底层逻辑',
- cover: 'https://via.placeholder.com/400x300/34495e/ffffff?text=晋升',
- duration: '33:27',
- instructor: {
- name: '职业规划师',
- avatar: 'https://via.placeholder.com/40/34495e/ffffff?text=CD'
- },
- level: '中级',
- views: '11.2k',
- tags: ['职场', '晋升', '规划'],
- category: 'career',
- isRecommended: true
- },
- {
- id: 8,
- title: 'JavaScript 入门到精通',
- cover: 'https://via.placeholder.com/400x300/e74c3c/ffffff?text=JS',
- duration: '1:15:30',
- instructor: {
- name: '前端导师',
- avatar: 'https://via.placeholder.com/40/e74c3c/ffffff?text=JS'
- },
- level: '初级',
- views: '45.6k',
- tags: ['JavaScript', '入门', '教程'],
- category: 'tech',
- isRecommended: true
+ // 文章相关
+ allArticles: [],
+ filteredArticles: [],
+ articlePageNo: 1,
+ articlePageSize: 10,
+ articleTotal: 0,
+ articleHasMore: true,
+ articleLoading: false,
+ articleRequested: false, // 标记文章数据是否已请求
+
+ // 视频相关
+ allVideos: [],
+ filteredVideos: [],
+ videoPageNo: 1,
+ videoPageSize: 10,
+ videoTotal: 0,
+ videoHasMore: true,
+ videoLoading: false,
+ videoRequested: false, // 标记视频数据是否已请求
+
+ // 字典数据
+ wzzd: [],
+ videoType: []
+ },
+
+ onLoad() {
+ this.getarticleZd()
+ this.getvideoZd()
+ this.loadInitialData()
+ },
+
+ // 加载初始数据
+ loadInitialData() {
+ if (this.data.currentTab === 0) {
+ this.resetArticleParams()
+ this.getArticleList(true)
+ } else {
+ this.resetVideoParams()
+ this.getVideoList(true)
+ }
+ },
+
+ // 文章字典
+ getarticleZd() {
+ http.articleZd({
+ data: {
+ dictType: 'article_category'
},
- {
- id: 9,
- title: '商业计划书撰写指南',
- cover: 'https://via.placeholder.com/400x300/1abc9c/ffffff?text=商业',
- duration: '28:45',
- instructor: {
- name: '商业顾问',
- avatar: 'https://via.placeholder.com/40/1abc9c/ffffff?text=BC'
- },
- level: '中级',
- views: '7.3k',
- tags: ['商业', '创业', '计划书'],
- category: 'business',
- isRecommended: false
+ success: res => {
+ this.setData({
+ wzzd: res.rows
+ })
+ }
+ })
+ },
+
+ // 视频字典
+ getvideoZd() {
+ http.videoZd({
+ data: {
+ dictType: 'video_category'
},
- {
- id: 10,
- title: '团队领导力提升训练',
- cover: 'https://via.placeholder.com/400x300/9b59b6/ffffff?text=领导力',
- duration: '49:18',
- instructor: {
- name: '领导力教练',
- avatar: 'https://via.placeholder.com/40/9b59b6/ffffff?text=LC'
- },
- level: '高级',
- views: '5.9k',
- tags: ['领导力', '管理', '团队'],
- category: 'management',
- isRecommended: true
+ success: res => {
+ this.setData({
+ videoType: res.rows
+ })
}
- ],
-
- filteredArticles: [],
- filteredVideos: []
+ })
},
- onLoad() {
- // 初始化数据
+ // 获取文章列表（支持搜索和分类）
+ getArticleList(isRefresh = false) {
+ if (this.data.articleLoading && !isRefresh) return
+
this.setData({
- // filteredArticles: this.data.articles,
- filteredVideos: this.data.videos
- });
- this.getarticle()
- this.getarticleZd()
+ articleLoading: true
+ })
+
+ const params = {
+ pageNo: this.data.articlePageNo,
+ pageSize: this.data.articlePageSize
+ }
+
+ // 添加搜索关键词
+ if (this.data.searchKeyword && this.data.searchKeyword.trim()) {
+ params.searchKey = this.data.searchKeyword.trim()
+ }
+
+ // 添加分类筛选
+ if (this.data.articleActiveCategory !== 0) {
+ const categoryDict = this.data.wzzd.find(item => item.dictSort === this.data.articleActiveCategory)
+ if (categoryDict) {
+ params.category = categoryDict.dictLabel
+ }
+ }
+
+ http.article({
+ data: params,
+ success: res => {
+ const newArticles = res.rows || []
+ const total = res.total || 0
+
+ let allArticles, filteredArticles
+ if (isRefresh) {
+ allArticles = newArticles
+ filteredArticles = newArticles
+ } else {
+ allArticles = [...this.data.allArticles, ...newArticles]
+ filteredArticles = [...this.data.filteredArticles, ...newArticles]
+ }
+
+ const hasMore = this.data.articlePageNo * this.data.articlePageSize < total
+
+ this.setData({
+ allArticles,
+ filteredArticles,
+ articleTotal: total,
+ articleHasMore: hasMore,
+ articleLoading: false,
+ articleRequested: true
+ })
+
+ // 如果是下拉刷新，停止刷新动画
+ if (isRefresh) {
+ wx.stopPullDownRefresh()
+ }
+ },
+ fail: () => {
+ this.setData({
+ articleLoading: false
+ })
+ wx.showToast({
+ title: '加载失败',
+ icon: 'error',
+ duration: 2000
+ })
+ }
+ })
},
- // 文章列表
- getarticle(){
- http.article({
- data:{},
- success:res=>{
- console.log(1111,res);
- this.setData({
- filteredArticles:res.rows
- })
- }
+ // 获取视频列表（支持搜索和分类）
+ getVideoList(isRefresh = false) {
+ if (this.data.videoLoading && !isRefresh) return
+
+ this.setData({
+ videoLoading: true
+ })
+
+ const params = {
+ pageNo: this.data.videoPageNo,
+ pageSize: this.data.videoPageSize
+ }
+
+ // 添加搜索关键词
+ if (this.data.searchKeyword && this.data.searchKeyword.trim()) {
+ params.searchKey = this.data.searchKeyword.trim()
+ }
+
+ // 添加分类筛选
+ if (this.data.videoActiveCategory !== '全部') {
+ params.category = this.data.videoActiveCategory
+ }
+
+ http.videoList({
+ data: params,
+ success: res => {
+ const newVideos = res.rows || []
+ const total = res.total || 0
+
+ let allVideos, filteredVideos
+ if (isRefresh) {
+ allVideos = newVideos
+ filteredVideos = newVideos
+ } else {
+ allVideos = [...this.data.allVideos, ...newVideos]
+ filteredVideos = [...this.data.filteredVideos, ...newVideos]
+ }
+
+ const hasMore = this.data.videoPageNo * this.data.videoPageSize < total
+
+ this.setData({
+ allVideos,
+ filteredVideos,
+ videoTotal: total,
+ videoHasMore: hasMore,
+ videoLoading: false,
+ videoRequested: true
+ })
+
+ // 如果是下拉刷新，停止刷新动画
+ if (isRefresh) {
+ wx.stopPullDownRefresh()
+ }
+ },
+ fail: () => {
+ this.setData({
+ videoLoading: false
+ })
+ wx.showToast({
+ title: '加载失败',
+ icon: 'error',
+ duration: 2000
})
- },
+ }
+ })
+ },
- // 文章字典
- getarticleZd(){
- http.articleZd({
- data:{
- dictType:'article_category'
- },
- success:res=>{
- console.log(2222,res);
- this.setData({
- wzzd:res.rows
- })
- }
- })
- },
+ // 重置文章参数
+ resetArticleParams() {
+ this.setData({
+ articlePageNo: 1,
+ articleTotal: 0,
+ articleHasMore: true,
+ allArticles: [],
+ filteredArticles: []
+ })
+ },
+ // 重置视频参数
+ resetVideoParams() {
+ this.setData({
+ videoPageNo: 1,
+ videoTotal: 0,
+ videoHasMore: true,
+ allVideos: [],
+ filteredVideos: []
+ })
+ },
// 切换主选项卡
switchTab(e) {
- const tab = parseInt(e.currentTarget.dataset.tab);
+ const tab = parseInt(e.currentTarget.dataset.tab)
+ if (tab === this.data.currentTab) return
+
this.setData({
currentTab: tab,
searchKeyword: ''
- });
+ })
- // 重置筛选结果
- if (tab === 0) {
- this.setData({
- filteredArticles: this.filterArticles('', this.data.articleActiveCategory)
- });
- } else {
- this.setData({
- filteredVideos: this.filterVideos('', this.data.videoActiveCategory)
- });
- }
+ // 延迟加载新tab的数据，确保切换动画完成
+ setTimeout(() => {
+ if (tab === 0) {
+ if (!this.data.articleRequested) {
+ this.resetArticleParams()
+ this.getArticleList(true)
+ }
+ } else {
+ if (!this.data.videoRequested) {
+ this.resetVideoParams()
+ this.getVideoList(true)
+ }
+ }
+ }, 300)
},
// 搜索输入
onSearchInput(e) {
- const keyword = e.detail.value;
- this.setData({ searchKeyword: keyword });
+ const keyword = e.detail.value
+ this.setData({
+ searchKeyword: keyword
+ })
+ // 防抖处理，500ms后执行搜索
+ clearTimeout(this.searchTimer)
+ this.searchTimer = setTimeout(() => {
+ this.performSearch()
+ }, 500)
+ },
+
+ // 执行搜索
+ performSearch() {
if (this.data.currentTab === 0) {
- this.setData({
- filteredArticles: this.filterArticles(keyword, this.data.articleActiveCategory)
- });
+ this.resetArticleParams()
+ this.getArticleList(true)
} else {
- this.setData({
- filteredVideos: this.filterVideos(keyword, this.data.videoActiveCategory)
- });
+ this.resetVideoParams()
+ this.getVideoList(true)
}
},
// 选择文章分类
selectArticleCategory(e) {
- console.log(3333,e);
- const category = Number(e.currentTarget.dataset.category);
- this.setData({
+ const category = Number(e.currentTarget.dataset.category)
+ if (category === this.data.articleActiveCategory) return
+
+ this.setData({
articleActiveCategory: category
- });
+ })
+
+ // 重置并重新加载数据
+ this.resetArticleParams()
+ this.getArticleList(true)
},
// 选择视频分类
selectVideoCategory(e) {
- const category = e.currentTarget.dataset.category;
- this.setData({ videoActiveCategory: category });
- this.setData({
- filteredVideos: this.filterVideos(this.data.searchKeyword, category)
- });
- },
-
- // 筛选文章函数
- filterArticles(keyword, category) {
- let filtered = this.data.articles;
-
- // 按分类筛选
- if (category !== 'all') {
- const categoryMap = {
- 'tech': '技术干货',
- 'business': '商业思维',
- 'management': '管理技能',
- 'career': '职业发展'
- };
-
- filtered = filtered.filter(item => item.category === categoryMap[category]);
- }
-
- // 按关键词筛选
- if (keyword) {
- const lowerKeyword = keyword.toLowerCase();
- filtered = filtered.filter(item =>
- item.title.toLowerCase().includes(lowerKeyword) ||
- item.description.toLowerCase().includes(lowerKeyword) ||
- item.author.toLowerCase().includes(lowerKeyword) ||
- item.category.toLowerCase().includes(lowerKeyword)
- );
- }
-
- return filtered;
- },
-
- // 筛选视频函数
- filterVideos(keyword, category) {
- let filtered = this.data.videos;
-
- // 按分类筛选
- if (category !== 'all') {
- switch (category) {
- case 'recommend':
- filtered = filtered.filter(item => item.isRecommended);
- break;
- case 'tech':
- filtered = filtered.filter(item => item.category === 'tech');
- break;
- case 'business':
- filtered = filtered.filter(item => item.category === 'business');
- break;
- case 'management':
- filtered = filtered.filter(item => item.category === 'management');
- break;
- case 'career':
- filtered = filtered.filter(item => item.category === 'career');
- break;
- case 'beginner':
- filtered = filtered.filter(item => item.level === '初级');
- break;
- case 'advanced':
- filtered = filtered.filter(item => item.level === '中级' || item.level === '高级');
- break;
- }
- }
+ const category = e.currentTarget.dataset.category
+ if (category === this.data.videoActiveCategory) return
- // 按关键词筛选
- if (keyword) {
- const lowerKeyword = keyword.toLowerCase();
- filtered = filtered.filter(item =>
- item.title.toLowerCase().includes(lowerKeyword) ||
- item.tags.some(tag => tag.toLowerCase().includes(lowerKeyword)) ||
- item.instructor.name.toLowerCase().includes(lowerKeyword) ||
- item.level.toLowerCase().includes(lowerKeyword)
- );
- }
+ this.setData({
+ videoActiveCategory: category
+ })
- return filtered;
+ // 重置并重新加载数据
+ this.resetVideoParams()
+ this.getVideoList(true)
},
// 查看文章详情
viewArticleDetail(e) {
- const id = e.currentTarget.dataset.id;
-
+ const id = e.currentTarget.dataset.id
+ console.log('查看文章详情', id)
+ wx.navigateTo({
+ url: `/pagesB/pages/wzDetails/wzDetails?id=${id}`
+ })
},
// 播放视频
playVideo(e) {
- const id = e.currentTarget.dataset.id;
-
-
+ const id = e.currentTarget.dataset.id
+ console.log('播放视频', id)
+ wx.navigateTo({
+ url: `/pagesB/pages/spDetails/spDetails?id=${id}`
+ })
},
// 下拉刷新
onPullDownRefresh() {
- wx.showLoading({
- title: '刷新中...'
- });
+ wx.showNavigationBarLoading()
- // 模拟网络请求
- setTimeout(() => {
- // 重置数据
- this.setData({
- filteredArticles: this.data.articles,
- filteredVideos: this.data.videos,
- articleActiveCategory: 'all',
- videoActiveCategory: 'all',
- searchKeyword: ''
- });
-
- wx.hideLoading();
- wx.stopPullDownRefresh();
- wx.showToast({
- title: '刷新成功',
- icon: 'success'
- });
- }, 1000);
+ if (this.data.currentTab === 0) {
+ this.resetArticleParams()
+ this.getArticleList(true)
+ } else {
+ this.resetVideoParams()
+ this.getVideoList(true)
+ }
+
+ // 重置搜索关键词
+ this.setData({
+ searchKeyword: ''
+ })
},
// 上拉加载更多
onReachBottom() {
if (this.data.currentTab === 0) {
- // 文章加载更多
- wx.showLoading({
- title: '加载更多文章...'
- });
-
- setTimeout(() => {
- // 这里可以添加更多文章数据
- wx.hideLoading();
+ if (!this.data.articleHasMore || this.data.articleLoading) {
wx.showToast({
- title: '没有更多了',
- icon: 'none'
- });
- }, 1000);
- } else {
- // 视频加载更多
- wx.showLoading({
- title: '加载更多视频...'
- });
+ title: '已加载全部',
+ icon: 'none',
+ duration: 1000
+ })
+ return
+ }
- setTimeout(() => {
- // 这里可以添加更多视频数据
- wx.hideLoading();
+ this.setData({
+ articlePageNo: this.data.articlePageNo + 1
+ })
+ this.getArticleList(false)
+ } else {
+ if (!this.data.videoHasMore || this.data.videoLoading) {
wx.showToast({
- title: '没有更多了',
- icon: 'none'
- });
- }, 1000);
+ title: '已加载全部',
+ icon: 'none',
+ duration: 1000
+ })
+ return
+ }
+
+ this.setData({
+ videoPageNo: this.data.videoPageNo + 1
+ })
+ this.getVideoList(false)
}
+ },
+
+ // 页面显示时刷新数据
+ onShow() {
+ // 如果需要返回时刷新数据，可以在这里调用
}
-});
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/pagesB/pages/training/training.wxml b/pagesB/pages/training/training.wxml
index 56f9d0b..201eb6a 100644
--- a/pagesB/pages/training/training.wxml
+++ b/pagesB/pages/training/training.wxml
@@ -65,6 +65,7 @@
bindtap="selectArticleCategory"
data-category="{{item.dictSort}}"
wx:for="{{wzzd}}"
+ wx:key="index"
>
{{item.dictLabel}}
@@ -112,7 +113,22 @@
-
+
+
+
+
+
+
+ 上拉加载更多
+
+
+
+
+
+ 加载中...
+
+
+ 已加载全部
@@ -149,67 +165,21 @@
全部视频
- 热门推荐
-
-
-
- 技术教程
-
-
-
- 商业知识
-
-
-
- 管理技能
-
-
-
- 职业发展
-
-
-
- 初级入门
-
-
-
- 进阶提升
+ {{item.dictLabel}}
@@ -223,13 +193,12 @@
wx:key="id"
bindtap="playVideo"
data-id="{{item.id}}"
- animation="{{item.animation}}"
>
-
+
+ {{item.category}}
- {{item.duration}}
@@ -241,21 +210,35 @@
{{item.title}}
-
- {{item.instructor.name}}
+
+ {{item.publisherName}}
- 2026-01-12
+ {{item.auditTime}}
- {{item.views}}
+ {{item.viewCount}}
-
-
+
+
+
+
+
+
+ 上拉加载更多
+
+
+
+
+
+ 加载中...
+
+
+ 已加载全部
@@ -266,7 +249,6 @@
-
暂无相关视频
换个关键词试试吧
diff --git a/pagesB/pages/training/training.wxss b/pagesB/pages/training/training.wxss
index 3ed584b..625b11d 100644
--- a/pagesB/pages/training/training.wxss
+++ b/pagesB/pages/training/training.wxss
@@ -1,4 +1,3 @@
-/* pages/training/training.wxss */
.training-container {
min-height: 100vh;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
@@ -32,12 +31,9 @@
}
@keyframes gradientText {
-
- 0%,
- 100% {
+ 0%, 100% {
background-position: 0% center;
}
-
50% {
background-position: 100% center;
}
@@ -107,27 +103,23 @@
}
@keyframes float {
-
- 0%,
- 100% {
+ 0%, 100% {
transform: translateY(0) scale(1);
}
-
50% {
transform: translateY(-20rpx) scale(1.05);
}
}
-/* 主选项卡样式优化 - 去除图标，优化切换样式 */
+/* 主选项卡样式优化 */
.tabs {
display: flex;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10rpx);
border-radius: 18rpx;
- margin-bottom: 50rpx;
- box-shadow:
- 0 8rpx 30rpx rgba(0, 0, 0, 0.08),
- inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
+ margin-bottom: 30rpx;
+ box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08),
+ inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
border: 1rpx solid rgba(226, 232, 240, 0.8);
position: relative;
overflow: hidden;
@@ -167,9 +159,8 @@
background: linear-gradient(135deg, #3498db, #2ecc71);
border-radius: 12rpx;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
- box-shadow:
- 0 4rpx 20rpx rgba(52, 152, 219, 0.25),
- 0 2rpx 8rpx rgba(52, 152, 219, 0.15);
+ box-shadow: 0 4rpx 20rpx rgba(52, 152, 219, 0.25),
+ 0 2rpx 8rpx rgba(52, 152, 219, 0.15);
z-index: 1;
}
@@ -203,13 +194,10 @@
}
@keyframes highlightPulse {
-
- 0%,
- 100% {
+ 0%, 100% {
box-shadow: 0 2rpx 6rpx rgba(52, 152, 219, 0.3);
transform: translateX(-50%) scale(1);
}
-
50% {
box-shadow: 0 2rpx 12rpx rgba(52, 152, 219, 0.5);
transform: translateX(-50%) scale(1.1);
@@ -226,7 +214,6 @@
opacity: 0;
transform: translateY(40rpx);
}
-
to {
opacity: 1;
transform: translateY(0);
@@ -236,7 +223,7 @@
/* 搜索框样式优化 */
.search-box {
position: relative;
- margin-bottom: 50rpx;
+ margin-bottom: 30rpx;
animation: slideIn 0.8s ease;
}
@@ -245,7 +232,6 @@
opacity: 0;
transform: translateX(-30rpx);
}
-
to {
opacity: 1;
transform: translateX(0);
@@ -258,9 +244,8 @@
border-radius: 25rpx;
padding: 20rpx 40rpx 20rpx 100rpx;
font-size: 28rpx;
- box-shadow:
- 0 8rpx 30rpx rgba(0, 0, 0, 0.08),
- inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+ box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08),
+ inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
border: 1rpx solid rgba(255, 255, 255, 0.5);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
@@ -269,9 +254,8 @@
.search-input:focus {
border-color: rgba(52, 152, 219, 0.3);
- box-shadow:
- 0 12rpx 40rpx rgba(52, 152, 219, 0.15),
- inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+ box-shadow: 0 12rpx 40rpx rgba(52, 152, 219, 0.15),
+ inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
transform: translateY(-2rpx);
}
@@ -286,11 +270,6 @@
transition: all 0.3s ease;
}
-.search-input:focus+.search-decoration .search-wave,
-.search-input:focus .search-icon {
- animation: pulse 2s ease infinite;
-}
-
.search-decoration {
position: absolute;
top: 0;
@@ -319,41 +298,25 @@
0% {
transform: translateX(0);
}
-
100% {
transform: translateX(50%);
}
}
-@keyframes pulse {
-
- 0%,
- 100% {
- transform: translateY(-50%) scale(1);
- opacity: 1;
- }
-
- 50% {
- transform: translateY(-50%) scale(1.1);
- opacity: 0.8;
- }
-}
-
.placeholder-style {
color: #94a3b8;
font-size: 28rpx;
}
-/* 分类筛选样式优化 - 去除图标 */
+/* 分类筛选样式优化 */
.category-scroll {
white-space: nowrap;
- margin-bottom: 50rpx;
+ margin-bottom: 30rpx;
padding: 0 10rpx;
}
.category-list {
display: inline-flex;
- padding: 0 20rpx 20rpx;
gap: 20rpx;
}
@@ -367,10 +330,6 @@
border-radius: 25rpx;
font-size: 28rpx;
color: #64748b;
- box-shadow:
- 0 4rpx 15rpx rgba(0, 0, 0, 0.05),
- inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
- border: 1rpx solid rgba(255, 255, 255, 0.3);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
@@ -386,28 +345,8 @@
.category-item.active {
background: linear-gradient(135deg, #3498db, #2ecc71);
color: white;
- box-shadow:
- 0 8rpx 25rpx rgba(52, 152, 219, 0.25),
- inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
border-color: transparent;
font-weight: 600;
- animation: categoryPulse 2s ease infinite;
-}
-
-@keyframes categoryPulse {
-
- 0%,
- 100% {
- box-shadow:
- 0 8rpx 25rpx rgba(52, 152, 219, 0.25),
- inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
- }
-
- 50% {
- box-shadow:
- 0 12rpx 35rpx rgba(52, 152, 219, 0.4),
- inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
- }
}
.category-indicator {
@@ -429,12 +368,9 @@
}
@keyframes indicatorBounce {
-
- 0%,
- 100% {
+ 0%, 100% {
transform: translateX(-50%) translateY(0);
}
-
50% {
transform: translateX(-50%) translateY(-4rpx);
}
@@ -451,9 +387,8 @@
border-radius: 25rpx;
margin-bottom: 35rpx;
overflow: hidden;
- box-shadow:
- 0 10rpx 35rpx rgba(0, 0, 0, 0.08),
- inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+ box-shadow: 0 10rpx 35rpx rgba(0, 0, 0, 0.08),
+ inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
border: 1rpx solid rgba(255, 255, 255, 0.5);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
@@ -491,9 +426,8 @@
.article-card:active {
transform: translateY(-8rpx);
- box-shadow:
- 0 20rpx 50rpx rgba(0, 0, 0, 0.15),
- inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+ box-shadow: 0 20rpx 50rpx rgba(0, 0, 0, 0.15),
+ inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
}
.article-card::before {
@@ -661,13 +595,11 @@
transform: scale(1.1);
}
-
-
-/* 视频列表样式优化 */
+/* 视频列表样式*/
.videos-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
- gap: 35rpx;
+ gap: 20rpx;
margin-top: 20rpx;
}
@@ -676,9 +608,8 @@
backdrop-filter: blur(10rpx);
border-radius: 25rpx;
overflow: hidden;
- box-shadow:
- 0 10rpx 35rpx rgba(0, 0, 0, 0.08),
- inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+ box-shadow: 0 10rpx 35rpx rgba(0, 0, 0, 0.08),
+ inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
border: 1rpx solid rgba(255, 255, 255, 0.5);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
@@ -720,9 +651,8 @@
.video-card:active {
transform: scale(0.95);
- box-shadow:
- 0 20rpx 50rpx rgba(0, 0, 0, 0.15),
- inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+ box-shadow: 0 20rpx 50rpx rgba(0, 0, 0, 0.15),
+ inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
}
.video-card::before {
@@ -780,24 +710,20 @@
transform: translate(-50%, -50%);
width: 80rpx;
height: 80rpx;
- background: rgba(255, 255, 255, 0.95);
+ background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10rpx);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
- box-shadow:
- 0 10rpx 30rpx rgba(0, 0, 0, 0.3),
- inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
z-index: 2;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.video-card:active .play-button {
transform: translate(-50%, -50%) scale(1.1);
- box-shadow:
- 0 15rpx 40rpx rgba(0, 0, 0, 0.4),
- inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+ box-shadow: 0 15rpx 40rpx rgba(0, 0, 0, 0.4),
+ inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
}
.play-icon {
@@ -834,7 +760,6 @@
opacity: 1;
transform: translate(-50%, -50%) scale(0);
}
-
to {
opacity: 0;
transform: translate(-50%, -50%) scale(1);
@@ -900,7 +825,6 @@
font-weight: 500;
}
-
.video-meta {
display: flex;
justify-content: space-between;
@@ -927,8 +851,6 @@
transform: scale(1.1);
}
-
-
/* 空状态样式优化 */
.empty-state {
display: flex;
@@ -976,20 +898,16 @@
}
@keyframes emptyFloat {
-
- 0%,
- 100% {
+ 0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.3;
}
-
50% {
transform: translate(-50%, -50%) scale(1.1);
opacity: 0.1;
}
}
-
.empty-text {
font-size: 32rpx;
color: #64748b;
@@ -1007,6 +925,74 @@
z-index: 1;
}
+/* 加载更多样式 */
+.load-more,
+.loading-more,
+.no-more {
+ text-align: center;
+ padding: 40rpx 0;
+ font-size: 26rpx;
+ color: #94a3b8;
+ position: relative;
+}
+
+.loading-more {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 15rpx;
+}
+
+.loading-dot {
+ width: 16rpx;
+ height: 16rpx;
+ background: #3498db;
+ border-radius: 50%;
+ animation: loadingDot 1.4s infinite ease-in-out both;
+}
+
+.loading-dot:nth-child(1) {
+ animation-delay: -0.32s;
+}
+
+.loading-dot:nth-child(2) {
+ animation-delay: -0.16s;
+}
+
+@keyframes loadingDot {
+ 0%, 80%, 100% {
+ transform: scale(0);
+ opacity: 0.3;
+ }
+ 40% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+.no-more {
+ color: #64748b;
+ position: relative;
+}
+
+.no-more::before,
+.no-more::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ width: 100rpx;
+ height: 1rpx;
+ background: rgba(100, 116, 139, 0.2);
+}
+
+.no-more::before {
+ left: 20%;
+}
+
+.no-more::after {
+ right: 20%;
+}
+
/* 响应式调整 */
@media screen and (max-width: 750rpx) {
.videos-grid {
@@ -1038,25 +1024,19 @@
.tab-item {
font-size: 30rpx;
}
-}
-
-/* 加载动画优化 */
-@keyframes pulse {
-
- 0%,
- 100% {
- opacity: 1;
- transform: scale(1);
+
+ .no-more::before,
+ .no-more::after {
+ width: 80rpx;
}
-
- 50% {
- opacity: 0.7;
- transform: scale(0.95);
+
+ .no-more::before {
+ left: 15%;
+ }
+
+ .no-more::after {
+ right: 15%;
}
-}
-
-.loading {
- animation: pulse 1.5s ease-in-out infinite;
}
/* 滚动条样式 */
diff --git a/pagesB/pages/wzDetails/wzDetails.js b/pagesB/pages/wzDetails/wzDetails.js
new file mode 100644
index 0000000..8a0f73e
--- /dev/null
+++ b/pagesB/pages/wzDetails/wzDetails.js
@@ -0,0 +1,99 @@
+import http from '../../../utils/api'
+const baseUrl = require('../../../utils/baseUrl')
+
+Page({
+ data: {
+ baseUrl: baseUrl,
+ article: {}, // 文章详情
+ loading: true, // 加载状态
+ },
+
+ onLoad(options) {
+ this.getArticleDetails(options.id)
+ },
+
+ // 获取文章详情
+ getArticleDetails(id) {
+ this.setData({
+ loading: true
+ })
+
+ http.articleDetails({
+ data: { id },
+ success: res => {
+ console.log('文章详情:', res)
+ if (res.code === 200 && res.data) {
+ // 解析富文本内容
+ const article = res.data
+ // 这里可以处理富文本内容的样式
+ article.content = this.formatRichContent(article.content)
+
+ this.setData({
+ article: article,
+ loading: false
+ })
+
+ // 设置页面标题
+ wx.setNavigationBarTitle({
+ title: article.title.substring(0, 10) + (article.title.length > 10 ? '...' : '')
+ })
+ } else {
+ wx.showToast({
+ title: '文章不存在',
+ icon: 'error'
+ })
+ setTimeout(() => {
+ wx.navigateBack()
+ }, 2000)
+ }
+ },
+ fail: err => {
+ console.error('获取文章详情失败:', err)
+ this.setData({
+ loading: false
+ })
+ wx.showToast({
+ title: '加载失败',
+ icon: 'error'
+ })
+ }
+ })
+ },
+
+
+ // 格式化富文本内容
+ formatRichContent(content) {
+ // 这里可以添加自定义样式，比如给图片添加样式
+ return content.replace(/![]()
+
+
+
+
+
+
+
+
+ {{article.category}}
+
+
+
+
+
+
+ {{article.title}}
+ {{article.subtitle}}
+
+
+
+
+
+ {{article.expertName}}
+ {{article.publishTime}}
+
+
+
+ {{article.viewCount}} 阅读
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 加载中...
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pagesB/pages/wzDetails/wzDetails.wxss b/pagesB/pages/wzDetails/wzDetails.wxss
new file mode 100644
index 0000000..8b993b1
--- /dev/null
+++ b/pagesB/pages/wzDetails/wzDetails.wxss
@@ -0,0 +1,322 @@
+.article-detail-container {
+ min-height: 100vh;
+ background: #f8fafc;
+ position: relative;
+ }
+
+
+ /* 文章内容容器 */
+ .article-content {
+ height: 100vh;
+ position: relative;
+ }
+
+ /* 文章封面 */
+ .article-cover {
+ position: relative;
+ height: 500rpx;
+ overflow: hidden;
+ }
+
+ .cover-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .cover-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
+ }
+
+ .cover-gradient {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 200rpx;
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
+ }
+
+ .cover-category {
+ position: absolute;
+ top: 40rpx;
+ right: 40rpx;
+ background: rgba(52, 152, 219, 0.95);
+ backdrop-filter: blur(10rpx);
+ color: white;
+ padding: 12rpx 28rpx;
+ border-radius: 25rpx;
+ font-size: 24rpx;
+ font-weight: 600;
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
+ z-index: 2;
+ }
+
+ /* 文章主体 */
+ .article-body {
+ background: white;
+ border-radius: 40rpx 40rpx 0 0;
+ margin-top: -40rpx;
+ position: relative;
+ z-index: 10;
+ padding-bottom: 50rpx;
+ }
+
+ .title-section {
+ padding: 50rpx 40rpx 40rpx;
+ border-bottom: 1rpx solid #f1f5f9;
+ }
+
+ .article-title {
+ font-size: 44rpx;
+ font-weight: 800;
+ color: #1e293b;
+ line-height: 1.4;
+ margin-bottom: 20rpx;
+ letter-spacing: 0.5rpx;
+ }
+
+ .article-subtitle {
+ font-size: 30rpx;
+ color: #64748b;
+ line-height: 1.6;
+ margin-bottom: 40rpx;
+ padding-bottom: 30rpx;
+ border-bottom: 1rpx dashed #e2e8f0;
+ }
+
+ /* 专家信息 */
+ .expert-info {
+ display: flex;
+ align-items: center;
+ gap: 20rpx;
+ margin-top: 30rpx;
+ }
+
+ .expert-avatar {
+ width: 80rpx;
+ height: 80rpx;
+ border-radius: 50%;
+ border: 3rpx solid white;
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+ }
+
+ .expert-detail {
+ flex: 1;
+ }
+
+ .expert-name {
+ font-size: 28rpx;
+ font-weight: 600;
+ color: #1e293b;
+ margin-bottom: 8rpx;
+ }
+
+ .publish-time {
+ font-size: 24rpx;
+ color: #94a3b8;
+ }
+
+ .view-count {
+ display: flex;
+ align-items: center;
+ gap: 10rpx;
+ background: rgba(226, 232, 240, 0.3);
+ padding: 12rpx 20rpx;
+ border-radius: 25rpx;
+ font-size: 24rpx;
+ color: #64748b;
+ }
+
+ .view-icon {
+ width: 28rpx;
+ height: 28rpx;
+ opacity: 0.7;
+ }
+
+ /* 富文本内容 */
+ .rich-content {
+ padding: 40rpx;
+ font-size: 32rpx;
+ line-height: 1.8;
+ color: #334155;
+ }
+
+ .rich-content h1,
+ .rich-content h2,
+ .rich-content h3 {
+ color: #1e293b;
+ margin: 40rpx 0 20rpx;
+ font-weight: 700;
+ }
+
+ .rich-content h1 {
+ font-size: 40rpx;
+ }
+
+ .rich-content h2 {
+ font-size: 36rpx;
+ }
+
+ .rich-content h3 {
+ font-size: 32rpx;
+ }
+
+ .rich-content p {
+ margin-bottom: 30rpx;
+ }
+
+ .rich-content ul,
+ .rich-content ol {
+ margin: 20rpx 0 20rpx 40rpx;
+ }
+
+ .rich-content li {
+ margin-bottom: 15rpx;
+ position: relative;
+ }
+
+ .rich-content ul li:before {
+ content: '•';
+ color: #3498db;
+ font-weight: bold;
+ position: absolute;
+ left: -25rpx;
+ }
+
+ .rich-content strong {
+ color: #1e293b;
+ font-weight: 700;
+ }
+
+ .rich-content a {
+ color: #3498db;
+ text-decoration: underline;
+ }
+
+
+
+
+ /* 加载中 */
+ .loading-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(255, 255, 255, 0.95);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ z-index: 2000;
+ }
+
+ .loading-spinner {
+ position: relative;
+ width: 120rpx;
+ height: 120rpx;
+ margin-bottom: 40rpx;
+ }
+
+ .spinner-circle {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 100%;
+ height: 100%;
+ border: 8rpx solid rgba(52, 152, 219, 0.1);
+ border-radius: 50%;
+ animation: spinnerRotate 2s linear infinite;
+ }
+
+ .spinner-circle.circle-2 {
+ width: 80%;
+ height: 80%;
+ border-width: 6rpx;
+ animation-delay: 0.2s;
+ }
+
+ .spinner-circle.circle-3 {
+ width: 60%;
+ height: 60%;
+ border-width: 4rpx;
+ animation-delay: 0.4s;
+ }
+
+ @keyframes spinnerRotate {
+ 0% {
+ transform: translate(-50%, -50%) rotate(0deg);
+ }
+ 100% {
+ transform: translate(-50%, -50%) rotate(360deg);
+ }
+ }
+
+ .loading-text {
+ font-size: 28rpx;
+ color: #64748b;
+ letter-spacing: 1rpx;
+ }
+
+ /* 回到顶部 */
+ .back-to-top {
+ position: fixed;
+ right: 40rpx;
+ bottom: 160rpx;
+ width: 80rpx;
+ height: 80rpx;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10rpx);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
+ border: 1rpx solid rgba(226, 232, 240, 0.8);
+ transition: all 0.3s ease;
+ z-index: 90;
+ }
+
+ .back-to-top:active {
+ transform: scale(0.95);
+ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
+ }
+
+ .top-icon {
+ width: 36rpx;
+ height: 36rpx;
+ }
+
+ /* 响应式调整 */
+ @media screen and (max-width: 750rpx) {
+ .article-cover {
+ height: 400rpx;
+ }
+
+ .article-title {
+ font-size: 38rpx;
+ }
+
+ .article-subtitle {
+ font-size: 28rpx;
+ }
+
+ .rich-content {
+ font-size: 30rpx;
+ }
+
+ .action-bar {
+ padding: 0 30rpx;
+ }
+
+ .comment-btn {
+ padding: 18rpx 30rpx;
+ }
+ }
\ No newline at end of file
diff --git a/project.private.config.json b/project.private.config.json
index 2b87105..06ba0ee 100644
--- a/project.private.config.json
+++ b/project.private.config.json
@@ -19,6 +19,6 @@
"checkInvalidKey": true,
"ignoreDevUnusedFiles": true
},
- "libVersion": "3.13.0",
+ "libVersion": "3.14.1",
"condition": {}
}
\ No newline at end of file
diff --git a/utils/api.js b/utils/api.js
index 8e2e1f1..a29a490 100644
--- a/utils/api.js
+++ b/utils/api.js
@@ -121,12 +121,47 @@ function policyeDetails(params) {
http('/system/interpretation/published/' + params.data.id, 'get', params)
}
+// 政策解读类型字典
+function policyeZd(params) {
+ http('/system/dict/data/list', 'get', params)
+}
+
+// 行政区划
+function areaChildren(params) {
+ http('/muhu/user/areaChildren', 'get', params)
+}
+
+// 提交行政区划信息
+function userCode(params) {
+ http('/muhu/user/saveUserAreaCode/' + params.data.areaCode, 'put', params)
+}
+
+// 查询用户信息
+function UserInfo(params) {
+ http('/muhu/user/getUserInfo', 'get', params)
+}
+
+// 视频列表
+function videoList(params) {
+ http('/vet/training/public/list', 'get', params)
+}
+
+// 视频详情
+function videoDetails(params) {
+ http('/vet/training/public/'+params.data.id, 'get', params)
+}
+
+// 视频字典
+function videoZd(params) {
+ http('/system/dict/data/list', 'get', params)
+}
export default { // 暴露接口
login,carousel,disaster,pharmacy,guidance,getPhoneNumber,inquiry,policyeDetails,
- search,trend,feed,sales,wzd,wzdxq,wzdAdd,expertsList,recommendationList,
- recommendationXq,queryList,tipList,article,articleDetails,articleZd,policyelucidation
+ search,trend,feed,sales,wzd,wzdxq,wzdAdd,expertsList,recommendationList,policyeZd,
+ recommendationXq,queryList,tipList,article,articleDetails,articleZd,policyelucidation,
+ areaChildren,userCode,UserInfo,videoList,videoZd,videoDetails
}