<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>