图片懒加载

This commit is contained in:
yanran200730
2022-06-01 09:56:07 +08:00
parent 3484a05d00
commit 8511ba81ea
5 changed files with 10 additions and 32 deletions

View File

@@ -35,7 +35,7 @@ export default {
margin-bottom: 20px; margin-bottom: 20px;
.emptyImg { .emptyImg {
width: initial; width: 300px;
height: initial; height: initial;
} }

View File

@@ -48,7 +48,7 @@
<div class="photo-item__wrapper"> <div class="photo-item__wrapper">
<div class="photo-item" @click="linkTo('./Photo?id=' + item.id)" v-for="(item, index) in list" :key="index"> <div class="photo-item" @click="linkTo('./Photo?id=' + item.id)" v-for="(item, index) in list" :key="index">
<!-- <image :src="item.photoUrl" mode="aspectFill" /> --> <!-- <image :src="item.photoUrl" mode="aspectFill" /> -->
<u-lazy-load :image="item.photoUrl"></u-lazy-load> <u-lazy-load :image="item.photoUrl" img-mode="aspectFill"></u-lazy-load>
<div class="photo-item__text"> <div class="photo-item__text">
<h2><AiOpenData v-if="item.createUserId" type="userName" :openid="item.createUserId"></AiOpenData></h2> <h2><AiOpenData v-if="item.createUserId" type="userName" :openid="item.createUserId"></AiOpenData></h2>
<p>{{ item.createTime }}</p> <p>{{ item.createTime }}</p>
@@ -206,17 +206,7 @@
sizeType: ['compressed'], sizeType: ['compressed'],
sourceType: this.info.photoSource === '1' ? ['camera'] : ['album', 'camera'], sourceType: this.info.photoSource === '1' ? ['camera'] : ['album', 'camera'],
success: res => { success: res => {
let formData = new FormData() this.linkTo(`./Watermark?url=${encodeURIComponent(res.tempFilePaths[0])}&albumId=${this.id}`)
formData.append('file', res.tempFiles[0])
this.$loading()
this.$http.post('/admin/file/add2?type=image', formData).then(res => {
if (res.code === 0) {
this.linkTo(`./Watermark?url=${res.data.url}&albumId=${this.id}`)
} else {
this.$u.toast(res.msg)
}
uni.hideLoading()
})
} }
}) })
}, },

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="EditAlbum" v-if="pageShow"> <div class="EditAlbum" v-if="pageShow">
<div class="img-item" v-for="(item, index) in list" :key="index" @click="choose(index)"> <div class="img-item" v-for="(item, index) in list" :key="index" @click="choose(index)">
<image class="img" :src="item.photoUrl" mode="aspectFill" /> <u-lazy-load class="img" :image="item.photoUrl" img-mode="aspectFill"></u-lazy-load>
<span class="icon" v-if="!item.checked"></span> <span class="icon" v-if="!item.checked"></span>
<image class="icon" v-else src="./images/img-choose.png" /> <image class="icon" v-else src="./images/img-choose.png" />
</div> </div>

View File

@@ -181,7 +181,7 @@
this.albumId = query.albumId this.albumId = query.albumId
} }
this.img = query.url this.img = decodeURIComponent(query.url)
this.height = uni.getSystemInfoSync().windowHeight this.height = uni.getSystemInfoSync().windowHeight
this.getLocation() this.getLocation()
@@ -248,11 +248,10 @@
this.$nextTick(() => { this.$nextTick(() => {
html2canvas(this.$refs.waterMarker, { html2canvas(this.$refs.waterMarker, {
allowTaint: true, allowTaint: true,
useCORS: true, useCORS: true
dpi: 300
}).then((canvas) => { }).then((canvas) => {
let dataURL = canvas.toDataURL('image/png') let dataURL = canvas.toDataURL('image/jpg')
const file = this.dataURLtoFile(dataURL, 'photo.png') const file = this.dataURLtoFile(dataURL, 'photo.jpg')
let formData = new FormData() let formData = new FormData()
formData.append('file', file) formData.append('file', file)
this.$http.post('/admin/file/add2?type=image', formData).then(res => { this.$http.post('/admin/file/add2?type=image', formData).then(res => {

View File

@@ -55,7 +55,7 @@
<div class="item" v-for="(item, index) in list" :key="index" @click="linkTo('./AlbumDetail?id=' + item.id)"> <div class="item" v-for="(item, index) in list" :key="index" @click="linkTo('./AlbumDetail?id=' + item.id)">
<span v-if="item.photoHasRead === 'NO'">未查看</span> <span v-if="item.photoHasRead === 'NO'">未查看</span>
<image src="./../images/icon.png" v-if="!item.lastPhotoUrl" /> <image src="./../images/icon.png" v-if="!item.lastPhotoUrl" />
<image class="item-img" :src="item.lastPhotoUrl" v-else /> <u-lazy-load class="item-img" :image="item.lastPhotoUrl" v-else img-mode="aspectFill"></u-lazy-load>
<div class="item-bottom"> <div class="item-bottom">
<h2>{{ item.albumName }}</h2> <h2>{{ item.albumName }}</h2>
<div class="item-bottom__info"> <div class="item-bottom__info">
@@ -191,18 +191,7 @@
sizeType: ['compressed'], sizeType: ['compressed'],
sourceType: ['camera'], sourceType: ['camera'],
success: res => { success: res => {
let formData = new FormData() this.linkTo(`./Watermark?url=${encodeURIComponent(res.tempFilePaths[0])}`)
formData.append('file', res.tempFiles[0])
this.$loading()
this.$http.post('/admin/file/add2?type=image', formData).then(res => {
if (res.code === 0) {
this.linkTo(`./Watermark?url=${res.data.url}`)
} else {
this.$u.toast(res.msg)
}
uni.hideLoading()
})
} }
}) })
} }