diff --git a/src/saas/AppCountryAlbum/AlbumDetail.vue b/src/saas/AppCountryAlbum/AlbumDetail.vue
index 873dbdbc..1154a677 100644
--- a/src/saas/AppCountryAlbum/AlbumDetail.vue
+++ b/src/saas/AppCountryAlbum/AlbumDetail.vue
@@ -1,28 +1,421 @@
 <template>
-  <div class="AlbumDetail"></div>
+  <div class="photo">
+    <div class="photo-header">
+      <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" mode="aspectFill" />
+      <div>
+        <h2>默认相册</h2>
+        <span @click="linkTo('./AddAlbum')">相册设置</span>
+      </div>
+    </div>
+    <div class="photo-info">
+      <div class="photo-info__item">
+        <h2>131</h2>
+        <span>照片</span>
+      </div>
+      <div class="photo-info__item">
+        <h2>13</h2>
+        <span>本月</span>
+      </div>
+      <div class="photo-info__item">
+        <h2>133</h2>
+        <span>上月</span>
+      </div>
+      <div class="photo-info__item">
+        <h2>13</h2>
+        <span>今年</span>
+      </div>
+    </div>
+    <div class="photo-list">
+      <div class="photo-title">
+        <h2>照片列表</h2>
+        <div class="right">
+          <div class="right-item">
+            <span>所有日期</span>
+            <image src="./images/down.png" />
+          </div>
+          <div class="right-item">
+            <span>所有干部</span>
+            <image src="./images/down.png" />
+          </div>
+        </div>
+      </div>
+      <div class="photo-item__wrapper">
+        <div class="photo-item" @click="linkTo('./Photo')" v-for="(group, index) in 10" :key="index">
+          <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" @click="preview(item.url)" mode="aspectFill" />
+          <div class="photo-item__text">
+            <h2>张三</h2>
+            <p>02-12 12:32</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="btn-wrapper">
+      <div class="btn" @click="upload" hover-class="text-hover">编辑照片</div>
+      <div class="btn" @click="upload" hover-class="text-hover">上传照片</div>
+    </div>
+  </div>
 </template>
 
 <script>
+  import { mapState } from 'vuex'
+
   export default {
     name: 'AlbumDetail',
-
-    appName: '相册详情',
+    appName: '乡村相册',
 
     data () {
       return {
+        list: [],
+        type: '',
+        info: {},
+        name: '',
+        coverImg: '',
+        imgList: [],
+        hideStatus: false,
+        pageShow: false
       }
     },
 
-    mounted () {
+    computed: {
+      ...mapState(['user', 'token'])
+    },
 
+    onLoad (query) {
+      // this.type = query.type
+      // this.name = query.name
+      // this.coverImg = query.url
+    },
+
+    onUnload () {
+      // uni.$off('update')
     },
 
     methods: {
+      linkTo (url) {
+        uni.navigateTo({
+          url
+        })
+      },
 
+      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)
+              })
+            })
+          },
+        })
+      },
+
+      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()
+        })
+      }
     }
   }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" socped>
+  .photo {
+    padding-bottom: 130px;
 
-</style>
\ No newline at end of file
+    * {
+      box-sizing: border-box;
+    }
+
+    .photo-list {
+      padding: 32px;
+
+      .photo-item__wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+
+        .photo-item {
+          position: relative;
+          width: 328px;
+          height: 328px;
+          margin-bottom: 32px;
+          border-radius: 12px;
+          overflow: hidden;
+
+          image {
+            width: 100%;
+            height: 100%;
+          }
+
+          .photo-item__text {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            z-index: 1;
+            width: 100%;
+            padding: 20px 16px 16px;
+            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+
+            h2 {
+              margin-bottom: 12px;
+              color: #fff;
+              font-size: 32px;
+              font-weight: 600;
+            }
+
+            p {
+              color: #898482;
+              font-size: 28px;
+            }
+          }
+
+          &:nth-of-type(2n) {
+            margin-left: 30px;
+          }
+        }
+      }
+
+      .photo-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: 44px 0;
+
+        & > h2 {
+          color: #333333;
+          font-size: 38px;
+          font-weight: 600;
+        }
+
+        .right {
+          display: flex;
+          align-items: center;
+
+          & > div {
+            display: flex;
+            align-items: center;
+            margin-right: 32px;
+
+            &:last-child {
+              margin-right: 0;
+            }
+
+            span {
+              color: #666666;
+              font-size: 26px;
+            }
+
+            image {
+              width: 32px;
+              height: 32px;
+              margin-left: 8px;
+            }
+          }
+        }
+      }
+    }
+
+    .photo-header {
+      position: relative;
+      height: 400px;
+
+      div {
+        position: relative;
+        display: flex;
+        z-index: 1;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+      }
+
+      span {
+        width: 176px;
+        height: 56px;
+        line-height: 56px;
+        margin-top: 16px;
+        text-align: center;
+        background: rgba(255, 255, 255, 0.1);
+        color: #beb2ab;
+        border-radius: 28px;
+      }
+
+      image {
+        position: absolute;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 400px;
+        filter: blur(2px);
+      }
+
+      h2 {
+        color: #fff;
+        background: rgba(0,0,0, 0.1);
+        font-size: 56px;
+      }
+    }
+
+    .photo-info {
+      display: flex;
+      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: 10px;
+          font-weight: 600;
+          font-size: 38px;
+          color: #333333;
+        }
+
+        span {
+          color: #999999;
+          font-size: 26px;
+        }
+      }
+    }
+
+    .btn-wrapper {
+      display: flex;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 112px;
+
+      .btn {
+        &:active, &.hover {
+          opacity: 0.7;
+        }
+      }
+
+      .btn:first-child {
+        width: 270px;
+        height: 112px;
+        line-height: 112px;
+        text-align: center;
+        background: #FFFFFF;
+        box-shadow: inset 0px 1px 0px 0px #DDDDDD;
+        color: #333333;
+        font-size: 36px;
+      }
+
+      .btn:last-child {
+        flex: 1;
+        height: 112px;
+        line-height: 112px;
+        text-align: center;
+        background: #1365DD;
+        box-shadow: inset 0px 1px 0px 0px #DDDDDD;
+        color: #fff;
+        font-size: 36px;
+      }
+    }
+  }
+</style>
diff --git a/src/saas/AppCountryAlbum/MovePhoto.vue b/src/saas/AppCountryAlbum/MovePhoto.vue
new file mode 100644
index 00000000..8644f4be
--- /dev/null
+++ b/src/saas/AppCountryAlbum/MovePhoto.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="MovePhoto">
+    <image src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" />
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'MovePhoto',
+
+    appName: '移动相片',
+
+    data () {
+      return {
+
+      }
+    },
+
+    onLoad () {
+
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/saas/AppCountryAlbum/Photo.vue b/src/saas/AppCountryAlbum/Photo.vue
new file mode 100644
index 00000000..f655a2ff
--- /dev/null
+++ b/src/saas/AppCountryAlbum/Photo.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="photo">
+    <image mode="aspectFit" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64f71761d2b04746ad640a43706a92e4~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" />
+    <div class="photo-footer">
+      <div class="item" @click="back">
+        <image src="./images/fenxiang.png" />
+        <span>分享</span>
+      </div>
+      <div class="item">
+        <image src="./images/xiazai.png" />
+        <span>下载</span>
+      </div>
+      <div class="item">
+        <image src="./images/shanchu.png" />
+        <span>删除</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Photo',
+
+    appName: '相片',
+
+    data () {
+      return {
+
+      }
+    },
+
+    onLoad () {
+
+    },
+
+    methods: {
+      back () {
+        uni.navigateBack({
+          delta: 1
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .photo {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    background: #000;
+
+    .photo-footer {
+      display: flex;
+      position: fixed;
+      align-items: center;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 216px;
+      background: #1E1E21;
+
+      .item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        text-align: center;
+
+        image {
+          width: 80px;
+          height: 80px;
+        }
+
+        span {
+          font-size: 28px;
+          color: #fff;
+        }
+      }
+    }
+
+    & > image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/saas/AppCountryAlbum/images/down.png b/src/saas/AppCountryAlbum/images/down.png
new file mode 100644
index 00000000..2488b941
Binary files /dev/null and b/src/saas/AppCountryAlbum/images/down.png differ