Ubuntu
718 lines
18 KiB
Vue
718 lines
18 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 返回按钮 -->
|
|
<view class="nav-bar">
|
|
<view class="nav-back" @click="goBack">
|
|
<uni-icons type="arrowleft" size="24" color="#333"></uni-icons>
|
|
</view>
|
|
<text class="nav-title">项目详情</text>
|
|
<view class="nav-actions">
|
|
<view class="nav-action" @click="handleShare">
|
|
<uni-icons type="share" size="24" color="#333"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 项目详情内容 -->
|
|
<scroll-view class="content-scroll" scroll-y="true">
|
|
<!-- 项目封面 -->
|
|
<view class="project-cover">
|
|
<image
|
|
:src="project.cover || '/static/images/project-default.png'"
|
|
mode="widthFix"
|
|
class="cover-image"
|
|
/>
|
|
<view v-if="project.isNew" class="new-badge">NEW</view>
|
|
</view>
|
|
|
|
<!-- 项目基本信息 -->
|
|
<view class="project-base-info">
|
|
<text class="project-title">{{ project.title }}</text>
|
|
<text class="project-desc">{{ project.desc }}</text>
|
|
|
|
<view class="project-meta">
|
|
<view class="meta-item">
|
|
<uni-icons type="person" size="18" color="#999"></uni-icons>
|
|
<text class="meta-text">{{ project.author }}</text>
|
|
</view>
|
|
|
|
<view class="meta-item">
|
|
<uni-icons type="time" size="18" color="#999"></uni-icons>
|
|
<text class="meta-text">{{ formatTime(project.publishTime) }}</text>
|
|
</view>
|
|
|
|
<view class="meta-item">
|
|
<uni-icons type="eye" size="18" color="#999"></uni-icons>
|
|
<text class="meta-text">{{ project.viewCount || 0 }} 浏览</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 交互按钮 -->
|
|
<view class="action-bar">
|
|
<view class="action-btn" @click="handleLike">
|
|
<uni-icons
|
|
:type="project.liked ? 'heart-filled' : 'heart'"
|
|
size="24"
|
|
:color="project.liked ? '#ff4444' : '#333'"
|
|
></uni-icons>
|
|
<text class="action-text">{{ project.liked ? '已点赞' : '点赞' }}</text>
|
|
<text class="action-count">{{ project.zan || 0 }}</text>
|
|
</view>
|
|
|
|
<view class="action-btn" @click="handleCollect">
|
|
<uni-icons
|
|
:type="project.collected ? 'star-filled' : 'star'"
|
|
size="24"
|
|
:color="project.collected ? '#ffaa00' : '#333'"
|
|
></uni-icons>
|
|
<text class="action-text">{{ project.collected ? '已收藏' : '收藏' }}</text>
|
|
<text class="action-count">{{ project.collectCount || 0 }}</text>
|
|
</view>
|
|
|
|
<view class="action-btn" @click="viewSourceCode">
|
|
<uni-icons type="code" size="24" color="#333"></uni-icons>
|
|
<text class="action-text">源码</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 项目详情内容 -->
|
|
<view class="project-content">
|
|
<view class="section">
|
|
<text class="section-title">项目介绍</text>
|
|
<text class="section-content">
|
|
{{ project.content || '这是一个优秀的Android项目，包含了完整的功能实现和最佳实践。项目采用现代化的架构设计，代码结构清晰，易于维护和扩展。' }}
|
|
</text>
|
|
</view>
|
|
|
|
<view class="section" v-if="project.features && project.features.length > 0">
|
|
<text class="section-title">主要功能</text>
|
|
<view class="feature-list">
|
|
<view v-for="(feature, index) in project.features" :key="index" class="feature-item">
|
|
<uni-icons type="checkmark" size="18" color="#3cc51f"></uni-icons>
|
|
<text class="feature-text">{{ feature }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section" v-if="project.techStack && project.techStack.length > 0">
|
|
<text class="section-title">技术栈</text>
|
|
<view class="tech-tags">
|
|
<view v-for="tech in project.techStack" :key="tech" class="tech-tag">
|
|
<text>{{ tech }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section">
|
|
<text class="section-title">使用说明</text>
|
|
<text class="section-content">
|
|
1. 克隆项目到本地\n
|
|
2. 使用Android Studio打开项目\n
|
|
3. 同步Gradle依赖\n
|
|
4. 连接设备或启动模拟器\n
|
|
5. 运行项目
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 相关项目 -->
|
|
<view class="related-projects" v-if="relatedProjects.length > 0">
|
|
<text class="section-title">相关项目</text>
|
|
<scroll-view class="related-scroll" scroll-x="true" show-scrollbar="false">
|
|
<view class="related-list">
|
|
<view
|
|
v-for="related in relatedProjects"
|
|
:key="related.id"
|
|
class="related-card"
|
|
@click="viewRelatedProject(related)"
|
|
>
|
|
<image :src="related.cover" mode="aspectFill" class="related-cover"></image>
|
|
<text class="related-title">{{ related.title }}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 底部操作栏 -->
|
|
<view class="bottom-bar">
|
|
<button class="primary-btn" @click="downloadProject">下载项目</button>
|
|
<button class="secondary-btn" @click="viewSourceCode">查看源码</button>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
projectId: null,
|
|
project: {
|
|
id: 101,
|
|
title: '玩Android Material Design客户端',
|
|
desc: '基于Uniapp框架开发的玩Android客户端，完全遵循Material Design 3设计规范',
|
|
author: 'Material Design',
|
|
publishTime: 1773715075615,
|
|
zan: 42,
|
|
collectCount: 28,
|
|
viewCount: 156,
|
|
liked: false,
|
|
collected: false,
|
|
cover: '/static/images/projects/project1.png',
|
|
isNew: true,
|
|
sourceUrl: 'https://github.com/example/wanandroid-material',
|
|
content: '这是一个完整的玩Android客户端项目，采用Uniapp框架开发，支持Android和iOS平台。项目完全遵循Material Design 3设计规范，提供了优秀的用户体验。',
|
|
features: [
|
|
'Material Design 3设计规范',
|
|
'响应式布局',
|
|
'暗色模式支持',
|
|
'离线缓存',
|
|
'手势操作',
|
|
'动画效果'
|
|
],
|
|
techStack: ['Uniapp', 'Vue.js', 'JavaScript', 'CSS3', 'HTML5']
|
|
},
|
|
|
|
relatedProjects: [
|
|
{
|
|
id: 102,
|
|
title: 'Android性能优化',
|
|
cover: '/static/images/projects/project2.png'
|
|
},
|
|
{
|
|
id: 103,
|
|
title: 'Flutter电商应用',
|
|
cover: '/static/images/projects/project3.png'
|
|
},
|
|
{
|
|
id: 104,
|
|
title: 'Compose组件库',
|
|
cover: '/static/images/projects/project4.png'
|
|
},
|
|
{
|
|
id: 105,
|
|
title: 'Kotlin协程',
|
|
cover: '/static/images/projects/project5.png'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
|
|
onLoad(options) {
|
|
console.log('项目详情页面加载，参数:', options)
|
|
this.projectId = options.id || 101
|
|
|
|
// 模拟从API获取项目详情
|
|
this.fetchProjectDetail()
|
|
},
|
|
|
|
methods: {
|
|
// 获取项目详情
|
|
async fetchProjectDetail() {
|
|
try {
|
|
// 这里可以调用API获取项目详情
|
|
// const res = await uni.request({
|
|
// url: `http://localhost:3000/api/project/detail/${this.projectId}/json`,
|
|
// method: 'GET'
|
|
// })
|
|
|
|
// 模拟API响应
|
|
uni.showLoading({ title: '加载中...' })
|
|
|
|
setTimeout(() => {
|
|
// 根据ID更新项目数据
|
|
if (this.projectId == 102) {
|
|
this.project = {
|
|
...this.project,
|
|
id: 102,
|
|
title: 'Android性能优化实战',
|
|
desc: '包含内存优化、启动优化、卡顿监控等实战案例',
|
|
author: '性能优化组',
|
|
zan: 36,
|
|
collectCount: 45,
|
|
liked: true,
|
|
cover: '/static/images/project2.png',
|
|
content: '这是一个Android性能优化实战项目，涵盖了内存优化、启动优化、卡顿监控等多个方面的最佳实践。',
|
|
features: [
|
|
'内存泄漏检测',
|
|
'启动时间优化',
|
|
'卡顿监控',
|
|
'电量优化',
|
|
'网络优化'
|
|
],
|
|
techStack: ['Android', 'Kotlin', 'Profiler', 'Systrace']
|
|
}
|
|
} else if (this.projectId == 103) {
|
|
this.project = {
|
|
...this.project,
|
|
id: 103,
|
|
title: 'Flutter跨平台电商应用',
|
|
desc: '使用Flutter开发的完整电商应用，支持iOS和Android',
|
|
author: 'Flutter团队',
|
|
zan: 89,
|
|
collectCount: 67,
|
|
collected: true,
|
|
cover: '/static/images/project3.png',
|
|
content: '这是一个使用Flutter开发的跨平台电商应用，支持商品浏览、购物车、订单管理、支付等完整功能。',
|
|
features: [
|
|
'跨平台支持',
|
|
'商品分类浏览',
|
|
'购物车功能',
|
|
'订单管理',
|
|
'支付集成'
|
|
],
|
|
techStack: ['Flutter', 'Dart', 'Provider', 'Firebase']
|
|
}
|
|
}
|
|
|
|
uni.hideLoading()
|
|
}, 500)
|
|
} catch (error) {
|
|
console.error('获取项目详情失败:', error)
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '加载失败',
|
|
icon: 'error'
|
|
})
|
|
}
|
|
},
|
|
|
|
// 返回上一页
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
|
|
// 分享项目
|
|
handleShare() {
|
|
uni.share({
|
|
provider: 'weixin',
|
|
scene: 'WXSceneSession',
|
|
type: 0,
|
|
title: this.project.title,
|
|
summary: this.project.desc,
|
|
href: `https://example.com/project/${this.project.id}`,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '分享成功',
|
|
icon: 'success'
|
|
})
|
|
},
|
|
fail: () => {
|
|
uni.showToast({
|
|
title: '分享失败',
|
|
icon: 'error'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
// 点赞处理
|
|
handleLike() {
|
|
this.project.liked = !this.project.liked
|
|
this.project.zan = this.project.liked ? this.project.zan + 1 : Math.max(0, this.project.zan - 1)
|
|
|
|
uni.showToast({
|
|
title: this.project.liked ? '已点赞' : '已取消点赞',
|
|
icon: 'success'
|
|
})
|
|
},
|
|
|
|
// 收藏处理
|
|
handleCollect() {
|
|
this.project.collected = !this.project.collected
|
|
this.project.collectCount = this.project.collected ?
|
|
this.project.collectCount + 1 :
|
|
Math.max(0, this.project.collectCount - 1)
|
|
|
|
uni.showToast({
|
|
title: this.project.collected ? '已收藏' : '已取消收藏',
|
|
icon: 'success'
|
|
})
|
|
},
|
|
|
|
// 查看源码
|
|
viewSourceCode() {
|
|
if (this.project.sourceUrl) {
|
|
uni.setClipboardData({
|
|
data: this.project.sourceUrl,
|
|
success: () => {
|
|
uni.showModal({
|
|
title: '源码地址已复制',
|
|
content: '是否在浏览器中打开？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
// 在浏览器中打开
|
|
plus.runtime.openURL(this.project.sourceUrl)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: '暂无源码地址',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
|
|
// 下载项目
|
|
downloadProject() {
|
|
uni.showModal({
|
|
title: '下载项目',
|
|
content: '确定要下载该项目吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.showLoading({ title: '下载中...' })
|
|
|
|
// 模拟下载过程
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '下载成功',
|
|
icon: 'success'
|
|
})
|
|
|
|
// 这里可以触发实际的文件下载
|
|
// const downloadTask = uni.downloadFile({
|
|
// url: 'https://example.com/project.zip',
|
|
// success: (downloadResult) => {
|
|
// uni.saveFile({
|
|
// tempFilePath: downloadResult.tempFilePath,
|
|
// success: (saveResult) => {
|
|
// console.log('文件保存成功:', saveResult.savedFilePath)
|
|
// }
|
|
// })
|
|
// }
|
|
// })
|
|
}, 1500)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 查看相关项目
|
|
viewRelatedProject(relatedProject) {
|
|
uni.navigateTo({
|
|
url: `/pages/project-detail/project-detail?id=${relatedProject.id}`
|
|
})
|
|
},
|
|
|
|
// 格式化时间
|
|
formatTime(timestamp) {
|
|
if (!timestamp) return '未知时间'
|
|
|
|
const date = new Date(timestamp)
|
|
const now = new Date()
|
|
const diff = now - date
|
|
|
|
// 1分钟内
|
|
if (diff < 60 * 1000) {
|
|
return '刚刚'
|
|
}
|
|
|
|
// 1小时内
|
|
if (diff < 60 * 60 * 1000) {
|
|
return `${Math.floor(diff / (60 * 1000))}分钟前`
|
|
}
|
|
|
|
// 1天内
|
|
if (diff < 24 * 60 * 60 * 1000) {
|
|
return `${Math.floor(diff / (60 * 60 * 1000))}小时前`
|
|
}
|
|
|
|
// 1周内
|
|
if (diff < 7 * 24 * 60 * 60 * 1000) {
|
|
return `${Math.floor(diff / (24 * 60 * 60 * 1000))}天前`
|
|
}
|
|
|
|
// 显示具体日期
|
|
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
/* 导航栏 */
|
|
.nav-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
height: 88rpx;
|
|
background-color: #ffffff;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.nav-back {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.nav-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-action {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
/* 内容滚动区域 */
|
|
.content-scroll {
|
|
flex: 1;
|
|
}
|
|
|
|
/* 项目封面 */
|
|
.project-cover {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 400rpx;
|
|
overflow: hidden;
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.cover-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.new-badge {
|
|
position: absolute;
|
|
top: 30rpx;
|
|
right: 30rpx;
|
|
background-color: #ff4444;
|
|
color: #ffffff;
|
|
font-size: 24rpx;
|
|
padding: 6rpx 16rpx;
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
/* 项目基本信息 */
|
|
.project-base-info {
|
|
padding: 40rpx 30rpx;
|
|
background-color: #ffffff;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.project-title {
|
|
display: block;
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.project-desc {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.project-meta {
|
|
display: flex;
|
|
gap: 40rpx;
|
|
}
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.meta-text {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
/* 交互按钮栏 */
|
|
.action-bar {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
background-color: #ffffff;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.action-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.action-text {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.action-count {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
|
|
/* 项目详情内容 */
|
|
.project-content {
|
|
padding: 40rpx 30rpx;
|
|
background-color: #ffffff;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.section-title {
|
|
display: block;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.section-content {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
line-height: 1.8;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
/* 功能列表 */
|
|
.feature-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.feature-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 15rpx;
|
|
}
|
|
|
|
.feature-text {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* 技术栈标签 */
|
|
.tech-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.tech-tag {
|
|
padding: 12rpx 24rpx;
|
|
background-color: #f0f9ff;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #3cc51f;
|
|
}
|
|
|
|
/* 相关项目 */
|
|
.related-projects {
|
|
padding: 40rpx 30rpx;
|
|
background-color: #ffffff;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.related-scroll {
|
|
white-space: nowrap;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.related-list {
|
|
display: inline-flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.related-card {
|
|
width: 200rpx;
|
|
background-color: #f8f8f8;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.related-cover {
|
|
width: 100%;
|
|
height: 150rpx;
|
|
}
|
|
|
|
.related-title {
|
|
display: block;
|
|
padding: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
text-align: center;
|
|
white-space: normal;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
/* 底部操作栏 */
|
|
.bottom-bar {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
padding: 30rpx;
|
|
background-color: #ffffff;
|
|
margin-top: 20rpx;
|
|
position: sticky;
|
|
bottom: 0;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.primary-btn,
|
|
.secondary-btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.primary-btn {
|
|
background-color: #3cc51f;
|
|
color: #ffffff;
|
|
border: none;
|
|
}
|
|
|
|
.secondary-btn {
|
|
background-color: transparent;
|
|
color: #3cc51f;
|
|
border: 1rpx solid #3cc51f;
|
|
}
|
|
</style> |