├── static
    ├── .gitkeep
    ├── button
    │   ├── index.json
    │   ├── index.wxml
    │   ├── index.wxss
    │   └── index.js
    ├── iconfont.ttf
    ├── img
    │   └── user-bg.jpg
    ├── test.css
    └── font.css
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── pages
    │   ├── user
    │   │   ├── main.js
    │   │   └── user.vue
    │   ├── article
    │   │   ├── main.js
    │   │   ├── test.css
    │   │   └── article.vue
    │   └── index
    │   │   ├── main.js
    │   │   └── index.vue
    ├── components
    │   ├── card.vue
    │   ├── icons.js
    │   ├── icon.vue
    │   ├── type-block.vue
    │   ├── avatar.vue
    │   ├── simple-article.vue
    │   ├── slider-nav.vue
    │   └── content.vue
    ├── common
    │   ├── css
    │   │   └── base.scss
    │   └── js
    │   │   ├── basic.js
    │   │   └── filters.js
    ├── utils
    │   ├── index.js
    │   └── fly.js
    ├── App.vue
    └── main.js
├── .postcssrc.js
├── .editorconfig
├── .gitignore
├── .babelrc
├── index.html
├── project.config.json
├── README.md
└── package.json


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/static/button/index.json:
--------------------------------------------------------------------------------
1 | {
2 |   "component": true
3 | }
4 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   NODE_ENV: '"production"'
3 | }
4 | 


--------------------------------------------------------------------------------
/static/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jaxQin/mpvue-cnode/HEAD/static/iconfont.ttf


--------------------------------------------------------------------------------
/static/img/user-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jaxQin/mpvue-cnode/HEAD/static/img/user-bg.jpg


--------------------------------------------------------------------------------
/src/pages/user/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './user'
3 | 
4 | const app = new Vue(App)
5 | app.$mount()
6 | 


--------------------------------------------------------------------------------
/src/pages/article/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './article'
3 | 
4 | const app = new Vue(App)
5 | app.$mount()
6 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | 
3 | module.exports = {
4 |   "plugins": {
5 |     "postcss-mpvue-wxss": {}
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 | 
4 | module.exports = merge(prodEnv, {
5 |   NODE_ENV: '"development"'
6 | })
7 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | *.suo
11 | *.ntvs*
12 | *.njsproj
13 | *.sln
14 | 


--------------------------------------------------------------------------------
/static/test.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | * @Author: jaxQin
 3 | * @Date:   2018-03-29 18:03:15
 4 | * @Last Modified by:   jaxQin
 5 | * @Last Modified time: 2018-03-29 18:03:47
 6 | */
 7 | .test{
 8 |     width: 100px;
 9 |     height: 100px;
10 |     background: red;
11 | }


--------------------------------------------------------------------------------
/src/pages/article/test.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | * @Author: jaxQin
 3 | * @Date:   2018-03-29 18:03:15
 4 | * @Last Modified by:   jaxQin
 5 | * @Last Modified time: 2018-03-29 18:03:47
 6 | */
 7 | .test{
 8 |     width: 100px;
 9 |     height: 100px;
10 |     background: red;
11 | }


--------------------------------------------------------------------------------
/src/components/card.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p class="card">
 4 |       {{text}}
 5 |     </p>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   props: ['text']
12 | }
13 | </script>
14 | 
15 | <style>
16 | .card {
17 |   padding: 10px;
18 | }
19 | </style>
20 | 


--------------------------------------------------------------------------------
/src/pages/index/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './index'
 3 | 
 4 | const app = new Vue(App)
 5 | app.$mount()
 6 | 
 7 | export default {
 8 |     config: {
 9 |         "usingComponents": {
10 |             "i-button": "../../../static/button/index"
11 |         }
12 |     }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/icons.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: jaxQin
 3 |  * @Date:   2018-03-29 22:19:21
 4 |  * @Last Modified by:   jaxQin
 5 |  * @Last Modified time: 2018-03-29 22:20:13
 6 |  */
 7 | 
 8 | 'use strict';
 9 | import icon from './icon.vue';
10 | export default (Vue) => {
11 |     Vue.component("icon", icon);
12 | }
13 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-runtime"],
12 |   "env": {
13 |     "test": {
14 |       "presets": ["env", "stage-2"],
15 |       "plugins": ["istanbul"]
16 |     }
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/common/css/base.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 | * @Author: jaxQin
 3 | * @Date:   2018-03-30 14:08:04
 4 | * @Last Modified by:   jaxQin
 5 | * @Last Modified time: 2018-03-30 14:34:05
 6 | */
 7 | 
 8 | $grey-border: #bcbab6;  //常用于区块的border
 9 | $slider-color:    red;  //首页中滑动导航滑块的颜色
10 | $light-color: #80bd01;  //选中状态 高亮状态
11 | $page-bg:     #f4f4f4;  //用于一个页面的背景色
12 | 
13 | 
14 | $time:            .2s;  // 一般用于transition 的时间
15 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8">
 6 | 	<title>my-mpvue</title>
 7 | 	<script src="http://at.alicdn.com/t/font_610301_5i5pebubpz00be29.js"></script>
 8 | 	<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_610301_5i5pebubpz00be29.css">
 9 | </head>
10 | 
11 | <body>
12 | 	<div id="app"></div>
13 | 	<!-- built files will be auto injected -->
14 | </body>
15 | 
16 | </html>


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
 1 | function formatNumber (n) {
 2 |   const str = n.toString()
 3 |   return str[1] ? str : `0${str}`
 4 | }
 5 | 
 6 | export function formatTime (date) {
 7 |   const year = date.getFullYear()
 8 |   const month = date.getMonth() + 1
 9 |   const day = date.getDate()
10 | 
11 |   const hour = date.getHours()
12 |   const minute = date.getMinutes()
13 |   const second = date.getSeconds()
14 | 
15 |   const t1 = [year, month, day].map(formatNumber).join('/')
16 |   const t2 = [hour, minute, second].map(formatNumber).join(':')
17 | 
18 |   return `${t1} ${t2}`
19 | }
20 | 
21 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   created () {
 4 |     // 调用API从本地缓存中获取数据
 5 |     const logs = wx.getStorageSync('logs') || []
 6 |     logs.unshift(Date.now())
 7 |     wx.setStorageSync('logs', logs)
 8 | 
 9 |     console.log('app created and cache logs by setStorageSync')
10 |   }
11 | }
12 | </script>
13 | 
14 | <style>
15 | .container {
16 |   font-size: 14px;
17 |   width: 100%;
18 |   min-height: 100vh;
19 |   height: 100%;
20 |   display: flex;
21 |   flex-direction: column;
22 |   align-items: center;
23 |   justify-content: flex-start;
24 |   box-sizing: border-box;
25 | }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/static/font.css:
--------------------------------------------------------------------------------
 1 | /* This stylesheet generated by Transfonter (https://transfonter.org) on March 29, 2018 9:54 AM */
 2 | 
 3 | @font-face {
 4 |     font-family: 'iconfont';
 5 |     src: url('iconfont.ttf') format('truetype');
 6 |     font-weight: normal;
 7 |     font-style: normal;
 8 | }
 9 | 
10 | .iconfont {
11 |     font-family: "iconfont" !important;
12 |     font-size: 16px;
13 |     font-style: normal;
14 |     -webkit-font-smoothing: antialiased;
15 |     -moz-osx-font-smoothing: grayscale;
16 | }
17 | 
18 | .icon-heart:before {
19 |     content: "\e631";
20 | }
21 | 
22 | .icon-eye:before {
23 |     content: "\e6f1";
24 | }
25 | 


--------------------------------------------------------------------------------
/project.config.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"description": "项目配置文件。",
 3 | 	"setting": {
 4 | 		"urlCheck": true,
 5 | 		"es6": false,
 6 | 		"postcss": true,
 7 | 		"minified": true,
 8 | 		"newFeature": true
 9 | 	},
10 | 	"miniprogramRoot": "./dist/",
11 | 	"compileType": "miniprogram",
12 | 	"appid": "wx5f83e7937032cbbb",
13 | 	"projectname": "my-mpvue",
14 | 	"condition": {
15 | 		"search": {
16 | 			"current": -1,
17 | 			"list": []
18 | 		},
19 | 		"conversation": {
20 | 			"current": -1,
21 | 			"list": []
22 | 		},
23 | 		"game": {
24 | 			"currentL": -1,
25 | 			"list": []
26 | 		},
27 | 		"miniprogram": {
28 | 			"current": -1,
29 | 			"list": []
30 | 		}
31 | 	}
32 | }
33 | 


--------------------------------------------------------------------------------
/src/common/js/basic.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: jaxQin
 3 |  * @Date:   2018-03-28 17:52:33
 4 |  * @Last Modified by:   jaxQin
 5 |  * @Last Modified time: 2018-03-31 12:28:38
 6 |  */
 7 | 
 8 | 'use strict';
 9 | const navList = [
10 |     { title: '全部', type: 'all' },
11 |     { title: '精华', type: 'good' },
12 |     { title: '分享', type: 'share' },
13 |     { title: '问答', type: 'ask' },
14 |     { title: '招聘', type: 'job' },
15 |     { title: '测试', type: 'dev' },
16 | ]
17 | const obj2style = style => {
18 |     let str = []
19 |     Object.keys(style).forEach(key => {
20 |         str.push(`${key}:${style[key]};`)
21 |     })
22 |     return str.join(';');
23 | }
24 | export {
25 |     navList,
26 |     obj2style
27 | }
28 | 


--------------------------------------------------------------------------------
/src/utils/fly.js:
--------------------------------------------------------------------------------
 1 | import Fly from "flyio";
 2 | import wxEngine from 'flyio/../engine-wrapper'
 3 | const fly = new Fly;
 4 | 
 5 | //配置请求基地址
 6 | fly.config.baseURL = "https://cnodejs.org/api/v1/"
 7 | 
 8 | // //添加请求拦截器
 9 | // fly.interceptors.request.use((config, promise) => {
10 | //     //给所有请求添加自定义header
11 | //     config.headers["X-Tag"] = "flyio";
12 | //     //可以通过promise.reject／resolve直接中止请求
13 | //     //promise.resolve("fake data")
14 | //     return config;
15 | // })
16 | 
17 | //添加响应拦截器，响应拦截器会在then/catch处理之前执行
18 | fly.interceptors.response.use(
19 |     (response, promise) => {
20 |         //只将请求结果的data字段返回
21 |         return response.data
22 |     },
23 |     (err, promise) => {
24 |         //发生网络错误后会走到这里
25 |         //promise.resolve("ssss")
26 |     }
27 | )
28 | export default fly
29 | 


--------------------------------------------------------------------------------
/static/button/index.wxml:
--------------------------------------------------------------------------------
 1 | <button
 2 |     class="i-class i-btn {{ long ? 'i-btn-long' : '' }} {{ 'i-btn-' + size }} {{ 'i-btn-' + type }} {{ 'i-btn-' + shape }} {{ loading ? 'i-btn-loading' : '' }} {{ disabled ? 'i-btn-disabled' : ''}}"
 3 |     bindtap="handleTap"
 4 |     open-type="{{ openType }}"
 5 |     app-parameter="{{ appParameter }}"
 6 |     hover-stop-propagation="{{ hoverStopPropagation }}"
 7 |     hover-start-time="{{ hoverStartTime }}"
 8 |     hover-stay-time="{{ hoverStayTime }}"
 9 |     session-from="{{ sessionFrom }}"
10 |     send-message-title="{{ sendMessageTitle }}"
11 |     send-message-path="{{ sendMessagePath }}"
12 |     send-message-img="{{ sendMessageImg }}"
13 |     show-message-card="{{ showMessageCard }}"
14 |     plain="true"
15 | ><view class="i-btn-loading-inner" wx:if="{{loading}}"></view><slot></slot></button>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | // 字体组件
 4 | import icon from '@/components/icons.js'
 5 | Vue.use(icon)
 6 | 
 7 | // 导入过滤器
 8 | import * as filters from '@/common/js/filters'
 9 | 
10 | Object.keys(filters).forEach(key => {
11 |     Vue.use(filters[key])
12 | })
13 | Vue.use(filters)
14 | 
15 | Vue.config.productionTip = false
16 | App.mpType = 'app'
17 | 
18 | const app = new Vue(App)
19 | app.$mount()
20 | 
21 | export default {
22 |     // 这个字段走 app.json
23 |     config: {
24 |         // 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把 webpack entry 里面的入口页面加进去
25 |         pages: ['^pages/index/main', 'pages/article/main', 'pages/user/main'],
26 |         window: {
27 |             backgroundTextStyle: 'light',
28 |             navigationBarBackgroundColor: '#fff',
29 |             navigationBarTitleText: 'cnode社区',
30 |             navigationBarTextStyle: 'black'
31 |         },
32 | 
33 |     }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/components/icon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <text :class="classes" :style="styles"></text>
 3 | </template>
 4 | <script>
 5 | const prefixCls = 'iconfont icon-';
 6 | import {
 7 |     obj2style
 8 | } from '@/common/js/basic';
 9 | export default {
10 |     name: 'icon',
11 |     props: {
12 |         type: String,
13 |         size: [Number, String],
14 |         color: String
15 |     },
16 |     computed: {
17 |         classes() {
18 |             return `${prefixCls}${this.type}`;
19 |         },
20 |         styles() {
21 |             let style = {};
22 |             if (this.size) {
23 |                 style['font-size'] = `${this.size}px`;
24 |             }
25 |             if (this.color) {
26 |                 style.color = this.color;
27 |             }
28 |             return obj2style(style)
29 |         }
30 |     }
31 | }
32 | </script>
33 | <style lang="scss" scoped>
34 | @import '../../static/font.css';
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/components/type-block.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="feed-label feed-label-top" v-if="item.top">
 3 |         置顶
 4 |     </div>
 5 |     <div class="feed-label feed-label-top" v-else-if="item.good">
 6 |         精华
 7 |     </div>
 8 |     <div class="feed-label feed-label-other" v-else>
 9 |         {{type}}
10 |     </div>
11 | </template>
12 | <script>
13 | export default {
14 |     name: "",
15 |     props: ['item'],
16 |     computed: {
17 |         type() {
18 |             return this.getTopicType(this.item.tab)
19 |         }
20 |     },
21 | }
22 | </script>
23 | <style lang="scss" scoped>
24 | .feed-label {
25 |     font-size: 12px;
26 |     border-radius: 4px;
27 |     padding: 0 5px;
28 |     height: 20px;
29 |     text-align: center;
30 |     line-height: 20px;
31 |     flex-shrink: 0;
32 |     box-sizing: border-box;
33 |     &.feed-label-other {
34 |         background-color: #e3e3e3;
35 |         color: #333;
36 |     }
37 |     &.feed-label-top {
38 |         background-color: $light-color;
39 |         color: #fff;
40 |     }
41 | }
42 | </style>
43 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 基于mpVue开发的小程序版本的cnode社区
 2 | 
 3 | ------
 4 | 
 5 | 基于mpVue开发的小程序版本的cnode社区，感谢美团开源的mpVue，基本上可以0学习成本快速开发一个小程序。
 6 | 
 7 | 
 8 | **感谢以下插件**：
 9 | 
10 | > * [flyio](https://github.com/wendux/fly/blob/master/README-CH.md) - 同时支持浏览器、小程序、Node、Weex的基于Promise的跨平台http请求库。可以让您在多个端上尽可能大限度的实现代码复用
11 | > * [minapp-api-promise](https://github.com/bigmeow/minapp-api-promise) - 将所有异步微信小程序API promise化，支持then/catch、async/await的方式调用小程序API;支持请求队列，支持对原生API进行拦截。
12 | > * [mpvue-wxParse](https://github.com/F-loat/mpvue-wxParse) - 富文本组件
13 | 
14 | 
15 | **效果预览**：
16 | 
17 | ![cmd-markdown-logo](http://ww3.sinaimg.cn/large/0060lm7Tly1fpy6k5k5tkg30b60ip1kx.gif)
18 | ![cmd-markdown-logo](http://ww1.sinaimg.cn/large/0060lm7Tly1fpy6rdhr8mg30b60iuhdt.gif)
19 | 
20 | **待办事宜**：
21 | - [ ] 登录
22 | - [ ] 点赞
23 | - [ ] 收藏
24 | - [ ] 发布
25 | - [ ] 评论
26 | 
27 | **下载启动步骤**：
28 | 
29 |  1. git clone https://github.com/jaxQin/mpvue-cnode.git；
30 |  2. 如下
31 | ``` bash
32 |  # install dependencies
33 | npm install
34 | 
35 | # serve with hot reload at localhost:8080
36 | npm run dev
37 | 
38 | # build for production with minification
39 | npm run build
40 | 
41 | # build for production and view the bundle analyzer report
42 | npm run build --report
43 | ``` 
44 | 3.小程序开发工具指向下面的dist目录
45 | 
46 | *欢迎互相交流，希望您顺手点个star谢谢您*
47 | 


--------------------------------------------------------------------------------
/static/button/index.wxss:
--------------------------------------------------------------------------------
1 | .i-btn{text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;white-space:nowrap;user-select:none;font-size:14px;border-radius:2px;border:0!important;position:relative;text-decoration:none;height:44px;line-height:44px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);color:#fff!important;background:#f7f7f7!important;color:#495060!important;margin:10px}.i-btn-long{border-radius:0;margin:0;box-shadow:none}.i-btn-large{height:48px;line-height:48px}.i-btn-small{height:40px;line-height:40px}.i-btn-primary{color:#fff!important;background:#2d8cf0!important}.i-btn-ghost{color:#fff!important;background:#fff!important;color:#495060!important}.i-btn-success{color:#fff!important;background:#19be6b!important}.i-btn-warning{color:#fff!important;background:#f90!important}.i-btn-error{color:#fff!important;background:#ed3f14!important}.i-btn-info{color:#fff!important;background:#2db7f5!important}.i-btn-circle{border-radius:44px}.i-btn-large.i-btn-circle{border-radius:48px}.i-btn-small.i-btn-circle{border-radius:40px}.i-btn-loading{opacity:.6}.i-btn-loading-inner{display:inline-block;margin-right:12px;vertical-align:middle;width:14px;height:14px;background:0 0;border-radius:50%;border:2px solid #fff;border-color:#fff #fff #fff transparent;animation:btn-spin .6s linear;animation-iteration-count:infinite}.i-btn-disabled{color:#bbbec4!important;background:#f7f7f7!important}@keyframes btn-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}


--------------------------------------------------------------------------------
/src/components/avatar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <!-- <div :href="href"> -->
 3 |         <div class="avatar" :style="style" @tap.stop="goUser">
 4 |             <img :src="user.avatar_url" alt="用户头像">
 5 |         </div>
 6 |     <!-- </div> -->
 7 | </template>
 8 | <script>
 9 | export default {
10 |     name: "avatar",
11 |     props: ['user', 'size'],
12 |     methods:{
13 |         goUser(){
14 |             wx.navigateTo({
15 |                 url:this.href
16 |             })
17 |         }
18 |     },
19 |     computed: {
20 |         href(){
21 |             return '/pages/user/main?id='+this.user.loginname;
22 |         },
23 |         style() {
24 |             if (!this.size) return ''
25 |             else {
26 |                 let style = {};
27 |                 let str=[]
28 |                 if (this.size) {
29 |                     style['width'] = `${this.size}px`;
30 |                     style['height'] = `${this.size}px`;
31 |                 }
32 |                 Object.keys(style).forEach(key => {
33 |                     str.push(`${key}:${style[key]};`)
34 |                 })
35 |                 return str.join(';');
36 |             }
37 |         }
38 |     }
39 | }
40 | </script>
41 | <style lang="scss" scoped>
42 | .avatar {
43 |     width: 36px;
44 |     height: 36px;
45 |     flex-shrink: 0;
46 |     border-radius: 50%;
47 |     overflow: hidden;
48 |     // position: relative;
49 |     // z-index:99;
50 |     img {
51 |         width: 100%;
52 |         height: 100%;
53 |     }
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: '/',
11 |     productionSourceMap: false,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css'],
18 |     // Run the build command with an extra argument to
19 |     // View the bundle analyzer report after build finishes:
20 |     // `npm run build --report`
21 |     // Set to `true` or `false` to always turn it on or off
22 |     bundleAnalyzerReport: process.env.npm_config_report
23 |   },
24 |   dev: {
25 |     env: require('./dev.env'),
26 |     port: 8080,
27 |     // 在小程序开发者工具中不需要自动打开浏览器
28 |     autoOpenBrowser: false,
29 |     assetsSubDirectory: 'static',
30 |     assetsPublicPath: '/',
31 |     proxyTable: {},
32 |     // CSS Sourcemaps off by default because relative paths are "buggy"
33 |     // with this option, according to the CSS-Loader README
34 |     // (https://github.com/webpack/css-loader#sourcemaps)
35 |     // In our experience, they generally work as expected,
36 |     // just be aware of this issue when enabling this option.
37 |     cssSourceMap: false
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/static/button/index.js:
--------------------------------------------------------------------------------
 1 | Component({
 2 |     externalClasses: ['i-class'],
 3 | 
 4 |     properties: {
 5 |         // default, primary, ghost, info, success, warning, error
 6 |         type: {
 7 |             type: String,
 8 |             value: '',
 9 |         },
10 |         // default, large, small
11 |         size: {
12 |             type: String,
13 |             value: '',
14 |         },
15 |         // circle, square
16 |         shape: {
17 |             type: String,
18 |             value: 'square'
19 |         },
20 |         disabled: {
21 |             type: Boolean,
22 |             value: false,
23 |         },
24 |         loading: {
25 |             type: Boolean,
26 |             value: false,
27 |         },
28 |         long: {
29 |             type: Boolean,
30 |             value: false
31 |         },
32 |         openType: String,
33 |         appParameter: String,
34 |         hoverStopPropagation: Boolean,
35 |         hoverStartTime: {
36 |             type: Number,
37 |             value: 20
38 |         },
39 |         hoverStayTime: {
40 |             type: Number,
41 |             value: 70
42 |         },
43 |         lang: {
44 |             type: String,
45 |             value: 'en'
46 |         },
47 |         sessionFrom: {
48 |             type: String,
49 |             value: ''
50 |         },
51 |         sendMessageTitle: String,
52 |         sendMessagePath: String,
53 |         sendMessageImg: String,
54 |         showMessageCard: Boolean
55 |     },
56 | 
57 |     methods: {
58 |         handleTap () {
59 |             if (this.data.disabled) return false;
60 | 
61 |             this.triggerEvent('click');
62 |         }
63 |     }
64 | });
65 | 


--------------------------------------------------------------------------------
/src/pages/index/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <i-button type="primary">这是一个按钮</i-button>
 4 |         <slider-nav :menuWidth="60" :currentTab.sync="currentTab" :navList="this.navList"></slider-nav>
 5 |         <swiper :current="currentTab" :style="'height:'+contentHeight" class="swiper-box" duration="300" @change="swiperChange">
 6 |             <swiper-item v-for="(item,index) in navList" :key="index">
 7 |                 <content-v v-if="index==currentTab" :currentTab="item"></content-v>
 8 |             </swiper-item>
 9 |         </swiper>
10 |     </div>
11 | </template>
12 | <script>
13 | import fly from "@/utils/fly";
14 | import wxp from 'minapp-api-promise';
15 | import content from '@/components/content'
16 | import sliderNav from '@/components/slider-nav'
17 | import {
18 |     navList
19 | } from '@/common/js/basic'
20 | export default {
21 |     name: 'index',
22 |     data() {
23 |         return {
24 |             navList: navList,
25 |             winWidth: 0,
26 |             winHeight: 0,
27 |             // tab切换
28 |             currentTab: 0,
29 |         };
30 |     },
31 |     methods: {
32 |         swiperChange(e) {
33 |             let {
34 |                 current
35 |             } = e.target;
36 |             this.currentTab = current;
37 |         }
38 |     },
39 |     computed: {
40 | 
41 |         contentHeight() {
42 |             return this.winHeight - 62 + 'px'
43 |         }
44 |     },
45 |     components: {
46 |         contentV: content,
47 |         sliderNav,
48 |     },
49 |     async onLoad() {
50 |         // 获取系统消息
51 |         let info = await wxp.getSystemInfo();
52 |         this.winWidth = info.windowWidth;
53 |         this.winHeight = info.windowHeight
54 |     },
55 | 
56 | };
57 | </script>
58 | <style lang="scss" scoped>
59 | .container {
60 |     height: 100%;
61 |     .swiper-box {
62 |         display: block;
63 |         width: 100%;
64 |         overflow: hidden;
65 |         .swiper-item {
66 |             height: 100%;
67 |             text-align: center;
68 |         }
69 |     }
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-mpvue",
 3 |   "version": "1.0.0",
 4 |   "description": "A Mpvue project",
 5 |   "author": "jaxQin <841571741@qq.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "node build/dev-server.js",
 9 |     "start": "node build/dev-server.js",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "flyio": "^0.4.3",
14 |     "lodash": "^4.17.5",
15 |     "minapp-api-promise": "^1.0.1",
16 |     "mpvue": "^1.0.6",
17 |     "mpvue-wxparse": "^0.4.5",
18 |     "sass-resources-loader": "^1.3.3",
19 |     "vuex": "^2.3.1"
20 |   },
21 |   "devDependencies": {
22 |     "babel-core": "^6.22.1",
23 |     "babel-loader": "^7.1.1",
24 |     "babel-plugin-transform-runtime": "^6.22.0",
25 |     "babel-preset-env": "^1.3.2",
26 |     "babel-preset-stage-2": "^6.22.0",
27 |     "babel-register": "^6.22.0",
28 |     "chalk": "^2.0.1",
29 |     "connect-history-api-fallback": "^1.3.0",
30 |     "copy-webpack-plugin": "^4.0.1",
31 |     "css-loader": "^0.28.0",
32 |     "cssnano": "^3.10.0",
33 |     "eventsource-polyfill": "^0.9.6",
34 |     "express": "^4.14.1",
35 |     "extract-text-webpack-plugin": "^2.0.0",
36 |     "file-loader": "^0.11.1",
37 |     "friendly-errors-webpack-plugin": "^1.1.3",
38 |     "glob": "^7.1.2",
39 |     "html-webpack-plugin": "^2.28.0",
40 |     "http-proxy-middleware": "^0.17.3",
41 |     "mpvue-loader": "^1.0.8",
42 |     "mpvue-template-compiler": "^1.0.6",
43 |     "mpvue-webpack-target": "^1.0.0",
44 |     "node-sass": "^4.8.3",
45 |     "optimize-css-assets-webpack-plugin": "^2.0.0",
46 |     "ora": "^1.2.0",
47 |     "postcss-loader": "^2.0.6",
48 |     "postcss-mpvue-wxss": "^1.0.0",
49 |     "px2rpx-loader": "^0.1.8",
50 |     "rimraf": "^2.6.0",
51 |     "sass-loader": "^6.0.7",
52 |     "semver": "^5.3.0",
53 |     "shelljs": "^0.7.6",
54 |     "url-loader": "^0.5.8",
55 |     "vue-style-loader": "^3.0.1",
56 |     "webpack": "^2.6.1",
57 |     "webpack-bundle-analyzer": "^2.2.1",
58 |     "webpack-dev-middleware-hard-disk": "^1.10.0",
59 |     "webpack-merge": "^4.1.0",
60 |     "webpack-mpvue-asset-plugin": "^0.0.1"
61 |   },
62 |   "engines": {
63 |     "node": ">= 4.0.0",
64 |     "npm": ">= 3.0.0"
65 |   },
66 |   "browserslist": [
67 |     "> 1%",
68 |     "last 2 versions",
69 |     "not ie <= 8"
70 |   ]
71 | }
72 | 


--------------------------------------------------------------------------------
/src/components/simple-article.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <!-- 文章简单信息展示，用于user页面 -->
 3 |     <div class="feed-content" @tap="goArticle">
 4 |         <avatar v-if="article" :user="article.author"></avatar>
 5 |         <div class="feed-right">
 6 |             <div class="feed-right-top">
 7 |                 <div class="feed-title">
 8 |                     <p>{{article.title}}</p>
 9 |                 </div>
10 |             </div>
11 |             <div class="feed-right-bottom" v-if="article">
12 |                 <div class="feed-time"><span>{{article.author.loginname}}</span></div>
13 |                 <div class="feed-pass">
14 |                     1个月前
15 |                 </div>
16 |             </div>
17 |         </div>
18 |     </div>
19 | </template>
20 | <script>
21 | import avatar from '@/components/avatar'
22 | export default {
23 |     name: "",
24 |     props: ['article'],
25 |     components: {
26 |         avatar,
27 |     },
28 |     methods: {
29 |         goArticle() {
30 |             wx.navigateTo({
31 |                 url: '/pages/article/main?id=' + this.article.id
32 |             })
33 |         },
34 |     },
35 | }
36 | </script>
37 | <style lang="scss" scoped>
38 | .feed-content {
39 |     margin-top: 0;
40 |     display: flex;
41 |     font-size: 14px;
42 |     padding: 14px;
43 |     align-items: center;
44 |     border-bottom: 1px solid $grey-border;
45 |     .feed-right {
46 |         flex: 1;
47 |         min-width: 0;
48 |         margin-left: 8px;
49 |         .feed-right-top {
50 |             display: flex;
51 |             justify-content: space-between;
52 |             .feed-title {
53 |                 display: flex;
54 |                 align-items: center;
55 |                 min-width: 0;
56 |                 p {
57 |                     margin: 0 0 0 8px;
58 |                     font-size: 14px;
59 |                     line-height: 24px;
60 |                     text-overflow: ellipsis;
61 |                     white-space: nowrap;
62 |                     overflow: hidden;
63 |                     flex: 1;
64 |                     min-width: 0;
65 |                 }
66 |             }
67 |         }
68 |         .feed-right-bottom {
69 |             display: flex;
70 |             justify-content: space-between;
71 |             .feed-time {
72 |                 font-size: 12px;
73 |                 color: #666;
74 |                 margin-left: 8px;
75 |             }
76 |             .feed-pass {
77 |                 font-size: 13px;
78 |             }
79 |         }
80 |     }
81 | }
82 | </style>
83 | 


--------------------------------------------------------------------------------
/src/common/js/filters.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @Author: jaxQin
 3 |  * @Date:   2018-03-29 11:03:43
 4 |  * @Last Modified by:   jaxQin
 5 |  * @Last Modified time: 2018-03-29 15:20:55
 6 |  */
 7 | 
 8 | 'use strict';
 9 | import { navList } from '@/common/js/basic';
10 | import Vue from 'vue'
11 | import _ from 'lodash';
12 | const listMap = _.keyBy(navList, 'type')
13 | 
14 | // 格式化时间
15 | Date.prototype.format = function(format) {
16 |     var o = {
17 |         "M+": this.getMonth() + 1, //month
18 |         "d+": this.getDate(), //day
19 |         "h+": this.getHours(), //hour
20 |         "m+": this.getMinutes(), //minute
21 |         "s+": this.getSeconds(), //second
22 |         "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
23 |         "S": this.getMilliseconds() //millisecond
24 |     }
25 |     if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
26 |         (this.getFullYear() + "").substr(4 - RegExp.$1.length));
27 |     for (var k in o)
28 |         if (new RegExp("(" + k + ")").test(format))
29 |             format = format.replace(RegExp.$1,
30 |                 RegExp.$1.length == 1 ? o[k] :
31 |                 ("00" + o[k]).substr(("" + o[k]).length));
32 |     return format;
33 | }
34 | const getTimeInfo = (str) => {
35 |     if (!str) {
36 |         return ''
37 |     }
38 |     const date = new Date(str);
39 |     const time = new Date().getTime() - date.getTime(); //现在的时间-传入的时间 = 相差的时间（单位 = 毫秒）
40 |     if (time < 0) {
41 |         return '';
42 |     } else if (time / 1000 < 60) {
43 |         return '刚刚';
44 |     } else if ((time / 60000) < 60) {
45 |         return parseInt((time / 60000)) + '分钟前';
46 |     } else if ((time / 3600000) < 24) {
47 |         return parseInt(time / 3600000) + '小时前';
48 |     } else if ((time / 86400000) < 31) {
49 |         return parseInt(time / 86400000) + '天前';
50 |     } else if ((time / 2592000000) < 12) {
51 |         return parseInt(time / 2592000000) + '月前';
52 |     } else {
53 |         return parseInt(time / 31536000000) + '年前';
54 |     }
55 | }
56 | const filters = {
57 |     install(Vue, val) {
58 |         Vue.prototype.getTopicType = function(val='share') { //全局函数1
59 |             return listMap[val].title
60 |         };
61 |     }
62 | }
63 | const formatTime = {
64 |     install(Vue, val) {
65 |         Vue.prototype.formatTime = function(val) { //全局函数1
66 |             val = new Date(val)
67 |             return val.format('yyyy-MM-dd hh:mm:ss')
68 |         };
69 |     }
70 | }
71 | const fromNow = {
72 |     install(Vue, val) {
73 |         Vue.prototype.fromNow = function(val) { //全局函数1
74 |             return getTimeInfo(val)
75 |         };
76 |     }
77 | }
78 | 
79 | export { filters, formatTime, fromNow }
80 | 


--------------------------------------------------------------------------------
/src/components/slider-nav.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <scroll-view class="swiper-tab" scroll-x style="width: 100%">
  3 |         <view :style="menuStyle" v-for="(item,index) in navList" :key="index" class="swiper-tab-item" :data-current="index" @tap="swichNav">{{item.title}}</view>
  4 |         <view class="block" :style="style"></view>
  5 |     </scroll-view>
  6 | </template>
  7 | <script>
  8 | import wxp from 'minapp-api-promise';
  9 | import {
 10 |     obj2style
 11 | } from '@/common/js/basic'
 12 | 
 13 | export default {
 14 |     name: "slider-nav",
 15 |     data() {
 16 |         return {
 17 |             winWidth: null,
 18 |             winHeight: null,
 19 |             navWidth: null,
 20 |         }
 21 |     },
 22 |     props: {
 23 |         navList: {
 24 |             type: Array,
 25 |         },
 26 |         menuWidth: {
 27 |             type: Number,
 28 |         },
 29 |         currentTab: {
 30 |             type: Number,
 31 |             default: 0,
 32 |         },
 33 |         font: {
 34 |             type: Number,
 35 |             default: 14,
 36 |         }
 37 |     },
 38 |     methods: {
 39 |         swichNav(e) {
 40 |             const {
 41 |                 current
 42 |             } = e.target.dataset;
 43 |             if (this.currentTab === current) return false
 44 |                 // else this.currentTab = current;
 45 |             else {
 46 |                 this.$emit('update:currentTab', current)
 47 |             }
 48 |         },
 49 |         swiperChange(e) {
 50 |             let {
 51 |                 current
 52 |             } = e.target;
 53 |             this.currentTab = current;
 54 |         }
 55 |     },
 56 |     computed: {
 57 |         style() {
 58 |             // 计算左侧剩余多少宽度，所以滚动条起始位置要加
 59 |             let leftWidth = (this.winWidth - this.navList.length * this.navWidth) / 2;
 60 |             let width = this.navWidth + 'px';
 61 |             let left = leftWidth + this.navWidth * this.currentTab + 'px';
 62 |             let style = {
 63 |                 left,
 64 |                 width,
 65 |             }
 66 |             console.log(style)
 67 |             return obj2style(style)
 68 |         },
 69 |         menuStyle() {
 70 |             let style = {}
 71 |             style['font-size'] = this.font + 'px'
 72 |             style['width'] = this.navWidth + 'px'
 73 |             return obj2style(style)
 74 |         }
 75 |     },
 76 |     async onLoad() {
 77 |         // 获取系统消息
 78 |         let info = await wxp.getSystemInfo();
 79 |         this.winWidth = info.windowWidth;
 80 |         this.winHeight = info.windowHeight
 81 |         if (!this.menuWidth) {
 82 |             // 如果没有
 83 |             this.navWidth = this.winWidth / this.navList.length;
 84 |         } else {
 85 |             this.navWidth = this.menuWidth
 86 |         }
 87 |     },
 88 | }
 89 | </script>
 90 | <style lang="scss" scoped>
 91 | .swiper-tab {
 92 |     width: 100%;
 93 |     text-align: center;
 94 |     line-height: 42px;
 95 |     white-space: nowrap;
 96 |     position: relative;
 97 |     .swiper-tab-item {
 98 |         transition: all $time;
 99 |         font-size: 18px;
100 |         height: 42px;
101 |         display: inline-block;
102 |         color: #777777;
103 |     }
104 |     .block {
105 |         display: block;
106 |         position: absolute;
107 |         left: 0;
108 |         height: 2px;
109 |         background: $slider-color;
110 |         bottom: 20px;
111 |         transition: left $time;
112 |         z-index: 99;
113 |     }
114 | }
115 | </style>
116 | 


--------------------------------------------------------------------------------
/src/components/content.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="content">
  3 |         <scroll-view scroll-y style="height:100%;" @scroll="scrollFn" @scrolltolower="toLow" @scrolltoupper="test">
  4 |             <a :href="'/pages/article/main?id='+item.id" class="feed-li" v-for="(item,index) in list" :key="index">
  5 |                 <div class="feed-title">
  6 |                     <type-block :item="item"></type-block>
  7 |                     <p>{{item.title}}</p>
  8 |                 </div>
  9 |                 <div class="feed-content">
 10 |                     <avatar :user="item.author"></avatar>
 11 |                     <div class="feed-right">
 12 |                         <div class="feed-right-top">
 13 |                             <div class="avatar-name">
 14 |                                 {{item.author.loginname}}
 15 |                             </div>
 16 |                             <div class="count">
 17 |                                 <span>{{item.reply_count}}</span>&nbsp;/&nbsp;{{item.visit_count}}
 18 |                             </div>
 19 |                         </div>
 20 |                         <div class="feed-right-bottom">
 21 |                             <div class="feed-time">
 22 |                                 {{item.createTime}}
 23 |                             </div>
 24 |                             <div class="feed-pass">
 25 |                                 {{item.lastReplyTime}}
 26 |                             </div>
 27 |                         </div>
 28 |                     </div>
 29 |                 </div>
 30 |             </a>
 31 |         </scroll-view>
 32 |     </div>
 33 | </template>
 34 | <script>
 35 | import fly from '@/utils/fly'
 36 | import typeBlock from '@/components/type-block'
 37 | import avatar from '@/components/avatar'
 38 | export default {
 39 |     name: "",
 40 |     data() {
 41 |         return {
 42 |             articleList: [],
 43 |             page: 1,
 44 |         }
 45 |     },
 46 |     props: ['currentTab'],
 47 |     methods: {
 48 |         test(){
 49 |             console.log('test')
 50 |         },
 51 |         async getList(page = 1) {
 52 |             wx.showLoading({
 53 |                 title: '加载中',
 54 |             })
 55 |             let res = await fly.get('topics', {
 56 |                 tab: this.currentTab.type,
 57 |                 page,
 58 |                 limit: 20,
 59 |             })
 60 |             if (res.success) {
 61 |                 this.articleList = this.articleList.concat(res.data);
 62 |             }
 63 |             wx.hideLoading()
 64 |         },
 65 |         goArticle(item) {
 66 |             wx.navigateTo({
 67 |                 url: '/pages/article/main?id=' + item.id
 68 |             })
 69 |         },
 70 |         scrollFn(e) {
 71 |             // console.log(e)
 72 |         },
 73 |         async getA() {
 74 |             return 'a';
 75 |         },
 76 |         toLow(e) {
 77 |             // 这里就是滚动到底部了
 78 |             this.page++;
 79 |             this.getList(this.page)
 80 |         }
 81 |     },
 82 |     computed: {
 83 |         list() {
 84 |             return this.articleList.map(item => {
 85 |                 delete item.content
 86 |                 return Object.assign(item, {
 87 |                     createTime: this.formatTime(item.create_at),
 88 |                     lastReplyTime: this.fromNow(item.last_reply_at),
 89 |                 })
 90 |             })
 91 |         }
 92 |     },
 93 |     components: {
 94 |         typeBlock,
 95 |         avatar,
 96 |     },
 97 |     async created() {
 98 |         this.getList();
 99 |     }
100 | }
101 | </script>
102 | <style lang="scss" scoped>
103 | .content {
104 |     height: 100%;
105 |     .feed-li {
106 |         padding: 10px;
107 |         border-bottom: 1px solid $grey-border;
108 |         .feed-title {
109 |             display: flex;
110 |             align-items: center;
111 |             min-width: 0;
112 |             p {
113 |                 margin: 0 0 0 8px;
114 |                 font-size: 14px;
115 |                 line-height: 24px;
116 |                 text-overflow: ellipsis;
117 |                 white-space: nowrap;
118 |                 overflow: hidden;
119 |                 flex: 1;
120 |                 min-width: 0;
121 |             }
122 |         }
123 |         .feed-content {
124 |             display: flex;
125 |             position: relative;
126 |             font-size: 13px;
127 |             margin-top: 8px;
128 |             .feed-right {
129 |                 flex: 1;
130 |                 min-width: 0;
131 |                 margin-left: 8px;
132 |                 .feed-right-top {
133 |                     display: flex;
134 |                     justify-content: space-between;
135 |                     .author-name {}
136 |                     .count {
137 |                         span {
138 |                             color: $light-color;
139 |                         }
140 |                     }
141 |                 }
142 |                 .feed-right-bottom {
143 |                     margin-top: 4px;
144 |                     display: flex;
145 |                     justify-content: space-between;
146 |                     .feed-time {
147 |                         font-size: 12px;
148 |                         color: #666;
149 |                     }
150 |                 }
151 |             }
152 |         }
153 |     }
154 | }
155 | </style>
156 | 


--------------------------------------------------------------------------------
/src/pages/article/article.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="article-wrap" v-if="article">
  3 |         <div class="head-box">
  4 |             <h2 class="head-title">
  5 |             {{article.title}}
  6 |             </h2>
  7 |             <div class="head-intro">
  8 |                 <avatar :user="article.author"></avatar>
  9 |                 <div class="head-middle">
 10 |                     <div class="head-middle-top">
 11 |                         <type-block :item="article" v-if="article"></type-block>
 12 |                         <span class="head-author-name">jingsam</span>
 13 |                     </div>
 14 |                     <div class="head-middle-bottom">
 15 |                         {{article.createTime}} ·
 16 |                         <span>{{article.visit_count}}</span>次预览
 17 |                         <div class="icon-eye-open"></div>
 18 |                     </div>
 19 |                 </div>
 20 |                 <div class="head-right">
 21 |                     <icon type="heart" :size="32"></icon>
 22 |                 </div>
 23 |             </div>
 24 |         </div>
 25 |         <div class="content-box">
 26 |             <wxParse v-if="article" :content="article.content">
 27 |             </wxParse>
 28 |         </div>
 29 |         <div class="comment-box">
 30 |             <div class="comment-count">
 31 |                 {{article.reply_count}}&nbsp;条回复
 32 |             </div>
 33 |             <div class="comment-item" v-for="(reply,index) in article.replies" :key="index">
 34 |                 <div class="comment-head">
 35 |                     <avatar :user="reply.author"></avatar>
 36 |                     <div class="comment-middle">
 37 |                         <div class="comment-middle-top">
 38 |                             {{reply.author.loginname}}
 39 |                         </div>
 40 |                         <div class="comment-middle-bottom">
 41 |                             <span>{{index+1}}</span>&nbsp;楼· {{reply.createTime}}
 42 |                         </div>
 43 |                     </div>
 44 |                     <div class="comment-right">
 45 |                         <icon type="heart"></icon>
 46 |                     </div>
 47 |                 </div>
 48 |                 <div class="comment-content">
 49 |                     <wxParse :content="reply.content"></wxParse>
 50 |                 </div>
 51 |             </div>
 52 |         </div>
 53 |     </div>
 54 | </template>
 55 | <script>
 56 | import fly from '@/utils/fly'
 57 | import typeBlock from '@/components/type-block'
 58 | import icon from '@/components/icon'
 59 | import avatar from '@/components/avatar'
 60 | import wxParse from 'mpvue-wxparse';
 61 | 
 62 | export default {
 63 |     name: "article",
 64 |     data() {
 65 |         return {
 66 |             article: null,
 67 |             test: '<span>sss</span>'
 68 |         }
 69 |     },
 70 |     components: {
 71 |         typeBlock,
 72 |         icon,
 73 |         wxParse,
 74 |         avatar,
 75 |     },
 76 |     async onLoad() {
 77 |         const {
 78 |             id
 79 |         } = this.$root.$mp.query;
 80 |         wx.showLoading({
 81 |             title: '加载中',
 82 |         })
 83 |         let res = await fly.get(`topic/${id}`)
 84 |         if (res.success) {
 85 |             this.article = res.data;
 86 |             this.article = Object.assign(this.article, {
 87 |                 createTime: this.fromNow(res.data.create_at),
 88 |             });
 89 |             if (this.article.replies && this.article.replies.length) {
 90 |                 // 因为小程序不支持过滤器，所以在这里处理回复时间
 91 |                 this.article.replies = this.article.replies.map(reply => {
 92 |                     reply.createTime = this.fromNow(reply.create_at)
 93 |                     return reply;
 94 |                 })
 95 |             }
 96 |             wx.hideLoading();
 97 |         }
 98 | 
 99 |     }
100 | }
101 | </script>
102 | <style lang="scss" scoped>
103 | .article-wrap {
104 |     background-color: $page-bg;
105 |     font-size: 14px;
106 |     .head-box {
107 |         padding: 14px;
108 |         background: #fff;
109 |         .head-title {
110 |             font-size: 18px;
111 |             margin: 0;
112 |         }
113 |         .head-intro {
114 |             display: flex;
115 |             margin-top: 8px;
116 |             align-items: center;
117 |             .head-middle {
118 |                 flex: 1;
119 |                 margin-left: 10px;
120 |                 .head-middle-top {
121 |                     display: flex;
122 |                     align-items: center;
123 |                     .head-author-name {
124 |                         font-size: 14px;
125 |                         margin-left: 8px;
126 |                     }
127 |                 }
128 |                 .head-middle-bottom {
129 |                     line-height: 20px;
130 |                     font-size: 13px;
131 |                     color: #666;
132 |                     margin-top: 2px;
133 |                 }
134 |             }
135 |             .head-right {
136 |                 width: 36px;
137 |                 flex-shrink: 0;
138 |                 text-align: center;
139 |                 font-size: 16px;
140 |             }
141 |         }
142 |     }
143 |     .content-box {
144 |         padding: 0 14px;
145 |         background: #fff;
146 |         box-shadow: 0 2px 2px #cecece;
147 |     }
148 |     .comment-box {
149 |         margin-top: 8px;
150 |         background: #fff;
151 |         .comment-count {
152 |             padding: 18px 14px;
153 |             position: relative;
154 |             font-size: 14px;
155 |             font-weight: 100;
156 |             border-bottom: 1px solid $grey-border;
157 |         }
158 |         .comment-item {
159 |             position: relative;
160 |             padding: 14px;
161 |             border-bottom: 1px solid $grey-border;
162 |             .comment-head {
163 |                 display: flex;
164 |                 .comment-middle {
165 |                     margin-left: 8px;
166 |                     flex: 1;
167 |                     .comment-middle-top {}
168 |                     .comment-middle-bottom {
169 |                         span {
170 |                             color: $light-color;
171 |                         }
172 |                     }
173 |                 }
174 |                 .comment-right {
175 |                     flex-shrink: 0;
176 |                     text-align: center;
177 |                     display: flex;
178 |                     align-items: center;
179 |                     color: #666;
180 |                 }
181 |             }
182 |             .comment-content {
183 |                 margin-top: 8px;
184 |             }
185 |         }
186 |     }
187 | }
188 | </style>
189 | 


--------------------------------------------------------------------------------
/src/pages/user/user.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="user-wrap">
  3 |         <div class="user-head-wrap" :style="'height:'+height+'px'">
  4 |             <div class="avatar">
  5 |                 <avatar v-if="author" :user="author" :size="90"></avatar>
  6 |             </div>
  7 |             <div class="name-wrap" v-if="user">
  8 |                 <div class="name">
  9 |                     {{user.loginname}}
 10 |                 </div>
 11 |                 <div class="link">
 12 |                     {{user.githubUsername}}@github.com
 13 |                 </div>
 14 |             </div>
 15 |             <div class="info" v-if="user">
 16 |                 注册时间：{{user.create_at}}
 17 |                 <span>积分：{{user.score}}</span>
 18 |             </div>
 19 |         </div>
 20 |         <slider-nav :navList="navList" :currentTab.sync="currentTab"></slider-nav>
 21 |         <swiper :current="currentTab" class="swiper-box" duration="300" @change="swiperChange" :style="'height:'+contentHeight">
 22 |             <swiper-item v-for="(item,index) in navList" :key="index">
 23 |                 <scroll-view scroll-y style="height:100%;" @scroll="scrollFn" @scrolltoupper="toUp" v-if="articleList.length">
 24 |                     <simple-article v-for="(item,i) in articleList" :article="item" :key="i"></simple-article>
 25 |                 </scroll-view>
 26 |                 <p v-else style="text-align:center">暂无数据</p>
 27 |             </swiper-item>
 28 |         </swiper>
 29 |     </div>
 30 | </template>
 31 | <script>
 32 | import fly from '@/utils/fly'
 33 | import typeBlock from '@/components/type-block'
 34 | import icon from '@/components/icon'
 35 | import sliderNav from '@/components/slider-nav'
 36 | import avatar from '@/components/avatar'
 37 | import wxParse from 'mpvue-wxparse';
 38 | import wxp from 'minapp-api-promise';
 39 | import simpleArticle from '@/components/simple-article'
 40 | 
 41 | import {
 42 |     pick,
 43 |     debounce
 44 | } from 'lodash'
 45 | const navList = [{
 46 |     title: '最近回复',
 47 |     type: 'reply',
 48 | }, {
 49 |     title: '最新发布',
 50 |     type: 'topic',
 51 | }, {
 52 |     title: '话题收藏',
 53 |     type: 'collect',
 54 | }, ]
 55 | export default {
 56 |     name: "article",
 57 |     data() {
 58 |         return {
 59 |             articleList: [],
 60 |             height: 220,
 61 |             winHeight: null,
 62 |             navList: navList,
 63 |             article: null,
 64 |             user: null,
 65 |             author: null,
 66 |             currentTab: 0,
 67 |             userId: null,
 68 |         }
 69 |     },
 70 |     methods: {
 71 |         toUp() {
 72 |             this.height = 220
 73 |         },
 74 |         scrollFn(e) {
 75 |             // if (this.height = 0) return
 76 |             let top = e.mp.detail.scrollTop
 77 |             console.log(top)
 78 |             if (top > 60) {
 79 |                 this.height = 0
 80 |             }
 81 |         },
 82 |         swiperChange(e) {
 83 |             let {
 84 |                 current
 85 |             } = e.target;
 86 |             this.currentTab = current;
 87 |         },
 88 |         // 获取用户信息
 89 |         async getUserInfo(id) {
 90 |             let res
 91 |             try {
 92 |                 res = await fly.get('user/' + id);
 93 |             } catch (err) {
 94 |                 console.log(err)
 95 |             }
 96 |             if (res.success) {
 97 |                 //处理注册时间
 98 |                 let {
 99 |                     create_at
100 |                 } = res.data;
101 |                 create_at = this.fromNow(create_at);
102 |                 this.user = Object.assign(res.data, {
103 |                     create_at,
104 |                 });
105 |             }
106 |             this.articleList = this.user.recent_replies;
107 |             this.author = pick(this.user, ['loginname', 'avatar_url'])
108 |         },
109 |         // 获取用户收藏的主题
110 |         async getUserCollect() {
111 |             wx.showLoading({
112 |                 title: '加载中'
113 |             })
114 |             try {
115 |                 let res = await fly.get('/topic_collect/' + this.userId)
116 |                 if (res.success && res.data && res.data.length) {
117 |                     this.articleList = res.data.map(item => {
118 |                         item.author = pick(this.user, ['loginname', 'avatar_url'])
119 |                         return pick(item, ['title', 'id', 'last_reply_at', 'author'])
120 |                     })
121 |                 }
122 |             } catch (err) {
123 | 
124 |             }
125 |             wx.hideLoading()
126 |         }
127 | 
128 |     },
129 |     watch: {
130 |         currentTab(newVal, oldVal) {
131 |             switch (newVal) {
132 |                 case 0:
133 |                     this.articleList = this.user.recent_replies;
134 |                     break;
135 |                 case 1:
136 |                     this.articleList = this.user.recent_topics;
137 |                     break;
138 |                 default:
139 |                     this.getUserCollect()
140 |             }
141 |         },
142 |     },
143 |     computed: {
144 |         contentHeight() {
145 |             if (this.winHeight) {
146 |                 return this.winHeight - 44 - this.height + 'px'
147 |             }
148 |         }
149 |     },
150 |     components: {
151 |         typeBlock,
152 |         icon,
153 |         wxParse,
154 |         avatar,
155 |         sliderNav,
156 |         simpleArticle,
157 |     },
158 |     async onLoad() {
159 |         // 获取系统消息
160 |         let info = await wxp.getSystemInfo();
161 |         this.winHeight = info.windowHeight
162 |         this.userId = this.$root.$mp.query.id;
163 |         wx.showLoading({
164 |             title: '加载中',
165 |         })
166 |         this.height=220
167 |         this.currentTab=0
168 |         this.getUserInfo(this.userId)
169 |         wx.hideLoading()
170 |     }
171 | }
172 | </script>
173 | <style lang="scss" scoped>
174 | .user-wrap {
175 |     height: 100%;
176 |     .user-head-wrap {
177 |         transition: height .6s;
178 |         overflow: hidden;
179 |         text-align: center;
180 |         height: 220px;
181 |         background-size: 100%;
182 |         // background-image: url('https://static.yximgs.com/s1/i/pages/kuaiying/bg-c8b7e3f5e0.png');
183 |         background-image: url('http://s3.music.126.net/m/s/img/hot_music_bg_2x.jpg');
184 |         .avatar {
185 |             margin: 20px auto 0;
186 |             width: 90px;
187 |         }
188 |         .name-wrap {
189 |             text-align: center;
190 |             color: #fff;
191 |             .name {
192 |                 font-size: 18px;
193 |                 margin-top: 8px;
194 |             }
195 |             .link {
196 |                 margin-top: 8px;
197 |                 text-decoration: underline;
198 |                 color: #999;
199 |             }
200 |         }
201 |         .info {
202 |             padding: 0 16px;
203 |             position: relative;
204 |             color: #fff;
205 |             margin-top: 10px;
206 |             text-align: left;
207 |             font-size: 14px;
208 |             span {
209 |                 color: $light-color;
210 |                 right: 16px;
211 |                 position: absolute;
212 |             }
213 |         }
214 |     }
215 |     .swiper-box {
216 |         display: block;
217 |         width: 100%;
218 |         overflow: auto;
219 |         .swiper-item {
220 |             height: 100%;
221 |             text-align: center;
222 |             display: block;
223 |         }
224 |     }
225 | }
226 | </style>
227 | 


--------------------------------------------------------------------------------