TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

公告模块重构样式

Browse Source
This commit is contained in:
Z
2022-02-21 13:27:46 +08:00
parent 4f7096a9c4
commit 57cba65206
7 changed files with 263 additions and 616 deletions
Download Patch File Download Diff File Expand all files Collapse all files

283
pages/im/group/announcement.vue
View File

@@ -1,144 +1,169 @@
<template>
<view class="announce">
<u-skeleton rows="2" :loading="loading" avatar :rows="5" v-if="announcements.length>0">
<view v-for="(item,index) in announcements" :key="index" class="item" >
<view class="header">
<u-avatar :src="item.user.portraitUrl" />
<view class="user">
<view class="name">{{ item.user.name }}</view>
<view class="time">{{ item.created_at }}</view>
</view>
<view class="delete" v-if="isAdmin" @click="onDelete(item.announcement_id)">删除</view>
</view>
<view class="content">{{ item.content }}</view>
</view>
</u-skeleton>
<view class="no-lists" v-else>
<u-image class="cover" radius="4" width="400rpx" height="400rpx" :src="require('@/static/imgs/no-level-list.png')" :lazy-load="true" />
<span>暂无公告内容~</span>
</view>
</view>
<view class="announce">
<!-- 有列表 -->
<u-skeleton rows="2" :loading="loading" avatar :rows="5" v-if="announcements.length>0">
<view v-for="(item,index) in announcements" :key="index" class="item"
@longpress="actions(item.announcement_id)">
<view class="content-a"><span>置顶</span>{{ item.content }}</view>
<view class="user">
<u-avatar :src="item.user.portraitUrl" size="40rpx" />
<view class="name">{{ item.user.name }}</view>
<view class="time">{{ item.created_at }}</view>
</view>
<!-- <view class="delete" v-if="isAdmin" @click="onDelete(item.announcement_id)">删除</view> -->
</view>
</u-skeleton>
<!-- 没有列表 -->
<view class="no-lists" v-else>
<u-image class="cover" radius="4" width="400rpx" height="400rpx"
:src="require('@/static/imgs/no-level-list.png')" :lazy-load="true" />
<span>暂无公告内容~</span>
</view>
<!-- 弹出 -->
<u-action-sheet :actions="actionMap" :title="actionTitle" cancelText="取消" @close="hideAction"
@select="handleAction" :show="actionShow" />
</view>
</template>
<script>
import {
getGroupInfo,
getGroupAnnouncements,
deleteGroupAnnouncement
} from '@/apis/interfaces/im.js'
import {
getGroupInfo,
getGroupAnnouncements,
deleteGroupAnnouncement
} from '@/apis/interfaces/im.js'
export default {
data() {
return {
targetId: '',
announcements: [],
loading: true,
isAdmin: false
}
},
onLoad(e) {
this.targetId = e.targetId
getGroupInfo(this.targetId).then(res => {
this.isAdmin = res.group.is_admin
})
this.initData()
uni.$on('groupAnnouncementCreated', this.initData)
},
onUnload() {
uni.$off('groupAnnouncementCreated')
},
onNavigationBarButtonTap() {
if (this.isAdmin) {
uni.navigateTo({
url: '/pages/im/group/announceCreate?targetId=' + this.targetId
})
} else {
uni.showToast({
icon: 'none',
title: '没有权限'
})
}
},
methods: {
initData() {
getGroupAnnouncements(this.targetId).then(res => {
this.announcements = res
this.loading = false
})
},
onDelete(aId) {
uni.showModal({
title: '删除公告',
success: (res) => {
if (res.confirm) {
deleteGroupAnnouncement(this.targetId, aId).then(res => {
uni.showToast({
icon: 'none',
title: '删除成功'
})
this.initData()
})
}
}
})
}
}
}
export default {
data() {
return {
targetId: '',
announcements: [],
loading: true,
isAdmin: false,
actionShow: false,
actionMap: [],
actionTitle: '请选择',
}
},
onLoad(e) {
this.targetId = e.targetId
getGroupInfo(this.targetId).then(res => {
this.isAdmin = res.group.is_admin
})
this.initData()
uni.$on('groupAnnouncementCreated', this.initData)
},
onUnload() {
uni.$off('groupAnnouncementCreated')
},
onNavigationBarButtonTap() {
if (this.isAdmin) {
uni.navigateTo({
url: '/pages/im/group/announceCreate?targetId=' + this.targetId
})
} else {
uni.showToast({
icon: 'none',
title: '没有权限'
})
}
},
methods: {
initData() {
getGroupAnnouncements(this.targetId).then(res => {
this.announcements = res
this.loading = false
})
},
actions(id){
console.log(id)
},
onDelete(aId) {
uni.showModal({
title: '删除公告',
success: (res) => {
if (res.confirm) {
deleteGroupAnnouncement(this.targetId, aId).then(res => {
uni.showToast({
icon: 'none',
title: '删除成功'
})
this.initData()
})
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
.announce {
padding: 0 $padding $padding $padding;
.no-lists {
padding-top: $padding * 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: $title-size-m;
color: $text-gray-m;
span {
padding-top: $padding;
}
}
.item {
border-bottom: solid 1rpx #f9f9f9 !important;
padding-top: $padding;
.announce {
background-color: #f9f9f9;
min-height: 99vh;
.header {
display: flex;
flex-direction: row;
align-items: center;
.no-lists {
padding-top: $padding * 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: $title-size-m;
color: $text-gray-m;
.user {
margin-left: $padding;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
span {
padding-top: $padding;
}
}
.name {}
.item {
background-color: #fff;
padding: $padding $padding + 10;
border-bottom: $padding solid #f9f9f9;
.time {
font-size: 24rpx;
color: $text-gray-m;
}
}
.user {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
font-size: $title-size-m;
color: $text-gray-m;
.delete {
color: $text-price;
font-size: 28rpx;
}
}
.name {
padding-left: 10rpx;
}
.content {
padding: 20rpx $padding;
font-size: $title-size;
color: $text-gray;
max-width: 100%;
}
}
}
.time {
margin-left: 20rpx;
}
}
.content-a {
font-size: $title-size;
color: $text-color;
max-width: 100%;
margin-bottom: $padding;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
line-height: 1.5;
span{
color: #fff;
display: inline-block;
border-radius: 10rpx;
background-color: $main-color;
font-size: $title-size-m - 4;
padding: 4rpx 10rpx;
margin-right: 10rpx;
line-height: 1.4;
margin-bottom: 10rpx;
}
}
}
}
</style>

8
pages/im/group/invite.vue
View File

@@ -72,11 +72,11 @@
this.getFriendList()
},
methods: {
onSearch(val) {
if (val) {
var ix = []
onSearch() {
if (this.searchTxt) {
console.log(this.searchTxt)
this.friends = this.orignalFriends.map((list, index) => {
const resList = list.filter(item => item.name.indexOf(val) > 0)
const resList = list.filter(item => item.name.indexOf(this.searchTxt) > 0)
if (resList.length > 0) {
this.indexs = this.orignalIndexs.map((t, i) => {})
} else {

162
pages/im/group/reviewed.vue
View File

@@ -1,79 +1,85 @@
<!-- 群聊邀请确认列表页面 -->
<template>
<view class="reviewed">
<view class="reviewed-item">
<u-avatar class="avatar" src="require('@/static/user/cover.png')" shape="square" size="36" />
<view style="flex:1;">
<view class="nickname"><span>{{`艾米的猫儿 `}}</span>想邀请<span>{{` 用户8066`}}</span>加入群聊</view>
<view> 申请原因：{{`呵呵哒。。`}}</view>
</view>
<view class="sure" @click="sure(2)"> 通过 </view>
</view>
</view>
</template>
<script>
import {
getGroupMakeSure,
getGroupMakeSureAllow
} from "@/apis/interfaces/im.js"
export default {
data() {
return {
lists: [],
};
},
methods: {
sure(id) {
console.log(id, '....')
uni.navigateTo({
url: "/pages/im/group/reviewedInfo?id=" + id
})
}
}
};
</script>
<style lang="scss" scoped>
.reviewed {
.reviewed-item {
margin: $padding - 10;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
border-bottom: solid 1rpx #f9f9f9;
font-size: $title-size-m - 2;
padding-bottom: 20rpx;
color: $text-gray-m;
.avatar {
background-color: $main-color;
border-radius: 6rpx;
margin-right: 20rpx;
}
.nickname {
font-size: $title-size-m;
span {
color: $text-color;
font-size: $title-size-m +1;
}
}
.sure {
background-color: $main-color;
color: #Fff;
text-align: center;
font-size: $title-size-m;
padding: 6rpx 20rpx;
border-radius: 10rpx;
margin-left: 10rpx;
}
}
}
<!-- 群聊邀请确认列表页面 -->
<template>
<view class="reviewed">
<view class="reviewed-item">
<u-avatar class="avatar" src="require('@/static/user/cover.png')" shape="square" size="36" />
<view style="flex:1;">
<view class="nickname"><span>{{`艾米的猫儿 `}}</span>想邀请<span>{{` 用户8066`}}</span>加入群聊</view>
<view> 申请原因：{{`呵呵哒。。`}}</view>
</view>
<view class="sure" @click="sure(2)"> 通过 </view>
</view>
</view>
</template>
<script>
import im from '@/utils/im/index.js'
export default {
data() {
return {
lists: [],
};
},
onLoad(e) {
this.targetId = e.id
this.getGroupPendinglist()
},
methods: {
getGroupPendinglist() {
im.getGroupPendinglist(this.targetId,(pendings) => {
console.log(pendings)
// this.pendings = pendings
})
},
sure(id) {
uni.navigateTo({
url: "/pages/im/group/reviewedInfo?id=" + id
})
}
}
};
</script>
<style lang="scss" scoped>
.reviewed {
.reviewed-item {
margin: $padding - 10;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
border-bottom: solid 1rpx #f9f9f9;
font-size: $title-size-m - 2;
padding-bottom: 20rpx;
color: $text-gray-m;
.avatar {
background-color: $main-color;
border-radius: 6rpx;
margin-right: 20rpx;
}
.nickname {
font-size: $title-size-m;
margin-bottom: 10rpx;
span {
color: $text-color;
font-size: $title-size-m +1;
}
}
.sure {
background-color: $main-color;
color: #Fff;
text-align: center;
font-size: $title-size-m;
padding: 6rpx 20rpx;
border-radius: 10rpx;
margin-left: 10rpx;
}
}
}
</style>