demingshangjia/pages/user/content.vue

<template>
	<view class="content">
		<view class="tab-swiper">
			<u-tabs-swiper
				ref="uTabs"
				:list="list"
				:current="current"
				@change="tabsChange"
				active-color="#FF780F"
				inactive-color="#333333"
				font-size="30"
				gutter="317"
				height="98"
				:show-bar="false"
				swiperWidth="750"
				:is-scroll="false"
			></u-tabs-swiper>
		</view>
		<view class="box">
			<view v-for="(item, index) in newlist" :key="index"><ContentItem :info="item" :type="type" @del="del"></ContentItem></view>
		</view>
		<u-popup v-model="show" mode="center">
			<view class="close-popup">
				<view class="tips">{{msg}}</view>
				<view class="btn">
					<view class="cancel" @click="show = false">取消</view>
					<view class="confirm" @click="delarticle">确定</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
import ContentItem from '@/components/content-item/index';
export default {
	data() {
		return {
			show: false,
			current: 0,
			swiperCurrent: 0,
			list: [
				{
					name: '图文'
				},
				{
					name: '视频'
				}
			],
			type: 1,
			num: 1,
			newlist: [],
			delid:null,
			msg:""
		};
	},
	components: {
		ContentItem
	},
	onLoad() {
		this.getlist();
	},
	onReachBottom() {
		this.num++;
		this.getlist();
	},
	methods: {
		getlist() {
			let that = this;
			this.$u.api.articlelist({
				type: that.type,
				page: that.num
			})
			.then(res => {
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					let arr = res.data.articleList;
					for (let index in arr) {
						that.newlist.push(arr[index]);
					}
				}
			});
		},
		del(e) {
			// 提示是否删除弹窗
			if(this.type==1){
				this.msg="确定要删除该图文吗?"
			}else{
				this.msg="确定要删除该视频吗?"
			}
			this.show = true;
			this.delid = e
		},
		// 删除文章
		delarticle(){
			let that = this;
			that.show = false;
			this.$u.api.delarticle({
				article_id: that.delid
			})
			.then(res => {
				console.log(res)
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'success'
					});
					// 删除后更新页面
					this.newlist = [];
					that.num=1
					that.getlist()
				}
			});
		},
		tabsChange(index) {
			this.current = index;
			this.type = index + 1;
			this.num = 0;
			this.newlist = [];
			this.getlist();
		}
	}
};
</script>
<style lang="scss" scoped>
.tab-swiper {
	width: 100%;
	position: fixed;
	top: 0;
	margin-bottom: 20rpx;
	z-index: 1000;
}
.content {
	min-height: calc(100vh - var(--window-top));
	background-color: #ececec;
	display: flex;
	flex-direction: column;
	> uni-swiper {
		flex: 1;
	}
	.box{
		padding-top: 120rpx;
	}
	.close-popup {
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		.tips {
			width: 420rpx;
			font-size: 28rpx;
			color: rgba(102, 102, 102, 1);
			text-align: center;
			padding: 38rpx 0;
		}
		.btn {
			width: 420rpx;
			border-top: 2rpx #ececec solid;
			display: flex;
			> view {
				font-size: 26rpx;
				flex: 1;
				line-height: 98rpx;
				text-align: center;
			}
			.cancel {
				color: #333333;
				border-right: 2rpx #ececec solid;
			}
			.confirm {
				color: #ff780f;
			}
		}
	}
}
</style>