356 lines
8.7 KiB
Vue
356 lines
8.7 KiB
Vue
<template>
|
|
<div class="detail">
|
|
<div class="banner-img">
|
|
<p>{{params.title}}</p>
|
|
<img :src="params.titleImgUrl" alt="">
|
|
</div>
|
|
<div class="num-row">
|
|
<div class="item">
|
|
<h3>{{numInfo.total}}</h3>
|
|
<p>照片</p>
|
|
</div>
|
|
<div class="item">
|
|
<h3>{{numInfo.lastMonth}}</h3>
|
|
<p>本月</p>
|
|
</div>
|
|
<div class="item">
|
|
<h3>{{numInfo.thisMonth}}</h3>
|
|
<p>上月</p>
|
|
</div>
|
|
<div class="item">
|
|
<h3>{{numInfo.thisYear}}</h3>
|
|
<p>今年</p>
|
|
</div>
|
|
</div>
|
|
<div class="list-conent">
|
|
<div class="item" v-for="(item, index) in list" :key="index">
|
|
<div class="time-select">
|
|
<span>{{item.name}}</span>
|
|
<u-icon name="arrow-down" color="#333" size="16" />
|
|
<span class="edit-btn" @click="editClick(editText)">{{editText}}</span>
|
|
</div>
|
|
<div class="img-list">
|
|
<div class="img-item" v-for="(e, indexs) in item.list" :key="indexs">
|
|
<p>{{e.createUserName}} 上传</p>
|
|
<img :src="e.url" alt="" @click.stop="previewImage(item.list, e.url)">
|
|
<span class="cir-icon" v-if="editText== '取消' && !e.isCheked" @click="checkImg(e, index, indexs)"></span>
|
|
<u-icon name="checkmark-circle-fill" color="#26f" size="54" class="del-icon" @click="delSelect(e, index, indexs)" v-if="editText== '取消' && e.isCheked"></u-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-btn" @click="uploadImg" v-if="editText == '编辑' ">上传图片</div>
|
|
<div class="footer-btn" @click="delConfirm" v-if="editText == '取消'">删除</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [],
|
|
limit: 9,
|
|
size: 10 * 1024 * 1024,
|
|
fileList: [],
|
|
numInfo: {},
|
|
params: {},
|
|
editText: '编辑',
|
|
delIds: []
|
|
}
|
|
},
|
|
computed: { ...mapState(['user']) },
|
|
onLoad(option) {
|
|
this.params = option
|
|
console.log(this.params)
|
|
this.getList()
|
|
this.getStatistic()
|
|
},
|
|
onShow() {
|
|
document.title = "乡村相册"
|
|
},
|
|
|
|
methods: {
|
|
delConfirm() {
|
|
if(!this.delIds.length) {
|
|
return this.$u.toast('请先选中需要删除的照片')
|
|
}
|
|
var id = this.delIds.join(',')
|
|
this.$confirm('确定删除这些相片?').then(() => {
|
|
this.$http.post(`/app/appvillagepicturealbum/delete?ids=${id}`).then((res) => {
|
|
if (res.code == 0) {
|
|
this.$u.toast('删除成功！')
|
|
this.list = []
|
|
this.getList()
|
|
this.getStatistic()
|
|
this.editClick('取消')
|
|
uni.$emit('updateList')
|
|
}
|
|
})
|
|
})
|
|
},
|
|
editClick(text) {
|
|
this.editText = text == '编辑' ? '取消' : '编辑'
|
|
this.delIds = []
|
|
if(text == '取消' && this.delIds.length) {
|
|
this.list = []
|
|
this.getList()
|
|
}
|
|
},
|
|
checkImg(row, index, indexs) {
|
|
this.list[index].list[indexs].isCheked = true
|
|
this.delIds.push(row.id)
|
|
this.$forceUpdate()
|
|
},
|
|
delSelect(row, index, indexs) {
|
|
this.list[index].list[indexs].isCheked = false
|
|
this.delIds.map((item, i) => {
|
|
if(item == row.id) {
|
|
this.delIds.splice(i, 1)
|
|
}
|
|
})
|
|
this.$forceUpdate()
|
|
},
|
|
previewImage(images, img) {
|
|
uni.previewImage({
|
|
urls: images.map(v => v.url),
|
|
current: img
|
|
})
|
|
},
|
|
getList() {
|
|
this.$http.post(`/app/appvillagepicturealbum/queryAlbum`, null, {
|
|
params: {
|
|
areaId: this.params.areaId,
|
|
type: this.params.type
|
|
}
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
this.list = Object.keys(res.data).map(v => {
|
|
return {
|
|
name: v,
|
|
list: res.data[v]
|
|
}
|
|
})
|
|
this.list.map((item) => {
|
|
item.list.map((e) => {
|
|
e.isCheked = false
|
|
})
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getStatistic() {
|
|
this.$http.post(`/app/appvillagepicturealbum/statistic`, null, {
|
|
params: {
|
|
areaId: this.params.areaId,
|
|
type: this.params.type
|
|
}
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
this.numInfo = res.data
|
|
}
|
|
})
|
|
},
|
|
uploadImg() {
|
|
let params = {
|
|
count: this.limit,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
let count = res.tempFiles?.length || res.tempFile ? 1 : 0
|
|
if (count > this.limit && this.limit !== 1) {
|
|
return this.$u.toast(`不能超过${this.limit}个`)
|
|
}
|
|
if (res.tempFiles) {
|
|
res.tempFiles?.map((item) => {
|
|
this.uploadFile(item)
|
|
})
|
|
} else if (res?.tempFile) {
|
|
this.uploadFile(res.tempFile)
|
|
}
|
|
},
|
|
}
|
|
|
|
uni.chooseImage(params)
|
|
},
|
|
uploadFile(img) {
|
|
this.fileList = []
|
|
if (this.size > 0 && img.size > this.size) {
|
|
return this.$u.toast(`不能超过${Math.ceil(this.size / 1024 / 1024)}MB`)
|
|
}
|
|
uni.showLoading({title: '上传中'})
|
|
let formData = new FormData()
|
|
formData.append('file', img)
|
|
this.$http.post('/admin/file/add2', formData).then((res) => {
|
|
uni.hideLoading()
|
|
if (res?.data) {
|
|
this.fileList.push(res.data)
|
|
this.confirmUpload()
|
|
} else {
|
|
this.$u.toast(res.msg)
|
|
}
|
|
}).catch(err => {
|
|
this.$u.toast(err)
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
confirmUpload() {
|
|
console.log(this.fileList)
|
|
var urlList = []
|
|
this.fileList.map((item) => {
|
|
urlList.push(item.url)
|
|
})
|
|
this.$http.post(`/app/appvillagepicturealbum/addPictures`, {
|
|
areaId: this.params.areaId,
|
|
type: this.params.type,
|
|
urlList: urlList,
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
this.$u.toast('上传成功!')
|
|
this.getList()
|
|
this.getStatistic()
|
|
uni.$emit('updateList')
|
|
}
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.detail {
|
|
background: #F3F6F9;
|
|
.banner-img{
|
|
width: 100%;
|
|
height: 272px;
|
|
position: relative;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: blur(2px);
|
|
}
|
|
p{
|
|
position: absolute;
|
|
top: 96px;
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 56px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFF;
|
|
line-height: 80px;
|
|
z-index: 99;
|
|
}
|
|
}
|
|
.num-row{
|
|
padding: 0 32px;
|
|
display: flex;
|
|
background-color: #fff;
|
|
.item{
|
|
flex: 1;
|
|
text-align: center;
|
|
h3{
|
|
margin: 32px 0 16px 0;
|
|
font-size: 38px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333;
|
|
line-height: 52px;
|
|
}
|
|
p{
|
|
font-size: 26px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
color: #999;
|
|
line-height: 36px;
|
|
padding-bottom: 32px;
|
|
}
|
|
}
|
|
}
|
|
.list-conent{
|
|
padding-bottom: 112px;
|
|
}
|
|
.time-select{
|
|
height: 116px;
|
|
line-height: 116px;
|
|
padding-left: 32px;
|
|
font-size: 38px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #333;
|
|
position: relative;
|
|
span{
|
|
display: inline-block;
|
|
margin-right: 16px;
|
|
}
|
|
.edit-btn{
|
|
display: inline-block;
|
|
color: #26f;
|
|
font-weight: 400;
|
|
width: 200px;
|
|
text-align: right;
|
|
line-height: 88px;
|
|
position: absolute;
|
|
font-size: 32px;
|
|
right: 18px;
|
|
top: 20px;
|
|
}
|
|
}
|
|
.img-list{
|
|
overflow: hidden;
|
|
padding-left: 32px;
|
|
.img-item{
|
|
position: relative;
|
|
margin: 0 32px 32px 0;
|
|
float: left;
|
|
width: calc(50% - 32px);
|
|
box-sizing: border-box;
|
|
img{
|
|
width: 100%;
|
|
height: 328px;
|
|
border-radius: 8px;
|
|
}
|
|
p{
|
|
position: absolute;
|
|
bottom: 16px;
|
|
left: 16px;
|
|
z-index: 9;
|
|
font-size: 26px;
|
|
color: #FFF;
|
|
line-height: 36px;
|
|
}
|
|
.del-icon{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
.cir-icon{
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
border: 4px solid #ccc;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
.footer-btn{
|
|
width: 100%;
|
|
text-align: center;
|
|
height: 112px;
|
|
line-height: 112px;
|
|
background: #3975C6;
|
|
box-shadow: 0px 1px 0px 0px #EEEEEE;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
font-size: 32px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFF;
|
|
z-index: 999;
|
|
}
|
|
}
|
|
</style> |