Skip to content

Commit

Permalink
🐌优化相册排版，正在添加大图插件
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hello-hao
Hello-hao committed Dec 29, 2023
1 parent 9522d80 commit c24b26e
Show file tree
Hide file tree
Showing 7 changed files with 170 additions and 95 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@
"spark-md5": "^3.0.2",
"uuid": "^9.0.0",
"v-contextmenu": "^2.9.0",
"v-viewer": "^1.6.3",
"vconsole": "^3.9.1",
"view-design": "^4.5.0",
"vue": "^2.6.11",
"vue-cool-lightbox": "^2.7.5",
"vue-count-to": "^1.0.13",
"vue-lazyload": "^1.3.3",
"vue-loader": "^15.9.7",
Expand Down
Binary file added src/assets/img/bigImg.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
105 changes: 71 additions & 34 deletions src/assets/js/photo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export default {
name: "photo",
data() {
return {
bigImg:require("../img/bigImg.jpg"),
pageUUID: null,
imgWidth: 160,
rightClickData: {},
Expand Down Expand Up @@ -71,7 +72,10 @@ export default {
selectImgUrl: [],
selectImgUid: [],
},

delPrompt:false,//删除提示框控制
forceDel:false,//是否强制删除
delLoading:false,
imgIndex:null,//当前大图浏览的图片下标
}
},
created() {
Expand All @@ -81,11 +85,11 @@ export default {
this.pageUUID = uuidv4();
//滚轮监听
window.addEventListener("scroll", this.handleScroll, true);
if (this.$refs.dom.clientWidth <= 356) {
this.imgWidth = 130;
} else {
this.imgWidth = 160;
}
// if (this.$refs.dom.clientWidth <= 356) {
// this.imgWidth = 130;
// } else {
// this.imgWidth = 160;
// }
const that = this
window.onresize = () => {
return (() => {
Expand All @@ -109,9 +113,22 @@ export default {
this.selectPhoto();
},
methods: {
lookImg(img) {
this.$refs[`myImages_${img.id}`][0].click()
// lookImg(img) {
// this.$refs[`myImages_${img.id}`][0].click()
// },
setImgIndex(index) {
try{
if(Number(this.imglist[index].sizes)>52428800){
this.$Message.warning("该图片过大，网站查看可能存在卡顿，请下载后在本机查看。");
} else {
this.imgIndex = index
}
}catch (e) {
console.error(e)
this.imgIndex = index
}
},

selectPhoto(t) {
// this.$Spin.show();
this.nextButloading = true;
Expand Down Expand Up @@ -144,6 +161,9 @@ export default {
var arr = res.data.data.rows;
this.nextButloading = false;
if (arr.length > 0) {
arr = arr.map(({ imgurl, ...rest }) => {
return { src: imgurl, ...rest };
});
this.imglist = this.imglist.concat(arr);
this.pageNum++;
if (this.imglist.length < this.pageSize) {
Expand Down Expand Up @@ -176,11 +196,11 @@ export default {
} else {
this.select.selectIndex.splice(this.select.selectIndex.indexOf(item.id), 1);
}
if (this.select.selectImgUrl.indexOf(item.imgurl) == -1) {
this.select.selectImgUrl.push(item.imgurl);
if (this.select.selectImgUrl.indexOf(item.src) == -1) {
this.select.selectImgUrl.push(item.src);
this.rightClickData = item
} else {
this.select.selectImgUrl.splice(this.select.selectImgUrl.indexOf(item.imgurl), 1);
this.select.selectImgUrl.splice(this.select.selectImgUrl.indexOf(item.src), 1);
}

if (this.select.selectImgUid.indexOf(item.imguid) == -1) {
Expand Down Expand Up @@ -243,7 +263,7 @@ export default {
this.clearSelectData();
for (let i = 0; i < this.imglist.length; i++) {
this.select.selectIndex.push(this.imglist[i].id);
this.select.selectImgUrl.push(this.imglist[i].imgurl);
this.select.selectImgUrl.push(this.imglist[i].src);
this.select.selectImgUid.push(this.imglist[i].imguid);
}
this.$Message.success("已选中" + this.select.selectIndex.length + "张图像");
Expand Down Expand Up @@ -329,19 +349,20 @@ export default {

},
sendDeleteImages(id, index) {
var paramJson = {};
var paramJson = {}
if (id == null) {
if (this.select.selectIndex.length == 0) {
this.$Message.warning("所选数据丢失，不可操作");
return false;
return false
}
} else {
this.select.selectIndex = [];
this.select.selectIndex.push(id);
this.select.selectIndex = []
this.select.selectIndex.push(id)
}
paramJson.images = this.select.selectIndex.toString() + "";
paramJson.uuid = 'DEL-' + this.pageUUID;
this.delImgCount = this.select.selectIndex.length;
paramJson.images = this.select.selectIndex.toString() + ""
paramJson.uuid = 'DEL-' + this.pageUUID
paramJson.forceDel = this.forceDel
this.delImgCount = this.select.selectIndex.length
request(
"/admin/deleImages",
paramJson).then(res => {
Expand Down Expand Up @@ -594,32 +615,37 @@ export default {
if (this.select.selectIndex.length == 0) {
this.clearSelectData();
this.select.selectIndex.push(data.id)
this.select.selectImgUrl.push(data.imgurl)
this.select.selectImgUrl.push(data.src)
this.select.selectImgUid.push(data.imguid)
} else {
if (this.select.selectIndex.indexOf(data.id) == -1) {
this.clearSelectData();
this.select.selectIndex.push(data.id)
this.select.selectImgUrl.push(data.imgurl)
this.select.selectImgUrl.push(data.src)
this.select.selectImgUid.push(data.imguid)
}
}
},

async rightClickDelete() {
var than = this;
than.$Modal.confirm({
title: '提醒',
content: '<p>是否删除所选图像？</p>',
onOk: () => {
if (than.select.selectIndex.length > 0) {
this.deleteImages(null, null);
}
},
onCancel: () => {
}
});
rightClickDelete(){
this.forceDel = false //强制删除 恢复默认false
this.delPrompt = true
},

// async rightClickDelete() {
// var than = this;
// than.$Modal.confirm({
// title: '提醒',
// content: '<p>是否删除所选图像？</p>',
// onOk: () => {
// if (than.select.selectIndex.length > 0) {
// this.deleteImages(null, null);
// }
// },
// onCancel: () => {
// }
// });
// },
menuImgInfo() {
this.imgInfo(this.rightClickData)
},
Expand All @@ -640,6 +666,17 @@ export default {
violation: false,
}
},
//删除提示框
async asyncOK(){
this.delPrompt = false
this.delLoading = true
var than = this
if(than.select.selectIndex.length>0){
this.deleteImages(null,null);
}
than.delLoading = false

},

},
components: {
Expand Down
10 changes: 3 additions & 7 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import Iview from 'view-design'
import clipboard from 'clipboard'
import preview from 'vue-photo-preview'
import VueLazyload from 'vue-lazyload'
import Viewer from 'v-viewer';
// import Viewer from 'v-viewer';
import MetaInfo from 'vue-meta-info';
import 'viewerjs/dist/viewer.css'
// import 'viewerjs/dist/viewer.css'
import 'vue-photo-preview/dist/skin.css'
import "animate.css"
import 'view-design/dist/styles/iview.css'
Expand Down Expand Up @@ -91,11 +91,7 @@ var options = {
timeToIdle: 4000
};

Vue.use(Iview).use(preview, options).use(uploader).use(Viewer, {
defaultOptions: {
navbar: false
}
}).use(MetaInfo).use(contentmenu)
Vue.use(Iview).use(preview, options).use(uploader).use(MetaInfo).use(contentmenu)

Vue.use(VueLazyload, {
lazyComponent: true,
Expand Down
3 changes: 2 additions & 1 deletion src/views/admin/control.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@
<div style="height: 290px;width: 100%;padding: 8px;overflow: auto">
<List>
<ListItem v-for="(img,index) in Recently.RecentlyUploaded" :key="index">
<ListItemMeta :avatar="img.imgurl" :title="img.updatetime"/>
<ListItemMeta :avatar="img.sizes>52428800?bigImg:img.imgurl" :title="img.updatetime"/>
</ListItem>
</List>
</div>
Expand Down Expand Up @@ -319,6 +319,7 @@ export default {
top2: require("../../assets/img/NO.2.png"),
top3: require("../../assets/img/NO.3.png"),
usertop: require("../../assets/img/usertop.png"),
bigImg:require("../../assets/img/bigImg.jpg"),
ok: 'false',
imgTotal: 0,
userTotal: 0,
Expand Down
Loading

0 comments on commit c24b26e

Please sign in to comment.