|
|
|
@ -0,0 +1,185 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div
|
|
|
|
|
class="message-item"
|
|
|
|
|
:class="{
|
|
|
|
|
[`--${props.message.type}`]: true,
|
|
|
|
|
'--self': props.message.from === 'employee',
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<div v-if="props.message.avatar" class="avatar">
|
|
|
|
|
<el-avatar :src="props.message.avatar" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="message-body">
|
|
|
|
|
<div class="name">
|
|
|
|
|
{{ props.message.name }}
|
|
|
|
|
</div>
|
|
|
|
|
<el-card v-if="props.message.type === 'product'" class="shadow">
|
|
|
|
|
<template #header>
|
|
|
|
|
<div class="flex">
|
|
|
|
|
<div class="left">商品编号:{{ product.id }}</div>
|
|
|
|
|
<el-button type="text">复制</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="flex">
|
|
|
|
|
<el-image :alt="product.name" height="64px" :src="product.mainPicture" width="64px" />
|
|
|
|
|
<div class="right">
|
|
|
|
|
<div class="name">{{ product.name }}</div>
|
|
|
|
|
<div class="price">¥{{ product.startingPrice }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="footer">
|
|
|
|
|
<el-button>商品规格属性</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
<el-card v-else-if="props.message.type === 'order'" class="shadow">
|
|
|
|
|
<template #header>
|
|
|
|
|
<div class="flex">
|
|
|
|
|
<div class="status">{{ order.orderStatusDesc }}</div>
|
|
|
|
|
<div class="service">售后中</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex">
|
|
|
|
|
<div class="no">订单编号:{{ order.orderNo }}</div>
|
|
|
|
|
<el-button type="text">复制</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="flex">
|
|
|
|
|
<el-image :alt="order.product.name" height="64px" :src="order.product.mainPicture" width="64px" />
|
|
|
|
|
<div class="right">
|
|
|
|
|
<div class="flex">
|
|
|
|
|
<div class="name">{{ order.product.name }}</div>
|
|
|
|
|
<div class="price">¥{{ order.product.startingPrice }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex">
|
|
|
|
|
<div class="sku">{{ order.product.sku || '默认规格' }}</div>
|
|
|
|
|
<div class="count">x{{ order.count || 1 }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="footer">
|
|
|
|
|
<el-button>查看详情</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
<div v-else class="content" :class="{ shadow: props.message.type === 'text' }">
|
|
|
|
|
{{ props.message.content }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="props.message.type !== 'notify'" class="time">
|
|
|
|
|
{{ props.message.time }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
message: {
|
|
|
|
|
type: Object,
|
|
|
|
|
required: true,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
const product = computed(() => {
|
|
|
|
|
return props.message.type === 'product' ? JSON.parse(props.message.content) : {};
|
|
|
|
|
});
|
|
|
|
|
const order = computed(() => {
|
|
|
|
|
return props.message.type === 'order' ? JSON.parse(props.message.content) : {};
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.message-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
& + .message-item {
|
|
|
|
|
margin-top: @layout-space;
|
|
|
|
|
}
|
|
|
|
|
&:first-child {
|
|
|
|
|
margin-top: @layout-space;
|
|
|
|
|
}
|
|
|
|
|
&:last-child {
|
|
|
|
|
margin-bottom: @layout-space;
|
|
|
|
|
}
|
|
|
|
|
.flex {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
.avatar {
|
|
|
|
|
margin: 0 @layout-space;
|
|
|
|
|
}
|
|
|
|
|
.name {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-bottom: @layout-space-small;
|
|
|
|
|
}
|
|
|
|
|
.time {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
margin: auto @layout-space 0;
|
|
|
|
|
color: #ccc;
|
|
|
|
|
}
|
|
|
|
|
.content {
|
|
|
|
|
width: max-content;
|
|
|
|
|
height: max-content;
|
|
|
|
|
max-width: 300px;
|
|
|
|
|
padding: @layout-space-small @layout-space;
|
|
|
|
|
border-radius: @layout-border-radius;
|
|
|
|
|
color: #000;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.el-card {
|
|
|
|
|
max-width: 360px;
|
|
|
|
|
:deep(.el-card__header) {
|
|
|
|
|
padding: @layout-space;
|
|
|
|
|
}
|
|
|
|
|
:deep(.el-card__body) {
|
|
|
|
|
padding: @layout-space;
|
|
|
|
|
}
|
|
|
|
|
.el-image {
|
|
|
|
|
margin-right: @layout-space;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
.service,
|
|
|
|
|
.no {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
.sku,
|
|
|
|
|
.count {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
margin-top: @layout-space;
|
|
|
|
|
}
|
|
|
|
|
.price {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: var(--el-color-danger);
|
|
|
|
|
margin-top: @layout-space;
|
|
|
|
|
}
|
|
|
|
|
.footer {
|
|
|
|
|
margin-top: @layout-space;
|
|
|
|
|
padding-top: @layout-space;
|
|
|
|
|
border-top: 1px solid #eee;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.shadow {
|
|
|
|
|
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
|
}
|
|
|
|
|
&.--self {
|
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
|
.message-body {
|
|
|
|
|
text-align: right;
|
|
|
|
|
.content {
|
|
|
|
|
color: #fff;
|
|
|
|
|
background-color: var(--el-color-primary);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&.--notify {
|
|
|
|
|
.message-body {
|
|
|
|
|
margin: auto;
|
|
|
|
|
.content {
|
|
|
|
|
max-width: unset;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
|
|
|
color: rgba(0, 0, 0, 0.3);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|