初始
This commit is contained in:
92
pages/detail/detail.js
Normal file
92
pages/detail/detail.js
Normal file
@@ -0,0 +1,92 @@
|
||||
// pages/detail/detail.js
|
||||
const { get } = require('../../utils/request');
|
||||
const { formatTime } = require('../../utils/util');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
id: '',
|
||||
detail: null,
|
||||
loading: true,
|
||||
isFavorite: false,
|
||||
relatedList: []
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
if (options.id) {
|
||||
this.setData({ id: options.id });
|
||||
this.loadDetail(options.id);
|
||||
}
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: this.data.detail?.title || '信息详情',
|
||||
path: `/pages/detail/detail?id=${this.data.id}`
|
||||
};
|
||||
},
|
||||
|
||||
// 加载详情
|
||||
async loadDetail(id) {
|
||||
this.setData({ loading: true });
|
||||
|
||||
// 模拟数据
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
loading: false,
|
||||
detail: {
|
||||
id: id,
|
||||
title: '这是一个详情页面的标题，展示信息服务的详细内容',
|
||||
content: `
|
||||
<p>这是信息详情的正文内容。</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<p>更多详细的信息内容会在这里展示，包括图片、文字等富文本内容。</p>
|
||||
<p>用户可以通过滑动查看完整的内容。</p>
|
||||
`,
|
||||
author: '信息服务平台',
|
||||
publishTime: new Date().getTime() - 3600000,
|
||||
views: 1234,
|
||||
category: '科技',
|
||||
image: '/assets/images/detail.png'
|
||||
},
|
||||
relatedList: [
|
||||
{ id: 2, title: '相关信息标题1', views: 856 },
|
||||
{ id: 3, title: '相关信息标题2', views: 723 }
|
||||
]
|
||||
});
|
||||
|
||||
// 设置导航栏标题
|
||||
wx.setNavigationBarTitle({
|
||||
title: this.data.detail.title.substring(0, 10) + '...'
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
|
||||
// 收藏/取消收藏
|
||||
onFavorite() {
|
||||
const isFavorite = !this.data.isFavorite;
|
||||
this.setData({ isFavorite });
|
||||
|
||||
wx.showToast({
|
||||
title: isFavorite ? '收藏成功' : '已取消收藏',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
|
||||
// 分享
|
||||
onShare() {
|
||||
// 触发分享
|
||||
},
|
||||
|
||||
// 点击相关信息
|
||||
onRelatedTap(e) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
wx.navigateTo({
|
||||
url: `/pages/detail/detail?id=${id}`
|
||||
});
|
||||
},
|
||||
|
||||
// 返回
|
||||
onBack() {
|
||||
wx.navigateBack();
|
||||
}
|
||||
});
|
||||
4
pages/detail/detail.json
Normal file
4
pages/detail/detail.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"navigationBarTitleText": "详情",
|
||||
"usingComponents": {}
|
||||
}
|
||||
78
pages/detail/detail.wxml
Normal file
78
pages/detail/detail.wxml
Normal file
@@ -0,0 +1,78 @@
|
||||
<!--pages/detail/detail.wxml-->
|
||||
<view class="container">
|
||||
<!-- 加载中 -->
|
||||
<view class="loading-container" wx:if="{{ loading }}">
|
||||
<van-loading size="36px" vertical>加载中...</van-loading>
|
||||
</view>
|
||||
|
||||
<!-- 详情内容 -->
|
||||
<block wx:if="{{ !loading && detail }}">
|
||||
<!-- 头部信息 -->
|
||||
<view class="detail-header">
|
||||
<text class="detail-title">{{ detail.title }}</text>
|
||||
<view class="detail-meta">
|
||||
<text class="meta-author">{{ detail.author }}</text>
|
||||
<text class="meta-time">{{ detail.publishTimeText }}</text>
|
||||
<text class="meta-views">{{ detail.views }}阅读</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 封面图 -->
|
||||
<view class="detail-cover" wx:if="{{ detail.image }}">
|
||||
<van-image
|
||||
width="100%"
|
||||
height="400rpx"
|
||||
fit="cover"
|
||||
src="{{ detail.image }}"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 正文内容 -->
|
||||
<view class="detail-content">
|
||||
<rich-text nodes="{{ detail.content }}"></rich-text>
|
||||
</view>
|
||||
|
||||
<!-- 标签 -->
|
||||
<view class="detail-tags">
|
||||
<van-tag plain type="primary">{{ detail.category }}</van-tag>
|
||||
</view>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<view class="divider"></view>
|
||||
|
||||
<!-- 相关推荐 -->
|
||||
<view class="related-section" wx:if="{{ relatedList.length > 0 }}">
|
||||
<view class="section-title">相关推荐</view>
|
||||
<view class="related-list">
|
||||
<view
|
||||
class="related-item"
|
||||
wx:for="{{ relatedList }}"
|
||||
wx:key="id"
|
||||
data-id="{{ item.id }}"
|
||||
bindtap="onRelatedTap"
|
||||
>
|
||||
<text class="related-title ellipsis">{{ item.title }}</text>
|
||||
<text class="related-views">{{ item.views }}阅读</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="action-bar safe-area-bottom" wx:if="{{ !loading }}">
|
||||
<view class="action-item" bindtap="onFavorite">
|
||||
<van-icon
|
||||
name="{{ isFavorite ? 'star' : 'star-o' }}"
|
||||
size="48rpx"
|
||||
color="{{ isFavorite ? '#ffc107' : '#666' }}"
|
||||
/>
|
||||
<text>{{ isFavorite ? '已收藏' : '收藏' }}</text>
|
||||
</view>
|
||||
<view class="action-item">
|
||||
<button class="share-btn" open-type="share">
|
||||
<van-icon name="share-o" size="48rpx" color="#666" />
|
||||
<text>分享</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
150
pages/detail/detail.wxss
Normal file
150
pages/detail/detail.wxss
Normal file
@@ -0,0 +1,150 @@
|
||||
/* pages/detail/detail.wxss */
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
/* 加载中 */
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
/* 头部 */
|
||||
.detail-header {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.meta-author {
|
||||
margin-right: 20rpx;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.meta-time {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
/* 封面图 */
|
||||
.detail-cover {
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
/* 正文 */
|
||||
.detail-content {
|
||||
padding: 0 30rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 1.8;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.detail-content rich-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 标签 */
|
||||
.detail-tags {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
/* 相关推荐 */
|
||||
.related-section {
|
||||
padding: 0 30rpx 30rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.related-list {
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.related-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #e8e8e8;
|
||||
}
|
||||
|
||||
.related-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.related-title {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.related-views {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100rpx;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
border-top: 1rpx solid #e8e8e8;
|
||||
box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.share-btn::after {
|
||||
border: none;
|
||||
}
|
||||
Reference in New Issue
Block a user