【功能完善】商城: 客服商品组件显示优化

649c24ed · puhui999 · fdee8d86 · 649c24ed · 649c24ed · 649c24ed
Commit 649c24ed authored Nov 10, 2024 by puhui999
5 changed files
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
-import { toNumber } from 'lodash-es'
+import {toNumber} from 'lodash-es'
 /**
 *

--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -75,12 +75,11 @@
                    v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
                    :picUrl="getMessageContent(item).picUrl"
                    :price="getMessageContent(item).price"
-                    :skuText="getMessageContent(item).introduction"
+                    :sales-count="getMessageContent(item).salesCount"
                    :spuId="getMessageContent(item).spuId"
+                    :stock="getMessageContent(item).stock"
                    :title="getMessageContent(item).spuName"
-                    :titleWidth="400"
+                    class="max-w-300px"
-                    class="max-w-70%"
-                    priceColor="#FF3000"
                  />
                </MessageItem>
                <!-- 订单消息 -->
@@ -392,7 +391,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
  &-content {
    margin: 0;
-    padding: 0;
+    padding: 10px;
    position: relative;
    height: 100%;
    width: 100%;

--- a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
+++ b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
@@ -24,7 +24,7 @@
        交易订单
      </div>
    </el-header>
-    <el-main class="kefu-content">
+    <el-main class="kefu-content p-10px!">
      <div v-if="!isEmpty(conversation)" v-loading="loading">
        <!-- 基本信息 -->
        <UserBasicInfo v-if="activeTab === '会员信息'" :user="user" mode="kefu">
@@ -33,7 +33,7 @@
          </template>
        </UserBasicInfo>
        <!-- 账户信息 -->
-        <el-card v-if="activeTab === '会员信息'" class="h-full" shadow="never">
+        <el-card v-if="activeTab === '会员信息'" class="h-full mt-10px" shadow="never">
          <template #header>
            <CardTitle title="账户信息" />
          </template>

--- a/src/views/mall/promotion/kefu/components/member/ProductBrowsingHistory.vue
+++ b/src/views/mall/promotion/kefu/components/member/ProductBrowsingHistory.vue
 <template>
  <ProductItem
    v-for="item in list"
-    :spu-id="item.spuId"
    :key="item.id"
    :picUrl="item.picUrl"
    :price="item.price"
-    :skuText="item.introduction"
+    :sales-count="item.salesCount"
+    :spu-id="item.spuId"
+    :stock="item.stock"
    :title="item.spuName"
-    :titleWidth="400"
    class="mb-10px"
-    priceColor="#FF3000"
  />
 </template>

--- a/src/views/mall/promotion/kefu/components/message/ProductItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
 <template>
-  <div @click.stop="openDetail(props.spuId)" style="cursor: pointer;">
+  <div class="product-warp" style="cursor: pointer" @click.stop="openDetail(spuId)">
-    <div>
+    <!-- 左侧商品图片-->
-      <slot name="top"></slot>
+    <div class="product-warp-left mr-24px">
+      <el-image
+        :initial-index="0"
+        :preview-src-list="[picUrl]"
+        :src="picUrl"
+        class="product-warp-left-img"
+        fit="contain"
+        preview-teleported
+        @click.stop
+      />
    </div>
-    <div
+    <!-- 右侧商品信息 -->
-      :style="[{ borderRadius: radius + 'px', marginBottom: marginBottom + 'px' }]"
+    <div class="product-warp-right">
-      class="ss-order-card-warp flex items-stretch justify-between bg-white"
+      <div class="description">{{ title }}</div>
-    >
+      <div class="my-5px">
-      <div class="img-box mr-24px">
+        <span class="mr-20px">库存: {{ stock || 0 }}</span>
-        <el-image
+        <span>销量: {{ salesCount || 0 }}</span>
-          :initial-index="0"
-          :preview-src-list="[picUrl]"
-          :src="picUrl"
-          class="order-img"
-          fit="contain"
-          preview-teleported
-          @click.stop
-        />
      </div>
-      <div
+      <div class="flex justify-between items-center">
-        :style="[{ width: titleWidth ? titleWidth + 'px' : '' }]"
+        <span class="price">￥{{ fenToYuan(price) }}</span>
-        class="box-right flex flex-col justify-between"
+        <el-button size="small" text type="primary">详情</el-button>
-      >
-        <div v-if="title" class="title-text ss-line-2">{{ title }}</div>
-        <div v-if="skuString" class="spec-text mt-8px mb-12px">{{ skuString }}</div>
-        <div class="groupon-box">
-          <slot name="groupon"></slot>
-        </div>
-        <div class="flex">
-          <div class="flex items-center">
-            <div
-              v-if="price && Number(price) > 0"
-              :style="[{ color: priceColor }]"
-              class="price-text flex items-center"
-            >
-              ￥{{ fenToYuan(price) }}
-            </div>
-            <div v-if="num" class="total-text flex items-center">x {{ num }}</div>
-            <slot name="priceSuffix"></slot>
-          </div>
-        </div>
-        <div class="tool-box">
-          <slot name="tool"></slot>
-        </div>
-        <div>
-          <slot name="rightBottom"></slot>
-        </div>
      </div>
    </div>
  </div>
@@ -57,7 +33,7 @@ import { fenToYuan } from '@/utils'
 const { push } = useRouter()
 defineOptions({ name: 'ProductItem' })
-const props = defineProps({
+defineProps({
  spuId: {
    type: Number,
    default: 0
@@ -70,134 +46,70 @@ const props = defineProps({
    type: String,
    default: ''
  },
-  titleWidth: {
-    type: Number,
-    default: 0
-  },
-  skuText: {
-    type: [String, Array],
-    default: ''
-  },
  price: {
    type: [String, Number],
    default: ''
  },
-  priceColor: {
+  salesCount: {
-    type: [String],
-    default: ''
-  },
-  num: {
    type: [String, Number],
-    default: 0
-  },
-  score: {
-    type: [String, Number],
-    default: ''
-  },
-  radius: {
-    type: [String],
    default: ''
  },
-  marginBottom: {
+  stock: {
-    type: [String],
+    type: [String, Number],
    default: ''
  }
 })
-/** SKU 展示字符串 */
-const skuString = computed(() => {
-  if (!props.skuText) {
-    return ''
-  }
-  if (typeof props.skuText === 'object') {
-    return props.skuText.join(',')
-  }
-  return props.skuText
-})
 /** 查看商品详情 */
 const openDetail = (spuId: number) => {
-  console.log(props.spuId)
  push({ name: 'ProductSpuDetail', params: { id: spuId } })
 }
 </script>
 <style lang="scss" scoped>
-.ss-order-card-warp {
+.button {
-  padding: 20px;
+  background-color: #007bff;
-  border-radius: 10px;
+  color: white;
-  border: 1px var(--el-border-color) solid;
+  border: none;
-  background-color: var(--app-content-bg-color);
+  padding: 5px 10px;
+  cursor: pointer;
-  .img-box {
+}
-    width: 80px;
-    height: 80px;
-    border-radius: 10px;
-    overflow: hidden;
-    .order-img {
+.product-warp {
-      width: 80px;
+  width: 100%;
-      height: 80px;
+  background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  &-left {
+    width: 70px;
+    &-img {
+      width: 100%;
+      height: 100%;
+      border-radius: 8px;
    }
  }
-  .box-right {
+  &-right {
    flex: 1;
-    position: relative;
-    .tool-box {
+    .description {
-      position: absolute;
+      width: 100%;
-      right: 0;
+      font-size: 16px;
-      bottom: -10px;
+      font-weight: bold;
+      display: -webkit-box;
+      -webkit-line-clamp: 1; /* 显示一行 */
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
    }
-  }
-  .title-text {
-    font-size: 13px;
-    font-weight: 500;
-    line-height: 20px;
-  }
-  .spec-text {
-    font-size: 10px;
-    font-weight: 400;
-    color: #999999;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-  }
-  .price-text {
-    font-size: 11px;
-    font-weight: 500;
-    font-family: OPPOSANS;
-  }
-  .total-text {
-    font-size: 10px;
-    font-weight: 400;
-    line-height: 16px;
-    color: #999999;
-    margin-left: 8px;
-  }
-}
-.ss-line {
+    .price {
-  min-width: 0;
+      color: #ff3000;
-  overflow: hidden;
+    }
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  &-1 {
-    -webkit-line-clamp: 1;
-  }
-  &-2 {
-    -webkit-line-clamp: 2;
  }
 }
 </style>