相册编辑

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
       },

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>

src/saas/AppCountryAlbum/PersonnelSetting.vue

@@ -18,9 +18,14 @@
         <div class="cell-item__check" :class="[currIndex === 1 ? 'active' : '']"></div>
       </div>
     </div>
+    <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>
 </template>
@@ -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;

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)