Ma/GoFilm
1
0
Fork 0
mirror of https://github.com/ProudMuBai/GoFilm.git synced 2026-02-15 15:14:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

banner image local upload

Browse Source
This commit is contained in:
mubai
2024-11-04 23:53:16 +08:00
parent 57323dae2f
commit a68a342c2c
8 changed files with 224 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/views/manage/file/FileUpload.vue
View File

@@ -5,7 +5,7 @@
</div>-->
<div class="content">
<el-upload v-model:file-list="data.photoWall" action="#" list-type="picture-card"
:on-remove="handleRemove" :http-request="customUpload">
:http-request="customUpload">
<template #file="{ file }">
<el-image class="el-upload-list__item-thumbnail" style="width: 100%;height: 100%" :src="file.link" fit="cover" />
<span class="el-upload-list__item-actions">
@@ -112,7 +112,7 @@ const handlePictureCardPreview = (currentFile:any) => {
padding: 10px 10px;
}
:deep(.el-upload-list__item ) {
margin: 10px auto!important;
margin: 10px 10px!important;
}
:deep(.el-upload--picture-card){
margin: 10px auto;

21
client/src/views/manage/film/Film.vue
View File

@@ -90,8 +90,8 @@
</el-table-column>
<el-table-column prop="remarks" align="center" label="更新状态">
<template #default="scope">
<el-tag v-if="scope.row.remarks == '已完结'" type="success" disable-transitions>{{scope.row.remarks }}</el-tag>
<el-tag v-else disable-transitions>{{scope.row.remarks }}</el-tag>
<el-tag v-if="(scope.row.remarks+'').indexOf('更新') != -1" type="warning" >{{scope.row.remarks }}</el-tag>
<el-tag v-else type="success" >{{scope.row.remarks }}</el-tag>
</template>
</el-table-column>
<el-table-column sortable prop="updateStamp" align="center" label="更新时间">
@@ -99,9 +99,10 @@
<el-tag type="success" disable-transitions>{{fmt.dateFormat(scope.row.updateStamp) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<el-table-column label="操作" align="center" min-width="100px">
<template #default="scope">
<el-button type="success" :icon="Aim" @click="" plain circle/>
<el-button type="success" :icon="RefreshRight" @click="UpdateFilm(scope.row.mid)" plain circle/>
<el-button type="primary" :icon="Edit" @click="" plain circle/>
<el-button type="danger" :icon="Delete" @click="delFilm(scope.row.ID)" plain circle/>
</template>
@@ -119,7 +120,7 @@
</template>
<script setup lang="ts">
import {Delete, Edit, Aim, Search, Calendar} from "@element-plus/icons-vue";
import {Delete, Edit, Aim, Search, Calendar, RefreshRight} from "@element-plus/icons-vue";
import {onMounted, reactive} from "vue";
import {ApiGet} from "../../../utils/request";
import {ElMessage} from "element-plus";
@@ -198,6 +199,18 @@ const searchFilm = ()=>{
}
// 更新影片信息
const UpdateFilm = (id:number)=>{
let ids = id + ''
ApiGet(`/manage/spider/update/single`, {ids: id}).then((resp: any) => {
if (resp.code === 0) {
ElMessage.success({message: resp.msg})
} else {
ElMessage.error({message: resp.msg})
}
})
}
// 获取影片分页信息
const getFilmPage = () => {
let {current, pageSize} = data.page

187
client/src/views/manage/system/Banners.vue
View File

@@ -16,12 +16,14 @@
</el-table-column>
<el-table-column prop="collectType" align="center" label="影片海报">
<template #default="scope">
<el-image style="width: 180px; 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="影片封面">
<template #default="scope">
<el-image style="width: 60px; height: 80px" :src="scope.row.picture" :preview-src-list="[scope.row.picture]" preview-teleported fit="cover" />
<el-image style="width: 60px; height: 80px" :src="scope.row.picture" :preview-src-list="[scope.row.picture]"
preview-teleported fit="cover"/>
</template>
</el-table-column>
<el-table-column prop="collectType" align="center" label="排序">
@@ -31,27 +33,27 @@
</el-table-column>
<el-table-column prop="resultModel" align="center" label="连载状态">
<template #default="scope">
<el-tag v-if="(scope.row.remarks+'').search('更新') == -1" type="success" >{{ scope.row.remark}}</el-tag>
<el-tag v-else type="primary" >{{ scope.row.remark}}</el-tag>
<el-tag v-if="(scope.row.remarks+'').search('更新') == -1" type="success">{{ scope.row.remark }}</el-tag>
<el-tag v-else type="primary">{{ scope.row.remark }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-tooltip content="绑定影片信息" placement="top">
<el-button type="success" :icon="Link" plain circle @click="openBindV(scope.row)" />
<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-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-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>
<el-button type="danger" :icon="TakeawayBox" @click="clearCache">清除缓存</el-button>
</div>
@@ -68,34 +70,42 @@
<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-input v-model="data.banner.poster" placeholder="影片海报访问URL" class="upload_input" />
<el-upload :show-file-list="false" action="#" :http-request="customUpload" :data="{type: 0}" class="upload" >
<el-button color="#626aef" round plain :icon="UploadFilled" class="upload_btn">Upload</el-button>
</el-upload>
</el-form-item>
<el-form-item label="影片封面">
<el-input v-model="data.banner.picture" placeholder="影片封面访问URL"/>
<el-input v-model="data.banner.picture" placeholder="影片封面访问URL" class="upload_input" />
<el-upload :show-file-list="false" action="#" :http-request="customUpload" :data="{type: 1}" class="upload" >
<el-button color="#626aef" round plain :icon="UploadFilled" class="upload_btn" >Upload</el-button>
</el-upload>
</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-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-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 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-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 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">
@@ -110,14 +120,14 @@
</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>
<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 color="#9b49e7" @click="bindAddBanner">确认绑定</el-button>
<el-button @click="data.dialogV.addBindV = false">取消</el-button>
</span>
</template>
@@ -137,34 +147,42 @@
<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-input v-model="data.banner.poster" placeholder="影片海报访问URL" class="upload_input" />
<el-upload :show-file-list="false" action="#" :http-request="customUpload" :data="{type: 0}" class="upload" >
<el-button color="#626aef" round plain :icon="UploadFilled" class="upload_btn" >Upload</el-button>
</el-upload>
</el-form-item>
<el-form-item label="影片封面">
<el-input v-model="data.banner.picture" placeholder="影片封面访问URL"/>
<el-input v-model="data.banner.picture" placeholder="影片封面访问URL" class="upload_input" />
<el-upload :show-file-list="false" action="#" :http-request="customUpload" :data="{type: 1}" class="upload" >
<el-button color="#626aef" round plain :icon="UploadFilled" class="upload_btn" >Upload</el-button>
</el-upload>
</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-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-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 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-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 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">
@@ -179,14 +197,14 @@
</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>
<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 color="#9b49e7" @click="bindAddBanner">确认绑定</el-button>
<el-button @click="data.dialogV.addBindV = false">取消</el-button>
</span>
</template>
@@ -197,8 +215,10 @@
<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 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">
@@ -213,14 +233,14 @@
</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>
<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 color="#9b49e7" @click="bindFilm">确认绑定</el-button>
<el-button @click="data.dialogV.bindV = false">取消</el-button>
</span>
</template>
@@ -233,7 +253,7 @@ import {
CirclePlus,
Delete,
Edit,
Link,
Link, TakeawayBox, UploadFilled,
} from "@element-plus/icons-vue";
import {onMounted, reactive} from "vue";
import {ApiGet, ApiPost} from "../../../utils/request";
@@ -257,11 +277,11 @@ const data = reactive({
})
// banner添加功能组
const openAddV = ()=>{
const openAddV = () => {
data.banner = {id: '', mid: 0, name: '', cName: '', poster: '', picture: '', year: 0, remark: '', sort: 0}
data.dialogV.addV = true
}
const bindAddBanner = ()=>{
const bindAddBanner = () => {
// 同步绑定的影片信息到当前Banner
data.banner.mid = data.film.id
data.banner.name = data.film.name
@@ -273,8 +293,8 @@ const bindAddBanner = ()=>{
data.dialogV.editBindV = false
ElMessage.success({message: "影片信息绑定成功!!!"})
}
const add = ()=>{
ApiPost('/manage/banner/add', data.banner).then((resp:any)=>{
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}
@@ -287,13 +307,13 @@ const add = ()=>{
}
// 修改功能组
const openEditV = (b:any)=> {
const openEditV = (b: any) => {
data.banner = b
data.dialogV.editV = true
}
const edit = ()=>{
ApiPost('/manage/banner/update', data.banner).then((resp:any)=>{
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}
@@ -306,14 +326,14 @@ const edit = ()=>{
}
// 绑定功能组
const openBindV = (b:any)=>{
const openBindV = (b: any) => {
data.banner = b
data.dialogV.bindV = true
}
const loadingFilm = (query:string)=>{
if(query){
const loadingFilm = (query: string) => {
if (query) {
data.loading = true
setTimeout(()=>{
setTimeout(() => {
data.loading = false
ApiGet('/searchFilm', {keyword: query, current: 0}).then((resp: any) => {
if (resp.code == 0) {
@@ -323,18 +343,18 @@ const loadingFilm = (query:string)=>{
data.options = []
}
})
},1500)
}, 1500)
}
}
const changeFilm = (val:any)=>{
data.options.forEach(item=>{
if (item.id==val) {
const changeFilm = (val: any) => {
data.options.forEach(item => {
if (item.id == val) {
data.film = item
}
})
}
const bindFilm = ()=>{
const bindFilm = () => {
// 同步绑定的影片信息到当前Banner
data.banner.mid = data.film.id
data.banner.name = data.film.name
@@ -342,7 +362,7 @@ const bindFilm = ()=>{
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)=>{
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}
@@ -355,8 +375,8 @@ const bindFilm = ()=>{
}
// 删除海报信息
const delBanner = (b:any)=>{
ApiGet('/manage/banner/del', {id:b.id}).then((resp:any)=>{
const delBanner = (b: any) => {
ApiGet('/manage/banner/del', {id: b.id}).then((resp: any) => {
if (resp.code === 0) {
ElMessage.success({message: resp.msg})
getBanners()
@@ -367,8 +387,8 @@ const delBanner = (b:any)=>{
}
// 清除海报信息
const clearCache = ()=>{
ApiGet('/cache/del').then((resp:any)=> {
const clearCache = () => {
ApiGet('/cache/del').then((resp: any) => {
if (resp.code == 0) {
ElMessage.success({message: resp.msg})
} else {
@@ -377,9 +397,34 @@ const clearCache = ()=>{
})
}
const getBanners = ()=>{
ApiGet(`/manage/banner/list`).then((resp:any)=>{
if(resp.code === 0){
// 上传并回填图片信息
const customUpload = (options: any) => {
let file = options.file
let formData = new FormData();
formData.append("file", file)
ApiPost(`/manage/file/upload`, formData).then((resp: any) => {
if (resp.code === 0) {
switch (options.data.type) {
case 0:
data.banner.poster = resp.data
break
case 1:
data.banner.picture = resp.data
break
}
ElMessage.success({message: resp.msg})
} else {
ElMessage.error({message: resp.msg})
}
})
}
const changePicture = (r: any) => {
console.log(r)
}
const getBanners = () => {
ApiGet(`/manage/banner/list`).then((resp: any) => {
if (resp.code === 0) {
data.banners = resp.data
} else {
ElMessage.error({message: resp.msg})
@@ -387,7 +432,7 @@ const getBanners = ()=>{
})
}
onMounted(()=>{
onMounted(() => {
// 初始化banners数据
getBanners()
})
@@ -396,16 +441,31 @@ onMounted(()=>{
</script>
<style scoped>
.upload_input {
width: 76%;
}
.upload {
height: 32px;
margin-left: 10px;
}
.upload_btn {
margin: 0 auto;
}
.film_view {
max-width: 100%;
display: flex;
background: rgba(255,255,255,0.25);
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;
@@ -450,14 +510,17 @@ onMounted(()=>{
margin-bottom: 2px;
bottom: 0;
}
.tags {
display: flex;
width: 90%;
justify-content: space-between;
}
.tags .tag_c{
.tags .tag_c {
background: rgba(155, 73, 231, 0.72);
}
.tags span {
border-radius: 5px;
padding: 3px 5px;

34
client/vite.config.ts
View File

@@ -7,32 +7,32 @@ import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
export default defineConfig({
// 本地测试环境
// server: {
// host: '0.0.0.0',
// port: 3600,
// proxy: {
// "/api": {
// target: `http://127.0.0.1:3601`,
// // target: `http://1.94.30.26:3601`,
// changeOrigin: true, // 允许跨域
// rewrite: path => path.replace(/^\/api/, '')
// }
// },
// },
// nginx发布构建时使用此配置
server: {
host: 'localhost',
host: '0.0.0.0',
port: 3600,
proxy: {
"/api": {
target: `http://localhost`,
target: `http://127.0.0.1:3601`,
// target: `http://1.94.30.26:3601`,
changeOrigin: true, // 允许跨域
rewrite: path => path.replace(/^\/api/,'')
rewrite: path => path.replace(/^\/api/, '')
}
},
},
// nginx发布构建时使用此配置
// server: {
// host: 'localhost',
// port: 3600,
// proxy: {
// "/api": {
// target: `http://localhost`,
// changeOrigin: true, // 允许跨域
// rewrite: path => path.replace(/^\/api/,'')
// }
// },
// },
plugins: [
vue(),
AutoImport({