update

src/components/goods/goodsItem.vue

+<template>
+  <div class="goods-item">
+    <router-link
+      :to="{ path: '/preview', query: { shop_id: data.shop_id, id: data.spu_id } }"
+      target="_blank"
+      class="goods-item-inner"
+    >
+      <el-image :src="imageUrl(data.chart_oss)" fit="cover" class="goods-item-pic">
+        <div slot="error" class="image-slot">
+          <i class="el-icon-picture-outline"></i>
+        </div>
+      </el-image>
+      <div class="goods-item-name">{{ data.spu_name }}</div>
+    </router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  props: { data: { type: Object, default: () => ({}) } },
+  methods: {
+    imageUrl(value) {
+      try {
+        const imgList = value ? JSON.parse(value) : []
+        const [first = {}] = imgList
+        return first.url
+      } catch (error) {
+        return ''
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.goods-item {
+  display: flex;
+  align-items: center;
+}
+.goods-item-inner {
+  display: flex;
+  align-items: center;
+}
+.goods-item-pic {
+  margin-right: 10px;
+  width: 60px;
+  height: 60px;
+}
+.goods-item-name {
+  flex: 1;
+  color: #3276fc;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  color: #909399;
+  font-size: 14px;
+}
+</style>

src/pages/goods/goods/index.vue

@@ -21,14 +21,7 @@
         </div>
       </template>
       <template v-slot:table-goods="{ row }">
-        <div class="table-goods">
-          <el-image :src="imageUrl(row.chart_oss)" fit="cover" class="table-goods-pic">
-            <div slot="error" class="image-slot">
-              <i class="el-icon-picture-outline"></i>
-            </div>
-          </el-image>
-          <div class="table-goods-name">{{ row.spu_name }}</div>
-        </div>
+        <goods-item :data="row"></goods-item>
       </template>
       <template v-slot:table-view="{ row }">
         <p>访客数：{{ row.usesr_view }}</p>
@@ -59,12 +52,12 @@
 import TableList from '@/components/base/tableList'
 import AppCard from '@/components/base/card'
 import ShareQrcode from '@/components/goods/shareQrcode'
-
+import GoodsItem from '@/components/goods/goodsItem'
 // 接口
 import { getGoodsList, deleteGoods, updateGoodsStatus } from '@/api/goods'
 
 export default {
-  components: { AppCard, TableList, ShareQrcode },
+  components: { AppCard, TableList, ShareQrcode, GoodsItem },
   data() {
     return {
       activeName: '0',
@@ -208,31 +201,4 @@ export default {
     width: 140px;
   }
 }
-.table-goods {
-  display: flex;
-  align-items: center;
-}
-.table-goods-pic {
-  margin-right: 10px;
-  width: 60px;
-  height: 60px;
-}
-.table-goods-name {
-  flex: 1;
-  color: #3276fc;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-}
-.image-slot {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  background: #f5f7fa;
-  color: #909399;
-  font-size: 14px;
-}
 </style>

src/pages/order/detail.vue

@@ -64,14 +64,7 @@
     </div>
     <table-list v-bind="tableOptions">
       <template v-slot:table-goods="{ row }">
-        <div class="table-goods">
-          <el-image :src="imageUrl(row.chart_oss)" fit="cover" class="table-goods-pic">
-            <div slot="error" class="image-slot">
-              <i class="el-icon-picture-outline"></i>
-            </div>
-          </el-image>
-          <div class="table-goods-name">{{ row.spu_name }}</div>
-        </div>
+        <goods-item :data="row"></goods-item>
       </template>
     </table-list>
     <div class="order-footer">
@@ -96,9 +89,11 @@
 <script>
 import AppCard from '@/components/base/card'
 import TableList from '@/components/base/tableList'
+import GoodsItem from '@/components/goods/goodsItem'
+
 import { getOrderList } from '@/api/order'
 export default {
-  components: { AppCard, TableList },
+  components: { AppCard, TableList, GoodsItem },
   data() {
     return {
       loading: false,
@@ -177,33 +172,6 @@ export default {
 </script>
 
 <style lang="scss">
-.table-goods {
-  display: flex;
-  align-items: center;
-}
-.table-goods-pic {
-  margin-right: 10px;
-  width: 60px;
-  height: 60px;
-}
-.table-goods-name {
-  flex: 1;
-  color: #3276fc;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-}
-.image-slot {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  background: #f5f7fa;
-  color: #909399;
-  font-size: 14px;
-}
 .order-header {
   display: flex;
   align-items: center;

src/pages/order/index.vue

@@ -11,14 +11,7 @@
         </router-link>
       </template>
       <template v-slot:table-goods="{ row }">
-        <div class="table-goods">
-          <el-image :src="imageUrl(row.chart_oss)" fit="cover" class="table-goods-pic">
-            <div slot="error" class="image-slot">
-              <i class="el-icon-picture-outline"></i>
-            </div>
-          </el-image>
-          <div class="table-goods-name">{{ row.spu_name }}</div>
-        </div>
+        <goods-item :data="row"></goods-item>
       </template>
       <template v-slot:table-price="{ row }">
         <p>{{ row.product_price }}</p>
@@ -37,11 +30,13 @@
 // 组件
 import TableList from '@/components/base/tableList'
 import AppCard from '@/components/base/card'
+import GoodsItem from '@/components/goods/goodsItem'
+
 // 接口
 import { getOrderSearchList } from '@/api/order'
 
 export default {
-  components: { AppCard, TableList },
+  components: { AppCard, TableList, GoodsItem },
   data() {
     return {
       activeName: '0',
@@ -172,33 +167,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.table-goods {
-  display: flex;
-  align-items: center;
-}
-.table-goods-pic {
-  margin-right: 10px;
-  width: 60px;
-  height: 60px;
-}
-.table-goods-name {
-  flex: 1;
-  color: #3276fc;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-}
-.image-slot {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  background: #f5f7fa;
-  color: #909399;
-  font-size: 14px;
-}
-</style>