130 lines
2.7 KiB
Vue
130 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<view class="context-card">
|
||
|
|
<image class="context-image" :src="image" mode="aspectFill" />
|
||
|
|
<view class="context-copy">
|
||
|
|
<text class="context-kind">{{ kindLabel }}</text>
|
||
|
|
<text class="context-title">{{ title }}</text>
|
||
|
|
<text class="context-meta">{{ meta }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="context-actions">
|
||
|
|
<button class="context-send" :disabled="sending" @click="$emit('send')">{{ sending ? '发送中' : '发送' }}</button>
|
||
|
|
<button class="context-remove" @click="$emit('remove')">移除</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'CustomerServiceContextCard',
|
||
|
|
props: {
|
||
|
|
context: { type: Object, required: true },
|
||
|
|
sending: { type: Boolean, default: false }
|
||
|
|
},
|
||
|
|
emits: ['send', 'remove'],
|
||
|
|
computed: {
|
||
|
|
isProduct() {
|
||
|
|
return this.context.type === 'product'
|
||
|
|
},
|
||
|
|
kindLabel() {
|
||
|
|
return this.isProduct ? '待咨询商品' : '待咨询订单'
|
||
|
|
},
|
||
|
|
image() {
|
||
|
|
const data = this.context.data || {}
|
||
|
|
return data.goodsMainGraph || data.mainGraph || data.image || '/uni_modules/hashmall-customer-service/static/image-placeholder.png'
|
||
|
|
},
|
||
|
|
title() {
|
||
|
|
const data = this.context.data || {}
|
||
|
|
return data.goodsName || data.name || (this.isProduct ? '商品信息' : '订单信息')
|
||
|
|
},
|
||
|
|
meta() {
|
||
|
|
const data = this.context.data || {}
|
||
|
|
if (!this.isProduct) return data.orderNo || data.no || '点击发送订单信息'
|
||
|
|
const price = data.currentPrice || data.price
|
||
|
|
return price ? `¥${price}` : '点击发送商品信息'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.context-card {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 16rpx;
|
||
|
|
padding: 18rpx 24rpx;
|
||
|
|
border-top: 1rpx solid #e7e7ec;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.context-image {
|
||
|
|
width: 92rpx;
|
||
|
|
height: 92rpx;
|
||
|
|
flex: 0 0 92rpx;
|
||
|
|
border-radius: 14rpx;
|
||
|
|
background: #f5f5f7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.context-copy {
|
||
|
|
display: flex;
|
||
|
|
min-width: 0;
|
||
|
|
flex: 1;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.context-kind {
|
||
|
|
color: #7934f6;
|
||
|
|
font-size: 21rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.context-title,
|
||
|
|
.context-meta {
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.context-title {
|
||
|
|
margin-top: 4rpx;
|
||
|
|
color: #1a1a1d;
|
||
|
|
font-size: 26rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.context-meta {
|
||
|
|
margin-top: 4rpx;
|
||
|
|
color: #5f6068;
|
||
|
|
font-size: 22rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.context-actions {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 4rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.context-send,
|
||
|
|
.context-remove {
|
||
|
|
min-width: 96rpx;
|
||
|
|
min-height: 52rpx;
|
||
|
|
padding: 0 14rpx;
|
||
|
|
border-radius: 26rpx;
|
||
|
|
font-size: 23rpx;
|
||
|
|
line-height: 52rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.context-send {
|
||
|
|
background: #7934f6;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.context-send[disabled] {
|
||
|
|
background: #c9b2f4;
|
||
|
|
}
|
||
|
|
|
||
|
|
.context-remove {
|
||
|
|
background: transparent;
|
||
|
|
color: #5f6068;
|
||
|
|
}
|
||
|
|
</style>
|