自定义导航条设置 customNavigation
This commit is contained in:
@@ -3,15 +3,15 @@
|
|||||||
<div class="header" :class="[isFixed ? 'header-active' : '']">
|
<div class="header" :class="[isFixed ? 'header-active' : '']">
|
||||||
<div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
|
<div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
|
||||||
<div class="nav-bar">
|
<div class="nav-bar">
|
||||||
<image src="/static/img/left.png" @click="back" />
|
<image src="/static/img/left.png" @click="back"/>
|
||||||
<h2>乡村相册</h2>
|
<h2>乡村相册</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="back-wrapper" @click="back" v-show="!isFixed" :style="{marginTop : statusBarHeight + 'px'}">
|
<div class="back-wrapper" @click="back" v-show="!isFixed" :style="{marginTop : statusBarHeight + 'px'}">
|
||||||
<image src="/static/img/left.png" />
|
<image src="/static/img/left.png"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="photo-header">
|
<div class="photo-header">
|
||||||
<image :src="coverImg" mode="aspectFill" />
|
<image :src="coverImg" mode="aspectFill"/>
|
||||||
<h2>{{ name }}</h2>
|
<h2>{{ name }}</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="photo-info">
|
<div class="photo-info">
|
||||||
@@ -37,7 +37,7 @@
|
|||||||
<h2>{{ group.name }}</h2>
|
<h2>{{ group.name }}</h2>
|
||||||
<div class="photo-wrapper">
|
<div class="photo-wrapper">
|
||||||
<div class="photo-item" v-for="(item, i) in group.list" :key="i">
|
<div class="photo-item" v-for="(item, i) in group.list" :key="i">
|
||||||
<image :src="item.url" @click="preview(item.url)" mode="aspectFill" />
|
<image :src="item.url" @click="preview(item.url)" mode="aspectFill"/>
|
||||||
<div class="photo-item__text">
|
<div class="photo-item__text">
|
||||||
<span>{{ item.createUserName }} 上传</span>
|
<span>{{ item.createUserName }} 上传</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -54,12 +54,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex'
|
import {mapState} from 'vuex'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name:"AppPhotoAlbum",
|
name: "AppPhotoAlbum",
|
||||||
appName:"乡村相册",
|
appName: "乡村相册",
|
||||||
data () {
|
customNavigation: true,
|
||||||
|
data() {
|
||||||
return {
|
return {
|
||||||
isFixed: false,
|
isFixed: false,
|
||||||
statusBarHeight: 20,
|
statusBarHeight: 20,
|
||||||
@@ -78,7 +79,7 @@
|
|||||||
...mapState(['user', 'token'])
|
...mapState(['user', 'token'])
|
||||||
},
|
},
|
||||||
|
|
||||||
onLoad (query) {
|
onLoad(query) {
|
||||||
this.type = query.type
|
this.type = query.type
|
||||||
this.name = query.name
|
this.name = query.name
|
||||||
this.coverImg = query.url
|
this.coverImg = query.url
|
||||||
@@ -89,18 +90,18 @@
|
|||||||
this.getTotalInfo(query.type)
|
this.getTotalInfo(query.type)
|
||||||
},
|
},
|
||||||
|
|
||||||
onUnload () {
|
onUnload() {
|
||||||
// uni.$off('update')
|
// uni.$off('update')
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
back () {
|
back() {
|
||||||
uni.navigateBack({
|
uni.navigateBack({
|
||||||
delta: 1
|
delta: 1
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
preview (url) {
|
preview(url) {
|
||||||
let imgs = []
|
let imgs = []
|
||||||
this.list.forEach(item => {
|
this.list.forEach(item => {
|
||||||
imgs = [...imgs, ...item.list.map(v => v.url)]
|
imgs = [...imgs, ...item.list.map(v => v.url)]
|
||||||
@@ -146,7 +147,7 @@
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
uploadFile (img, total) {
|
uploadFile(img, total) {
|
||||||
uni.uploadFile({
|
uni.uploadFile({
|
||||||
url: this.$http.baseURL + '/admin/file/add',
|
url: this.$http.baseURL + '/admin/file/add',
|
||||||
filePath: img,
|
filePath: img,
|
||||||
@@ -187,7 +188,7 @@
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
getTotalInfo (type) {
|
getTotalInfo(type) {
|
||||||
this.$instance.post(`/app/appvillagepicturealbum/statistic?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
|
this.$instance.post(`/app/appvillagepicturealbum/statistic?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
this.info = res.data
|
this.info = res.data
|
||||||
@@ -195,7 +196,7 @@
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
getList (type) {
|
getList(type) {
|
||||||
this.$instance.post(`/app/appvillagepicturealbum/queryAlbum?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
|
this.$instance.post(`/app/appvillagepicturealbum/queryAlbum?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
this.list = Object.keys(res.data).map(v => {
|
this.list = Object.keys(res.data).map(v => {
|
||||||
@@ -218,11 +219,11 @@
|
|||||||
onPageScroll(params) {
|
onPageScroll(params) {
|
||||||
this.isFixed = params.scrollTop > 60;
|
this.isFixed = params.scrollTop > 60;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" socped>
|
<style lang="scss" socped>
|
||||||
.photo {
|
.photo {
|
||||||
padding-bottom: 130px;
|
padding-bottom: 130px;
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@@ -300,7 +301,7 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: rgba(0,0,0, 0.1);
|
background: rgba(0, 0, 0, 0.1);
|
||||||
font-size: 56px;
|
font-size: 56px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -378,5 +379,5 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user