From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/mall/promotion/kefu/components/message/ProductItem.vue | 116 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 116 insertions(+), 0 deletions(-)
diff --git a/src/views/mall/promotion/kefu/components/message/ProductItem.vue b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
new file mode 100644
index 0000000..1ec313e
--- /dev/null
+++ b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
@@ -0,0 +1,116 @@
+<template>
+ <div class="product-warp" style="cursor: pointer" @click.stop="openDetail(spuId)">
+ <!-- 宸︿晶鍟嗗搧鍥剧墖-->
+ <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 class="product-warp-right">
+ <div class="description">{{ title }}</div>
+ <div class="my-5px">
+ <span class="mr-20px">搴撳瓨: {{ stock || 0 }}</span>
+ <span>閿�閲�: {{ salesCount || 0 }}</span>
+ </div>
+ <div class="flex justify-between items-center">
+ <span class="price">锟{ fenToYuan(price) }}</span>
+ <el-button size="small" text type="primary">璇︽儏</el-button>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import { fenToYuan } from '@/utils'
+
+const { push } = useRouter()
+
+defineOptions({ name: 'ProductItem' })
+defineProps({
+ spuId: {
+ type: Number,
+ default: 0
+ },
+ picUrl: {
+ type: String,
+ default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto'
+ },
+ title: {
+ type: String,
+ default: ''
+ },
+ price: {
+ type: [String, Number],
+ default: ''
+ },
+ salesCount: {
+ type: [String, Number],
+ default: ''
+ },
+ stock: {
+ type: [String, Number],
+ default: ''
+ }
+})
+
+/** 鏌ョ湅鍟嗗搧璇︽儏 */
+const openDetail = (spuId: number) => {
+ push({ name: 'ProductSpuDetail', params: { id: spuId } })
+}
+</script>
+
+<style lang="scss" scoped>
+.button {
+ background-color: #007bff;
+ color: white;
+ border: none;
+ padding: 5px 10px;
+ cursor: pointer;
+}
+
+.product-warp {
+ width: 100%;
+ background-color: rgba(128, 128, 128, 0.3);
+ border: 1px solid var(--el-border-color);
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ padding: 10px;
+
+ &-left {
+ width: 70px;
+
+ &-img {
+ width: 100%;
+ height: 100%;
+ border-radius: 8px;
+ }
+ }
+
+ &-right {
+ flex: 1;
+
+ .description {
+ width: 100%;
+ font-size: 16px;
+ font-weight: bold;
+ display: -webkit-box;
+ -webkit-line-clamp: 1; /* 鏄剧ず涓�琛� */
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .price {
+ color: #ff3000;
+ }
+ }
+}
+</style>
--
Gitblit v1.8.0