自定义导航条设置 customNavigation

src/mods/AppPhotoAlbum/AppPhotoAlbum.vue

@@ -3,15 +3,15 @@
     <div class="header" :class="[isFixed ? 'header-active' : '']">
       <div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
       <div class="nav-bar">
-        <image src="/static/img/left.png" @click="back" />
+        <image src="/static/img/left.png" @click="back"/>
         <h2>乡村相册</h2>
       </div>
     </div>
     <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 class="photo-header">
-      <image :src="coverImg" mode="aspectFill" />
+      <image :src="coverImg" mode="aspectFill"/>
       <h2>{{ name }}</h2>
     </div>
     <div class="photo-info">
@@ -37,7 +37,7 @@
         <h2>{{ group.name }}</h2>
         <div class="photo-wrapper">
           <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">
               <span>{{ item.createUserName }} 上传</span>
             </div>
@@ -54,329 +54,330 @@
 </template>
 
 <script>
-  import { mapState } from 'vuex'
+import {mapState} from 'vuex'
 
-  export default {
+export default {
-    name:"AppPhotoAlbum",
+  name: "AppPhotoAlbum",
-    appName:"乡村相册",
+  appName: "乡村相册",
-    data () {
+  customNavigation: true,
-      return {
+  data() {
-        isFixed: false,
+    return {
-        statusBarHeight: 20,
+      isFixed: false,
-        list: [],
+      statusBarHeight: 20,
-        type: '',
+      list: [],
-        info: {},
+      type: '',
-        name: '',
+      info: {},
-        coverImg: '',
+      name: '',
-        imgList: [],
+      coverImg: '',
-        hideStatus: false,
+      imgList: [],
-        pageShow: false
+      hideStatus: false,
+      pageShow: false
+    }
+  },
+
+  computed: {
+    ...mapState(['user', 'token'])
+  },
+
+  onLoad(query) {
+    this.type = query.type
+    this.name = query.name
+    this.coverImg = query.url
+    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+
+    this.$loading()
+    this.getList(query.type)
+    this.getTotalInfo(query.type)
+  },
+
+  onUnload() {
+    // uni.$off('update')
+  },
+
+  methods: {
+    back() {
+      uni.navigateBack({
+        delta: 1
+      })
+    },
+
+    preview(url) {
+      let imgs = []
+      this.list.forEach(item => {
+        imgs = [...imgs, ...item.list.map(v => v.url)]
+      })
+
+      uni.previewImage({
+        urls: imgs,
+        current: url
+      })
+    },
+
+    upload() {
+      if (!this.token) {
+        this.$refs.login.show()
+
+        return false
       }
+
+      this.imgList = []
+      this.hideStatus = false
+      uni.chooseImage({
+        count: this.limit,
+        sizeType: ['compressed'],
+        sourceType: ['album', 'camera'],
+        success: (res) => {
+          if (res.tempFilePaths.length > 9) {
+            this.$toast(`图片不能超过9张`)
+
+            return false
+          }
+
+          this.$loading('上传中')
+          res.tempFilePaths.forEach((item, index) => {
+            if (index === res.tempFilePaths.length - 1) {
+              this.hideStatus = true
+            }
+
+            this.$nextTick(() => {
+              this.uploadFile(item, res.tempFilePaths.length)
+            })
+          })
+        },
+      })
     },
 
-    computed: {
+    uploadFile(img, total) {
-      ...mapState(['user', 'token'])
+      uni.uploadFile({
+        url: this.$http.baseURL + '/admin/file/add',
+        filePath: img,
+        name: 'file',
+        header: {
+          'Content-Type': 'multipart/form-data',
+          Authorization: uni.getStorageSync('token'),
+        },
+        success: (res) => {
+          const data = JSON.parse(res.data)
+
+          if (data.code === 0) {
+            this.imgList.push(data.data[0].split(';')[0])
+          } else {
+            this.$toast(data.msg)
+          }
+        },
+        complete: () => {
+          this.$nextTick(() => {
+            if (this.imgList.length === total && this.hideStatus) {
+              this.$instance.post(`/app/appvillagepicturealbum/addPictures`, {
+                areaName: uni.getStorageSync('areaName'),
+                areaId: uni.getStorageSync('areaId'),
+                type: this.type,
+                urlList: this.imgList
+              }).then(res => {
+                if (res.code == 0) {
+                  this.getList(this.type)
+                  this.getTotalInfo(this.type)
+                  uni.$emit('update')
+                }
+                this.$hideLoading()
+                this.hideStatus = false
+              })
+            }
+          })
+        }
+      })
     },
 
-    onLoad (query) {
+    getTotalInfo(type) {
-      this.type = query.type
+      this.$instance.post(`/app/appvillagepicturealbum/statistic?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
-      this.name = query.name
+        if (res.code === 0) {
-      this.coverImg = query.url
+          this.info = res.data
-      this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+        }
-
+      })
-      this.$loading()
-      this.getList(query.type)
-      this.getTotalInfo(query.type)
     },
 
-    onUnload () {
+    getList(type) {
-      // uni.$off('update')
+      this.$instance.post(`/app/appvillagepicturealbum/queryAlbum?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
-    },
+        if (res.code === 0) {
+          this.list = Object.keys(res.data).map(v => {
+            return {
+              name: v,
+              list: res.data[v]
+            }
+          })
 
-    methods: {
+          this.$nextTick(() => {
-      back () {
+            this.pageShow = true
-        uni.navigateBack({
+          })
-          delta: 1
-        })
-      },
-
-      preview (url) {
-        let imgs = []
-        this.list.forEach(item => {
-          imgs = [...imgs, ...item.list.map(v => v.url)]
-        })
-
-        uni.previewImage({
-          urls: imgs,
-          current: url
-        })
-      },
-
-      upload() {
-        if (!this.token) {
-          this.$refs.login.show()
-
-          return false
         }
 
-        this.imgList = []
+        this.$hideLoading()
-        this.hideStatus = false
+      })
-        uni.chooseImage({
-          count: this.limit,
-          sizeType: ['compressed'],
-          sourceType: ['album', 'camera'],
-          success: (res) => {
-            if (res.tempFilePaths.length > 9) {
-              this.$toast(`图片不能超过9张`)
-
-              return false
-            }
-
-            this.$loading('上传中')
-            res.tempFilePaths.forEach((item, index) => {
-              if (index === res.tempFilePaths.length - 1) {
-                this.hideStatus = true
-              }
-
-              this.$nextTick(() => {
-                this.uploadFile(item, res.tempFilePaths.length)
-              })
-            })
-          },
-        })
-      },
-
-      uploadFile (img, total) {
-        uni.uploadFile({
-          url: this.$http.baseURL + '/admin/file/add',
-          filePath: img,
-          name: 'file',
-          header: {
-            'Content-Type': 'multipart/form-data',
-            Authorization: uni.getStorageSync('token'),
-          },
-          success: (res) => {
-            const data = JSON.parse(res.data)
-
-            if (data.code === 0) {
-              this.imgList.push(data.data[0].split(';')[0])
-            } else {
-              this.$toast(data.msg)
-            }
-          },
-          complete: () => {
-            this.$nextTick(() => {
-              if (this.imgList.length === total && this.hideStatus) {
-                this.$instance.post(`/app/appvillagepicturealbum/addPictures`, {
-                  areaName: uni.getStorageSync('areaName'),
-                  areaId: uni.getStorageSync('areaId'),
-                  type: this.type,
-                  urlList: this.imgList
-                }).then(res => {
-                  if (res.code == 0) {
-                    this.getList(this.type)
-                    this.getTotalInfo(this.type)
-                    uni.$emit('update')
-                  }
-                  this.$hideLoading()
-                  this.hideStatus = false
-                })
-              }
-            })
-          }
-        })
-      },
-
-      getTotalInfo (type) {
-        this.$instance.post(`/app/appvillagepicturealbum/statistic?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
-          if (res.code === 0) {
-            this.info = res.data
-          }
-        })
-      },
-
-      getList (type) {
-        this.$instance.post(`/app/appvillagepicturealbum/queryAlbum?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
-          if (res.code === 0) {
-            this.list = Object.keys(res.data).map(v => {
-              return {
-                name: v,
-                list: res.data[v]
-              }
-            })
-
-            this.$nextTick(() => {
-              this.pageShow = true
-            })
-          }
-
-          this.$hideLoading()
-        })
-      }
-    },
-
-    onPageScroll(params) {
-      this.isFixed = params.scrollTop > 60;
     }
+  },
+
+  onPageScroll(params) {
+    this.isFixed = params.scrollTop > 60;
   }
+}
 </script>
 
 <style lang="scss" socped>
-  .photo {
+.photo {
-    padding-bottom: 130px;
+  padding-bottom: 130px;
 
-    * {
+  * {
-      box-sizing: border-box;
+    box-sizing: border-box;
-    }
+  }
 
-    .back-wrapper {
+  .back-wrapper {
-      position: fixed;
+    position: fixed;
-      z-index: 11;
+    z-index: 11;
-      left: 20px;
+    left: 20px;
-      top: 24px;
+    top: 24px;
+    width: 40px;
+    height: 40px;
+
+    image {
       width: 40px;
       height: 40px;
+    }
+  }
 
-      image {
+  .header {
-        width: 40px;
+    position: fixed;
-        height: 40px;
+    left: 0;
-      }
+    top: 0;
+    z-index: 0;
+    width: 100%;
+    opacity: 0;
+    transition: all 0.2s ease;
+
+    &.header-active {
+      z-index: 1111;
+      opacity: 1;
+      background: linear-gradient(180deg, #4670F5 0%, #4772F5 100%);
     }
 
-    .header {
+    .nav-bar {
-      position: fixed;
-      left: 0;
-      top: 0;
-      z-index: 0;
-      width: 100%;
-      opacity: 0;
-      transition: all 0.2s ease;
-
-      &.header-active {
-        z-index: 1111;
-        opacity: 1;
-        background: linear-gradient(180deg, #4670F5 0%, #4772F5 100%);
-      }
-
-      .nav-bar {
-        position: relative;
-        height: 88px;
-        line-height: 88px;
-        color: #fff;
-        font-size: 32px;
-        text-align: center;
-
-        image {
-          position: absolute;
-          top: 0;
-          left: 0;
-          z-index: 1;
-          width: 40px;
-          height: 40px;
-          padding: 24px 20px 0 20px;
-          box-sizing: content-box;
-        }
-      }
-    }
-
-    .photo-header {
       position: relative;
-      height: 400px;
+      height: 88px;
+      line-height: 88px;
+      color: #fff;
+      font-size: 32px;
+      text-align: center;
 
       image {
-        width: 100%;
-        height: 400px;
-        filter: blur(2px);
-      }
-
-      h2 {
-        display: flex;
         position: absolute;
-        align-items: center;
-        justify-content: center;
         top: 0;
         left: 0;
-        width: 100%;
-        height: 100%;
         z-index: 1;
-        color: #fff;
+        width: 40px;
-        background: rgba(0,0,0, 0.1);
+        height: 40px;
-        font-size: 56px;
+        padding: 24px 20px 0 20px;
+        box-sizing: content-box;
       }
     }
+  }
 
-    .photo-info {
+  .photo-header {
+    position: relative;
+    height: 400px;
+
+    image {
+      width: 100%;
+      height: 400px;
+      filter: blur(2px);
+    }
+
+    h2 {
       display: flex;
+      position: absolute;
       align-items: center;
-      height: 168px;
+      justify-content: center;
-      background: #FFFFFF;
+      top: 0;
-      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
+      left: 0;
-
+      width: 100%;
-      & > div {
+      height: 100%;
-        flex: 1;
+      z-index: 1;
-        text-align: center;
+      color: #fff;
-
+      background: rgba(0, 0, 0, 0.1);
-        h2 {
+      font-size: 56px;
-          margin-bottom: 10px;
-          font-weight: 600;
-          font-size: 38px;
-          color: #333333;
-        }
-
-        span {
-          color: #999999;
-          font-size: 26px;
-        }
-      }
     }
+  }
 
-    .photo-list {
+  .photo-info {
-      margin-top: 32px;
+    display: flex;
-      padding: 0 32px;
+    align-items: center;
+    height: 168px;
+    background: #FFFFFF;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
+
+    & > div {
+      flex: 1;
+      text-align: center;
 
       h2 {
-        margin-bottom: 32px;
+        margin-bottom: 10px;
-        color: #333333;
+        font-weight: 600;
         font-size: 38px;
+        color: #333333;
       }
 
-      .photo-wrapper {
+      span {
-        display: flex;
+        color: #999999;
-        flex-wrap: wrap;
+        font-size: 26px;
+      }
+    }
+  }
 
-        .photo-item {
+  .photo-list {
-          position: relative;
+    margin-top: 32px;
+    padding: 0 32px;
+
+    h2 {
+      margin-bottom: 32px;
+      color: #333333;
+      font-size: 38px;
+    }
+
+    .photo-wrapper {
+      display: flex;
+      flex-wrap: wrap;
+
+      .photo-item {
+        position: relative;
+        width: 328px;
+        height: 328px;
+        margin-right: 30px;
+        margin-bottom: 32px;
+        border-radius: 12px;
+        overflow: hidden;
+
+        &:nth-of-type(2n) {
+          margin-right: 0;
+        }
+
+        .photo-item__text {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          z-index: 1;
+          width: 100%;
+          height: 80px;
+          line-height: 80px;
+          padding: 0 16px;
+          color: #FFFFFF;
+          font-size: 26px;
+          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
+        }
+
+        image {
           width: 328px;
           height: 328px;
-          margin-right: 30px;
-          margin-bottom: 32px;
-          border-radius: 12px;
-          overflow: hidden;
-
-          &:nth-of-type(2n) {
-            margin-right: 0;
-          }
-
-          .photo-item__text {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            z-index: 1;
-            width: 100%;
-            height: 80px;
-            line-height: 80px;
-            padding: 0 16px;
-            color: #FFFFFF;
-            font-size: 26px;
-            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
-          }
-
-          image {
-            width: 328px;
-            height: 328px;
-          }
         }
       }
     }
   }
+}
 </style>