MeetMateApp/pages/my/myArticle.vue

<template>
	<view class="page">
		<view class="mainBody">
			<view class="menu">
				<view class="item" :class="{'active':tab===1}" @click="checkTab(1)">
					<text class="left">全部</text>
					<view class="line"></view>
				</view>
				<view class="item" :class="{'active':tab===2}" @click="checkTab(2)">
					<text class="left">待审核</text>
					<view class="line"></view>
				</view>
				<view class="item" :class="{'active':tab===3}" @click="checkTab(3)">
					<text class="left">审核通过</text>
					<view class="line"></view>
				</view>
				<view class="item" :class="{'active':tab===4}" @click="checkTab(4)">
					<text class="left">审核拒绝</text>
					<view class="line"></view>
				</view>

			</view>
		</view>
		<view class="list_info">
			<block v-for="(item,index) in list" :key="index">
				<view class="item">
					<view class="avator">
						<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="widthFix">
								</image>
								{{item.age}}
							</view>
							<view class="sex1" v-else>
								<image class="icon" src="../../static/icon/man.png" mode="widthFix">
								</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 class="status_1" v-if="item.status == 1">已通过</view>
						<view class="status_2" v-if="item.status == 2">待审核</view>
						<view class="status_4" v-if="item.status == 4">拒绝</view>
					</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>
					</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="widthFix"></image>
						{{item.num_like}}
					</view>
					<view class="img" v-else>
						<image class="icon" src="../../static/icon/like.png" mode="widthFix"></image>
						{{item.num_like}}
					</view>
					<!-- <view class="img" >
						<image class="icon" src="../../static/icon/reply.png" mode="widthFix"></image>
						{{item.num_comment}}
					</view> -->
					<view class="img" @click="delArticle(item)">
						<image class="icon" src="../../static/icon/del.png" mode="widthFix"></image>
					</view>
				</view>
			</block>

			<view class="blankHeight"></view>
		</view>
		<DialogBoxW3 ref="DialogBoxW3"></DialogBoxW3>
		<ToastW3 ref="ToastW3"></ToastW3>
		<previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="imgs" :descs="descs"
			@longPress="longPress"></previewImage>
	</view>
</template>

<script>
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
	export default {
		components: {
			previewImage
		}, //注册插件
		data() {
			return {
				tab: 1,
				list: [],
				stype: 'get',
				imgs: ['../../static/a.jpg', '../../static/b.jpg', '../../static/c.jpg', '../../static/d.jpg',
					'../../static/e.png'
				],
				descs: [
					'人民大礼堂',
					'菜园坝火车站',
					'',
					'重庆大剧院由设计了中央电视台新大楼的华东设计院和德国设计公司联合设计，大剧院的设计以“孤帆远影”为主题，其建筑表面选用浅绿色的有机玻璃',
					'顶部底部数字都是1，超长的图片，看看能不能看到顶部和底部'
				]
			}
		},
		onLoad() {},
		onShow() {
			let that = this;
			// uni.setNavigationBarTitle({
			// 	titleNView: that.titleNView
			// });
			// this.setStyle(1, '我收到的')
			this.loadData();
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				uni.navigateTo({
					url: '/pages/article/addArticle'
				})
			}
		},
		methods: {
			setStyle(index, text) {
				let pages = getCurrentPages();
				let page = pages[pages.length - 1];
				// if (text.length > 3) {
				// 	text = text.substr(0, 3) + '...';
				// }
				// #ifdef APP-PLUS
				let currentWebview = page.$getAppWebview();
				let titleNView = currentWebview.getStyle().titleNView;
				// 添加文字过长截取为3个字符，请根据自己业务需求更改
				titleNView.buttons[0].text = text;
				currentWebview.setStyle({
					titleNView: titleNView
				});
				// #endif
				// #ifdef H5
				// h5 临时方案
				const btn = document.getElementsByClassName('uni-btn-icon')[index]
				btn.innerText = text;
				// #endif
			},

			// 删除动态

			delArticle(article) {
				console.log(article);
				this.$refs['DialogBoxW3'].confirm({
					title: '删除动态',
					content: '请确认是否删除此条动态?',
					DialogType: 'inquiry',
					btn1: '取消',
					btn2: '删除',
					animation: 0
				}).then((res) => {

					uni.request({
						url: this.$apiHost + '/Article/doAct',
						data: {
							uuid: getApp().globalData.uuid,
							act: 'del',
							id: article.id
						},
						header: {
							"content-type": "application/json",
							'sign': getApp().globalData.headerSign
						},
						success: (res) => {
							uni.showToast({
								title: res.data.str,
								icon: 'none'
							});
							if (res.data.success == 'yes') {
								this.loadData();
							}
						},
						complete: (com) => {
							// uni.hideLoading();
						},
						fail: (e) => {
							console.log("----e:", e);
						}
					});

				})
			},
			onClickButton1() {
				console.log('点击了按钮1')
			},
			onClickButton2() {
				console.log('点击了按钮2')
			},
			onBack() {},
			checkTab(tab) {
				this.tab = tab;
				this.loadData();
			},
			toArr(imgs) {
				let arr = imgs.split("|");
				return arr;
			},
			previewOpen(imgs1, index) {
				this.imgs = imgs1.split("|");
				// this.descs = [];
				// for (var i = 0; i < this.imgs.length; i++) {
				// 	this.descs.push(i + 1);
				// }
				// var param = e.currentTarget.dataset.src;
				// console.log(param);
				// this.imgs = ['../../static/home/avator.png', '../../static/me/sex_2.png', '../../static/home/avator.png'];
				setTimeout(() => this.$refs.previewImage.open(index), 0) // 传入当前选中的图片地址或序号
				return; //如需测试和uni原生预览差别可注释这两行
			},
			//长按事件
			longPress(data) {
				console.log(data);
				uni.showModal({
					showCancel: false,
					title: '长按事件',
					content: '已触发长按事件,你可以在这里做更多',
					success: showResult => {

					}
				});
			},
			loadData() {
				console.log("this.tab", this.tab)
				uni.request({
					url: this.$apiHost + '/Article/getlist',
					data: {
						uuid: getApp().globalData.uuid,
						ismy: 1,
						tab: this.tab
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log("----:", res.data);
						if (res.data.list != null) {
							this.list = res.data.list;
						} else {
							this.list = [];
						}
					},
					complete: (com) => {
						// uni.hideLoading();
					},
					fail: (e) => {
						console.log("----e:", e);
					}
				});
			},
		}
	}
</script>

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