修改商品列表图片展示

src/views/goods/goods/index.vue

@@ -43,23 +43,21 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="商品名称" align="center" prop="name" width="150" />
       <el-table-column label="编码" align="center" prop="code" width="150" />
-      <el-table-column label="缩略图" align="center" prop="" width="150" />
+      <el-table-column label="缩略图" align="center" prop="" width="150">
+        <template slot-scope="scope">              
+           <div class="image-tmp">
+            <el-image style="width: 100px; height: 100px"  :src="getPicsList(scope.row.pics)" :preview-src-list="getPicsBigList(scope.row.pics)">
+              <div slot="error" class="image-slot"></div>            
+            </el-image>
+          </div>    
+        </template>
+      </el-table-column>
       <el-table-column label="商品分类" align="center" prop="category" width="100" />
       <el-table-column label="简介" align="center" prop="desc" width="150" />
       <el-table-column label="售价" align="center" prop="price" />
       <el-table-column label="总销量" align="center" prop="salesVolume" width="150" />
       <el-table-column label="创建时间" align="center" prop="createdAt" width="150" />
-      <el-table-column label="上架时间" align="center" prop="shelfat" width="150" />
-      <!-- <el-table-column
-        label="上架时间"
-        align="center"
-        prop="shelfTime"
-        width="180"
-      >
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.shelfTime, "{y}-{m}-{d}") }}</span>
-        </template>
-      </el-table-column> -->
+      <el-table-column label="上架时间" align="center" prop="shelfat" width="150" /> 
       <el-table-column label="状态" align="center" prop="state" width="150">
         <template slot-scope="scope">
           <span v-if="scope.row.state == 1">已创建</span>
@@ -67,7 +65,6 @@
           <span v-if="scope.row.state == 3">已上架</span>
           <span v-if="scope.row.state == 4">已下架</span>
           <span v-if="scope.row.state == 5">已删除</span>
-
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
@@ -96,9 +93,10 @@ import { listSpu, delSpu, updateSpu } from "@/api/system/goods";
 import PutShopOffShop from './components/putShopOffShop.vue'
 import Form from "./components/Form.vue";
 import SelectCategory from "@/components/SelectCategory";
+import SpecsSelect from '../spec/SpecsSelect.vue';
 export default {
   name: "Spu",
-  components: { Form, PutShopOffShop ,SelectCategory},
+  components: { Form, PutShopOffShop ,SelectCategory, SpecsSelect},
   data() {
     return {
       // 遮罩层
@@ -155,6 +153,16 @@ export default {
     this.getList();
   },
   methods: {
+    getPicsList(str){   
+      let picObj = JSON.parse(str);  
+      return picObj.thumbnail
+    },
+    getPicsBigList(str){
+      let list=[];
+      let picObj = JSON.parse(str);  
+      list.push(picObj.thumbnail)
+      return list;
+    },
     /** 查询列表 */
     getList() {
       this.loading = true;