jiuyiUniapp/jiuyi/node_modules/@tencentcloud/tui-customer-service-plugin/components/message-branch.vue

96 lines
1.9 KiB
Vue

<template>
<div class="branch-card">
<p
v-if="content.header || content.title"
class="branch-title"
>
{{ content.header || content.title }}
</p>
<div
v-for="(item, index) in content.items"
:key="index"
class="branch-item"
:style="{ borderWidth: content.header ? '1px 0 0px 0' : '0px 0 1px 0' }"
@click="handleContentListItemClick(item)"
>
{{ item.content }}
<Icon :src="iconRight" />
</div>
</div>
</template>
<script lang="ts">
import vue from '../adapter-vue';
import { customerServicePayloadType } from '../interface';
import iconRight from '../assets/iconRight.svg';
import Icon from './customer-icon.vue';
const { computed } = vue;
interface Props {
payload: customerServicePayloadType;
}
interface branchItem {
content: string;
desc: string;
}
export default {
components: {
Icon,
},
props: {
payload: {
type: Object as () => customerServicePayloadType,
default: () => ({}),
},
},
emits: ['sendMessage'],
setup(props: Props, { emit }) {
const content = computed(() => {
return (
props?.payload?.content || {
header: undefined,
items: [],
}
);
});
const handleContentListItemClick = (branch: branchItem) => {
emit('sendMessage', { text: branch.content });
};
return {
content,
handleContentListItemClick,
iconRight,
};
},
};
</script>
<style lang="scss">
.branch-card {
min-width: 250px;
max-width: 350px;
.branch-title {
margin-bottom: 8px;
border-radius: 0 10px 10px;
}
.branch-item {
display: flex;
justify-content: space-between;
border-style: dotted;
border-color: #d8d8d8;
font-weight: 400;
color: rgba(54, 141, 255, 1);
padding-top: 5px;
cursor: pointer;
padding-bottom: 5px;
}
}
</style>