<template> <div id="MyAlbum"> <div class="photo_box"> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getUserAlbum"> <div class="day_box" v-for="(dayItem,dayIndex) in photoArr" :key="dayIndex"> <p class="day_time">{{dayItem.time}}</p> <div class="item" v-for="(item,index) in dayItem.photos" :key="index" :style="'background-image:url('+item.img+')'" @click="handlePhoto(dayIndex,index)"> <div class="check_icon" :class="item.checked?'checked':''" v-if="controlStatus=='del'"> <van-icon class="icon" name="success" /> </div> </div> </div> </van-list> </div> <div class="control_panel"> <p class="control_btn" @click="controlStatus='control'" v-if="controlStatus=='default'">管理相册({{spaceSize}}/2G)</p> <div class="control_box" v-if="controlStatus=='control'"> <van-uploader multiple :after-read="afterRead"> <div class="btn add"> <van-icon class="icon" name="add-o" /> <p class="text">添加</p> </div> </van-uploader> <div class="btn del" @click="controlStatus='del'"> <van-icon class="icon" name="delete-o" /> <p class="text">删除</p> </div> <van-button class="blue_btn" type="info" round color="#3074FF" @click="controlStatus='default'">完成</van-button> </div> <p class="cancel_btn" @click="controlStatus='control'" v-if="controlStatus=='del'">取消</p> <p class="del_btn" @click="handleDel" v-if="controlStatus=='del'">删除相片</p> </div> <van-image-preview v-model="showPreview" :images="previewArr" :start-position="startPosition" @change="previewChange"> </van-image-preview> </div> </template> <script> import Axios from 'axios' export default { data () { return { userInfo: '', photoArr: [],//照片数组 total: '',//照片总数 showPreview: false, startPosition: 0, previewIndex: 0, previewArr: [], pageSize: 10, pageNum: 1, loading: false, finished: false, controlStatus: 'default',//默认状态:default 管理状态:control 删除状态:del delIds: [],//需要删除的图片id数组 uploadImgList: [],//上传图片数组 spaceSize:[],//用户空间 } }, mounted () { var userInfo = sessionStorage.getItem('userInfo'); if (userInfo) { this.userInfo = JSON.parse(userInfo); } // this.getUserAlbum()//获取当前用户相关的商户相册 this.getUserSpaceSize() }, methods: { //获取当前用户相关的商户相册 getUserAlbum () { this.loading = true; this.yxAxios.post(`${this.proxyUrl}/api/growth/photo/userAlbum`,{ "centerNo": this.userInfo.centerNo, pageSize: this.pageSize, pageNum: this.pageNum, }).then((res) => { console.log('相册详情:', res) this.loading = false if (res.data.code == 200) { this.formatPhoto(res.data.rows) this.total = res.data.total if (this.pageSize * this.pageNum >= res.data.total) { this.finished = true } else { this.pageNum++ } } else { this.$toast(res.data.message); } }) }, // 获取用户空间大小 getUserSpaceSize () { this.yxAxios.post(`${this.proxyUrl}/api/growth/photo/getUserSpaceSize`,{ "centerNo": this.userInfo.centerNo, }).then((res) => { console.log('空间大小:', res) if (res.data.code == 200) { const sizeM = res.data.data/1024/1024; if(sizeM/1024>1000){ this.spaceSize = (sizeM/1024).toFixed(2)+'G' }else{ this.spaceSize = (sizeM).toFixed(2)+'M' } console.log(this.spaceSize) } else { this.$toast(res.data.message); } }) }, // 处理照片数组 formatPhoto (data) { let photoArr = this.photoArr; var weekArr = ['一', '二', '三', '四', '五', '六', '日'] for (let i in data) { let week = this.Moment(data[i].createTime).isoWeekday() data[i].time = this.Moment(data[i].createTime).format('MM月DD日') + ' 周' + weekArr[week - 1] data[i].checked = false if (photoArr.length == 0) { photoArr.push({ time: data[i].time, photos: [data[i]] }) } else if (photoArr[photoArr.length - 1].time == data[i].time) { photoArr[photoArr.length - 1].photos.push(data[i]) } else { photoArr.push({ time: data[i].time, photos: [data[i]] }) } } console.log('处理后的photoArr:', photoArr) this.photoArr = photoArr }, // 预览图切换 previewChange (index) { this.previewIndex = index }, // 点击照片 handlePhoto (dayIndex, index) { // 先判断状态,删除操作时为选择图片,默认状态为预览图片操作,操作状态不触发事件 if (this.controlStatus == 'del') { this.photoArr[dayIndex].photos[index].checked = !this.photoArr[dayIndex].photos[index].checked } else if (this.controlStatus == 'default') { let previewArr = [] for (let i in this.photoArr[dayIndex].photos) { previewArr.push(this.photoArr[dayIndex].photos[i].img) } this.previewArr = previewArr this.startPosition = index this.previewIndex = index this.showPreview = true; } }, // 点击删除照片 handleDel () { // 计算需要删除的图片 let delIds = []; for (let i in this.photoArr) { for (let j in this.photoArr[i].photos) { if (this.photoArr[i].photos[j].checked) { delIds.push(this.photoArr[i].photos[j].id) } } } this.delIds = delIds if (this.delIds.length == 0) { this.$toast('请至少选择一张照片') } else { this.$dialog.confirm({ title: '警告', message: '确认删除照片?', }) .then(() => { this.delPhotoByIds() }) .catch(() => { // on cancel }); } }, // 删除照片操作 delPhotoByIds () { this.$toast.loading({ message: '正在删除...', duration: 0, forbidClick: true }) this.http.removePersonPhoto(this.delIds.join(',')).then((res) => { this.$toast.clear() if (res.code == 200) { this.$toast('删除成功'); this.controlStatus = 'control'; this.pageReload()//删除成功后页面重新加载 } else { this.$toast(res.message); } }) }, // 页面数据重新加载 pageReload () { this.pageNum = 1; this.finished = false; this.photoArr = []; this.getUserAlbum() this.getUserSpaceSize() }, // 读取到文件后 afterRead (file) { if (Array.isArray(file)) { this.fileUpload(file, 0) } else { this.fileUpload([file], 0) } }, // 上传照片到文件服务器 fileUpload (files, index) { this.$toast.loading({ message: `上传中 ${index + 1}/${files.length}...`, duration: 0, forbidClick: true }) let size = files[index].file.size let params = new FormData() params.append('file', files[index].file, files[index].file.name) let config = { headers: { //添加请求头 'Content-Type': 'multipart/form-data' } } Axios.post('https://market.myjxt.com:51311/file/fileUpload', params, config).then((res) => { this.$toast.clear() if (res?.status == 200) { this.uploadImgList.push({ path: res.data, imgSize: size }) } else { this.$toast(`照片${index + 1}上传失败,自动忽略`) } if (index + 1 < files.length) { this.fileUpload(files, index + 1) } else { // 照片全部上传完成,统一上传到服务器 this.uploadUserAlbum() } }) }, // 上传照片 uploadUserAlbum () { this.$toast.loading({ message: `同步照片到我的相册...`, duration: 0, forbidClick: true }) this.http.uploadUserAlbum({ "centerNo": this.userInfo.centerNo, "imgList": this.uploadImgList }).then((res) => { this.$toast.clear() if (res.code == 200) { this.$toast('同步完成'); this.uploadImgList = []; this.pageReload()//上传完成后页面重新加载 } else { this.$toast(res.message); } }) } } } </script> <style lang="scss"> #MyAlbum { height: 100%; .photo_box { min-height: 100%; box-sizing: border-box; padding: 24px; padding-bottom: 168px; background: #f5f6fa; .day_box { padding-top: 22px; } .day_time { font-size: 32px; margin-bottom: 24px; } .item { display: inline-block; width: 346px; height: 456px; position: relative; margin-bottom: 10px; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; &:not(:nth-of-type(2n)) { margin-right: 10px; } .check_icon { position: absolute; top: 16px; left: 16px; width: 38px; height: 38px; background: rgba(255, 255, 255, 0.62); border: 2px solid #ffffff; border-radius: 50%; .icon { display: none; font-size: 34px; margin-top: 2px; margin-left: 3px; color: #fff; } &.checked { background: #3074ff; border-color: #3074ff; .icon { display: block; } } } } } .control_panel { width: 100%; height: 168px; background: #fff; position: fixed; bottom: 0; display: flex; align-items: center; justify-content: center; .control_btn, .cancel_btn, .del_btn { display: inline-block; font-size: 32px; color: #3074ff; padding: 40px; margin-bottom: 40px; } .del_btn { color: #e70000; } .cancel_btn { color: #999; margin-right: 80px; } .control_box { width: 100%; box-sizing: border-box; padding: 0 24px; display: flex; align-items: center; justify-content: space-around; .btn { width: 116px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; .icon { font-size: 40px; } .text { width: 100%; font-size: 28px; margin-top: 16px; text-align: center; } } .blue_btn { width: 370px; height: 92px; margin-left: 80px; } } } .van-image-preview__cover { position: absolute; top: auto; bottom: 100px; left: 50%; transform: translateX(-50%); width: 360px; height: 80px; } } </style>