uni-app 124转发功能实现

Posted 2021-12-28 2019ab

本篇文章主要讲的是处理留言的发送

下图是我测试的截图

pages/chat/chat-list/chat-list.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<free-nav-bar title="选择" showBack :showRight="true">
			<free-main-button :name="muliSelect ? '发送 ('+selectCount+')' : '多选'" slot="right" @click="handlenNav">
			</free-main-button>
		</free-nav-bar>
		<!-- 搜索框 -->
		<view class="p-3 bg-light position-fixed left-0 right-0" :style="'top:'+top+'px;'" style="z-index: 2;">
			<input type="text" value="" v-model="keyword" placeholder="搜索" class="bg-white rounded"
				placeholder-class="text-center" style="height: 80rpx;" />
		</view>
		<view style="height:140rpx;"></view>

		<free-list-item v-for="(item,index) in allList" :key="index" :title="item.name"
			:cover="item.avatar || '/static/images/userpic.png'" showRight :showRightIcon="false"
			@click="selectItem(item)">
			<view v-if="muliSelect" slot="right" class="border rounded-circle flex align-center"
				style="width: 40rpx;height: 40rpx;">
				<view v-if="item.checked" class="main-bg-color rounded-circle" style="width: 39rpx;height: 39rpx;">
				</view>
			</view>
		</free-list-item>

		<view style="height:100rpx;" class="flex align-center justify-center"
			v-if="keyword !== '' && searchList.length === 0">
			<text class="font text-light-muted">暂无搜索结果</text>
		</view>
		<free-confirm ref="confirm" title="发送给:">
			<scroll-view v-if="selectCount > 0" scroll-x="true" :show-scrollbar='false'>
				<view class="flex">
					<view class="mr-1" v-for="(item,index) in selectList" :key="index">
						<free-avatar :src="item.avatar" size="60"></free-avatar>
					</view>
				</view>
			</scroll-view>
			<view class="flex" v-else>
				<free-avatar :src="sendItem.avatar" size="60"></free-avatar>
				<text class="font text-muted ml-2">sendItem.name</text>
			</view>
			<view class="my-3 bg-light rounded p-2">
				<text class="font text-light-muted">message</text>
			</view>
			<input type="text" value="" class="border-bottom font-md" style="height: 60rpx;" placeholder="给朋友留言" v-model="content" />
		</free-confirm>
	</view>
</template>

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeMainButton from '@/components/free-ui/free-main-button.vue';
	import freeListItem from '@/components/free-ui/free-list-item.vue';
	import freeConfirm from '@/components/free-ui/free-confirm.vue';
	import freeAvatar from '@/components/free-ui/free-avatar.vue';
	import 
		mapState
	 from 'vuex';
	export default 
		components: 
			freeNavBar,
			freeMainButton,
			freeListItem,
			freeConfirm,
			freeAvatar
		,
		data() 
			return 
				keyword: '',
				muliSelect: false,
				top: 0,
				list: [],
				detail: ,
				sendItem: ,
				content:''
			
		,
		computed: 
			...mapState(
				chatList: state => state.user.chatList,
				chat: state => state.user.chat,
			),
			// 最终列表
			allList() 
				return this.keyword === '' ? this.list : this.searchList;
			,
			// 搜索结果列表
			searchList() 
				if (this.keyword === '') 
					return [];
				
				return this.list.filter(item => 
					return item.name.indexOf(this.keyword) !== -1;
				)
			,
			// 选中列表
			selectList() 
				return this.list.filter(item => item.checked)
			,
			// 选中数量
			selectCount() 
				return this.selectList.length;
			,
			message() 
				let obj = 
					image: '[图片]',
					video: '[视频]',
					audio: '[语音]',
					card: '[名片]',
					emoticon: '[表情]'
				;
				return this.detail.type === 'text' ? this.detail.data : obj[this.detail.type];
			
		,
		methods: 
			// 点击导航栏 (群发)
			handlenNav() 
				if (!this.muliSelect) 
					return this.muliSelect = true;
				
				// 发送
				if (this.selectCount === 0) 
					return uni.showToast(
						title: '请先选择',
						icon: 'none'
					);
				
				this.$refs.confirm.show((close) => 
					this.selectList.forEach(item => 
						this.send(item)
						
						if (this.content) 
							this.send(item, this.content, 'text')
						
					);
					close();
					uni.reLaunch(
						url: "../../tabbar/index/index"
					)
				);
			,
			// 选中、取消选中
			selectItem(item) 
				// 选中、取消选中
				if (this.muliSelect) 
					// 选中
					if (!item.checked && (this.selectCount === 9)) 
						// 限制选中数量
						return uni.showToast(
							title: '最多选中9个',
							icon: 'none'
						)
					
					
					// 取消选中
					return item.checked = !item.checked;
				
				// 发送
				this.sendItem = item;
				this.$refs.confirm.show((close) => 
					this.send(item);
					
					if (this.content) 
						this.send(item, this.content, 'text')
					
					
					close();
					uni.reLaunch(
						url: "../../tabbar/index/index"
					)
				);
			,
			send(item,data=false,type = false) 
				let message = this.chat.formatSendData(
					to_id: item.id,
					to_name: item.name,
					to_avatar: item.avatar,
					data:data || this.detail.data,
					type:type || this.detail.type,
					chat_type:item.chat_type,
					options: this.detail.opitons
				);
				this.chat.send(message);
				uni.$emit('updateHistory',false);
				
			
		,
		onLoad(e) 
			let res = uni.getSystemInfoSync();
			this.top = res.statusBarHeight + uni.upx2px(90);
			this.list = this.chatList.map(item => 
				return 
					...item,
					checked: false
				
			)

			if (e.params) 
				this.detail = JSON.parse(decodeURIComponent(e.params))
			
		
	
</script>

<style>

</style>

感谢大家观看，我们下次见