133 lines
3.8 KiB
Vue
133 lines
3.8 KiB
Vue
<template>
|
|
<view class="group">
|
|
<view class="title"> 群聊 </view>
|
|
<view v-for="(item, index) in groups" :key="index" class="friend-flex" @click="toGroup(item.targetId)">
|
|
<u-avatar size="38" shape="square" :src="contact(item.targetId).portraitUrl" />
|
|
<view class="info">
|
|
<view class="name">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="group-count"> {{groups.length}}个群聊 </view>
|
|
<u-modal negativeTop="300" :show="createModal" title="创建群聊" showCancelButton @cancel="onHideModal"
|
|
@confirm="onCreateGroup">
|
|
<view class="slot-content">
|
|
<u--input placeholder="群名称" border="surround" focus v-model="groupName"></u--input>
|
|
</view>
|
|
</u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getMyGroups,
|
|
createGroup
|
|
} from '@/apis/interfaces/im.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
groups: [],
|
|
createModal: false,
|
|
groupName: ''
|
|
}
|
|
},
|
|
computed: {
|
|
contact() {
|
|
return function(targetId) {
|
|
return this.$store.getters.contactInfo(targetId)
|
|
}
|
|
}
|
|
},
|
|
onNavigationBarButtonTap() {
|
|
this.createModal = true
|
|
},
|
|
onLoad() {
|
|
this.initData()
|
|
},
|
|
methods: {
|
|
initData() {
|
|
getMyGroups().then((res) => {
|
|
this.groups = res
|
|
res.map(item => {
|
|
this.$store.dispatch('updateContact', item)
|
|
})
|
|
})
|
|
},
|
|
onHideModal() {
|
|
this.createModal = false
|
|
this.groupName = ''
|
|
},
|
|
onCreateGroup() {
|
|
createGroup({
|
|
name: this.groupName
|
|
}).then(res => {
|
|
uni.showToast({
|
|
title: '创建成功'
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: err.message
|
|
})
|
|
}).finally(() => {
|
|
this.initData()
|
|
this.onHideModal()
|
|
})
|
|
},
|
|
toGroup(targetId) {
|
|
uni.navigateTo({
|
|
url: '/pages/im/group/chat?targetId=' + targetId
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.group {
|
|
min-height: 100vh;
|
|
background-color: $window-color;
|
|
.title{
|
|
font-size: $title-size-m;
|
|
color: $text-gray-m;
|
|
padding: 10rpx $padding;
|
|
}
|
|
.group-count{
|
|
text-align: center;
|
|
font-size: $title-size;
|
|
color: $text-gray;
|
|
background-color: #fff;
|
|
padding: 10rpx $padding $padding $padding;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
// 好友列表
|
|
.friend-flex {
|
|
position: relative;
|
|
padding: 20rpx $padding;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
|
|
|
|
.info {
|
|
flex: 1;
|
|
margin-left: $padding + 10;
|
|
border-bottom: solid 1rpx #f9f9f9;
|
|
padding-bottom: $padding;
|
|
|
|
.name {
|
|
font-size: $title-size + 1;
|
|
color: #454545 !important;
|
|
}
|
|
|
|
.address {
|
|
color: $text-gray-m;
|
|
font-size: $title-size-m - 5;
|
|
}
|
|
}
|
|
}
|
|
</style>
|