Skip to content

Commit ebc995a

Browse files
author
puhui999
committed
【优化】mall 客服商品消息
1 parent 9dfb869 commit ebc995a

File tree

3 files changed

+239
-74
lines changed

3 files changed

+239
-74
lines changed

‎src/views/mall/promotion/kefu/components/message/OrderMessageItem.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<!-- 图片消息 -->
3+
<template v-if="KeFuMessageContentTypeEnum.PRODUCT === message.contentType">
4+
<div
5+
:class="[
6+
message.senderType === UserTypeEnum.MEMBER
7+
? `ml-10px`
8+
: message.senderType === UserTypeEnum.ADMIN
9+
? `mr-10px`
10+
: ''
11+
]"
12+
>
13+
<ProductItem
14+
:img="getMessageContent.picUrl"
15+
:price="getMessageContent.price"
16+
:skuText="getMessageContent.introduction"
17+
:title="getMessageContent.spuName"
18+
:titleWidth="400"
19+
priceColor="#FF3000"
20+
/>
21+
</div>
22+
</template>
23+
</template>
24+
25+
<script lang="ts" setup>
26+
import { KeFuMessageContentTypeEnum } from '../tools/constants'
27+
import ProductItem from './ProductItem.vue'
28+
import { UserTypeEnum } from '@/utils/constants'
29+
import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
30+
31+
defineOptions({ name: 'ImageMessageItem' })
32+
const props = defineProps<{
33+
message: KeFuMessageRespVO
34+
}>()
35+
const getMessageContent = computed(() => JSON.parse(props.message.content))
36+
</script>

‎src/views/mall/promotion/kefu/components/message/ProductItem.vue

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<template>
2+
<div>
3+
<div>
4+
<slot name="top"></slot>
5+
</div>
6+
<div
7+
:style="[{ borderRadius: radius + 'px', marginBottom: marginBottom + 'px' }]"
8+
class="ss-order-card-warp flex items-stretch justify-between bg-white"
9+
>
10+
<div class="img-box mr-24px">
11+
<el-image :src="img" class="order-img" fit="contain" @click="imagePrediv(img)" />
12+
</div>
13+
<div
14+
:style="[{ width: titleWidth ? titleWidth + 'px' : '' }]"
15+
class="box-right flex flex-col justify-between"
16+
>
17+
<div v-if="title" class="title-text ss-line-2">{{ title }}</div>
18+
<div v-if="skuString" class="spec-text mt-8px mb-12px">{{ skuString }}</div>
19+
<div class="groupon-box">
20+
<slot name="groupon"></slot>
21+
</div>
22+
<div class="flex">
23+
<div class="flex items-center">
24+
<div
25+
v-if="price && Number(price) > 0"
26+
:style="[{ color: priceColor }]"
27+
class="price-text flex items-center"
28+
>
29+
￥{{ fenToYuan(price) }}
30+
</div>
31+
<div v-if="num" class="total-text flex items-center">x {{ num }}</div>
32+
<slot name="priceSuffix"></slot>
33+
</div>
34+
</div>
35+
<div class="tool-box">
36+
<slot name="tool"></slot>
37+
</div>
38+
<div>
39+
<slot name="rightBottom"></slot>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</template>
45+
46+
<script lang="ts" setup>
47+
import { createImageViewer } from '@/components/ImageViewer'
48+
import { fenToYuan } from '@/utils'
49+
50+
defineOptions({ name: 'ProductItem' })
51+
const props = defineProps({
52+
img: {
53+
type: String,
54+
default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto'
55+
},
56+
title: {
57+
type: String,
58+
default: ''
59+
},
60+
titleWidth: {
61+
type: Number,
62+
default: 0
63+
},
64+
skuText: {
65+
type: [String, Array],
66+
default: ''
67+
},
68+
price: {
69+
type: [String, Number],
70+
default: ''
71+
},
72+
priceColor: {
73+
type: [String],
74+
default: ''
75+
},
76+
num: {
77+
type: [String, Number],
78+
default: 0
79+
},
80+
score: {
81+
type: [String, Number],
82+
default: ''
83+
},
84+
radius: {
85+
type: [String],
86+
default: ''
87+
},
88+
marginBottom: {
89+
type: [String],
90+
default: ''
91+
}
92+
})
93+
const skuString = computed(() => {
94+
if (!props.skuText) {
95+
return ''
96+
}
97+
if (typeof props.skuText === 'object') {
98+
return props.skuText.join(',')
99+
}
100+
return props.skuText
101+
})
102+
/** 图预览 */
103+
const imagePrediv = (imgUrl: string) => {
104+
createImageViewer({
105+
urlList: [imgUrl]
106+
})
107+
}
108+
</script>
109+
110+
<style lang="scss" scoped>
111+
.score-img {
112+
width: 36px;
113+
height: 36px;
114+
margin: 0 4px;
115+
}
116+
117+
.ss-order-card-warp {
118+
padding: 20px;
119+
background-color: #e2e2e2;
120+
121+
.img-box {
122+
width: 164px;
123+
height: 164px;
124+
border-radius: 10px;
125+
overflow: hidden;
126+
127+
.order-img {
128+
width: 164px;
129+
height: 164px;
130+
}
131+
}
132+
133+
.box-right {
134+
flex: 1;
135+
// width: 500px;
136+
// height: 164px;
137+
position: relative;
138+
139+
.tool-box {
140+
position: absolute;
141+
right: 0px;
142+
bottom: -10px;
143+
}
144+
}
145+
146+
.title-text {
147+
font-size: 28px;
148+
font-weight: 500;
149+
line-height: 40px;
150+
}
151+
152+
.spec-text {
153+
font-size: 24px;
154+
font-weight: 400;
155+
color: #999999;
156+
min-width: 0;
157+
overflow: hidden;
158+
text-overflow: ellipsis;
159+
display: -webkit-box;
160+
-webkit-line-clamp: 1;
161+
-webkit-box-orient: vertical;
162+
}
163+
164+
.price-text {
165+
font-size: 24px;
166+
font-weight: 500;
167+
font-family: OPPOSANS;
168+
}
169+
170+
.total-text {
171+
font-size: 24px;
172+
font-weight: 400;
173+
line-height: 24px;
174+
color: #999999;
175+
margin-left: 8px;
176+
}
177+
}
178+
179+
.ss-line {
180+
min-width: 0;
181+
overflow: hidden;
182+
text-overflow: ellipsis;
183+
display: -webkit-box;
184+
-webkit-box-orient: vertical;
185+
186+
&-1 {
187+
-webkit-line-clamp: 1;
188+
}
189+
190+
&-2 {
191+
-webkit-line-clamp: 2;
192+
}
193+
}
194+
</style>

‎src/views/mall/promotion/kefu/components/message/ProductMessageItem.vue

Lines changed: 9 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -10,92 +10,27 @@
1010
: ''
1111
]"
1212
>
13-
<div class="goods flex items-center">
14-
<el-image
15-
:src="getMessageContent.picUrl"
16-
class="image"
17-
fit="contain"
18-
@click="imagePreview(getMessageContent.picUrl)"
19-
/>
20-
<view class="flex-1">
21-
<view class="title ss-line-2">
22-
{{ getMessageContent.spuName }}
23-
</view>
24-
<view v-if="getMessageContent.introduction" class="subtitle ss-line-1">
25-
{{ getMessageContent.introduction }}
26-
</view>
27-
<view class="price mt-8px"> ￥{{ getMessageContent.price }}</view>
28-
</view>
29-
</div>
13+
<ProductItem
14+
:img="getMessageContent.picUrl"
15+
:price="getMessageContent.price"
16+
:skuText="getMessageContent.introduction"
17+
:title="getMessageContent.spuName"
18+
:titleWidth="400"
19+
priceColor="#FF3000"
20+
/>
3021
</div>
3122
</template>
3223
</template>
3324

3425
<script lang="ts" setup>
3526
import { KeFuMessageContentTypeEnum } from '../tools/constants'
27+
import ProductItem from './ProductItem.vue'
3628
import { UserTypeEnum } from '@/utils/constants'
3729
import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
38-
import { createImageViewer } from '@/components/ImageViewer'
3930
4031
defineOptions({ name: 'ImageMessageItem' })
4132
const props = defineProps<{
4233
message: KeFuMessageRespVO
4334
}>()
4435
const getMessageContent = computed(() => JSON.parse(props.message.content))
45-
/** 图预览 */
46-
const imagePreview = (imgUrl: string) => {
47-
createImageViewer({
48-
urlList: [imgUrl]
49-
})
50-
}
5136
</script>
52-
<style lang="scss" scoped>
53-
.goods {
54-
padding: 20px;
55-
border-radius: 12px;
56-
background-color: #e1e1e1;
57-
58-
.ss-line {
59-
min-width: 0;
60-
overflow: hidden;
61-
text-overflow: ellipsis;
62-
display: -webkit-box;
63-
-webkit-box-orient: vertical;
64-
65-
&-1 {
66-
-webkit-line-clamp: 1;
67-
}
68-
69-
&-2 {
70-
-webkit-line-clamp: 2;
71-
}
72-
}
73-
74-
.image {
75-
width: 116px;
76-
height: 116px;
77-
flex-shrink: 0;
78-
margin-right: 20px;
79-
}
80-
81-
.title {
82-
height: 64px;
83-
line-height: 32px;
84-
font-size: 26px;
85-
font-weight: 500;
86-
color: #333;
87-
}
88-
89-
.subtitle {
90-
font-size: 24px;
91-
font-weight: 400;
92-
color: #999;
93-
}
94-
95-
.price {
96-
font-size: 26px;
97-
font-weight: 500;
98-
color: #ff3000;
99-
}
100-
}
101-
</style>

0 commit comments

Comments
 (0)