This commit is contained in:
mubai
2024-10-30 23:41:50 +08:00
parent d1433e4b5b
commit 57323dae2f
48 changed files with 1134 additions and 425 deletions

View File

@@ -90,7 +90,6 @@ const form = reactive({
// 校验密码一致性
const regex = `^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[$@$!%*?&])[A-Za-z\\d$@$!%*?&]{8,12}$`
const validateNewPwd = (rule: any, value: any, callback: any) => {
console.log(value)
if (value === '') {
callback(new Error('新密码不能为空'))
} else if (!value.match(regex)) {

View File

@@ -163,6 +163,11 @@ button:focus-visible {
--el-text-color-primary: #5e1e99b8;
}
.el-input-number .el-input__inner {
--el-input-text-color: #999999;
--el-text-color-regular: #999999;
}
.el-dialog__header {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin-right: 0 !important;
@@ -179,7 +184,16 @@ button:focus-visible {
}
/*表格底部工具栏*/
.cus_util {
display: flex;
padding: 10px 8px;
border-left: 2px solid #9b49e733;
border-right: 2px solid #9b49e733;
border-bottom: 2px solid #9b49e733;
background: #ffffff;
justify-content: end;
}

View File

@@ -1,8 +1,8 @@
<template>
<el-container>
<el-header>
<!--<Header/>-->
<NewHeader />
<Header/>
<!--<NewHeader />-->
</el-header>
<el-main>
<router-view></router-view>

View File

@@ -105,7 +105,6 @@ const getFilmData = () => {
d.page = resp.data.page
d.search = resp.data.search
d.searchParams = resp.data.params
console.log(d)
} else {
ElMessage.error({message: "影片搜索结果异常,请稍后刷新重试", duration: 1000})
}

View File

@@ -1,19 +1,19 @@
<template>
<div class="container">
<div v-if="true" class="hidden-sm-and-up banner_wrap" @touchstart="touchS" @touchend="touchE" >
<el-carousel v-model="data.banner.current" ref="wrap" :pause-on-hover="false" :interval="5000" trigger="hover" height="200px" arrow="never" >
<el-carousel-item v-for="item in banners" :key="item" >
<el-image style="width: 100%; height: 100%;" :src="item.picture" fit="fill"/>
<div v-if="true" class="hidden-sm-and-up banner_wrap" @touchstart="touchS" @touchend="touchE" @click="skipLink" >
<el-carousel v-model="data.banner.current" ref="wrap" :pause-on-hover="false" :interval="5000" trigger="hover" height="200px" arrow="never" @change="carousel" >
<el-carousel-item v-for="item in data.info.banners" :key="item" >
<el-image style="width: 100%; height: 100%;" :src="item.poster" fit="fill"/>
<p class="carousel-title">{{ item.name }}</p>
</el-carousel-item>
</el-carousel>
</div>
<div v-if="true" class="banner hidden-sm-and-down"
:style="{background:`url(${data.banner.current.picture})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover'}">
:style="{background:`url(${data.banner.current.poster})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover'}" @click="skipLink">
<div class="preview">
<el-carousel @change="carousel" :interval="5000" height="240px" arrow="always">
<el-carousel-item v-for="item in banners" :key="item">
<el-image style="width: 60%; height: 80%;border-radius: 5px;" :src="item.poster" fit="contain"/>
<el-carousel-item v-for="item in data.info.banners" :key="item.id">
<el-image style="width: 60%; height: 80%;border-radius: 5px;" :src="item.picture" fit="contain"/>
<div class="carousel-tags">
<span>{{ item.year }}</span>
<span>{{ item.cName }}</span>
@@ -69,8 +69,16 @@ import {onBeforeMount, reactive, ref} from "vue";
import {ApiGet} from "../../utils/request";
import FilmList from "../../components/index/FilmList.vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
const data = reactive({
info: {},
banner: {
current: {},
touch: {index: 0, star: 0, end: 0,}
}
})
const router = useRouter()
// 轮播数据拟态
let banners = [
@@ -106,7 +114,12 @@ let banners = [
// pc 背景图同步响应
const carousel = (index: number) => {
data.banner.current = banners[index]
data.banner.current = data.info.banners[index]
}
const skipLink = ()=>{
if (data.banner.current.mid) {
router.push(`/filmDetail?link=`+data.banner.current.mid)
}
}
// 滑动开始
@@ -132,18 +145,11 @@ const touchE = (e:any)=>{
// wrap.value?.setActiveItem(data.banner.touch.index)
}
const data = reactive({
info: {},
banner: {
current: {name: '', year: 2024, cName: '', poster: '', picture: ''},
touch: {index: 0, star: 0, end: 0,}
}
})
onBeforeMount(() => {
data.banner.current = banners[0]
ApiGet('/index').then((resp: any) => {
if (resp.code == 0) {
data.info = resp.data
data.banner.current = data.info.banners[0]
} else {
ElMessage.error({message: resp.msg})
}

View File

@@ -88,7 +88,6 @@ const searchMovie = ()=>{
// 执行搜索请求
const refreshPage = (keyword: any, current: any) => {
ApiGet('/searchFilm', {keyword: keyword, current: current}).then((resp: any) => {
console.log(resp)
if (resp.code == 0) {
data.list = resp.data.list
data.page = resp.data.page

View File

@@ -197,7 +197,7 @@
<el-dialog v-model="dialogV.clear" title="是否清除所有影视数据 ?" width="500">
<el-form :model="form">
<el-form-item label="确认密码" >
<el-input v-model="data.password" type="password" placeholder="请输入账户密码并开确认执行" autocomplete="off" />
<el-input v-model="data.password" type="password" placeholder="请输入账户密码并开确认执行" autocomplete="off" show-password />
</el-form-item>
</el-form>
<template #footer>
@@ -212,7 +212,7 @@
<el-dialog v-model="dialogV.reCollect" title="是否清除影片数据并重新采集 ?" width="500">
<el-form :model="form">
<el-form-item label="确认密码" >
<el-input v-model="data.password" type="password" placeholder="请输入账户密码并开确认执行" autocomplete="off" />
<el-input v-model="data.password" type="password" placeholder="请输入账户密码并开确认执行" autocomplete="off" show-password />
</el-form-item>
</el-form>
<template #footer>
@@ -477,14 +477,6 @@ onMounted(() => {
<style scoped>
.cus_util {
display: flex;
padding: 10px 8px;
border-left: 2px solid #9b49e733;
border-right: 2px solid #9b49e733;
border-bottom: 2px solid #9b49e733;
background: #ffffff;
justify-content: end;
}
</style>

View File

@@ -155,7 +155,6 @@ const addTask = ()=>{
}
const updateTask = ()=>{
console.log(form.edit)
ApiPost(`/manage/cron/update`, {id: form.edit.id, ids: form.edit.ids, time: form.edit.time, state: form.edit.state, remark: form.edit.remark}).then((resp:any)=>{
if (resp.code === 0) {
ElMessage.success({message: resp.msg})

View File

@@ -49,8 +49,6 @@ const data = reactive({
imgList:[""]
})
const customUpload = (options:any)=>{
console.log(options)
console.log(options.file)
let file = options.file
let formData = new FormData();
formData.append("file", file)

View File

@@ -162,7 +162,6 @@ const changeClass = (value: any) => {
// 匹配成功则设置对应的options参数
if (t) {
data.options.Plot = t['Plot']
console.log(data.options.Plot)
data.options.Area = t['Area']
data.options.Language = t['Language']
} else {
@@ -233,7 +232,6 @@ onMounted(() => {
// 删除影片信息
const delFilm = (id:number) =>{
console.log(id)
ApiGet( `/manage/film/search/del`, {id: id}).then((resp: any) => {
if (resp.code === 0) {
ElMessage.success({message: resp.msg})

View File

@@ -170,8 +170,6 @@ const data = reactive({
})
const customUpload = (options:any)=>{
console.log(options)
console.log(options.file)
let file = options.file
let formData = new FormData();
formData.append("file", file)

View File

@@ -65,14 +65,6 @@ const data = reactive({
classTree: []
})
//
const confirmShield = (id:any)=>{
ElMessageBox.confirm('Are you sure to close this dialog?').then(() => {
console.log(id)
}).catch(() => {
// catch error
})
}
// dialog 弹窗数据
const dialog = reactive({

View File

@@ -16,7 +16,7 @@
</el-table-column>
<el-table-column prop="collectType" align="center" label="影片海报">
<template #default="scope">
<el-image style="width: 120px; height: 80px" :src="scope.row.poster" :preview-src-list="[scope.row.poster]" preview-teleported fit="contain" />
<el-image style="width: 180px; height: 80px" :src="scope.row.poster" :preview-src-list="[scope.row.poster]" preview-teleported fit="contain" />
</template>
</el-table-column>
<el-table-column prop="collectType" align="center" label="影片封面">
@@ -37,25 +37,346 @@
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button type="success" :icon="SwitchButton" plain circle @click="" />
<el-button type="primary" :icon="Edit" plain circle @click="" />
<el-button type="danger" :icon="Delete" plain circle @click="" />
<el-tooltip content="绑定影片信息" placement="top">
<el-button type="success" :icon="Link" plain circle @click="openBindV(scope.row)" />
</el-tooltip>
<el-tooltip content="修改海报信息" placement="top">
<el-button type="primary" :icon="Edit" plain circle @click="openEditV(scope.row)" />
</el-tooltip>
<el-tooltip content="删除海报信息" placement="top">
<el-button type="danger" :icon="Delete" plain circle @click="delBanner(scope.row)" />
</el-tooltip>
</template>
</el-table-column>
</el-table>
<div class="cus_util">
<el-button color="#9b49e7" :icon="CirclePlus" @click="openAddV">添加海报</el-button>
<el-button color="#9b49e7" :icon="CirclePlus" @click="clearCache">清除缓存</el-button>
</div>
<!--Banner添加弹窗-->
<el-dialog v-model="data.dialogV.addV" width="680px" title="添加海报">
<el-form :model="data.banner">
<el-form-item label="影片ID&emsp;">
<el-input v-model="data.banner.mid" placeholder="影片唯一ID"/>
</el-form-item>
<el-form-item label="影片名称">
<el-input v-model="data.banner.name" placeholder="影片名称"/>
</el-form-item>
<el-form-item label="影片分类">
<el-input v-model="data.banner.cName" placeholder="影片所属分类"/>
</el-form-item>
<el-form-item label="影片海报">
<el-input v-model="data.banner.poster" placeholder="影片海报访问URL"/>
</el-form-item>
<el-form-item label="影片封面">
<el-input v-model="data.banner.picture" placeholder="影片封面访问URL"/>
</el-form-item>
<el-form-item label="更新状态">
<el-input v-model="data.banner.remark" placeholder="影片更新状态"/>
</el-form-item>
<el-form-item label="上映年份">
<el-input-number v-model="data.banner.year" :min="0" :step="1" :max="2100" step-strictly />
</el-form-item>
<el-form-item label="排序分值">
<el-input-number v-model="data.banner.sort" :min="-100" :step="1" :max="100" step-strictly />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button color="#cf48be" @click="data.dialogV.addBindV = true" >绑定影片</el-button>
<el-button color="#9b49e7" @click="add" >确认添加</el-button>
<el-button @click="data.dialogV.addV = false">取消</el-button>
</span>
</template>
<!--影片绑定弹窗-->
<el-dialog v-model="data.dialogV.addBindV" width="620px" title="绑定影片" align-center >
<el-form :model="data.banner">
<el-form-item label="搜索影片">
<el-select-v2 v-model="data.FilmId" filterable :props="{label:'name', value: 'id'}" remote :remote-method="loadingFilm" clearable
:options="data.options" :loading="data.loading" placeholder="请输入需要绑定的影片名称" @change="changeFilm" >
</el-select-v2>
</el-form-item>
<el-form-item v-if="data.film.id">
<div class="film_view">
<a href="javascript:void(0);" :style="{backgroundImage: `url('${data.film.picture}')`}"></a>
<div class="film_intro">
<h3>{{ data.film.name }}</h3>
<p class="tags">
<span class="tag_c">{{ data.film.cName }}</span>
<span>{{ data.film.year }}</span>
<span>{{ data.film.area }}</span>
</p>
<p><em>导演:</em>{{ data.film.director }}</p>
<p><em>主演:</em>{{ data.film.actor }}</p>
<p class="blurb"><em>剧情:</em>{{ (data.film.blurb+'').replaceAll('  ', '') }}</p>
</div>
</div>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button color="#9b49e7" @click="bindAddBanner" >确认绑定</el-button>
<el-button @click="data.dialogV.addBindV = false">取消</el-button>
</span>
</template>
</el-dialog>
</el-dialog>
<!--影片修改搜索弹窗-->
<el-dialog v-model="data.dialogV.editV" width="680px" title="修改海报信息">
<el-form :model="data.banner">
<el-form-item label="影片ID&emsp;">
<el-input v-model="data.banner.mid" placeholder="影片唯一ID"/>
</el-form-item>
<el-form-item label="影片名称">
<el-input v-model="data.banner.name" placeholder="影片名称"/>
</el-form-item>
<el-form-item label="影片分类">
<el-input v-model="data.banner.cName" placeholder="影片所属分类"/>
</el-form-item>
<el-form-item label="影片海报">
<el-input v-model="data.banner.poster" placeholder="影片海报访问URL"/>
</el-form-item>
<el-form-item label="影片封面">
<el-input v-model="data.banner.picture" placeholder="影片封面访问URL"/>
</el-form-item>
<el-form-item label="更新状态">
<el-input v-model="data.banner.remark" placeholder="影片更新状态"/>
</el-form-item>
<el-form-item label="上映年份">
<el-input-number v-model="data.banner.year" :min="0" :step="1" :max="2100" step-strictly />
</el-form-item>
<el-form-item label="排序分值">
<el-input-number v-model="data.banner.sort" :min="-100" :step="1" :max="100" step-strictly />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button color="#cf48be" @click="data.dialogV.editBindV = true" >绑定影片</el-button>
<el-button color="#9b49e7" @click="edit" >保存</el-button>
<el-button @click="data.dialogV.editV = false">取消</el-button>
</span>
</template>
<!--重新绑定影片-->
<el-dialog v-model="data.dialogV.editBindV" width="620px" title="绑定影片" align-center >
<el-form :model="data.banner">
<el-form-item label="搜索影片">
<el-select-v2 v-model="data.FilmId" filterable :props="{label:'name', value: 'id'}" remote :remote-method="loadingFilm" clearable
:options="data.options" :loading="data.loading" placeholder="请输入需要绑定的影片名称" @change="changeFilm" >
</el-select-v2>
</el-form-item>
<el-form-item v-if="data.film.id">
<div class="film_view">
<a href="javascript:void(0);" :style="{backgroundImage: `url('${data.film.picture}')`}"></a>
<div class="film_intro">
<h3>{{ data.film.name }}</h3>
<p class="tags">
<span class="tag_c">{{ data.film.cName }}</span>
<span>{{ data.film.year }}</span>
<span>{{ data.film.area }}</span>
</p>
<p><em>导演:</em>{{ data.film.director }}</p>
<p><em>主演:</em>{{ data.film.actor }}</p>
<p class="blurb"><em>剧情:</em>{{ (data.film.blurb+'').replaceAll('  ', '') }}</p>
</div>
</div>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button color="#9b49e7" @click="bindAddBanner" >确认绑定</el-button>
<el-button @click="data.dialogV.addBindV = false">取消</el-button>
</span>
</template>
</el-dialog>
</el-dialog>
<!--搜索绑定的影片-->
<el-dialog v-model="data.dialogV.bindV" width="680px" title="绑定影片">
<el-form :model="data.banner">
<el-form-item label="搜索影片">
<el-select-v2 v-model="data.FilmId" filterable :props="{label:'name', value: 'id'}" remote :remote-method="loadingFilm" clearable
:options="data.options" :loading="data.loading" placeholder="请输入需要绑定的影片名称" @change="changeFilm" >
</el-select-v2>
</el-form-item>
<el-form-item v-if="data.film.id">
<div class="film_view">
<a :href="`/filmDetail?link=${data.film.id}`" :style="{backgroundImage: `url('${data.film.picture}')`}"></a>
<div class="film_intro">
<h3>{{ data.film.name }}</h3>
<p class="tags">
<span class="tag_c">{{ data.film.cName }}</span>
<span>{{ data.film.year }}</span>
<span>{{ data.film.area }}</span>
</p>
<p><em>导演:</em>{{ data.film.director }}</p>
<p><em>主演:</em>{{ data.film.actor }}</p>
<p class="blurb"><em>剧情:</em>{{ (data.film.blurb+'').replaceAll('  ', '') }}</p>
</div>
</div>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button color="#9b49e7" @click="bindFilm" >确认绑定</el-button>
<el-button @click="data.dialogV.bindV = false">取消</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import {Delete, Edit, SwitchButton} from "@element-plus/icons-vue";
import {
CirclePlus,
Delete,
Edit,
Link,
} from "@element-plus/icons-vue";
import {onMounted, reactive} from "vue";
import {ApiGet} from "../../../utils/request";
import {ApiGet, ApiPost} from "../../../utils/request";
import {ElMessage} from "element-plus";
// 渲染数据维护
const data = reactive({
banners: [],
banner: {id: '', mid: 0, name: '', cName: '', poster: '', picture: '', year: 0, remark: '', sort: 0},
loading: false,
FilmId: '',
film: {},
options: [{}],
dialogV: {
addV: false,
editV: false,
bindV: false,
addBindV: false,
editBindV: false,
}
})
// banner添加功能组
const openAddV = ()=>{
data.banner = {id: '', mid: 0, name: '', cName: '', poster: '', picture: '', year: 0, remark: '', sort: 0}
data.dialogV.addV = true
}
const bindAddBanner = ()=>{
// 同步绑定的影片信息到当前Banner
data.banner.mid = data.film.id
data.banner.name = data.film.name
data.banner.cName = data.film.cName
data.banner.picture = data.film.picture
data.banner.year = parseInt(data.film.year)
data.banner.remark = data.film.remarks
data.dialogV.addBindV = false
data.dialogV.editBindV = false
ElMessage.success({message: "影片信息绑定成功!!!"})
}
const add = ()=>{
ApiPost('/manage/banner/add', data.banner).then((resp:any)=>{
if (resp.code === 0) {
ElMessage.success({message: resp.msg})
data.banner = {id: '', mid: 0, name: '', cName: '', poster: '', picture: '', year: 0, remark: '', sort: 0}
data.dialogV.addV = false
getBanners()
} else {
ElMessage.error({message: resp.msg})
}
})
}
// 修改功能组
const openEditV = (b:any)=> {
data.banner = b
data.dialogV.editV = true
}
const edit = ()=>{
ApiPost('/manage/banner/update', data.banner).then((resp:any)=>{
if (resp.code === 0) {
ElMessage.success({message: resp.msg})
data.banner = {id: '', mid: 0, name: '', cName: '', poster: '', picture: '', year: 0, remark: '', sort: 0}
data.dialogV.editV = false
getBanners()
} else {
ElMessage.error({message: resp.msg})
}
})
}
// 绑定功能组
const openBindV = (b:any)=>{
data.banner = b
data.dialogV.bindV = true
}
const loadingFilm = (query:string)=>{
if(query){
data.loading = true
setTimeout(()=>{
data.loading = false
ApiGet('/searchFilm', {keyword: query, current: 0}).then((resp: any) => {
if (resp.code == 0) {
data.options = resp.data.list
} else {
ElMessage.warning({message: resp.msg, duration: 1000})
data.options = []
}
})
},1500)
}
}
const changeFilm = (val:any)=>{
data.options.forEach(item=>{
if (item.id==val) {
data.film = item
}
})
}
const bindFilm = ()=>{
// 同步绑定的影片信息到当前Banner
data.banner.mid = data.film.id
data.banner.name = data.film.name
data.banner.cName = data.film.cName
data.banner.picture = data.film.picture
data.banner.year = parseInt(data.film.year)
data.banner.remark = data.film.remarks
ApiPost('/manage/banner/update', data.banner).then((resp:any)=>{
if (resp.code === 0) {
ElMessage.success({message: resp.msg})
data.banner = {id: '', mid: 0, name: '', cName: '', poster: '', picture: '', year: 0, remark: '', sort: 0}
data.dialogV.bindV = false
getBanners()
} else {
ElMessage.error({message: resp.msg})
}
})
}
// 删除海报信息
const delBanner = (b:any)=>{
ApiGet('/manage/banner/del', {id:b.id}).then((resp:any)=>{
if (resp.code === 0) {
ElMessage.success({message: resp.msg})
getBanners()
} else {
ElMessage.error({message: resp.msg})
}
})
}
// 清除海报信息
const clearCache = ()=>{
ApiGet('/cache/del').then((resp:any)=> {
if (resp.code == 0) {
ElMessage.success({message: resp.msg})
} else {
ElMessage.error({message: resp.msg})
}
})
}
const getBanners = ()=>{
ApiGet(`/manage/banner/list`).then((resp:any)=>{
if(resp.code === 0){
@@ -75,5 +396,74 @@ onMounted(()=>{
</script>
<style scoped>
.film_view {
max-width: 100%;
display: flex;
background: rgba(255,255,255,0.25);
padding: 16px;
min-height: 200px;
max-height: 200px;
border-radius: 10px;
margin: 16px 0;
}
.film_view a {
flex: 1;
border-radius: 8px;
background-size: cover;
}
.film_intro {
max-width: 75%;
margin-left: 10px;
flex: 3;
/*flex-grow: 4;*/
text-align: left;
padding: 0 10px;
font-size: 15px;
position: relative;
}
.film_view h3, p, button {
margin: 3px 0 3px 0;
}
.film_view p {
max-width: 90%;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.film_view p em {
font-weight: bold;
margin-right: 8px;
}
.film_view button {
background-color: orange;
border-radius: 20px;
border: none !important;
color: #ffffff;
font-weight: bold;
position: absolute;
margin-bottom: 2px;
bottom: 0;
}
.tags {
display: flex;
width: 90%;
justify-content: space-between;
}
.tags .tag_c{
background: rgba(155, 73, 231, 0.72);
}
.tags span {
border-radius: 5px;
padding: 3px 5px;
background: rgba(66, 66, 66);
color: #c9c4c4;
margin-right: 10px;
}
</style>