CBB3/pages/chat/collection/transmit.vue

<template>
	<view>
		<uni-nav-bar statusBar backgroundColor="#fff" fixed title="我要转发" left-icon="left" @clickLeft="utils.navigateBack()">
		</uni-nav-bar>
		<view class="search-view fx-h fx-bc fx-ac">
			<u--input
				    placeholder="搜索联系人"
				    prefixIcon="search"
					clearable
					border="none"
				    prefixIconStyle="font-size: 22px;color: #909399"
					v-model="popKeyword"
					@input="tapPopKeyWord"
				></u--input>
		</view>
		
		<view style="padding: 10px;border-radius: 4px;">
			<view class="item fx-r fx-bc" @tap="taopPopItem(item2)" v-for="(item2,index2) in data">
				<image :src="item2.img" mode="aspectFill"></image>
				<view class="info fx-h fx-ac">
					<rich-text class="title" :nodes="getRanValue(item2.name)"></rich-text>
				</view>
			</view>
		</view>
		
		
		<view class="app-win fx-h fx-bc fx-ac" v-if="isPop">
			<view class="bg"></view>
			<view class="body">
				<view class="title">发送给:</view>
				<view class="nicknam-info fx-r fx-bc">
					<image :src="showData.img" mode="aspectFill"></image>
					<view class="nickname">{{showData.name}}</view>
				</view>
				
				<view class="img fx-h fx-bc fx-ac" v-if="inData.type == 'img'">
					<image :src="inData.data" mode="widthFix"></image>
				</view>
				
				<view class="text" v-if="inData.type == 'text'">
						{{inData.data}}
				</view>
				
				<view class="voice" v-if="inData.type == 'voice'" @tap="playa">
					<view class="i"></view>
					<text style="color: 2c2c2c;,margin-right: 3rpx;margin-right: 60px;">{{parseInt(inData.indata.time/1000)}} "</text>
					<image v-if="playlyurl != inData.indata.filePath" src="/static/chat/yyy.png" style="width: 15px;height: 15px; margin-left:4px;" mode="widthFix"></image>
					<image v-if="playlyurl == inData.indata.filePath" src="/static/chat/yyy.gif" style="width: 15px;height: 15px; margin-left:4px;" mode="widthFix"></image>
				</view>
				
				<view class="btns fx-r">
					<view class="btn" @tap="isPop = false">取消</view>
					<view class="btn btn2" @tap="tapSend">确认</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<style lang="scss">
	.search-view{background: #fff;margin-top: 1px;padding: 10px;}
	.search-view .u-input{width: 100%;}
	
	 .item{background: #fff;padding:0 10px;position: relative;}
	 .item:active{background: #f1f1f1;}
	 .item image{width: 40px;height: 40px;border-radius: 50%;}
	 .item .info{width: calc(100% - 70px);margin-left: 10px;font-size: 14px;color:#787878;border-bottom: 1px solid #f1f1f1;height: 60px;}
	 .item .flg{background: #ff5857;width: 20px;height: 20px;border-radius: 50%;font-size: 10px;text-align: center;line-height: 20px;color: #fff;}
	 .item:last-child .info{border-bottom: 0;}
	 .letter{padding: 10px;background: #F8F6F6;}
	
	
	.app-win{ position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 9;}
	.app-win .bg{background: rgba(0, 0, 0, 0.5); width: 100%;height: 100%;top: 0;left: 0;position: absolute;}
	.app-win .body{background: #fff;border-radius: 12px;position: relative;z-index: 8;padding-bottom: 0;width: 80%;}
	.app-win .body .title{padding: 10px;}
	.nicknam-info{padding: 10px;}
	.nicknam-info image{width: 40px;height: 40px;border-radius: 40px;}
	.nicknam-info .nickname{margin-left: 8px;}
	.text{font-size: 14px;padding: 30px;}
	
	.voice{margin: 10px;position: relative;min-height: 20px;font-size: 16px;background-color: #cceaff;max-width: calc(100% - 140rpx);padding: 20rpx;border-radius: 8rpx;word-break:break-all;display:inline-block;}
	.voice .i{width: 0;height: 0;right: -10px;position: absolute;border-top: 10px solid transparent; border-left: 10px solid #cceaff; border-bottom: 10px solid transparent;}
	
	
	.btns{height: 45px;border-radius: 0px 0px 12px 12px;}
	.btns .btn{ width: 50%;text-align: center;line-height: 45px;color: #787878;}
	.btns .btn2{background: $ic-appcolor;color: #fff;border-radius: 0 0 6px 0;}
	.btns .btn2:hover,.btns .btn:hover{opacity: .5;}
	.img image{width: 150px;margin: 10px 0;}
</style>


<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['user','sysData']),
	    data() {
	        return {
				msgId	: "",
				
				/**提醒人**/
				isPop		: false,
				toView		: "",
				chatUserList: [],
				letter  	: [],
				popKeyword	: "",
				popItemIn	: [],
				data		: [],
				dataAr		: [],
				showData	: {},
				inAr		: {},
				playlyurl   : ""
	        }  
	    },
		onLoad(option){
			this.msgId = option.msgId || "";
			this.inData = {data:option.data || "",type:option.type};
			if(option.type == 'voice') {
				this.inData.indata = JSON.parse(option.data);
			}
			this.initView();
		},
		
	    methods: {  
			//
			initView:function(){
				uni.showLoading({ title:"加载中.."});
				this
					.request  
					.get("chatListAll")
					.then(res=>{
						if(res.code == 200) {
							this.dataAr = res.data;
							uni.hideLoading();	
							this.letterView();
						} else {
							uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
						}
					});
			},
			/**
			 * 搜索观察家
			 */
			tapPopKeyWord:function(){
				this.letterView();
			},
			/**
			 * 排队数据
			 */
			letterView:function(){
				var tAr = [];
				for(var j in this.dataAr) {
					var jAr = this.dataAr[j];
					if(jAr.name.indexOf(this.popKeyword) >= 0) {
						tAr.push(jAr);
					}
				}
				console.log(tAr);
				this.data = tAr;
			},
			/**
			 * 遍历字符串
			 */
			getRanValue:function(str) {
				let value = str;
				if (value.indexOf(this.popKeyword)!==-1) {
					let reg = new RegExp(this.popKeyword, 'gi')
					return value.replace(reg, `<font style="color:#2fbec0">${this.popKeyword}</font>`)
				} else {
					return value
				}
			},
			/**
			 * 点击事件
			 */
			taopPopItem:function(item){
				this.isPop = true;
				this.showData = item;
			},
			
			/**
			 * 发送数据
			 */	
			tapSend:function(){
				uni.showLoading({ title: '提交中..' });
				this
					.request
					.post("forwarding",{
						groupId : this.showData['group_id'],
						...this.inData
					})
					.then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							this.utils.Tip("发送成功");
							setTimeout(()=>{
								uni.navigateBack();
							},200);
						} else {
							uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
						}
					})
					.catch(err=>{
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			},
			
			/**
			 * 
			 */
			groupSendClose:function(){
				uni.navigateBack({ delta:1 });
			},
			playa:function(){
				var innerAudioContext =  uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				if(this.playlyurl == this.inData.indata.filePath){
					this.playlyurl = ''
					innerAudioContext.stop()
				}else{
					this.playlyurl = this.inData.indata.filePath
					innerAudioContext.src = this.inData.indata.filePath
					innerAudioContext.play()
					innerAudioContext.onEnded(()=>{
						this.playlyurl = ''
					})
				}
			},
			
	    }
	}
</script>