Initial commit
This commit is contained in:
246
pages/contact/applicationList/ApplicationItem.vue
Normal file
246
pages/contact/applicationList/ApplicationItem.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<view @click="clickItem" class="application_item">
|
||||
<my-avatar
|
||||
:src="getAvatarUrl"
|
||||
:isGroup="isGroupApplication"
|
||||
:desc="application[isRecv ? 'fromNickname' : 'toNickname']"
|
||||
size="42"
|
||||
/>
|
||||
<view class="application_item_details">
|
||||
<view class="content">
|
||||
<text class="user_name">{{ getShowName }}</text>
|
||||
|
||||
<view v-if="isGroupApplication" class="title">
|
||||
申请加入
|
||||
<text class="group_name">{{ application.groupName }}</text>
|
||||
</view>
|
||||
<text class="req_message">{{ application.reqMsg }}</text>
|
||||
</view>
|
||||
|
||||
<view class="application_action">
|
||||
<text v-if="showStateStr" class="status_tip">{{ getStateStr }}</text>
|
||||
<text v-if="showGreet" @tap.stop="greetToUser" class="status_tip greet"
|
||||
>打招呼</text
|
||||
>
|
||||
<button
|
||||
:loading="accessLoading"
|
||||
v-if="showAccept"
|
||||
class="access_btn"
|
||||
@tap.stop="acceptApplication"
|
||||
type="primary"
|
||||
:plain="true"
|
||||
size="mini"
|
||||
>
|
||||
{{ isGroupApplication ? "同意" : "接受" }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="bottom_line"> </view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { navigateToDesignatedConversation } from "@/util/imCommon";
|
||||
import IMSDK, { SessionType } from "openim-uniapp-polyfill";
|
||||
import MyAvatar from "@/components/MyAvatar/index.vue";
|
||||
export default {
|
||||
name: "ApplicationItem",
|
||||
components: {
|
||||
MyAvatar,
|
||||
},
|
||||
props: {
|
||||
application: Object,
|
||||
isRecv: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
accessLoading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isGroupApplication() {
|
||||
return this.application.groupID !== undefined;
|
||||
},
|
||||
getShowName() {
|
||||
if (this.isRecv) {
|
||||
return this.application[
|
||||
this.isGroupApplication ? "nickname" : "fromNickname"
|
||||
];
|
||||
}
|
||||
return this.application[
|
||||
this.isGroupApplication ? "groupName" : "toNickname"
|
||||
];
|
||||
},
|
||||
showGreet() {
|
||||
return !this.isGroupApplication && this.application.handleResult === 1;
|
||||
},
|
||||
showStateStr() {
|
||||
if (
|
||||
(this.isRecv && this.application.handleResult === 0) ||
|
||||
this.showGreet
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
showAccept() {
|
||||
return this.application.handleResult === 0 && this.isRecv;
|
||||
},
|
||||
getStateStr() {
|
||||
if (this.application.handleResult === -1) {
|
||||
return "已拒绝";
|
||||
}
|
||||
if (this.application.handleResult === 0) {
|
||||
return "等待验证";
|
||||
}
|
||||
return "已同意";
|
||||
},
|
||||
getAvatarUrl() {
|
||||
if (this.isGroupApplication) {
|
||||
return this.application.groupFaceURL;
|
||||
}
|
||||
return this.application[this.isRecv ? "fromFaceURL" : "toFaceURL"];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickItem() {
|
||||
if (this.showAccept) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/contact/applicationDetails/index?application=${JSON.stringify(
|
||||
this.application,
|
||||
)}`,
|
||||
});
|
||||
} else {
|
||||
let sourceID =
|
||||
this.application.groupID ??
|
||||
(this.isRecv
|
||||
? this.application.fromUserID
|
||||
: this.application.toUserID);
|
||||
let cardType = this.isGroupApplication ? "groupCard" : "userCard";
|
||||
const url = `/pages/common/${cardType}/index?sourceID=${sourceID}`;
|
||||
uni.navigateTo({
|
||||
url,
|
||||
});
|
||||
}
|
||||
},
|
||||
acceptApplication() {
|
||||
this.accessLoading = true;
|
||||
let func;
|
||||
if (this.isGroupApplication) {
|
||||
func = IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.AcceptGroupApplication,
|
||||
IMSDK.uuid(),
|
||||
{
|
||||
groupID: this.application.groupID,
|
||||
fromUserID: this.application.userID,
|
||||
handleMsg: "",
|
||||
},
|
||||
);
|
||||
} else {
|
||||
func = IMSDK.asyncApi(
|
||||
IMSDK.IMMethods.AcceptFriendApplication,
|
||||
IMSDK.uuid(),
|
||||
{
|
||||
toUserID: this.application.fromUserID,
|
||||
handleMsg: "",
|
||||
},
|
||||
);
|
||||
}
|
||||
func
|
||||
.then(() => uni.$u.toast("操作成功"))
|
||||
.catch(() => uni.$u.toast("操作失败"))
|
||||
.finally(() => (this.accessLoading = false));
|
||||
},
|
||||
greetToUser() {
|
||||
navigateToDesignatedConversation(
|
||||
this.application[this.isRecv ? "fromUserID" : "toUserID"],
|
||||
SessionType.Single,
|
||||
).catch(() => uni.$u.toast("获取会话信息失败"));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.application_item {
|
||||
// @include vCenterBox();
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 24rpx 44rpx;
|
||||
color: $uni-text-color;
|
||||
background-color: #fff;
|
||||
|
||||
&_details {
|
||||
@include vCenterBox();
|
||||
margin-left: 24rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.content {
|
||||
@include colBox(false);
|
||||
font-size: 26rpx;
|
||||
width: 100%;
|
||||
|
||||
.user_name {
|
||||
@include nomalEllipsis();
|
||||
max-width: 400rpx;
|
||||
font-size: 28rpx;
|
||||
color: $uni-text-color;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.req_message {
|
||||
@include ellipsisWithLine(2);
|
||||
max-width: 80%;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 20rpx;
|
||||
word-break: break-all;
|
||||
width: 75%;
|
||||
|
||||
.group_name {
|
||||
margin-left: 12rpx;
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.application_action {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
.status_tip {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.access_btn {
|
||||
padding: 0 12rpx;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.greet {
|
||||
color: #418ae5;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_line {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #f0f0f0;
|
||||
position: absolute;
|
||||
bottom: -24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-list-item:last-child {
|
||||
.bottom_line {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
173
pages/contact/applicationList/index.vue
Normal file
173
pages/contact/applicationList/index.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<view class="application_list_container">
|
||||
<custom-nav-bar :title="isGroupApplication ? '新的群聊' : '新的好友'" />
|
||||
<view
|
||||
class="pane_row"
|
||||
:style="{ transform: `translateX(${isRecv ? '0' : '-100%'})` }"
|
||||
>
|
||||
<view class="pane_content">
|
||||
<u-list v-if="getRecvRenderData.length > 0" class="application_list">
|
||||
<u-list-item
|
||||
v-for="application in getRecvRenderData"
|
||||
:key="
|
||||
application[!isGroupApplication ? 'fromUserID' : 'userID'] +
|
||||
application.groupID
|
||||
"
|
||||
>
|
||||
<application-item :isRecv="true" :application="application" />
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
<u-list
|
||||
v-else-if="getSendRenderData.length > 0"
|
||||
class="application_list"
|
||||
>
|
||||
<u-list-item
|
||||
v-for="application in getSendRenderData"
|
||||
:key="application[!isGroupApplication ? 'toUserID' : 'groupID']"
|
||||
>
|
||||
<application-item :application="application" />
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
<view v-else class="empty">
|
||||
<image src="@/static/images/block_empty.png"></image>
|
||||
<text class="empty_text">暂无数据</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import { ContactMenuTypes } from "@/constant";
|
||||
import CustomNavBar from "@/components/CustomNavBar/index.vue";
|
||||
import ApplicationItem from "./ApplicationItem.vue";
|
||||
export default {
|
||||
components: {
|
||||
CustomNavBar,
|
||||
ApplicationItem,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
keyword: "",
|
||||
isRecv: true,
|
||||
isGroupApplication: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"storeRecvFriendApplications",
|
||||
"storeSentFriendApplications",
|
||||
"storeRecvGroupApplications",
|
||||
"storeSentGroupApplications",
|
||||
]),
|
||||
getRecvRenderData() {
|
||||
const tmpList = this.isGroupApplication
|
||||
? this.storeRecvGroupApplications
|
||||
: this.storeRecvFriendApplications;
|
||||
tmpList.sort((a, b) => (a.handleResult === 0 ? -1 : 1));
|
||||
return tmpList.slice(0, 4);
|
||||
},
|
||||
getSendRenderData() {
|
||||
const tmpList = this.isGroupApplication
|
||||
? this.storeSentGroupApplications
|
||||
: this.storeSentFriendApplications;
|
||||
tmpList.sort((a, b) => (a.handleResult === 0 ? -1 : 1));
|
||||
return tmpList.slice(0, 4);
|
||||
},
|
||||
tabList() {
|
||||
return [
|
||||
{
|
||||
name: this.isGroupApplication ? "入群申请" : "好友请求",
|
||||
},
|
||||
{
|
||||
name: "我的请求",
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
onLoad(params) {
|
||||
const { applicationType } = params;
|
||||
this.isGroupApplication = applicationType === ContactMenuTypes.NewGroup;
|
||||
},
|
||||
methods: {
|
||||
clickTab({ index }) {
|
||||
this.isRecv = index === 0;
|
||||
},
|
||||
previewAll() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/contact/applicationListDetails/index?isGroupApplication=${this.isGroupApplication}&isRecv=${this.isRecv}`,
|
||||
});
|
||||
},
|
||||
toSearch() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/searchUserOrGroup/index?isSearchGroup=${this.isGroupApplication}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.empty {
|
||||
@include centerBox();
|
||||
flex-direction: column;
|
||||
margin-top: 25vh !important;
|
||||
|
||||
&_text {
|
||||
margin-top: 26rpx;
|
||||
color: #8e9ab0;
|
||||
}
|
||||
image {
|
||||
width: 237rpx;
|
||||
height: 244rpx;
|
||||
}
|
||||
}
|
||||
.application_list_container {
|
||||
@include colBox(false);
|
||||
height: 100vh;
|
||||
background-color: #f8f9fa;
|
||||
overflow-x: hidden;
|
||||
|
||||
.search_bar_wrap {
|
||||
height: 34px;
|
||||
padding: 12px 22px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.u-tabs {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.pane_row {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
transition: all 0.3s ease 0s !important;
|
||||
background-color: #fff;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.pane_content {
|
||||
@include colBox(false);
|
||||
height: 100%;
|
||||
flex: 0 0 100%;
|
||||
|
||||
.pane_title {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
padding: 12rpx 44rpx;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.application_list {
|
||||
flex: 1;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view_all {
|
||||
background-color: #fff;
|
||||
padding: 44rpx 44rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user