forked from gxwebsoft/websoft-cms
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.6 KiB
109 lines
3.6 KiB
<template>
|
|
<div class="container mt-20 show">
|
|
<ClientOnly>
|
|
<el-row :gutter="40">
|
|
<el-col :span="18" :xs="24">
|
|
<div class="search-form">
|
|
<el-form :model="form" :inline="true">
|
|
<el-form-item>
|
|
<el-input v-model="form.keyword" placeholder="请输入搜索的影视名"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="refresh">搜 索</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<el-tabs v-model="activeName">
|
|
<el-tab-pane label="搜索结果" name="first">
|
|
<div class="video-list">
|
|
<el-row :gutter="20">
|
|
<el-col v-for="item in data.rows" :key="item.id" :sm="4" :xs="8">
|
|
<div class="video-list__block">
|
|
<nuxt-link :to="`/column/${item.columnValue}/movie/${item.id}`" class="img-box">
|
|
<el-image class="video-list__block__img" :src="item.poster" fit="cover" />
|
|
<span v-if="item.movieRate">{{
|
|
+item.movieRate.rate === 0 ? '暂无评分' : item.movieRate.rate.toFixed(1)
|
|
}}</span>
|
|
</nuxt-link>
|
|
<div class="video-list__detail">
|
|
<h4 class="title text-overflow">{{ item.title }}</h4>
|
|
<p class="text-overflow">
|
|
<template v-for="actor in item.casts">
|
|
{{ actor.actor.name }}
|
|
</template>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="pagination">
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next"
|
|
:current-page="currentPage"
|
|
:page-size="30"
|
|
:pager-count="5"
|
|
:total="data.total"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-col>
|
|
<el-col :span="6" class="hidden-sm-and-down">
|
|
<Ranking title="最新影视" :list="newMovie.rows" />
|
|
</el-col>
|
|
</el-row>
|
|
</ClientOnly>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useClientRequest } from '~/composables/useClientRequest';
|
|
import { useServerRequest } from '~/composables/useServerRequest';
|
|
|
|
const route = useRoute();
|
|
const activeName = ref('first');
|
|
const form = reactive<{ keyword: string | undefined }>({
|
|
keyword: undefined
|
|
});
|
|
const currentPage = ref<number>(1);
|
|
|
|
form.keyword = route.query.keyword as string;
|
|
if (route.query.page) {
|
|
currentPage.value = +route.query.page;
|
|
}
|
|
|
|
const [{ data, refresh }, { data: newMovie }] = await Promise.all([
|
|
useAsyncData('data', () =>
|
|
useClientRequest<ResPage<MovieItem[]>>('movie/list', {
|
|
query: {
|
|
keyword: form.keyword,
|
|
pageNum: currentPage.value,
|
|
pageSize: 30
|
|
}
|
|
})
|
|
),
|
|
useServerRequest<ResPage<MovieItem[]>>('movie/list', { query: { pageSize: 15 } })
|
|
]);
|
|
|
|
function handleCurrentChange(page: number) {
|
|
currentPage.value = page;
|
|
refresh();
|
|
if (process.client) {
|
|
window.scrollTo(0, 0);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search-form {
|
|
padding: 20px 0;
|
|
}
|
|
.pagination {
|
|
padding: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
</style>
|