卡片

src/components/base/image.vue

+<!--
+ * @Description: 描述
+ * @Author: chd
+ * @Date: 2021-06-07 11:13:02
+ * @LastEditors: chd
+ * @LastEditTime: 2021-07-03 14:42:26
+-->
+<script>
+export default {
+  functional: true,
+  name: 'image-view',
+  props: {
+    proportion: {
+      type: Number,
+      default: 0,
+    },
+    image: {
+      type: String,
+      default: '',
+    },
+  },
+  render(h, { children, listeners, props, data }) {
+    const title = data?.attrs?.title
+    return (
+      <div
+        title={title}
+        class={'image-view'}
+        style={data.style}
+        onClick={(e) => listeners.click && listeners.click(e)}>
+        <div
+          class="before"
+          style={{
+            paddingBottom: props.proportion ? props.proportion + '%' : '100%',
+          }}></div>
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            overflow: 'hidden',
+            textAlign: 'center',
+          }}>
+          <img
+            height="100%"
+            loading="lazy"
+            src={props.image}
+            alt=""
+            onError={(e) => {
+              e.target.title = '加载失败'
+            }}
+          />
+        </div>
+        {children}
+      </div>
+    )
+  },
+}
+</script>
+<style scoped>
+.image-view {
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+  cursor: pointer;
+}
+.image-view .before {
+  height: 0;
+  padding-bottom: 100%;
+}
+.image-view img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+}
+.image-view img[src=''],
+.image-view img:not([src]) {
+  opacity: 0;
+}
+</style>

src/views/system/app.vue

@@ -101,7 +101,7 @@
           </el-button>
         </el-form-item>
       </el-form>
-      <div
+      <!-- <div
         class="table_wrap"
         style="min-height: 50%; max-height: 82%; padding: 0">
         <table-view
@@ -111,9 +111,94 @@
           ref="multipleTable"
           @selectionChange="selectionChange"
           :selection="true"></table-view>
+      </div> -->
+      <div
+        class="table_wrap scroll"
+        style="min-height: 50%; max-height: 82%; padding: 0">
+        <div class="card-mode" v-if="sourceData.length > 0">
+          <div
+            class="card-item"
+            v-for="(item, index) in sourceData"
+            :key="index"
+            @click="onCardClicked(item)">
+            <app-list
+              :data="item"
+              :index="index"
+              :isFormat="true"
+              isShowHomeSku="bottom"
+              :isSkuImageList="true"
+              :hasWidth="true"
+              :isShowSku="false"
+              :isShowSales="false"
+              :isCustom="true"
+              :selectIds="selectIds">
+              <template slot="operations">
+                <img
+                  :class="{ 'icon-disabled': !item.synthesizeStatus }"
+                  @click.stop="editInfo(item)"
+                  title="编辑"
+                  width="24"
+                  height="24"
+                  :src="require('@/assets/images/edit.png')"
+                  alt="" />
+                <img
+                  title="删除"
+                  width="24"
+                  height="24"
+                  @click.stop="deleteSection(item)"
+                  :src="require('@/assets/images/delete.png')"
+                  alt="" />
+              </template>
+              <template slot="price">
+                <span class="price" :title="item.name">
+                  {{ item.name }}
+                </span>
+              </template>
+              <template slot="synthesizeStatus">
+                <div title="应用类型" style="position: absolute; right: 0">
+                  <el-tag :type="!item.isCollectFee ? 'success' : 'warning'">
+                    {{ !item.isCollectFee ? '免费' : '收费' }}
+                  </el-tag>
+                </div>
+              </template>
+              <template slot="otherContent">
+                <div
+                  :title="item.description"
+                  class="sds-base-sku"
+                  style="font-size: 14px">
+                  <span>简述：{{ item.description }}</span>
+                </div>
+                <div class="sds-keyid">
+                  <div class="product-id" v-show="item.id">
+                    <img
+                      :title="'appId:' + item.id"
+                      height="20"
+                      :src="require('@/assets/images/id.png')"
+                      alt="" />
+                    <span :title="item.id">
+                      {{ item.id }}
+                    </span>
+                  </div>
+
+                  <div class="product-sku">
+                    <span :title="item.categoryName">
+                      {{ item.categoryName }}
+                    </span>
+                  </div>
+                </div>
+              </template>
+            </app-list>
+          </div>
+        </div>
+        <div class="empty" v-else>暂无数据</div>
       </div>
-      <div slot="footer" style="display: flex; justify-content: center">
-        <!-- <pagination :setValue="setpaginationOptions" :options="paginationOptions" /> -->
+      <div slot="footer" style="display: flex; justify-content: center;align-items: center;">
+        <div class="select-number">
+          选中
+          <span style="color: red; font-weight: bold">
+            {{ selection.length }}
+          </span>
+        </div>
         <el-pagination
           layout="sizes, total, prev, pager, next, jumper"
           background
@@ -352,9 +437,9 @@
 </template>
 <script>
 import Editor from '@/components/wangeditor/index.vue'
-import tableView from '@/common/components/base/tableView.vue'
 import ChooseTimePeriod from '@/components/base/chooseTimePeriod.vue'
 // import ImageView from '@/components/base/ImageView.vue'
+import appList from '@/components/app/app-list.vue'
 import pagination from '../../mixins/pagination'
 import { get, post } from '@/common/api/axios'
 import UploadImages from '@/components/base/image-list.vue'
@@ -364,7 +449,7 @@ export default {
   components: {
     UploadImages,
     'v-editor': Editor,
-    tableView,
+    appList,
     layout,
     ChooseTimePeriod
     // ImageView
@@ -444,6 +529,9 @@ export default {
     this.loadTypesData()
   },
   computed: {
+    selectIds() {
+      return this.selection.map((item) => item.id)
+    },
     tableColumns() {
       return [
         {
@@ -512,6 +600,23 @@ export default {
     }
   },
   methods: {
+    onCardClicked(item) {
+      const status = this.isItemSelected(item)
+      if (!status) {
+        this.selection.push(item)
+      } else {
+        const index = this.selection.findIndex((e) => {
+          return e.id === item.id
+        })
+        this.selection.splice(index, 1)
+      }
+    },
+    isItemSelected(item) {
+      const index = this.selection.findIndex((e) => {
+        return item.id === e.id
+      })
+      return index !== -1
+    },
     toggleNodeExpanded(node) {
       node.expanded = !node.expanded
     },
@@ -538,7 +643,7 @@ export default {
       const arr = v ? [v] : this.selection
       if (arr.length === 0) return this.$message('请勾选至少一条记录')
       const ids = arr.map((item) => item.id).join()
-      this.$confirm('确定删除选中的信息？', '提示', {
+      this.$confirm('确定删除选中的应用？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -553,7 +658,7 @@ export default {
               })
               this.getList()
               this.selection = []
-              this.$refs.multipleTable.clearSelectionBox()
+              // this.$refs.multipleTable.clearSelectionBox()
             } else {
               this.$alert(res.message, '错误提示', {
                 dangerouslyUseHTMLString: true
@@ -563,7 +668,7 @@ export default {
         })
         .catch(() => {
           this.selection = []
-          this.$refs.multipleTable.clearSelectionBox()
+          // this.$refs.multipleTable.clearSelectionBox()
         })
     },
     // 分页
@@ -843,7 +948,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .customize-tree-node__label {
   margin-left: 4px;
   flex: 1;
@@ -851,7 +956,76 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+::v-deep .card-mode {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 10px;
+  .price {
+    color: rgba(181, 124, 91, 1);
+    font-size: 14px;
+    font-weight: bold;
+    margin-right: 5px;
+  }
+  .sds-base-sku {
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    cursor: pointer;
+    white-space: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .sds-keyid {
+    height: 30px;
+    align-items: center;
+    display: flex;
+  }
+  .product-id {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: 30px;
+    display: flex;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 5px;
+    margin-right: 6px;
+    position: relative;
+    z-index: 1;
+    flex: 1;
+    cursor: pointer;
+  }
 
+  .product-id > span {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    font-size: 14px;
+    vertical-align: top;
+    margin-left: 5px;
+    color: #222;
+  }
+
+  .product-sku {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: 30px;
+    flex: 1;
+    text-align: right;
+    cursor: pointer;
+  }
+
+  .product-sku > span {
+    font-size: 14px;
+    border: solid 1px #9ac1f5;
+    background-color: #9ac1f5;
+    border-radius: 4px;
+    color: #fff;
+    padding: 2px 6px;
+  }
+}
 .customize-tree-node {
   font-size: 14px;
   flex: 1;