CBB3/pages/chat/collection/collect.vue

<template>
	<view class="app">
		<uni-nav-bar statusBar backgroundColor="#fff" fixed title="我要转发" left-icon="left" @clickLeft="utils.navigateBack()"/>
		<view class="app">
			<view class="list" v-for="(item,index) in data">
				<view class="img" v-if="item.type == 'img'" @tap="tapOpen(index)">
					<image :src="item.data" mode="widthFix"></image>
				</view>
				<view class="text" v-if="item.type == 'text'" @tap="tapOpen(index)">
					{{item.data}}
				</view>
				
				<view class="text" v-if="item.type == 'voice'" @tap="tapOpen(index)">
					[语音文件{{parseInt(item.data.time/1000)}}秒]
				</view>
				
				
				<view class="info fx-r">
					<view class="nickname">{{item.nickname}}</view>
					<view class="time">{{item.time}}</view>
				</view>
				<view class="pop-del" @tap="tapDel(index)"><image src="/static/img/search_del.png"></image></view>
			</view>
			
			<view class="loading fx-r fx-ac fx-bc" v-if="page.isFrite && !page.isFoot">  
				<image src="/static/chat/xloading.png"></image>
				<text>正在载入更多...</text>
			</view>
			<view class="loading complete" :hidden="!page.isFoot">已加载全部</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="avatar" mode="aspectFill"></image>
					<view class="nickname">{{nickname}}</view>
				</view>
				
				<view class="img fx-h fx-bc fx-ac" style="height: 300px;" v-if="inData.type == 'text'">
					{{inData.data}}
				</view>
				
				<view class="img fx-h fx-bc fx-ac" style="height: 300px;" v-if="inData.type == 'img'">
					<image :src="inData.data" mode="widthFix"  @tap="tapOpenImg(inData.data)"></image>
				</view>
				
				<view  style="height: 300px;" v-if="inData.type == 'voice'">
					<view class="voice" @tap="playa(inData.id,inData.data.filePath)">
						<view class="i"></view>
						<text style="color: #2c2c2c;,margin-right: 3rpx;margin-right: 60px;">{{parseInt(inData.data.time/1000)}} "</text>
						<image v-if="playMsgId != inData.id" src="/static/chat/yyy.png" style="width: 15px;height: 15px; margin-left:4px;" mode="widthFix"></image>
						<image v-if="playMsgId == inData.id" src="/static/chat/yyy.gif" style="width: 15px;height: 15px; margin-left:4px;" mode="widthFix"></image>
					</view>
				</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">
	.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: 8px;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;}
	.btns{height: 50px;}
	.btns .btn{ width: 50%;text-align: center;line-height: 50px;color: #787878;}
	.btns .btn2{background: $ic-appcolor;color: #fff;border-radius: 0 0 6px 0;}
	.img image{width: 150px;margin: 10px 0;}
	
	.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;}
	
</style>


<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['user']),
		data() {
			return {
				data: [],
				nickname:"",
				groupId : 0,
				avatar : "",
				isPop:false,
				inData : {},
				img:"",
				playlyurl:"",
				playMsgId:"",
				page:{
					isFirst:false,
					isLoad:false,
					isFoot:false,
					page:1
				}
			}
		},
		onLoad(option) {
			//获取订单
			this.nickname = option.nickname || "";
			this.groupId = option.groupId || 0;
			this.avatar = option.avatar || "";
			this.getData();
		},
		onReachBottom() {
			if(this.page.isFoot || this.page.isLoad) {
				return;
			}
			this.page.page ++;
			this.getData();			
		},
		methods: {
			getData:function(isPull = false){
				if(this.page.isLoad) return;
				this.page.isLoad = true;
				if(isPull) {
					this.page.page = 1;
					this.page.isLoad = false;
					this.page.isFoot = false;
				}
				uni.showLoading({ title: '获取数据中..' });
				var post = {};
				post.page = this.page.page;
				this
					.request
					.post("chatCollect",post)
					.then(res => {
						uni.hideLoading();
						this.page.isFirst = true;
						this.page.isLoad = false;
						res.data.listData = this.inJson(res.data.listData);
						if(isPull) {
							this.data = res.data.listData;
						} else {
							this.data = this.data.concat(res.data.listData);
						}
						//是否到底
						if(res.data.listData.length != res.data.pageSize) {
							this.page.isFoot = true;
						}   
					})
					.catch(res=>{
						console.log(res);
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			},
			tapOpen:function(index){
				this.isPop = true;
				this.inData = this.data[index];
			},
			/**
			 * 发送数据
			 */	
			tapSend:function(){
				uni.showLoading({ title: '提交中..' });
				this
					.request
					.post("chatCollectSend",{
						msg_id	: this.inData['msg_id'],
						groupId : this.groupId
					})
					.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});
					});
			},
			
	
			
			tapDel:function(index) {
				this.utils.showModal("你确定要删除吗？", ()=>{
					uni.showLoading({ title:"提交数据中..." });
					this
						.request
						.post("chatCollectDel",{id:this.data[index].id})
						.then(res=>{
							uni.hideLoading();
							if(res.code == 200) {
								this.utils.Tip("删除成功");
								this.$delete(this.data,index);
							} else {
								this.utils.Tip(res.msg);
							}
						})
						.catch(err=>{
							uni.hideLoading();
							this.utils.Tip("加载失败，请重新尝试");
						});
					
					
				});
			},
			
			inJson:function(data){
				for(var i in data){
					if(this.utils.isJSON(data[i].data)) {
						data[i].data = JSON.parse(data[i].data);
					}
				}
				return data;
			},
			
			tapOpenImg:function(img){
				uni.previewImage({current:0,urls:[img]});
			},
			
			playa:function(msgId,filePath){
				var innerAudioContext =  uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				if(this.playlyurl == filePath){
					this.playlyurl = ''
					innerAudioContext.stop()
				}else{
					this.playlyurl = filePath;
					this.playMsgId = msgId;
					innerAudioContext.src = filePath;
					innerAudioContext.play()
					innerAudioContext.onEnded(()=>{
						this.playlyurl = ''
						this.playMsgId = "";
					})
				}
			}
		}
	}
</script>	

<style>
	.app .list{padding: 20px;position: relative;background-color: #fff;margin-top: 10px;}
	.app .list .info{font-size: 14px;color: #787878;}
	.app .list .info .time{margin-left: 10px;}
	.app .list .img image{max-width: 180px;border-radius: 6px;}
	.pop-del{position: absolute;right: 10px;top: 10px;}
	.pop-del image{width: 18px;height: 18px;}
</style>