10
This commit is contained in:
cansnow
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<view class="contact_choose_container">
|
||||
<custom-nav-bar title="联系人">
|
||||
<view slot="more" style="margin-right: 10rpx;">
|
||||
<u-button type="primary" @click="confirm" :disabled="!isConfirmEnable">确定</u-button>
|
||||
</view>
|
||||
</custom-nav-bar>
|
||||
|
||||
<view class="search_bar_wrap">
|
||||
<u-search shape="square" placeholder="搜索" :showAction="false" v-model="keyword" />
|
||||
</view>
|
||||
|
||||
<view class="tab_container">
|
||||
<template v-if="activeTab === 0">
|
||||
<setting-item @click="tabChange(tabs[0].idx)" :title="tabs[0].title" :border="false" />
|
||||
<view class="tab_pane">
|
||||
<template v-for="cell in conversationList">
|
||||
<template v-if="cell.groupID">
|
||||
<user-item
|
||||
v-if="allowGroup"
|
||||
@itemClick="updateCheckedUserOrGroup"
|
||||
@updateCheck="updateCheckedUserOrGroup"
|
||||
:checked="checkedGroupIDList.includes(cell.groupID)"
|
||||
:disabled="disabledGroupIDList.includes(cell.groupID)"
|
||||
:checkVisible="muitple"
|
||||
:item="cell" :key="cell.groupID" />
|
||||
</template>
|
||||
<template v-if="cell.userID">
|
||||
<user-item
|
||||
@itemClick="updateCheckedUserOrGroup"
|
||||
@updateCheck="updateCheckedUserOrGroup"
|
||||
:checked="checkedUserIDList.includes(cell.userID)"
|
||||
:disabled="disabledUserIDList.includes(cell.userID)"
|
||||
:checkVisible="muitple"
|
||||
:item="cell" :key="cell.userID" />
|
||||
</template>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<view class="tab_pane" v-show="activeTab === 1">
|
||||
<choose-index-list
|
||||
@updateCheck="updateCheckedUser"
|
||||
:indexList="getChooseData.indexList"
|
||||
:itemArr="getChooseData.dataList"
|
||||
:checkedIDList="checkedUserIDList"
|
||||
:disabledIDList="disabledUserIDList"
|
||||
:showCheck="muitple" />
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from "vuex";
|
||||
import {ContactChooseTypes} from "@/constant";
|
||||
import {formatChooseData,toastWithCallback} from "@/util/common";
|
||||
import IMSDK from "openim-uniapp-polyfill";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import UserItem from "@/components/UserItem/index.vue";
|
||||
import ChooseIndexList from "@/components/ChooseIndexList/index.vue";
|
||||
import ChooseIndexFooter from "@/components/ChooseIndexFooter/index.vue";
|
||||
import SettingItem from "@/components/SettingItem/index.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
UserItem,
|
||||
ChooseIndexList,
|
||||
ChooseIndexFooter,
|
||||
SettingItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
type: ContactChooseTypes.Card,
|
||||
activeTab: 0,
|
||||
groupID: "",
|
||||
checkedUserIDList: [],
|
||||
disabledUserIDList: [],
|
||||
checkedGroupIDList: [],
|
||||
disabledGroupIDList: [],
|
||||
comfirmLoading: false,
|
||||
tabs: [
|
||||
{
|
||||
idx: 1,
|
||||
title: "我的好友",
|
||||
},
|
||||
],
|
||||
muitple:true,
|
||||
allowGroup:true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeFriendList",
|
||||
"storeCurrentConversation",
|
||||
"storeCurrentUserID",
|
||||
"storeConversationList",
|
||||
]),
|
||||
getChooseData() {
|
||||
if (this.keyword) {
|
||||
return {
|
||||
indexList: ["#"],
|
||||
dataList: [
|
||||
this.storeFriendList.filter(
|
||||
(friend) =>
|
||||
friend.nickname.includes(this.keyword) ||
|
||||
friend.remark.includes(this.keyword)
|
||||
),
|
||||
],
|
||||
};
|
||||
}
|
||||
return formatChooseData(this.storeFriendList);
|
||||
},
|
||||
|
||||
conversationList(){
|
||||
const _this = this;
|
||||
let list = [...this.storeConversationList];
|
||||
if(this.keyword){
|
||||
list = list.filter((item)=>{77
|
||||
return item.showName.indexOf(_this.kw)>-1 || item.userID.indexOf(_this.kw)>-1 || item.groupID.indexOf(_this.kw)>-1
|
||||
})
|
||||
}
|
||||
return list;
|
||||
},
|
||||
getCheckedUserInfo() {
|
||||
const tmpUserIDList = [...this.checkedUserIDList];
|
||||
const checkedFriends = this.storeFriendList.filter((friend) => {
|
||||
const idx = tmpUserIDList.findIndex(
|
||||
(userID) => userID === friend.userID
|
||||
);
|
||||
if (idx > -1) {
|
||||
tmpUserIDList.splice(idx, 1);
|
||||
}
|
||||
return idx > -1;
|
||||
});
|
||||
return [...checkedFriends];
|
||||
},
|
||||
getCheckedGroupInfo() {
|
||||
const tmpGroupIDList = [...this.checkedGroupIDList];
|
||||
const checkedGroups = this.storeConversationList.filter((item) => {
|
||||
const idx = tmpGroupIDList.findIndex(
|
||||
(groupID) => groupID === item.groupID
|
||||
);
|
||||
if (idx > -1) {
|
||||
tmpGroupIDList.splice(idx, 1);
|
||||
}
|
||||
return idx > -1;
|
||||
});
|
||||
return [...checkedGroups];
|
||||
},
|
||||
isConfirmEnable(){
|
||||
if(this.checkedUserIDList.length){
|
||||
return true;
|
||||
}
|
||||
if(this.allowGroup){
|
||||
if(this.checkedGroupIDList.length){
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const {groupID,type,checkedUserIDList,muitple} = options;
|
||||
this.type = type;
|
||||
this.groupID = groupID;
|
||||
if(muitple){
|
||||
this.muitple = muitple;
|
||||
}
|
||||
//this.muitple = true;
|
||||
this.checkedUserIDList = checkedUserIDList ? JSON.parse(checkedUserIDList) : [];
|
||||
//console.log(this.checkedUserIDList);
|
||||
//console.log(this.groupID);
|
||||
//console.log(this.muitple);
|
||||
//console.log(this.type);
|
||||
if (this.type === ContactChooseTypes.Invite) {
|
||||
this.allowGroup = false;
|
||||
this.checkDisabledUser();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkDisabledUser() {
|
||||
const friendIDList = this.storeFriendList.map((friend) => friend.userID);
|
||||
IMSDK.asyncApi("getUsersInGroup", IMSDK.uuid(), {
|
||||
groupID: this.groupID,
|
||||
userIDList: friendIDList,
|
||||
}).then(({data}) => {
|
||||
this.disabledUserIDList = data;
|
||||
});
|
||||
},
|
||||
tabChange(idx) {
|
||||
this.keyword = "";
|
||||
this.activeTab = idx;
|
||||
},
|
||||
updateCheckedUserOrGroup(item) {
|
||||
if (item.userID) {
|
||||
this.updateCheckedUser(item);
|
||||
}
|
||||
if (item.groupID) {
|
||||
this.updateCheckedGroup(item);
|
||||
}
|
||||
},
|
||||
updateCheckedGroup({groupID}) {
|
||||
if(!this.muitple){
|
||||
this.checkedGroupIDList = [groupID];
|
||||
this.confirm();
|
||||
}else{
|
||||
if (this.checkedGroupIDList.includes(groupID)) {
|
||||
const idx = this.checkedGroupIDList.findIndex((item) => item === groupID);
|
||||
const tmpArr = [...this.checkedGroupIDList];
|
||||
tmpArr.splice(idx, 1);
|
||||
this.checkedGroupIDList = [...tmpArr];
|
||||
} else {
|
||||
this.checkedGroupIDList = [...this.checkedGroupIDList, groupID];
|
||||
}
|
||||
}
|
||||
},
|
||||
updateCheckedUser({userID}) {
|
||||
if(!this.muitple){
|
||||
this.checkedUserIDList = [userID];
|
||||
this.confirm();
|
||||
}else{
|
||||
if (this.checkedUserIDList.includes(userID)) {
|
||||
const idx = this.checkedUserIDList.findIndex((item) => item === userID);
|
||||
const tmpArr = [...this.checkedUserIDList];
|
||||
tmpArr.splice(idx, 1);
|
||||
this.checkedUserIDList = [...tmpArr];
|
||||
} else {
|
||||
this.checkedUserIDList = [...this.checkedUserIDList, userID];
|
||||
}
|
||||
}
|
||||
},
|
||||
confirm() {
|
||||
//console.log(this.checkedUserIDList,this.checkedGroupIDList);
|
||||
//return false;
|
||||
// if (this.activeTab) {
|
||||
// this.activeTab = 0;
|
||||
// return;
|
||||
// }
|
||||
this.comfirmLoading = true;
|
||||
if (this.type === ContactChooseTypes.GetList || this.type === ContactChooseTypes.ShareCard) {
|
||||
try{
|
||||
let pages = getCurrentPages();
|
||||
let prevPage = pages[pages.length - 2];
|
||||
if(prevPage.$vm.getCheckedUsers){
|
||||
prevPage.$vm.getCheckedUsers(this.getCheckedUserInfo,this.getCheckedGroupInfo);
|
||||
}else{
|
||||
const eventChannel = this.getOpenerEventChannel();
|
||||
eventChannel.emit('onSelectedConfirm', this.getCheckedUserInfo,this.getCheckedGroupInfo);
|
||||
}
|
||||
}catch(e){
|
||||
|
||||
}
|
||||
this.comfirmLoading = false;
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.type === ContactChooseTypes.Invite) {
|
||||
IMSDK.asyncApi(IMSDK.IMMethods.InviteUserToGroup, IMSDK.uuid(), {
|
||||
groupID: this.groupID,
|
||||
reason: "",
|
||||
userIDList: this.getCheckedUserInfo.map((user) => user.userID),
|
||||
})
|
||||
.then(() => {
|
||||
toastWithCallback("操作成功", () => uni.navigateBack());
|
||||
this.comfirmLoading = false;
|
||||
})
|
||||
.catch(() => toastWithCallback("操作失败"));
|
||||
return;
|
||||
}
|
||||
|
||||
this.comfirmLoading = false;
|
||||
},
|
||||
},
|
||||
onBackPress() {
|
||||
if (this.activeTab) {
|
||||
this.activeTab = 0;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep.u-popup {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.contact_choose_container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.search_bar_wrap {
|
||||
height: 34px;
|
||||
padding: 12px 22px;
|
||||
}
|
||||
|
||||
.tab_container {
|
||||
@include colBox(false);
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.setting_item {
|
||||
padding: 32rpx 36rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
// padding: 16rpx 8rpx;
|
||||
background: #f8f9fa;
|
||||
color: #8e9ab0;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.tabs_bar {
|
||||
@include vCenterBox();
|
||||
justify-content: space-evenly;
|
||||
|
||||
.tab_item {
|
||||
@include colBox(false);
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab_pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.member_list {
|
||||
flex: 1;
|
||||
height: 80% !important;
|
||||
|
||||
::v-deepuni-scroll-view {
|
||||
max-height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user_list {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.member_anchor {
|
||||
background-color: #f8f8f8 !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -9,8 +9,14 @@
|
||||
<view class="tab_container">
|
||||
<template v-if="activeTab === 0">
|
||||
<setting-item @click="tabChange(tabs[0].idx)" :title="tabs[0].title" :border="false" />
|
||||
|
||||
<view class="tab_pane"></view>
|
||||
<view class="tab_pane">
|
||||
<user-item
|
||||
@updateCheck="updateCheckedUser"
|
||||
:checked="checkedUserIDList.includes(cell.userID)"
|
||||
:disabled="disabledUserIDList.includes(cell.userID)"
|
||||
:checkVisible="true"
|
||||
v-for="cell in storeConversationList" :item="cell" :key="cell.userID" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
@@ -21,7 +27,7 @@
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<choose-index-footer :comfirmLoading="comfirmLoading" @removeItem="updateCheckedUserOrGroup" @confirm="confirm"
|
||||
<choose-index-footer v-show="limit != 1" :comfirmLoading="comfirmLoading" @removeItem="updateCheckedUserOrGroup" @confirm="confirm"
|
||||
:choosedData="getCheckedInfo" />
|
||||
</view>
|
||||
</template>
|
||||
@@ -60,6 +66,7 @@
|
||||
title: "我的好友",
|
||||
},
|
||||
],
|
||||
limit:0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -99,16 +106,17 @@
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const {groupID,type,checkedUserIDList,} = options;
|
||||
console.log(this.storeFriendList);
|
||||
const {groupID,type,checkedUserIDList,limit} = options;
|
||||
//console.log(this.storeFriendList);
|
||||
this.type = type;
|
||||
this.groupID = groupID;
|
||||
this.checkedUserIDList = checkedUserIDList ?
|
||||
JSON.parse(checkedUserIDList) :
|
||||
[];
|
||||
this.checkedUserIDList = checkedUserIDList ? JSON.parse(checkedUserIDList) : [];
|
||||
if (this.type === ContactChooseTypes.Invite) {
|
||||
this.checkDisabledUser();
|
||||
}
|
||||
if(limit){
|
||||
this.limit = limit;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkDisabledUser() {
|
||||
@@ -131,16 +139,19 @@
|
||||
this.updateCheckedUser(item);
|
||||
}
|
||||
},
|
||||
updateCheckedUser({
|
||||
userID
|
||||
}) {
|
||||
if (this.checkedUserIDList.includes(userID)) {
|
||||
const idx = this.checkedUserIDList.findIndex((item) => item === userID);
|
||||
const tmpArr = [...this.checkedUserIDList];
|
||||
tmpArr.splice(idx, 1);
|
||||
this.checkedUserIDList = [...tmpArr];
|
||||
} else {
|
||||
this.checkedUserIDList = [...this.checkedUserIDList, userID];
|
||||
updateCheckedUser({userID}) {
|
||||
if(this.limit == 1){
|
||||
this.checkedUserIDList = [userID];
|
||||
this.confirm();
|
||||
}else{
|
||||
if (this.checkedUserIDList.includes(userID)) {
|
||||
const idx = this.checkedUserIDList.findIndex((item) => item === userID);
|
||||
const tmpArr = [...this.checkedUserIDList];
|
||||
tmpArr.splice(idx, 1);
|
||||
this.checkedUserIDList = [...tmpArr];
|
||||
} else {
|
||||
this.checkedUserIDList = [...this.checkedUserIDList, userID];
|
||||
}
|
||||
}
|
||||
},
|
||||
confirm() {
|
||||
@@ -215,7 +226,7 @@
|
||||
.title {
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
// padding: 16rpx 8rpx;
|
||||
background: #f8f9fa;
|
||||
|
||||
@@ -88,9 +88,7 @@ export default {
|
||||
(member) => member.userID,
|
||||
);
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/contactChoose/index?type=${
|
||||
ContactChooseTypes.GetList
|
||||
}&checkedUserIDList=${JSON.stringify(checkedIDList)}`,
|
||||
url: `/pages/common/contactChoose/index?type=${ContactChooseTypes.GetList}&checkedUserIDList=${JSON.stringify(checkedIDList)}`,
|
||||
});
|
||||
},
|
||||
complateCreate() {
|
||||
|
||||
@@ -109,6 +109,7 @@
|
||||
const info = JSON.parse(sourceInfo);
|
||||
this.sourceID = info.userID;
|
||||
}
|
||||
//console.log(this.storeSelfInfo);
|
||||
this.getSourceUserInfo();
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -86,7 +86,7 @@ export default {
|
||||
}
|
||||
|
||||
::v-deep .action_item {
|
||||
align-items: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.action_item:last-child {
|
||||
|
||||
@@ -3,10 +3,8 @@
|
||||
<view>
|
||||
<view class="chat_footer">
|
||||
<!-- 语音信息 -->
|
||||
<image v-if="1==2" v-show="!isAudio" @click.prevent="isAudio=!isAudio"
|
||||
src="@/static/images/chating_footer_audio.png" alt="" srcset="" />
|
||||
<image v-if="1==2" v-show="isAudio" @click.prevent="isAudio=!isAudio"
|
||||
src="@/static/images/chating_footer_audio_recording.png" alt="" srcset="" />
|
||||
<image v-if="1==2" v-show="!isAudio" @click.prevent="isAudio=!isAudio" src="@/static/images/chating_footer_audio.png" alt="" srcset="" />
|
||||
<image v-if="1==2" v-show="isAudio" @click.prevent="isAudio=!isAudio" src="@/static/images/chating_footer_audio_recording.png" alt="" srcset="" />
|
||||
<view class="input_content">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view v-if="isAudio" class="voice_title" @touchstart.stop.prevent="startVoice"
|
||||
@@ -20,14 +18,12 @@
|
||||
</view>
|
||||
|
||||
<view class="footer_action_area" v-show="!isAudio">
|
||||
<image class="emoji_action" @click.prevent="updateActionBar(true)"
|
||||
src="@/static/images/chating_footer_emoji.png" alt="" srcset="" />
|
||||
<image v-show="!hasContent" @click.prevent="updateActionBar"
|
||||
src="@/static/images/chating_footer_add.png" alt="" srcset="" />
|
||||
<image class="emoji_action" @click.prevent="updateActionBar(true)" src="@/static/images/chating_footer_emoji.png" alt="" srcset="" />
|
||||
<image v-show="!hasContent" @click.prevent="updateActionBar(false)" src="@/static/images/chating_footer_add.png" alt="" srcset="" />
|
||||
<button class="send_btn" type="primary" v-show="hasContent" @touchend.prevent="sendTextMessage">发送</button>
|
||||
</view>
|
||||
</view>
|
||||
<chating-action-bar :isEmoji="isEmoji" @sendMessage="sendMessage" @prepareMediaMessage="prepareMediaMessage"
|
||||
<chating-action-bar :isEmoji="isEmoji" @sendMessage="sendMessage($event,storeCurrentConversation.userID,storeCurrentConversation.groupID)" @prepareMediaMessage="prepareMediaMessage"
|
||||
v-show="actionBarVisible" />
|
||||
<u-action-sheet :safeAreaInsetBottom="true" round="12" :actions="actionSheetMenu" @select="selectClick"
|
||||
:closeOnClickOverlay="true" :closeOnClickAction="true" :show="showActionSheet"
|
||||
@@ -142,17 +138,17 @@
|
||||
async sendTextMessage() {
|
||||
if (!this.hasContent) return;
|
||||
const message = await this.createTextMessage();
|
||||
this.sendMessage(message);
|
||||
this.sendMessage(message,this.storeCurrentConversation.userID,this.storeCurrentConversation.groupID);
|
||||
},
|
||||
sendMessage(message) {
|
||||
sendMessage(message,user_id,group_id) {
|
||||
this.pushNewMessage(message);
|
||||
if (needClearTypes.includes(message.contentType)) {
|
||||
this.customEditorCtx.clear();
|
||||
}
|
||||
this.$emit("scrollToBottom");
|
||||
IMSDK.asyncApi(IMMethods.SendMessage, IMSDK.uuid(), {
|
||||
recvID: this.storeCurrentConversation.userID,
|
||||
groupID: this.storeCurrentConversation.groupID,
|
||||
recvID: user_id,
|
||||
groupID: group_id,
|
||||
message,
|
||||
offlinePushInfo,
|
||||
})
|
||||
@@ -289,7 +285,7 @@
|
||||
IMSDK.uuid(),
|
||||
getPurePath(path)
|
||||
);
|
||||
this.sendMessage(message);
|
||||
this.sendMessage(message,this.storeCurrentConversation.userID,this.storeCurrentConversation.groupID);
|
||||
});
|
||||
},
|
||||
selectClick({idx}) {
|
||||
|
||||
@@ -5,13 +5,18 @@
|
||||
upper-threshold="250" @scrolltoupper="scrolltoupper">
|
||||
<view id="scroll_wrap">
|
||||
<u-loadmore nomoreText="" :status="loadMoreStatus" />
|
||||
<view v-for="item in storeHistoryMessageList" :key="item.clientMsgID">
|
||||
<view class="msg_item" v-for="item in storeHistoryMessageList" :key="item.clientMsgID" @click="onUserMessageEvent({type:'selected'},item)">
|
||||
<template v-if="selectFlag">
|
||||
<uni-icons class="selectedIcon" size="30" color="#07c160" type="checkbox-filled" v-if="selectClientMsgIDItems.indexOf(item.clientMsgID)>-1"></uni-icons>
|
||||
<uni-icons class="selectedIcon" size="30" color="#ccc" type="circle" v-else></uni-icons>
|
||||
</template>
|
||||
<message-item-render
|
||||
@messageItemRender="messageItemRender"
|
||||
@longpress="onLongPressMessageItem(item)"
|
||||
@userEvent="onUserMessageEvent"
|
||||
:source="item"
|
||||
:isSender="item.sendID === storeCurrentUserID"
|
||||
/>
|
||||
<!-- :isActive="selectClientMsgIDItems.indexOf(item.clientMsgID)>-1" -->
|
||||
</view>
|
||||
<view style="visibility: hidden; height: 12px" id="auchormessage_bottom_item"></view>
|
||||
</view>
|
||||
@@ -19,10 +24,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters,
|
||||
mapActions
|
||||
} from "vuex";
|
||||
import {mapGetters,mapActions} from "vuex";
|
||||
import MessageItemRender from "./MessageItem/index.vue";
|
||||
|
||||
export default {
|
||||
@@ -30,7 +32,18 @@
|
||||
components: {
|
||||
MessageItemRender,
|
||||
},
|
||||
props: {},
|
||||
props: {
|
||||
selectFlag:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
selectItems:{
|
||||
type:Array,
|
||||
default(){
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollIntoView: "",
|
||||
@@ -45,7 +58,7 @@
|
||||
withAnimation: false,
|
||||
messageLoadState: {
|
||||
loading: false,
|
||||
},
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -62,6 +75,13 @@
|
||||
}
|
||||
return this.messageLoadState.loading ? "loading" : "loadmore";
|
||||
},
|
||||
selectClientMsgIDItems(){
|
||||
let arr = [];
|
||||
this.selectItems.forEach((v,k)=>{
|
||||
arr.push(v.clientMsgID);
|
||||
});
|
||||
return arr;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadMessageList();
|
||||
@@ -90,10 +110,7 @@
|
||||
viewType: 0,
|
||||
};
|
||||
try {
|
||||
const {
|
||||
emptyFlag
|
||||
} =
|
||||
await this.getHistoryMesageList(options);
|
||||
const {emptyFlag} =await this.getHistoryMesageList(options);
|
||||
if (emptyFlag) {
|
||||
this.$emit("initSuccess");
|
||||
}
|
||||
@@ -112,10 +129,7 @@
|
||||
this.$emit("click", e);
|
||||
},
|
||||
onScroll(event) {
|
||||
const {
|
||||
scrollHeight,
|
||||
scrollTop
|
||||
} = event.target;
|
||||
const {scrollHeight,scrollTop} = event.target;
|
||||
this.old.scrollTop = scrollTop
|
||||
this.needScoll =
|
||||
scrollHeight - scrollTop < uni.getWindowInfo().windowHeight * 1.2;
|
||||
@@ -162,9 +176,7 @@
|
||||
});
|
||||
},
|
||||
checkInitHeight() {
|
||||
this.getEl("#scroll_view").then(({
|
||||
height
|
||||
}) => {
|
||||
this.getEl("#scroll_view").then(({height}) => {
|
||||
this.bgHeight = `${height}px`;
|
||||
});
|
||||
},
|
||||
@@ -179,9 +191,10 @@
|
||||
.exec();
|
||||
});
|
||||
},
|
||||
onLongPressMessageItem(msg){
|
||||
|
||||
}
|
||||
onUserMessageEvent(e,data){
|
||||
this.$emit('userEvent',e,data)
|
||||
},
|
||||
empty(){}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -255,4 +268,16 @@
|
||||
.fade-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
.msg_item{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
.message_item{
|
||||
flex:1;
|
||||
}
|
||||
.selectedIcon{
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -15,7 +15,7 @@
|
||||
<image v-if="isFailedMessage && !isPreview" src="@/static/images/chating_message_failed.png" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="message_content_wrap message_content_wrap_shadow" @longtap="longtap($event)">
|
||||
<view class="message_content_wrap message_content_wrap_shadow" :id="`message_content_wrap_${source.clientMsgID}`" @longtap.stop.prevent="longtapEvent($event)">
|
||||
<text-message-render v-if="showTextRender" :message="source" />
|
||||
<media-message-render v-else-if="showMediaRender" :message="source" />
|
||||
<error-message-render v-else />
|
||||
@@ -26,11 +26,12 @@
|
||||
<!-- 长按菜单 -->
|
||||
<chunLei-popups v-model="toolTipFlag" :popData="toolTipData" @tapPopup="tapPopup"
|
||||
:x="toolTipX" :y="toolTipY" :placement="popPostion"
|
||||
:triangle="false"
|
||||
direction="row" theme="dark" :dynamic="true">
|
||||
</chunLei-popups>
|
||||
</view>
|
||||
|
||||
<view v-else class="notice_message_container" :id="`auchor${source.clientMsgID}`">
|
||||
<view v-else class="notice_message_container" style="margin: 0 auto;" :id="`auchor${source.clientMsgID}`">
|
||||
<text>{{ getNoticeContent }}</text>
|
||||
</view>
|
||||
</template>
|
||||
@@ -74,7 +75,6 @@
|
||||
toolTipFlag: false,
|
||||
popPostion:"default",
|
||||
toolTipData: [],
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -137,9 +137,17 @@
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
longtap(e){
|
||||
console.log(e.target,e.currentTarget);
|
||||
this.showToolTip(e);
|
||||
longtapEvent(e){
|
||||
console.log('longtapEvent');
|
||||
// console.log("#"+e.currentTarget.id,e);
|
||||
// let view = uni.createSelectorQuery().in(this).select("#"+e.currentTarget.id.replace('message_content_wrap_','auchor'));
|
||||
// console.log(e.touches[0].clientX,e.touches[0].clientY);
|
||||
// view.boundingClientRect((data) => {
|
||||
// console.log(data.left,data.top);
|
||||
// //console.log("得到布局位置信息" + JSON.stringify(data));
|
||||
// }).exec();
|
||||
this.$emit('userEvent',{type:"longtapMsgContent"},this.source);
|
||||
//this.showToolTip(e);
|
||||
},
|
||||
//操作项
|
||||
showToolTip: function(e) {
|
||||
@@ -158,11 +166,23 @@
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: '/static/images/chat/longTipIcon/tag.png',
|
||||
title: '编辑',
|
||||
id: 6,
|
||||
icon: '/static/images/chat/longTipIcon/select.png',
|
||||
title: '多选',
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
icon: '/static/images/chat/longTipIcon/delete.png',
|
||||
title: '删除',
|
||||
disabled: false
|
||||
},
|
||||
// {
|
||||
// id: 5,
|
||||
// icon: '/static/images/chat/longTipIcon/tag.png',
|
||||
// title: '编辑',
|
||||
// disabled: false
|
||||
// }
|
||||
];
|
||||
that.toolTipX =e.touches[0].clientX;
|
||||
that.toolTipY = e.touches[0].clientY-20;
|
||||
@@ -184,18 +204,19 @@
|
||||
tapPopup(e) {
|
||||
let that = this;
|
||||
let currentHandleMsg=that.source;
|
||||
console.log(currentHandleMsg);
|
||||
if (e.title == "撤回") {
|
||||
let editMessage=JSON.parse(JSON.stringify(currentHandleMsg));
|
||||
that.$emit("revertMsg",editMessage)
|
||||
that.toolTipFlag = false;
|
||||
that.$emit('userEvent',{type:'revokeMessage'},that.source);
|
||||
}
|
||||
if (e.title == "复制") {
|
||||
let content = currentHandleMsg.content;
|
||||
let content = currentHandleMsg.textElem?.content;
|
||||
if (content) {
|
||||
let copyContent =content.text;
|
||||
let formatStr = this.replaceReseverEmoji(copyContent);
|
||||
that.globalUtil.uniCopy({
|
||||
content: formatStr,
|
||||
let formatStr = copyContent;
|
||||
//let formatStr = this.replaceReseverEmoji(copyContent);
|
||||
uni.setClipboardData({
|
||||
data:formatStr,
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: res,
|
||||
@@ -215,15 +236,8 @@
|
||||
return;
|
||||
}
|
||||
if (e.title == "转发") {
|
||||
that.$emit('userEvent',{type:'forward'},that.source);
|
||||
that.toolTipFlag = false;
|
||||
/* that.$u.route({
|
||||
url: '/pages/chat/chatGroup/msgForward',
|
||||
params: {
|
||||
msgList:encodeURIComponent(JSON.stringify([currentHandleMsg])),
|
||||
sendType: 1, //1 单条转发 2多条转发
|
||||
fromChatGroupId: currentHandleMsg.groupId
|
||||
}
|
||||
}) */
|
||||
return
|
||||
}
|
||||
if(e.title=="调换"){
|
||||
@@ -231,24 +245,16 @@
|
||||
return;
|
||||
}
|
||||
if (e.title == "多选") {
|
||||
that.$emit('userEvent',{type:'select'},that.source);
|
||||
that.toolTipFlag = false;
|
||||
/* that.$u.route({
|
||||
url: '/pages/chat/chatting/chatting-checkbox',
|
||||
params: {
|
||||
groupId:currentHandleMsg.groupId,
|
||||
pageNum:1,
|
||||
selectMsgId: currentHandleMsg.id,
|
||||
}
|
||||
}) */
|
||||
return
|
||||
}
|
||||
if(e.title=="编辑"){
|
||||
let editMessage=JSON.parse(JSON.stringify(currentHandleMsg));
|
||||
editMessage.formatTimeStr=currentHandleMsg.createTime;
|
||||
that.$emit("showUpdateMsg",editMessage)
|
||||
if (e.title == "删除") {
|
||||
that.toolTipFlag = false;
|
||||
return;
|
||||
that.$emit('userEvent',{type:'deleteMsg'},that.source);
|
||||
return
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -289,7 +295,7 @@
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-left: 20rpx;
|
||||
// text-align: start;
|
||||
// text-align: flex-start;
|
||||
max-width: 80%;
|
||||
position: relative;
|
||||
|
||||
@@ -307,7 +313,7 @@
|
||||
}
|
||||
.message_content_wrap {
|
||||
@include vCenterBox();
|
||||
text-align: start;
|
||||
text-align: flex-start;
|
||||
// font-size: 14px;
|
||||
color: $uni-text-color;
|
||||
width: fit-content;
|
||||
@@ -316,7 +322,7 @@
|
||||
|
||||
.bg_container {
|
||||
padding: 16rpx 24rpx;
|
||||
border-radius: 0rpx 12rpx 12rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<view class="chat_footer">
|
||||
<uni-icons type="redo" size="30" color="#000" @click.prevent="forwardMsg"></uni-icons>
|
||||
<uni-icons type="trash" size="30" color="#000" @click.prevent="deleteMsg"></uni-icons>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
forwardMsg() {
|
||||
this.$emit('userEvent',{type:'forward'});
|
||||
},
|
||||
deleteMsg(e) {
|
||||
this.$emit('userEvent',{type:'deleteMsg'});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chat_footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
background: #f6f6f6;
|
||||
// height: 50px;
|
||||
max-height: 120px;
|
||||
padding: 24rpx 20rpx;
|
||||
image {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<u-navbar placeholder class="chating_header" bgColor="transparent">
|
||||
<view @click="leftClick" class="u-nav-slot" slot="left">
|
||||
取消
|
||||
</view>
|
||||
<view class="u-nav-slot" slot="center">
|
||||
<view class="chating_info">
|
||||
<view class="conversation_info">
|
||||
<view class="title">已选择{{ count }}条消息</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-nav-slot" slot="right">
|
||||
</view>
|
||||
</u-navbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SelectHeader",
|
||||
props: {
|
||||
count:{
|
||||
type:Number,
|
||||
default(){
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
leftClick(e) {
|
||||
this.$emit("leftClick", e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chating_header {
|
||||
border: 2rpx solid #e1e1e1;
|
||||
.u-nav-slot {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.chating_info {
|
||||
@include vCenterBox();
|
||||
flex-direction: column;
|
||||
.conversation_info {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
@include vCenterBox();
|
||||
|
||||
.title {
|
||||
@include nomalEllipsis();
|
||||
max-width: 280rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,32 +1,40 @@
|
||||
<template>
|
||||
<view class="chating_container">
|
||||
<chating-header @click="pageClick" ref="chatingHeaderRef" />
|
||||
<chating-list @click="pageClick" ref="chatingListRef" @initSuccess="initSuccess" />
|
||||
<chating-footer ref="chatingFooterRef" :footerOutsideFlag="footerOutsideFlag"
|
||||
<SelectHeader v-if="selectFlag" :count="selectItems.length" @leftClick="onUserMessageEvent({type:'cancelSelect'})" ref="selectHeaderRef" />
|
||||
<chating-header v-else @click="pageClick" ref="chatingHeaderRef" />
|
||||
<chating-list
|
||||
@userEvent="onUserMessageEvent"
|
||||
@click="pageClick"
|
||||
:selectItems="selectItems"
|
||||
:selectFlag="selectFlag"
|
||||
ref="chatingListRef"
|
||||
@initSuccess="initSuccess" />
|
||||
<SelectFooter v-if="selectFlag" ref="selectFooterRef" @userEvent="onUserMessageEvent" />
|
||||
<chating-footer v-else ref="chatingFooterRef" :footerOutsideFlag="footerOutsideFlag"
|
||||
@scrollToBottom="scrollToBottom" />
|
||||
<u-loading-page :loading="initLoading"></u-loading-page>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapActions
|
||||
} from "vuex";
|
||||
import {
|
||||
PageEvents,
|
||||
} from "@/constant";
|
||||
import {mapActions,mapGetters} from "vuex";
|
||||
import {offlinePushInfo} from "@/util/imCommon";
|
||||
import {PageEvents,ContactChooseTypes} from "@/constant";
|
||||
import ChatingHeader from "./components/ChatingHeader.vue";
|
||||
import ChatingFooter from "./components/ChatingFooter/index.vue";
|
||||
import ChatingList from "./components/ChatingList.vue";
|
||||
import {
|
||||
markConversationAsRead
|
||||
} from "@/util/imCommon";
|
||||
import SelectHeader from "./components/SelectHeader.vue";
|
||||
import SelectFooter from "./components/SelectFooter.vue";
|
||||
import {markConversationAsRead} from "@/util/imCommon";
|
||||
import IMSDK,{MessageType} from "openim-uniapp-polyfill";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ChatingHeader,
|
||||
ChatingFooter,
|
||||
ChatingList,
|
||||
SelectHeader,
|
||||
SelectFooter
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -34,17 +42,26 @@
|
||||
footerOutsideFlag: 0,
|
||||
initLoading: true,
|
||||
back2Tab: false,
|
||||
selectFlag:false,
|
||||
selectItems:[],
|
||||
forwardItems:[],
|
||||
forwardMerge:false
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
...mapGetters([
|
||||
"storeCurrentConversation",
|
||||
]),
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log("onload");
|
||||
//console.log("onload");
|
||||
this.setPageListener();
|
||||
if (options?.back2Tab) {
|
||||
this.back2Tab = JSON.parse(options.back2Tab);
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
console.log("unload");
|
||||
//console.log("unload");
|
||||
this.disposePageListener();
|
||||
markConversationAsRead({
|
||||
...this.$store.getters.storeCurrentConversation,
|
||||
@@ -55,7 +72,7 @@
|
||||
this.resetMessageState();
|
||||
},
|
||||
methods: {
|
||||
...mapActions("message", ["resetMessageState", "deleteMessages"]),
|
||||
...mapActions("message", ["resetMessageState", "deleteMessages","pushNewMessage", "updateOneMessage"]),
|
||||
...mapActions("conversation", ["resetConversationState"]),
|
||||
scrollToBottom(isRecv = false) {
|
||||
this.$refs.chatingListRef.scrollToBottom(false, isRecv);
|
||||
@@ -64,7 +81,6 @@
|
||||
this.footerOutsideFlag += 1;
|
||||
},
|
||||
initSuccess() {
|
||||
console.log("initSuccess");
|
||||
this.initLoading = false;
|
||||
},
|
||||
|
||||
@@ -75,6 +91,236 @@
|
||||
disposePageListener() {
|
||||
uni.$off(PageEvents.ScrollToBottom, this.scrollToBottom);
|
||||
},
|
||||
//选择会话列表的回调
|
||||
async onForwardTargetSelected(userList,groupList){
|
||||
const _this = this;
|
||||
//console.log(userList,groupList);
|
||||
if(this.forwardItems.length === 0){
|
||||
return false;
|
||||
}
|
||||
if(this.forwardMerge && this.forwardItems.length>1){
|
||||
const res = await IMSDK.asyncApi(IMSDK.IMMethods.CreateMergerMessage, IMSDK.uuid(), {
|
||||
messageList: _this.forwardItems,
|
||||
title: "转发的消息",
|
||||
summaryList: ["summaryList","summaryList"]
|
||||
});
|
||||
//console.log(res );
|
||||
if(res){
|
||||
await _this.doForwarMsg(userList,groupList,res);
|
||||
}
|
||||
}else{
|
||||
for (var mi = 0; mi < this.forwardItems.length; mi++) {
|
||||
var msg = this.forwardItems[mi];
|
||||
const res = await IMSDK.asyncApi(IMSDK.IMMethods.CreateForwardMessage, IMSDK.uuid(), msg);
|
||||
//console.log(res );
|
||||
if(res){
|
||||
await _this.doForwarMsg(userList,groupList,res);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.onUserMessageEvent({type:'cancelSelect'});
|
||||
},
|
||||
async doForwarMsg(userList,groupList,msgiem)
|
||||
{
|
||||
//console.log(userList,groupList);
|
||||
const _this = this;
|
||||
for (var i = 0; i < userList.length; i++) {
|
||||
this.sendMessage(msgiem,userList[i].userID,"");
|
||||
}
|
||||
for (var i = 0; i < groupList.length; i++) {
|
||||
this.sendMessage(msgiem,"",groupList[i].groupID);
|
||||
}
|
||||
},
|
||||
sendMessage(message,user_id,group_id) {
|
||||
//this.scrollToBottom();
|
||||
//console.log(message);
|
||||
//console.log(user_id,group_id);
|
||||
IMSDK.asyncApi(IMSDK.IMMethods.SendMessage, IMSDK.uuid(), {
|
||||
recvID: user_id,
|
||||
groupID: group_id,
|
||||
message,
|
||||
offlinePushInfo,
|
||||
})
|
||||
.then(({data}) => {
|
||||
console.log(data);
|
||||
this.pushNewMessage(message);
|
||||
})
|
||||
.catch((res={data,errCode,errMsg}) => {
|
||||
console.log(res);
|
||||
uni.$u.toast(errMsg);
|
||||
});
|
||||
},
|
||||
onUserMessageEvent(e,data){
|
||||
const _this = this;
|
||||
if(e.type == 'select'){
|
||||
this.selectFlag = true;
|
||||
this.selectItems = [data];
|
||||
this.$refs.chatingListRef.scrollToAnchor(`auchor${data.clientMsgID}`);
|
||||
return ;
|
||||
}
|
||||
if(e.type == 'cancelSelect'){
|
||||
this.selectFlag = false;
|
||||
this.selectItems = [];
|
||||
return ;
|
||||
}
|
||||
if(e.type == 'selected'){
|
||||
if(this.selectFlag == true){
|
||||
let founded = false;
|
||||
let arr = [];
|
||||
for (var index = 0; index < this.selectItems.length; index++) {
|
||||
var v = this.selectItems[index];
|
||||
if(v.clientMsgID == data.clientMsgID){
|
||||
founded = true;
|
||||
}else{
|
||||
arr.push(v);
|
||||
}
|
||||
}
|
||||
if(!founded){
|
||||
arr.push(data);
|
||||
}
|
||||
console.log(arr.length);
|
||||
this.selectItems = [...arr];
|
||||
}
|
||||
return ;
|
||||
}
|
||||
if(e.type == 'deleteMsg'){
|
||||
let deleteMsgs = [];
|
||||
if(!data){
|
||||
deleteMsgs = [...this.selectItems];
|
||||
}else{
|
||||
deleteMsgs = [{...data}];
|
||||
}
|
||||
for (let i = 0; i < deleteMsgs.length; i++) {
|
||||
let element = deleteMsgs[i];
|
||||
IMSDK.asyncApi('deleteMessageFromLocalStorage',IMSDK.uuid(), {
|
||||
conversationID: _this.storeCurrentConversation.conversationID,
|
||||
clientMsgID: element.clientMsgID
|
||||
}).then(res=>{
|
||||
//console.log(res);
|
||||
}).catch(res=>{
|
||||
//console.log(res);
|
||||
}).finally(()=>{
|
||||
//console.log(arguments);
|
||||
})
|
||||
}
|
||||
this.selectItems = [];
|
||||
this.$refs.chatingListRef.loadMessageList();
|
||||
return ;
|
||||
}
|
||||
if(e.type == 'forward'){
|
||||
if(!data){
|
||||
this.forwardItems = [...this.selectItems];
|
||||
let menu = ['逐条转发','合并转发'];
|
||||
uni.showActionSheet({
|
||||
itemList:menu,
|
||||
success({tapIndex}){
|
||||
if(menu[tapIndex] == '逐条转发'){
|
||||
this.forwardMerge = false;
|
||||
}
|
||||
if(menu[tapIndex] == '合并转发'){
|
||||
this.forwardMerge = true;
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/contactChoose/choose?type=${ContactChooseTypes.GetList}&checkedUserIDList=[]`,
|
||||
events:{
|
||||
onSelectedConfirm(userList,groupList){
|
||||
//console.log(userList,groupList);
|
||||
_this.onForwardTargetSelected(userList,groupList)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}else{
|
||||
this.forwardItems = [{...data}];
|
||||
this.forwardMerge = false;
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/contactChoose/choose?type=${ContactChooseTypes.GetList}&checkedUserIDList=[]`,
|
||||
events:{
|
||||
onSelectedConfirm(userList,groupList){
|
||||
//console.log(userList,groupList);
|
||||
_this.onForwardTargetSelected(userList,groupList)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
return ;
|
||||
}
|
||||
if(e.type == 'revokeMessage'){
|
||||
IMSDK.asyncApi('revokeMessage', IMSDK.uuid(), {
|
||||
conversationID: _this.storeCurrentConversation.conversationID,
|
||||
clientMsgID: data.clientMsgID
|
||||
}).then(res=>{
|
||||
console.log(res);
|
||||
}).catch(res=>{
|
||||
console.log(res);
|
||||
}).finally(()=>{
|
||||
console.log(arguments);
|
||||
})
|
||||
return ;
|
||||
}
|
||||
|
||||
if(e.type == 'longtapMsgContent'){
|
||||
let menu = [];
|
||||
if(data.contentType == MessageType.TextMessage){
|
||||
menu.push('复制')
|
||||
}
|
||||
menu.push('转发');
|
||||
menu.push('多选');
|
||||
menu.push('删除');
|
||||
let nowTime=new Date().getTime();
|
||||
let msgTime=data.createTime;
|
||||
let diff= nowTime-msgTime;
|
||||
if(this.isSender&&diff<120000){
|
||||
menu.push('撤回')
|
||||
}
|
||||
uni.showActionSheet({
|
||||
itemList:menu,
|
||||
success({tapIndex}){
|
||||
const title = menu[tapIndex];
|
||||
switch (title) {
|
||||
case "撤回":
|
||||
_this.onUserMessageEvent({type:'revokeMessage'},data);
|
||||
break;
|
||||
case "复制":
|
||||
let content = data.textElem?.content;
|
||||
if (content) {
|
||||
//let formatStr = this.replaceReseverEmoji(copyContent);
|
||||
uni.setClipboardData({
|
||||
data:content,
|
||||
success: (res) => {
|
||||
uni.showToast({
|
||||
title: res,
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
error: (e) => {
|
||||
uni.showToast({
|
||||
title: e,
|
||||
icon: 'none',
|
||||
duration: 3000,
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
break;
|
||||
case "转发":
|
||||
_this.onUserMessageEvent({type:'forward'},data);
|
||||
break;
|
||||
case "多选":
|
||||
_this.onUserMessageEvent({type:'select'},data);
|
||||
break;
|
||||
case "删除":
|
||||
_this.onUserMessageEvent({type:'deleteMsg'},data);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
})
|
||||
return ;
|
||||
}
|
||||
}
|
||||
},
|
||||
onBackPress() {
|
||||
uni.switchTab({
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
backgroundColor="transparent"
|
||||
>
|
||||
<template #right>
|
||||
<uni-icons type="plus" size="26" class="more_icon"></uni-icons>
|
||||
<uni-icons @click="showMore" type="plus" size="26" class="more_icon"></uni-icons>
|
||||
</template>
|
||||
</uni-nav-bar>
|
||||
<view class="right_action">
|
||||
@@ -147,7 +147,7 @@
|
||||
break;
|
||||
case 'addFriend':
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/searchUserOrGroup/index?isSearchGroup=${idx === 2}`,
|
||||
url: `/pages/common/searchUserOrGroup/index?isSearchGroup=false`,
|
||||
});
|
||||
break;
|
||||
case 'scan':
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<view @tap.prevent="clickConversationItem" :class="['conversation_item',source.isPinned?'pinned' : '']">
|
||||
<view @longtap.prevent="longtapConversationItem" @tap.prevent="clickConversationItem" :class="['conversation_item',source.isPinned?'pinned' : '']">
|
||||
<view class="left_info">
|
||||
<my-avatar :isGroup="isGroup" :isNotify="isNotify" :src="source.faceURL" :desc="source.showName"
|
||||
size="46" />
|
||||
<my-avatar :isGroup="isGroup" :isNotify="isNotify" :src="source.faceURL" :desc="source.showName" size="46" />
|
||||
<view class="details">
|
||||
<view class="title">
|
||||
<text class="conversation_name">
|
||||
@@ -38,9 +37,6 @@
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
console.log(this.source)
|
||||
},
|
||||
computed: {
|
||||
latestMessage() {
|
||||
if (this.source.latestMsg === "") return "";
|
||||
@@ -71,6 +67,10 @@
|
||||
//console.log(this.source);
|
||||
prepareConversationState(this.source);
|
||||
},
|
||||
longtapConversationItem() {
|
||||
//console.log(this.source);
|
||||
this.$emit('longtapEvent',this.source);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -78,9 +78,17 @@
|
||||
<style lang="scss" scoped>
|
||||
.conversation_item {
|
||||
@include btwBox();
|
||||
flex-direction: row;
|
||||
padding: 12rpx 44rpx 20rpx;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: " ";
|
||||
border-bottom: 1px solid #eee;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 140rpx;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
&.pinned{
|
||||
background-color: #ededed;
|
||||
}
|
||||
@@ -91,6 +99,9 @@
|
||||
|
||||
.left_info {
|
||||
@include btwBox();
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 12rpx 44rpx 20rpx;
|
||||
flex:1;
|
||||
|
||||
.details {
|
||||
@@ -99,7 +110,6 @@
|
||||
margin-left: 24rpx;
|
||||
height: 46px;
|
||||
color: $uni-text-color;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom:20rpx;
|
||||
.title{
|
||||
@include btwBox();
|
||||
|
||||
@@ -4,8 +4,11 @@
|
||||
<scroll-view class="scroll-view" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
|
||||
:scroll-top="scrollTop" :scroll-with-animation="true" @scroll="scroll" @refresherrefresh="onRefresh"
|
||||
@refresherrestore="onRestore" @scrolltolower="scrolltolower">
|
||||
<conversation-item v-for="item in storeConversationList" :key="item.conversationID" :source="item"
|
||||
ref="conversationItem" />
|
||||
<uni-swipe-action ref="swipe_action">
|
||||
<uni-swipe-action-item :right-options="swipe_actions" @click="actionClick($event,item)" v-for="item in storeConversationList" :key="item.conversationID" >
|
||||
<conversation-item @longtapEvent="showExtendMenu(item)" :source="item"/>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
</scroll-view>
|
||||
<view class="loading_wrap" v-if="storeProgress > 0 && storeProgress < 100">
|
||||
<u-loading-icon :vertical="true" :text="storeProgress + '%'"></u-loading-icon>
|
||||
@@ -14,9 +17,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {mapGetters} from "vuex";
|
||||
import IMSDK from "openim-uniapp-polyfill";
|
||||
import ChatHeader from "./components/ChatHeader.vue";
|
||||
import ConversationItem from "./components/ConversationItem.vue";
|
||||
|
||||
@@ -31,7 +33,26 @@
|
||||
old: {
|
||||
scrollTop: 0,
|
||||
},
|
||||
doubleClick: 0,
|
||||
swipe_actions: [
|
||||
{
|
||||
text: '取消',
|
||||
style: {
|
||||
backgroundColor: '#1184ed'
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '隐藏',
|
||||
style: {
|
||||
backgroundColor: '#fa9d3a'
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#f85050'
|
||||
}
|
||||
}
|
||||
],
|
||||
triggered: false,
|
||||
refreshing: false,
|
||||
};
|
||||
@@ -40,13 +61,101 @@
|
||||
...mapGetters(["storeConversationList", "storeIsSyncing", "storeProgress"]),
|
||||
},
|
||||
onReady() {
|
||||
// #ifdef APP
|
||||
this.$nextTick(() => plus.navigator.closeSplashscreen());
|
||||
// #endif
|
||||
},
|
||||
onLoad() {
|
||||
//console.log(this.storeConversationList);
|
||||
this._freshing = false;
|
||||
this.triggered = true;
|
||||
setTimeout(()=>{
|
||||
uni.navigateTo({
|
||||
url:'/pages/workbench/friend-circle/friend-circle',
|
||||
})
|
||||
},1000)
|
||||
},
|
||||
methods: {
|
||||
test(){
|
||||
console.log(11);
|
||||
},
|
||||
showExtendMenu(item){
|
||||
const _this = this;
|
||||
const menu = [item.recvMsgOpt===0 ? '关闭免打扰':'免打扰',item.isPrivateChat? '关闭阅后即焚':'开启阅后即焚','隐藏',item.isPinned ? '取消置顶':'置顶','删除'];
|
||||
uni.showActionSheet({
|
||||
itemList:menu,
|
||||
success(e) {
|
||||
switch(menu[e.tapIndex]){
|
||||
case '免打扰':
|
||||
IMSDK.asyncApi('setConversation', IMSDK.uuid(), {
|
||||
conversationID: conversationId,
|
||||
recvMsgOpt: 2
|
||||
})
|
||||
break;
|
||||
case '关闭免打扰':
|
||||
IMSDK.asyncApi('setConversation', IMSDK.uuid(), {
|
||||
conversationID: conversationId,
|
||||
recvMsgOpt: 0
|
||||
})
|
||||
break;
|
||||
case '开启阅后即焚':
|
||||
IMSDK.asyncApi('setConversation', IMSDK.uuid(), {
|
||||
conversationID: conversationId,
|
||||
isPrivateChat: true,
|
||||
burnDuration:60
|
||||
})
|
||||
break;
|
||||
case '关闭阅后即焚':
|
||||
IMSDK.asyncApi('setConversation', IMSDK.uuid(), {
|
||||
conversationID: conversationId,
|
||||
isPrivateChat: false
|
||||
})
|
||||
break;
|
||||
case '隐藏':
|
||||
IMSDK.asyncApi('hideConversation', IMSDK.uuid(), item.conversationID)
|
||||
break;
|
||||
case '置顶':
|
||||
_this.setPinConversation(item.conversationID,true);
|
||||
break;
|
||||
case '取消置顶':
|
||||
_this.setPinConversation(item.conversationID,false);
|
||||
break;
|
||||
case '删除':
|
||||
_this.deleteConversation(item.conversationID);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
actionClick(e,item){
|
||||
const _this = this;
|
||||
this.$refs.swipe_action.closeAll();
|
||||
switch(e.index){
|
||||
case 0:
|
||||
break;
|
||||
case 1:
|
||||
IMSDK.asyncApi('hideConversation', IMSDK.uuid(), item.conversationID)
|
||||
break;
|
||||
case 2:
|
||||
_this.deleteConversation(item.conversationID);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
deleteConversation(conversationID){
|
||||
IMSDK.asyncApi(IMSDK.IMMethods.DeleteConversationAndDeleteAllMsg, IMSDK.uuid(), conversationID).then(res=>{
|
||||
console.log('删除成功');
|
||||
}).catch(e=>{
|
||||
|
||||
})
|
||||
},
|
||||
setPinConversation(conversationId,status){
|
||||
IMSDK.asyncApi('setConversation', IMSDK.uuid(), {
|
||||
conversationID: conversationId,
|
||||
isPinned: status
|
||||
})
|
||||
},
|
||||
|
||||
scroll(e) {
|
||||
this.old.scrollTop = e.detail.scrollTop;
|
||||
},
|
||||
@@ -63,10 +172,7 @@
|
||||
this.queryList();
|
||||
},
|
||||
async queryList(isFirstPage = false) {
|
||||
await this.$store.dispatch(
|
||||
"conversation/getConversationList",
|
||||
isFirstPage
|
||||
);
|
||||
await this.$store.dispatch("conversation/getConversationList",isFirstPage);
|
||||
this.triggered = false;
|
||||
this._freshing = false;
|
||||
},
|
||||
|
||||
@@ -1,57 +1,87 @@
|
||||
<template>
|
||||
<view class="group_settings_container">
|
||||
<custom-nav-bar title="群管理" />
|
||||
<view class="setting_row">
|
||||
<setting-item
|
||||
@click="toTransfer"
|
||||
title="群主管理权转让"
|
||||
:border="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group_settings_container">
|
||||
<u-navbar :autoBack="true" bgColor="#ECECEC" title="群管理" safeAreaInsetTop placeholder fixed></u-navbar>
|
||||
<uni-list>
|
||||
<uni-list-item title="群主管理权转让" @click="toTransfer" showArrow clickable></uni-list-item>
|
||||
<uni-list-item title="进群验证" @switchChange="updateGroupInfo('needVerification',storeCurrentGroup.needVerification==1 ? 2: 1)" showSwitch :switchChecked="!(storeCurrentGroup.needVerification != 1)"></uni-list-item>
|
||||
<uni-list-item title="允许查看成员资料" @switchChange="updateGroupInfo('lookMemberInfo',storeCurrentGroup.applyMemberFriend == 1 ? 0 : 1)" showSwitch :switchChecked="storeCurrentGroup.applyMemberFriend==0"></uni-list-item>
|
||||
<uni-list-item title="允许群内添加好友" @switchChange="updateGroupInfo('applyMemberFriend',storeCurrentGroup.applyMemberFriend == 1 ? 0 : 1)" showSwitch :switchChecked="storeCurrentGroup.applyMemberFriend==0"></uni-list-item>
|
||||
<uni-list-item :title="isMute ? '解除禁言':'全员禁言'" @switchChange="updateMute" showSwitch :switchChecked="isMute"></uni-list-item>
|
||||
|
||||
</uni-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import { GroupMemberListTypes } from "@/constant";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import SettingItem from "@/components/SettingItem/index.vue";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
SettingItem,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeCurrentConversation",
|
||||
"storeCurrentMemberInGroup",
|
||||
"storeCurrentGroup",
|
||||
]),
|
||||
},
|
||||
methods: {
|
||||
toTransfer() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.Transfer}&groupID=${this.storeCurrentGroup.groupID}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
import {mapGetters} from "vuex";
|
||||
import IMSDK, {
|
||||
GroupMemberRole,
|
||||
GroupStatus,
|
||||
GroupVerificationType,
|
||||
IMMethods,
|
||||
MessageReceiveOptType,
|
||||
} from "openim-uniapp-polyfill";
|
||||
import {GroupMemberListTypes} from "@/constant";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isMute:false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeCurrentConversation",
|
||||
"storeCurrentMemberInGroup",
|
||||
"storeCurrentGroup",
|
||||
]),
|
||||
},
|
||||
onLoad() {
|
||||
// IMSDK.asyncApi('getSpecifiedGroupsInfo', IMSDK.uuid(), [this.storeCurrentGroup.groupID]).then(res=>{
|
||||
// console.log(res);
|
||||
// }).catch(e=>{
|
||||
// console.log(e);
|
||||
// })
|
||||
},
|
||||
methods: {
|
||||
toTransfer() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/conversation/groupMemberList/index?type=${GroupMemberListTypes.Transfer}&groupID=${this.storeCurrentGroup.groupID}`,
|
||||
});
|
||||
},
|
||||
updateMute(){
|
||||
IMSDK.asyncApi('changeGroupMute', IMSDK.uuid(), {
|
||||
groupID: this.storeCurrentGroup.groupID,
|
||||
isMute: this.isMute
|
||||
}).then(res=>{
|
||||
console.log(res);
|
||||
}).catch(e=>{
|
||||
console.log(e);
|
||||
})
|
||||
},
|
||||
updateGroupInfo(field,value1){
|
||||
const data = {groupID:this.storeCurrentGroup.groupID};
|
||||
data[field] = value1;
|
||||
IMSDK.asyncApi('setGroupInfo', IMSDK.uuid(),data).then(res=>{
|
||||
console.log(res);
|
||||
}).catch(e=>{
|
||||
console.log(e);
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group_settings_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
.group_settings_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.setting_row {
|
||||
background-color: #fff;
|
||||
margin: 24rpx 24rpx 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.setting_row {
|
||||
background-color: #fff;
|
||||
margin: 24rpx 24rpx 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view style="display: flex;flex-direction: column;width: 100vw;height: 100vh;">
|
||||
<u-navbar
|
||||
:autoBack="true"
|
||||
title="群公告"
|
||||
safeAreaInsetTop
|
||||
placeholder
|
||||
fixed
|
||||
>
|
||||
<view class="u-nav-slot" slot="right" v-if="isOwner || isAdmin">
|
||||
<u-button type="primary" size="mini" @click="save">确定</u-button>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<u--textarea :disabled="!isOwner && !isAdmin" count confirmType="done" focus autoHeight maxlength="-1" border="none" v-model="announcement"></u--textarea >
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from "vuex";
|
||||
import IMSDK,{GroupMemberRole,} from "openim-uniapp-polyfill";
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeCurrentConversation",
|
||||
"storeCurrentMemberInGroup",
|
||||
"storeCurrentGroup",
|
||||
]),
|
||||
isOwner() {
|
||||
return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Owner;
|
||||
},
|
||||
isAdmin() {
|
||||
return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Admin;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
announcement:"",
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.announcement = this.storeCurrentGroup.notification;
|
||||
},
|
||||
methods: {
|
||||
back(){
|
||||
uni.navigateBack();
|
||||
},
|
||||
save(){
|
||||
if(!isOwner && !isAdmin){
|
||||
return ;
|
||||
}
|
||||
IMSDK.asyncApi(IMSDK.IMMethods.SetGroupInfo, IMSDK.uuid(), {
|
||||
groupID: this.storeCurrentGroup.groupID,
|
||||
notification: this.announcement
|
||||
}).then(res=>{
|
||||
console.log(res);
|
||||
uni.navigateBack();
|
||||
}).catch(e=>{
|
||||
console.log(e);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<view @click="toMemberList" class="member_row">
|
||||
<!-- <view class="member_title">
|
||||
<text>群成员</text>
|
||||
<view class="member_desc">
|
||||
<text>{{ `${memberCount}人` }}</text>
|
||||
<u-icon name="arrow-right" color="#999" size="16" />
|
||||
</view>
|
||||
</view> -->
|
||||
<text>群成员</text>
|
||||
<view class="member_desc">
|
||||
<text>{{ `${memberCount}人` }}</text>
|
||||
<u-icon name="arrow-right" color="#999" size="16" />
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="member_list">
|
||||
<view class="member_item" v-for="(member, index) in groupMemberList">
|
||||
<my-avatar :src="member.faceURL" :desc="member.nickname" :key="member.userID" size="48" />
|
||||
@@ -34,18 +34,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import IMSDK, {
|
||||
GroupMemberRole
|
||||
} from "openim-uniapp-polyfill";
|
||||
import {mapGetters} from "vuex";
|
||||
import IMSDK, {GroupMemberRole} from "openim-uniapp-polyfill";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import SettingItem from "@/components/SettingItem/index.vue";
|
||||
import {
|
||||
ContactChooseTypes,
|
||||
GroupMemberListTypes
|
||||
} from "@/constant";
|
||||
import {ContactChooseTypes,GroupMemberListTypes} from "@/constant";
|
||||
export default {
|
||||
name: "",
|
||||
components: {
|
||||
@@ -82,7 +75,7 @@
|
||||
},
|
||||
inviteMember() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/contactChoose/index?type=${ContactChooseTypes.Invite}&groupID=${this.groupID}`,
|
||||
url: `/pages/common/contactChoose/choose?type=${ContactChooseTypes.Invite}&groupID=${this.groupID}`,
|
||||
});
|
||||
},
|
||||
kickMember() {
|
||||
@@ -98,7 +91,7 @@
|
||||
.member_row {
|
||||
@include colBox(false);
|
||||
padding: 36rpx 36rpx 0;
|
||||
margin: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
background-color: #fff;
|
||||
color: $uni-text-color;
|
||||
border-radius: 6px;
|
||||
@@ -154,7 +147,7 @@
|
||||
.more {
|
||||
@include btwBox();
|
||||
margin-top: 20rpx;
|
||||
padding: 20rpx 0rpx 20rpx;
|
||||
padding: 30rpx 0rpx 30rpx;
|
||||
border-top: 1px solid rgba(153, 153, 153, 0.2);
|
||||
|
||||
.more_right {
|
||||
|
||||
@@ -1,357 +1,422 @@
|
||||
<template>
|
||||
<view class="group_settings_container">
|
||||
<custom-nav-bar title="群聊设置" />
|
||||
<view class="group_settings_content">
|
||||
<view class="setting_row info_row">
|
||||
<view class="group_avatar" @click="updateGroupAvatar">
|
||||
<my-avatar
|
||||
:src="storeCurrentConversation.faceURL"
|
||||
:isGroup="true"
|
||||
size="46"
|
||||
/>
|
||||
<image
|
||||
v-if="isOwner"
|
||||
class="edit_icon"
|
||||
src="@/static/images/group_setting_edit.png"
|
||||
alt=""
|
||||
/>
|
||||
</view>
|
||||
<view class="group_info">
|
||||
<view class="group_info_name">
|
||||
<text class="group_name">{{ storeCurrentConversation.showName }}({{storeCurrentGroup.memberCount}})</text>
|
||||
<image
|
||||
v-if="isOwner || isAdmin"
|
||||
@click="toUpdateGroupName"
|
||||
style="width: 24rpx; height: 24rpx"
|
||||
src="@/static/images/group_edit.png"
|
||||
alt=""
|
||||
/>
|
||||
</view>
|
||||
<view class="group_settings_container">
|
||||
<u-navbar :autoBack="true" bgColor="#ECECEC" :title="'群聊设置('+storeCurrentGroup.memberCount+')'" safeAreaInsetTop placeholder fixed></u-navbar>
|
||||
|
||||
<text @click="copyGroupID" class="sub_title">{{
|
||||
storeCurrentConversation.groupID
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group_settings_content">
|
||||
<view class="setting_row info_row" v-if="1==2">
|
||||
<view class="group_avatar" @click="updateGroupAvatar">
|
||||
<my-avatar :src="storeCurrentConversation.faceURL" :isGroup="true" size="46" />
|
||||
<image v-if="isOwner" class="edit_icon" src="@/static/images/group_setting_edit.png" alt="" />
|
||||
</view>
|
||||
<view class="group_info">
|
||||
<view class="group_info_name">
|
||||
<text class="group_name">{{ storeCurrentConversation.showName }}({{storeCurrentGroup.memberCount}})</text>
|
||||
<image v-if="isOwner || isAdmin" @click="toUpdateGroupName" style="width: 24rpx; height: 24rpx" src="@/static/images/group_edit.png" alt="" />
|
||||
</view>
|
||||
|
||||
<group-member-row
|
||||
v-if="isJoinGroup"
|
||||
:isNomal="!isAdmin && !isOwner"
|
||||
:groupID="storeCurrentConversation.groupID"
|
||||
:memberCount="storeCurrentGroup.memberCount"
|
||||
:groupMemberList="groupMemberList"
|
||||
/>
|
||||
<view v-if="isJoinGroup" class="setting_row">
|
||||
<setting-item
|
||||
v-if="isOwner || isAdmin"
|
||||
@click="toGroupManage"
|
||||
title="群管理"
|
||||
:border="false"
|
||||
/>
|
||||
</view>
|
||||
<text @click="copyGroupID" class="sub_title">{{storeCurrentConversation.groupID}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="setting_row">
|
||||
<setting-item
|
||||
v-if="isJoinGroup"
|
||||
danger
|
||||
@click="() => (confirmType = isOwner ? 'Dismiss' : 'Quit')"
|
||||
:title="isOwner ? '解散群聊' : '退出群聊'"
|
||||
:border="false"
|
||||
/>
|
||||
</view>
|
||||
<group-member-row v-if="isJoinGroup" :isNomal="!isAdmin && !isOwner"
|
||||
:groupID="storeCurrentConversation.groupID" :memberCount="storeCurrentGroup.memberCount"
|
||||
:groupMemberList="groupMemberList" />
|
||||
|
||||
<uni-list>
|
||||
<uni-list-item title="群聊名称" :rightText="storeCurrentConversation.showName" @click="editGroupName" :clickable="isOwner || isAdmin" :showArrow="isOwner || isAdmin"></uni-list-item>
|
||||
<uni-list-item title="群公告" to="/pages/conversation/groupSettings/announcement" clickable showArrow></uni-list-item>
|
||||
<uni-list-item title="群二维码" :to="'/pages/common/userOrGroupQrCode?groupID='+storeCurrentConversation.groupID" clickable showArrow></uni-list-item>
|
||||
<uni-list-item v-if="isOwner || isAdmin" title="群管理" to="/pages/conversation/groupManage/index" clickable showArrow></uni-list-item>
|
||||
<uni-list-item v-if="1==2" title="备注" :rightText="storeCurrentConversation.showName" @click="editGroupName" :clickable="isOwner || isAdmin" :showArrow="isOwner || isAdmin"></uni-list-item>
|
||||
</uni-list>
|
||||
<u-gap></u-gap>
|
||||
<uni-list>
|
||||
<uni-list-item title="查找聊天内容" to=""></uni-list-item>
|
||||
</uni-list>
|
||||
<u-gap></u-gap>
|
||||
<uni-list>
|
||||
<uni-list-item title="消息免打扰" @switchChange="updateCoversation('recvMsgOpt',storeCurrentConversation.recvMsgOpt==0 ? 2: 0)" showSwitch :switchChecked="storeCurrentConversation.recvMsgOpt !== 0"></uni-list-item>
|
||||
<uni-list-item title="置顶聊天" @switchChange="updateCoversation('isPinned',!storeCurrentConversation.isPinned)" showSwitch :switchChecked="storeCurrentConversation.isPinned"></uni-list-item>
|
||||
</uni-list>
|
||||
<u-gap></u-gap>
|
||||
<uni-list>
|
||||
<uni-list-item v-if="1==2" title="我在本群的昵称"></uni-list-item>
|
||||
<uni-list-item title="删除聊天记录" @click="clearMsg" clickable></uni-list-item>
|
||||
</uni-list>
|
||||
<u-gap></u-gap>
|
||||
<uni-list v-if="isJoinGroup">
|
||||
<uni-list-item :border="false">
|
||||
<view slot="body" class="uni-list-item__content" @click="confirm">
|
||||
<text class="uni-list-item__content-title" style="color: red;">{{isOwner ? '解散群聊' : '退出群聊'}}</text>
|
||||
</view>
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
<u-gap></u-gap>
|
||||
<u-gap></u-gap>
|
||||
</view>
|
||||
|
||||
<u-modal
|
||||
:content="getConfirmContent"
|
||||
asyncClose
|
||||
:show="confirmType !== null"
|
||||
showCancelButton
|
||||
@confirm="confirm"
|
||||
@cancel="() => (confirmType = null)"
|
||||
></u-modal>
|
||||
</view>
|
||||
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<action-sheet
|
||||
:groupID="storeCurrentConversation.groupID"
|
||||
:visible.sync="actionSheetVisible"
|
||||
/>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import { GroupMemberListTypes } from "@/constant";
|
||||
import IMSDK, {
|
||||
GroupMemberRole,
|
||||
GroupStatus,
|
||||
GroupVerificationType,
|
||||
IMMethods,
|
||||
MessageReceiveOptType,
|
||||
} from "openim-uniapp-polyfill";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import SettingItem from "@/components/SettingItem/index.vue";
|
||||
import GroupMemberRow from "./components/GroupMemberRow.vue";
|
||||
import ActionSheet from "./components/ActionSheet.vue";
|
||||
import { getPurePath } from "@/util/common";
|
||||
import {mapGetters} from "vuex";
|
||||
import {GroupMemberListTypes} from "@/constant";
|
||||
import IMSDK, {
|
||||
GroupMemberRole,
|
||||
GroupStatus,
|
||||
GroupVerificationType,
|
||||
IMMethods,
|
||||
MessageReceiveOptType,
|
||||
} from "openim-uniapp-polyfill";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import SettingItem from "@/components/SettingItem/index.vue";
|
||||
import GroupMemberRow from "./components/GroupMemberRow.vue";
|
||||
import {getPurePath} from "@/util/common";
|
||||
|
||||
const ConfirmTypes = {
|
||||
Dismiss: "Dismiss",
|
||||
Quit: "Quit",
|
||||
};
|
||||
const ConfirmTypes = {
|
||||
Dismiss: "Dismiss",
|
||||
Quit: "Quit",
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
MyAvatar,
|
||||
SettingItem,
|
||||
GroupMemberRow,
|
||||
ActionSheet,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
actionSheetVisible: false,
|
||||
confirmType: null,
|
||||
switchLoading: {
|
||||
pin: false,
|
||||
opt: false,
|
||||
mute: false,
|
||||
},
|
||||
groupMemberList: [],
|
||||
isJoinGroup: true
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.getGroupMemberList();
|
||||
if (this.storeCurrentConversation.groupID) {
|
||||
IMSDK.asyncApi(
|
||||
IMMethods.IsJoinGroup,
|
||||
IMSDK.uuid(),
|
||||
this.storeCurrentConversation.groupID
|
||||
).then((res) => {
|
||||
this.isJoinGroup = res.data
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"storeCurrentGroup.memberCount"() {
|
||||
this.getGroupMemberList();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeCurrentConversation",
|
||||
"storeCurrentMemberInGroup",
|
||||
"storeCurrentGroup",
|
||||
]),
|
||||
getConfirmContent() {
|
||||
if (this.confirmType === ConfirmTypes.Quit) {
|
||||
return "确定要退出当前群聊吗？";
|
||||
}
|
||||
if (this.confirmType === ConfirmTypes.Dismiss) {
|
||||
return "确定要解散当前群聊吗？";
|
||||
}
|
||||
return "";
|
||||
},
|
||||
isOwner() {
|
||||
return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Owner;
|
||||
},
|
||||
isAdmin() {
|
||||
return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Admin;
|
||||
},
|
||||
getGroupVerStr() {
|
||||
if (
|
||||
this.storeCurrentGroup.needVerification ===
|
||||
GroupVerificationType.ApplyNeedInviteNot
|
||||
) {
|
||||
return "群成员邀请无需验证";
|
||||
}
|
||||
if (
|
||||
this.storeCurrentGroup.needVerification === GroupVerificationType.AllNot
|
||||
) {
|
||||
return "允许所有人加群";
|
||||
}
|
||||
return "需要发送验证消息";
|
||||
},
|
||||
isAllMuted() {
|
||||
return this.storeCurrentGroup.status === GroupStatus.Muted;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getGroupMemberList() {
|
||||
IMSDK.asyncApi(IMSDK.IMMethods.GetGroupMemberList, IMSDK.uuid(), {
|
||||
groupID: this.storeCurrentConversation.groupID,
|
||||
filter: 0,
|
||||
offset: 0,
|
||||
count: !this.isAdmin && !this.isOwner ? 9 : 8,
|
||||
})
|
||||
.then(({ data }) => {
|
||||
console.log(data);
|
||||
this.groupMemberList = [...data];
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
toGroupManage() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/conversation/groupManage/index",
|
||||
});
|
||||
},
|
||||
toUpdateGroupName() {
|
||||
if (!this.isAdmin && !this.isOwner) {
|
||||
return;
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
MyAvatar,
|
||||
SettingItem,
|
||||
GroupMemberRow
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
switchLoading: {
|
||||
pin: false,
|
||||
opt: false,
|
||||
mute: false,
|
||||
},
|
||||
groupMemberList: [],
|
||||
isJoinGroup: true
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
console.log(this.storeCurrentConversation);
|
||||
/*
|
||||
this.$store.commit("conversation/SET_CURRENT_CONVERSATION", {
|
||||
"conversationID": "sg_1793688611",
|
||||
"conversationType": 3,
|
||||
"userID": "",
|
||||
"groupID": "1793688611",
|
||||
"showName": "5676uy",
|
||||
"faceURL": "",
|
||||
"recvMsgOpt": 0,
|
||||
"unreadCount": 0,
|
||||
"groupAtType": 0,
|
||||
"latestMsg": "{\"clientMsgID\":\"e6274af29366f9097615cc373bc9139d\",\"serverMsgID\":\"ba783d50f2853d5588c913529c08b790\",\"createTime\":1764803528981,\"sendTime\":1764803525434,\"sessionType\":3,\"sendID\":\"100004\",\"recvID\":\"100003\",\"msgFrom\":100,\"contentType\":101,\"senderPlatformID\":2,\"senderNickname\":\"131****1111\",\"senderFaceUrl\":\"/static/img/avatar.png\",\"groupID\":\"1793688611\",\"seq\":10,\"isRead\":false,\"status\":2,\"textElem\":{\"content\":\"2222222222222222222222222222222222\"},\"attachedInfoElem\":{\"groupHasReadInfo\":{\"hasReadCount\":0,\"groupMemberCount\":3},\"isPrivateChat\":false,\"burnDuration\":0,\"hasReadTime\":0,\"isEncryption\":false,\"inEncryptStatus\":false}}",
|
||||
"latestMsgSendTime": 1764803525434,
|
||||
"draftText": "",
|
||||
"draftTextTime": 0,
|
||||
"isPinned": false,
|
||||
"isPrivateChat": false,
|
||||
"burnDuration": 0,
|
||||
"isNotInGroup": false,
|
||||
"updateUnreadCountTime": 0,
|
||||
"attachedInfo": "",
|
||||
"ex": "",
|
||||
"maxSeq": 0,
|
||||
"minSeq": 0,
|
||||
"msgDestructTime": 0,
|
||||
"isMsgDestruct": false
|
||||
});
|
||||
this.$store.commit("conversation/SET_CURRENT_MEMBER_IN_GROUP", {
|
||||
"groupID": "1793688611",
|
||||
"userID": "100004",
|
||||
"nickname": "131****1111",
|
||||
"faceURL": "/static/img/avatar.png",
|
||||
"roleLevel": 20,
|
||||
"joinTime": 1764103081761,
|
||||
"joinSource": 2,
|
||||
"inviterUserID": "100003",
|
||||
"muteEndTime": 0,
|
||||
"operatorUserID": "100003",
|
||||
"ex": "",
|
||||
"attachedInfo": ""
|
||||
});
|
||||
this.$store.commit("conversation/SET_CURRENT_GROUP", {
|
||||
"groupID": "1793688611",
|
||||
"groupName": "5676uy",
|
||||
"notification": "",
|
||||
"introduction": "",
|
||||
"faceURL": "",
|
||||
"createTime": 1764103081757,
|
||||
"status": 0,
|
||||
"creatorUserID": "100003",
|
||||
"groupType": 2,
|
||||
"ownerUserID": "100003",
|
||||
"memberCount": 3,
|
||||
"ex": "",
|
||||
"attachedInfo": "",
|
||||
"needVerification": 0,
|
||||
"lookMemberInfo": 0,
|
||||
"applyMemberFriend": 0,
|
||||
"notificationUpdateTime": 0,
|
||||
"notificationUserID": ""
|
||||
});
|
||||
*/
|
||||
//console.log(this.storeCurrentGroup,this.storeCurrentConversation,this.storeCurrentMemberInGroup)
|
||||
this.getGroupMemberList();
|
||||
if (this.storeCurrentConversation.groupID) {
|
||||
IMSDK.asyncApi(
|
||||
IMMethods.IsJoinGroup,
|
||||
IMSDK.uuid(),
|
||||
this.storeCurrentConversation.groupID
|
||||
).then((res) => {
|
||||
this.isJoinGroup = res.data
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
"storeCurrentGroup.memberCount"() {
|
||||
this.getGroupMemberList();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeCurrentConversation",
|
||||
"storeCurrentMemberInGroup",
|
||||
"storeCurrentGroup",
|
||||
]),
|
||||
isOwner() {
|
||||
return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Owner;
|
||||
},
|
||||
isAdmin() {
|
||||
return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Admin;
|
||||
},
|
||||
getGroupVerStr() {
|
||||
if (
|
||||
this.storeCurrentGroup.needVerification ===
|
||||
GroupVerificationType.ApplyNeedInviteNot
|
||||
) {
|
||||
return "群成员邀请无需验证";
|
||||
}
|
||||
if (
|
||||
this.storeCurrentGroup.needVerification === GroupVerificationType.AllNot
|
||||
) {
|
||||
return "允许所有人加群";
|
||||
}
|
||||
return "需要发送验证消息";
|
||||
},
|
||||
isAllMuted() {
|
||||
return this.storeCurrentGroup.status === GroupStatus.Muted;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
editGroupName(){
|
||||
if(this.isOwner || this.isAdmin){
|
||||
this.toUpdateGroupName();
|
||||
}
|
||||
},
|
||||
getGroupMemberList() {
|
||||
IMSDK.asyncApi(IMSDK.IMMethods.GetGroupMemberList, IMSDK.uuid(), {
|
||||
groupID: this.storeCurrentConversation.groupID,
|
||||
filter: 0,
|
||||
offset: 0,
|
||||
count: !this.isAdmin && !this.isOwner ? 9 : 8,
|
||||
})
|
||||
.then(({
|
||||
data
|
||||
}) => {
|
||||
//console.log(data);
|
||||
this.groupMemberList = [...data];
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
toGroupManage() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/conversation/groupManage/index",
|
||||
});
|
||||
},
|
||||
toUpdateGroupName() {
|
||||
if (!this.isAdmin && !this.isOwner) {
|
||||
return;
|
||||
}
|
||||
|
||||
uni.navigateTo({
|
||||
url: `/pages/conversation/updateGroupOrNickname/index?sourceInfo=${JSON.stringify(
|
||||
this.storeCurrentGroup,
|
||||
)}`,
|
||||
});
|
||||
},
|
||||
copyGroupID() {
|
||||
uni.setClipboardData({
|
||||
data: this.storeCurrentGroup.groupID,
|
||||
success: () => {
|
||||
uni.hideToast();
|
||||
this.$nextTick(() => {
|
||||
uni.$u.toast("复制成功");
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
showActionSheet() {
|
||||
if (!this.isAdmin && !this.isOwner) {
|
||||
return;
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pages/conversation/updateGroupOrNickname/index?sourceInfo=${JSON.stringify(this.storeCurrentGroup,)}`,
|
||||
});
|
||||
},
|
||||
copyGroupID() {
|
||||
uni.setClipboardData({
|
||||
data: this.storeCurrentGroup.groupID,
|
||||
success: () => {
|
||||
uni.hideToast();
|
||||
this.$nextTick(() => {
|
||||
uni.$u.toast("复制成功");
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
updateGroupInfo(field,value1){
|
||||
const data = {groupID:this.storeCurrentGroup.groupID};
|
||||
data[field] = value1;
|
||||
IMSDK.asyncApi('setGroupInfo', IMSDK.uuid(),data).then(res=>{
|
||||
console.log(res);
|
||||
}).catch(e=>{
|
||||
console.log(e);
|
||||
})
|
||||
},
|
||||
updateCoversation(field,value1){
|
||||
const data = {conversationID:this.storeCurrentConversation.conversationID};
|
||||
data[field] = value1;
|
||||
IMSDK.asyncApi('setConversation', IMSDK.uuid(),data).then(res=>{
|
||||
console.log(res);
|
||||
}).catch(e=>{
|
||||
console.log(e);
|
||||
})
|
||||
},
|
||||
updateGroupAvatar() {
|
||||
if (!this.isAdmin && !this.isOwner) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.actionSheetVisible = true;
|
||||
},
|
||||
updateGroupAvatar() {
|
||||
if (!this.isAdmin && !this.isOwner) {
|
||||
return;
|
||||
}
|
||||
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ["compressed"],
|
||||
success: async ({ tempFilePaths }) => {
|
||||
const path = tempFilePaths[0];
|
||||
const nameIdx = path.lastIndexOf("/") + 1;
|
||||
const typeIdx = path.lastIndexOf(".") + 1;
|
||||
const fileName = path.slice(nameIdx);
|
||||
const fileType = path.slice(typeIdx);
|
||||
try {
|
||||
const {
|
||||
data: { url },
|
||||
} = await IMSDK.asyncApi(IMMethods.UploadFile, IMSDK.uuid(), {
|
||||
filepath: getPurePath(tempFilePaths[0]),
|
||||
name: fileName,
|
||||
contentType: fileType,
|
||||
uuid: IMSDK.uuid(),
|
||||
});
|
||||
await IMSDK.asyncApi(IMSDK.IMMethods.SetGroupInfo, IMSDK.uuid(), {
|
||||
groupID: this.storeCurrentConversation.groupID,
|
||||
faceURL: url,
|
||||
});
|
||||
uni.$u.toast("修改成功");
|
||||
} catch (error) {
|
||||
uni.$u.toast("修改失败");
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
confirm() {
|
||||
let funcName = "";
|
||||
let sourceID = this.storeCurrentConversation.groupID;
|
||||
if (this.confirmType === ConfirmTypes.Quit) {
|
||||
funcName = IMSDK.IMMethods.QuitGroup;
|
||||
}
|
||||
if (this.confirmType === ConfirmTypes.Dismiss) {
|
||||
funcName = IMSDK.IMMethods.DismissGroup;
|
||||
}
|
||||
IMSDK.asyncApi(funcName, IMSDK.uuid(), sourceID)
|
||||
.then(() => {
|
||||
uni.$u.toast("操作成功");
|
||||
setTimeout(
|
||||
() =>
|
||||
uni.switchTab({
|
||||
url: "/pages/conversation/conversationList/index",
|
||||
}),
|
||||
250,
|
||||
);
|
||||
})
|
||||
.catch(() => uni.$u.toast("操作失败"))
|
||||
.finally(() => (this.confirmType = null));
|
||||
},
|
||||
},
|
||||
};
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ["compressed"],
|
||||
success: async ({
|
||||
tempFilePaths
|
||||
}) => {
|
||||
const path = tempFilePaths[0];
|
||||
const nameIdx = path.lastIndexOf("/") + 1;
|
||||
const typeIdx = path.lastIndexOf(".") + 1;
|
||||
const fileName = path.slice(nameIdx);
|
||||
const fileType = path.slice(typeIdx);
|
||||
try {
|
||||
const {
|
||||
data: {
|
||||
url
|
||||
},
|
||||
} = await IMSDK.asyncApi(IMMethods.UploadFile, IMSDK.uuid(), {
|
||||
filepath: getPurePath(tempFilePaths[0]),
|
||||
name: fileName,
|
||||
contentType: fileType,
|
||||
uuid: IMSDK.uuid(),
|
||||
});
|
||||
await IMSDK.asyncApi(IMSDK.IMMethods.SetGroupInfo, IMSDK.uuid(), {
|
||||
groupID: this.storeCurrentConversation.groupID,
|
||||
faceURL: url,
|
||||
});
|
||||
uni.$u.toast("修改成功");
|
||||
} catch (error) {
|
||||
uni.$u.toast("修改失败");
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
confirm() {
|
||||
const _this = this;
|
||||
uni.showModal({
|
||||
content:this.isOwner ? '确定要解散当前群聊吗?' : '确定要退出当前群聊吗?',
|
||||
success(res){
|
||||
if (res.confirm) {
|
||||
let funcName = "";
|
||||
let sourceID = _this.storeCurrentConversation.groupID;
|
||||
if (this.isOwner) {
|
||||
funcName = IMSDK.IMMethods.DismissGroup;
|
||||
}else{
|
||||
funcName = IMSDK.IMMethods.QuitGroup;
|
||||
}
|
||||
IMSDK.asyncApi(funcName, IMSDK.uuid(), sourceID)
|
||||
.then(() => {
|
||||
uni.$u.toast("操作成功");
|
||||
setTimeout(
|
||||
() =>
|
||||
uni.switchTab({
|
||||
url: "/pages/conversation/conversationList/index",
|
||||
}),
|
||||
250,
|
||||
);
|
||||
})
|
||||
.catch(() => uni.$u.toast("操作失败"));
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
clearMsg(){
|
||||
IMSDK.asyncApi('clearConversationAndDeleteAllMsg',IMSDK.uuid(), this.storeCurrentConversation.conversationID).then(res=>{
|
||||
uni.navigateBack();
|
||||
}).catch(e=>{
|
||||
console.log(e);
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group_settings_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
.group_settings_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.group_settings_content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.group_settings_content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.setting_row {
|
||||
background-color: #fff;
|
||||
margin: 24rpx;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.setting_row {
|
||||
background-color: #fff;
|
||||
margin: 24rpx;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info_row {
|
||||
@include vCenterBox();
|
||||
padding: 36rpx 44rpx;
|
||||
.info_row {
|
||||
@include vCenterBox();
|
||||
padding: 36rpx 44rpx;
|
||||
|
||||
.group_avatar {
|
||||
margin-right: 16rpx;
|
||||
position: relative;
|
||||
.group_avatar {
|
||||
margin-right: 16rpx;
|
||||
position: relative;
|
||||
|
||||
.edit_icon {
|
||||
position: absolute;
|
||||
right: -6rpx;
|
||||
bottom: -6rpx;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
.edit_icon {
|
||||
position: absolute;
|
||||
right: -6rpx;
|
||||
bottom: -6rpx;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.group_info {
|
||||
min-height: 46px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
.group_info {
|
||||
min-height: 46px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
&_name {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&_name {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.group_name {
|
||||
// @include nomalEllipsis();
|
||||
font-size: 34rpx;
|
||||
max-width: 380rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
}
|
||||
.group_name {
|
||||
// @include nomalEllipsis();
|
||||
font-size: 34rpx;
|
||||
max-width: 380rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sub_title {
|
||||
@include nomalEllipsis();
|
||||
margin-bottom: 0;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.sub_title {
|
||||
@include nomalEllipsis();
|
||||
margin-bottom: 0;
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -2,27 +2,37 @@
|
||||
<view class="single_settings_container">
|
||||
<custom-nav-bar title="好友设置" />
|
||||
|
||||
<view class="row_wrap">
|
||||
<view class="setting_row info_row">
|
||||
<view @click="toUserCard" class="user_info">
|
||||
<my-avatar :src="storeCurrentConversation.faceURL" :desc="storeCurrentConversation.showName"
|
||||
size="46" />
|
||||
</view>
|
||||
<view @click="invite2group" class="action">
|
||||
<image style="width: 46px; height: 46px" src="@/static/images/single_setting_add.png" alt="" />
|
||||
</view>
|
||||
<view class="setting_row info_row">
|
||||
<view @click="toUserCard" class="user_info">
|
||||
<my-avatar :src="storeCurrentConversation.faceURL" :desc="storeCurrentConversation.showName"
|
||||
size="46" />
|
||||
</view>
|
||||
<view @click="invite2group" class="action">
|
||||
<image style="width: 46px; height: 46px" src="@/static/images/single_setting_add.png" alt="" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<uni-list>
|
||||
<uni-list-item title="查找聊天内容" to=""></uni-list-item>
|
||||
</uni-list>
|
||||
<u-gap></u-gap>
|
||||
<uni-list>
|
||||
<uni-list-item title="消息免打扰" @switchChange="updateCoversation('recvMsgOpt',storeCurrentConversation.recvMsgOpt==0 ? 2: 0)" showSwitch :switchChecked="storeCurrentConversation.recvMsgOpt !== 0"></uni-list-item>
|
||||
<uni-list-item title="置顶聊天" @switchChange="updateCoversation('isPinned',!storeCurrentConversation.isPinned)" showSwitch :switchChecked="storeCurrentConversation.isPinned"></uni-list-item>
|
||||
</uni-list>
|
||||
<u-gap></u-gap>
|
||||
<uni-list>
|
||||
<uni-list-item title="删除聊天记录" @click="clearMsg" clickable></uni-list-item>
|
||||
</uni-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {mapGetters} from "vuex";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import SettingItem from "@/components/SettingItem/index.vue";
|
||||
import IMSDK from "openim-uniapp-polyfill";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
@@ -61,6 +71,22 @@
|
||||
url: `/pages/common/createGroup/index?checkedMemberList=${checkedMemberList}`,
|
||||
});
|
||||
},
|
||||
clearMsg(){
|
||||
IMSDK.asyncApi('clearConversationAndDeleteAllMsg',IMSDK.uuid(), this.storeCurrentConversation.conversationID).then(res=>{
|
||||
uni.navigateBack();
|
||||
}).catch(e=>{
|
||||
console.log(e);
|
||||
})
|
||||
},
|
||||
updateCoversation(field,value1){
|
||||
const data = {conversationID:this.storeCurrentConversation.conversationID};
|
||||
data[field] = value1;
|
||||
IMSDK.asyncApi('setConversation', IMSDK.uuid(),data).then(res=>{
|
||||
console.log(res);
|
||||
}).catch(e=>{
|
||||
console.log(e);
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<view class="page_container">
|
||||
<custom-nav-bar :title="getTitle">
|
||||
<view class="nav_right_action" slot="more">
|
||||
<text v-show="!updateLoading" @click="comfirmUpdate">保存</text>
|
||||
<u-button type="primary" v-show="!updateLoading" @click="comfirmUpdate">保存</u-button>
|
||||
<u-loading-icon v-show="updateLoading" />
|
||||
</view>
|
||||
</custom-nav-bar>
|
||||
|
||||
@@ -107,6 +107,7 @@ export default {
|
||||
},
|
||||
onLoad(options) {
|
||||
const _this = this;
|
||||
// #ifdef APP
|
||||
plus.runtime.getProperty(plus.runtime.appid, (inf) => {
|
||||
console.log(inf);
|
||||
_this.appversion = inf.version
|
||||
@@ -114,6 +115,7 @@ export default {
|
||||
// if(options.isRedirect){
|
||||
// plus.navigator.closeSplashscreen();
|
||||
// }
|
||||
// #endif
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
@@ -166,10 +168,12 @@ export default {
|
||||
code: this.loginInfo.verificationCode,
|
||||
});
|
||||
const { imToken, userID } = data;
|
||||
// #ifdef APP
|
||||
await IMSDK.asyncApi(IMSDK.IMMethods.Login, uuidv4(), {
|
||||
userID,
|
||||
token: imToken,
|
||||
});
|
||||
// #endif
|
||||
this.saveLoginProfile(data);
|
||||
this.$store.commit("user/SET_AUTH_DATA", data);
|
||||
this.$store.dispatch("user/getSelfInfo");
|
||||
@@ -274,8 +278,8 @@ export default {
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
img {
|
||||
width: 160rpx;
|
||||
|
||||
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<view class="content-circle-box" :index="index">
|
||||
<view @tap="linkToBusinessCard(item.user_id)">
|
||||
<MyAvatar :src="item.user.avatar" :desc="item.user.nickname || item.user.id" :isGroup="false" size="66"></MyAvatar>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="content-name" @tap="linkToBusinessCard(item.user_id)">{{ item.user.nickname || item.user.remark }}</view>
|
||||
<view class="content-desc">{{ item.body }}</view>
|
||||
<!-- 图片,视频 -->
|
||||
<view class="content-img" v-if="item.files!=null&&item.files.length>0">
|
||||
<!-- //只有一张图时候 -->
|
||||
<view v-if="item.files.length==1&&item.releaseType==1" class="u-flex u-row-left u-col-center"
|
||||
style="width:100%;min-height: 200rpx;">
|
||||
<u-image width="280rpx" :src="cdn(item.files[0])" mode="widthFix"
|
||||
@tap="previewImg(0, item)">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
<view slot="error" class="u-flex u-row-left u-col-center"
|
||||
style="font-size: 24rpx;width: 200rpx;height: 100rpx;margin-top: -50rpx;">
|
||||
<u-icon name="photo" size="100" label="加载失败" label-pos="bottom"></u-icon>
|
||||
</view>
|
||||
</u-image>
|
||||
</view>
|
||||
<!-- 有多张图的时候 -->
|
||||
<view v-if="item.files.length > 1&&item.releaseType==1">
|
||||
<view class="content-img-more u-m-b-20">
|
||||
<u-grid :col="3" :border="false" hover-class="none">
|
||||
<u-grid-item v-for="(src, index) in item.files" :index="index" :custom-style="girdItemCustomStyle">
|
||||
<view @tap="previewImg(index, item)" class="slot-btn">
|
||||
<u-image :src="cdn(src)" width="180rpx" height="180rpx" mode="aspectFill" border-radius="10"></u-image>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 视频 -->
|
||||
<view class="u-m-b-30 u-m-t-30 u-flex u-row-left u-col-center"
|
||||
v-if="item.fileList.length > 0&&item.releaseType==2" @tap="previewImg(0, item)">
|
||||
<view v-if="vuex_OSPlat=='ios'">
|
||||
<u-image width="280rpx" :src="getVideoPoster(item.fileList[0])" mode="widthFix">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</u-image>
|
||||
</view>
|
||||
<view v-else class="u-flex u-row-center u-col-center"
|
||||
style="border: 1rpx solid #36648b;width:280rpx;height:120rpx;border-radius: 16rpx;">
|
||||
<u-icon name="play-circle" size="48" color="#36648b"
|
||||
label="点击查看视频" label-pos="bottom"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 地点 -->
|
||||
<view v-if="(item.address&&item.address.chooseFlag)==true" class="u-line-2 u-m-t-10 u-m-b-10" style="font-size: 30rpx;color: #36648b;">
|
||||
<u-icon name="map" color="#36648b" size="30" :custom-style="{marginLeft:'-4rpx'}"></u-icon>
|
||||
<text> {{ item.address.name}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 相对时间 点赞按钮等 -->
|
||||
<view class="relavivetime" :id="`comment-${'null'}-${index}`">
|
||||
<view class="time u-flex u-col-center">
|
||||
<view>{{ item.created_at }}</view>
|
||||
<view @click="deleteCircle(item,index)" style="color:#36648b;margin-left: 20rpx;" v-if="item.user_id==selfInfo.userID">删除</view>
|
||||
</view>
|
||||
|
||||
<view class="icon-box u-flex u-row-between u-col-center">
|
||||
<view @tap="clickThumb(item,index)" class="u-m-r-6 u-p-t-4">
|
||||
<u-icon v-if="item.isPraise==false" size="38" name="heart" color="#36648b"></u-icon>
|
||||
<u-icon v-if="item.isPraise==true" size="38" name="heart-fill" color="#36648b"></u-icon>
|
||||
</view>
|
||||
<view @tap="handleComment(item.id, null, index)" class="u-m-l-6 u-p-t-2">
|
||||
<u-icon size="40" name="chat" color="#36648b"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 点赞人 评论 -->
|
||||
<view class="msg-box">
|
||||
<view class="thumbinfo u-border-bottom" v-if="item.praise!=null&&item.praise.length">
|
||||
<uni-icons size="30" type="heart" color="#36648b" class="u-m-r-10"></uni-icons>
|
||||
<text class="thumbinfo-name" v-for="(userInfo, pindex) in item.praise" :index="pindex"
|
||||
:key="pindex" @tap="linkToBusinessCard(userInfo.userId)">
|
||||
{{ userInfo.nickame }}{{ pindex != item.praise.length - 1 ? '，' : '' }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="comment" v-if="item.comments!=null&&item.comments.length">
|
||||
<view class="comment-box" v-for="(comment, commentIndex) in item.comments" :index="commentIndex"
|
||||
:key="commentIndex" hover-class="comment-hover-class"
|
||||
:id="`comment-${item.id}-${index}`"
|
||||
@tap="handleComment(item.id, comment, index)">
|
||||
<text class="comment-box-name" v-if="!comment.reply_user_id">{{ comment.replyUser.nickname }}：</text>
|
||||
<text class="comment-box-name" v-if="comment.reply_user_id">
|
||||
{{ comment.replyUser.nickname }}
|
||||
<text class="callback u-m-l-4 u-m-r-4">回复</text>
|
||||
</text>
|
||||
<text v-if="comment.reply_user_id" class="comment-box-name">{{ comment.replyUser.nickname }}：</text>
|
||||
<text class="comment-box-content">{{ comment.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import videoPlayer from '@/components/videoPlayer.vue';
|
||||
export default{
|
||||
components:{videoPlayer ,MyAvatar},
|
||||
props:{
|
||||
index:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
item:{
|
||||
type:Object,
|
||||
default(){
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
selfInfo() {
|
||||
return this.$store.getters.storeSelfInfo;
|
||||
},
|
||||
},
|
||||
data(){
|
||||
console.log(this.item);
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.content-circle-box {
|
||||
padding: 18rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f2eeee;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.headimg {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding-left: 18rpx;
|
||||
font-size: 32rpx;
|
||||
|
||||
&-name {
|
||||
color: #36648b;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
&-desc {
|
||||
color: #000000;
|
||||
padding-top: 4rpx;
|
||||
//line-height: 36rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
&-img {
|
||||
margin-top: 10rpx;
|
||||
|
||||
.img-1 {
|
||||
will-change: transform;
|
||||
width: 280rpx;
|
||||
height: auto;
|
||||
max-height: 400rpx;
|
||||
}
|
||||
|
||||
&-more {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.img-more {
|
||||
display: block;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
margin: 4rpx;
|
||||
}
|
||||
|
||||
.img-3 {
|
||||
margin: 4rpx 4rpx 4rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msg-box {
|
||||
width: 100%;
|
||||
background-color: #FFF;
|
||||
margin-top: 15rpx;
|
||||
border-radius: 4rpx;
|
||||
|
||||
.thumbinfo {
|
||||
// border-bottom: 1rpx solid gray;
|
||||
padding: 6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
line-height: 28rpx;
|
||||
margin-right: 15rpx;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
&-name {
|
||||
font-size: 28rpx;
|
||||
color: #36648b;
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
padding: 6rpx 8rpx;
|
||||
color: $uni-text-color;
|
||||
font-size: 28rpx;
|
||||
|
||||
&-box {
|
||||
padding: 4rpx 0;
|
||||
|
||||
&-name {
|
||||
color: #36648b;
|
||||
|
||||
.callback {
|
||||
color: $uni-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.relavivetime {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
|
||||
.time {
|
||||
color: $uni-text-color-grey;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-item {
|
||||
//background-color: #F8F8F8;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
|
||||
&.thumb {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,7 +1,14 @@
|
||||
<template>
|
||||
<view class="content" id="content">
|
||||
<u-navbar bgColor="transparent" title="朋友圈" title-size="36" leftIconColor="#fff"
|
||||
:titleStyle ="{color:'#fff'}" :title-bold="true" :border-bottom="false">
|
||||
<u-navbar
|
||||
@leftClick="goto('/pages/workbench/index/index')"
|
||||
bgColor="transparent"
|
||||
title="朋友圈"
|
||||
title-size="36"
|
||||
leftIconColor="#fff"
|
||||
:titleStyle ="{color:'#fff'}"
|
||||
:title-bold="true"
|
||||
:border-bottom="false">
|
||||
<view slot="right" class="u-margin-right-20" @click="showTypeSheet"
|
||||
@longpress="linkToRelease({releaseType:0})">
|
||||
<u-icon name="camera" color="#fff" size="32"></u-icon>
|
||||
@@ -18,22 +25,21 @@
|
||||
|
||||
<MyAvatar class="headimg" :src="selfInfo.faceURL" :desc="selfInfo.nickname || selfInfo.remark"
|
||||
:isGroup="Boolean(selfInfo.groupID)" size="66" @tap="linkToBusinessCard(selfInfo.userID)" />
|
||||
<text class="nickname">{{ selfInfo.nickname || self.remark }}</text>
|
||||
<text class="nickname">{{ selfInfo.nickname || selfInfo.remark }}</text>
|
||||
</view>
|
||||
<!-- 个性签名 -->
|
||||
<view class="signature">
|
||||
<view class="">{{ selfInfo.bio }}</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-20 u-m-b-30 u-flex u-row-center u-col-center" v-if="vuex_friendCircleUnreadCount>0">
|
||||
<view class="u-flex u-row-left u-col-center" @click="clearUnReadCount()"
|
||||
style="width: 300rpx;height:70rpx;background-color: #333333;color: #ffffff;border-radius:10rpx;">
|
||||
<view v-if="vuex_friendCircleUnreadCount>0" style="display: flex;justify-content: center;">
|
||||
<view @click="clearUnReadCount()"
|
||||
style="width: 300rpx;height:70rpx;line-height:70rpx;background-color: #333333;color: #ffffff;border-radius:10rpx;display: flex;align-items: center;">
|
||||
<view style="width:80rpx;padding:0 10rpx;">
|
||||
<MyAvatar class="headimg" :src="selfInfo.faceURL" :desc="selfInfo.nickname || selfInfo.remark"
|
||||
:isGroup="Boolean(selfInfo.groupID)" size="66"/>
|
||||
<MyAvatar :src="selfInfo.faceURL" class="headimg" desc=" " size="24"/>
|
||||
</view>
|
||||
<view style="width:220rpx;text-align: center;">
|
||||
<text>{{vuex_friendCircleUnreadCount}}条新信息</text>
|
||||
<view style="flex:1;">
|
||||
{{vuex_friendCircleUnreadCount}}条新信息
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -42,107 +48,9 @@
|
||||
<view class="content-circle">
|
||||
<!-- circleData是vuex变量，不在本页面定义 -->
|
||||
<template v-if="circleData!=null&&circleData.length>0">
|
||||
<view class="content-circle-box" v-for="(item, index) in circleData" :key="index" :index="index">
|
||||
<view @tap="linkToBusinessCard(item.user_id)">
|
||||
<MyAvatar :src="item.user.avatar" :desc="item.user.nickname || item.user.id" :isGroup="false" size="66"></MyAvatar>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="content-name" @tap="linkToBusinessCard(item.user_id)">{{ item.user.nickname || item.user.remark }}</view>
|
||||
<view class="content-desc">{{ item.body }}</view>
|
||||
<!-- 图片,视频 -->
|
||||
<view class="content-img" v-if="item.files!=null&&item.files.length>0">
|
||||
<!-- //只有一张图时候 -->
|
||||
<view v-if="item.files.length==1&&item.releaseType==1" class="u-flex u-row-left u-col-center"
|
||||
style="width:100%;min-height: 200rpx;">
|
||||
<u-image width="280rpx" :src="cdn(item.files[0])" mode="widthFix"
|
||||
@tap="previewImg(0, item)">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
<view slot="error" class="u-flex u-row-left u-col-center"
|
||||
style="font-size: 24rpx;width: 200rpx;height: 100rpx;margin-top: -50rpx;">
|
||||
<u-icon name="photo" size="100" label="加载失败" label-pos="bottom"></u-icon>
|
||||
</view>
|
||||
</u-image>
|
||||
</view>
|
||||
<!-- 有多张图的时候 -->
|
||||
<view v-if="item.files.length > 1&&item.releaseType==1">
|
||||
<view class="content-img-more u-m-b-20">
|
||||
<u-grid :col="3" :border="false" hover-class="none">
|
||||
<u-grid-item v-for="(src, index) in item.files" :index="index" :custom-style="girdItemCustomStyle">
|
||||
<view @tap="previewImg(index, item)" class="slot-btn">
|
||||
<u-image :src="cdn(src)" width="180rpx" height="180rpx" mode="aspectFill" border-radius="10"></u-image>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 视频 -->
|
||||
<view class="u-m-b-30 u-m-t-30 u-flex u-row-left u-col-center"
|
||||
v-if="item.fileList.length > 0&&item.releaseType==2" @tap="previewImg(0, item)">
|
||||
<view v-if="vuex_OSPlat=='ios'">
|
||||
<u-image width="280rpx" :src="getVideoPoster(item.fileList[0])" mode="widthFix">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</u-image>
|
||||
</view>
|
||||
<view v-else class="u-flex u-row-center u-col-center"
|
||||
style="border: 1rpx solid #36648b;width:280rpx;height:120rpx;border-radius: 16rpx;">
|
||||
<u-icon name="play-circle" size="48" color="#36648b"
|
||||
label="点击查看视频" label-pos="bottom"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 地点 -->
|
||||
<view v-if="(item.address&&item.address.chooseFlag)==true" class="u-line-2 u-m-t-10 u-m-b-10" style="font-size: 30rpx;color: #36648b;">
|
||||
<u-icon name="map" color="#36648b" size="30" :custom-style="{marginLeft:'-4rpx'}"></u-icon>
|
||||
<text> {{ item.address.name}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 相对时间 点赞按钮等 -->
|
||||
<view class="relavivetime" :id="`comment-${'null'}-${index}`">
|
||||
<view class="time u-flex u-col-center">
|
||||
<view>{{ item.created_at }}</view>
|
||||
<view @click="deleteCircle(item,index)" style="color:#36648b;margin-left: 20rpx;" v-if="item.user_id==selfInfo.userID">删除</view>
|
||||
</view>
|
||||
|
||||
<view class="icon-box u-flex u-row-between u-col-center">
|
||||
<view @tap="clickThumb(item,index)" class="u-m-r-6 u-p-t-4">
|
||||
<u-icon v-if="item.isPraise==false" size="38" name="heart" color="#36648b"></u-icon>
|
||||
<u-icon v-if="item.isPraise==true" size="38" name="heart-fill" color="#36648b"></u-icon>
|
||||
</view>
|
||||
<view @tap="handleComment(item.id, null, index)" class="u-m-l-6 u-p-t-2">
|
||||
<u-icon size="40" name="chat" color="#36648b"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 点赞人 评论 -->
|
||||
<view class="msg-box">
|
||||
<view class="thumbinfo u-border-bottom" v-if="item.praise!=null&&item.praise.length">
|
||||
<uni-icons size="30" type="heart" color="#36648b" class="u-m-r-10"></uni-icons>
|
||||
<text class="thumbinfo-name" v-for="(userInfo, pindex) in item.praise" :index="pindex"
|
||||
:key="pindex" @tap="linkToBusinessCard(userInfo.userId)">
|
||||
{{ userInfo.nickame }}{{ pindex != item.praise.length - 1 ? '，' : '' }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="comment" v-if="item.comments!=null&&item.comments.length">
|
||||
<view class="comment-box" v-for="(comment, commentIndex) in item.comments" :index="commentIndex"
|
||||
:key="commentIndex" hover-class="comment-hover-class"
|
||||
:id="`comment-${item.id}-${index}`"
|
||||
@tap="handleComment(item.id, comment, index)">
|
||||
<text class="comment-box-name" v-if="!comment.reply_user_id">{{ comment.replyUser.nickname }}：</text>
|
||||
<text class="comment-box-name" v-if="comment.reply_user_id">
|
||||
{{ comment.replyUser.nickname }}
|
||||
<text class="callback u-m-l-4 u-m-r-4">回复</text>
|
||||
</text>
|
||||
<text v-if="comment.reply_user_id" class="comment-box-name">{{ comment.replyUser.nickname }}：</text>
|
||||
<text class="comment-box-content">{{ comment.content }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-for="(item, index) in circleData" >
|
||||
<CircleItem :key="index" :index="index" :item="item"></CircleItem>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view style="margin-top: 30%;">
|
||||
@@ -259,11 +167,12 @@
|
||||
import {getFriendCircle} from "@/api/login.js"
|
||||
import UserBase from "@/components/User.vue"
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
import util from "@/util/index.js"
|
||||
import util from "@/util/index.js";
|
||||
import CircleItem from "./components/circleItem.vue"
|
||||
export default {
|
||||
name: 'firendCircle',
|
||||
mixins:[UserBase],
|
||||
components:{videoPlayer ,MyAvatar},
|
||||
components:{videoPlayer ,MyAvatar,CircleItem},
|
||||
computed: {
|
||||
selfInfo() {
|
||||
return this.$store.getters.storeSelfInfo;
|
||||
@@ -382,6 +291,7 @@
|
||||
},
|
||||
|
||||
methods: {
|
||||
goto:util.goto,
|
||||
clearUnReadCount(){
|
||||
this.$store.dispatch('circle/updateUnreadCount',0-this.vuex_friendCircleUnreadCount);
|
||||
},
|
||||
@@ -389,60 +299,6 @@
|
||||
getCircleDataList:function(param){
|
||||
let that=this;
|
||||
this.$store.dispatch('circle/getFriendCircleList',param);
|
||||
return ;
|
||||
getFriendCircle(param).then(res => {
|
||||
//console.log("朋友圈列表",res);
|
||||
let circleDataList=res.data;
|
||||
//console.log("朋友圈列表",circleDataList);
|
||||
if(circleDataList.length>0){
|
||||
that.loadMoreFlag=true;
|
||||
for (var i = 0; i < circleDataList.length; i++) {
|
||||
let item= circleDataList[i];
|
||||
if(item.userId==this.selfInfo.userID){
|
||||
item.userName="我";
|
||||
}
|
||||
if(item.address!=null&&item.address.length>0){
|
||||
item.address=JSON.parse(item.address);
|
||||
}
|
||||
if(item.fileList!=null&&item.fileList.length>0){
|
||||
item.fileList=JSON.parse(item.fileList);
|
||||
if(item.releaseType==2){
|
||||
|
||||
}
|
||||
}
|
||||
if(item.praise!=null){
|
||||
item.praise=JSON.parse(item.praise);
|
||||
}else{
|
||||
item.praise=[];
|
||||
}
|
||||
if(item.comment!=null&&item.comment.length>0){
|
||||
item.comment=JSON.parse(item.comment);
|
||||
}
|
||||
else{
|
||||
item.comment=[];
|
||||
}
|
||||
}
|
||||
}else{
|
||||
if(param.moreFlag==true){
|
||||
that.loadMoreFlag=false;
|
||||
}
|
||||
return;
|
||||
}
|
||||
//初始化列表
|
||||
if(param.moreFlag==false){
|
||||
console.log("初始化朋友圈列表",circleDataList.length);
|
||||
that.circleData = circleDataList;
|
||||
//that.$u.vuex('circleData', circleDataList);
|
||||
}
|
||||
//加载更多
|
||||
else{
|
||||
let oldList=that.circleData;
|
||||
let newList=oldList.concat(circleDataList);
|
||||
that.circleData = circleDataList;
|
||||
//that.$u.vuex('circleData', newList);
|
||||
console.log("加载更多朋友圈列表",newList);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//滚动事件
|
||||
@@ -680,7 +536,7 @@
|
||||
tempFilePaths = res.tempFilePaths;
|
||||
let param = {
|
||||
releaseType: 1,
|
||||
tempFilePaths: JSON.stringify(tempFilePaths)
|
||||
tempFilePaths: tempFilePaths
|
||||
}
|
||||
that.linkToRelease(param);
|
||||
return;
|
||||
@@ -698,7 +554,7 @@
|
||||
tempFilePaths.push(filePath);
|
||||
let param = {
|
||||
releaseType: 2,
|
||||
tempFilePaths: JSON.stringify(tempFilePaths)
|
||||
tempFilePaths: tempFilePaths
|
||||
}
|
||||
that.linkToRelease(param);
|
||||
return;
|
||||
@@ -709,10 +565,19 @@
|
||||
},
|
||||
//点击自定义组件相机按钮
|
||||
linkToRelease(params) {
|
||||
uni.$u.route({
|
||||
url: '/pages/workbench/friend-circle/releaseFriendCircle',
|
||||
params: params
|
||||
});
|
||||
console.log(params);
|
||||
let url = "/pages/workbench/friend-circle/releaseFriendCircle?";
|
||||
for(let key in params){
|
||||
if(key!="tempFilePaths"){
|
||||
url+=key+"="+params[key]+"&";
|
||||
}
|
||||
}
|
||||
uni.navigateTo({
|
||||
url:url,
|
||||
success(res) {
|
||||
res.eventChannel.emit('successEvent',params);
|
||||
}
|
||||
})
|
||||
},
|
||||
getVideoPoster(videoSrc){
|
||||
console.log("video",videoSrc);
|
||||
|
||||
@@ -53,15 +53,15 @@
|
||||
<!-- :value="address.name" :value-style="customValueStyle" :label="address.address" -->
|
||||
<u-cell bg-color="#ffffff"
|
||||
:title="address.chooseFlag?(address.name):'所在位置'" :title-style="customTitleStyle"
|
||||
:label="address.chooseFlag?(address.address):'请选择'"
|
||||
:value="address.chooseFlag?(address.address):'请选择'" isLink
|
||||
@click="toChooseLocation()">
|
||||
<view slot="icon" class="u-flex u-row-center u-col-center">
|
||||
<u-icon name="map" size="32" :color="address.chooseFlag?'#19be6b':'#606266'"></u-icon>
|
||||
</view>
|
||||
</u-cell>
|
||||
<u-cell bg-color="#ffffff" title="提醒谁看" :title-style="customTitleStyle" @click="toRemind()">
|
||||
<u-cell bg-color="#ffffff" title="提醒谁看" :title-style="customTitleStyle" @click="toRemind">
|
||||
<view slot="icon" class="u-flex u-row-center u-col-center">
|
||||
<u-icon name="/static/images/friendCircle/at.png" width="32" height="32" color="#606266"></u-icon>
|
||||
<u-icon name="/static/images/friendCircle/at.png" width="24" height="24" color="#606266"></u-icon>
|
||||
</view>
|
||||
</u-cell>
|
||||
<u-cell bg-color="#ffffff" @click="toSetPromission()"
|
||||
@@ -90,6 +90,11 @@
|
||||
components:{
|
||||
videoPlayer
|
||||
},
|
||||
computed: {
|
||||
circleData() {
|
||||
return this.$store.getters.storeCircleData;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
winWidth:0,
|
||||
@@ -173,18 +178,24 @@
|
||||
if (this.releaseType == 2) {
|
||||
this.navbarTitle = "发表视频";
|
||||
}
|
||||
if (option.tempFilePaths != null && option.tempFilePaths != undefined && option.tempFilePaths.length > 0) {
|
||||
this.tempFilePaths = JSON.parse(option.tempFilePaths);
|
||||
if(this.releaseType!=0){
|
||||
//console.log("不是纯文字")
|
||||
this.submitFlag=false; //可以直接发布
|
||||
const _this = this;
|
||||
const eventChannel = this.getOpenerEventChannel();
|
||||
// 注意在 onUnload 取消监听，避免监听常驻内存
|
||||
eventChannel.on('successEvent', function(data) {
|
||||
console.log(data)
|
||||
if (data.tempFilePaths != null && data.tempFilePaths != undefined && data.tempFilePaths.length > 0) {
|
||||
_this.tempFilePaths = data.tempFilePaths;
|
||||
if(_this.releaseType!=0){
|
||||
//console.log("不是纯文字")
|
||||
_this.submitFlag=false; //可以直接发布
|
||||
}
|
||||
for (var i = 0; i < _this.tempFilePaths.length; i++) {
|
||||
let url= _this.tempFilePaths[i];
|
||||
_this.tempUploadFilePath.push({url:url});
|
||||
}
|
||||
//console.log("准备发朋友圈的临时文件", _this.tempUploadFilePath);
|
||||
}
|
||||
for (var i = 0; i < this.tempFilePaths.length; i++) {
|
||||
let url= this.tempFilePaths[i];
|
||||
this.tempUploadFilePath.push({url:url});
|
||||
}
|
||||
//console.log("准备发朋友圈的临时文件", this.tempUploadFilePath);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
@@ -202,6 +213,14 @@
|
||||
}
|
||||
});
|
||||
},
|
||||
onUnload() {
|
||||
try {
|
||||
const eventChannel = this.getOpenerEventChannel();
|
||||
eventChannel.off('successEvent');
|
||||
} catch (error) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
cdn:util.cdn,
|
||||
@@ -214,7 +233,7 @@
|
||||
//监听输入
|
||||
inputing:function(e){
|
||||
let content=e.detail.value.trim();
|
||||
//console.log("content",content);
|
||||
console.log("content",content);
|
||||
if(content.length>0){
|
||||
this.submitFlag=false;
|
||||
}else{
|
||||
@@ -225,11 +244,7 @@
|
||||
//如果不是纯文字
|
||||
else{
|
||||
//附件列表没有
|
||||
if(this.tempFilePaths.length<1){
|
||||
this.submitFlag=true;
|
||||
}else{
|
||||
this.submitFlag=false;
|
||||
}
|
||||
this.submitFlag = this.tempFilePaths.length<1;
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -247,11 +262,7 @@
|
||||
//如果不是纯文字
|
||||
else{
|
||||
//附件列表没有
|
||||
if(this.tempFilePaths.length<1){
|
||||
this.submitFlag=true;
|
||||
}else{
|
||||
this.submitFlag=false;
|
||||
}
|
||||
this.submitFlag = this.tempFilePaths.length<1;
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -432,7 +443,7 @@
|
||||
else{
|
||||
newCircle.comment=[];
|
||||
}
|
||||
let circleDataList=this.circleData;
|
||||
let circleDataList=[...this.circleData];
|
||||
circleDataList.unshift(newCircle);
|
||||
that.$u.vuex('circleData', circleDataList);
|
||||
that.btnLoading = false;
|
||||
|
||||
Reference in New Issue
Block a user