rtim/pages_im/pages/contact/applicationList/ApplicationItem.vue

<template>
	<view @click="clickItem" class="application_item">
		<my-avatar :src="getAvatarUrl" :isGroup="isGroupApplication" :desc="application[isRecv ? 'fromNickname' : 'toNickname']" size="42">
			<image v-if="getRole() == 1" class="taoj" src="/static/svg/doctor.svg"></image>
			<image v-if="getRole() == 2" class="taoj" src="/static/svg/guanjia.svg"></image>
		</my-avatar>

		<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" :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('操作成功');
				this.$store.dispatch('contact/getRecvFriendApplications');
				this.$store.dispatch('contact/getRecvGroupApplications');
			})
				.catch(() => uni.$u.toast('操作失败'))
				.finally(() => (this.accessLoading = false));
		},
		greetToUser() {
			navigateToDesignatedConversation(this.application[this.isRecv ? 'fromUserID' : 'toUserID'], SessionType.Single).catch(() => uni.$u.toast('获取会话信息失败'));
		},

		getRole() {
			let userType = 0;
			let userId = this.application.fromUserID;
			if (userId != undefined && (userId != '' || userId.length > 0)) {
				if (userId.indexOf('U') !== -1) {
					userType = 0;
				}
				if (userId.indexOf('D') !== -1) {
					userType = 1;
				}
				if (userId.indexOf('C') !== -1) {
					userType = 2;
				}
			}
			return userType;
		}
	}
};
</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: 0rpx 12rpx;
				height: 70rpx;
				line-height: 70rpx;
				background: #ff5c03;
				border-radius: 10rpx;
				color: #fff;
				border-color: #fff;
			}

			.greet {
				color: #999999;
			}
		}

		.bottom_line {
			height: 1px;
			width: 100%;
			background-color: #f0f0f0;
			position: absolute;
			bottom: -24rpx;
		}
	}
}

.u-list-item:last-child {
	.bottom_line {
		height: 0;
	}
}

.taoj {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}
</style>