Skip to content
This repository has been archived by the owner on Nov 15, 2018. It is now read-only.

Commit

Permalink
feat: 新增 圈子 - 首页列表, 圈子 - 我加入的列表 (#321)
Browse files Browse the repository at this point in the history
  • Loading branch information
jsonleex committed Dec 19, 2017
1 parent a29cc3a commit 2096dec
Show file tree
Hide file tree
Showing 5 changed files with 318 additions and 14 deletions.
4 changes: 3 additions & 1 deletion src_v2/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import './style/index.less';

// Filters
import * as filters from './filters';
import { formatNum } from './util/';

/** Ajax */
import Ajax from './http';
Expand All @@ -24,7 +25,7 @@ import Ajax from './http';
import vIcon from './components/common/vIcons'; /* Icons */
import btnSwitch from './components/common/btnSwitch'; /* btnSwitch 按钮 */
import badge from './components/common/badge'; /* Badge 徽标 */
import fullSpin from './components/FullSpin'; /* 全屏加载动画 */
import fullSpin from './components/FullSpin'; /* 全屏加载动画 */
import userAvatar from './components/common/userAvatar'; /* Avatar 用户头像组件 */
import loadMore from './components/loadMore/loadMore';

Expand All @@ -44,6 +45,7 @@ Vue.use(messageToast); /* 消息提示 */

Vue.prototype.$MessageBundle = filters.plusMessageFirst;

filters.formatNum = formatNum;

for(const k in filters) {
Vue.filter(k, filters[k]);
Expand Down
38 changes: 38 additions & 0 deletions src_v2/page/group/children/joinedGroup.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<template>
<div>
<head-top :go-back='true' :title='`我加入的`'></head-top>
<div>
<group-item v-for='group in myGroups' :key='`group-${group.id}`' :group='group' :role='true'></group-item>
</div>
</div>
</template>
<script>
import HeadTop from '@/components/HeadTop';
import groupItem from '../components/groupListItem';
export default {
name: 'joinedGroup',
components: {
HeadTop,
groupItem
},
data() {
return {
myGroups: []
}
},
methods: {
getMyGroups() {
this.$http.get('/plus-group/user-groups').then(({ data = [] }) => {
if(data) {
this.myGroups = [...data];
}
});
}
},
created() {
this.getMyGroups();
}
}
</script>
<style lang='less'>
</style>
172 changes: 168 additions & 4 deletions src_v2/page/group/components/groupListItem.vue
Original file line number Diff line number Diff line change
@@ -1,22 +1,186 @@
<template>
<div :class="prefixCls" :id='key'>
<div :class="prefixCls" :id='`group-${group.id}`'>
<div :class="`${prefixCls}-header`">
<img :src="header">
</div>
<div :class="`${prefixCls}-info`">
<div :class="`${prefixCls}-name`">
<h3>{{ group.name }}</h3>
<i v-if='group.mode ==="paid"' :class="`${prefixCls}-paid-icon`">付费</i>
</div>
<p>
<span>帖子
<i class="num">{{ group.posts_count || 0 | formatNum }}</i>
</span>
<span>成员
<i class="num">{{ group.users_count || 0 | formatNum }}</i>
</span>
</p>
</div>
<div :class="`${prefixCls}-action`">
<a v-if='!group.joined' @click='joinGroup' :class="[`${prefixCls}-action-btn`, 'join']">
<v-icon type='foot-plus'></v-icon>加入
</a>
<div v-if='role' :class="[`${prefixCls}-role`, roles.cls]">{{ roles.label }}</div>
</div>
</div>
</template>
<script>
const prefixCls = 'group-list-item'
export default {
name: 'groupListItem',
props:{
key: String
props: {
group: {
required: true
},
role: Boolean
},
data() {
return {
prefixCls
}
},
computed: {
header() {
return this.group.avatar;
},
roles() {
if(!this.role) return;
const roles = {
label: '',
cls: ''
},
{ joined: { role = '普通成员' } = {} } = this.group;
switch(role) {
case 'member':
roles.label = '普通成员';
break;
case 'administrator':
roles.label = '管理员';
break;
case 'founder':
roles.label = '圈主';
break;
}
roles.cls = role;
return roles;
}
},
methods: {
joinGroup() {}
}
}
</script>
<style lang='less'>
@group-list-item-prefix: group-list-item;
.@{group-list-item-prefix} {}
.@{group-list-item-prefix} {
padding: 20px 30px;
border-bottom: 1px solid #ededed;
height: 180px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
&-role {
height: 32px;
line-height: 32px;
padding: 0 17px;
font-size: 20px;
color: #fff;
border-radius: 32/2px;
background-color: #ccc;
&.founder {
background-color: #fca308;
}
}
&-paid-icon {
margin-left: 15px;
border-radius: 3px;
/*no*/
padding: 0 5px;
min-width: 50px;
height: 30px;
line-height: 30px;
font-size: 20px;
color: #fff;
background: linear-gradient(135deg, #E8D1B3 0%, #E8D1B3 38%, #C8A06C 42%, #C8A06C 100%);
}
&-name {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 20px;
font-size: 32px;
color: #333;
h3 {
margin: 0;
padding: 0;
}
}
&-info {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 0 20px;
flex: 1 1 auto;
p {
font-size: 0;
white-space: nowrap;
margin: 0;
}
span {
font-size: 28px;
margin-right: 30px;
}
.num {
color: #59b6d7;
margin-left: 10px;
}
}
&-action {
flex: none;
&-btn {
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
font-size: 26px;
width: 126px;
height: 50px;
line-height: 46px;
border: 1px solid #59b6d7;
/*no*/
border-radius: 8px;
color: #59b6d7;
background-color: #fff;
.v-icon {
width: 20px;
height: 20px;
margin-right: 5px;
}
}
}
&-header {
flex: none;
width: 120px;
height: 120px;
img {
width: 100%;
object-fit: cover;
background-color: #ccc;
}
}
}
</style>
Loading

0 comments on commit 2096dec

Please sign in to comment.