206 lines
6.6 KiB
Vue
206 lines
6.6 KiB
Vue
<template>
|
|
<view>
|
|
<view class="u-p-30">
|
|
<u-search v-model="keyword" placeholder="搜短剧名/演员名，免费看短剧" borderColor="#C81F22" searchIconColor="#C81F22"
|
|
:inputStyle="{backgroundColor:'#ffffff'}" @custom="onSearch"></u-search>
|
|
<view v-if="SearchHistory.length>0">
|
|
<view class="u-m-t-30 u-flex u-row-between">
|
|
<view class="u-font-30">历史搜索</view>
|
|
<view class="u-flex" @click="shanchu()">
|
|
<u-icon name="trash" size="18"></u-icon>
|
|
<view class="u-m-l-10 u-font-24 u-color-999">删除</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-flex u-flex-wrap">
|
|
<view class="u-m-t-20 u-m-r-20" v-for="(item,index) in SearchHistory" :key="index">
|
|
<u-tag @click="$u.route({type:'redirect',url:'/pagesA/index/searchList?keyword='+item})"
|
|
:text="item" bgColor="#f5f5f5" borderColor="#f5f5f5" color="#333" shape="circle"></u-tag>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-x class="w-100" v-if="recommendList.length>0">
|
|
<view class="u-flex u-col-top u-m-t-40">
|
|
<view class="u-radius-10 u-b-f u-p-b-56 u-m-r-20" style="width: 480rpx;flex-shrink: 0"
|
|
v-for="(item,index) in recommendList" :key="index">
|
|
<view :class="(index+1)%3==0?'bg3':(index+1)%2==0?'bg2':'bg1'"
|
|
class="u-flex u-p-l-30 u-p-t-6 u-p-b-6 u-radius-20 u-p-r-30 u-col-bottom u-row-between">
|
|
<view class="u-font-34 u-fw-600">{{item.cartName}}</view>
|
|
<image v-if="(index+1)%3==0" src="/static/image/icon15.png" class="u-w-70 u-h-70"></image>
|
|
<image v-else-if="(index+1)%2==0" src="/static/image/icon16.png" class="u-w-70 u-h-70">
|
|
</image>
|
|
<image v-else src="/static/image/icon13.png" class="u-w-70 u-h-70"></image>
|
|
</view>
|
|
<view @click.stop="govideo(item1.id)" v-if="index1<8"
|
|
class="u-m-t-30 u-p-l-30 u-p-r-30 u-flex u-col-top" style="width: 380rpx;"
|
|
v-for="(item1,index1) in item.list" :key="index1">
|
|
<view class="u-relative">
|
|
<u-image :src="apiUrl+item1.img" width="100rpx" height="140rpx" radius="5"></u-image>
|
|
<image v-show="index1 == 0" src="/static/image/icon17.png"
|
|
class="u-w-40 u-h-40 u-absolute u-index-1" style="top: 0px;left:-2px;"></image>
|
|
<image v-show="index1 == 1" src="/static/image/icon18.png"
|
|
class="u-w-40 u-h-40 u-absolute u-index-1" style="top: 0px;left:-2px;"></image>
|
|
<image v-show="index1 == 2" src="/static/image/icon19.png"
|
|
class="u-w-40 u-h-40 u-absolute u-index-1" style="top: 0px;left:-2px;"></image>
|
|
<view v-show="index1 >2"
|
|
class="u-w-40 u-h-40 u-b-000-03 u-text-center u-lh-40 u-font-20 u-absolute u-index-1 u-color-f"
|
|
style="border-radius:0 0 20rpx 0 ;top: 0px;left:-2px;">{{index1+1}}</view>
|
|
</view>
|
|
<view class="u-flex-1 u-m-l-10 u-flex-col u-row-between u-h-120 u-p-t-10 u-p-b-10">
|
|
<view class="u-word-break u-line-1 u-font-26">{{item1.name}}</view>
|
|
<view class="u-flex">
|
|
<image src="/static/image/icon14.png" class="u-w-28 u-h-34"></image>
|
|
<view class="u-color-C76B52 u-font-22 u-m-l-10 u-word-break u-line-1">
|
|
热度值{{item1.views}}
|
|
</view>
|
|
</view>
|
|
<view class="u-font-24 u-color-999 u-word-break u-line-1">{{item1.video_cat}}</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.list.length>7" @click.stop="$u.route(`/pagesA/index/charts?curennt=${index}`)"
|
|
class="u-flex u-row-center u-m-t-30">
|
|
<view class="u-font-24 u-color-999 u-m-r-6">查看全部榜单</view>
|
|
<u-icon name="arrow-right"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
keyword: '', //关键字
|
|
SearchHistory: [], //搜索历史
|
|
recommendList: [],
|
|
apiUrl: getApp().globalData.oss_url, //域名
|
|
}
|
|
},
|
|
onShow() {
|
|
this.SearchHistory = []
|
|
if (uni.getStorageSync('HistoryArray')) {
|
|
this.SearchHistory = uni.getStorageSync('HistoryArray')
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.videoMenu()
|
|
},
|
|
methods: {
|
|
onSearch() {
|
|
if (this.keyword == '') {
|
|
this.$getMsg('请输入搜索关键字')
|
|
} else {
|
|
let index = this.SearchHistory.findIndex(item => item == this.keyword)
|
|
if (index > -1) {
|
|
uni.redirectTo({
|
|
url: '/pagesA/index/searchList?keyword=' + this.keyword
|
|
})
|
|
} else {
|
|
this.SearchHistory.push(this.keyword)
|
|
uni.setStorageSync('HistoryArray', this.SearchHistory)
|
|
uni.redirectTo({
|
|
url: '/pagesA/index/searchList?keyword=' + this.keyword
|
|
})
|
|
}
|
|
}
|
|
},
|
|
shanchu() {
|
|
uni.removeStorageSync('HistoryArray')
|
|
this.SearchHistory = []
|
|
},
|
|
// 剧栏目
|
|
videoMenu() {
|
|
let that = this;
|
|
that.$httpRequest({
|
|
url: '/api/pno/videoMenu',
|
|
method: 'GET',
|
|
isLoading: true,
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
this.recommendList = []
|
|
res.data.forEach(item => {
|
|
this.videoGroupList(item)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 剧栏目列表数据
|
|
videoGroupList(item) {
|
|
this.$httpRequest({
|
|
url: '/api/pno/videoGroupList',
|
|
method: 'GET',
|
|
data: {
|
|
menu_id: item.id
|
|
},
|
|
isLoading: true,
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
this.recommendList.push({
|
|
cartName: item.name,
|
|
list: res.data.data
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 进入短剧播放页面
|
|
govideo(vlid) {
|
|
if (tt.canIUse('video-player')) {
|
|
uni.navigateTo({
|
|
url: '/pagesA/index/VideoPlayer?vl_id=' + vlid
|
|
})
|
|
return
|
|
this.$api.videoGroupInfo({
|
|
vl_id: vlid,
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
if (res.data.video_look == false) {
|
|
uni.navigateTo({
|
|
url: '/pages/index/VideoPlayer?tt_album_id=' + res.data.album_id +
|
|
'&tt_episode_id=' + res.data.video_info[0].episode_id + '&vl_id=' +
|
|
vlid
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '/pages/index/VideoPlayer?tt_album_id=' + res.data.album_id +
|
|
'&tt_episode_id=' + res.data.video_info[res.data.video_look.weigh -
|
|
1].episode_id + '&vl_id=' + vlid
|
|
})
|
|
}
|
|
|
|
} else {
|
|
this.$getMsg(res.msg)
|
|
}
|
|
})
|
|
} else {
|
|
this.$getMsg('当前版本过低，请升级抖音后观看')
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background: linear-gradient(to top, #f8f8f8, #ffffff) no-repeat;
|
|
background-color: #f8f8f8;
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
::v-deep .u-search__content {
|
|
background-color: #ffffff !important;
|
|
}
|
|
|
|
.bg1 {
|
|
background: linear-gradient(to top, #ffffff, #FFF9E6);
|
|
}
|
|
|
|
.bg2 {
|
|
background: linear-gradient(to top, #ffffff, #FFF0ED);
|
|
}
|
|
|
|
.bg3 {
|
|
background: linear-gradient(to top, #ffffff, #E0FFFF);
|
|
}
|
|
</style> |