Skip to content

S
showcase-blog-plugin
Commit 242e7740 by Jason Zhou
Options

almost done!

parent 986fcc95
Showing with 347 additions and 187 deletions
miniprogram/pages/blog/blog.js
......@@ -3,7 +3,7 @@ Page({
const { postId } = e.detail
wx.navigateTo({ url: `plugin://blogPlugin/postDetail?postId=${postId}` })
},
onPostCategory(e) {
onCategoryTap(e) {
const { name, id } = e.detail
wx.navigateTo({
......
miniprogram/pages/blog/blog.wxml
<blog bindPostTap="onPostTap" />
\ No newline at end of file
<blog bindPostTap="onPostTap" bindCategoryTap="onCategoryTap" />
\ No newline at end of file
plugin/constants/blog/urls.js
const BASE_URL = 'https://www.sxl.cn'
const BASE_URL = 'https://api.sxl.cn'
export default {
REQUESTS: {
// post.js
......
plugin/pages/postDetail/postDetail.js
......@@ -182,13 +182,6 @@ const page = {
})
})
},
onUnload() {
this.clearPostDetail()
this.clearComments()
},
onHide() {
this.closeShareView()
},
bindShare() {
wx.showShareMenu({
withShareTicket: true
......
plugin/pages/postDetail/postDetail.wxss
......@@ -5,6 +5,7 @@
@import '/pages/postDetail/postItem/postItem.wxss';
@import "/templates/messageModal/messageModal.wxss";
@import "/templates/shareView/shareView.wxss";
@import "/templates/loaderPage/loaderPage.wxss";
.wx-view {
letter-spacing: 0.10rpx;
......
plugin/pages/postIndex/postIndex.less deleted 100644 → 0
@import "/styles/main.less";
@import '/templates/tabs/tabs.less';
@import '/templates/loaderPage/loaderPage.less';
@import '/templates/loaderBar/loaderBar.less';
@import '/templates/slider/slider.less';
@import '/templates/shortcuts/shortcuts.less';
@import '/templates/postCard/postCard.less';
@import '/templates/categoryCard/categoryCard.less';
@import "/templates/messageModal/messageModal.less";
@import "/templates/shareView/shareView.less";
@light-background: #f4f4f4;
.post-index {
display: flex;
flex-direction: column;
height: 100vh;
text {
font-size: 17px;
color: #fff;
}
scroll-view {
height: 100vh;
flex: 1 1 0%;
}
.posts {
padding: 26rpx;
}
.categories {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
padding: 30rpx 18rpx;
background: @light-background;
}
}
.comment-form {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 15rpx 30rpx;
border: 2rpx solid #e2e4e7;
background-color: #f4f4f4;
.component-placeholder {
font-size: 28rpx;
color: #c6c9cd;
}
.comment-input {
width: 100%;
height: 68rpx;
line-height: 70rpx;
padding-left: 18rpx;
font-size: 28rpx;
color: black;
border: 2rpx solid #e2e4e7;
border-radius: 8rpx;
background-color: white;
}
.comment-btn {
display: inline-block;
height: 70rpx;
width: 150rpx;
line-height: 70rpx;
margin-left: 15rpx;
font-size: 28rpx;
text-align: center;
color: white;
background-color: #62b900;
&.disabled{
background-color: #f6f6f6;
color: #e2e4e7;
}
}
}
plugin/pages/postIndex/postIndex.wxml deleted 100644 → 0
<import src="root/templates/postCard/postCard.wxml"/>
<import src="root/templates/categoryCard/categoryCard.wxml"/>
<import src="root/templates/tabs/tabs.wxml"/>
<import src="root/templates/loaderPage/loaderPage.wxml"/>
<import src="root/templates/loaderBar/loaderBar.wxml"/>
<import src="root/templates/slider/slider.wxml"/>
<import src="root/templates/shortcuts/shortcuts.wxml"/>
<import src="root/templates/messageModal/messageModal.wxml"/>
<import src="root/templates/shareView/shareView.wxml"/>
<view class="post-index">
<block wx:if="{{showBlogPosts}}">
<template
is='tabs'
data="{{background, isWhiteBackground, currentTab, hasSearch: searchEnable, iconSearchWhite, iconSearch, tabs, handleTab, handleSearch}}"
/>
</block>
<scroll-view wx:if="{{!isFetchingPosts || posts.length > 0}}"
style="height: {{categories.length ? 'calc(100vh - 80rpx)' : '100vh'}}; box-sizing: border-box; background-color: {{layout === 'd' ? 'white': '#f4f4f4'}}"
scroll-y="true" hidden="{{currentTab == 'category'}}" lower-threshold="80"
bindscrolltolower="loadMorePosts"
bindtap="handleGlobalTab"
>
<block wx:if="{{showSlider}}">
<block wx:if="{{banners && banners.length}}">
<template
is="slider"
data="{{ sliders: banners, dotPosition, hasVideoBanner, handleProduct, handleCategory, handlePage, handleSliderChange }}"
/>
</block>
<block wx:else>
<view wx:if="{{isWept && ifInPageDesign}}" class="component-placeholder" style="height: 300rpx;margin-bottom: 30rpx;">
您还未添加轮播图
</view>
</block>
</block>
<block wx:if="{{showShortcuts}}">
<block wx:if="{{shortcuts && shortcuts.length}}">
<template
is="shortcuts"
data="{{ shortcuts, shortcutsFirstLine, shortcutsSecondLine, shortcutsSecondLineWrapperClass, handleProduct, handleCategory, handlePage, makePhoneCall, showContactBtn }}"
/>
</block>
<block wx:else>
<view wx:if="{{isWept && ifInPageDesign}}" class="component-placeholder" style="height: 224rpx;margin-bottom: 30rpx;">
您还未添加快捷按钮
</view>
</block>
</block>
<block wx:if="{{showBlogPosts}}">
<view class="posts">
<block wx:for="{{posts}}" wx:key="id" wx:for-item="item">
<template wx:if="{{layout === 'a'}}" is="post-card-a" data="{{...item, handlePost}}"/>
<template wx:if="{{layout === 'b'}}" is="post-card-b" data="{{...item, handlePost}}"/>
<template wx:if="{{layout === 'c'}}" is="post-card-c" data="{{...item, handlePost}}"/>
<template wx:if="{{layout === 'd'}}" is="post-card-moment" data="{{item, index, companyName, logoUrl, name, handleCard, handlePost, handleLike, handleComment, openShareView, selectedPostId, enableComments}}"/>
</block>
</view>
<template
is='loader-bar'
data="{{isLoading: posts.length > 0 && paginationPosts.nextPage, emptyText: posts && posts.length === 0 && '- 暂无文章 -', noMoreText:posts && posts.length !== 0 && paginationPosts.currentPage === paginationPosts.totalPages && '- 无更多文章 -', style:'margin: 0 0 40rpx 0'}}"
/>
</block>
</scroll-view>
<template wx:else is='loader-page'/>
<scroll-view style="height: {{categories.length ? 'calc(100vh - 80rpx)' : '100vh'}}; box-sizing: border-box;"
scroll-y="true" hidden="{{currentTab == 'post'}}" bindtap="handleGlobalTab">
<view class="categories">
<block wx:for="{{categories}}" wx:key="id" wx:for-item="item">
<template is="category-card" data="{{...item, handleCategory}}"/>
</block>
</view>
</scroll-view>
<form bindsubmit="handleSendComment">
<view class="comment-form" wx:if="{{isCommenting}}">
<input placeholder-class="comment-placeholder" class="comment-input" placeholder="评论" value="{{currentComment}}" bindinput="handleInputComment" cursor-spacing="8" focus="{{true}}"/>
<button class="comment-btn {{currentComment ? '' : 'disabled'}}" formType="submit">发送</button>
</view>
</form>
</view>
<view wx:if="{{errorMessage}}">
<template is="message-modal" data="{{message: errorMessage}}" />
</view>
<template is="share-view" data="{{shareLoading, sharePicture, shareAnimation, showShareVariation, closeShareView, openShareView}}"/>
plugin/pages/postList/postList.js 0 → 100644
import urls from '/constants/blog/urls'
import iconPaths from '/constants/blog/iconPaths'
import * as apis from '/api/blogApi'
import { uniq } from '/lib/lodash/index'
const { iconComment, iconLike } = iconPaths
const page = {
data: {
currentCategory: 'all',
iconComment,
iconLike,
shareLoading: false,
selectedPostId: '',
currentComment: '',
isCommenting: false,
// mapStateToProps
posts: [],
isFetchingPosts: false,
paginationPosts: null,
enableComments: false,
teamMemberId: '',
siteId: '11363837',
layout: 'a',
logoUrl: '',
companyName: '',
name: '',
nickName: '',
avatarUrl: ''
},
onLoad(options) {
wx.setNavigationBarTitle({
title: options.category
})
this.setData({
isFetchingPosts: true,
currentCategory: options.category
})
const { paginationPosts, siteId } = this.data
if (!paginationPosts) {
this.fetchPosts(siteId, options.category, 1)
}
},
fetchPosts(siteId, category, pageNum) {
this.setData({
isFetchingPosts: true
})
let { posts } = this.data
apis.getPosts(siteId, category, pageNum).then(({ data: { data } }) => {
const {
blog: {
enableComments,
id,
miniProgramLogoUrl: logoUrl,
pagination,
blogPosts
}
} = data
posts = uniq(posts.concat(blogPosts))
this.setData({
isFetchingPosts: false,
enableComments,
logoUrl,
posts,
paginationPosts: pagination.blogPosts,
siteId: id
})
})
},
handlePost(e) {
console.log(id)
const { id } = e.currentTarget.dataset
wx.navigateTo({
url: `plugin-private://wx08a306210cff4868/pages/postDetail/postDetail?postId=${id}`,
fail(error) { console.log(error) }
})
},
loadMorePosts() {
const { paginationPosts, siteId, currentCategory } = this.data
if (paginationPosts.nextPage) {
this.fetchPosts(siteId, currentCategory, paginationPosts.nextPage)
}
},
handleCard(e) {
const { post } = e.currentTarget.dataset
this.setData({ currentPost: post })
},
onShareAppMessage() {
const { currentPost = {}, showShareVariation, currentCategory } = this.data
const { title, id } = currentPost
if (id && showShareVariation) {
return {
title,
path: `${urls.PAGES.POST_DETAIL}?postId=${id}`
}
} else {
return {
path: `${urls.PAGES.POST_LIST}?category=${currentCategory}`
}
}
},
sharePicture() {
const { siteId, currentPost } = this.data
const { id: postId } = currentPost
if (wx.isWept) {
this.setError('预览模式下暂不支持，请手机预览')
} else {
this.setData({
shareLoading: true
})
this.fetchPostSharing(siteId, {
scene: postId.toString(),
page: 'pages/blog/postDetail/postDetail'
}).then(res => {
this.setData({
shareLoading: false
})
if (res.success) {
wx.navigateTo({
url: `${urls.PAGES.POST_SHARE}?postId=${postId}`
})
} else {
wx.showModal({
title: '网络错误',
content: '请稍后重试',
showCancel: false,
success: res => {
if (res.confirm) {
this.closeShareView()
}
}
})
}
})
}
},
handleLike(e) {
const { postId, isLiked } = e.currentTarget.dataset
const cb = userInfo => {
const { nickName, avatarUrl } = userInfo
this.setData({ selectedPostId: '' })
this.likePost(!isLiked, postId, nickName, avatarUrl)
}
},
switchOperation(e) {
const { post } = e.currentTarget.dataset
const { selectedPostId } = this.data
this.setData({
isCommenting: false,
currentComment: '',
selectedPostId:
selectedPostId && selectedPostId == post.id ? '' : post.id,
currentPost: post
})
},
handleComment(e) {
const cb = () => {
this.setData({ isCommenting: true, selectedPostId: '' })
}
bindGetUserInfoHandler(e, cb)
},
handleInputComment(e) {
this.setData({ currentComment: e.detail.value })
},
handleSendComment(e) {
const { currentComment } = this.data
if (!currentComment || !currentComment.trim()) {
this.setError('评论内容不能为空')
} else if (wx.isWept) {
this.setError('预览模式下暂不支持，请手机预览')
} else {
this.setData({ isCommenting: false })
this.createComment(e.detail.formId)
}
},
createComment(formId) {
const { currentPost, currentComment, nickName, avatarUrl } = this.data
const that = this
this.setData({
submitting: true
})
const sendData = {
content: currentComment,
nickname: nickName,
wechat_photo: [avatarUrl],
settings: {
form_id: formId
}
}
// login({
// success: loginRes => {
// sendData.code = loginRes.code
// that.setComments(
// currentPost.id,
// sendData,
// () => {
// that.setData({
// submitting: false,
// currentComment: ''
// })
// wx.showToast({
// title: '评论成功，审核通过后显示在留言列表',
// icon: 'none',
// duration: 2000
// })
// },
// () => {
// that.setData({ submitting: false })
// }
// )
// },
// fail() {
// wx.showModal({
// content: '请求失败，请重试'
// })
// that.setData({
// submitting: false
// })
// }
// })
},
handleGlobalTab() {
this.setData({
selectedPostId: '',
isCommenting: false,
currentComment: ''
})
},
onPullDownRefresh() {
const { siteId, currentCategory } = this.data
this.fetchPosts(siteId, currentCategory, 1).then(res =>
wx.stopPullDownRefresh()
)
}
}
// function mapStateToProps(state, options) {
// const {
// list: posts,
// isFetching: isFetchingPosts,
// pagination: paginationPosts
// } = getPosts(state, `${urls.PAGES.POST_LIST}_${options.category}`),
// { siteId, layout, mix, companyName, name, logoUrl } = getAttr(state),
// enableComments = state.getIn([
// 'blog',
// 'setting',
// 'settings',
// 'enableComments'
// ])
// const { nickName, avatarUrl } = getUserInfo(state)
// let blogLayout = getMixLayout(mix, layout, 'blog')
// let components = []
// if (state.get('components') !== null) {
// components = getComponents(state, 'blog')
// const blogAndCategoryComp = components.find(
// comp => comp.type === 'blogAndCategory'
// )
// if (blogAndCategoryComp && blogAndCategoryComp.settings) {
// blogLayout = blogAndCategoryComp.settings.layout || 'a'
// }
// }
// const teamMemberId = getTeamMemberId(state)
// return {
// posts,
// isFetchingPosts,
// paginationPosts,
// enableComments,
// teamMemberId,
// siteId,
// layout: blogLayout,
// logoUrl,
// companyName,
// name,
// nickName,
// avatarUrl
// }
// }
// function mapDispatchToProps(dispatch) {
// return {
// fetchPosts: (siteId, category, pageNum) =>
// dispatch(
// fetchPosts(
// `${urls.PAGES.POST_LIST}_${category}`,
// siteId,
// category,
// pageNum
// )
// ),
// fetchPostSharing: (siteId, data) =>
// dispatch(fetchPostSharing(siteId, data)),
// setComments: (postId, setData, successCb, failCb) =>
// dispatch(setComments(postId, setData, successCb, failCb)),
// likePost: (status, postId, nickName, avatarUrl) =>
// dispatch(likePost(status, postId, nickName, avatarUrl))
// }
// }
Page(page)
plugin/pages/postList/postList.wxml 0 → 100644
<import src="/templates/postCard/postCard.wxml"/>
<import src="/templates/loaderPage/loaderPage.wxml"/>
<import src="/templates/loaderBar/loaderBar.wxml"/>
<import src="/templates/shareView/shareView.wxml"/>
<view class="post-index">
<block wx:if="{{!isFetchingPosts || posts.length > 0}}">
<scroll-view style="height: 100vh; background-color:#fff;" scroll-y="true" lower-threshold="80" bindscrolltolower="loadMorePosts" bindtap="handleGlobalTab">
<view class="posts">
<block wx:for="{{posts}}" wx:key="id" wx:for-item="item">
<template wx:if="{{layout === 'a'}}" is="post-card-a" data="{{...item, handlePost}}"/>
<template wx:if="{{layout === 'b'}}" is="post-card-b" data="{{...item, handlePost}}"/>
<template wx:if="{{layout === 'c'}}" is="post-card-c" data="{{...item, handlePost}}"/>
<template wx:if="{{layout === 'd'}}" is="post-card-moment" data="{{item, index, companyName, logoUrl, name, handleCard, handlePost, handleLike, handleComment, openShareView, selectedPostId, enableComments}}"/>
</block>
</view>
<template
is='loader-bar'
data="{{isLoading: posts.length > 0 && paginationPosts.nextPage, emptyText: posts && posts.length === 0 && '- 暂无文章 -', noMoreText:posts && posts.length !== 0 && paginationPosts.currentPage === paginationPosts.totalPages && '- 无更多文章 -', style:'margin: 0 0 40rpx 0'}}"
/>
</scroll-view>
<form bindsubmit="handleSendComment">
<view class="comment-form" wx:if="{{isCommenting}}">
<input placeholder-class="comment-placeholder" class="comment-input" placeholder="评论" value="{{currentComment}}" bindinput="handleInputComment" cursor-spacing="8" focus="{{true}}"/>
<button class="comment-btn {{currentComment ? '' : 'disabled'}}" formType="submit">发送</button>
</view>
</form>
</block>
<template wx:else is='loader-page'/>
<template is="share-view" data="{{shareLoading, sharePicture, shareAnimation, showShareVariation, closeShareView, openShareView}}"/>
</view>
plugin/pages/postList/postList.wxss 0 → 100644
@import '/components/blog/blog.wxss';
@import "/styles/main.wxss";
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment