乡村相册
This commit is contained in:
liuye
44
src/apps/AppCountryAlbum/AppCountryAlbum.vue
Normal file
44
src/apps/AppCountryAlbum/AppCountryAlbum.vue
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
<template>
|
||||||
|
<div class="AppCountryAlbum">
|
||||||
|
<component
|
||||||
|
:is="component"
|
||||||
|
@change="onChange"
|
||||||
|
:params="params">
|
||||||
|
</component>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Detail from './components/detail'
|
||||||
|
import List from './components/list'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AppCountryAlbum',
|
||||||
|
appName: '乡村相册',
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
component: 'List',
|
||||||
|
params: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
components: { Detail, List },
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onChange(e) {
|
||||||
|
this.params = e.params
|
||||||
|
this.component = e.type
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
uni-page-body{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.AppCountryAlbum{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
266
src/apps/AppCountryAlbum/components/detail.vue
Normal file
266
src/apps/AppCountryAlbum/components/detail.vue
Normal file
@@ -0,0 +1,266 @@
|
|||||||
|
<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>13</h3>
|
||||||
|
<p>照片</p>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<h3>13</h3>
|
||||||
|
<p>本月</p>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<h3>13</h3>
|
||||||
|
<p>上月</p>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<h3>13</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" />
|
||||||
|
</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="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-btn" @click="uploadImg">上传图片</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
export default {
|
||||||
|
props: ['params'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: [],
|
||||||
|
limit: 9,
|
||||||
|
size: 10 * 1024 * 1024,
|
||||||
|
fileList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: { ...mapState(['user']) },
|
||||||
|
mounted() {
|
||||||
|
console.log(this.params)
|
||||||
|
this.getList()
|
||||||
|
this.getStatistic()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
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]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getStatistic() {
|
||||||
|
this.$http.post(`/app/appvillagepicturealbum/statistic`, null, {
|
||||||
|
params: {
|
||||||
|
areaId: this.params.areaId,
|
||||||
|
type: this.params.type
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</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;
|
||||||
|
span{
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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>
|
||||||
BIN
src/apps/AppCountryAlbum/components/img/local-icon.png
Normal file
BIN
src/apps/AppCountryAlbum/components/img/local-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
133
src/apps/AppCountryAlbum/components/list.vue
Normal file
133
src/apps/AppCountryAlbum/components/list.vue
Normal file
@@ -0,0 +1,133 @@
|
|||||||
|
<template>
|
||||||
|
<div class="list">
|
||||||
|
<AiTopFixed>
|
||||||
|
<div class="area-content">
|
||||||
|
<AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="areaSelect">
|
||||||
|
<img src="./img/local-icon.png" alt="">
|
||||||
|
<span class="label" v-if="areaName">{{ areaName }}</span>
|
||||||
|
<span v-else>请选择</span>
|
||||||
|
<u-icon name="arrow-down" color="#666" size="24" />
|
||||||
|
</AiAreaPicker>
|
||||||
|
</div>
|
||||||
|
</AiTopFixed>
|
||||||
|
<div class="album-list">
|
||||||
|
<div class="item" v-for="(item, index) in list" :key="index" v-if="item.total" @click="toDetail(item)">
|
||||||
|
<img :src="item.url" alt="">
|
||||||
|
<p class="text">{{item.name}}</p>
|
||||||
|
<div class="tips">共{{item.total}}张</div>
|
||||||
|
</div>
|
||||||
|
<AiEmpty v-if="!list.length"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
export default {
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: [],
|
||||||
|
areaId: '',
|
||||||
|
areaName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: { ...mapState(['user']) },
|
||||||
|
mounted() {
|
||||||
|
this.areaId = this.user.areaId
|
||||||
|
this.areaName = this.user.areaName
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
areaSelect(e) {
|
||||||
|
this.areaId = e.id
|
||||||
|
this.areaName = e.name
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
this.$http.post(`/app/appvillagepicturealbum/queryAlbumMenu`, null, {
|
||||||
|
params: {
|
||||||
|
areaId: this.user.areaId,
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.list = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
toDetail(item) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'Detail',
|
||||||
|
params: {
|
||||||
|
type: item.type,
|
||||||
|
areaId: this.areaId,
|
||||||
|
title: item.name,
|
||||||
|
titleImgUrl: item.url
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
this.current++;
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.list {
|
||||||
|
.area-content{
|
||||||
|
width: 100%;
|
||||||
|
line-height: 64px;
|
||||||
|
img{
|
||||||
|
width: 42px;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
.u-icon{
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.album-list{
|
||||||
|
padding: 32px 0 0 32px;
|
||||||
|
overflow: hidden;
|
||||||
|
.item{
|
||||||
|
width: calc(33% - 16px);
|
||||||
|
height: 240px;
|
||||||
|
border-radius: 8px;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 16px 16px 0;
|
||||||
|
float: left;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 16px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32px;
|
||||||
|
font-family: PingFangSC-Semibold, PingFang SC;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FFF;
|
||||||
|
line-height: 44px;
|
||||||
|
}
|
||||||
|
.tips{
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
padding: 0 8px;
|
||||||
|
line-height: 40px;
|
||||||
|
background-color: rgba(0,0,0,.6);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user