From c0f62e94f751ff3056c99c43a49ea606e8e83118 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Tue, 24 May 2022 17:52:33 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=B8=E5=86=8C=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/saas/AppCountryAlbum/AlbumDetail.vue      |   8 +-
 src/saas/AppCountryAlbum/EditAlbum.vue        | 373 ++++++++++++++++++
 src/saas/AppCountryAlbum/PersonnelSetting.vue |  36 +-
 src/saas/AppCountryAlbum/WatermarkSetting.vue |   4 +-
 .../AppCountryAlbum/images/img-choose.png     | Bin 0 -> 1001 bytes
 src/saas/AppCountryAlbum/images/remove.png    | Bin 0 -> 560 bytes
 6 files changed, 415 insertions(+), 6 deletions(-)
 create mode 100644 src/saas/AppCountryAlbum/EditAlbum.vue
 create mode 100644 src/saas/AppCountryAlbum/images/img-choose.png
 create mode 100644 src/saas/AppCountryAlbum/images/remove.png

diff --git a/src/saas/AppCountryAlbum/AlbumDetail.vue b/src/saas/AppCountryAlbum/AlbumDetail.vue
index cb971e8b..3999609b 100644
--- a/src/saas/AppCountryAlbum/AlbumDetail.vue
+++ b/src/saas/AppCountryAlbum/AlbumDetail.vue
@@ -45,7 +45,7 @@
         <div class="photo-item" @click="linkTo('./Photo?url=' + item.photoUrl + '&id=' + item.id)" v-for="(item, index) in list" :key="index">
           <image :src="item.photoUrl" mode="aspectFill" />
           <div class="photo-item__text">
-            <h2><AiOpenData v-if="item.wxOpenUserId" type="userName" :openid="item.createUserId"></AiOpenData></h2>
+            <h2><AiOpenData v-if="item.createUserId" type="userName" :openid="item.createUserId"></AiOpenData></h2>
             <p>{{ item.createTime }}</p>
           </div>
         </div>
@@ -53,7 +53,7 @@
       </div>
     </div>
     <div class="btn-wrapper">
-      <div class="btn" hover-class="text-hover">编辑照片</div>
+      <div class="btn" hover-class="text-hover" @click="toEdit">编辑照片</div>
       <div class="btn" @click="toAddImg" hover-class="text-hover">上传照片</div>
     </div>
   </div>
@@ -116,6 +116,10 @@
         })
       },
 
+      toEdit () {
+        this.linkTo(`./EditAlbum?id=${this.id}`)
+      },
+
       onChange (e) {
         this.date = e.detail.value
       },
diff --git a/src/saas/AppCountryAlbum/EditAlbum.vue b/src/saas/AppCountryAlbum/EditAlbum.vue
new file mode 100644
index 00000000..0ed91b95
--- /dev/null
+++ b/src/saas/AppCountryAlbum/EditAlbum.vue
@@ -0,0 +1,373 @@
+<template>
+  <div class="EditAlbum">
+    <div class="img-item" v-for="(item, index) in list" :key="index" @click="choose(index)">
+      <image class="img" :src="item.photoUrl" mode="aspectFill" />
+      <span class="icon" v-if="!item.checked"></span>
+      <image class="icon" v-else src="./images/img-choose.png" />
+    </div>
+    <div class="EditAlbum-footer">
+      <div @click="move">移动至</div>
+      <div @click="remove">删除</div>
+    </div>
+    <u-popup v-model="isShow" :closeable="false" border-radius="32" height="70%" mode="bottom">
+			<div class="album">
+        <div class="top">
+          <span @click="isShow = false">取消</span>
+          <span @click="confirm">确定</span>
+        </div>
+        <scroll-view scroll-y class="album-list__wrapper">
+          <div
+            class="item"
+            @click="currIndex = index"
+            v-for="(item, index) in albumList"
+            :key="index"
+            :class="[currIndex === index ? 'active' : '']">
+            <image class="checked" v-if="currIndex === index" src="./images/xuanzhong.png" />
+            <image class="icon" src="./images/icon.png" />
+            <div class="item-bottom">
+              <h2>{{ item.albumName }}</h2>
+              <div class="item-bottom__info">
+                <div class="left">
+                  <span>今日新增</span>
+                  <i>{{ item.dayPhtoto }}</i>
+                  <span>张</span>
+                </div>
+                <div class="right">
+                  <image src="./images/zhaopianshuliang.png" />
+                  <span>{{ item.photoTotal || 0 }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+				</scroll-view>
+      </div>
+		</u-popup>
+  </div>
+</template>
+
+<script>
+  export default {
+    appName: '相片编辑',
+
+    data () {
+      return {
+        id: '',
+        isShow: false,
+        list: [],
+        currIndex: 0,
+        albumList: []
+      }
+    },
+
+    computed: {
+      chooseImg () {
+        if (!this.list.length) {
+          return ''
+        }
+
+        return this.list.filter(v => v.checked).map(v => v.id).join(',')
+      }
+    },
+
+    onLoad (query) {
+      this.id = query.id
+      this.getAlbumList()
+
+      this.$nextTick(() => {
+        this.getList()
+      })
+    },
+
+    methods: {
+      getList () {
+        this.$http.post(`/api/appalbumphoto/DetailByAlbumID?albumId=${this.id}`).then(res => {
+          if (res.code === 0) {
+            this.list = res.data.map(v => {
+              return {
+                ...v,
+                checked: false
+              }
+            })
+          }
+        })
+      },
+
+      confirm () {
+        this.$http.post(`/api/appalbumphoto/move?ids=${this.chooseImg}&targetId=${this.albumList[this.currIndex].id}`).then(res => {
+          if (res.code == 0) {
+            this.$u.toast('移入成功')
+            this.getAlbumList()
+            this.getList()
+
+            this.isShow = false
+          }
+        })
+      },
+
+      remove () {
+        if (!this.chooseImg) {
+          return this.$u.toast('请选择相片')
+        }
+
+        this.$confirm('确定删除该数据？').then(() => {
+          this.$http.post(`/api/appalbumphoto/delete?ids=${this.chooseImg}`).then(res => {
+            if (res.code == 0) {
+              this.$u.toast('删除成功')
+              this.getAlbumList()
+              this.getList()
+            }
+          })
+        }).catch(() => {
+        })
+      },
+
+      move () {
+        if (!this.chooseImg) {
+          return this.$u.toast('请选择相片')
+        }
+
+        this.isShow = true
+      },
+
+      getAlbumList () {
+        this.$http.post('/api/appalbum/list', null, {
+          parmas: {
+            size: 1000
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.albumList = res.data.records
+          }
+        })
+      },
+
+      choose (index) {
+        this.$set(this.list[index], 'checked', !this.list[index].checked)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .EditAlbum {
+    min-height: 100vh;
+    padding: 16px 4px 130px;
+    font-size: 0;
+    box-sizing: border-box;
+    background: #1E1E21;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .album {
+      height: 100%;
+      overflow: hidden;
+
+      .album-list__wrapper {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        .item {
+          display: inline-block;
+          position: relative;
+          width: 328px;
+          height: 328px;
+          margin-bottom: 32px;
+          box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+          border-radius: 16px;
+          overflow: hidden;
+          background: #EFF5FA;
+
+          &:nth-of-type(2n) {
+            margin-left: 30px;
+          }
+
+          &.active {
+            border: 4px solid #2477F1;
+          }
+
+          .item-bottom {
+            position: absolute;
+            left: 0;
+            bottom: 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%);
+            box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+
+            & > h2 {
+              margin-bottom: 14px;
+              font-size: 32px;
+              color: #fff;
+            }
+
+            .item-bottom__info {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+
+              .right {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                width: 86px;
+                height: 48px;
+                padding: 0 8px;
+                color: #fff;
+                background: rgba(0, 0, 0, 0.5);
+                box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+                border-radius: 8px;
+
+                image {
+                  width: 28px;
+                  height: 28px;
+                }
+
+                span {
+                  font-size: 28px;
+                }
+              }
+
+              .left {
+                span {
+                  color: #c6c5c4;
+                  font-size: 28px;
+                }
+
+                i {
+                  padding: 0 3px;
+                  color: #fff;
+                  font-size: 28px;
+                  font-style: normal;
+                }
+              }
+            }
+          }
+
+          & > span {
+            position: absolute;
+            left: 16px;
+            top: 16px;
+            z-index: 1;
+            width: 94px;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+            color: #fff;
+            font-size: 28px;
+            background: #FF524F;
+            box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.1);
+            border-radius: 8px;
+          }
+
+          .checked {
+            position: absolute;
+            top: 0;
+            right: 0;
+            z-index: 1;
+            width: 64px;
+            height: 64px;
+          }
+
+          .icon {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            z-index: 1;
+            width: 80px;
+            height: 80px;
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+
+      scroll-view {
+        height: calc(100% - 96px);
+        padding: 0 32px;
+        font-size: 0;
+      }
+
+      .top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 96px;
+        padding: 0 32px;
+        font-size: 32px;
+        color: #999;
+        font-weight: 600;
+
+        span:last-child {
+          color: #222;
+        }
+      }
+    }
+
+    .EditAlbum-footer {
+      display: flex;
+      position: fixed;
+      align-items: center;
+      left: 0;
+      bottom: 0;
+      z-index: 11;
+      width: 100%;
+      height: 112px;
+      text-align: center;
+      background: #343437;
+      box-shadow: inset 0px 1px 0px 0px #666666, inset -1px 0px 0px 0px #666666;
+
+      div {
+        flex: 1;
+        line-height: 112px;
+        color: #fff;
+        font-size: 36px;
+
+        &:last-child {
+          border-left: 1px solid #666666;
+        }
+      }
+    }
+
+    .img-item {
+      display: inline-block;
+      position: relative;
+      width: 182px;
+      height: 182px;
+      margin-right: 4px;
+      margin-bottom: 4px;
+      box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
+      border-radius: 4px;
+
+      .icon {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        z-index: 1;
+        width: 32px;
+        height: 32px;
+        content: ' ';
+      }
+
+      .img {
+        width: 100%;
+        height: 100%;
+      }
+
+      span {
+        width: 32px;
+        height: 32px;
+        background: rgba(0, 0, 0, 0.4);
+        border-radius: 16px;
+        border: 3px solid #FFFFFF;
+      }
+
+      &:nth-of-type(4n) {
+        margin-right: 0;
+      }
+    }
+  }
+</style>
diff --git a/src/saas/AppCountryAlbum/PersonnelSetting.vue b/src/saas/AppCountryAlbum/PersonnelSetting.vue
index 0e1e228b..9bf9f1a1 100644
--- a/src/saas/AppCountryAlbum/PersonnelSetting.vue
+++ b/src/saas/AppCountryAlbum/PersonnelSetting.vue
@@ -18,8 +18,13 @@
         <div class="cell-item__check" :class="[currIndex === 1 ? 'active' : '']"></div>
       </div>
     </div>
-    <div class="user" v-for="(item, index) in userList" :key="index">
-      <AiOpenData v-if="item" type="userName" :openid="item"></AiOpenData>
+    <div class="user-wrapper" v-if="userList.length">
+      <div class="user" v-for="(item, index) in userList" :key="index">
+        <div class="user-left">
+          <AiOpenData v-if="item" type="userName" :openid="item"></AiOpenData>
+        </div>
+        <image src="./images/remove.png" @click="remove(index)" />
+      </div>
     </div>
     <div class="form-btn" hover-class="text-hover" @click="save">保存</div>
   </div>
@@ -54,6 +59,10 @@
         })
       },
 
+      remove (index) {
+        this.userList.splice(index, 1)
+      },
+
       save () {
         if (this.currIndex === 1 && !this.userList.length) {
           return this.$u.toast('请选择人员')
@@ -106,6 +115,29 @@
       box-sizing: border-box;
     }
 
+    .user-wrapper {
+      background: #fff;
+
+      .user {
+        display: flex;
+        align-items: center;
+        height: 88px;
+        padding: 0 32px;
+        border-bottom: 1px solid #DDDDDD;
+
+        .user-left {
+          color: #333333;
+          font-size: 28px;
+          font-weight: 600;
+        }
+
+        image {
+          width: 32px;
+          height: 32px;
+        }
+      }
+    }
+
     .form-btn {
       position: fixed;
       bottom: 0;
diff --git a/src/saas/AppCountryAlbum/WatermarkSetting.vue b/src/saas/AppCountryAlbum/WatermarkSetting.vue
index 5fe473f3..8109fa4d 100644
--- a/src/saas/AppCountryAlbum/WatermarkSetting.vue
+++ b/src/saas/AppCountryAlbum/WatermarkSetting.vue
@@ -22,7 +22,7 @@
       <h2>水印库</h2>
     </div>
     <div class="watermark-list" v-if="currIndex === 1">
-      <div class="item" @click="checkd(item.id)" v-for="(item, index) in list" :key="index" :class="[checkedList.includes(item.id) ? 'active' : '']">
+      <div class="item" @click="checked(item.id)" v-for="(item, index) in list" :key="index" :class="[checkedList.includes(item.id) ? 'active' : '']">
         <image class="checked" v-if="checkedList.includes(item.id)" src="./images/xuanzhong.png" />
         <image class="watermark" :src="item.thum" mode="aspectFill" />
       </div>
@@ -81,7 +81,7 @@
         })
       },
 
-      checkd (type) {
+      checked (type) {
         const i = this.checkedList.indexOf(type)
         if (i > -1) {
           this.checkedList.splice(i, 1)
diff --git a/src/saas/AppCountryAlbum/images/img-choose.png b/src/saas/AppCountryAlbum/images/img-choose.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa9ecb44e955ae3f7df029341b3131cfd0ff3800
GIT binary patch
literal 1001
zcmV<F0~Y*=P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91AfN*P1ONa40RR91AOHXW0IY^$^8f$?Q%OWYR9FecS50UWK@@&TgS9P0
zp-N&Dyoh3vQV)WM3JG|zhd@E}5D=jkPYU%|P%QLl!HakiL<lGdg@Sq!4A_I<!Gcl|
z^&n_%)qpK+wJ{}r-#D|Ko!!{{)qe1p*_k)*d-G=Z&D)67h)Sih4XPPP7SaPrX+a~i
zT4vBrLY_t<krLYG0pcX&CS(CpE2zsg$%Z|^;&#X=WC_wJxRy5Bt2q)0o4^8kJ^?vy
z&%d89$)lGmQh4)IJ{QX}w@_Bo$sIA-+Z~hi;SL!%+9?MTJS`ud<7p7bGUpq`L%;!$
z_hS4ZWS>!<{<tdF9u(!-+h1nrpY4f5+vV!%Zt2_a+xRCe8h{h8?8QC@^v+*EL6Mi&
zDl&4vD7OoX_L`deL+QATo$Z!bn@2+@j@gm$X7o7~prFG3V|h)^-<p@H8h2gItA0e|
z&V_{R>}oSAJdQM+Smi*}jG`TZD01$+738$d4bT>CYLJ6m3d#W;`e8H3us6GNV~Z_q
z(WZrA&FMwp3MRX#z!$F3Gq(r=UD~8=4RVoFqVR;@OpXr(-}Yv4@<@kJTsXFK<mM4%
zAaN?cn=94)sZl=+H_q*ndl&a8ah>32%v_>D&I}!3ZdZ6by<)lzwIt8=tG!fR&qQV+
zO9yzdC@{k{3YR=TwJ1+s2kki=J#>J#ngY{n7^<DA(G4TNboaZN_O%X2Du!9l0h8P9
z6(r}G65N$*xE^xaa5z$ofCn!vdL#Z0&zFP-^^$X)!%<-bSWFz`WCFL^(%0YYdf+*7
z=jP=yEfws3SaduiR)-uGzW5yAmHNSPfXXK9hS0ReP_5+DCx?Yu9s$cJ1>Wb?KqpA#
zq8@UtbvS0|0BbmfQ+=JL8``=~)JsmIELbc|MszCvhC!7<2CvU<m<>&a3;WJ3<AE*<
zm5IyVN5^pPj^bWsZp<5PRx%rb#PyQXreix#Zu1$AVt$!QETdS-v>HR1xLu-=i=2P2
zV_hPR8&Z~0tYlgR+8R6Ki|n}OT+a)57g#|SApf-_^Cc!Yk%R+VQ<Q>O0Z#Oyvo&S8
z_Ca(c0zW1!SXeW(^2fw*23o!okWK$J3lO^lj0R-WeolQap-XN*!wD9z8Auk=vfuMR
XmaKsGB4JFk00000NkvXXu0mjf<^iro

literal 0
HcmV?d00001

diff --git a/src/saas/AppCountryAlbum/images/remove.png b/src/saas/AppCountryAlbum/images/remove.png
new file mode 100644
index 0000000000000000000000000000000000000000..db9becc87d136a739ce80909164b4f9e6dc66274
GIT binary patch
literal 560
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz#^NA%Cx&(BWL^R}E~ycoX}-P;
zT0k}j17mw80}DtA5K93u0|WB{Mh0de%?J`(zyz07Sip>6gA}f5OZp5{Hp|n+F(iWX
zZTMcl!v+F&(}k{W6E10<%KmV<Ft_v`R!wFm&S@>%8O&5v+9n-nHaHw&b<xuC?ALXN
z)|MXeoZ!`UrNZ+5`SN{r`)=_a*u+28{lGU{tH0ZS2nqBFCMfIA`|EYE;Ye)tWy@;Y
zkV3I#^PZ-}|F_-e#A2?0?o03=tC#96OJ^<2{`JIWJA=oA4#!p7E=lhC>Y(OvIr@71
zZqG?A_ivnG%F5*QnZ0c9i$^_wOTy<zX6c;IRo>1ZT@d#zQ`qe9i_UL(^>Lk>KLt!?
zJNz!HJvog>!8q)aM)BH7b(iFIoNWco_P%gkrdEC6@1(5ni{@=H|MQ~pla1HzYipk~
zG~HTgKgr3(HTjnOl@--eIbO5p`b}WI^+~?cr0iPDt)NY7xK>DjV1xzpwZ%8e6fVWe
zT{=3~WB*yb$4mabW_qDG@mI#in@^j9;(v(!xz8l>fc^5-Pwp$HcxzoQshfBBiB)@J
z<<i+3zsWi5Sb8A1C2;*iSG8py=IrAwdDA=3BlB+4w`s+WbKhRxTzRO4MeL&FY0DSF
gZ})ioDLU4}IC*Pjk=eYfN}$;CboFyt=akR{02o^6b^rhX

literal 0
HcmV?d00001