乡村相册

src/apps/AppCountryAlbum/AppCountryAlbum.vue

@@ -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>

src/apps/AppCountryAlbum/components/detail.vue

@@ -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>

src/apps/AppCountryAlbum/components/list.vue

@@ -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>