首次完整推送,

V:1.20240808.006
This commit is contained in:
fm453
2024-08-13 18:32:37 +08:00
parent 15be3e9373
commit c62d15b288
939 changed files with 111777 additions and 0 deletions

View File

@ -0,0 +1,223 @@
<template>
<scroll-view :scroll-y="true" v-if="!loading">
<view class="meta">
<view class="title">
<text class="text">{{ articleDetail.title }}</text>
</view>
<view class="excerpt">
<text class="text">{{ articleDetail.excerpt }}</text>
</view>
<view class="author">
<template v-if="articleDetail.user_id != null">
<text class="at">{{ articleDetail.user_id?.nickname ?? '' }}</text>
<text class="split">·</text>
</template>
<text class="date">{{ publishTime(articleDetail.publish_date as number) }}</text>
</view>
</view>
<view class="content" v-if="articleDetail.content != null">
<template v-for="(block, index) in articleDetail.content" :key="index">
<view v-if="block.type == 'mediaVideo'">
<video
style="width: 300px; height: 200px; margin: 0 auto 20px;"
:src="(block.data as UTSJSONObject).getJSON('attributes')!.getString('src')!"
:poster="(block.data as UTSJSONObject).getJSON('attributes')!.getString('poster')!"
></video>
</view>
<view v-if="block.type == 'divider'" class="divider"></view>
<view v-if="block.type == 'unlockContent'" class="unlock-content">
<button @click="unlockContent">请观看广告后解锁全文</button>
</view>
<rich-text v-if="block.type == 'rich-text'" :selectable="false" :nodes="block.data" @itemclick="richTextItemClick"></rich-text>
<render-image-component v-if="block.type == 'image'" :deltaOp="block.data" @image-preview="onImagePreview"></render-image-component>
</template>
</view>
</scroll-view>
</template>
<script lang="uts">
import translatePublishTime from "@/uni_modules/uni-cms-article/common/publish-time";
import RenderImageComponent from '@/uni_modules/uni-cms-article/components/render-article-detail/image.uvue'
type Author = {
_id: string
nickname: string
}
type Content = {
type: string
data: any
}
type Article = {
_id: string | null
title: string | null
content: Content[] | null
excerpt: string | null
publish_date: number | null
user_id: Author | null
thumbnail: string[] | null
content_images: string[] | null
}
const db = uniCloud.databaseForJQL()
const articleDBName = 'uni-cms-articles'
const userDBName = 'uni-id-users'
export default {
components: {
RenderImageComponent
},
data() {
return {
loading: true,
id: "", // 文章ID
title: "", // 文章标题
articleDetail: {} as Article, // 文章详情
// 广告相关配置
adpId: "", // TODO: 请填写广告位ID
watchAdUniqueType: "device" // TODO: 观看广告的唯一标识类型,可选值为 user 或者 deviceuser 表示用户唯一device 表示设备唯一
}
},
computed: {
where(): string {
//拼接where条件 查询条件 ,更多详见 https://uniapp.dcloud.net.cn/uniCloud/unicloud-db?id=jsquery
return `_id =="${this.id}"`
},
collection(): any[] {
return [
db.collection(articleDBName).where(this.where).field('user_id,thumbnail,excerpt,publish_date,title,content').getTemp(),
db.collection(userDBName).field('_id, nickname').getTemp()
]
}
},
onLoad(event: OnLoadOptions) {
if (event.has('id')) {
this.id = event.get('id') as string
this.load()
}
if (event.has('title')) {
uni.setNavigationBarTitle({
title: event.get('title') as string
})
}
},
methods: {
async load (): Promise<void> {
uni.showLoading({
title: "加载中..."
})
const articledb = db.collection(articleDBName).where(this.where).field('user_id,thumbnail,excerpt,publish_date,title,content').getTemp()
const userdb = db.collection(userDBName).field('_id, nickname').getTemp()
const res = await db.collection(articledb, userdb).get()
this.loadData(res.data)
this.loading = false
uni.hideLoading()
},
// 格式化发布时间
publishTime(timestamp: number): string {
return translatePublishTime(timestamp)
},
loadData(data: UTSJSONObject[]) {
if (data.length <= 0) return
const detail = data[0]
const user_id = detail.getArray<Author>('user_id')!;
this.articleDetail = {
title: detail.getString('title'),
content: detail.getArray<Content>('content'),
excerpt: detail.getString('excerpt'),
publish_date: detail.getNumber('publish_date'),
thumbnail: detail.getArray<string>('thumbnail'),
user_id: user_id.length > 0 ? user_id[0]: null,
content_images: detail.getArray<string>('content_images')
} as Article
this.title = detail.getString('title')!
uni.setNavigationBarTitle({
title: this.title
})
},
unlockContent () {
uni.showModal({
content: 'uni-app-x 暂不支持观看广告解锁全文',
showCancel: false
})
},
richTextItemClick (e: RichTextItemClickEvent) {
if (e.detail.href != null) {
uni.navigateTo({
url: `/uni_modules/uni-cms-article/pages/webview/webview?url=${encodeURIComponent(e.detail.href as string)}`
})
}
},
onImagePreview (url: string) {
const contentImages = this.articleDetail.content_images != null ? this.articleDetail.content_images: [] as string[]
uni.previewImage({
current: url, // 当前显示图片的http链接
urls: contentImages as string[] // 需要预览的图片http链接列表
})
}
}
}
</script>
<style scoped lang="scss">
.meta {
padding: 20rpx 30rpx 0;
position: relative;
z-index: 1;
.title {
.text {
font-size: 40rpx;
line-height: 66rpx;
font-weight: bold;
color: #333;
}
}
.excerpt {
margin-top: 10rpx;
.text {
font-size: 26rpx;
line-height: 40rpx;
color: #999;
}
}
.author {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row;
margin-top: 20rpx;
.at,
.split,
.date {
font-size: 26rpx;
color: #ccc;
}
.split {
margin: 0 10rpx;
}
}
}
.content {
margin-top: 40rpx;
padding: 0 30rpx 80rpx;
}
.divider {
height: 1px;
width: 100%;
background: rgba(0, 0, 0, 0.1);
}
</style>

View File

@ -0,0 +1,217 @@
<template>
<unicloud-db v-slot:default="{data, loading, error, options}" :collection="collection" :options="formData"
:getone="true" :where="where" :manual="true" ref="detail" foreignKey="uni-cms-articles.user_id"
@load="loadData"
class="article">
<template v-if="!loading && data">
<view class="meta">
<view class="title">
<text class="text">{{ data.title }}</text>
</view>
<view class="excerpt">
<text class="text">{{ data.excerpt }}</text>
</view>
<view class="author">
<template v-if="data.user_id[0]">
<text class="at">{{ data.user_id[0].nickname || '' }}</text>
<text class="split">·</text>
</template>
<text class="date">{{ publishTime(data.publish_date) }}</text>
</view>
</view>
<render-article-detail
:content="data.content"
:content-images="data.content_images"
:ad-config="{ adpId, watchAdUniqueType }"
></render-article-detail>
</template>
<view class="detail-loading" v-else>
<uni-icons type="spinner-cycle" size="35px"/>
</view>
</unicloud-db>
</template>
<script>
import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
import renderArticleDetail from "@/uni_modules/uni-cms-article/components/render-article-detail/index.vue";
import translatePublishTime from "@/uni_modules/uni-cms-article/common/publish-time";
const db = uniCloud.database()
const articleDBName = 'uni-cms-articles'
const userDBName = 'uni-id-users'
export default {
components: {
uniNavBar,
renderArticleDetail
},
data() {
return {
id: "", // 文章ID
title: "", // 文章标题
formData: {}, // 表单数据
// 广告相关配置
adpId: "", // TODO: 请填写广告位ID
watchAdUniqueType: "device" // TODO: 观看广告的唯一标识类型,可选值为 user 或者 deviceuser 表示用户唯一device 表示设备唯一
}
},
computed: {
where() {
//拼接where条件 查询条件 ,更多详见 https://uniapp.dcloud.net.cn/uniCloud/unicloud-db?id=jsquery
return `_id =="${this.id}"`
},
collection() {
return [
db.collection(articleDBName).where(this.where).field('user_id,thumbnail,excerpt,publish_date,title,content').getTemp(),
db.collection(userDBName).field('_id, nickname').getTemp()
]
}
},
onReady() {
// 开始加载数据,修改 where 条件后才开始去加载 clinetDB 的数据 ,需要等组件渲染完毕后才开始执行 loadData所以不能再 onLoad 中执行
if (this.id) { // ID 不为空,则发起查询
this.$refs.detail.loadData()
} else {
uni.showToast({
icon: 'none',
title: 'id 不能为空'
})
}
},
onLoad(event) {
//获取文章id通常 id 来自上一个页面
if (event.id) {
this.id = event.id
}
// 监听解锁内容事件
uni.$on('onUnlockContent', this.onUnlockContent)
},
onUnload() {
// 页面卸载时,移除监听事件
uni.$off('onUnlockContent', this.onUnlockContent)
},
onPageScroll(e) {
// 根据滚动位置判断是否显示导航栏
if (e.scrollTop > 100) {
uni.setNavigationBarTitle({
title: this.title
})
} else {
uni.setNavigationBarTitle({
title: ''
})
}
},
methods: {
// 将时间戳转换为可读的时间格式
publishTime(timestamp) {
return translatePublishTime(timestamp)
},
// 将文章加入阅读历史
setReadHistory() {
// 获取阅读历史缓存,如果不存在则为空数组
const historyCache = uni.getStorageSync('readHistory') || []
// 过滤掉当前文章的阅读历史
const readHistory = historyCache.filter(item => item.article_id !== this.id)
// 将当前文章的阅读历史添加到数组最前面
readHistory.unshift({
article_id: this.id,
last_time: Date.now()
})
// 将更新后的阅读历史缓存到本地
uni.setStorageSync('readHistory', readHistory)
},
// 加载数据
loadData(data) {
// 设置文章标题
this.title = data.title
// 将文章添加进阅读历史
this.setReadHistory()
},
// 监听解锁内容事件,解锁内容后重新加载数据
async onUnlockContent() {
this.$refs.detail.loadData()
}
}
}
</script>
<style scoped lang="scss">
/* #ifdef APP-NVUE */
.article {
background-color: #fff;
}
/* #endif */
@mixin cp {
padding: 0 30rpx;
}
.detail-loading {
margin: 100rpx auto 0;
width: 35px;
height: 35px;
animation: rotate360 2s linear infinite;
}
@keyframes rotate360 {
0% {
transform: rotate(0deg);
transform-origin: center center;
}
100% {
transform: rotate(360deg);
transform-origin: center center;
}
}
.meta {
@include cp;
position: relative;
z-index: 1;
padding-top: 20rpx;
.title {
.text {
font-size: 40rpx;
line-height: 66rpx;
font-weight: bold;
color: #333;
}
}
.excerpt {
margin-top: 10rpx;
.text {
font-size: 26rpx;
line-height: 40rpx;
color: #999;
}
}
.author {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row;
margin-top: 20rpx;
.at,
.split,
.date {
font-size: 26rpx;
color: #ccc;
}
.split {
margin: 0 10rpx;
}
}
}
</style>

View File

@ -0,0 +1,255 @@
<template>
<unicloud-db v-slot:default="{loading, error, options}" :collection="collection" :options="formData"
:getone="true" :where="where" :manual="true" ref="detail" foreignKey="uni-cms-articles.user_id"
@load="loadData"
class="article">
<template v-if="!loading && articleData">
<view class="preview-tip">此页面仅用于临时预览文章链接将会在短期内失效</view>
<view class="meta">
<view class="title">
<text class="text">{{ articleData.title }}</text>
</view>
<view class="excerpt">
<text class="text">{{ articleData.excerpt }}</text>
</view>
<view class="author">
<template v-if="articleData.user_id && articleData.user_id[0]">
<text class="at">{{ articleData.user_id[0].nickname || '' }}</text>
<text class="split">·</text>
</template>
<text class="date">{{ publishTime(articleData.publish_date) }}</text>
</view>
</view>
<render-article-detail
:content="articleData.content"
:content-images="articleData.content_images"
:ad-config="{ adpId, watchAdUniqueType }"
></render-article-detail>
</template>
<view class="detail-loading" v-else>
<uni-icons type="spinner-cycle" size="35px"/>
</view>
</unicloud-db>
</template>
<script>
import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
import renderArticleDetail from "@/uni_modules/uni-cms-article/components/render-article-detail/index.vue";
import translatePublishTime from "@/uni_modules/uni-cms-article/common/publish-time";
const db = uniCloud.database()
const articleDBName = 'uni-cms-articles'
const userDBName = 'uni-id-users'
export default {
components: {
uniNavBar,
renderArticleDetail
},
data() {
return {
id: "", // 文章ID
title: "", // 文章标题
secret: "", // 文章预览密钥
formData: {}, // 表单数据
articleData: null, // 文章数据
// 广告相关配置
adpId: "", // TODO: 请填写广告位ID
watchAdUniqueType: "device" // TODO: 观看广告的唯一标识类型,可选值为 user 或者 deviceuser 表示用户唯一device 表示设备唯一
}
},
computed: {
where() {
//拼接where条件 查询条件 ,更多详见 https://uniapp.dcloud.net.cn/uniCloud/unicloud-db?id=jsquery
return `_id =="${this.id}" && preview_secret =="${this.secret}"`
},
collection() {
return [
db.collection(articleDBName).where(this.where).field('user_id,thumbnail,excerpt,publish_date,title,content,preview_secret,preview_expired,article_status').getTemp(),
db.collection(userDBName).field('_id, nickname').getTemp()
]
}
},
onReady() {
// 开始加载数据,修改 where 条件后才开始去加载 clinetDB 的数据 ,需要等组件渲染完毕后才开始执行 loadData所以不能再 onLoad 中执行
if (this.id) { // ID 不为空,则发起查询
this.$refs.detail.loadData()
} else {
uni.showToast({
icon: 'none',
title: 'id 不能为空'
})
}
},
onLoad(event) {
//获取文章id通常 id 来自上一个页面
if (event.id) {
this.id = event.id
this.secret = event.secret
}
// 监听解锁内容事件
uni.$on('onUnlockContent', this.onUnlockContent)
},
onUnload() {
// 页面卸载时,移除监听事件
uni.$off('onUnlockContent', this.onUnlockContent)
},
onPageScroll(e) {
// 根据滚动位置判断是否显示导航栏
if (e.scrollTop > 100) {
uni.setNavigationBarTitle({
title: this.title
})
} else {
uni.setNavigationBarTitle({
title: ''
})
}
},
methods: {
// 将时间戳转换为可读的时间格式
publishTime(timestamp) {
return translatePublishTime(timestamp)
},
// 加载数据
loadData(data) {
if (!data) {
return uni.showModal({
content: "文章不存在/预览密钥不存在",
showCancel: false,
success: () => {
// #ifdef H5
window.close()
// #endif
// #ifndef H5
uni.navigateBack()
// #endif
}
})
}
// 文章已发布,跳转到文章详情页
if (data.article_status === 1) {
uni.showToast({
icon: 'none',
title: '文章已发布'
})
uni.redirectTo({
url: `/uni_modules/uni-cms-article/pages/detail/detail?id=${this.id}`
})
return
}
// 预览已过期,提示用户
if (data.preview_expired < Date.now()) {
return uni.showModal({
content: "预览已失效",
showCancel: false,
success: () => {
// #ifdef H5
window.close()
// #endif
// #ifndef H5
uni.navigateBack()
// #endif
}
})
}
// 设置文章标题
this.title = data.title
this.articleData = data
},
// 监听解锁内容事件,解锁内容后重新加载数据
async onUnlockContent() {
this.$refs.detail.loadData()
}
}
}
</script>
<style scoped lang="scss">
/* #ifdef APP-NVUE */
.article {
background-color: #fff;
}
/* #endif */
@mixin cp {
padding: 0 30rpx;
}
.detail-loading {
margin: 100rpx auto 0;
width: 35px;
height: 35px;
animation: rotate360 2s linear infinite;
}
@keyframes rotate360 {
0% {
transform: rotate(0deg);
transform-origin: center center;
}
100% {
transform: rotate(360deg);
transform-origin: center center;
}
}
.meta {
@include cp;
position: relative;
z-index: 1;
padding-top: 20rpx;
.title {
.text {
font-size: 40rpx;
line-height: 66rpx;
font-weight: bold;
color: #333;
}
}
.excerpt {
margin-top: 10rpx;
.text {
font-size: 26rpx;
line-height: 40rpx;
color: #999;
}
}
.author {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row;
margin-top: 20rpx;
.at,
.split,
.date {
font-size: 26rpx;
color: #ccc;
}
.split {
margin: 0 10rpx;
}
}
}
.preview-tip {
font-size: 13px;
color: #333;
background: #fcd791;
padding: 10px;
}
</style>