first commit
This commit is contained in:
Jane Doe
245
pages/details/details.js
Normal file
245
pages/details/details.js
Normal file
@@ -0,0 +1,245 @@
|
||||
var app = getApp();
|
||||
|
||||
Page({
|
||||
data: {
|
||||
currentPath: '', // 当前路径
|
||||
breadcrumbPath: '', // 上一级路径
|
||||
currentItems: [], // 当前目录内容
|
||||
hasMore: false, // 是否有更多数据
|
||||
showQRPopup: false, // 控制二维码弹窗显示
|
||||
popupAnimation: {}, // 弹窗动画
|
||||
page: 1, // 当前页码
|
||||
pageSize: 20, // 每页大小
|
||||
isRoot: true, // 是否是根目录
|
||||
qrcodeUrl: 'https://file.guimiaokeji.com/%E5%B9%BF%E5%91%8A/C55BDC06151A606BDAEBCF787283874E.jpg', // 二维码图片链接
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
|
||||
wx.showShareMenu({
|
||||
withShareTicket: !0,
|
||||
menus: [ "shareAppMessage", "shareTimeline" ]
|
||||
});
|
||||
},
|
||||
showVip(){
|
||||
wx.navigateTo({
|
||||
url: "../vip_recharge/vip_recharge?show=true"
|
||||
})
|
||||
}
|
||||
,
|
||||
// 默认加载第一个目录
|
||||
loadDefaultDirectory() {
|
||||
wx.showLoading({ title: '加载中...' });
|
||||
|
||||
app.apiRequest({
|
||||
url: '/api/courses/',
|
||||
method: 'GET',
|
||||
data: {
|
||||
path: '/', // 根路径
|
||||
page_num: 1,
|
||||
page_size: 1, // 仅获取第一个目录
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.status === 'success') {
|
||||
const firstItem = res.data.data.files[0];
|
||||
|
||||
if (firstItem && firstItem.type === 1) {
|
||||
// 如果第一个项目是目录，加载该目录
|
||||
this.loadDirectory(`/${firstItem.name}`);
|
||||
} else {
|
||||
wx.showToast({ title: '没有可用的目录', icon: 'none' });
|
||||
}
|
||||
} else {
|
||||
wx.showToast({ title: '获取数据失败', icon: 'none' });
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
wx.showToast({ title: '加载失败，请重试', icon: 'none' });
|
||||
console.error(err);
|
||||
},
|
||||
complete: () => wx.hideLoading(),
|
||||
});
|
||||
},
|
||||
|
||||
// 加载指定目录内容
|
||||
loadDirectory(path, append = false) {
|
||||
wx.showLoading({ title: '加载中...' });
|
||||
|
||||
// 确保路径不会出现多个斜杠
|
||||
const sanitizedPath = path.replace(/\/+/g, '/');
|
||||
|
||||
app.apiRequest({
|
||||
url: '/api/courses/',
|
||||
method: 'GET',
|
||||
data: {
|
||||
path: sanitizedPath,
|
||||
page_num: this.data.page,
|
||||
page_size: this.data.pageSize,
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.data.status === 'success') {
|
||||
const newItems = res.data.data.files.map((item) => ({
|
||||
...item,
|
||||
path: `${sanitizedPath}/${item.name}`,
|
||||
}));
|
||||
|
||||
const paths = sanitizedPath.split('/').filter(Boolean);
|
||||
const breadcrumbPath = paths.slice(0, -1).join('/') || '/';
|
||||
|
||||
this.setData({
|
||||
currentItems: append ? this.data.currentItems.concat(newItems) : newItems,
|
||||
currentPath: sanitizedPath,
|
||||
breadcrumbPath,
|
||||
hasMore: newItems.length === this.data.pageSize,
|
||||
isRoot: sanitizedPath === '/', // 根目录判断
|
||||
});
|
||||
} else {
|
||||
wx.showToast({ title: '获取数据失败', icon: 'none' });
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
wx.showToast({ title: '加载失败，请重试', icon: 'none' });
|
||||
console.error(err);
|
||||
},
|
||||
complete: () => wx.hideLoading(),
|
||||
});
|
||||
},
|
||||
|
||||
// 点击目录或文件
|
||||
handleItemClick(e) {
|
||||
const { type, path } = e.currentTarget.dataset;
|
||||
|
||||
if (type === 1) { // 目录
|
||||
this.setData({ page: 1 });
|
||||
this.loadDirectory(path);
|
||||
} else if (type === 0) { // 文件
|
||||
this.setData({
|
||||
qrcodeUrl: this.data.qrcodeUrl, // 假设文件路径作为二维码图片链接
|
||||
});
|
||||
this.showQRCode();
|
||||
}
|
||||
},
|
||||
|
||||
// 返回上级目录
|
||||
goToParent() {
|
||||
const paths = this.data.currentPath.split('/').filter(Boolean);
|
||||
paths.pop();
|
||||
const parentPath = '/' + paths.join('/');
|
||||
|
||||
this.setData({ page: 1 });
|
||||
this.loadDirectory(parentPath);
|
||||
},
|
||||
|
||||
// 加载更多
|
||||
loadMore() {
|
||||
if (!this.data.hasMore) return;
|
||||
|
||||
this.setData({ page: this.data.page + 1 });
|
||||
this.loadDirectory(this.data.currentPath, true);
|
||||
},
|
||||
|
||||
// 显示二维码弹窗
|
||||
showQRCode() {
|
||||
this.setData({ showQRPopup: true });
|
||||
const animation = wx.createAnimation({
|
||||
duration: 300,
|
||||
timingFunction: 'ease',
|
||||
});
|
||||
animation.scale(1).opacity(1).step();
|
||||
this.setData({ popupAnimation: animation.export() });
|
||||
},
|
||||
|
||||
// 关闭二维码弹窗
|
||||
closeQRCode() {
|
||||
const animation = wx.createAnimation({
|
||||
duration: 300,
|
||||
timingFunction: 'ease',
|
||||
});
|
||||
animation.scale(0.8).opacity(0).step();
|
||||
this.setData({ popupAnimation: animation.export() });
|
||||
|
||||
setTimeout(() => {
|
||||
this.setData({ showQRPopup: false });
|
||||
}, 300);
|
||||
},
|
||||
|
||||
// 防止点击弹窗内部关闭弹窗
|
||||
preventClose() {
|
||||
// 空函数，阻止事件冒泡
|
||||
},
|
||||
|
||||
// 保存二维码到相册
|
||||
saveQRCode() {
|
||||
const { qrcodeUrl } = this.data;
|
||||
|
||||
wx.showLoading({ title: '正在保存...' });
|
||||
|
||||
wx.downloadFile({
|
||||
url: qrcodeUrl,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
wx.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
wx.showToast({ title: '二维码已保存', icon: 'success' });
|
||||
},
|
||||
fail: (err) => {
|
||||
wx.showToast({ title: '保存失败，请重试', icon: 'none' });
|
||||
console.error(err);
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
wx.showToast({ title: '下载失败，请重试', icon: 'none' });
|
||||
console.error(err);
|
||||
},
|
||||
complete: () => wx.hideLoading(),
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
onShareAppMessage: function () {
|
||||
return {
|
||||
title: '分享给你一份全链路的自媒体课程，赶快来领取吧',
|
||||
path: '/pages/details/details?uuid=' + wx.getStorageSync('uuid'),
|
||||
imageUrl: 'https://file.guimiaokeji.com/kecheng.png',
|
||||
success: function (e) {
|
||||
wx.showToast({
|
||||
title: "分享成功",
|
||||
icon: "success",
|
||||
duration: 2e3
|
||||
});
|
||||
},
|
||||
fail: function (e) {
|
||||
wx.showToast({
|
||||
title: "分享失败",
|
||||
icon: "none",
|
||||
duration: 2e3
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
onShareTimeline: function () {
|
||||
return {
|
||||
title: '分享给你一份全链路的自媒体课程，赶快来领取吧',
|
||||
path: '/pages/details/details?uuid=' + wx.getStorageSync('uuid'),
|
||||
imageUrl: 'https://file.guimiaokeji.com/kecheng.png',
|
||||
success: function (e) {
|
||||
wx.showToast({
|
||||
title: "分享成功",
|
||||
icon: "success",
|
||||
duration: 2e3
|
||||
});
|
||||
},
|
||||
fail: function (e) {
|
||||
wx.showToast({
|
||||
title: "分享失败",
|
||||
icon: "none",
|
||||
duration: 2e3
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
9
pages/details/details.json
Normal file
9
pages/details/details.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"popup": "/popup/popup"
|
||||
},
|
||||
"navigationBarTitleText": "创意启航站",
|
||||
"navigationBarBackgroundColor": "#222238",
|
||||
"navigationBarTextStyle": "white"
|
||||
|
||||
}
|
||||
39
pages/details/details.wxml
Normal file
39
pages/details/details.wxml
Normal file
@@ -0,0 +1,39 @@
|
||||
<view class="course-detail-container">
|
||||
<!-- 课程介绍 -->
|
||||
<view class="course-intro">
|
||||
<view class="intro-title">📚 精品资源分享</view>
|
||||
<text class="intro-description">
|
||||
- 🎁 价值上万的*学习资源*，让你轻松打造高质量作品
|
||||
- 🛠️ 实用*免费视频剪辑工具和AI创作资料*，提高创作效率
|
||||
- 💡 专业的*平台算法解析*和实战技巧，让你少走弯路
|
||||
- 🔔 现在仅需 ￥29 即可获得一份精品课程
|
||||
- 🩸 现在仅需 ￥599 即可获得代理资格，拥有创意站分销权限和所有课程分销和免费看
|
||||
</text>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- 功能按钮 -->
|
||||
<view class="action-buttons">
|
||||
<view class="button-row">
|
||||
<button class="action-btn green-btn" bindtap="showQRCode">🎁 领取课程资源</button>
|
||||
<button class="action-btn purple-btn" bindtap="showVip">🛠️ 成为代理会员</button>
|
||||
</view>
|
||||
<view class="button-row">
|
||||
<button class="action-btn orange-btn" bindtap="showQRCode">📦 免费素材资源</button>
|
||||
<button class="action-btn yellow-btn" bindtap="showQRCode">💡 运营专家解答</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 弹出二维码弹窗 -->
|
||||
<view wx:if="{{showQRPopup}}" class="qrcode-popup-mask" animation="{{popupAnimation}}" catchtap="closeQRCode">
|
||||
<view class="qrcode-popup" catchtap="preventClose">
|
||||
<text class="close-icon" bindtap="closeQRCode">✕</text>
|
||||
<view class="qrcode-text">
|
||||
<text>📱 长按保存二维码</text>
|
||||
<text>扫一扫领取资料</text>
|
||||
</view>
|
||||
<image class="qrcode-img" src="{{qrcodeUrl}}" mode="aspectFit" bindlongtap="saveQRCode"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
208
pages/details/details.wxss
Normal file
208
pages/details/details.wxss
Normal file
@@ -0,0 +1,208 @@
|
||||
/* 页面整体样式 */
|
||||
page {
|
||||
background-color: #222238;
|
||||
border-top: 1px solid hsla(0,31%,87%,.5);
|
||||
font-size: 32rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
/* 页面整体样式 */
|
||||
.course-detail-container {
|
||||
padding: 20rpx;
|
||||
background-color: #1a1d3b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 课程介绍 */
|
||||
.course-intro {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.intro-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #ffcc00;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.intro-description {
|
||||
font-size: 28rpx;
|
||||
line-height: 1.6;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* 两张图片并排展示 */
|
||||
/* 整体背景 */
|
||||
.file-browser {
|
||||
padding: 20rpx;
|
||||
background-color: #1a1d3b;
|
||||
color: #fff;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 头部：返回按钮和路径 */
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #2a2e50;
|
||||
padding: 10rpx;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.breadcrumb-path {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 文件和目录列表 */
|
||||
.file-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.file-list-root {
|
||||
height: auto; /* 根目录时内容高度自适应 */
|
||||
}
|
||||
|
||||
.file-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background-color: #2a2e50;
|
||||
border-radius: 10rpx;
|
||||
border-bottom: 1px solid #fff;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; /* 长文字处理 */
|
||||
max-width: 80%; /* 确保图标不被挤掉 */
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; /* 长文字处理 */
|
||||
max-width: 80%; /* 确保图标不被挤掉 */
|
||||
}
|
||||
|
||||
.file-updated {
|
||||
font-size: 24rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
padding: 20rpx 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
/* 功能按钮两行布局 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 48%;
|
||||
font-size: 28rpx;
|
||||
padding: 20rpx 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.green-btn { background-color: #28a745; }
|
||||
.purple-btn { background-color: #6f42c1; }
|
||||
.orange-btn { background-color: #fd7e14; }
|
||||
.yellow-btn { background-color: #ffc107; }
|
||||
|
||||
/* 弹窗样式 */
|
||||
.qrcode-popup-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.qrcode-popup {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
padding: 40rpx;
|
||||
border-radius: 20rpx;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
font-size: 36rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.qrcode-text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.qrcode-text text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.qrcode-img {
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
margin: 20rpx auto;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user