liaotian/pages/index/record.vue

<template>
	<view class="page">
		<view class="list-footer">
			<view class="searchOut">
				<uni-search-bar ref="searchBar" placeholder="搜索" bgColor="#F7F7F7" :show="false" @confirm="search"
					@input="search">
				</uni-search-bar>
			</view>
		</view>
        <scroll-view scroll-y="true" class="chat-list" :style="{'height': maxheight}" @scrolltolower="getDate">
        	<view v-for="(row,index) in list" class="chat-item">
        		<view class="u-img">
        			<image
        				:src="row.sender.avatar"
        				:lazy-load="true" style="border-radius: 10px;" :data-id="index" @error="imageError"
        				class="u-logo"></image>
        		</view>
        		<view class="u-content">
        			<view class="chat-time">
        				<view class="">
        					<!-- {{row.msg.user_info.uid == 0 ? '系统': (row.msg.user_info.show_name || row.msg.user_info.name || '')}} -->
                            {{row.sender.nickname}}
        				</view>
        				<view class="">
        					<!-- {{ timestampFormat(row.msg.time + '') }} -->
                            {{timestampToTime(row.addtime)}}
        				</view>
        			</view>
        			<view class="chat-content">
                        <!-- <image v-if="row.type == 'image'" :src="row.content1" mode="widthFix" style="max-width: 80%;"></image>
                        <view v-if="row.type == 'video'" class="" v-html="row.content">
                            
                        </view> -->
        				<rich-text  :nodes="row.content"
        					space="true" />
                      <!--  <view v-if="row.type == 'text'" class="">
                            {{row.content}}
                        </view> -->
        			</view>
        		</view>
        	</view>
        </scroll-view>
	</view>
</template>

<script>
    import http from "../../library/http.js"
	export default {
		
		data() {
			return {
                user: uni.getStorageSync('userInfo'),
				// emojiList: emoj_data.emoji_list,
				maxheight: '',
				list: [],
				group_id: '',
				chat_msg: '',
                page: 1,
                limit: 30,
                loadingType: 'more',
                isgroup: 0,
			};
		},
		computed: {
			staticPhoto() {
				return _data.staticPhoto();
			},
		},
		onLoad(opt) {
			this.group_id = opt.group_id
            this.isgroup = opt.isgroup
			this.getDate('reload')
		},
		onShow() {
			let _this = this;
		},
		onReady(res) {
			var that = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.chat-list').boundingClientRect();
					query.exec(function(res) {
						that.maxheight = resu.windowHeight - res[0].top + 'px';
                        console.log(that.maxheight);
					});
				},
				fail: res => {}
			});
		},
		methods: {
            timestampToTime(timestamp) {
                var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear();
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
                var D = date.getDate();
                var h = date.getHours();
                var m = date.getMinutes();
                var s = date.getSeconds();
                if (D < 10) D = '0' + D;
                if (h < 10) h = '0' + h;
                if (m < 10) m = '0' + m;
                if (s < 10) s = '0' + s;
                return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s;
            },
			imageError(e) {
				let index = e.currentTarget.dataset.id;
				this.list[index].msg.user_info.face = "/default_photo_path.png";
			},
			getDate(type) {
				let that = this
                if(type == 'reload') {
                    that.list = []
                    that.page = 1
                    that.loadingType = 'more'
                }
                if(that.loadingType == 'loading' || that.loadingType == 'noMore') {
                    return 
                }
                that.loadingType = 'loading'
				 http.setWait(false).get('group.php?act=search_msg',{
                     id: that.group_id,
                     page: that.page,
                     limit: that.limit,
                     key: that.chat_msg,
                     isgroup: that.isgroup,
                     userid: that.user.id
                 }).then(res => {
                    if(res.data && res.data.length > 0) {
                        let data = [];
                        res.data.forEach(item => {
                            if(item.type != 'time') {
                                item.content = item.content.split('-qute-')[0]
                                data.push(item)
                            }
                        })
                        that.list = that.list.concat(data.reverse())
                        that.page++
                        that.loadingType = 'more'
                    }else {
                        that.loadingType = 'noMore'
                    }
                     
                     
                     console.log(that.list);
                 })
			},
			search(chat_msg) {
				let that = this
				that.chat_msg = chat_msg.trim();
				this.getDate('reload')
                console.log(that.chat_msg,'that.chat_msg');
			},
		}

	}
</script>

<style scoped lang="scss">
    page {
        height: auto;
        min-height: 100%;
    }
	.chat-list {
		background-color: #fff;
	}
	.u-logo {
		width: 75rpx !important;
		height: 75rpx !important;
		flex-shrink: 0;
	}
	.chat-item {
		display: flex;
		.u-img {
			// padding: 30rpx;
			width: 135rpx;
			height: 135rpx;
			flex-shrink: 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.u-content {
			flex-grow: 1;
			border-bottom: 1px solid #ededed;
			padding-right: 30rpx;
			padding-left: 15rpx;
			.chat-time {
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0rpx;
			}
			.chat-content {
				padding: 10rpx 0rpx;
			}
		}
	}
</style>