341 lines
8.2 KiB
Vue
341 lines
8.2 KiB
Vue
<template>
|
|
<c-tabbar :current="1">
|
|
<view>
|
|
<view class="p-30">
|
|
<view class="type-change">
|
|
<view class="item flex flex-col justify-center items-center" :class="{active: type == 1}"
|
|
@click="changeType(1)">
|
|
<text class="t1">短剧列表</text>
|
|
<text class="t2">多平台 多剧场变现</text>
|
|
</view>
|
|
<view class="item flex flex-col justify-center items-center" :class="{active: type == 2}"
|
|
@click="changeType(2)">
|
|
<text class="t1">我的推广</text>
|
|
<text class="t2">推广链接再次使用</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="padding-top: 50upx;">
|
|
<u-search v-model="keyword" :show-action="false" borderColor="#fff"
|
|
bgColor="#fff" placeholder="请输入剧名" @search="search"></u-search>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<u-tabs style="padding: 20upx 0;" :list="tabs" lineWidth="30" lineColor="#007aff" :activeStyle="{
|
|
color: '#303133',
|
|
fontWeight: 'bold',
|
|
transform: 'scale(1.05)'
|
|
}" :inactiveStyle="{
|
|
color: '#606266',
|
|
transform: 'scale(1)'
|
|
}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="changeTab">
|
|
</u-tabs>
|
|
<view class="search-box">
|
|
<sl-filter style="border-radius: 30upx 30upx 0 0;" :ref="'slFilter'" :topFixed="false"
|
|
:isTransNav="true" :navHeight="0" :color="titleColor" :themeColor="themeColor"
|
|
:menuList="menuList" @result="result"></sl-filter>
|
|
</view>
|
|
|
|
<view>
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
|
<view class="search-result">
|
|
<view class="search-item" v-for="item in list" :key="item.id">
|
|
<view class="img-wrap" @click.stop="navigateTo('/pages/shortPlay/info/info')">
|
|
<text class="label">{{sourceType[item.sourceType]}}</text>
|
|
<view class="type flex flex-row items-center justify-center"><u-icon name="attach" color="#ffffffd9"></u-icon>{{item.itemTypeName}}</view>
|
|
<image :src="item.coverPic" mode="widthFix"></image>
|
|
</view>
|
|
<view class="content-wrap">
|
|
<view class="name ellipsis">{{item.videoName}}</view>
|
|
<view class="desc">{{item.completeNot ? '未完结' : '已完结'}} 共{{item.numberEpisode}}集</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="search-item">
|
|
<view class="img-wrap">
|
|
<text class="label">快手</text>
|
|
<view class="type flex flex-row items-center justify-center"><u-icon name="attach" color="#ffffffd9"></u-icon>红火剧场</view>
|
|
<image src="https://resali.ssread.cn/cppartner/4x1/41x0/410x0/41000102244/41000102244.jpg?t=1708324420602" mode="widthFix"></image>
|
|
</view>
|
|
<view class="content-wrap">
|
|
<view class="name ellipsis">下山后我被美女包围了</view>
|
|
<view class="desc">已完结 共17集</view>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</mescroll-body>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</c-tabbar>
|
|
</template>
|
|
|
|
<script>
|
|
import CTabbar from '@/components/gTabbar.vue'
|
|
import slFilter from '@/components/sl-filter/sl-filter.vue';
|
|
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
import { getItemList, getTypeList } from '@/api/index.js'
|
|
import { currentDate } from '@/utils/common.js'
|
|
export default {
|
|
mixins: [MescrollMixin],
|
|
components: {
|
|
CTabbar,
|
|
slFilter
|
|
},
|
|
data() {
|
|
return {
|
|
type: 1,
|
|
keyword: '',
|
|
tabs: [{
|
|
name: '全部'
|
|
}, {
|
|
name: '抖音'
|
|
}, {
|
|
name: '快手'
|
|
}, {
|
|
name: '视频号'
|
|
}],
|
|
themeColor: '#007aff',
|
|
titleColor: '#666666',
|
|
filterResult: '',
|
|
menuList: [{
|
|
'title': '剧方筛选',
|
|
'isMutiple': false,
|
|
'key': 'playSource',
|
|
'detailList': []
|
|
},
|
|
{
|
|
'title': '上架时间',
|
|
'key': 'date',
|
|
'isSort': true,
|
|
'reflexTitle': true,
|
|
'detailList': [{
|
|
'title': '默认时间',
|
|
'value': ''
|
|
},
|
|
{
|
|
'title': '7天',
|
|
'value': '7'
|
|
},
|
|
{
|
|
'title': '15天',
|
|
'value': '15'
|
|
},
|
|
{
|
|
'title': '30天',
|
|
'value': '30'
|
|
},
|
|
{
|
|
'title': '半年',
|
|
'value': '180'
|
|
}
|
|
]
|
|
}
|
|
],
|
|
list: [],
|
|
sourceType: {
|
|
'1': '抖音',
|
|
'2': '快手',
|
|
'3': '视频号'
|
|
},
|
|
filter: {
|
|
sourceType: '',
|
|
itemType: '',
|
|
createBeginTime: '',
|
|
createEndTime: ''
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getPlayType()
|
|
console.log(currentDate(), currentDate(false, -7));
|
|
},
|
|
methods: {
|
|
async getPlayType() {
|
|
const res = await getTypeList({})
|
|
const getData = res.data.map(i => {
|
|
return {
|
|
title: i.name,
|
|
value: i.id
|
|
}
|
|
})
|
|
this.menuList[0].detailList = [
|
|
{
|
|
'title': '全部剧方',
|
|
'value': ''
|
|
},
|
|
...getData
|
|
]
|
|
},
|
|
changeType(type) {
|
|
this.type = type
|
|
},
|
|
result(val) {
|
|
this.filter.itemType = val.playSource
|
|
if(val.date) {
|
|
this.filter.createBeginTime = currentDate(false, -parseInt(val.date)) + ' 00:00:00'
|
|
this.filter.createEndTime = currentDate() + ' 00:00:00'
|
|
} else {
|
|
this.filter.createBeginTime = '';
|
|
this.filter.createEndTime = '';
|
|
}
|
|
this.search()
|
|
},
|
|
changeTab(e){
|
|
this.filter.sourceType = e.index ? e.index : ''
|
|
this.search()
|
|
},
|
|
search(){
|
|
this.list = [];
|
|
this.mescroll.resetUpScroll();
|
|
},
|
|
async getList(pageNum) {
|
|
const res = await getItemList(pageNum, 10, {
|
|
...this.filter,
|
|
videoName: this.keyword
|
|
})
|
|
if(res.success) {
|
|
this.mescroll.endBySize(res.data.list.length, parseInt(res.data.total));
|
|
if (pageNum == 1) this.list = []; //如果是第一页需手动制空列表
|
|
this.list = this.list.concat(res.data.list);
|
|
} else {
|
|
this.mescroll.endErr();
|
|
}
|
|
},
|
|
upCallback(page) {
|
|
this.getList(page.num)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.type-change {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.item {
|
|
width: 335upx;
|
|
padding: 40upx;
|
|
border-radius: 20upx;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -40upx;
|
|
left: 50%;
|
|
margin-left: -15upx;
|
|
border-top: 30upx solid transparent;
|
|
border-left: 30upx solid transparent;
|
|
border-right: 30upx solid transparent;
|
|
border-bottom: 30upx solid transparent;
|
|
}
|
|
|
|
&:first-child {
|
|
background-color: #eceefb;
|
|
color: #071e7a;
|
|
|
|
&.active {
|
|
background-color: $uni-theme;
|
|
color: #fff;
|
|
|
|
&::before {
|
|
border-top: 30upx solid $uni-theme;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
background-color: #fee8e8;
|
|
color: #b5615e;
|
|
margin-left: 20upx;
|
|
|
|
&.active {
|
|
background-color: #fe6767;
|
|
color: #fff;
|
|
|
|
&::before {
|
|
border-top: 30upx solid #fe6767;
|
|
}
|
|
}
|
|
}
|
|
|
|
.t1 {
|
|
font-size: 40upx;
|
|
}
|
|
|
|
.t2 {
|
|
font-size: 25upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-box {
|
|
background-image: linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 100%);
|
|
border-radius: 30upx 30upx 0 0;
|
|
height: 100upx;
|
|
}
|
|
|
|
.search-result {
|
|
padding: 0 30upx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
.search-item {
|
|
width: 216.66upx;
|
|
margin-right: 20upx;
|
|
background-color: #fff;
|
|
border-radius: 15upx;
|
|
overflow: hidden;
|
|
margin-bottom: 20upx;
|
|
&:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
.img-wrap {
|
|
width: 100%;
|
|
position: relative;
|
|
image {
|
|
width: 100%;
|
|
}
|
|
.label{
|
|
border-radius: 15upx 0 15upx 0;
|
|
background: $uni-theme;
|
|
color: #fff;
|
|
padding: 10upx 15upx;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
font-size: 25upx;
|
|
}
|
|
.type {
|
|
border-radius: 5upx;
|
|
background: rgba(0,0,0,.55);
|
|
color: rgba(255,255,255,.85);
|
|
padding: 8upx 10upx;
|
|
position: absolute;
|
|
bottom: 20upx;
|
|
left: 10upx;
|
|
z-index: 1;
|
|
font-size: 22upx;
|
|
}
|
|
}
|
|
.content-wrap {
|
|
padding: 10upx 15upx;
|
|
padding-bottom: 20upx;
|
|
.name {
|
|
color: #323333;
|
|
font-size: 28upx;
|
|
}
|
|
.desc {
|
|
color: #999;
|
|
font-size: 25upx;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
</style> |