298 lines
7.1 KiB
Vue
298 lines
7.1 KiB
Vue
<template>
|
|
<view class="flex-1">
|
|
<GLoading />
|
|
<scroll-view
|
|
|
|
class="flex-1"
|
|
style="z-index: 999;"
|
|
scroll-y="true"
|
|
lower-threshold="30"
|
|
@scrolltolower="scrollLower"
|
|
>
|
|
<view style="position: relative;">
|
|
<view class="body-bg" />
|
|
<view class=" px-20 py-20">
|
|
<!-- <view class="high mb-20">
|
|
<view class="high-title mb-24">
|
|
<text class="high-title-text">
|
|
优质短剧
|
|
</text>
|
|
</view>
|
|
<view class="highContent">
|
|
<view
|
|
v-for="(item, index) in dataList.module2"
|
|
:key="index"
|
|
class="flex-row mb-20"
|
|
>
|
|
<u--image
|
|
class="highContent-img mr-20"
|
|
:fade="true"
|
|
:lazy-load="true"
|
|
height="238rpx"
|
|
width="176rpx"
|
|
:src="item.cover"
|
|
duration="450"
|
|
mode="aspectFill"
|
|
/>
|
|
|
|
<view
|
|
class="high-right"
|
|
style="justify-content: center;"
|
|
>
|
|
<text class="high-right-one text-one">
|
|
{{ item.name || '-' }}
|
|
</text>
|
|
<text class="high-right-to mt-28 mb-32 text-To">
|
|
{{ item.description || '-' }}
|
|
</text>
|
|
<view
|
|
class="high-right-three flex-row"
|
|
style="align-items: center;"
|
|
>
|
|
<u-icon
|
|
name="/static/icon/hot.png"
|
|
size="44rpx"
|
|
/>
|
|
<text class="high-right-three-text">
|
|
{{ item.num || 0 }}火力值
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="listData flex-1">
|
|
<view
|
|
v-for="(item, index) in dataList.module1"
|
|
:key="index"
|
|
class="listDataItem mb-20"
|
|
>
|
|
<image
|
|
v-if="item.recommend === 1"
|
|
src="@/static/images/recommend.png"
|
|
style="width:160rpx;height:102rpx;position: absolute;top: 20rpx;left: 20rpx;z-index: 999;"
|
|
mode="aspectFill"
|
|
/>
|
|
<u--image
|
|
class="listDataItemImg"
|
|
:fade="true"
|
|
:lazy-load="true"
|
|
height="720rpx"
|
|
width="710rpx"
|
|
:src="item.cover"
|
|
duration="450"
|
|
mode="aspectFill"
|
|
@click="listDataItemClick(item)"
|
|
/>
|
|
<image
|
|
src="@/static/images/play.png"
|
|
class="_image"
|
|
mode="aspectFill"
|
|
@click="listDataItemClick(item)"
|
|
/>
|
|
<view class="listData-remake px-20 pt-104">
|
|
<view
|
|
class="flex-row"
|
|
style="justify-content: space-between;"
|
|
>
|
|
<text class="listData-remake-title">
|
|
{{ item.name || '-' }}
|
|
</text>
|
|
<view
|
|
class="flex-row"
|
|
style="align-items: center;"
|
|
@click="chase(item)"
|
|
>
|
|
<u-icon
|
|
:name="
|
|
item.collection === 0
|
|
? '/static/icon/attention.png'
|
|
: '/static/icon/attention-on.png'
|
|
"
|
|
size="36rpx"
|
|
/>
|
|
<text class="listData-remake-text">
|
|
{{ item.num || 0 }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<text class="listData-remarks text-To">
|
|
{{ item.description }}
|
|
</text>
|
|
</view>
|
|
<text class="listData-update">
|
|
{{ item.new || 0 }}集全
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-loadmore :status="status" />
|
|
<!-- #ifndef H5 -->
|
|
<u-gap height="80" />
|
|
<!-- #endif -->
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { findindex, addkeep, chasingdramadel } from '@/api/index.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
dataList: {
|
|
module1: [],
|
|
module2: []
|
|
},
|
|
status: 'loadmore',
|
|
page: 1
|
|
};
|
|
},
|
|
onShow() {
|
|
this.$showLoading(true);
|
|
this.dataList.module1 = [];
|
|
console.log(this.dataList);
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
getList() {
|
|
findindex({ page: this.page }).then(res => {
|
|
this.$showLoading(false);
|
|
if (res.module1.length === 0) {
|
|
this.status = 'nomore';
|
|
} else {
|
|
this.status = 'loadmore';
|
|
this.dataList.module1 =
|
|
this.dataList.module1.concat(res.module1) || [];
|
|
}
|
|
});
|
|
},
|
|
scrollLower() {
|
|
if (this.status !== 'nomore') {
|
|
this.page++;
|
|
this.status = 'loading';
|
|
this.getList();
|
|
}
|
|
},
|
|
listDataItemClick(item) {
|
|
uni.navigateTo({
|
|
url: `/pages/video/index?sid=${item.id}`
|
|
});
|
|
},
|
|
chase(item) {
|
|
let fn = null;
|
|
let params = {};
|
|
console.log(item);
|
|
if (item.collection === 0) {
|
|
fn = addkeep;
|
|
params = {
|
|
sid: item.id
|
|
};
|
|
} else {
|
|
fn = chasingdramadel;
|
|
params = {
|
|
ids: item.id
|
|
};
|
|
}
|
|
fn(params).then(() => {
|
|
item.collection = item.collection === 0 ? 1 : 0;
|
|
item.num = item.collection === 0 ? item.num - 1 : item.num + 1;
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.high {
|
|
position: relative;
|
|
padding: 40rpx 20rpx;
|
|
border-radius: 10rpx;
|
|
background-image: url('~@/static/images/hign.png');
|
|
|
|
background-size: 100% 100%;
|
|
.high-title-text {
|
|
font-size: 44rpx;
|
|
font-weight: bold;
|
|
color: #f48319;
|
|
}
|
|
.highContent-img {
|
|
width: 176rpx;
|
|
height: 238rpx;
|
|
}
|
|
.high-right-one {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #1a1a1a;
|
|
}
|
|
.high-right-to {
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
.high-right-three-text {
|
|
font-size: 30rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
}
|
|
.listDataItem {
|
|
position: relative;
|
|
height: 958rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
}
|
|
.listDataItemImg {
|
|
width: 710rpx;
|
|
height: 720rpx;
|
|
}
|
|
.listData-remake {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 710rpx;
|
|
height: 332rpx;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 22%);
|
|
}
|
|
.listData-remake-title {
|
|
font-size: 44rpx;
|
|
font-weight: bold;
|
|
color: #1a1a1a;
|
|
}
|
|
.listData-remake-text {
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
.listData-remarks {
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 56rpx;
|
|
margin-top: 16rpx;
|
|
}
|
|
.listData-update {
|
|
position: absolute;
|
|
bottom: 310rpx;
|
|
right: 10rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
._image {
|
|
width: 136rpx;
|
|
height: 136rpx;
|
|
position: absolute;
|
|
top: 298rpx;
|
|
left: 288rpx;
|
|
}
|
|
.body-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 750rpx;
|
|
z-index: 2rpx;
|
|
height: 434rpx;
|
|
background: url('https://diyyhdapi.qinjiu8.com/backImg.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
</style>
|