MeetMateApp/pages/article/article.vue

<template>
	<view class="page">
		<view class="header">
			<view class="left">
				<image class="img" mode="aspectFill" src="../../static/article/name.png"></image>
			</view>
			<view class="right">
				<view class="btn" @click="goFabu">发动态</view>
			</view>
		</view>

		<view class="list_info">
			<block v-for="(item,index) in list" :key="index">
				<view class="item">
					<view class="avator" @click="goHome(item.userID)">
						<image class="icon" :src="item.avator" mode="aspectFill">
						</image>
					</view>
					<view class="tit">
						<view class="list1">
							<view class="name">
								{{item.nickname}}
							</view>
							<view class="sex2" v-if="item.sex == 2">
								<image class="icon" src="../../static/icon/woman.png" mode="aspectFill">
								</image>
								{{item.age}}
							</view>
							<view class="sex1" v-else>
								<image class="icon" src="../../static/icon/man.png" mode="aspectFill">
								</image>
								{{item.age}}
							</view>
							<view class="xinzuo" v-if="item.xinzuo != ''">{{item.xinzuo}}</view>
						</view>
						<view class="time">{{item.dtime}}</view>
					</view>
					<view class="state">

					</view>
				</view>
				<view class="content">
					{{item.content}}
				</view>
				<view class="photo_list">
					<view class="img" v-for="(item2,index2) in toArr(item.images)" :key="index2"
						@click="previewOpen(item.images,index2)" v-if="item2 != ''">
						<!-- <image class="icon" :src="item2" mode="aspectFill"></image> -->
						<image-cache class="icon" mode="aspectFill" :src="item2"></image-cache>
					</view>
				</view>
				<view class="desc">
					<view class="addr">{{item.city}}</view>
					<view class="img" @click="ZhanTA(item,index)" v-if="item.is_like < 1">
						<image class="icon" src="../../static/icon/zan.png" mode="aspectFill"></image>
						{{item.num_like}}
					</view>
					<view class="img" v-else>
						<image class="icon" src="../../static/icon/like.png" mode="aspectFill"></image>
						{{item.num_like}}
					</view>
					<view class="img" v-if="false">
						<image class="icon" src="../../static/icon/reply.png" mode="aspectFill"></image>
						{{item.num_comment}}
					</view>

				</view>
				<view class="line"></view>
			</block>

			<view class="blankHeight"></view>
		</view>

		<!-- <view class="no-content">
			<image class="icon" mode="widthFix" src="../../static/home/no.png"></image>
			<text>暂无数据</text>
		</view> -->
		<!-- 提示框 -->
		<DialogBox ref="DialogBox"></DialogBox>

		<previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="imgs" :descs="descs"></previewImage>
	</view>
</template>

<script>
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
	export default {
		components: {
			previewImage
		},
		data() {
			return {
				page: 1,
				list: [],
				imgs: [],
				descs: []
			}
		},
		onLoad() {

		},
		onShow() {
			this.page = 1;
			this.loadData();
		},
		methods: {
			onBack() {},
			goFabu() {
				uni.navigateTo({
					url: '/pages/article/addArticle'
				})
			},
			goHome(userID) {
				uni.navigateTo({
					url: '/pages/index/peopleHome?uid=' + userID
				})
			},
			toArr(imgs) {
				let arr = imgs.split("|");
				return arr;
			},
			//打开预览e
			previewOpen(imgs1, index) {
				this.imgs = imgs1.split("|");
				setTimeout(() => this.$refs.previewImage.open(index), 0)
				return; //如需测试和uni原生预览差别可注释这两行
			},
			loadData() {
				var offset = (this.page - 1) * 20;
				uni.request({
					url: this.$apiHost + '/Article/getlist',
					data: {
						uuid: getApp().globalData.uuid,
						offset: offset,
						ismy: 0
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log('请求了qqqqqqqqq');
						if (res.data.list == undefined || res.data.list == null) {
							res.data.list = []
						}
						if (this.page > 1) {
							this.list = this.list.concat(res.data.list)
						} else {
							this.list = res.data.list;
						}
					},
					complete: (com) => {
						// uni.hideLoading();
					},
					fail: (e) => {
						console.log("----e:", e);
					}
				});
			},
			ZhanTA(item, index) {
				// this.list[index].is_like = 1;
				// this.list[index].num_like++;
				// return;
				let that = this;
				uni.request({
					url: this.$apiHost + '/Article/zanTA',
					data: {
						uuid: getApp().globalData.uuid,
						id: item.id
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("----:", res.data);
						if (res.data.success == "yes") {
							that.list[index].is_like = 1;
							that.list[index].num_like++;
						}
					},
					complete: (com) => {
						// uni.hideLoading();
					},
					fail: (e) => {
						console.log("----e:", e);
					}
				});
			}
		},
		//滚动到底部
		onReachBottom() {
			console.log("onReachBottom");
			if (this.list.length > 0) {
				this.page++;
				this.loadData()
			}

		},
		//下拉刷新
		onPullDownRefresh() {
			console.log("onPullDownRefresh")
			this.list = []
			this.page = 1
			// console.log(this.lx)
			this.loadData()
			// setTimeout(() => {
			//     uni.stopPullDownRefresh()
			// },1000)
		},
	}
</script>

<style scoped lang="scss">
	@import 'article.scss';
</style>