相册编辑

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;