Skip to content

S
showcase-blog-plugin
Commit 2b536be8 by Jason Zhou
Options

add shortcuts

parent 242e7740
Showing with 145 additions and 68 deletions
miniprogram/pages/blog/blog.js
Page({
data: {
shortcuts: [
{
iconType: 'circle',
id: 'cc7e704a-b47d-4bdf-9c7f-ae40e1de4fd3',
type: 'page',
url:
'https://user-assets.sxlcdn.com/images/376562/Frj2f53OLrwiz2ArUZCnt1SExckY.png?imageMogr2/strip/thumbnail/800x450>/format/png',
name: 'tab页跳转',
value: '/pages/index/index',
linkError: false
},
{
iconType: 'circle',
id: 'a8b6d2dd-9e6b-45b3-aa09-04a6609f6ffa',
type: 'page',
url:
'https://user-assets.sxlcdn.com/images/376562/Fgv5M4MZLVS_vxzus3P157nehD0U.png?imageMogr2/strip/thumbnail/800x450>/quality/90!/format/png',
name: '非tab页跳转',
value: '/pages/sxl/sxl',
linkError: false
},
{
iconType: 'circle',
id: 'e36d9873-0bac-48aa-abbf-5029946945d9',
type: 'blogPost',
url:
'https://user-assets.sxlcdn.com/images/376562/Fq708Ri7--Sic2xEkv960IptDOvs.png?imageMogr2/strip/thumbnail/800x450>/quality/90!/format/png',
name: '文章跳转',
value: '1956034',
linkError: false
},
{
iconType: 'circle',
id: 'e36d9873-0bac-48aa-abbf-5029946945d9',
type: 'category',
url:
'https://user-assets.sxlcdn.com/images/376562/Fu9weiSOvE9v46xx4-9vLjzbGnh4.png?imageMogr2/strip/thumbnail/800x450>/quality/90!/format/png',
name: '分类跳转',
value: {
id: '6135',
name: '精彩视频'
},
linkError: false
},
{
iconType: 'circle',
id: 'e36d9873-0bac-48aa-abbf-5029946945d9',
type: 'usage',
url:
'https://user-assets.sxlcdn.com/images/376562/Fn21oXKs8qTcduF7kuUgBZHk7RZD.png?imageMogr2/strip/thumbnail/800x450>/quality/90!/format/png',
name: '打电话',
value: '',
number: '13458543021',
linkError: false
}
]
},
onPostTap(e) {
const { postId } = e.detail
wx.navigateTo({ url: `plugin://blogPlugin/postDetail?postId=${postId}` })
......@@ -9,5 +67,18 @@ Page({
wx.navigateTo({
url: `plugin://blogPlugin/postList?category=${name}&categoryId=${id}`
})
},
onPageTap(e) {
const tabList = [
'/pages/index/index',
'/pages/blog/blog',
'/pages/mine/mine'
]
const { url } = e.detail
if (tabList.includes(url)) {
wx.switchTab({ url })
} else {
wx.navigateTo({ url })
}
}
})
miniprogram/pages/blog/blog.json
......@@ -3,6 +3,7 @@
"enablePullDownRefresh": true,
"disableScroll": false,
"usingComponents": {
"blog": "plugin://blogPlugin/blog"
"blog": "plugin://blogPlugin/blog",
"shortcuts": "plugin://blogPlugin/shortcuts"
}
}
miniprogram/pages/blog/blog.wxml
<blog bindPostTap="onPostTap" bindCategoryTap="onCategoryTap" />
\ No newline at end of file
<blog bindPostTap="onPostTap" bindCategoryTap="onCategoryTap">
<block wx:if="{{shortcuts && shortcuts.length}}">
<shortcuts
shortcuts="{{shortcuts}}"
bindPostTap="onPostTap"
bindCategoryTap="onCategoryTap"
bindPageTap="onPageTap"
/>
</block>
</blog>
\ No newline at end of file
plugin/components/blog/blog.js
......@@ -29,20 +29,9 @@ import iconPaths from '/constants/blog/iconPaths'
const { iconComment, iconLike, iconSearch, iconSearchWhite } = iconPaths
const component = {
properties: {
showSlider: {
type: Boolean,
value: false
},
showShortcuts: {
type: Boolean,
value: false
},
showBlogPosts: {
type: Boolean,
value: true
},
},
// options: {
// multipleSlots: true // 在组件定义时的选项中启用多slot支持
// },
data: {
currentTab: 'post',
dotPosition: 0,
......@@ -81,7 +70,7 @@ const component = {
url:
'https://user-assets.sxlcdn.com/images/376562/Frj2f53OLrwiz2ArUZCnt1SExckY.png?imageMogr2/strip/thumbnail/800x450>/format/png',
name: 'A',
value: '/pages/ecommerce/about/about',
value: 'pages/index/index',
linkError: false
},
{
......@@ -91,7 +80,7 @@ const component = {
url:
'https://user-assets.sxlcdn.com/images/376562/Fsr-ix0nhHO9UJpWMqJxm86l6ZCA.png?imageMogr2/strip/thumbnail/800x450>/format/png',
name: 'B',
value: '/pages/ecommerce/about/about',
value: 'pages/mine/mine',
linkError: false
},
{
......@@ -101,7 +90,7 @@ const component = {
url:
'https://user-assets.sxlcdn.com/images/376562/FmfiJDD_rafmiMhEGUey1352Wze4.jpg?imageMogr2/strip/thumbnail/800x450>/interlace/1/format/jpg',
name: 'C',
value: '/pages/ecommerce/about/about',
value: 'pages/sxl/sxl',
linkError: false
}
],
......@@ -140,7 +129,6 @@ const component = {
mix: ['store', 'blog'],
navigationBar: {},
showContactBtn: false,
showSlider: true,
showShortcuts: true,
showBlogPosts: true,
ifInPageDesign: true,
......@@ -262,19 +250,6 @@ const component = {
handleProduct(e) {
this.handlePost(e)
},
handlePage(e) {
const { id } = e.currentTarget.dataset
const navigateUrl = [
'/pages/blog/about/about',
'/pages/ecommerce/about/about'
]
if (navigateUrl.includes(id)) {
wx.navigateTo({ url: id })
} else {
wx.switchTab({ url: id })
}
},
handleSliderChange(e) {
this.setData({
dotPosition: e.detail.current
......
plugin/components/blog/blog.wxml
......@@ -4,7 +4,7 @@
<import src="/templates/loaderPage/loaderPage.wxml"/>
<import src="/templates/loaderBar/loaderBar.wxml"/>
<import src="/templates/slider/slider.wxml"/>
<import src="/templates/shortcuts/shortcuts.wxml"/>
<!-- <import src="/templates/shortcuts/shortcuts.wxml"/> -->
<import src="/templates/messageModal/messageModal.wxml"/>
<import src="/templates/shareView/shareView.wxml"/>
......@@ -26,12 +26,7 @@
<block wx:if="{{showSlider && banners && banners.length}}">
<template is="slider" data="{{ sliders: banners, dotPosition, hasVideoBanner, handleProduct, handleCategory, handlePage, handleSliderChange }}" />
</block>
<block wx:if="{{shortcuts && shortcuts.length}}">
<template
is="shortcuts"
data="{{ shortcuts, shortcutsFirstLine, shortcutsSecondLine, shortcutsSecondLineWrapperClass, handleProduct, handleCategory, handlePage, makePhoneCall, showContactBtn }}"
/>
</block>
<slot></slot>
<block wx:if="{{showBlogPosts}}">
<view class="posts">
<block wx:for="{{posts}}" wx:key="id" wx:for-item="item">
......
plugin/components/blog/blog.wxss
@import '/templates/tabs/tabs.wxss';
@import '/templates/slider/slider.wxss';
@import '/templates/shortcuts/shortcuts.wxss';
@import '/templates/shareView/shareView.wxss';
@import '/templates/postCard/postCard.wxss';
@import '/templates/messageModal/messageModal.wxss';
......
plugin/components/shortcuts/shortcuts.js 0 → 100644
const component = {
properties: {
shortcuts: { type: Array, value: [] },
shortcutsFirstLine: { type: Array, value: [] },
shortcutsSecondLine: { type: Array, value: [] },
shortcutsSecondLineWrapperClass: { type: String, value: '' },
showContactBtn: { type: Boolean, value: false }
},
methods: {
handlePost(e) {
const { id } = e.currentTarget.dataset
var detail = {
postId: id
}
this.triggerEvent('PostTap', detail)
},
handleCategory(e) {
const { id, name } = e.currentTarget.dataset
const detail = {
id,
name
}
this.triggerEvent('CategoryTap', detail)
},
handlePage(e) {
const { id } = e.currentTarget.dataset
const detail = { url: id }
this.triggerEvent('PageTap', detail)
},
makePhoneCall(e) {
const { phone = '' } = e.currentTarget.dataset
wx.makePhoneCall({
phoneNumber: phone
})
}
}
}
Component(component)
plugin/components/shortcuts/shortcuts.json 0 → 100644
{
"enablePullDownRefresh": true
}
plugin/templates/shortcuts/shortcuts.wxml → plugin/components/shortcuts/shortcuts.wxml
<import src="/templates/shortcut/shortcut.wxml"/>
<template name="shortcuts">
<view wx:if="{{shortcuts.length !== 0}}" class="shortcuts">
<import src="/templates/shortcut/shortcut.wxml" />
<view wx:if="{{shortcuts.length !== 0}}" class="shortcuts">
<block wx:if="{{shortcuts.length <= 5}}">
<view class="shortcut-wrapper">
<block wx:for="{{shortcuts}}" wx:key="id" wx:for-item="item">
<template is="shortcut" data="{{ ...item, handleProduct, handleCategory, makePhoneCall, handleProduct, showContactBtn }}"/>
<template is="shortcut" data="{{ ...item, handleProduct, handleCategory, makePhoneCall, handleProduct, showContactBtn }}" />
</block>
</view>
</block>
<block wx:else>
<view class="shortcut-wrapper">
<block wx:for="{{shortcutsFirstLine}}" wx:key="id" wx:for-item="item">
<template is="shortcut" data="{{ ...item, handleProduct, handleCategory, makePhoneCall, handleProduct, showContactBtn }}"/>
<template is="shortcut" data="{{ ...item, handleProduct, handleCategory, makePhoneCall, handleProduct, showContactBtn }}" />
</block>
</view>
<view class="{{'shortcut-wrapper shortcut-wrapper-second ' + shortcutsSecondLineWrapperClass}}" >
<view class="{{'shortcut-wrapper shortcut-wrapper-second ' + shortcutsSecondLineWrapperClass}}">
<block wx:for="{{shortcutsSecondLine}}" wx:key="id" wx:for-item="item">
<template is="shortcut" data="{{ ...item, handleProduct, handleCategory, makePhoneCall, handleProduct, showContactBtn }}"/>
<template is="shortcut" data="{{ ...item, handleProduct, handleCategory, makePhoneCall, handleProduct, showContactBtn }}" />
</block>
</view>
</block>
</view>
</template>
</view>
\ No newline at end of file
plugin/plugin.json
{
"publicComponents": {
"blog": "components/blog/blog"
"blog": "components/blog/blog",
"shortcuts": "components/shortcuts/shortcuts"
},
"pages": {
"postDetail": "pages/postDetail/postDetail",
......
plugin/templates/shortcuts/shortcuts.js deleted 100644 → 0
Page()
export const data = {
shortcuts: [],
shortcutsSecondLineWrapperClass: '',
shortcutsSecondLine: [],
shortcutsFirstLine: [],
}
export function makePhoneCall(e) {}
export function handleProduct(e) {}
export function handleCategory(e) {}
export function handlePage(e) {}
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