update

src/mock/router.ts

@@ -955,6 +955,7 @@ const appmenu = {
                 urlType: 1,
                 component: 'Main',
                 icon: 'Setting',
+                hidden: true,
                 children: [
                     {
                         authType: 1,

src/packages/pc/components/base/image/index.less

@@ -0,0 +1,11 @@
+.app-image {
+    &__error {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        font-size: xx-large;
+        color: var(--el-text-color-secondary);
+        background: var(--el-fill-color-light);
+    }
+}

src/packages/pc/components/base/image/index.vue

@@ -0,0 +1,30 @@
+<template>
+    <el-image class="app-image" fit="cover" :style="styles">
+        <template #error>
+            <div class="app-image__error">
+                <app-icon icon="Picture" />
+            </div>
+        </template>
+    </el-image>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import AppIcon from '@pc/components/base/icon/index.vue'
+
+const props = defineProps({
+    width: Number,
+    height: Number,
+})
+
+const styles = computed(() => {
+    return {
+        width: props.width ? props.width + 'px' : 'auto',
+        height: props.height ? props.height + 'px' : 'auto',
+    }
+})
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/packages/pc/views/search/jewelry/index.less

@@ -24,16 +24,11 @@
                 padding-bottom: 10px;
 
                 &__header {
-                    font-size: 0;
-
-                    img {
-                        width: 200px;
-                        height: 200px;
-                        object-fit: cover;
-                    }
+                    cursor: pointer;
                 }
 
                 &__body {
+                    cursor: pointer;
                     padding: 10px 15px;
 
                     .block {
@@ -81,18 +76,51 @@
         border: 1px solid #e4e7e9;
         border-radius: 4px;
         overflow: hidden;
-        padding: 20px;
+        padding: 20px 0;
         margin-top: 24px;
 
-        ul {
+        .list {
             display: flex;
 
-            li {
+            &-item {
                 display: flex;
-                flex-direction: column;
+                align-items: center;
+                border-right: 1px dashed #dbdbdb;
+                padding: 0 20px;
+
+                &__index {
+                    font-size: 24px;
+                    color: #b5b5b5;
+
+                    span {
+                        display: inline-block;
+                        background-color: #f2f2f2;
+                        padding: 6px 12px;
+                    }
+                }
+
+                &__image {
+                    margin: 0 10px;
+                }
+
+                &__info {
+                    font-size: 12px;
+
+                    span {
+                        display: block;
+                    }
+                }
+            }
+
+            &-btnbar {
+                margin-left: 20px;
 
-                &:not(:first-child) {
-                    margin-left: 20px;
+                .btn-clear {
+                    display: block;
+                    color: #999;
+                    text-align: center;
+                    cursor: pointer;
+                    margin-top: 6px;
                 }
             }
         }

src/packages/pc/views/search/jewelry/index.vue

@@ -38,8 +38,8 @@
             <ul class="list">
                 <template v-for="(item, index) in dataList" :key="index">
                     <li class="list-item">
-                        <div class="list-item__header">
-                            <img :src="getImageUrl(item.imagepath)" />
+                        <div class="list-item__header" @click="openDetails(item)">
+                            <app-image :width="200" :height="200" :src="getImageUrl(item.imagepath)" />
                         </div>
                         <div class="list-item__body" @click="openDetails(item)">
                             <div class="block block--price">
@@ -61,15 +61,22 @@
             </ul>
         </div>
         <div class="search-jewelry__comparebar" v-if="checkedItems.length > 1">
-            <ul>
-                <li v-for="(item, index) in checkedItems" :key="index">
-                    <span>{{ index + 1 }}</span>
-                    <span>{{ item.goodsno }}</span>
-                    <span>{{ item.zsstyletypedisplay }}</span>
+            <ul class="list">
+                <li class="list-item" v-for="(item, index) in checkedItems" :key="index">
+                    <div class="list-item__index">
+                        <span>{{ index + 1 }}</span>
+                    </div>
+                    <div class="list-item__image">
+                        <app-image :width="48" :height="48" :src="getImageUrl(item.imagepath)" />
+                    </div>
+                    <div class="list-item__info">
+                        <span>{{ item.zsstyletypedisplay }}</span>
+                        <span>{{ item.goodsno }}</span>
+                    </div>
                 </li>
-                <li>
-                    <el-button @click="openComponent('compare')">对比</el-button>
-                    <el-button link>清空</el-button>
+                <li class="list-btnbar">
+                    <el-button type="danger" @click="openComponent('compare')">对比</el-button>
+                    <span class="btn-clear" @click="clearCompare">清空</span>
                 </li>
             </ul>
         </div>
@@ -87,6 +94,7 @@ import { useSearch } from '@/business/search'
 import { Category } from '@/constants/diamond'
 import { useComponent } from '@/hooks/component'
 import AppMultiple from '@pc/components/base/multiple/index.vue'
+import AppImage from '@pc/components/base/image/index.vue'
 
 const componentMap = new Map<string, unknown>([
     ['details', defineAsyncComponent(() => import('@pc/views/warehousing/goods/components/details/index.vue'))], // 详情
@@ -105,6 +113,10 @@ const openDetails = (item: Ermcp.SellOrderSearchRsp) => {
     openComponent('details')
 }
 
+const clearCompare = () => {
+    dataList.value.forEach((e) => e.checked = false)
+}
+
 getSellOrderList().catch((err) => ElMessage.error(err))
 </script>
 

src/packages/pc/views/warehousing/goods/components/details/index.less

@@ -17,12 +17,6 @@
         .sku {
             &-gallery {
                 margin-bottom: 20px;
-
-                img {
-                    width: 300px;
-                    height: 300px;
-                    object-fit: cover;
-                }
             }
 
             &-address {

src/packages/pc/views/warehousing/goods/components/details/index.vue

@@ -5,7 +5,7 @@
             <div class="goods-details__wrapper">
                 <div class="goods-details__aside">
                     <div class="sku-gallery">
-                        <img :src="getImageUrl(details.imagepath)" />
+                        <app-image :width="300" :height="300" :src="getImageUrl(details.imagepath)" />
                     </div>
                     <div class="sku-address">
                         <ul>
@@ -139,6 +139,7 @@ import { useLoginStore, useFavoriteStore, useExrateStore, usePerformanceStore }
 import { useComponent } from '@/hooks/component'
 import { useDiamondDetails } from '@/business/goods'
 import AppPerformanceRule from '@pc/components/modules/performance-rule/index.vue'
+import AppImage from '@pc/components/base/image/index.vue'
 
 const componentMap = new Map<string, unknown>([
     ['favorite', defineAsyncComponent(() => import('../favorite/index.vue'))], // 收藏