乡村相册

packages/3.0.0/AppVillageAlbum/components/List.vue

@@ -7,7 +7,7 @@
       <ai-search-bar>
         <template #left>
           <ai-select
-            v-model="search.status"
+            v-model="search.type"
             @change="search.current = 1, getList()"
             placeholder="请选择相册主题"
             :selectList="dict.getDict('villagePictureAlbumType')">
@@ -29,39 +29,26 @@
             <h2>添加相片</h2>
           </div>
           <div class="list-item" v-for="(item, index) in list" :key="index">
-            <div>
+            <div class="list-item__img">
-              <div class="list-item__title">
+              <img :src="item.url">
-                <h2 :style="{color: dict.getColor('questionnaireStatus', item.status)}">{{ dict.getLabel('questionnaireStatus', item.status) }}</h2>
-                <span :class="'type-' + item.type">{{ dict.getLabel('questionnaireType', item.type) }}</span>
-              </div>
-              <p>{{ item.title }}</p>
-              <div class="list-item__user">
-                <span>{{ item.createUnitName }}</span>
-                <span>{{ item.createUserName }}</span>
-              </div>
             </div>
             <div class="list-item__bottom">
-              <span>{{ item.dataCount }} 份数据</span>
+              <div class="left">
+                <span class="tag">{{ dict.getLabel('villagePictureAlbumType', item.type) }}</span>
+                <span>{{ item.createUserName }}</span>
+              </div>
               <i>{{ item.createTime }}</i>
             </div>
             <div class="list-item__operate">
               <el-button
                 type="text"
-                icon="iconfont iconshare"
+                icon="iconfont iconExported"
-                @click="toAdd(item.id)"
                 class="list-item__operate--item"
-                :disabled="item.status !== '1'">
+                @click="downloadImg(item.url)">
-                编辑
-              </el-button>
-              <el-button
-                type="text"
-                icon="iconfont iconunpublish"
-                class="list-item__operate--item"
-                @click="toStop(item.id)">
                 下载
               </el-button>
               <el-button
-                @click="id = item.id, isShowAdd = true"
+                @click="remove(item.id)"
                 type="text"
                 icon="iconfont iconpublish"
                 class="list-item__operate--item">
@@ -92,7 +79,7 @@
           current: 1,
           areaId: '',
           size: 1000000,
-          title: '',
+          type: '',
           timeTag: ''
         },
         isShowAdd: false,
@@ -119,7 +106,9 @@
 
     methods: {
       changeArea (e) {
-
+        this.loading = true
+        this.search.current = 1
+        this.getList()
       },
 
       getList () {
@@ -141,6 +130,17 @@
         })
       },
 
+      remove (id) {
+        this.$confirm('确定删除该数据？').then(() => {
+          this.instance.post(`/app/appvillagepicturealbum/delete?ids=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功！')
+              this.getList()
+            }
+          })
+        })
+      },
+
       downloadImg (url) {
         let image = new Image()
         image.setAttribute('crossOrigin', 'anonymous')
@@ -228,106 +228,6 @@
       }
     } 
 
-    .publish {
-      .tips {
-        display: flex;
-        align-items: center;
-        height: 36px;
-        margin-bottom: 20px;
-        padding: 0 12px;
-        background: #E8EFFF;
-        border-radius: 2px;
-
-        i {
-          margin-right: 2px;
-          color: #2367ff;
-          font-size: 16px;
-        }
-
-        h2 {
-          font-size: 12px;
-          color: #222222;
-        }
-      }
-
-      .form-item__wrapper {
-        padding-left: 24px;
-
-        .checkbox {
-          display: flex;
-          align-items: center;
-          margin-left: 9px;
-
-          &:first-child {
-            margin-bottom: 32px;
-          }
-
-          span {
-            color: #888888;
-            font-size: 14px;
-          }
-        }
-
-        .form-title {
-          display: flex;
-          align-items: center;
-          margin-bottom: 16px;
-
-          span {
-            margin-left: 16px;
-            color: #888888;
-            font-size: 14px;
-          }
-
-          h2 {
-            position: relative;
-            padding-left: 8px;
-            font-size: 16px;
-            font-weight: 700;
-            color: #222222;
-
-            &::after {
-              position: absolute;
-              left: 0;
-              top: 50%;
-              z-index: 1;
-              width: 3px;
-              height: 16px;
-              background: #2266FF;
-              content: ' ';
-              transform: translateY(-50%);
-            }
-          }
-        }
-
-        .form-item__container {
-          margin-left: 9px;
-          margin-bottom: 24px;
-        }
-
-        .form-field {
-          display: flex;
-          align-items: center;
-          margin-bottom: 16px;
-
-          i {
-            margin-right: 4px;
-            color: #FF4466;
-            font-size: 14px;
-          }
-          h2 {
-            color: #222222;
-            font-size: 14px;
-          }
-
-          span {
-            color: #888888;
-            font-size: 14px;
-          }
-        }
-      }
-    }
-
     .newPagination {
       width: 100%;
       display: flex;
@@ -419,44 +319,6 @@
       }
     }
 
-    .iframe {
-      display: block;
-      width: 375px;
-      min-height: 450px;
-      margin: 0 auto;
-    }
-    
-    .ai-dialog__success {
-      ::v-deep .ai-dialog__content {
-        max-height: initial!important;
-      }
-    }
-
-    .type-0 {
-      color: #2266FF;
-      background: rgba(34, 102, 255, 0.1);
-    }
-
-    .type-1 {
-      color: rgba(34, 170, 153, 1);
-      background: rgba(34, 170, 153, 0.1);
-    }
-
-    .type-2 {
-      color: rgba(248, 180, 37, 1);
-      background: rgba(248, 180, 37, 0.1);
-    }
-
-    .type-3 {
-      color: rgba(102, 119, 187, 1);
-      background: rgba(102, 119, 187, 0.1);
-    }
-
-    .type-4 {
-      color: rgba(236, 68, 97, 1);
-      background: rgba(236, 68, 97, 0.1);
-    }
-
     .form-list__list {
       display: flex;
       flex-wrap: wrap;
@@ -470,6 +332,16 @@
         margin-bottom: 12px;
         padding: 18px 16px 16px;
 
+        .list-item__img {
+          width: 100%;
+          height: 140px;
+
+          img {
+            width: 100%;
+            height: 140px;
+          }
+        }
+
         &:hover {
           .list-item__operate {
             display: flex;
@@ -546,6 +418,21 @@
           i {
             font-style: normal;
           }
+
+          .left {
+            display: flex;
+            align-items: center;
+
+            .tag {
+              height: 26px;
+              line-height: 26px;
+              margin-right: 8px;
+              padding: 0 6px;
+              border-radius: 4px;
+              background: #42D784;
+              color: #fff;
+            }
+          }
         }
 
         p {
@@ -615,7 +502,7 @@
 
       & > div {
         width: calc((100% - 60px) / 4);
-        height: 196px;
+        height: 216px;
         margin: 0 20px 20px 0;
         background: #FFFFFF;
         box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);