过客详情

assets/component/share.vue

@@ -149,7 +149,6 @@
 	  	color: #777;
 	  }
 	  .icon-wechat .wechat-qrcode .qrcode{
-	  	width: 105px;
 	  	margin: 10px auto;
 	  }
 	  .icon-wechat .wechat-qrcode .qrcode table{

assets/config/ports.js

@@ -17,7 +17,7 @@ export const RESET_OFFSET = 'RESET_OFFSET';
 
 //过客模块
 export const JOURNAL_LIST = getApi('WuJi/GetPasserBy');
-
+export const PASSING_DETAIL = getApi('WuJi/GetPasserbyDetail');
 //日记模块
 export const MY_CATEGORY_LIST = getApi('WuJi/GetCategoryList');
 export const ADD_CATEGORY = getApi('WuJi/addCategory');

assets/config/title.js

@@ -11,5 +11,6 @@ export const account = {
 }
 
 export const passing = {
-	'index': '过客列表'
+	'index': '过客列表',
+	'detail': '过客详情'
 }

assets/modules/diary/detail.vue

@@ -39,8 +39,8 @@
 </template>
 <script>
     import Vue from 'vue'
-    import Api from "utils/api"
-    import obj from "utils/object"
+    import Api from 'utils/api'
+    import obj from 'utils/object'
     import weather from 'config/weather'
     import weekday from 'config/weekday'
     import Browser from 'utils/browser'

assets/modules/passing/detail.vue

@@ -0,0 +1,143 @@
+<template lang="jade">
+	div.wuji-container.center-block(v-if="passing")
+		div.wuji-header(:style="{backgroundImage: 'url(' + passing.userBGUrl + ')'}")
+			div.user-info
+				avatar(:src="passing.avatarUrl", width="180", height="180")
+				div.user-name {{passing.nickName}}
+				div.user-subtitle {{passing.subTitle}}
+		div.wuji-title
+			span.datetime {{passing.createDate | datetime}}
+			span.weekday {{passing.weekday | weekday}}
+			i.fa.fa-exclamation-triangle
+			el-popover(ref="popover1", placement="bottom", trigger="hover")
+					i.el-icon-share(slot="reference")
+					share(:description="description", :title="passing.content.substr(0,20) + '...'", :q-code-position="true")
+			i.el-icon-star-off(@click="doPraise")
+			i.fa.fa-heart-o(@click="doCollection")
+		div.wuji-content {{passing.content}}
+
+
+</template>
+<script>
+    import Vue from 'vue'
+    import Api from "utils/api"
+    import Browser from 'utils/browser'
+    import weekday from 'config/weekday'
+    import fancyBox from 'component/fancyBox'
+    import share from 'component/share'
+    import avatar from 'component/avatar'
+    import {Message, Popover} from 'element-ui'
+    Vue.use(Popover)
+    export default{
+        name: 'passingDetail',
+        data(){
+        	return{
+        		passing: null,
+        		description: '吾记，属于你的心灵港湾'
+        	}
+        },
+        created(){
+        	this.init();
+        },
+        methods:{
+            init(){
+                this.getPasserbyDetail(this.$route.query.id);
+            },
+            getPasserbyDetail(id){
+                let _self = this, params = { keyValue: id };
+                //params => 参数
+                Api.getPasserbyDetail(params).then(result => {
+                    _self.passing = result;
+                }).catch(error => {
+                    Message({message: error, type: 'error', showClose: true});
+                });
+            },
+            doPraise(){
+
+            },
+            doCollection(){
+            	
+            }
+        },
+        watch:{
+        },
+        filters:{
+            datetime(date){
+                return date.substr(0,4) + '-' + date.substr(4,2) + '-' + date.substr(6,2) + ' ' + date.substr(8,2) + ':' + date.substr(10,2);
+            },
+            weekday(index){
+                return weekday[index-1].subname;
+            }
+        },
+        components: {
+        	share,
+        	fancyBox,
+        	avatar
+        }
+    }  
+</script>
+<style lang="sass" scoped>
+	@import "../../public/scss/index.scss";
+    $prefix: 'wuji';
+    .#{$prefix}-container{
+		width: $container-width;
+		background-color: $white;
+		.#{$prefix}-header{
+			position: relative;
+			height: 400px;
+            background-position: center center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            .user-info{
+            	text-align: center;
+            	color: $white;
+            	position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+		        .avatar{
+		        	border-radius: 50%;
+					border: 1px solid $white;
+					margin-bottom: 20px;
+		        }
+		        .user-name,
+		        .user-subtitle{
+		        	font-size: $size-h3;
+				    letter-spacing: 0.5px;
+				    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
+				    margin-bottom: 10px;
+		        }
+		        .user-subtitle{
+		        	font-size: 13px;
+		        }
+            }
+		}
+		.#{$prefix}-title{
+			height: 40px;
+			line-height: 40px;
+			padding: 0 10px;
+			border-bottom: 1px #eee dashed;
+			@include clearfix();
+			.datetime{
+				margin-right: 20px;
+			}
+			i{
+				float: right;
+                color: $main;
+                margin-right: 20px;
+                font-size: $size-h2;
+                margin-top: 11px;
+                cursor: pointer;
+                &.fa-exclamation-triangle{
+					margin-right: 0!important;
+                }
+			}
+		}
+		.#{$prefix}-content{
+			padding: 30px 10px;
+			line-height: 1.5;
+			text-indent: 30px;
+			text-align: justify;
+		}
+    }
+</style>

assets/modules/passing/index.vue

@@ -17,16 +17,16 @@ div.wuji-container.center-block
             div.content
                 p.content-p
                     span {{item.content}}
-                    span    
-                        a(href="javascript:void(0);") 继续阅读    
+                    span
+                        router-link(:to = "{ path: 'detail', query: { id: 'Iqeu8U+/HhvO4cPKwCAM8ECqoiIb6IDSKC9tiDzZk8LpccfAPn9zLpKzYFesEJiY' } }") 继续阅读
             div.dec
                 div.pull-left.author
                     Avatar(:src="item.avatarUrl", width="44", height="44")
                     div
                         div.name {{item.nickName}}
                         div.time {{item.passbyDate | date}}
                 div.pull-right
-                    thumbs-up
+                    thumbs-up(:number="item.praiseCount")
     Pagination(:total="50", :num="5", :type="1")
 </template>
 

assets/routers/passing.js

@@ -5,10 +5,11 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 const Index = resolve => require(['modules/passing/index.vue'], resolve)
+const Detail = resolve => require(['modules/passing/detail.vue'], resolve)
 
 const routes = [
   { path: '/', component: Index, name: 'index' },
-
+  { path: '/detail', component: Detail, name: 'detail' },
 ]
 
 export default new VueRouter({

assets/utils/api.js

@@ -81,6 +81,11 @@ export default {
 
     //获取过客列表
     getJournalList: params => request(API.JOURNAL_LIST, params, METHODS.POST),
+    //获取过客详情
+    getPasserbyDetail: params => request(API.PASSING_DETAIL, params, METHODS.POST),
+
+
+
     /******************日记模块*********************/
     //获取我的分类列表
     getCategoryList: params => request(API.MY_CATEGORY_LIST, params, METHODS.POST),

mock-server/api.json

@@ -857,8 +857,35 @@
                         "fontcolor": "333"
                     }
                 }
+        },
+
+        {
+            "url": "/WuJi/GetPasserbyDetail",
+            "desc": "查看某条过客详情",
+            "mock": true,
+            "res": {
+                "code": 200,
+                "msg": "查询成功",
+                "data":{
+                    "userId": 533519,
+                    "praiseCount": 3,
+                    "nickName": "小茹",
+                    "diaryId": 7232274,
+                    "createDate": "20170124130800",
+                    "passbyDate": "20170122130853",
+                    "userBGUrl": "http://pic.pptbz.com/pptpic/201206/2012060823334584.jpg",
+                    "content": "近来，有丝丝倦怠，铺天盖地的不肯离开，执笔，画圈，一闪而过的念，总是一而再，再而三的被搁浅，那些不情不愿的小情绪，占领了太多的空间，庸庸碌碌中，任光阴无情的在指缝中删删减减。早春，微寒缠绵，风，温和的吹醒，春的语言，柳丝抽芽，百花争艳，桃花灼灼的世界是温婉多情的烟花三月。柳岸花堤，亭水榭间，行吟山水，一梦千年。“水光潋滟晴方好，山色空蒙雨亦奇。欲把西湖比西子，淡妆浓抹总相宜”。爱上一座城，爱它的雅韵别致，温润纤细，痴恋一场雨，恋它的清新淡雅，水墨成烟。空蒙蒙的烟雨，摇曳着柳枝，泪水涟涟。古往今来，江南春梦，被悠悠岁华，洗濯了千年。忧怨的姑娘，青石板的小巷，一柄多情的油纸伞，清晰而玲珑的在一湖瘦水中沉淀。一朵时光，反复的被书写，写一程山水，春意翩翩，写柴米油盐，独自清闲，写万千的情意，羽化成美丽的语言，写小小的心绪，深深浅浅，心中，始终有一处温暖，如雨后的晨露，洋溢在眉眼，不增不减。佛说：“欲行净土，当净其心，随其心净，即佛土净。圣人求心不求佛，愚人求佛不求心；智者调心不调身，愚者调身不调心。”拥一颗禅心，平和宁静，不攀比，不争名夺利，在温和的光阴中，恪守自己，品人生百味，世事洞明。我心中对于圆满，或许不是鲜衣怒马，也或许不是海棠佳话，而是，一段清简的况味，禅风流韵，与喜欢的人，素心相对，你护我冷暖，我慰你心安，在眼眸顾盼的瞬间，捕捉着岁月最美的箴言，一人一心，一花一叶。如水的良辰，闲云悠悠，薄薄的阳光，还在云上，怀惴着晴朗，与风月对望，迎风中伫立，将繁华与落寞，细细丈量，佛说；万物皆有因果，世事变幻无常，命运，向你掩盖了一扇门，定会为你打开另一窗，只要你用心承载着阳光，便是明媚不可阻挡的方向。",
+                    "subTitle": "弄花熏得舞衣香 一春弹泪说凄凉",
+                    "avatarUrl": "http://user.xiejianji.com/17040812515250721238A845412A.jpg",
+                    "isPraised": 0,
+                    "isCollection": 0,
+                    "weekday": 5,
+                    "browseCount": 11
+                }
+            }
         }
 
+
     ]
 }