xmt/pages/user/mymsg.vue

<template>
	<view class="content">
		<empty v-if="list.loaded === true && list.length === 0"></empty>
		<view class="">
			<view class="pl-wrap" v-for="(item, index) in list" @click="navTo(item)">
				<!-- 用户名 -->
				<view class="user-info flex">
					<view class="user-logo">
						<image :src="userInfo.avatar" class="avater-img" mode="" v-if="userInfo.avatar"></image>
						<image src="../../static/error/missing-face.png" mode="" v-else class="avater-img"></image>
					</view>
					<view class="user-num">
						<view class="user-name">{{ userInfo.nickname }}</view>
						<view class="sub-num">{{ item.create }}</view>
					</view>
				</view>
				<!-- 评价 -->
				<view class="pl">{{ item.to.content }}</view>
				<!-- 别人的评论 -->
				<view class="other-pl" v-if="item.user != null">
					<text class="text">{{ item.user.nickname }}</text>
					回复我 ：
					<text>{{ item.to.content }}</text>
				</view>
				<view class="other-pl" v-if="item.user == null">
					<text class="text">管理员</text>
					回复我 ：
					<text>{{ item.content }}</text>
				</view>
				<!-- 文章简介 -->
				<view class="art flex">
					<view class="art-img" v-if="item.article.image_input.length > 0"><image :src="item.article.image_input[0]" mode=""></image></view>
					<view class="art-jj clamp2">{{ item.article.title }}</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
import { to_my_reply } from '@/api/user.js';
import { getTime } from '@/utils/rocessor.js';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		empty,
		uniLoadMore
	},
	data() {
		return {
			page: 1,
			limit: 10,
			loadingType: 'more',
			list: []
		};
	},
	onLoad() {
		this.loadData();
	},
	computed: {
		...mapState('user', ['hasLogin', 'userInfo'])
	},
	onReachBottom() {
		this.loadData();
	},
	methods: {
		loadData() {
			const obj = this;
			if (obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
				return;
			}
			obj.loadingType = 'loading';
			to_my_reply({
				page: obj.page,
				limit: obj.limit
			}).then(({ data }) => {
				console.log(data);
				if (data.list.length != '') {
					data.list.forEach(e => {
						e.create = getTime(e.add_time);
						console.log(e);
					});
					obj.list = obj.list.concat(data.list);
				}
				if (data.list.length === obj.limit) {
					obj.page++;
					obj.loadingType = 'more';
				} else {
					obj.loadingType = 'noMore';
				}
				this.$set(obj.list, 'loaded', true);
			});
		},
		navTo(item){
			uni.navigateTo({
				url:'/pages/user/article?id='+ item.article.id
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	padding-top: 20rpx;
}
.pl-wrap {
	background-color: #fff;
	padding: 20rpx 30rpx;
}
.user-info {
	.user-logo {
		flex-shrink: 0;
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}
	.user-num {
		flex-grow: 1;
		padding-left: 10rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		.user-name {
			font-size: 34rpx;
			font-weight: 600;
			color: #333333;
			padding-right: 20rpx;
			padding: 0 20rpx 20rpx 0;
		}
	}
}
.pl {
	font-size: 24rpx;
	font-weight: 500;
	color: #333333;
	padding-top: 30rpx;
}
.other-pl {
	width: 690rpx;
	margin-top: 10rpx;
	padding: 16rpx;
	font-size: 24rpx;
	background: #f5f5f5;
	text {
		word-break: break-all;
		word-wrap: break-word;
	}
	.text {
		color: #3a41ee;
	}
}
.art {
	margin-top: 15rpx;
	width: 690rpx;
	height: 138rpx;
	background: #f6f9fc;
	padding: 15rpx 18rpx;
	.art-img {
		flex-shrink: 0;
		width: 169rpx;
		height: 108rpx;
		border-radius: 10rpx;
		margin-right: 17rpx;
		image {
			width: 169rpx;
			height: 108rpx;
		}
	}
	.art-jj {
		flex-grow: 1;
		font-size: 23rpx;
		font-weight: 500;
		color: #323232;
	}
}
</style>