From 7bb3adb2aa1a33deb1675489b73cf72e4d5bdb84 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Tue, 21 Dec 2021 13:58:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B9=A1=E6=9D=91=E7=9B=B8=E5=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apps/AppCountryAlbum/AppCountryAlbum.vue  |  44 +++
 .../AppCountryAlbum/components/detail.vue     | 266 ++++++++++++++++++
 .../components/img/local-icon.png             | Bin 0 -> 1121 bytes
 src/apps/AppCountryAlbum/components/list.vue  | 133 +++++++++
 4 files changed, 443 insertions(+)
 create mode 100644 src/apps/AppCountryAlbum/AppCountryAlbum.vue
 create mode 100644 src/apps/AppCountryAlbum/components/detail.vue
 create mode 100644 src/apps/AppCountryAlbum/components/img/local-icon.png
 create mode 100644 src/apps/AppCountryAlbum/components/list.vue

diff --git a/src/apps/AppCountryAlbum/AppCountryAlbum.vue b/src/apps/AppCountryAlbum/AppCountryAlbum.vue
new file mode 100644
index 00000000..34325877
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/apps/AppCountryAlbum/components/detail.vue b/src/apps/AppCountryAlbum/components/detail.vue
new file mode 100644
index 00000000..f3261ce7
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/apps/AppCountryAlbum/components/img/local-icon.png b/src/apps/AppCountryAlbum/components/img/local-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e23aff6ab5f4ec6d80c86118da1c7f1f48fc80b
GIT binary patch
literal 1121
zcmV-n1fKheP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91FrWhf1ONa40RR91FaQ7m0NXcg3;+NF%Sl8*RA>e5SUqS{Q53%CCAKzc
z6$h!sZXJt=t>Vw5;-JMYf=)V!iiiz}b5#&s9JG*bRa`oVf-a>Bia1EI^iL5ti%Zc)
z6bH%ck2S}0lDzVopLfnnZt9W?;oaQx_kHJ{`}3YL^;XY7Jp=U&{Lc)4t>DK-u`xB9
zK4=UaHwJgovki^e#{MbDJdJ&$-UoV)w06YbJnw-e8?mb<uy+Vs|17%wh~_MTi|ar^
z8o)f<urYRP`~swOHl?*HCUEjGHq55n>jeCY9(W;$ERlhZ*4WJ_r(n5Is`+0L0nYmJ
zg8P(!AJ7DmbzrQaDR!cg*$7RbJGrzYgDay1zFh_uMg!&?i1th+8b5}z3ZtCQ{G@&G
z9txPFnb;j>CLGUHdUDO@%f@o%{gJVqHiTy!%Rd^_R}<g`Yp>?ZLqf#;xme|O{1Vj~
z$d}G65m0WE{t)5&0N_R(?3lRROy@^%Q_TSH^Xmnk;nFO`{$}7>F!Y>MB)}(Z?vT>B
zBOL&w3=TPtvu|@G-oiib^BBvNUYNxhjxFg&C57Dez^F<G4A6DKIX#_ddR^dmoc@n@
zB^MqUlNm;XZ3Xh8zr?g9^(B3X1TTt&z5#ItD5Z3_Q8dmjlmx$OoFzs&>Y2zu@2YW`
zj)DMR%;ZM9!Tl1MFEV5u)-4j07@)P#Sz>t2kb(e+)6E{K#viQl9Pmf0OC>3uIU)h?
zN*sVED{6tJPm+!&SL=e=?%9-kiUi6TuFp7%?+hXVs#ozaVKTpQL9ADgv|1P8hi6mn
zDH5O!nYKo`(SkcCYvnZ5x?sLbJ{1J`HBfG}R?gEte^}CF9oCifa&mkp=_v@{h~y+I
zM+AeJ;UE%O8R^g|OO+`%$G}TTOLWA?`TS@1r}{3$R|(qZd8_nx8?JdSn{4Kl;K|;F
zhS=7ri{J*45DBnxS2CR>0DVD@Y|H4S|K4<>`KshsQ9{P>*8@7L(vmY<a?1W<#4&d?
z{!|3`6^}A9pmAtL2h3f~y8y>h5nx6B^g**Q#{F70x<0(!)ET>>jiFitp0k?2)Mxj7
z*fo=gfAwNYPxTD2BQB+A1bgXQ;V;Q?XgT?eMB!){@Eju)0XCr8eD44pu}Xr#v(L#(
z@fnU0riCgYzvJ$~bXNxPl|i$`KOVZD2S3#ppAKzH1{D+FU{#Z-5<Fw5ia=E)EP%H{
zpdu2Mz*{2_iiAb*Rtcy`SO#yMKp=@4fUgOGk|b&bzGej2@t(n@&Xvr{ZMp<v1fu;D
neU0j`7HnT{^$gTApv%BNee`t*HU#Bi00000NkvXXu0mjftbXz<

literal 0
HcmV?d00001

diff --git a/src/apps/AppCountryAlbum/components/list.vue b/src/apps/AppCountryAlbum/components/list.vue
new file mode 100644
index 00000000..8b01134b
--- /dev/null
+++ b/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>
\ No newline at end of file