ZhaoYang
2 months ago
43 changed files with 5968 additions and 303 deletions
-
8app.json
-
41pages/home/home.js
-
6pages/home/home.wxml
-
18pages/home/home.wxss
-
BINpages/images/sjh.png
-
BINpagesA/images/jh.png
-
66pagesA/pages/askingSy/askingSy.js
-
3pagesA/pages/askingSy/askingSy.json
-
2pagesA/pages/askingSy/askingSy.wxml
-
1pagesA/pages/askingSy/askingSy.wxss
-
154pagesA/pages/carouselDetail/carouselDetail.js
-
4pagesA/pages/carouselDetail/carouselDetail.json
-
104pagesA/pages/carouselDetail/carouselDetail.wxml
-
284pagesA/pages/carouselDetail/carouselDetail.wxss
-
BINpagesB/images/bo.png
-
BINpagesB/images/hf.png
-
BINpagesB/images/lll.png
-
BINpagesB/images/sou.png
-
286pagesB/pages/administrativeDivision/administrativeDivision.js
-
4pagesB/pages/administrativeDivision/administrativeDivision.json
-
95pagesB/pages/administrativeDivision/administrativeDivision.wxml
-
316pagesB/pages/administrativeDivision/administrativeDivision.wxss
-
580pagesB/pages/publishAdd/publishAdd.js
-
4pagesB/pages/publishAdd/publishAdd.json
-
205pagesB/pages/publishAdd/publishAdd.wxml
-
457pagesB/pages/publishAdd/publishAdd.wxss
-
66pagesB/pages/repository/repository.js
-
3pagesB/pages/repository/repository.json
-
2pagesB/pages/repository/repository.wxml
-
1pagesB/pages/repository/repository.wxss
-
381pagesB/pages/spDetails/spDetails.js
-
4pagesB/pages/spDetails/spDetails.json
-
174pagesB/pages/spDetails/spDetails.wxml
-
664pagesB/pages/spDetails/spDetails.wxss
-
402pagesB/pages/training/training.js
-
4pagesB/pages/training/training.json
-
215pagesB/pages/training/training.wxml
-
1105pagesB/pages/training/training.wxss
-
99pagesB/pages/wzDetails/wzDetails.js
-
4pagesB/pages/wzDetails/wzDetails.json
-
62pagesB/pages/wzDetails/wzDetails.wxml
-
322pagesB/pages/wzDetails/wzDetails.wxss
-
123utils/api.js
|
After Width: 200 | Height: 200 | Size: 4.7 KiB |
|
After Width: 200 | Height: 200 | Size: 1.7 KiB |
@ -1,66 +0,0 @@ |
|||
// pagesA/pages/askingSy/askingSy.js
|
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
|
|||
} |
|||
}) |
|||
@ -1,3 +0,0 @@ |
|||
{ |
|||
"usingComponents": {} |
|||
} |
|||
@ -1,2 +0,0 @@ |
|||
<!--pagesA/pages/askingSy/askingSy.wxml--> |
|||
<text>pagesA/pages/askingSy/askingSy.wxml</text> |
|||
@ -1 +0,0 @@ |
|||
/* pagesA/pages/askingSy/askingSy.wxss */ |
|||
@ -0,0 +1,154 @@ |
|||
import http from '../../../utils/api'; |
|||
const baseUrl = require('../../../utils/baseUrl'); |
|||
|
|||
Page({ |
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
baseUrl: baseUrl, |
|||
detailInfo: {}, |
|||
id: null, |
|||
cardAnimation: {} // 卡片动画数据
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
if (options.id) { |
|||
this.setData({ id: options.id }); |
|||
this.getCarouselDetail(options.id); |
|||
this.initAnimation(); |
|||
} else { |
|||
wx.showToast({ |
|||
title: '参数错误', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 初始化卡片动画 |
|||
*/ |
|||
initAnimation() { |
|||
const animation = wx.createAnimation({ |
|||
duration: 600, |
|||
timingFunction: 'ease-out', |
|||
delay: 100 |
|||
}); |
|||
|
|||
animation.translateY(0).opacity(1).step(); |
|||
|
|||
this.setData({ |
|||
cardAnimation: animation.export() |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 获取轮播详情 |
|||
*/ |
|||
getCarouselDetail(id) { |
|||
wx.showLoading({ title: '加载中...', mask: true }); |
|||
|
|||
http.carouselDetail({ |
|||
data: { id: id }, |
|||
success: (res) => { |
|||
wx.hideLoading(); |
|||
console.log('轮播详情:', res); |
|||
|
|||
if (res && res.code === 200 && res.data) { |
|||
this.setData({ |
|||
detailInfo: res.data |
|||
}); |
|||
wx.setNavigationBarTitle({ |
|||
title: res.data.title || '轮播详情' |
|||
}); |
|||
} else { |
|||
wx.showToast({ |
|||
title: res?.msg || '数据加载失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
wx.hideLoading(); |
|||
console.error('请求失败:', err); |
|||
wx.showToast({ |
|||
title: '网络错误', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 颜色调整函数（用于渐变效果） |
|||
*/ |
|||
adjustColor(hex, percent) { |
|||
if (!hex) return '#4CAF50'; |
|||
// 简单实现：如果传入颜色，返回稍浅的版本
|
|||
// 这里为了简化，直接返回原色稍微变浅，实际项目中可使用颜色处理库
|
|||
return hex; |
|||
}, |
|||
|
|||
/** |
|||
* 图片加载错误处理 |
|||
*/ |
|||
imageLoadError(e) { |
|||
console.warn('图片加载失败', e); |
|||
|
|||
}, |
|||
|
|||
|
|||
/** |
|||
* 返回上一页 |
|||
*/ |
|||
goBack() { |
|||
wx.navigateBack({ |
|||
delta: 1 |
|||
}); |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() {}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() {}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() {}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() {}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() {}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() {}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
const { title, imageUrl } = this.data.detailInfo; |
|||
return { |
|||
title: title || '轮播详情', |
|||
imageUrl: this.data.baseUrl + (imageUrl || ''), |
|||
path: `/pages/carousel/detail/detail?id=${this.data.id}` |
|||
}; |
|||
} |
|||
}); |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"navigationBarTitleText":"轮播详情", |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,104 @@ |
|||
<view class="carousel-detail-container" style="--bg-color: {{detailInfo.bgColor || '#F8F9FA'}};"> |
|||
|
|||
<!-- 沉浸式头部，带渐变遮罩和返回按钮 --> |
|||
<view class="hero-section"> |
|||
<image |
|||
class="hero-image" |
|||
src="{{baseUrl + detailInfo.imageUrl}}" |
|||
mode="aspectFill" |
|||
binderror="imageLoadError" |
|||
></image> |
|||
<view class="hero-overlay" style="background: linear-gradient(to bottom, transparent 30%, {{detailInfo.bgColor || '#F8F9FA'}} 90%);"></view> |
|||
|
|||
<!-- 返回按钮 --> |
|||
<view class="nav-back glass" bindtap="goBack"> |
|||
<text class="iconfont icon-back">←</text> |
|||
</view> |
|||
|
|||
<!-- 页面标题 - 仅在需要时显示 --> |
|||
<view class="page-title glass" wx:if="{{detailInfo.adsType}}"> |
|||
<text>{{detailInfo.adsType}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 主要内容卡片 --> |
|||
<view class="content-card" animation="{{cardAnimation}}" style="--text-color: {{detailInfo.textColor || '#2E7D32'}};"> |
|||
|
|||
<!-- 标题区域 --> |
|||
<view class="title-section"> |
|||
<text class="main-title" style="color: {{detailInfo.textColor || '#1A1A1A'}};">{{detailInfo.title || '无标题'}}</text> |
|||
<text class="sub-title">{{detailInfo.subtitle || '暂无副标题'}}</text> |
|||
</view> |
|||
|
|||
<!-- 装饰分割线 --> |
|||
<view class="divider"> |
|||
<view class="divider-line" style="background-color: {{detailInfo.textColor || '#2E7D32'}};"></view> |
|||
<view class="divider-dot" style="background-color: {{detailInfo.textColor || '#2E7D32'}};"></view> |
|||
<view class="divider-line" style="background-color: {{detailInfo.textColor || '#2E7D32'}};"></view> |
|||
</view> |
|||
|
|||
<!-- 信息网格 --> |
|||
<view class="info-grid"> |
|||
<!-- 尺寸信息卡片 --> |
|||
<view class="info-item" wx:if="{{detailInfo.imageSize}}"> |
|||
<view class="info-icon">📐</view> |
|||
<view class="info-content"> |
|||
<text class="info-label">图片尺寸</text> |
|||
<text class="info-value">{{detailInfo.imageSize}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 展示次数卡片 --> |
|||
<view class="info-item" wx:if="{{detailInfo.displayCount !== undefined}}"> |
|||
<view class="info-icon">👁️</view> |
|||
<view class="info-content"> |
|||
<text class="info-label">浏览次数</text> |
|||
<text class="info-value">{{detailInfo.viewCount}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<!-- 创建时间卡片 --> |
|||
<view class="info-item" wx:if="{{detailInfo.createdAt}}"> |
|||
<view class="info-icon">📅</view> |
|||
<view class="info-content"> |
|||
<text class="info-label">创建时间</text> |
|||
<text class="info-value">{{detailInfo.createdAt}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 更新时间卡片 --> |
|||
<view class="info-item" wx:if="{{detailInfo.updatedAt}}"> |
|||
<view class="info-icon">🔄</view> |
|||
<view class="info-content"> |
|||
<text class="info-label">更新时间</text> |
|||
<text class="info-value">{{detailInfo.updatedAt}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 有效性状态卡片 - 使用优雅的徽章设计 --> |
|||
<view class="info-item status-item" wx:if="{{detailInfo.isActive !== undefined}}"> |
|||
<view class="info-icon">⚡</view> |
|||
<view class="info-content"> |
|||
<text class="info-label">状态</text> |
|||
<view class="status-badge" style="background-color: {{detailInfo.isActive === 1 ? '#4CAF50' : '#9E9E9E'}}20; border-color: {{detailInfo.isActive === 1 ? '#4CAF50' : '#9E9E9E'}};"> |
|||
<text class="status-dot" style="background-color: {{detailInfo.isActive === 1 ? '#4CAF50' : '#9E9E9E'}};"></text> |
|||
<text class="status-text" style="color: {{detailInfo.isActive === 1 ? '#4CAF50' : '#9E9E9E'}};">{{detailInfo.isActive === 1 ? '有效' : '无效'}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 描述/备注区域（如果有remark字段） --> |
|||
<view class="remark-section" wx:if="{{detailInfo.remark}}"> |
|||
<view class="remark-icon">📝</view> |
|||
<view class="remark-content">{{detailInfo.remark}}</view> |
|||
</view> |
|||
|
|||
<!-- 辅助信息：始终有效标识 --> |
|||
<view class="always-valid" wx:if="{{detailInfo.isAlwaysValid === 1}}"> |
|||
<text class="valid-icon">✨</text> |
|||
<text class="valid-text">长期有效</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,284 @@ |
|||
.carousel-detail-container { |
|||
min-height: 100vh; |
|||
background-color: var(--bg-color, #F8F9FA); |
|||
position: relative; |
|||
padding-bottom: 40rpx; |
|||
} |
|||
|
|||
/* 沉浸式头部 */ |
|||
.hero-section { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 600rpx; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.hero-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
filter: brightness(0.9); |
|||
transition: transform 0.3s ease; |
|||
} |
|||
|
|||
.hero-image:active { |
|||
transform: scale(1.02); |
|||
} |
|||
|
|||
.hero-overlay { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
height: 200rpx; |
|||
pointer-events: none; |
|||
} |
|||
|
|||
/* 毛玻璃返回按钮 */ |
|||
.nav-back { |
|||
position: absolute; |
|||
top: 60rpx; |
|||
left: 30rpx; |
|||
width: 72rpx; |
|||
height: 72rpx; |
|||
border-radius: 36rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 40rpx; |
|||
color: #333; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.glass { |
|||
background: rgba(255, 255, 255, 0.25); |
|||
backdrop-filter: blur(10px); |
|||
-webkit-backdrop-filter: blur(10px); |
|||
border: 1rpx solid rgba(255, 255, 255, 0.3); |
|||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.page-title { |
|||
position: absolute; |
|||
top: 60rpx; |
|||
right: 30rpx; |
|||
padding: 16rpx 32rpx; |
|||
border-radius: 40rpx; |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
font-weight: 500; |
|||
z-index: 10; |
|||
letter-spacing: 1rpx; |
|||
} |
|||
|
|||
/* 主要内容卡片 */ |
|||
.content-card { |
|||
margin: -100rpx 30rpx 0; |
|||
background: rgba(255, 255, 255, 0.95); |
|||
backdrop-filter: blur(20px); |
|||
-webkit-backdrop-filter: blur(20px); |
|||
border-radius: 48rpx; |
|||
padding: 48rpx 32rpx; |
|||
box-shadow: 0 30rpx 60rpx rgba(0, 0, 0, 0.1), |
|||
0 10rpx 30rpx rgba(0, 0, 0, 0.05); |
|||
position: relative; |
|||
z-index: 5; |
|||
border: 1rpx solid rgba(255, 255, 255, 0.5); |
|||
opacity: 0; |
|||
transform: translateY(50rpx); |
|||
animation: cardFloat 0.6s ease-out forwards; |
|||
} |
|||
|
|||
@keyframes cardFloat { |
|||
to { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
/* 标题区域 */ |
|||
.title-section { |
|||
margin-bottom: 40rpx; |
|||
} |
|||
|
|||
.main-title { |
|||
display: block; |
|||
font-size: 56rpx; |
|||
font-weight: 700; |
|||
line-height: 1.3; |
|||
margin-bottom: 16rpx; |
|||
letter-spacing: -0.5rpx; |
|||
} |
|||
|
|||
.sub-title { |
|||
display: block; |
|||
font-size: 30rpx; |
|||
color: #666; |
|||
line-height: 1.5; |
|||
font-weight: 400; |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
/* 装饰分割线 */ |
|||
.divider { |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 30rpx 0 40rpx; |
|||
} |
|||
|
|||
.divider-line { |
|||
flex: 1; |
|||
height: 2rpx; |
|||
opacity: 0.2; |
|||
} |
|||
|
|||
.divider-dot { |
|||
width: 8rpx; |
|||
height: 8rpx; |
|||
border-radius: 4rpx; |
|||
margin: 0 20rpx; |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
/* 信息网格 */ |
|||
.info-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(2, 1fr); |
|||
gap: 24rpx; |
|||
margin-bottom: 40rpx; |
|||
} |
|||
|
|||
.info-item { |
|||
background: rgba(0, 0, 0, 0.02); |
|||
border-radius: 28rpx; |
|||
padding: 28rpx 20rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
border: 1rpx solid rgba(0, 0, 0, 0.03); |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
.info-item:active { |
|||
transform: scale(0.98); |
|||
background: rgba(0, 0, 0, 0.04); |
|||
} |
|||
|
|||
.info-icon { |
|||
font-size: 48rpx; |
|||
margin-right: 20rpx; |
|||
filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1)); |
|||
} |
|||
|
|||
.info-content { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.info-label { |
|||
font-size: 22rpx; |
|||
color: #999; |
|||
margin-bottom: 8rpx; |
|||
letter-spacing: 0.5rpx; |
|||
} |
|||
|
|||
.info-value { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
/* 状态特殊样式 */ |
|||
.status-item .info-content { |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.status-badge { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 8rpx 16rpx; |
|||
border-radius: 40rpx; |
|||
border-width: 1rpx; |
|||
border-style: solid; |
|||
background-color: rgba(76, 175, 80, 0.1); |
|||
} |
|||
|
|||
.status-dot { |
|||
width: 16rpx; |
|||
height: 16rpx; |
|||
border-radius: 8rpx; |
|||
margin-right: 8rpx; |
|||
animation: pulse 2s infinite; |
|||
} |
|||
|
|||
@keyframes pulse { |
|||
0%, 100% { opacity: 1; } |
|||
50% { opacity: 0.6; } |
|||
} |
|||
|
|||
.status-text { |
|||
font-size: 24rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 备注区域 */ |
|||
.remark-section { |
|||
background: rgba(0, 0, 0, 0.02); |
|||
border-radius: 28rpx; |
|||
padding: 28rpx; |
|||
margin-bottom: 40rpx; |
|||
display: flex; |
|||
border-left: 8rpx solid var(--text-color, #2E7D32); |
|||
} |
|||
|
|||
.remark-icon { |
|||
font-size: 40rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.remark-content { |
|||
flex: 1; |
|||
font-size: 28rpx; |
|||
color: #444; |
|||
line-height: 1.6; |
|||
} |
|||
|
|||
|
|||
/* 始终有效标识 */ |
|||
.always-valid { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-top: 30rpx; |
|||
padding: 20rpx; |
|||
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05)); |
|||
border-radius: 40rpx; |
|||
border: 1rpx solid rgba(255, 215, 0, 0.3); |
|||
} |
|||
|
|||
.valid-icon { |
|||
font-size: 32rpx; |
|||
margin-right: 12rpx; |
|||
animation: starTwinkle 1.5s infinite; |
|||
} |
|||
|
|||
@keyframes starTwinkle { |
|||
0%, 100% { opacity: 1; transform: scale(1); } |
|||
50% { opacity: 0.7; transform: scale(1.1); } |
|||
} |
|||
|
|||
.valid-text { |
|||
font-size: 26rpx; |
|||
color: #B8860B; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
/* 响应式调整 */ |
|||
@media (min-width: 768px) { |
|||
.content-card { |
|||
max-width: 700rpx; |
|||
margin: -100rpx auto 0; |
|||
} |
|||
} |
|||
|
After Width: 200 | Height: 200 | Size: 2.5 KiB |
|
After Width: 200 | Height: 200 | Size: 3.8 KiB |
|
After Width: 200 | Height: 200 | Size: 3.6 KiB |
|
After Width: 200 | Height: 200 | Size: 4.5 KiB |
@ -0,0 +1,286 @@ |
|||
import http from '../../../utils/api' |
|||
|
|||
Page({ |
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
regionList: [], // 当前显示的区域列表
|
|||
selectedRegions: [], // 已选择的区域路径
|
|||
currentParentCode: '', // 当前父级code
|
|||
loading: false, |
|||
showPicker: false, |
|||
regionTitle: '请选择区域', |
|||
autoShowPicker: false // 新增：控制是否自动弹出选择器
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
// 首次加载，获取第一级数据
|
|||
this.getRegionData('', () => { |
|||
// 首次加载完成后自动弹出选择器
|
|||
this.setData({ |
|||
showPicker: true, |
|||
regionTitle: '请选择区域' |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
// 获取区域数据
|
|||
getRegionData(parentCode, callback) { |
|||
this.setData({ |
|||
loading: true |
|||
}) |
|||
|
|||
http.areaChildren({ |
|||
data: { |
|||
parentCode: parentCode || '' |
|||
}, |
|||
success: res => { |
|||
console.log('区域数据响应:', res) |
|||
if (res.code === 200 && res.data && res.data.length > 0) { |
|||
this.setData({ |
|||
regionList: res.data, |
|||
currentParentCode: parentCode, |
|||
loading: false |
|||
}) |
|||
} else { |
|||
// 没有更多数据了，说明已经是最后一级
|
|||
this.setData({ |
|||
loading: false, |
|||
regionList: [] |
|||
}) |
|||
|
|||
// 如果是最后一级，关闭选择器
|
|||
if (this.data.showPicker) { |
|||
this.setData({ |
|||
showPicker: false |
|||
}) |
|||
wx.showToast({ |
|||
title: '已选择到最后一级', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
} |
|||
|
|||
// 执行回调
|
|||
if (callback) { |
|||
callback() |
|||
} |
|||
}, |
|||
fail: err => { |
|||
console.error('请求失败:', err) |
|||
this.setData({ |
|||
loading: false |
|||
}) |
|||
wx.showToast({ |
|||
title: '加载失败', |
|||
icon: 'none' |
|||
}) |
|||
|
|||
if (callback) { |
|||
callback() |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 开始选择（点击按钮时调用）
|
|||
startSelection() { |
|||
// 如果还没有选择任何区域，重新加载第一级
|
|||
if (this.data.selectedRegions.length === 0) { |
|||
this.getRegionData('', () => { |
|||
this.setData({ |
|||
showPicker: true, |
|||
regionTitle: '请选择区域' |
|||
}) |
|||
}) |
|||
} else { |
|||
// 如果有已选择的区域，加载下一级
|
|||
const lastRegion = this.data.selectedRegions[this.data.selectedRegions.length - 1] |
|||
this.loadAndShowNextLevel(lastRegion.code) |
|||
} |
|||
}, |
|||
|
|||
// 加载并显示下一级区域选择器
|
|||
loadAndShowNextLevel(parentCode) { |
|||
this.getRegionData(parentCode, () => { |
|||
if (this.data.regionList.length > 0) { |
|||
// 有下一级数据，自动弹出选择器
|
|||
this.setData({ |
|||
showPicker: true, |
|||
regionTitle: `请选择${this.data.selectedRegions[this.data.selectedRegions.length - 1].name}的下一级区域` |
|||
}) |
|||
} else { |
|||
// 没有下一级数据，提示用户
|
|||
wx.showToast({ |
|||
title: '已经是最后一级，无法继续选择', |
|||
icon: 'none' |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 关闭选择器
|
|||
closePicker() { |
|||
this.setData({ |
|||
showPicker: false |
|||
}) |
|||
}, |
|||
|
|||
// 选择区域
|
|||
selectRegion(e) { |
|||
const index = e.currentTarget.dataset.index |
|||
const region = this.data.regionList[index] |
|||
|
|||
console.log('选择的区域:', region) |
|||
|
|||
// 获取当前已选择的最后一级
|
|||
const lastSelectedRegion = this.data.selectedRegions.length > 0 ? |
|||
this.data.selectedRegions[this.data.selectedRegions.length - 1] : |
|||
null |
|||
|
|||
// 检查是否是同级选择（替换最后一级）
|
|||
const isSameLevel = lastSelectedRegion && |
|||
lastSelectedRegion.parentCode === region.parentCode |
|||
|
|||
let selectedRegions = [...this.data.selectedRegions] |
|||
|
|||
if (isSameLevel) { |
|||
// 同级选择，替换最后一级
|
|||
selectedRegions[selectedRegions.length - 1] = { |
|||
code: region.code, |
|||
name: region.name, |
|||
parentCode: region.parentCode |
|||
} |
|||
} else { |
|||
// 选择下一级，添加到路径
|
|||
selectedRegions.push({ |
|||
code: region.code, |
|||
name: region.name, |
|||
parentCode: region.parentCode |
|||
}) |
|||
} |
|||
|
|||
this.setData({ |
|||
selectedRegions |
|||
}) |
|||
|
|||
// 关闭当前选择器
|
|||
this.setData({ |
|||
showPicker: false |
|||
}) |
|||
|
|||
// 延迟一段时间后自动加载并显示下一级选择器
|
|||
setTimeout(() => { |
|||
this.loadAndShowNextLevel(region.code) |
|||
}, 300) |
|||
}, |
|||
|
|||
// 重新选择（点击已选择的任意层级）
|
|||
reSelectRegion(e) { |
|||
const index = e.currentTarget.dataset.index |
|||
|
|||
// 截断到指定级别（包括点击的层级）
|
|||
const selectedRegions = this.data.selectedRegions.slice(0, index + 1) |
|||
|
|||
this.setData({ |
|||
selectedRegions |
|||
}) |
|||
|
|||
// 获取该层级的数据
|
|||
const targetRegion = selectedRegions[selectedRegions.length - 1] |
|||
|
|||
// 获取点击层级的同级数据并显示选择器
|
|||
this.getRegionData(targetRegion.parentCode, () => { |
|||
this.setData({ |
|||
showPicker: true, |
|||
regionTitle: index === 0 ? |
|||
'请选择区域' : |
|||
`请选择${this.data.selectedRegions[index - 1]?.name || '区域'}的下一级` |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
// 完成选择
|
|||
completeSelection() { |
|||
if (this.data.selectedRegions.length === 0) { |
|||
wx.showToast({ |
|||
title: '请先选择区域', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
const lastRegion = this.data.selectedRegions[this.data.selectedRegions.length - 1] |
|||
|
|||
// 这里可以调用你的业务接口，传递parentCode
|
|||
this.submitRegion(lastRegion.code) |
|||
}, |
|||
|
|||
// 提交选择的区域（示例）
|
|||
submitRegion(parentCode) { |
|||
console.log('提交的parentCode:', parentCode) |
|||
console.log('完整选择路径:', this.data.selectedRegions) |
|||
http.userCode({ |
|||
data: { |
|||
areaCode: parentCode |
|||
}, |
|||
success: res => { |
|||
console.log(11111, res); |
|||
if (res.code == 200) { |
|||
wx.showModal({ |
|||
title: '选择完成', |
|||
content: `已选择到: ${this.data.selectedRegions.map(r => r.name).join(' > ')}`, |
|||
showCancel: false, |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
wx.switchTab({ |
|||
url: '/pages/home/home', |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
|
|||
|
|||
}, |
|||
|
|||
// 重置选择
|
|||
resetSelection() { |
|||
wx.showModal({ |
|||
title: '确认重置', |
|||
content: '确定要重置所有选择吗？', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
this.setData({ |
|||
selectedRegions: [], |
|||
regionList: [], |
|||
currentParentCode: '', |
|||
showPicker: false |
|||
}) |
|||
|
|||
// 重新获取第一级数据
|
|||
this.getRegionData('', () => { |
|||
// 重置后自动弹出第一级选择器
|
|||
this.setData({ |
|||
showPicker: true, |
|||
regionTitle: '请选择区域' |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"navigationBarTitleText":"区域选择", |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,95 @@ |
|||
<view class="container"> |
|||
<!-- 已选择区域路径显示 --> |
|||
<view class="selected-path" wx:if="{{selectedRegions.length > 0}}"> |
|||
<text class="path-title">已选择：</text> |
|||
<view class="path-items"> |
|||
<view |
|||
wx:for="{{selectedRegions}}" |
|||
wx:key="index" |
|||
class="path-item {{index === selectedRegions.length - 1 ? 'last' : ''}}" |
|||
data-index="{{index}}" |
|||
bindtap="reSelectRegion" |
|||
> |
|||
<text>{{item.name}}</text> |
|||
<text class="separator" wx:if="{{index < selectedRegions.length - 1}}">></text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 选择按钮 --> |
|||
<view class="select-btn-container"> |
|||
<button |
|||
class="select-btn" |
|||
bindtap="startSelection" |
|||
loading="{{loading}}" |
|||
> |
|||
{{selectedRegions.length === 0 ? '开始选择区域' : '继续选择下一级'}} |
|||
</button> |
|||
</view> |
|||
|
|||
<!-- 操作按钮 --> |
|||
<view class="action-buttons"> |
|||
<button |
|||
class="btn complete-btn" |
|||
bindtap="completeSelection" |
|||
disabled="{{selectedRegions.length === 0}}" |
|||
> |
|||
完成选择 |
|||
</button> |
|||
<button |
|||
class="btn reset-btn" |
|||
bindtap="resetSelection" |
|||
wx:if="{{selectedRegions.length > 0}}" |
|||
> |
|||
重置 |
|||
</button> |
|||
</view> |
|||
|
|||
<!-- 选择器弹出层 --> |
|||
<view class="picker-modal" wx:if="{{showPicker}}"> |
|||
<view class="picker-mask" bindtap="closePicker"></view> |
|||
<view class="picker-content"> |
|||
<view class="picker-header"> |
|||
<text class="picker-title">{{regionTitle}}</text> |
|||
<text class="picker-close" bindtap="closePicker">×</text> |
|||
</view> |
|||
|
|||
<view class="picker-body"> |
|||
<!-- 加载状态 --> |
|||
<view class="loading-container" wx:if="{{loading}}"> |
|||
<view class="loading-spinner"></view> |
|||
<text class="loading-text">加载中...</text> |
|||
</view> |
|||
|
|||
<!-- 区域列表 --> |
|||
<scroll-view scroll-y class="region-list" wx:else> |
|||
<view |
|||
wx:for="{{regionList}}" |
|||
wx:key="id" |
|||
class="region-item" |
|||
data-index="{{index}}" |
|||
bindtap="selectRegion" |
|||
> |
|||
<view class="region-info"> |
|||
<text class="region-name">{{item.name}}</text> |
|||
</view> |
|||
<text class="arrow">›</text> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty-state" wx:if="{{regionList.length === 0}}"> |
|||
<text class="empty-text"> |
|||
{{selectedRegions.length > 0 ? '已选择到最后一级' : '暂无区域数据'}} |
|||
</text> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 使用说明 --> |
|||
<view class="instruction"> |
|||
<text class="instruction-title">使用说明：</text> |
|||
<text class="instruction-text">1. 点击"开始选择区域"开始选择\n2. 选择后会加载下一级区域\n3. 点击已选择区域的任意级别可以重新选择\n4. 选择最后一级时会直接替换\n5. 完成选择后点击"完成选择"按钮</text> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,316 @@ |
|||
.container { |
|||
padding: 30rpx; |
|||
min-height: 100vh; |
|||
background: #f5f5f5; |
|||
} |
|||
|
|||
/* 已选择路径 */ |
|||
.selected-path { |
|||
background: white; |
|||
border-radius: 16rpx; |
|||
padding: 30rpx; |
|||
margin-bottom: 30rpx; |
|||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
.path-title { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
display: block; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.path-items { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.path-item { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 12rpx 20rpx; |
|||
background: #f0f8ff; |
|||
border-radius: 8rpx; |
|||
margin-right: 10rpx; |
|||
margin-bottom: 10rpx; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.path-item:active { |
|||
background: #e1f0ff; |
|||
} |
|||
|
|||
.path-item.last { |
|||
background: #e6f7ff; |
|||
border: 1rpx solid #1890ff; |
|||
} |
|||
|
|||
.path-item text:first-child { |
|||
font-size: 28rpx; |
|||
color: #1890ff; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.separator { |
|||
margin-left: 10rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
|
|||
/* 选择按钮 */ |
|||
.select-btn-container { |
|||
margin: 40rpx 0; |
|||
} |
|||
|
|||
.select-btn { |
|||
width: 100%; |
|||
background: linear-gradient(135deg, #1890ff, #096dd9); |
|||
color: white; |
|||
border-radius: 12rpx; |
|||
font-size: 32rpx; |
|||
height: 88rpx; |
|||
line-height: 88rpx; |
|||
border: none; |
|||
} |
|||
|
|||
.select-btn::after { |
|||
border: none; |
|||
} |
|||
|
|||
.select-btn[loading] { |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
.select-btn:active { |
|||
opacity: 0.9; |
|||
} |
|||
|
|||
/* 操作按钮 */ |
|||
.action-buttons { |
|||
display: flex; |
|||
gap: 20rpx; |
|||
margin-top: 50rpx; |
|||
} |
|||
|
|||
.btn { |
|||
flex: 1; |
|||
border-radius: 12rpx; |
|||
font-size: 28rpx; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
border: none; |
|||
} |
|||
|
|||
.btn::after { |
|||
border: none; |
|||
} |
|||
|
|||
.complete-btn { |
|||
background: #07c160; |
|||
color: white; |
|||
} |
|||
|
|||
.complete-btn[disabled] { |
|||
background: #ccc; |
|||
color: #999; |
|||
} |
|||
|
|||
.complete-btn:active:not([disabled]) { |
|||
background: #06ad56; |
|||
} |
|||
|
|||
.reset-btn { |
|||
background: #fff; |
|||
color: #ff4d4f; |
|||
border: 1rpx solid #ff4d4f !important; |
|||
} |
|||
|
|||
.reset-btn:active { |
|||
background: #fff5f5; |
|||
} |
|||
|
|||
/* 选择器模态框 */ |
|||
.picker-modal { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 1000; |
|||
} |
|||
|
|||
.picker-mask { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
animation: fadeIn 0.3s ease; |
|||
} |
|||
|
|||
.picker-content { |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
background: white; |
|||
border-radius: 32rpx 32rpx 0 0; |
|||
max-height: 70vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
animation: slideUp 0.3s ease; |
|||
} |
|||
|
|||
.picker-header { |
|||
padding: 32rpx 40rpx; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
position: relative; |
|||
} |
|||
|
|||
.picker-title { |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
font-weight: 600; |
|||
flex: 1; |
|||
text-align: center; |
|||
} |
|||
|
|||
.picker-close { |
|||
font-size: 48rpx; |
|||
color: #999; |
|||
position: absolute; |
|||
right: 30rpx; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
text-align: center; |
|||
line-height: 60rpx; |
|||
} |
|||
|
|||
.picker-close:active { |
|||
background: #f5f5f5; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.picker-body { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/* 加载状态 */ |
|||
.loading-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 300rpx; |
|||
} |
|||
|
|||
.loading-spinner { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
border: 4rpx solid #f0f0f0; |
|||
border-top-color: #1890ff; |
|||
border-radius: 50%; |
|||
animation: spin 1s linear infinite; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.loading-text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
/* 区域列表 */ |
|||
.region-list { |
|||
height: 60vh; |
|||
} |
|||
|
|||
.region-item { |
|||
padding: 32rpx 40rpx; |
|||
border-bottom: 1rpx solid #f0f0f0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.region-item:active { |
|||
background: #f5f5f5; |
|||
} |
|||
|
|||
.region-info { |
|||
flex: 1; |
|||
} |
|||
|
|||
.region-name { |
|||
font-size: 30rpx; |
|||
color: #333; |
|||
display: block; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.arrow { |
|||
color: #ccc; |
|||
font-size: 36rpx; |
|||
margin-left: 20rpx; |
|||
} |
|||
|
|||
/* 空状态 */ |
|||
.empty-state { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 200rpx; |
|||
} |
|||
|
|||
.empty-text { |
|||
font-size: 28rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
/* 使用说明 */ |
|||
.instruction { |
|||
margin-top: 60rpx; |
|||
padding: 24rpx; |
|||
background: white; |
|||
border-radius: 12rpx; |
|||
border-left: 6rpx solid #1890ff; |
|||
} |
|||
|
|||
.instruction-title { |
|||
font-size: 28rpx; |
|||
color: #1890ff; |
|||
font-weight: 600; |
|||
display: block; |
|||
margin-bottom: 16rpx; |
|||
} |
|||
|
|||
.instruction-text { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
white-space: pre-line; |
|||
} |
|||
|
|||
/* 动画 */ |
|||
@keyframes fadeIn { |
|||
from { opacity: 0; } |
|||
to { opacity: 1; } |
|||
} |
|||
|
|||
@keyframes slideUp { |
|||
from { transform: translateY(100%); } |
|||
to { transform: translateY(0); } |
|||
} |
|||
|
|||
@keyframes spin { |
|||
from { transform: rotate(0deg); } |
|||
to { transform: rotate(360deg); } |
|||
} |
|||
@ -0,0 +1,580 @@ |
|||
import http from '../../../utils/api' |
|||
const baseUrl = require('../../../utils/baseUrl') |
|||
|
|||
Page({ |
|||
data: { |
|||
baseUrl, |
|||
currentTab: 'article', |
|||
|
|||
// 文章相关
|
|||
articleForm: { |
|||
title: '', |
|||
subtitle: '', |
|||
category: '', |
|||
content: '', |
|||
coverImage: '' // 这里存储服务器返回的文件名
|
|||
}, |
|||
articleCoverTemp: '', // 本地临时路径，用于预览
|
|||
articleCategory: null, |
|||
articleCategories: [], |
|||
|
|||
// 视频相关
|
|||
videoForm: { |
|||
title: '', |
|||
description: '', |
|||
category: '', |
|||
videoUrl: '', // 这里存储服务器返回的视频文件名
|
|||
coverImage: '' // 这里存储服务器返回的封面文件名
|
|||
}, |
|||
videoCoverTemp: '', // 本地临时路径，用于预览
|
|||
videoUrlTemp: '', // 本地临时路径，用于显示
|
|||
videoCategory: null, |
|||
videoCategories: [], |
|||
|
|||
// UI状态
|
|||
submitting: false, |
|||
isUploading: false, // 防止重复上传
|
|||
showLoadingMask: false, // 显示加载遮罩层
|
|||
loadingText: '发布中...', // 加载提示文字
|
|||
|
|||
// 表单验证状态
|
|||
articleFormValid: false, |
|||
videoFormValid: false, |
|||
}, |
|||
|
|||
onLoad() { |
|||
this.getArticleCategories() |
|||
this.getVideoCategories() |
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
// 页面卸载时重置状态
|
|||
this.setData({ |
|||
submitting: false, |
|||
showLoadingMask: false |
|||
}); |
|||
}, |
|||
|
|||
// 获取文章分类
|
|||
getArticleCategories() { |
|||
http.articleZd({ |
|||
data: { |
|||
dictType: 'article_category' |
|||
}, |
|||
success: res => { |
|||
if (res.rows) { |
|||
this.setData({ |
|||
articleCategories: res.rows |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 获取视频分类
|
|||
getVideoCategories() { |
|||
http.videoZd({ |
|||
data: { |
|||
dictType: 'video_category' |
|||
}, |
|||
success: res => { |
|||
if (res.rows) { |
|||
this.setData({ |
|||
videoCategories: res.rows |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 切换标签
|
|||
switchTab(e) { |
|||
const type = e.currentTarget.dataset.type |
|||
if (type === this.data.currentTab) return |
|||
this.setData({ currentTab: type }) |
|||
}, |
|||
|
|||
// 验证文章表单
|
|||
validateArticleForm() { |
|||
const { articleForm } = this.data |
|||
const isValid = !!(articleForm.title?.trim() && articleForm.category && articleForm.content?.trim()) |
|||
this.setData({ articleFormValid: isValid }) |
|||
return isValid |
|||
}, |
|||
|
|||
// 验证视频表单
|
|||
validateVideoForm() { |
|||
const { videoForm } = this.data |
|||
const isValid = !!(videoForm.title?.trim() && videoForm.category && videoForm.videoUrl) |
|||
this.setData({ videoFormValid: isValid }) |
|||
return isValid |
|||
}, |
|||
|
|||
// 文章输入处理
|
|||
onArticleInput(e) { |
|||
const field = e.currentTarget.dataset.field |
|||
const value = e.detail.value |
|||
this.setData({ |
|||
[`articleForm.${field}`]: value |
|||
}, () => { |
|||
this.validateArticleForm() |
|||
}) |
|||
}, |
|||
|
|||
// 视频输入处理
|
|||
onVideoInput(e) { |
|||
const field = e.currentTarget.dataset.field |
|||
const value = e.detail.value |
|||
this.setData({ |
|||
[`videoForm.${field}`]: value |
|||
}, () => { |
|||
this.validateVideoForm() |
|||
}) |
|||
}, |
|||
|
|||
// 文章分类选择
|
|||
onArticleCategoryChange(e) { |
|||
const index = e.detail.value |
|||
const category = this.data.articleCategories[index] |
|||
this.setData({ |
|||
'articleForm.category': category.dictValue, |
|||
articleCategory: category |
|||
}, () => { |
|||
this.validateArticleForm() |
|||
}) |
|||
}, |
|||
|
|||
// 视频分类选择
|
|||
onVideoCategoryChange(e) { |
|||
const index = e.detail.value |
|||
const category = this.data.videoCategories[index] |
|||
this.setData({ |
|||
'videoForm.category': category.dictValue, |
|||
videoCategory: category |
|||
}, () => { |
|||
this.validateVideoForm() |
|||
}) |
|||
}, |
|||
|
|||
// 选择封面图片（文章或视频）
|
|||
chooseCover(e) { |
|||
if (this.data.isUploading) { |
|||
wx.showToast({ |
|||
title: '正在上传中，请稍候', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
const type = e.currentTarget.dataset.type |
|||
|
|||
wx.chooseMedia({ |
|||
count: 1, |
|||
mediaType: ['image'], |
|||
sourceType: ['album', 'camera'], |
|||
sizeType: ['compressed'], |
|||
success: (res) => { |
|||
if (res.tempFiles && res.tempFiles.length > 0) { |
|||
this.setData({ |
|||
isUploading: true |
|||
}); |
|||
|
|||
// 显示加载提示
|
|||
wx.showLoading({ |
|||
title: '上传图片中...', |
|||
mask: true |
|||
}); |
|||
|
|||
// 上传图片
|
|||
this.uploadImage(res.tempFiles[0].tempFilePath, type); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 上传单张图片
|
|||
uploadImage(tempPath, type) { |
|||
wx.uploadFile({ |
|||
url: baseUrl + '/common/upload', |
|||
header: { |
|||
'Authorization': 'Bearer ' + wx.getStorageSync('token') |
|||
}, |
|||
filePath: tempPath, |
|||
name: 'file', |
|||
success: (uploadRes) => { |
|||
try { |
|||
const result = JSON.parse(uploadRes.data); |
|||
if (result.code === 200 || result.fileName) { |
|||
const serverPath = result.fileName || result.url; |
|||
|
|||
if (type === 'article') { |
|||
// 文章封面
|
|||
this.setData({ |
|||
articleCoverTemp: tempPath, |
|||
'articleForm.coverImage': serverPath, |
|||
isUploading: false |
|||
}); |
|||
} else { |
|||
// 视频封面
|
|||
this.setData({ |
|||
videoCoverTemp: tempPath, |
|||
'videoForm.coverImage': serverPath, |
|||
isUploading: false |
|||
}, () => { |
|||
this.validateVideoForm(); |
|||
}); |
|||
} |
|||
|
|||
wx.hideLoading(); |
|||
wx.showToast({ |
|||
title: '上传成功', |
|||
icon: 'success' |
|||
}); |
|||
} else { |
|||
throw new Error(result.msg || '上传失败'); |
|||
} |
|||
} catch (error) { |
|||
wx.hideLoading(); |
|||
this.setData({ |
|||
isUploading: false |
|||
}); |
|||
wx.showToast({ |
|||
title: error.message || '上传失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
fail: (error) => { |
|||
wx.hideLoading(); |
|||
this.setData({ |
|||
isUploading: false |
|||
}); |
|||
wx.showToast({ |
|||
title: '网络请求失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 选择视频
|
|||
chooseVideo() { |
|||
if (this.data.isUploading) { |
|||
wx.showToast({ |
|||
title: '正在上传中，请稍候', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
wx.chooseMedia({ |
|||
count: 1, |
|||
mediaType: ['video'], |
|||
sourceType: ['album', 'camera'], |
|||
maxDuration: 300, |
|||
success: (res) => { |
|||
if (res.tempFiles && res.tempFiles.length > 0) { |
|||
this.setData({ |
|||
isUploading: true, |
|||
videoUrlTemp: res.tempFiles[0].tempFilePath // 先显示本地路径
|
|||
}); |
|||
|
|||
// 显示加载提示
|
|||
wx.showLoading({ |
|||
title: '上传视频中...', |
|||
mask: true |
|||
}); |
|||
|
|||
// 上传视频
|
|||
this.uploadVideo(res.tempFiles[0].tempFilePath); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 上传视频
|
|||
uploadVideo(tempPath) { |
|||
wx.uploadFile({ |
|||
url: baseUrl + '/common/upload', |
|||
header: { |
|||
'Authorization': 'Bearer ' + wx.getStorageSync('token') |
|||
}, |
|||
filePath: tempPath, |
|||
name: 'file', |
|||
success: (uploadRes) => { |
|||
try { |
|||
const result = JSON.parse(uploadRes.data); |
|||
if (result.code === 200 || result.fileName) { |
|||
const serverPath = result.fileName || result.url; |
|||
|
|||
this.setData({ |
|||
'videoForm.videoUrl': serverPath, |
|||
isUploading: false |
|||
}, () => { |
|||
this.validateVideoForm(); |
|||
}); |
|||
|
|||
wx.hideLoading(); |
|||
wx.showToast({ |
|||
title: '上传成功', |
|||
icon: 'success' |
|||
}); |
|||
} else { |
|||
throw new Error(result.msg || '上传失败'); |
|||
} |
|||
} catch (error) { |
|||
wx.hideLoading(); |
|||
this.setData({ |
|||
videoUrlTemp: '', // 上传失败清空临时路径
|
|||
isUploading: false |
|||
}); |
|||
wx.showToast({ |
|||
title: error.message || '上传失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
fail: (error) => { |
|||
wx.hideLoading(); |
|||
this.setData({ |
|||
videoUrlTemp: '', // 上传失败清空临时路径
|
|||
isUploading: false |
|||
}); |
|||
wx.showToast({ |
|||
title: '网络请求失败', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
// 提交文章
|
|||
submitArticle() { |
|||
const { articleForm, submitting, isUploading } = this.data |
|||
|
|||
if (submitting) return |
|||
|
|||
// 检查是否还有图片正在上传
|
|||
if (isUploading) { |
|||
wx.showToast({ |
|||
title: '图片正在上传中，请稍后提交', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 表单验证
|
|||
if (!this.validateArticleForm()) { |
|||
if (!articleForm.title?.trim()) { |
|||
this.showError('请输入文章标题') |
|||
} else if (!articleForm.category) { |
|||
this.showError('请选择文章分类') |
|||
} else if (!articleForm.content?.trim()) { |
|||
this.showError('请输入文章内容') |
|||
} |
|||
return |
|||
} |
|||
|
|||
// 显示加载遮罩层
|
|||
this.setData({ |
|||
submitting: true, |
|||
showLoadingMask: true, |
|||
loadingText: '发布中...' |
|||
}); |
|||
|
|||
// 构建提交数据
|
|||
const submitData = { |
|||
title: articleForm.title.trim(), |
|||
subtitle: articleForm.subtitle?.trim() || '', |
|||
content: articleForm.content.trim(), |
|||
coverImage: articleForm.coverImage || '', |
|||
category: articleForm.category |
|||
} |
|||
|
|||
// 调用接口
|
|||
http.articleAdd({ |
|||
data: submitData, |
|||
success: (res) => { |
|||
if (res.code == 200) { |
|||
this.setData({ |
|||
loadingText: '发布成功' |
|||
}); |
|||
|
|||
setTimeout(() => { |
|||
this.setData({ |
|||
submitting: false, |
|||
showLoadingMask: false |
|||
}); |
|||
|
|||
wx.showToast({ |
|||
title: '发布成功', |
|||
icon: 'success', |
|||
duration: 1500, |
|||
success: () => { |
|||
setTimeout(() => { |
|||
wx.navigateBack() |
|||
}, 1500); |
|||
} |
|||
}); |
|||
}, 1000); |
|||
} else { |
|||
this.setData({ |
|||
loadingText: '发布失败' |
|||
}); |
|||
|
|||
setTimeout(() => { |
|||
this.setData({ |
|||
submitting: false, |
|||
showLoadingMask: false |
|||
}); |
|||
|
|||
wx.showToast({ |
|||
title: res.msg || '发布失败，请重试', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}); |
|||
}, 1000); |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
this.setData({ |
|||
loadingText: '网络错误' |
|||
}); |
|||
|
|||
setTimeout(() => { |
|||
this.setData({ |
|||
submitting: false, |
|||
showLoadingMask: false |
|||
}); |
|||
|
|||
wx.showToast({ |
|||
title: '网络异常，请检查网络后重试', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}); |
|||
}, 1000); |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 提交视频
|
|||
submitVideo() { |
|||
const { videoForm, submitting, isUploading } = this.data |
|||
|
|||
if (submitting) return |
|||
|
|||
// 检查是否还有图片或视频正在上传
|
|||
if (isUploading) { |
|||
wx.showToast({ |
|||
title: '文件正在上传中，请稍后提交', |
|||
icon: 'none' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// 表单验证
|
|||
if (!this.validateVideoForm()) { |
|||
if (!videoForm.title?.trim()) { |
|||
this.showError('请输入视频标题') |
|||
} else if (!videoForm.category) { |
|||
this.showError('请选择视频分类') |
|||
} else if (!videoForm.videoUrl) { |
|||
this.showError('请选择视频') |
|||
} |
|||
return |
|||
} |
|||
|
|||
// 显示加载遮罩层
|
|||
this.setData({ |
|||
submitting: true, |
|||
showLoadingMask: true, |
|||
loadingText: '发布中...' |
|||
}); |
|||
|
|||
// 构建提交数据
|
|||
const submitData = { |
|||
title: videoForm.title.trim(), |
|||
description: videoForm.description?.trim() || '', |
|||
videoUrl: videoForm.videoUrl, |
|||
coverImage: videoForm.coverImage || '', |
|||
category: videoForm.category |
|||
} |
|||
|
|||
// 调用接口
|
|||
http.videoAdd({ |
|||
data: submitData, |
|||
success: (res) => { |
|||
if (res.code == 200) { |
|||
this.setData({ |
|||
loadingText: '发布成功' |
|||
}); |
|||
|
|||
setTimeout(() => { |
|||
this.setData({ |
|||
submitting: false, |
|||
showLoadingMask: false |
|||
}); |
|||
|
|||
wx.showToast({ |
|||
title: '发布成功', |
|||
icon: 'success', |
|||
duration: 1500, |
|||
success: () => { |
|||
setTimeout(() => { |
|||
wx.navigateBack() |
|||
}, 1500); |
|||
} |
|||
}); |
|||
}, 1000); |
|||
} else { |
|||
this.setData({ |
|||
loadingText: '发布失败' |
|||
}); |
|||
|
|||
setTimeout(() => { |
|||
this.setData({ |
|||
submitting: false, |
|||
showLoadingMask: false |
|||
}); |
|||
|
|||
wx.showToast({ |
|||
title: res.msg || '发布失败，请重试', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}); |
|||
}, 1000); |
|||
} |
|||
}, |
|||
fail: (err) => { |
|||
this.setData({ |
|||
loadingText: '网络错误' |
|||
}); |
|||
|
|||
setTimeout(() => { |
|||
this.setData({ |
|||
submitting: false, |
|||
showLoadingMask: false |
|||
}); |
|||
|
|||
wx.showToast({ |
|||
title: '网络异常，请检查网络后重试', |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}); |
|||
}, 1000); |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 显示错误提示
|
|||
showError(msg) { |
|||
wx.showToast({ |
|||
title: msg, |
|||
icon: 'none', |
|||
duration: 2000 |
|||
}); |
|||
} |
|||
}) |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"navigationBarTitleText":"发布", |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,205 @@ |
|||
<view class="container"> |
|||
<!-- 顶部背景装饰 --> |
|||
<view class="bg-decoration"> |
|||
<view class="circle circle-1"></view> |
|||
<view class="circle circle-2"></view> |
|||
</view> |
|||
|
|||
<!-- 分类切换卡片 --> |
|||
<view class="tab-card"> |
|||
<view class="category-tab"> |
|||
<view class="tab-item {{currentTab === 'article' ? 'active' : ''}}" data-type="article" bindtap="switchTab"> |
|||
<text class="tab-text">发布文章</text> |
|||
</view> |
|||
<view class="tab-item {{currentTab === 'video' ? 'active' : ''}}" data-type="video" bindtap="switchTab"> |
|||
<text class="tab-text">发布视频</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 文章发布表单 --> |
|||
<form wx:if="{{currentTab === 'article'}}" catchsubmit="submitArticle"> |
|||
<view class="form-container"> |
|||
<!-- 文章标题 --> |
|||
<view class="form-card"> |
|||
<view class="form-item"> |
|||
<view class="label-wrapper"> |
|||
<text class="label">文章标题</text> |
|||
<text class="required">*</text> |
|||
</view> |
|||
<input class="input" type="text" placeholder="请输入文章标题" placeholder-class="placeholder" bindinput="onArticleInput" data-field="title" value="{{articleForm.title}}" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 副标题 --> |
|||
<view class="form-card"> |
|||
<view class="form-item"> |
|||
<view class="label-wrapper"> |
|||
<text class="label">副标题</text> |
|||
<text class="optional">选填</text> |
|||
</view> |
|||
<input class="input" type="text" placeholder="请输入副标题" placeholder-class="placeholder" bindinput="onArticleInput" data-field="subtitle" value="{{articleForm.subtitle}}" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 文章分类 - 新样式 --> |
|||
<view class="form-card"> |
|||
<view class="form-item"> |
|||
<view class="label-wrapper"> |
|||
<text class="label">文章分类</text> |
|||
<text class="required">*</text> |
|||
</view> |
|||
<picker mode="selector" range="{{articleCategories}}" range-key="dictLabel" bindchange="onArticleCategoryChange" data-type="article"> |
|||
<view class="category-selector"> |
|||
<block wx:if="{{articleCategory}}"> |
|||
<view class="category-badge" style="background: linear-gradient(135deg, {{getCategoryColor(articleCategory.dictLabel).start}} 0%, {{getCategoryColor(articleCategory.dictLabel).end}} 100%);"> |
|||
{{articleCategory.dictLabel}} |
|||
</view> |
|||
</block> |
|||
<view wx:else class="category-placeholder"> |
|||
<text>请选择文章分类</text> |
|||
<text class="arrow">›</text> |
|||
</view> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 文章封面 --> |
|||
<view class="form-card"> |
|||
<view class="form-item"> |
|||
<view class="label-wrapper"> |
|||
<text class="label">封面图片</text> |
|||
<text class="optional">选填</text> |
|||
</view> |
|||
<view class="uploader-wrapper"> |
|||
<view class="uploader" bindtap="chooseCover" data-type="article"> |
|||
<image class="preview" src="{{articleCoverTemp || ''}}" mode="aspectFill" wx:if="{{articleCoverTemp}}"></image> |
|||
<view class="upload-placeholder" wx:else> |
|||
<text class="plus">+</text> |
|||
<text class="hint">点击上传封面</text> |
|||
</view> |
|||
</view> |
|||
<text class="upload-tip">建议尺寸 16:9，不超过5M</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 文章内容 --> |
|||
<view class="form-card"> |
|||
<view class="form-item"> |
|||
<view class="label-wrapper"> |
|||
<text class="label">文章内容</text> |
|||
<text class="required">*</text> |
|||
</view> |
|||
<textarea class="textarea" placeholder="写下你的精彩内容吧..." placeholder-class="placeholder" bindinput="onArticleInput" data-field="content" value="{{articleForm.content}}" auto-height maxlength="5000" /> |
|||
<text class="word-count">{{articleForm.content.length || 0}}/5000</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 提交按钮 --> |
|||
<view class="btn-wrapper"> |
|||
<button class="submit-btn {{!articleFormValid ? 'disabled' : ''}}" form-type="submit" disabled="{{!articleFormValid || submitting}}"> |
|||
<text wx:if="{{!submitting}}">发布文章</text> |
|||
<text wx:else>发布中...</text> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</form> |
|||
|
|||
<!-- 视频发布表单 --> |
|||
<form wx:else catchsubmit="submitVideo"> |
|||
<view class="form-container"> |
|||
<!-- 视频标题 --> |
|||
<view class="form-card"> |
|||
<view class="form-item"> |
|||
<view class="label-wrapper"> |
|||
<text class="label">视频标题</text> |
|||
<text class="required">*</text> |
|||
</view> |
|||
<input class="input" type="text" placeholder="请输入视频标题" placeholder-class="placeholder" bindinput="onVideoInput" data-field="title" value="{{videoForm.title}}" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 视频描述 --> |
|||
<view class="form-card"> |
|||
<view class="form-item"> |
|||
<view class="label-wrapper"> |
|||
<text class="label">视频描述</text> |
|||
<text class="optional">选填</text> |
|||
</view> |
|||
<input class="input" type="text" placeholder="简单描述一下你的视频内容" placeholder-class="placeholder" bindinput="onVideoInput" data-field="description" value="{{videoForm.description}}" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 视频分类 - 新样式 --> |
|||
<view class="form-card"> |
|||
<view class="form-item"> |
|||
<view class="label-wrapper"> |
|||
<text class="label">视频分类</text> |
|||
<text class="required">*</text> |
|||
</view> |
|||
<picker mode="selector" range="{{videoCategories}}" range-key="dictLabel" bindchange="onVideoCategoryChange" data-type="video"> |
|||
<view class="category-selector"> |
|||
<block wx:if="{{videoCategory}}"> |
|||
<view class="category-badge" style="background: linear-gradient(135deg, {{getCategoryColor(videoCategory.dictLabel).start}} 0%, {{getCategoryColor(videoCategory.dictLabel).end}} 100%);"> |
|||
{{videoCategory.dictLabel}} |
|||
</view> |
|||
</block> |
|||
<view wx:else class="category-placeholder"> |
|||
<text>请选择视频分类</text> |
|||
<text class="arrow">›</text> |
|||
</view> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 视频封面 --> |
|||
<view class="form-card"> |
|||
<view class="form-item"> |
|||
<view class="label-wrapper"> |
|||
<text class="label">视频封面</text> |
|||
<text class="optional">选填</text> |
|||
</view> |
|||
<view class="uploader-wrapper"> |
|||
<view class="uploader" bindtap="chooseCover" data-type="video"> |
|||
<image class="preview" src="{{videoCoverTemp || ''}}" mode="aspectFill" wx:if="{{videoCoverTemp}}"></image> |
|||
<view class="upload-placeholder" wx:else> |
|||
<text class="plus">+</text> |
|||
<text class="hint">点击上传封面</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 视频地址 --> |
|||
<view class="form-card"> |
|||
<view class="form-item"> |
|||
<view class="label-wrapper"> |
|||
<text class="label">视频地址</text> |
|||
<text class="required">*</text> |
|||
</view> |
|||
<view class="video-picker" bindtap="chooseVideo"> |
|||
<view wx:if="{{videoUrlTemp}}" class="video-info"> |
|||
<text class="video-name">{{videoUrlTemp}}</text> |
|||
</view> |
|||
<view wx:else class="video-placeholder"> |
|||
<text class="plus">+</text> |
|||
<text class="hint">点击选择视频</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 提交按钮 --> |
|||
<view class="btn-wrapper"> |
|||
<button class="submit-btn {{!videoFormValid ? 'disabled' : ''}}" form-type="submit" disabled="{{!videoFormValid || submitting}}"> |
|||
<text wx:if="{{!submitting}}">发布视频</text> |
|||
<text wx:else>发布中...</text> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</form> |
|||
</view> |
|||
@ -0,0 +1,457 @@ |
|||
.container { |
|||
min-height: 100vh; |
|||
background: linear-gradient(145deg, #f8f9ff 0%, #f0f2f6 100%); |
|||
position: relative; |
|||
} |
|||
|
|||
/* 背景装饰 */ |
|||
.bg-decoration { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
pointer-events: none; |
|||
z-index: 0; |
|||
} |
|||
|
|||
.circle { |
|||
position: absolute; |
|||
border-radius: 50%; |
|||
background: linear-gradient(135deg, rgba(7, 193, 96, 0.1) 0%, rgba(7, 193, 96, 0.05) 100%); |
|||
} |
|||
|
|||
.circle-1 { |
|||
width: 400rpx; |
|||
height: 400rpx; |
|||
top: -100rpx; |
|||
right: -100rpx; |
|||
background: linear-gradient(135deg, rgba(64, 169, 255, 0.1) 0%, rgba(64, 169, 255, 0.05) 100%); |
|||
} |
|||
|
|||
.circle-2 { |
|||
width: 300rpx; |
|||
height: 300rpx; |
|||
bottom: 100rpx; |
|||
left: -100rpx; |
|||
background: linear-gradient(135deg, rgba(255, 184, 0, 0.1) 0%, rgba(255, 184, 0, 0.05) 100%); |
|||
} |
|||
|
|||
/* 切换卡片 */ |
|||
.tab-card { |
|||
margin: 30rpx 30rpx 20rpx; |
|||
background: rgba(255, 255, 255, 0.9); |
|||
backdrop-filter: blur(20px); |
|||
border-radius: 60rpx; |
|||
padding: 10rpx; |
|||
box-shadow: |
|||
0 20rpx 40rpx rgba(0, 0, 0, 0.06), |
|||
0 8rpx 20rpx rgba(0, 0, 0, 0.03), |
|||
inset 0 2rpx 4rpx rgba(255, 255, 255, 0.8); |
|||
border: 1px solid rgba(255, 255, 255, 0.9); |
|||
position: relative; |
|||
z-index: 10; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
/* 内层标签容器 */ |
|||
.category-tab { |
|||
display: flex; |
|||
background: rgba(0, 0, 0, 0.02); |
|||
border-radius: 56rpx; |
|||
padding: 6rpx; |
|||
gap: 6rpx; |
|||
} |
|||
|
|||
/* 单个标签项 */ |
|||
.tab-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
padding: 24rpx 0; |
|||
position: relative; |
|||
border-radius: 50rpx; |
|||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|||
cursor: pointer; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/* 标签文字 */ |
|||
.tab-text { |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
color: #666; |
|||
letter-spacing: 2rpx; |
|||
position: relative; |
|||
z-index: 2; |
|||
transition: all 0.3s ease; |
|||
} |
|||
|
|||
/* 选中状态 - 渐变背景 */ |
|||
.tab-item.active { |
|||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|||
box-shadow: |
|||
0 10rpx 20rpx rgba(102, 126, 234, 0.3), |
|||
0 4rpx 8rpx rgba(0, 0, 0, 0.1), |
|||
inset 0 2rpx 4rpx rgba(255, 255, 255, 0.5); |
|||
transform: translateY(-2rpx); |
|||
} |
|||
|
|||
/* 选中状态的文字 */ |
|||
.tab-item.active .tab-text { |
|||
color: #ffffff; |
|||
font-weight: 600; |
|||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
/* 添加光泽效果 */ |
|||
.tab-item.active::before { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: linear-gradient(45deg, |
|||
rgba(255, 255, 255, 0.3) 0%, |
|||
rgba(255, 255, 255, 0.2) 20%, |
|||
transparent 50%); |
|||
border-radius: 50rpx; |
|||
pointer-events: none; |
|||
z-index: 1; |
|||
} |
|||
|
|||
/* 添加微光动画 */ |
|||
.tab-item.active::after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: -50%; |
|||
left: -50%; |
|||
width: 200%; |
|||
height: 200%; |
|||
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%); |
|||
opacity: 0.5; |
|||
animation: shimmer 3s infinite; |
|||
pointer-events: none; |
|||
z-index: 1; |
|||
} |
|||
|
|||
/* 悬停效果 */ |
|||
@media (hover: hover) { |
|||
.tab-item:hover:not(.active) { |
|||
background: rgba(255, 255, 255, 0.8); |
|||
transform: translateY(-2rpx); |
|||
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
.tab-item:hover:not(.active) .tab-text { |
|||
color: #333; |
|||
} |
|||
} |
|||
|
|||
/* 点击效果 */ |
|||
.tab-item:active { |
|||
transform: scale(0.98); |
|||
} |
|||
|
|||
/* 微光动画 */ |
|||
@keyframes shimmer { |
|||
0% { |
|||
transform: translateX(-100%) translateY(-100%) rotate(45deg); |
|||
opacity: 0; |
|||
} |
|||
|
|||
20% { |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
40% { |
|||
transform: translateX(100%) translateY(100%) rotate(45deg); |
|||
opacity: 0; |
|||
} |
|||
|
|||
100% { |
|||
transform: translateX(100%) translateY(100%) rotate(45deg); |
|||
opacity: 0; |
|||
} |
|||
} |
|||
|
|||
|
|||
.tab-item.active:nth-child(1) { |
|||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|||
} |
|||
|
|||
.tab-item.active:nth-child(2) { |
|||
background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%); |
|||
} |
|||
|
|||
.tab-item.active-bottom { |
|||
position: relative; |
|||
} |
|||
|
|||
.tab-item.active-bottom::after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: -10rpx; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
width: 60rpx; |
|||
height: 4rpx; |
|||
background: linear-gradient(90deg, #667eea, #764ba2); |
|||
border-radius: 4rpx; |
|||
animation: slideIn 0.3s ease; |
|||
} |
|||
|
|||
/* 表单容器 */ |
|||
.form-container { |
|||
padding: 0 30rpx 40rpx; |
|||
position: relative; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.form-card { |
|||
background: rgba(255, 255, 255, 0.9); |
|||
backdrop-filter: blur(20px); |
|||
border-radius: 32rpx; |
|||
margin-bottom: 20rpx; |
|||
padding: 30rpx; |
|||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.02), |
|||
0 2rpx 8rpx rgba(0, 0, 0, 0.01); |
|||
border: 1px solid rgba(255, 255, 255, 0.8); |
|||
} |
|||
|
|||
.form-item { |
|||
width: 100%; |
|||
} |
|||
|
|||
.label-wrapper { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.label { |
|||
font-size: 28rpx; |
|||
font-weight: 600; |
|||
color: #333; |
|||
margin-right: 8rpx; |
|||
} |
|||
|
|||
.required { |
|||
font-size: 24rpx; |
|||
color: #ff6b6b; |
|||
margin-left: 8rpx; |
|||
} |
|||
|
|||
.optional { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
background: rgba(0, 0, 0, 0.03); |
|||
padding: 4rpx 12rpx; |
|||
border-radius: 20rpx; |
|||
margin-left: 8rpx; |
|||
} |
|||
|
|||
.input { |
|||
width: 100%; |
|||
height: 88rpx; |
|||
background: #f8f9fc; |
|||
border-radius: 20rpx; |
|||
padding: 0 30rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
border: 2rpx solid transparent; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.input:focus { |
|||
border-color: #07c160; |
|||
background: #fff; |
|||
} |
|||
|
|||
.placeholder { |
|||
color: #b8b8b8; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.textarea { |
|||
width: 100%; |
|||
min-height: 240rpx; |
|||
background: #f8f9fc; |
|||
border-radius: 20rpx; |
|||
padding: 24rpx 30rpx; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
border: 2rpx solid transparent; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.textarea:focus { |
|||
border-color: #07c160; |
|||
background: #fff; |
|||
} |
|||
|
|||
.word-count { |
|||
display: block; |
|||
text-align: right; |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
margin-top: 12rpx; |
|||
} |
|||
|
|||
/* 分类选择器 */ |
|||
.category-selector { |
|||
width: 100%; |
|||
min-height: 88rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.category-badge { |
|||
display: inline-block; |
|||
padding: 16rpx 32rpx; |
|||
border-radius: 40rpx; |
|||
color: #648ac2; |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1); |
|||
letter-spacing: 1rpx; |
|||
} |
|||
|
|||
.category-placeholder { |
|||
width: 100%; |
|||
height: 88rpx; |
|||
background: #f8f9fc; |
|||
border-radius: 20rpx; |
|||
padding: 0 30rpx; |
|||
font-size: 28rpx; |
|||
line-height: 88rpx; |
|||
color: #b8b8b8; |
|||
border: 2rpx solid transparent; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.category-placeholder .arrow { |
|||
font-size: 40rpx; |
|||
color: #999; |
|||
transform: rotate(90deg); |
|||
display: inline-block; |
|||
} |
|||
|
|||
/* 上传器 */ |
|||
.uploader-wrapper { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.uploader { |
|||
width: 220rpx; |
|||
height: 220rpx; |
|||
background: #f8f9fc; |
|||
border-radius: 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
overflow: hidden; |
|||
border: 2rpx dashed #ddd; |
|||
} |
|||
|
|||
.preview { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
|||
|
|||
.upload-placeholder { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.upload-placeholder .plus { |
|||
font-size: 60rpx; |
|||
color: #ccc; |
|||
line-height: 1; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.upload-placeholder .hint { |
|||
font-size: 22rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.upload-tip { |
|||
font-size: 22rpx; |
|||
color: #999; |
|||
margin-top: 12rpx; |
|||
} |
|||
|
|||
/* 视频选择器 */ |
|||
.video-picker { |
|||
width: 100%; |
|||
min-height: 120rpx; |
|||
background: #f8f9fc; |
|||
border-radius: 20rpx; |
|||
padding: 20rpx 30rpx; |
|||
box-sizing: border-box; |
|||
border: 2rpx dashed #ddd; |
|||
} |
|||
|
|||
.video-info { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.video-name { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
flex: 1; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
.video-placeholder { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
gap: 16rpx; |
|||
height: 80rpx; |
|||
} |
|||
|
|||
.video-placeholder .plus { |
|||
font-size: 40rpx; |
|||
color: #ccc; |
|||
} |
|||
|
|||
.video-placeholder .hint { |
|||
font-size: 26rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
/* 提交按钮 */ |
|||
.btn-wrapper { |
|||
margin-top: 40rpx; |
|||
padding: 0 20rpx; |
|||
} |
|||
|
|||
.submit-btn { |
|||
width: 100%; |
|||
height: 96rpx; |
|||
background: linear-gradient(135deg, #07c160 0%, #08994d 100%); |
|||
color: #ffffff; |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
border-radius: 48rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-shadow: 0 20rpx 40rpx rgba(7, 193, 96, 0.3); |
|||
border: none; |
|||
} |
|||
|
|||
.submit-btn.disabled { |
|||
background: linear-gradient(135deg, #c0c0c0 0%, #a0a0a0 100%); |
|||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
@ -1,66 +0,0 @@ |
|||
// pagesB/pages/repository/repository.js
|
|||
Page({ |
|||
|
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad(options) { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面初次渲染完成 |
|||
*/ |
|||
onReady() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面显示 |
|||
*/ |
|||
onShow() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面隐藏 |
|||
*/ |
|||
onHide() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 生命周期函数--监听页面卸载 |
|||
*/ |
|||
onUnload() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面相关事件处理函数--监听用户下拉动作 |
|||
*/ |
|||
onPullDownRefresh() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 页面上拉触底事件的处理函数 |
|||
*/ |
|||
onReachBottom() { |
|||
|
|||
}, |
|||
|
|||
/** |
|||
* 用户点击右上角分享 |
|||
*/ |
|||
onShareAppMessage() { |
|||
|
|||
} |
|||
}) |
|||
@ -1,3 +0,0 @@ |
|||
{ |
|||
"usingComponents": {} |
|||
} |
|||
@ -1,2 +0,0 @@ |
|||
<!--pagesB/pages/repository/repository.wxml--> |
|||
<text>pagesB/pages/repository/repository.wxml</text> |
|||
@ -1 +0,0 @@ |
|||
/* pagesB/pages/repository/repository.wxss */ |
|||
@ -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 }) |
|||
}, |
|||
|
|||
|
|||
|
|||
|
|||
}) |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"navigationBarTitleText":"视频详情", |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,174 @@ |
|||
<view class="video-detail-container"> |
|||
<!-- 导航栏 --> |
|||
<view class="nav-bar" wx:if="{{!fullScreen}}"> |
|||
<view class="nav-title">{{video.title}}</view> |
|||
</view> |
|||
|
|||
<!-- 视频播放器区域 --> |
|||
<view class="video-player-section" style="{{fullScreen ? 'height: 100vh;' : ''}}"> |
|||
<!-- 视频播放器 --> |
|||
<video |
|||
id="videoPlayer" |
|||
src="{{videoUrl}}" |
|||
poster="{{video.coverImage ? baseUrl + video.coverImage : ''}}" |
|||
initial-time="0" |
|||
autoplay="{{autoplay}}" |
|||
loop="{{loop}}" |
|||
muted="{{isMuted}}" |
|||
controls="{{!fullScreen}}" |
|||
show-fullscreen-btn="{{!fullScreen}}" |
|||
show-play-btn="true" |
|||
show-center-play-btn="true" |
|||
enable-progress-gesture="true" |
|||
enable-play-gesture="{{fullScreen}}" |
|||
object-fit="contain" |
|||
direction="0" |
|||
bindplay="onVideoPlay" |
|||
bindpause="onVideoPause" |
|||
bindended="onVideoEnded" |
|||
bindtimeupdate="onTimeUpdate" |
|||
bindfullscreenchange="onFullScreenChange" |
|||
bindloadedmetadata="onVideoLoaded" |
|||
binderror="onVideoError" |
|||
class="video-player" |
|||
></video> |
|||
|
|||
<!-- 视频封面 --> |
|||
<view class="video-cover" wx:if="{{video.coverImage && !isPlaying && !fullScreen}}"> |
|||
<image |
|||
src="{{baseUrl + video.coverImage}}" |
|||
mode="aspectFill" |
|||
class="cover-image" |
|||
></image> |
|||
<view class="cover-play-btn" catchtap="togglePlay"> |
|||
<image class="play-icon" src="/pagesB/images/bo.png"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 全屏时的自定义控制栏 --> |
|||
<view class="fullscreen-controls" wx:if="{{fullScreen}}" catchtouchmove="onTouchMove"> |
|||
<!-- 顶部控制栏 --> |
|||
<view class="fullscreen-top-bar"> |
|||
<view class="top-bar-left" catchtap="exitFullScreen"> |
|||
<image class="back-icon" src="/pagesB/images/left.png"></image> |
|||
<text class="back-text">返回</text> |
|||
</view> |
|||
<view class="top-bar-title">{{video.title}}</view> |
|||
<view class="top-bar-right"></view> |
|||
</view> |
|||
|
|||
<!-- 播放按钮（中间） --> |
|||
<view class="center-play-btn" wx:if="{{!isPlaying}}" catchtap="togglePlay"> |
|||
<image class="play-large-icon" src="/pagesB/images/play.png"></image> |
|||
<view class="play-ripple"></view> |
|||
</view> |
|||
|
|||
<!-- 底部控制栏 --> |
|||
<view class="fullscreen-bottom-bar"> |
|||
<!-- 进度条 --> |
|||
<view class="fullscreen-progress"> |
|||
<view class="progress-time">{{formatTime(currentTime)}}</view> |
|||
<view class="progress-slider-container"> |
|||
<view class="progress-bg"> |
|||
<view class="progress-current" style="width: {{duration ? (currentTime / duration * 100) + '%' : '0%'}}"></view> |
|||
</view> |
|||
<view |
|||
class="progress-thumb" |
|||
style="left: {{duration ? (currentTime / duration * 100) + '%' : '0%'}}" |
|||
></view> |
|||
</view> |
|||
<view class="progress-time">{{formatTime(duration)}}</view> |
|||
</view> |
|||
|
|||
<view class="bottom-controls"> |
|||
<view class="control-item" catchtap="togglePlay"> |
|||
<image class="control-icon" src="{{isPlaying ? '/pagesB/images/pause.png' : '/pagesB/images/play.png'}}"></image> |
|||
</view> |
|||
<view class="control-item" catchtap="toggleMute"> |
|||
<image class="control-icon" src="{{isMuted ? '/pagesB/images/volume_mute.png' : '/pagesB/images/volume.png'}}"></image> |
|||
</view> |
|||
<view class="control-item" catchtap="toggleLoop"> |
|||
<image class="control-icon" src="{{loop ? '/pagesB/images/loop_on.png' : '/pagesB/images/loop.png'}}"></image> |
|||
</view> |
|||
<view class="control-item" catchtap="toggleSpeed"> |
|||
<text class="speed-text">{{playbackRate}}x</text> |
|||
</view> |
|||
<view class="control-item" catchtap="enterFullScreen"> |
|||
<image class="control-icon" src="/pagesB/images/fullscreen.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 触摸控制区域 --> |
|||
<view class="touch-control-left" catchtap="onTouchControl" data-type="backward"></view> |
|||
<view class="touch-control-center" catchtap="togglePlay"></view> |
|||
<view class="touch-control-right" catchtap="onTouchControl" data-type="forward"></view> |
|||
</view> |
|||
|
|||
<!-- 非全屏播放按钮 --> |
|||
<view class="normal-play-btn" wx:if="{{!fullScreen && !isPlaying && !video.coverImage}}" catchtap="togglePlay"> |
|||
<image class="play-icon" src="/pagesB/images/bo.png"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 视频信息区域 --> |
|||
<scroll-view |
|||
class="video-info-section" |
|||
scroll-y |
|||
wx:if="{{!fullScreen}}" |
|||
scroll-with-animation |
|||
> |
|||
<!-- 视频标题和描述 --> |
|||
<view class="video-header"> |
|||
<view class="video-title">{{video.title}}</view> |
|||
<view class="video-description">{{video.description}}</view> |
|||
|
|||
<!-- 视频统计数据 --> |
|||
<view class="video-stats"> |
|||
<view class="stat-item"> |
|||
<text>{{video.viewCount}} 播放</text> |
|||
</view> |
|||
<view class="stat-item"> |
|||
<text>{{video.publishTime}}</text> |
|||
</view> |
|||
<view class="stat-item"> |
|||
<text>{{video.category}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 发布者信息 --> |
|||
<view class="publisher-section" wx:if="{{video.publisherName}}"> |
|||
<image class="publisher-avatar" src="{{video.publisherAvatar ? baseUrl + video.publisherAvatar : '/pagesB/images/default_avatar.png'}}"></image> |
|||
<view class="publisher-info"> |
|||
<view class="publisher-name">{{video.publisherName}}</view> |
|||
<view class="publisher-desc">{{video.publisherDesc || '视频发布者'}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 视频标签 --> |
|||
<view class="tags-section" wx:if="{{videoTags.length > 0}}"> |
|||
<view class="section-title">标签</view> |
|||
<view class="tags-container"> |
|||
<view class="tag-item" wx:for="{{videoTags}}" wx:key="index"> |
|||
{{item}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
<!-- 加载中 --> |
|||
<view class="loading-container" wx:if="{{loading}}"> |
|||
<view class="loading-spinner"> |
|||
<view class="spinner-circle"></view> |
|||
</view> |
|||
<text class="loading-text">加载中...</text> |
|||
</view> |
|||
|
|||
<!-- 错误提示 --> |
|||
<view class="error-container" wx:if="{{videoError}}"> |
|||
<image class="error-icon" src="/pagesB/images/error.png"></image> |
|||
<text class="error-text">视频加载失败</text> |
|||
<view class="retry-btn" catchtap="retryVideo">重试</view> |
|||
</view> |
|||
</view> |
|||
@ -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; |
|||
} |
|||
} |
|||
@ -0,0 +1,402 @@ |
|||
import http from '../../../utils/api' |
|||
const baseUrl = require('../../../utils/baseUrl') |
|||
|
|||
Page({ |
|||
data: { |
|||
currentTab: 0, |
|||
searchKeyword: '', |
|||
articleActiveCategory: 0, |
|||
videoActiveCategory: '全部', |
|||
baseUrl: baseUrl, |
|||
|
|||
// 文章相关
|
|||
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' |
|||
}, |
|||
success: res => { |
|||
this.setData({ |
|||
wzzd: res.rows |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 视频字典
|
|||
getvideoZd() { |
|||
http.videoZd({ |
|||
data: { |
|||
dictType: 'video_category' |
|||
}, |
|||
success: res => { |
|||
this.setData({ |
|||
videoType: res.rows |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 获取文章列表（支持搜索和分类）
|
|||
getArticleList(isRefresh = false) { |
|||
if (this.data.articleLoading && !isRefresh) return |
|||
|
|||
this.setData({ |
|||
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 |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 获取视频列表（支持搜索和分类）
|
|||
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 |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
// 重置文章参数
|
|||
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) |
|||
if (tab === this.data.currentTab) return |
|||
|
|||
this.setData({ |
|||
currentTab: tab, |
|||
searchKeyword: '' |
|||
}) |
|||
|
|||
// 延迟加载新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 |
|||
}) |
|||
|
|||
// 防抖处理，500ms后执行搜索
|
|||
clearTimeout(this.searchTimer) |
|||
this.searchTimer = setTimeout(() => { |
|||
this.performSearch() |
|||
}, 500) |
|||
}, |
|||
|
|||
// 执行搜索
|
|||
performSearch() { |
|||
if (this.data.currentTab === 0) { |
|||
this.resetArticleParams() |
|||
this.getArticleList(true) |
|||
} else { |
|||
this.resetVideoParams() |
|||
this.getVideoList(true) |
|||
} |
|||
}, |
|||
|
|||
// 选择文章分类
|
|||
selectArticleCategory(e) { |
|||
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 |
|||
if (category === this.data.videoActiveCategory) return |
|||
|
|||
this.setData({ |
|||
videoActiveCategory: category |
|||
}) |
|||
|
|||
// 重置并重新加载数据
|
|||
this.resetVideoParams() |
|||
this.getVideoList(true) |
|||
}, |
|||
|
|||
// 查看文章详情
|
|||
viewArticleDetail(e) { |
|||
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 |
|||
console.log('播放视频', id) |
|||
wx.navigateTo({ |
|||
url: `/pagesB/pages/spDetails/spDetails?id=${id}` |
|||
}) |
|||
}, |
|||
|
|||
|
|||
// 跳转发布页
|
|||
bindPublish(){ |
|||
wx.navigateTo({ |
|||
url: '/pagesB/pages/publishAdd/publishAdd', |
|||
}) |
|||
}, |
|||
|
|||
|
|||
// 下拉刷新
|
|||
onPullDownRefresh() { |
|||
wx.showNavigationBarLoading() |
|||
|
|||
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) { |
|||
if (!this.data.articleHasMore || this.data.articleLoading) { |
|||
wx.showToast({ |
|||
title: '已加载全部', |
|||
icon: 'none', |
|||
duration: 1000 |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.setData({ |
|||
articlePageNo: this.data.articlePageNo + 1 |
|||
}) |
|||
this.getArticleList(false) |
|||
} else { |
|||
if (!this.data.videoHasMore || this.data.videoLoading) { |
|||
wx.showToast({ |
|||
title: '已加载全部', |
|||
icon: 'none', |
|||
duration: 1000 |
|||
}) |
|||
return |
|||
} |
|||
|
|||
this.setData({ |
|||
videoPageNo: this.data.videoPageNo + 1 |
|||
}) |
|||
this.getVideoList(false) |
|||
} |
|||
}, |
|||
|
|||
// 页面显示时刷新数据
|
|||
onShow() { |
|||
// 如果需要返回时刷新数据，可以在这里调用
|
|||
} |
|||
}) |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"navigationBarTitleText":"在线培训", |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,215 @@ |
|||
<!-- pages/training/training.wxml --> |
|||
<view class="training-container"> |
|||
<!-- 顶部标题 --> |
|||
<view class="header"> |
|||
<view class="title">在线培训</view> |
|||
<view class="subtitle">专业学习资源，助您快速成长</view> |
|||
<view class="header-decoration"> |
|||
<view class="decoration-circle circle-1"></view> |
|||
<view class="decoration-circle circle-2"></view> |
|||
<view class="decoration-circle circle-3"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<!-- 主选项卡切换 --> |
|||
<view class="tabs"> |
|||
<view class="tab-item {{currentTab === 0 ? 'active' : ''}}" bindtap="switchTab" data-tab="0"> |
|||
<text>文章</text> |
|||
<view class="tab-highlight {{currentTab === 0 ? 'active' : ''}}"></view> |
|||
</view> |
|||
<view class="tab-item {{currentTab === 1 ? 'active' : ''}}" bindtap="switchTab" data-tab="1"> |
|||
<text>视频</text> |
|||
<view class="tab-highlight {{currentTab === 1 ? 'active' : ''}}"></view> |
|||
</view> |
|||
<view class="tab-slider {{currentTab === 0 ? 'left' : 'right'}}"></view> |
|||
</view> |
|||
|
|||
<!-- 文章板块 --> |
|||
<view class="content-section" wx:if="{{currentTab === 0}}"> |
|||
<!-- 搜索框 --> |
|||
<view class="search-box"> |
|||
<image class="search-icon" src="/pagesB/images/sou.png"></image> |
|||
<input class="search-input" placeholder="搜索文章..." placeholder-class="placeholder-style" bindinput="onSearchInput" value="{{searchKeyword}}" /> |
|||
<view class="search-decoration"> |
|||
<view class="search-wave"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 文章分类筛选 --> |
|||
<scroll-view class="category-scroll" scroll-x scroll-with-animation> |
|||
<view class="category-list"> |
|||
<view class="category-item {{articleActiveCategory === 0 ? 'active' : ''}}" bindtap="selectArticleCategory" data-category="0"> |
|||
<text>全部</text> |
|||
<view class="category-indicator"></view> |
|||
</view> |
|||
<view class="category-item {{item.dictSort === articleActiveCategory? 'active' : ''}}" bindtap="selectArticleCategory" data-category="{{item.dictSort}}" wx:for="{{wzzd}}" wx:key="index"> |
|||
<text>{{item.dictLabel}}</text> |
|||
<view class="category-indicator"></view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
<!-- 文章列表 --> |
|||
<view class="articles-list"> |
|||
<view class="article-card" wx:for="{{filteredArticles}}" wx:key="id" bindtap="viewArticleDetail" data-id="{{item.id}}"> |
|||
<!-- 封面图片 --> |
|||
<view class="article-cover-container"> |
|||
<image class="article-cover" src="{{baseUrl+item.coverImage}}" mode="aspectFill"></image> |
|||
<view class="cover-overlay"></view> |
|||
<view class="category-tag">{{item.category}}</view> |
|||
<view class="article-hover-effect"></view> |
|||
</view> |
|||
|
|||
<!-- 文章信息 --> |
|||
<view class="article-info"> |
|||
<view class="article-title">{{item.title}}</view> |
|||
<view class="article-desc">{{item.subtitle}}</view> |
|||
|
|||
<view class="article-meta"> |
|||
<view class="meta-item"> |
|||
<image class="meta-icon" src="{{baseUrl+item.expertAvatar}}"></image> |
|||
<text class="meta-text">{{item.expertName}}</text> |
|||
</view> |
|||
|
|||
<view class="meta-item"> |
|||
<text class="meta-text">{{item.publishTime}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="article-stats"> |
|||
<view class="stat-item"> |
|||
<image class="stat-icon" src="/pagesB/images/lll.png"></image> |
|||
<text>{{item.viewCount}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 加载更多状态 --> |
|||
<view wx:if="{{currentTab === 0 && filteredArticles.length > 0}}"> |
|||
<view class="load-more" wx:if="{{articleHasMore && !articleLoading}}"> |
|||
<text>上拉加载更多</text> |
|||
</view> |
|||
<view class="loading-more" wx:if="{{articleLoading}}"> |
|||
<view class="loading-dot"></view> |
|||
<view class="loading-dot"></view> |
|||
<view class="loading-dot"></view> |
|||
<text>加载中...</text> |
|||
</view> |
|||
<view class="no-more" wx:if="{{!articleHasMore && filteredArticles.length > 0}}"> |
|||
<text>已加载全部</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty-state" wx:if="{{filteredArticles.length === 0}}"> |
|||
<view class="empty-animation"> |
|||
<view class="empty-circle"></view> |
|||
<view class="empty-circle circle-2"></view> |
|||
<view class="empty-circle circle-3"></view> |
|||
</view> |
|||
<text class="empty-text">暂无相关文章</text> |
|||
<text class="empty-hint">换个关键词试试吧</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 视频板块 --> |
|||
<view class="content-section" wx:if="{{currentTab === 1}}"> |
|||
<!-- 搜索框 --> |
|||
<view class="search-box"> |
|||
<image class="search-icon" src="/pagesB/images/sou.png"></image> |
|||
<input class="search-input" placeholder="搜索视频..." placeholder-class="placeholder-style" bindinput="onSearchInput" value="{{searchKeyword}}" /> |
|||
<view class="search-decoration"> |
|||
<view class="search-wave"></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 视频分类筛选 --> |
|||
<scroll-view class="category-scroll" scroll-x scroll-with-animation> |
|||
<view class="category-list"> |
|||
<view class="category-item {{videoActiveCategory === '全部' ? 'active' : ''}}" bindtap="selectVideoCategory" data-category="全部"> |
|||
<text>全部视频</text> |
|||
<view class="category-indicator"></view> |
|||
</view> |
|||
<view wx:for="{{videoType}}" wx:key="index" class="category-item {{ item.dictLabel=== videoActiveCategory ? 'active' : ''}}" bindtap="selectVideoCategory" data-category="{{item.dictLabel}}"> |
|||
<text>{{item.dictLabel}}</text> |
|||
<view class="category-indicator"></view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
|
|||
<!-- 视频列表 --> |
|||
<view class="videos-grid"> |
|||
<view class="video-card" wx:for="{{filteredVideos}}" wx:key="id" bindtap="playVideo" data-id="{{item.id}}"> |
|||
<!-- 视频封面 --> |
|||
<view class="video-cover-container"> |
|||
<image class="video-cover" src="{{baseUrl+item.coverImage}}" mode="aspectFill"></image> |
|||
<view class="video-duration">{{item.category}}</view> |
|||
<view class="cover-overlay"></view> |
|||
<view class="play-button"> |
|||
<image class="play-icon" src="/pagesB/images/bo.png"></image> |
|||
<view class="play-ripple"></view> |
|||
</view> |
|||
<view class="video-hover-effect"></view> |
|||
</view> |
|||
|
|||
<!-- 视频信息 --> |
|||
<view class="video-info"> |
|||
<view class="video-title">{{item.title}}</view> |
|||
<view class="video-instructor"> |
|||
<image class="instructor-avatar" src="{{baseUrl+item.publisherAvatar}}"></image> |
|||
<text class="instructor-name">{{item.publisherName}}</text> |
|||
</view> |
|||
|
|||
<view class="video-meta"> |
|||
<view class="video-meta-item"> |
|||
<text>{{item.auditTime}}</text> |
|||
</view> |
|||
<view class="video-meta-item"> |
|||
<text>{{item.viewCount}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<!-- 加载更多状态 --> |
|||
<view wx:if="{{currentTab === 1 && filteredVideos.length > 0}}"> |
|||
<view class="load-more" wx:if="{{videoHasMore && !videoLoading}}"> |
|||
<text>上拉加载更多</text> |
|||
</view> |
|||
<view class="loading-more" wx:if="{{videoLoading}}"> |
|||
<view class="loading-dot"></view> |
|||
<view class="loading-dot"></view> |
|||
<view class="loading-dot"></view> |
|||
<text>加载中...</text> |
|||
</view> |
|||
<view class="no-more" wx:if="{{!videoHasMore && filteredVideos.length > 0}}"> |
|||
<text>已加载全部</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 空状态 --> |
|||
<view class="empty-state" wx:if="{{filteredVideos.length === 0}}"> |
|||
<view class="empty-animation"> |
|||
<view class="empty-circle"></view> |
|||
<view class="empty-circle circle-2"></view> |
|||
<view class="empty-circle circle-3"></view> |
|||
</view> |
|||
<text class="empty-text">暂无相关视频</text> |
|||
<text class="empty-hint">换个关键词试试吧</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 新增视频气泡按钮 --> |
|||
<view class="create-btn-container" bind:tap="bindPublish"> |
|||
<view class="create-btn" bindtap="showCreateModal"> |
|||
<image class="btn-icon" src="/pagesA/images/jh.png"></image> |
|||
<text class="btn-text">发布</text> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
1105
pagesB/pages/training/training.wxss
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -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(/<img/g, '<img style="max-width:100%;height:auto;border-radius:15rpx;margin:20rpx 0;"') |
|||
}, |
|||
|
|||
|
|||
|
|||
// 滚动事件
|
|||
onPageScroll(e) { |
|||
this.setData({ |
|||
scrollTop: e.scrollTop |
|||
}) |
|||
}, |
|||
|
|||
// 回到顶部
|
|||
scrollToTop() { |
|||
wx.pageScrollTo({ |
|||
scrollTop: 0, |
|||
duration: 300 |
|||
}) |
|||
}, |
|||
|
|||
// 下拉刷新
|
|||
onPullDownRefresh() { |
|||
|
|||
}, |
|||
|
|||
|
|||
|
|||
|
|||
// 页面卸载
|
|||
onUnload() { |
|||
|
|||
} |
|||
}) |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"navigationBarTitleText":"文章详情", |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,62 @@ |
|||
<view class="article-detail-container"> |
|||
|
|||
<!-- 文章内容 --> |
|||
<scroll-view class="article-content" scroll-y> |
|||
<!-- 文章封面 --> |
|||
<view class="article-cover"> |
|||
<image |
|||
class="cover-image" |
|||
src="{{baseUrl + article.coverImage}}" |
|||
mode="widthFix" |
|||
lazy-load |
|||
></image> |
|||
<view class="cover-overlay"></view> |
|||
<view class="cover-gradient"></view> |
|||
<view class="cover-category">{{article.category}}</view> |
|||
</view> |
|||
|
|||
<!-- 文章主体 --> |
|||
<view class="article-body"> |
|||
<!-- 标题区域 --> |
|||
<view class="title-section"> |
|||
<view class="article-title">{{article.title}}</view> |
|||
<view class="article-subtitle">{{article.subtitle}}</view> |
|||
|
|||
<!-- 专家信息 --> |
|||
<view class="expert-info"> |
|||
<image class="expert-avatar" src="{{baseUrl + article.expertAvatar}}"></image> |
|||
<view class="expert-detail"> |
|||
<view class="expert-name">{{article.expertName}}</view> |
|||
<view class="publish-time">{{article.publishTime}}</view> |
|||
</view> |
|||
<view class="view-count"> |
|||
<image class="view-icon" src="/pagesB/images/lll.png"></image> |
|||
<text>{{article.viewCount}} 阅读</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 文章内容（富文本） --> |
|||
<view class="rich-content"> |
|||
<rich-text nodes="{{article.content}}"></rich-text> |
|||
</view> |
|||
|
|||
</view> |
|||
</scroll-view> |
|||
|
|||
|
|||
<!-- 加载中 --> |
|||
<view class="loading-container" wx:if="{{loading}}"> |
|||
<view class="loading-spinner"> |
|||
<view class="spinner-circle"></view> |
|||
<view class="spinner-circle circle-2"></view> |
|||
<view class="spinner-circle circle-3"></view> |
|||
</view> |
|||
<text class="loading-text">加载中...</text> |
|||
</view> |
|||
|
|||
<!-- 回到顶部按钮 --> |
|||
<view class="back-to-top" wx:if="{{scrollTop > 400}}" catchtap="scrollToTop"> |
|||
<image class="top-icon" src="/pagesB/images/top.png"></image> |
|||
</view> |
|||
</view> |
|||
@ -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; |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue