171 lines
3.5 KiB
Vue
171 lines
3.5 KiB
Vue
<template>
|
|
<GList
|
|
class="flex-1"
|
|
style=" background: #F1F2F4;;"
|
|
:scroll-top="scrollTop"
|
|
>
|
|
<view>
|
|
<view class="banner px-20 flex-center">
|
|
<image
|
|
class="flex-1"
|
|
style="width: 730rpx;"
|
|
src="@/static/images/signIn.png"
|
|
mode="aspectFit"
|
|
@click="signIn"
|
|
/>
|
|
</view>
|
|
<view class="myPursue mb-40">
|
|
<view class="header mb-28">
|
|
<text class="header-text">
|
|
我的追剧
|
|
</text>
|
|
<view
|
|
v-if="dataList.bookcase.length || isEdit"
|
|
class="flex-row flex-center"
|
|
@click="editPursue"
|
|
>
|
|
<u-icon
|
|
size="36rpx"
|
|
name="/static/icon/pursue-edit.png"
|
|
/>
|
|
<text class="header-edit">
|
|
{{ isEdit ? '完成' : '编辑' }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-if="dataList.bookcase.length !== 0"
|
|
class="flex-row GpursueData"
|
|
>
|
|
<GpursueItem
|
|
v-for="(item, index) in dataList.bookcase"
|
|
:key="index"
|
|
:is-edit="isEdit"
|
|
:data="item"
|
|
:class="(index + 1) % 3 === 0 ? 'mb-28' : 'mb-28 mr-20'"
|
|
@del="delItem"
|
|
/>
|
|
</view>
|
|
<GNoData
|
|
v-else
|
|
text="去追剧~"
|
|
/>
|
|
</view>
|
|
<view class="myPursue mb-60">
|
|
<view class="header mb-28">
|
|
<text class="header-text">
|
|
精选推荐
|
|
</text>
|
|
</view>
|
|
<view class="flex-row GpursueData">
|
|
<GpursueItem
|
|
v-for="(item, index) in dataList.likelist"
|
|
:key="index"
|
|
:class="(index + 1) % 3 === 0 ? 'mb-28' : 'mb-28 mr-20'"
|
|
:data="item"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- #ifndef H5 -->
|
|
<u-gap height="160" />
|
|
<!-- #endif -->
|
|
</GList>
|
|
</template>
|
|
|
|
<script>
|
|
import { chasingdrama, signin, chasingdramadel } from '@/api/index.js';
|
|
export default {
|
|
props: {
|
|
tabIndex: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
dataList: {
|
|
likelist: [],
|
|
bookcase: []
|
|
},
|
|
isEdit: false,
|
|
editList: [],
|
|
scrollTop:0
|
|
};
|
|
},
|
|
watch: {
|
|
tabIndex() {
|
|
this.isEdit = false;
|
|
this.editList = [];
|
|
if(this.tabIndex === 0){
|
|
this.getList();
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
signIn() {
|
|
signin().then(res => {
|
|
this.$emit('signIn', res);
|
|
});
|
|
},
|
|
getList() {
|
|
chasingdrama().then(res => {
|
|
this.dataList = res || { bookcase: [], likelist: [] };
|
|
});
|
|
},
|
|
editPursue() {
|
|
if (this.isEdit && this.editList.length !==0) {
|
|
const data = this.editList.join(',');
|
|
chasingdramadel({ ids: data }).then((ss) => {
|
|
this.editList = [];
|
|
|
|
});
|
|
}
|
|
this.isEdit = !this.isEdit;
|
|
},
|
|
delItem(e) {
|
|
if (this.isEdit) {
|
|
this.editList.push(e.articleid);
|
|
const index = this.dataList.bookcase.findIndex(
|
|
r => r.id === e.id
|
|
);
|
|
this.dataList.bookcase.splice(index, 1);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.banner {
|
|
height: 190rpx;
|
|
width: 750rpx;
|
|
}
|
|
.myPursue {
|
|
padding: 40rpx 20rpx;
|
|
background: #ffffff;
|
|
border-radius: 10rpx;
|
|
margin: 0 20rpx;
|
|
.header {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
.header-text {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #1a1a1a;
|
|
}
|
|
.header-edit {
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #1a1a1a;
|
|
margin-left: 6rpx;
|
|
}
|
|
}
|
|
.GpursueData {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
</style>
|