Skip to content

Commit 0051264

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!476 完善 mall 客服，新增商品、订单消息
Merge pull request !476 from puhui999/dev-crm
2 parents ba8681e + 9300650 commit 0051264

File tree

4 files changed

+419
-0
lines changed

4 files changed

+419
-0
lines changed

‎src/views/mall/promotion/kefu/components/KeFuChatBox.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@
5555
<TextMessageItem :message="item" />
5656
<!-- 图片消息 -->
5757
<ImageMessageItem :message="item" />
58+
<!-- 商品消息 -->
59+
<ProductMessageItem :message="item" />
60+
<!-- 订单消息 -->
61+
<OrderMessageItem :message="item" />
5862
</div>
5963
<el-avatar
6064
v-if="item.senderType === UserTypeEnum.ADMIN"
@@ -101,6 +105,8 @@ import EmojiSelectPopover from './tools/EmojiSelectPopover.vue'
101105
import PictureSelectUpload from './tools/PictureSelectUpload.vue'
102106
import TextMessageItem from './message/TextMessageItem.vue'
103107
import ImageMessageItem from './message/ImageMessageItem.vue'
108+
import ProductMessageItem from './message/ProductMessageItem.vue'
109+
import OrderMessageItem from './message/OrderMessageItem.vue'
104110
import { Emoji } from './tools/emoji'
105111
import { KeFuMessageContentTypeEnum } from './tools/constants'
106112
import { isEmpty } from '@/utils/is'

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

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
<template>
2+
<!-- 图片消息 -->
3+
<template v-if="KeFuMessageContentTypeEnum.ORDER === 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+
<div :key="getMessageContent.id" class="order-list-card-box mt-14px">
14+
<div class="order-card-header flex items-center justify-between p-x-20px">
15+
<div class="order-no">订单号：{{ getMessageContent.no }}</div>
16+
<div :class="formatOrderColor(getMessageContent)" class="order-state font-26">
17+
{{ formatOrderStatus(getMessageContent) }}
18+
</div>
19+
</div>
20+
<div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
21+
<ProductItem
22+
:img="item.picUrl"
23+
:num="item.count"
24+
:price="item.price"
25+
:skuText="item.properties.map((property: any) => property.valueName).join(' ')"
26+
:title="item.spuName"
27+
/>
28+
</div>
29+
<div class="pay-box mt-30px flex justify-end pr-20px">
30+
<div class="flex items-center">
31+
<div class="discounts-title pay-color"
32+
>共 {{ getMessageContent.productCount }} 件商品,总金额:
33+
</div>
34+
<div class="discounts-money pay-color">
35+
￥{{ fenToYuan(getMessageContent.payPrice) }}
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
</template>
42+
</template>
43+
44+
<script lang="ts" setup>
45+
import { KeFuMessageContentTypeEnum } from '../tools/constants'
46+
import ProductItem from './ProductItem.vue'
47+
import { UserTypeEnum } from '@/utils/constants'
48+
import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
49+
import { fenToYuan } from '@/utils'
50+
51+
defineOptions({ name: 'OrderMessageItem' })
52+
const props = defineProps<{
53+
message: KeFuMessageRespVO
54+
}>()
55+
const getMessageContent = computed(() => JSON.parse(props.message.content))
56+
57+
/**
58+
* 格式化订单状态的颜色
59+
*
60+
* @param order 订单
61+
* @return {string} 颜色的 class 名称
62+
*/
63+
function formatOrderColor(order) {
64+
if (order.status === 0) {
65+
return 'info-color'
66+
}
67+
if (order.status === 10 || order.status === 20 || (order.status === 30 && !order.commentStatus)) {
68+
return 'warning-color'
69+
}
70+
if (order.status === 30 && order.commentStatus) {
71+
return 'success-color'
72+
}
73+
return 'danger-color'
74+
}
75+
76+
/**
77+
* 格式化订单状态
78+
*
79+
* @param order 订单
80+
*/
81+
function formatOrderStatus(order) {
82+
if (order.status === 0) {
83+
return '待付款'
84+
}
85+
if (order.status === 10 && order.deliveryType === 1) {
86+
return '待发货'
87+
}
88+
if (order.status === 10 && order.deliveryType === 2) {
89+
return '待核销'
90+
}
91+
if (order.status === 20) {
92+
return '待收货'
93+
}
94+
if (order.status === 30 && !order.commentStatus) {
95+
return '待评价'
96+
}
97+
if (order.status === 30 && order.commentStatus) {
98+
return '已完成'
99+
}
100+
return '已关闭'
101+
}
102+
</script>
103+
104+
<style lang="scss" scoped>
105+
.order-list-card-box {
106+
border-radius: 10px;
107+
padding: 10px;
108+
background-color: #e2e2e2;
109+
110+
.order-card-header {
111+
height: 80rpx;
112+
113+
.order-no {
114+
font-size: 26rpx;
115+
font-weight: 500;
116+
}
117+
}
118+
119+
.pay-box {
120+
.discounts-title {
121+
font-size: 24rpx;
122+
line-height: normal;
123+
color: #999999;
124+
}
125+
126+
.discounts-money {
127+
font-size: 24rpx;
128+
line-height: normal;
129+
color: #999;
130+
font-family: OPPOSANS;
131+
}
132+
133+
.pay-color {
134+
color: #333;
135+
}
136+
}
137+
138+
.order-card-footer {
139+
height: 100rpx;
140+
141+
.more-item-box {
142+
padding: 20rpx;
143+
144+
.more-item {
145+
height: 60rpx;
146+
147+
.title {
148+
font-size: 26rpx;
149+
}
150+
}
151+
}
152+
153+
.more-btn {
154+
color: #999999;
155+
font-size: 24rpx;
156+
}
157+
158+
.content {
159+
width: 154rpx;
160+
color: #333333;
161+
font-size: 26rpx;
162+
font-weight: 500;
163+
}
164+
}
165+
}
166+
167+
.warning-color {
168+
color: #faad14;
169+
}
170+
171+
.danger-color {
172+
color: #ff3000;
173+
}
174+
175+
.success-color {
176+
color: #52c41a;
177+
}
178+
179+
.info-color {
180+
color: #999999;
181+
}
182+
</style>

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

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
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+
border-radius: 10px;
120+
background-color: #e2e2e2;
121+
122+
.img-box {
123+
width: 164px;
124+
height: 164px;
125+
border-radius: 10px;
126+
overflow: hidden;
127+
128+
.order-img {
129+
width: 164px;
130+
height: 164px;
131+
}
132+
}
133+
134+
.box-right {
135+
flex: 1;
136+
// width: 500px;
137+
// height: 164px;
138+
position: relative;
139+
140+
.tool-box {
141+
position: absolute;
142+
right: 0px;
143+
bottom: -10px;
144+
}
145+
}
146+
147+
.title-text {
148+
font-size: 28px;
149+
font-weight: 500;
150+
line-height: 40px;
151+
}
152+
153+
.spec-text {
154+
font-size: 24px;
155+
font-weight: 400;
156+
color: #999999;
157+
min-width: 0;
158+
overflow: hidden;
159+
text-overflow: ellipsis;
160+
display: -webkit-box;
161+
-webkit-line-clamp: 1;
162+
-webkit-box-orient: vertical;
163+
}
164+
165+
.price-text {
166+
font-size: 24px;
167+
font-weight: 500;
168+
font-family: OPPOSANS;
169+
}
170+
171+
.total-text {
172+
font-size: 24px;
173+
font-weight: 400;
174+
line-height: 24px;
175+
color: #999999;
176+
margin-left: 8px;
177+
}
178+
}
179+
180+
.ss-line {
181+
min-width: 0;
182+
overflow: hidden;
183+
text-overflow: ellipsis;
184+
display: -webkit-box;
185+
-webkit-box-orient: vertical;
186+
187+
&-1 {
188+
-webkit-line-clamp: 1;
189+
}
190+
191+
&-2 {
192+
-webkit-line-clamp: 2;
193+
}
194+
}
195+
</style>

0 commit comments

Comments
 (0)