登录调整整合

This commit is contained in:
aixianling
2022-01-04 17:17:44 +08:00
parent 4e81b6edb9
commit 6e529abfd7
3 changed files with 115 additions and 163 deletions

View File

@@ -1,51 +1,137 @@
<template> <template>
<div class="AppCountryAlbum"> <div class="AppCountryAlbum">
<component v-if="refresh" :is="component" @change="onChange" :params="params"/> <div class="list">
<AiTopFixed>
<div class="area-content">
<AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="areaSelect" :name.sync="areaName">
<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" @click="toDetail(item)">
<img :src="`${cdn}/dvcp/album/album${item.type}.png`" alt="">
<p class="text">{{ item.name }}</p>
<div class="tips">{{ item.total }}</div>
</div>
<AiEmpty v-if="!list.length"/>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import Detail from './detail' import {mapState} from 'vuex'
import List from './list'
export default { export default {
name: 'AppCountryAlbum', name: "AppCountryAlbum",
appName: '乡村相册', appName: "乡村相册",
data() { data() {
return { return {
component: 'List', list: [],
params: {}, areaId: '',
refresh: true areaName: '',
cdn: ''
} }
}, },
computed: {...mapState(['user'])},
components: {Detail, List},
onShow() { onShow() {
document.title = "乡村相册" this.areaId = this.user.areaId
this.handleRefresh() this.areaName = this.user.areaName
this.getList()
this.cdn = this.$cdn.replace("/dvcp/h5", "");
}, },
methods: { methods: {
onChange(e) { areaSelect(e) {
this.params = e.params this.areaId = e
this.component = e.type this.getList()
}, },
handleRefresh() { getList() {
this.refresh = false this.$http.post(`/app/appvillagepicturealbum/queryAlbumMenu`, null, {
this.$nextTick(() => { params: {
this.refresh = true areaId: this.areaId,
}
}).then(res => {
if (res.code == 0) {
this.list = res.data
}
}) })
} },
toDetail(item) {
uni.navigateTo({url: `./detail?type=${item.type}&areaId=${this.areaId}&title=${item.name}&titleImgUrl=${this.cdn}/dvcp/album/album${item.type}.png`})
},
},
onReachBottom() {
this.current++;
this.getList()
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
uni-page-body {
height: 100%;
}
.AppCountryAlbum { .AppCountryAlbum {
height: 100%; .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> </style>

View File

@@ -40,7 +40,7 @@
</div> </div>
<AiEmpty v-if="!list.length"/> <AiEmpty v-if="!list.length"/>
</div> </div>
<div class="footer-btn" @click="uploadImg" v-if="editText == '编辑' ">上传图片</div> <div class="footer-btn" @click="uploadImg" v-if="editText == '编辑' ">上传图片</div>
<div class="footer-btn" @click="delConfirm" v-if="editText == '取消'">删除</div> <div class="footer-btn" @click="delConfirm" v-if="editText == '取消'">删除</div>
</div> </div>
@@ -64,14 +64,12 @@ export default {
computed: { ...mapState(['user']) }, computed: { ...mapState(['user']) },
onLoad(option) { onLoad(option) {
this.params = option this.params = option
console.log(this.params)
this.getList() this.getList()
this.getStatistic() this.getStatistic()
}, },
onShow() { onShow() {
document.title = "乡村相册" document.title = "乡村相册"
}, },
methods: { methods: {
delConfirm() { delConfirm() {
if(!this.delIds.length) { if(!this.delIds.length) {
@@ -86,7 +84,6 @@ export default {
this.getList() this.getList()
this.getStatistic() this.getStatistic()
this.editClick('取消') this.editClick('取消')
uni.$emit('updateList')
} }
}) })
}) })
@@ -197,7 +194,6 @@ export default {
}) })
}, },
confirmUpload() { confirmUpload() {
console.log(this.fileList)
var urlList = [] var urlList = []
this.fileList.map((item) => { this.fileList.map((item) => {
urlList.push(item.url) urlList.push(item.url)
@@ -211,7 +207,6 @@ export default {
this.$u.toast('上传成功!') this.$u.toast('上传成功!')
this.getList() this.getList()
this.getStatistic() this.getStatistic()
uni.$emit('updateList')
} }
}) })
} }
@@ -343,7 +338,7 @@ export default {
height: 112px; height: 112px;
line-height: 112px; line-height: 112px;
background: #3975C6; background: #3975C6;
box-shadow: 0px 1px 0px 0px #EEEEEE; box-shadow: 0 1px 0 0 #EEEEEE;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
@@ -354,4 +349,4 @@ export default {
z-index: 999; z-index: 999;
} }
} }
</style> </style>

View File

@@ -1,129 +0,0 @@
<template>
<div class="list">
<AiTopFixed>
<div class="area-content">
<AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="areaSelect" :name.sync="areaName">
<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" @click="toDetail(item)">
<img :src="`${cdn}/dvcp/album/album${item.type}.png`" 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: '',
cdn: ''
}
},
computed: { ...mapState(['user']) },
created() {
this.areaId = this.user.areaId
this.areaName = this.user.areaName
this.getList()
uni.$on('updateList', () => {
this.getList()
})
this.cdn = this.$cdn.replace("/dvcp/h5","");
},
methods: {
areaSelect(e) {
this.areaId = e
this.getList()
},
getList() {
this.$http.post(`/app/appvillagepicturealbum/queryAlbumMenu`, null, {
params: {
areaId: this.areaId,
}
}).then(res => {
if (res.code == 0) {
this.list = res.data
}
})
},
toDetail(item) {
uni.navigateTo({url: `./detail?type=${item.type}&areaId=${this.areaId}&title=${item.name}&titleImgUrl=${this.cdn}/dvcp/album/album${item.type}.png`})
},
},
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>