teaching-uniapp/pages/mineRelease/mineRelease.vue

<template>
	<view>
		<statusBar :item="navBarData"></statusBar>
		<view class="activeBox" v-for="(item,index) in activeList" :key="index">
			<view class="teaching_case" >
				<view class="img">
					<!-- <image src="https://teacherapi.cocorobo.cn/teaching-file/static//activity/bg2.png" mode="aspectFill"></image> -->
					<image :src="item.pic" mode="aspectFill"></image>

				</view>

				<view class="right">
					<view class="title">
						<view class="tag bqZ-font">类型</view>
						<text class="three-font" style="font-weight: 550;">{{ item.acName }}</text>
					</view>

					<view class="introduce">
						<view class="money fNum-font"><text class="three-font">￥</text> {{ item.cost }}</view>
					</view>

					<view class="operate">
						<view class="left">
							<!-- <view class="person">浏览0 · 订阅{{ item.snum }} · 收藏{{ item.dnum }} · 已购0</view> -->
							<view class="person"> 订阅{{ item.snum }} · 收藏{{ item.dnum }} </view>
						</view>

						<view class="Oright" @click="gotoActdetail" :data-info="item">
							<view class="text">查看详情</view>
							<view class="arrow">
								<image
									src="https://teacherapi.cocorobo.cn/teaching-file/static//mine/arrow-right-blue.png"
									mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="controls">
				<view class="controls_btns">
					<button @click="gotoEdit" :data-aid="item.acId">编辑</button>
					<button @click="actDelete" :data-aid="item.acId">删除</button>
				</view>
			</view>
		</view>

		<view class="loading">
			<view v-if="newsLoading==1">数据加载中...</view>
			<view v-if="newsLoading==2">没有更多了~~</view>
		</view>

		<view class="" style="width: 100%;height: 50rpx;"></view>

		<!-- 弹窗 -->
		<view>
			<!-- <view class="mask" v-show="showPopup" @click="closePopup"></view> -->
			<view class="popup-container" v-show="showPopup">
				<view class="popup">
					<view class="header">
						<text>确认删除</text>
					</view>
					<view class="footer">
						<view class="cancel-btn" @click="showPopup= false">取消</view>
						<view class="confirm-btn" @click="confirm">确认</view>
					</view>
				</view>
			</view>
		</view>
		
		<view>
			<!-- <view class="mask" v-show="showPopupConfirm" @click="closePopup"></view> -->
			<view class="popup-container" style="height: 175px;" v-show="showPopupConfirm">
				<view class="popup">
					<view class="header" style="margin-top: 15px;">
						<image src="https://teacherapi.cocorobo.cn/teaching-file/static//gou1.png" mode="aspectFill">
						</image>
						<text style="margin-bottom: 24px;">删除成功</text>
					</view>
		
				</view>
			</view>
		</view>
		
		
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navBarData: {
					title: '我的发布', //导航栏标题
					btn: 1 //是否显示返回按钮 0不显示  1 显示
				},
				showPopup: false,
				showPopupConfirm:false,
				deleteAcId: '',
				// 触底加载动画提示
				newsLoading: 0, //0默认值  1加载中 2没有更多了
				// 分页查询
				currentPage: 1,
				// 渲染数据列表
				activeList: [],
			};
		},
		methods: {
			// 获取数据渲染数据
			getpublish() {
				// const oid = 
				let data = {
					openid: this.$store.state.user.openid,
					page: this.currentPage, //下拉获取更多的备用字段
					lim: 15 //一次获取多少数据
				}
				this.$request('/selectMyPublish', "POST", data).then(res => {
					console.log("我的发布", res[0].length);
					// 看是否有发布过数据，没有的话提示通知
					if (!res[0].length) {
						this.newsLoading = 2
						return
					} else {
						this.activeList = [...this.activeList,...res[0]]
					}
				})
			},
			// 查看详情
			gotoActdetail(e) {
				// console.log(e.currentTarget.dataset.aid);
				let data = e.currentTarget.dataset.info
				console.log(data);
				if(data.type==0 || data.type==1){
					uni.navigateTo({
						url: `/pages/activityDetail/activityDetail?acId=${data.acId}`
					});
					return
				}else{
					uni.navigateTo({
						url: `/pages/teachingDetail/teachingDetail?acId=${data.acId}`
					});
				}
			},
			// 编辑功能
			gotoEdit(e) {
				console.log(e);
				let acid = e.currentTarget.dataset.aid
				uni.navigateTo({
					url: `/pages/publish/publish?acId=${acid}`
				});
			},
			// 显示删除弹窗
			actDelete(e) {
				this.deleteAcId = e.currentTarget.dataset.aid;
				this.showPopup = true; //显示弹窗
			},
			// 删除功能
			confirm() {
				let data = {
					oid: this.$store.state.user.openid, //用户id
					aid: this.deleteAcId,
				}
				this.showPopupConfirm=true
				this.$request('/deleteMyPublish', "POST", data).then(res => {
					
					this.showPopup = false
					
					setTimeout(()=>{
						this.showPopupConfirm=false
					},1500)
					
					// 在列表里也将他删除
					this.newsLoading=0
					this.currentPage=1
					// this.activeList=this.activeList.filter(e=>{
					// 	return e.acId!=this.deleteAcId
					// })
					 this.activeList=[]
					this.getpublish()
				})
			},
			closePopup() {
				// 取消操作
				this.showPopup = false
				this.deleteAcId = null
			},
		},
		// 触底加载更多
		onReachBottom() {
			if (this.newsLoading == 2) {
				return
			}
			this.newsLoading = 1
			this.currentPage++
			setTimeout(this.getpublish, 1000)

		},
		onShow() {
			// 重新恢复初始状态
			this.newsLoading = 0
			this.currentPage=1
			this.activeList=[]
			this.getpublish();
		}
	}
</script>

<style lang="scss" scoped>
	.loading {
		height: 50rpx;
		text-align: center;
		padding-top: 20rpx;
		padding-bottom: 100rpx;
		font-size: 26rpx;
		color: #888;
		line-height: 2em;
	}

	.activeBox {
		width: 750rpx;
		padding: 30rpx;
		background-color: #fff;
		// &:first-child{
		// 	padding: 10px 0 0 0;
		// }

		.teaching_case {
			display: flex;
			justify-content: space-between;
			// padding: 10px 10px;
			// border-top: 1px solid #E7E7E7;
			padding-bottom: 25rpx;

			.img {
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
			}

			.right {
				// padding-left: 15px;
				flex: 1;
				display: flex;
				flex-direction: column;
				// align-content: flex-end;
				justify-content: space-between;

				// box-sizing: border-box;
				.title {
					display: flex;
					align-items: center;

					margin-bottom: 5px;

					.tag {
						border: 1px #00b2b6 solid;
						// font-size: 20rpx;
						width: 64rpx;
						height: 38rpx;
						display: flex;
						white-space: nowrap;
						justify-content: center;
						align-items: center;
						padding: 1rpx 4rpx;
						border-radius: 3px;
						margin-right: 10rpx;
						color: #00b2b6;
					}

					text {
						width: 190px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

				}

				.introduce {
					width: 230px;
					// font-size: 28rpx;
					// color: #a7a7a7;
					// margin-top: 8px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					.money {
						color: #FFA338;
						font-weight: bold;
						font-size: 36rpx;
						line-height: 20px;
					}
				}

				.operate {
					display: flex;
					justify-content: space-between;
					align-items: baseline;

					.left {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: baseline;
						width: 330rpx;

						.person {
							color: #00000099;
							font-size: 20rpx;
							// margin-left: 6px;
						}
					}

					.Oright {
						// width: 200rpx;
						display: flex;
						justify-content: flex-end;
						align-items: center;


						.text {
							font-size: 24rpx;
							color: #3081E8;
						}

						.arrow {
							display: flex;
							justify-content: center;
							margin-top: 5rpx;

							image {
								width: 32rpx;
								height: 32rpx;
							}
						}
					}
				}
			}
		}

		.controls {
			display: flex;
			justify-content: flex-end;
			padding: 0 10px;
			border-top: 1px solid #E7E7E7;
			align-items: center;
			height: 45px;

			.controls_btns {
				display: flex;
				align-items: center;
				width: 115px;
				height: 35px;

				button {
					width: 96rpx;
					height: 48rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					border: 1px solid #3081E8;
					background-color: white;
					color: #3081E8;
					padding: 0;
					line-height: 23px;
				}

			}
		}
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 999;
		overflow: hidden;
		// display: none;
	}

	.popup-container {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 520rpx;
		height: 260rpx;
		z-index: 1000;
		// display: none;
		overflow: hidden;

		.popup {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;

			.header {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-top: 24px;
				font-size: 34rpx;
				font-weight: 600;

				image {
					width: 150rpx;
					height: 150rpx;
					margin-top: 15px;
					margin-bottom: 15px;
				}
			}

			.footer {
				width: 100%;
				display: flex;
				overflow: hidden;

				.cancel-btn {
					width: 50%;
					height: 100rpx;
					background-color: #F7F7F7;
					color: #000;
					font-size: 34rpx;
					text-align: center;
					border-bottom-left-radius: 16rpx;
					line-height: 50px;
				}

				.confirm-btn {
					width: 50%;
					height: 100rpx;
					background-color: #0081FE;
					color: #fff;
					font-size: 34rpx;
					text-align: center;
					line-height: 50px;
				}
			}
		}
	}
</style>