lion/lionwebsite-frontend-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

视频加入收藏以及标签功能。去除moment.js，改为原生格式化。加入任务的分类（收藏，下载，全部）。（同步更新）修改缩放参数，使safari不会莫名其妙放大

Browse Source
This commit is contained in:
chuzhongzai 2023-02-24 17:24:47 +08:00
parent d768a79fe4
commit 74256e6c3b
3 changed files with 134 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<title>Vite + Vue</title> <title>Vite + Vue</title>
</head> </head>
<body> <body>

38
src/components/Side.vue
View File

@ -21,10 +21,10 @@
<el-button @click="downloadTask(props.row.download)" :disabled="props.row.download === undefined">下载</el-button> <el-button @click="downloadTask(props.row.download)" :disabled="props.row.download === undefined">下载</el-button>
<el-button @click="deleteGallery(props.row.gid)" :disabled="props.row.download === undefined">删除</el-button> <el-button @click="deleteGallery(props.row.gid)" :disabled="props.row.download === undefined">删除</el-button>
<el-button @click="shareGallery({gid:props.row.gid, shortName:props.row.shortName + '.zip'})" v-if="isLion">分享</el-button> <el-button @click="shareGallery({gid:props.row.gid, shortName:props.row.shortName + '.zip'})" v-if="isLion">分享</el-button>
<el-button @click="changeCollect(props.row.gid, props.row.isCollect)" :disabled="props.row.download === undefined">{{props.row.isCollect ? '取消收藏' : '收藏'}}</el-button> <el-button @click="changeGalleryCollect(props.row.gid, props.row.isCollect)" :disabled="props.row.download === undefined">{{props.row.isCollect ? '取消收藏' : '收藏'}}</el-button>
<el-button @click="onlineGalleryReader(props.row.gid)" :disabled="props.row.download === undefined">在线看</el-button> <el-button @click="onlineGalleryReader(props.row.gid)" :disabled="props.row.download === undefined">在线看</el-button>
<el-button @click="showThumbnail(props.row)" :disabled="props.row.download === undefined">预览封面</el-button><br> <el-button @click="showThumbnail(props.row)" :disabled="props.row.download === undefined">预览封面</el-button><br>
<el-button @click="editTag(props.row.gid, props.row.tag)" :disabled="props.row.download === undefined">编辑标签</el-button> <el-button @click="editGalleryTag(props.row.gid, props.row.tag)" :disabled="props.row.download === undefined">编辑标签</el-button>
<el-button @click="updateGallery(props.row.link)" :disabled="props.row.download === undefined">更新本子</el-button> <el-button @click="updateGallery(props.row.link)" :disabled="props.row.download === undefined">更新本子</el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -54,9 +54,15 @@
视频长度:{{props.row.duration}} <br> 视频长度:{{props.row.duration}} <br>
分辨率:{{props.row.resolution}} <br> 分辨率:{{props.row.resolution}} <br>
任务创建时间:{{props.row.createTimeDisplay}}<br> 任务创建时间:{{props.row.createTimeDisplay}}<br>
标签:{{props.row.tag === '' ? '无': props.row.tag}} <br>
<span v-show="isLion">
downloader:{{props.row.downloader}}
</span>
<el-button @click="downloadTask(props.row.download)" :disabled="props.row.download === undefined">下载</el-button> <el-button @click="downloadTask(props.row.download)" :disabled="props.row.download === undefined">下载</el-button>
<el-button @click="deleteVideo(props.row.id)" :disabled="props.row.download === undefined">删除</el-button> <el-button @click="deleteVideo(props.row.id)" :disabled="props.row.download === undefined">删除</el-button>
<el-button @click="openVideoPanel(props.row.download)" :disabled="props.row.download === undefined">在线播放</el-button> <el-button @click="openVideoPanel(props.row.download)" :disabled="props.row.download === undefined">在线播放</el-button>
<el-button @click="editVideoTag(props.row.id, props.row.tag)">编辑标签</el-button>
<el-button @click="changeVideoCollect(props.row.id, props.row.isCollect)">{{props.row.isCollect ? '取消收藏' : '收藏'}}</el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -126,7 +132,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-footer> <el-footer>
<el-button @click="submitTag">提交修改</el-button> <el-button @click="tempGid === '' ? submitVideoTag(): submitGalleryTag()">提交修改</el-button>
</el-footer> </el-footer>
</el-dialog> </el-dialog>
@ -164,6 +170,7 @@ let player = ref()
//临时变量 //临时变量
let tempTag = ref("") let tempTag = ref("")
let tempGid = ref("") let tempGid = ref("")
let tempId = ref("")
let showNameType = ref("shortName") // shortName fullName let showNameType = ref("shortName") // shortName fullName
@ -210,7 +217,7 @@ let page = computed(() => {
let isLion = computed(() => { let isLion = computed(() => {
return store.state.userId === 3 return store.state.userId === 3
}) })
//在线预览链接
let currentLinks = computed(() => { let currentLinks = computed(() => {
return store.state.currentLinks return store.state.currentLinks
}) })
@ -270,23 +277,40 @@ function changeSortType(){
} }
//收藏,编辑标签,提交编辑 //收藏,编辑标签,提交编辑
function changeCollect(gid, isCollect){ function changeGalleryCollect(gid, isCollect){
if(isCollect) if(isCollect)
store.dispatch("disCollectGallery", gid) store.dispatch("disCollectGallery", gid)
else else
store.dispatch("collectGallery", gid) store.dispatch("collectGallery", gid)
} }
function editTag(gid, tag){ function changeVideoCollect(id, isCollect){
if(isCollect)
store.dispatch("disCollectVideo", id)
else
store.dispatch("collectVideo", id)
}
function editGalleryTag(gid, tag){
tempTag.value = tag tempTag.value = tag
tempGid.value = gid tempGid.value = gid
isEditingTag.value = true isEditingTag.value = true
} }
function submitTag(){ function editVideoTag(id, tag){
tempTag.value = tag
tempId.value = id
isEditingTag.value = true
}
function submitGalleryTag(){
store.dispatch("updateTag", {gid:tempGid.value, tag:tempTag.value}) store.dispatch("updateTag", {gid:tempGid.value, tag:tempTag.value})
tempTag.value = '' tempTag.value = ''
tempGid.value = '' tempGid.value = ''
isEditingTag.value = false isEditingTag.value = false
} }
function submitVideoTag(){
store.dispatch("updateVideoTag", {id:tempId.value, tag:tempTag.value})
tempTag.value = ''
tempId.value = ''
isEditingTag.value = false
}
//下载，删除，在线看 //下载，删除，在线看
function downloadTask(link){ function downloadTask(link){

110
src/store/index.js
View File

@ -2,7 +2,6 @@ import vuex from "vuex"
import axios from "axios" import axios from "axios"
import {ElMessage} from "element-plus" import {ElMessage} from "element-plus"
import qs from "qs" import qs from "qs"
import moment from 'moment'
const BaseUrl = "http://downloader.lionwebsite.xyz/" const BaseUrl = "http://downloader.lionwebsite.xyz/"
const GalleryManageUrl = BaseUrl + "GalleryManage" const GalleryManageUrl = BaseUrl + "GalleryManage"
const VideoManageUrl = BaseUrl + "VideoManage" const VideoManageUrl = BaseUrl + "VideoManage"
@ -153,8 +152,7 @@ const actions = {
validate(context, AuthCode){ validate(context, AuthCode){
axios.post(BaseUrl + "validate?AuthCode=" + AuthCode).then((res)=>{ axios.post(BaseUrl + "validate?AuthCode=" + AuthCode).then((res)=>{
if(res.data.result === 'success'){ if(res.data.result === 'success'){
state.userId = parseInt(res.data.data) context.commit("_authed", {AuthCode, ...JSON.parse(res.data.data)})
context.commit("_authed", {AuthCode, userId: parseInt(res.data.data)})
//初始化 //初始化
context.dispatch("loadMaskDomain").then() context.dispatch("loadMaskDomain").then()
context.dispatch("loadWeekUsedAmount").then() context.dispatch("loadWeekUsedAmount").then()
@ -196,6 +194,16 @@ const actions = {
context.commit("_collectGallery", gid) context.commit("_collectGallery", gid)
}) })
}, },
collectVideo(context, id){
axios.post(VideoManageUrl + "/collect?" + qs.stringify({
id,
userId: state.userId
})).then((res) => {
ElMessage(res.data.data)
if(res.data.result === 'success')
context.commit("_collectVideo", id)
})
},
disCollectGallery(context, gid){ disCollectGallery(context, gid){
axios.post(GalleryManageUrl + "/disCollect?" + qs.stringify( axios.post(GalleryManageUrl + "/disCollect?" + qs.stringify(
{ {
@ -207,11 +215,28 @@ const actions = {
context.commit("_disCollectGallery", gid) context.commit("_disCollectGallery", gid)
}) })
}, },
updateTag(context, data){ disCollectVideo(context, id){
axios.post(VideoManageUrl + "/disCollect?" + qs.stringify({
id,
userId: state.userId
})).then((res) => {
ElMessage(res.data.data)
if(res.data.result === "success")
context.commit("_disCollectVideo", id)
})
},
updateGalleryTag(context, data){
axios.post(GalleryManageUrl + "/tag?" + qs.stringify(data)).then((res) => { axios.post(GalleryManageUrl + "/tag?" + qs.stringify(data)).then((res) => {
ElMessage(res.data.data) ElMessage(res.data.data)
if(res.data.result === 'success') if(res.data.result === 'success')
context.commit("_updateTag", data) context.commit("_updateGalleryTag", data)
})
},
updateVideoTag(context, data){
axios.post(VideoManageUrl + "/tag?" + qs.stringify(data)).then((res) => {
ElMessage(res.data.data)
if(res.data.result === 'success')
context.commit("_updateVideoTag", data)
}) })
}, },
deleteGallery(context, gid){ deleteGallery(context, gid){
@ -267,6 +292,14 @@ const mutations = {
} }
}) })
}, },
_collectVideo(state, id){
state.totalVideoTask.forEach((video) => {
if(!video.isCollect && video.id === id){
video.isCollect = true
state.collectVideo.push(video)
}
})
},
_disCollectGallery(state, gid){ _disCollectGallery(state, gid){
state.collectGallery.splice(0) state.collectGallery.splice(0)
state.totalGalleryTask.forEach((gallery) => { state.totalGalleryTask.forEach((gallery) => {
@ -277,17 +310,37 @@ const mutations = {
state.collectGallery.push(gallery) state.collectGallery.push(gallery)
}) })
}, },
_updateTag(state, data){ _disCollectVideo(state, id){
state.collectVideo.splice(0)
state.totalVideoTask.forEach((video) => {
if(video.isCollect && video.id === id)
video.isCollect = false
else if(video.isCollect)
state.collectVideo.push(video)
})
},
_updateGalleryTag(state, data){
state.totalGalleryTask.forEach((gallery) => { state.totalGalleryTask.forEach((gallery) => {
if(gallery.gid === data.gid){ if(gallery.gid === data.gid){
gallery.tag = data.tag gallery.tag = data.tag
} }
}) })
}, },
_updateVideoTag(state, data){
state.totalVideoTask.forEach((video) => {
if(video.id === data.id){
video.tag = data.tag
}
})
},
_updateGalleryTasks(state, data){ _updateGalleryTasks(state, data){
let {tasks, type} = data let {tasks, type} = data
if(type === 'all') { if(type === 'all') {
state.totalGalleryTask.splice(0) state.totalGalleryTask.splice(0)
state.collectGallery.slice(0)
state.downloadGallery.splice(0)
tasks.forEach((task) => { tasks.forEach((task) => {
//处理名字 //处理名字
task.shortName = getShortname(task.name) task.shortName = getShortname(task.name)
@ -313,7 +366,7 @@ const mutations = {
} }
//处理时间戳 //处理时间戳
task.createTimeDisplay = moment(task.createTime * 1000).format("YYYY-MM-DD HH:mm:ss") task.createTimeDisplay = new Date(task.createTime * 1000).toLocaleString("zh")
//处理标签 //处理标签
if (task.tag === undefined) { if (task.tag === undefined) {
@ -335,6 +388,10 @@ const mutations = {
task.isCollect = false task.isCollect = false
} }
//处理是否下载
if(task.downloader === state.username)
state.downloadGallery.push(task)
state.totalGalleryTask.push(task) state.totalGalleryTask.push(task)
}) })
} }
@ -388,8 +445,12 @@ const mutations = {
let {tasks, type} = data let {tasks, type} = data
if(type === 'all') { if(type === 'all') {
state.totalVideoTask.splice(0) state.totalVideoTask.splice(0)
state.collectVideo.splice(0)
state.downloadVideo.splice(0)
tasks.forEach((task) => { tasks.forEach((task) => {
task.progress = task.status task.progress = task.status
//视频下载很快，所以不太注重下载进度
if (task.status === "下载完成") { if (task.status === "下载完成") {
let tempLink let tempLink
let url = new URL(task.link) let url = new URL(task.link)
@ -399,8 +460,35 @@ const mutations = {
tempLink = task.link.replace(mask['raw'], mask['mask']) tempLink = task.link.replace(mask['raw'], mask['mask'])
}) })
task.download = VideoManageUrl + "/file/" + encodeURI(task.name) + "?link=" + tempLink + "&AuthCode=" + state.AuthCode task.download = VideoManageUrl + "/file/" + encodeURI(task.name) + "?link=" + tempLink + "&AuthCode=" + state.AuthCode
task.createTimeDisplay = moment(task.createTime * 1000).format("YYYY-MM-DD HH:mm:ss")
} }
//处理时间戳
task.createTimeDisplay = new Date(task.createTime * 1000).toLocaleString("zh")
//处理标签
if(task.tag === undefined)
task.tag = ""
//处理是否收藏
if(task.collector !== undefined){
let collector = task.collector.split(",")
delete task.collector
for(let i=0; i<collector.length; i++){
if(parseInt(collector[i]) === state.userId){
task.isCollect = true
state.collectVideo.push(task)
break
}
}
if(task.isCollect === undefined)
task.isCollect = false
}
//处理是否下载
if(task.downloader === state.username)
state.downloadVideo.push(task)
state.totalVideoTask.push(task) state.totalVideoTask.push(task)
}) })
} }
@ -435,6 +523,7 @@ const mutations = {
_authed(state, data){ _authed(state, data){
state.AuthCode = data.AuthCode state.AuthCode = data.AuthCode
state.userId = data.userId state.userId = data.userId
state.username = data.username
state.isAuth = true state.isAuth = true
ElMessage("验证成功,加载中") ElMessage("验证成功,加载中")
}, },
@ -442,6 +531,7 @@ const mutations = {
state.isAuth = false state.isAuth = false
state.AuthCode = "" state.AuthCode = ""
state.userId = -1 state.userId = -1
state.username = ""
ElMessage("授权码错误") ElMessage("授权码错误")
localStorage.removeItem("auth") localStorage.removeItem("auth")
}, },
@ -629,6 +719,7 @@ const state = {
chosenGallery:false, //准备下载的本子 chosenGallery:false, //准备下载的本子
thumbnailGallery:{}, //预览本子 thumbnailGallery:{}, //预览本子
collectGallery:[], //收藏的本子 collectGallery:[], //收藏的本子
downloadGallery:[], //下载的本子
onlineLinks:{}, //在线本子链接 onlineLinks:{}, //在线本子链接
isOnlineReading: false, //是否在线看 isOnlineReading: false, //是否在线看
@ -637,6 +728,8 @@ const state = {
totalVideoTask:[], //存放视频数据的数组 totalVideoTask:[], //存放视频数据的数组
chosenVideo:false, //准备下载的视频 chosenVideo:false, //准备下载的视频
collectVideo: [], //收藏的视频
downloadVideo: [], //下载的视频
page:1, //当前页数 page:1, //当前页数
length:5, //每页能有多少个链接 length:5, //每页能有多少个链接
@ -644,6 +737,7 @@ const state = {
shortLength:5, //简洁个数 shortLength:5, //简洁个数
userId:-1, //用户id userId:-1, //用户id
username: ",", //用户名
isAuth:false, //是否授权 isAuth:false, //是否授权
AuthCode:'', //授权码 AuthCode:'', //授权码
loadComplete:false, //是否加载完成 loadComplete:false, //是否加载完成