Skip to content

S
saas-dml
提交 c8d750da authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

chore: update

上级 c6a5b125
显示空白字符变更
内嵌 并排
正在显示 包含 72 行增加 和 135 行删除
src/modules/live/product/management/components/FormBaseInfo.vue
浏览文件 @ c8d750da
......@@ -3,13 +3,13 @@ import { useChat } from '@/composables/useChat'
import { getAttrList } from '../api'
const form = inject('form')
const { post, messages } = useChat()
const { isLoading, post, messages } = useChat()
watch(
messages,
() => {
const lastMessage = messages.value[messages.value.length - 1]
if (lastMessage) {
form.shopping_guide_short_title = lastMessage.content
form.shopping_guide_short_title = lastMessage.content.replace('推荐导购短标题：', '')
}
},
{ deep: true }
......@@ -86,7 +86,7 @@ const unimportanceTotal = computed(() => {
size="large"
v-model="form.shopping_guide_short_title"
style="flex: 1" />
<el-button type="primary" plain @click="handleAIGenerate">一键智能推荐</el-button>
<el-button type="primary" plain @click="handleAIGenerate" :loading="isLoading">一键智能推荐</el-button>
</div>
</el-form-item>
<el-form-item
......
src/modules/live/talk/api.ts
浏览文件 @ c8d750da
......@@ -29,3 +29,8 @@ export function updateTalk(data: { id: string; name: string; status: string }) {
export function deleteTalk(data: { id: string }) {
return httpRequest.post('/api/lab/v1/experiment/live-speeches/delete', data)
}
// 获取实验直播商品详情
export function getProduct(params: { id: string }) {
return httpRequest.get('/api/lab/v1/experiment/live-commodity/detail', { params })
}
src/modules/live/talk/components/FormDialog.vue
浏览文件 @ c8d750da
......@@ -2,7 +2,9 @@
import { ElMessage } from 'element-plus'
import { liveTestDuration } from '@/utils/dictionary'
import LiveProductSelect from '@/components/LiveProductSelect.vue'
import { createTalk, updateTalk, getTalk } from '../api'
import { createTalk, updateTalk, getTalk, getProduct } from '../api'
import { useChat } from '@/composables/useChat'
import Editor from '@tinymce/tinymce-vue'
const props = defineProps(['data', 'action'])
......@@ -12,7 +14,6 @@ const actonMap = { add: '添加', update: '编辑', view: '查看' }
const isUpdate = computed(() => props.action === 'update')
const title = computed(() => actonMap[props.action] + '直播话术')
const formRef = ref()
const form = reactive({
name: '',
......@@ -42,6 +43,15 @@ watchEffect(() => {
if (props.action !== 'add') fetchInfo()
})
const product = ref()
watch(
() => form.live_commodity_id,
async (id) => {
const res = await getProduct({ id })
product.value = res.data.detail
}
)
// 提交
async function handleSubmit() {
await formRef.value?.validate()
......@@ -64,7 +74,42 @@ async function handleUpdate() {
emit('update:modelValue', false)
}
const show = ref(false)
const wrapWithStyle = (text) => {
return `<span style=" padding: 0 5px;display: inline-block;background-color: rgba(25, 102, 255, 0.08);color: rgb(25, 102, 255);">${text}</span>`
}
const wrapWithStyle2 = (text) => {
return `<span style="padding: 0 5px;color: rgb(25, 102, 255);border: 1px solid rgba(25, 102, 255, 0.12);">${text}</span>`
}
const { post, messages, isLoading } = useChat()
watch(
messages,
() => {
const lastMessage = messages.value[messages.value.length - 1]
if (lastMessage) {
form.content = lastMessage.content
.replace(/(商品引入|商品讲解|引导转化)/g, wrapWithStyle)
.replace(
/(开场互动|引出话题|引出商品|目标人群锁定|产品卖点讲解|观众互动|价格福利|催单话术|强调购买方式|结尾互动)/g,
wrapWithStyle2
)
}
},
{ deep: true }
)
function handleAIGenerate() {
post({
role: 'user',
content: `你是一位网络主播。请根据以下要求撰写直播话术：
1. 直播话术匹配的直播时长为：${form.duration}分钟。
2. 直播的商品是：${product.value.title}。
3. 商品的卖点有：${form.selling_point}。
4. 营销活动有：${form.marketing_campaign}。
5. 直播话术要求包含：商品引入（开场互动、引出话题、引出商品、目标人群锁定）、商品讲解（产品卖点讲解、观众互动、价格福利）、引导转化（催单话术、强调购买方式、结尾互动）等内容模块。而且按照模块进行内容区分。
请确保话术简洁明了，突出商品特点，并吸引观众购买。同时，注意控制直播时长，确保在${form.duration}分钟内完成。`,
})
}
</script>
<template>
......@@ -100,55 +145,22 @@ const show = ref(false)
</el-form>
</el-col>
<el-col :sm="24" :md="12" style="border-left: 1px solid #dcdfe6">
<div style="text-align: center">
<div style="text-align: center; margin-bottom: 20px">
<h2 style="margin-bottom: 20px">直播话术</h2>
<el-button type="primary" size="large" @click="show = true">
{{ show ? '再次生成直播话术' : 'AI生成直播话术' }}
<el-button type="primary" size="large" @click="handleAIGenerate" :loading="isLoading">
{{ messages.length ? '再次生成直播话术' : 'AI生成直播话术' }}
</el-button>
</div>
<div class="live-talk-content" v-if="show">
<p class="t1">商品引入</p>
<p>
<span>开场互动</span>
亲爱的家人们，欢迎来到默认主播的直播间呀！今天可是有超棒的宝贝要给大家分享哦，大家有没有对电脑硬件感兴趣的呀？快来跟主播互动一下吧！
</p>
<p>
<span>引出话题</span>
说到电脑，那可是我们生活和工作中不可或缺的一部分呢。大家平时使用电脑的时候有没有遇到过卡顿、运行不流畅的情况呀？今天我带来的这款
1DIY 兼容机，就能完美解决这些问题哦！
</p>
<p>
<span>引出商品</span>
这款 1DIY
兼容机，它可是经过精心设计和配置的呢。它能够满足大家各种不同的使用需求，无论是日常办公、学习，还是玩大型游戏，都能轻松应对。
</p>
<p>
<span>目标人群场景锁定</span>
对于那些对电脑性能有较高要求的朋友们，这款兼容机绝对是你们的最佳选择。比如那些经常需要处理大量数据、进行图形设计的专业人士，或者是喜欢玩高画质游戏的游戏爱好者们，它都能给你们带来超棒的体验哦！
</p>
<p class="t1">商品讲解</p>
<p>
<span>产品卖点讲解</span>
咱们这款兼容机的第一个卖点就是它的强大性能。它配备了最新的处理器和高性能显卡，运行速度那叫一个快，让你在使用过程中感受不到丝毫卡顿。而且内存和硬盘的容量也非常大，能够存储大量的文件和数据。第二个卖点就是它的兼容性非常好，能够兼容各种软件和硬件，不用担心出现不兼容的情况。
</p>
<p>
<span>观众互动</span>
家人们，你们觉得什么样的电脑配置才是最适合自己的呢？快在评论区留言告诉主播哦，主播会根据大家的需求给大家更详细的介绍。
</p>
<p class="t1">引导转化</p>
<p>
<span>催单话术</span>
这么好的一款兼容机，大家是不是已经心动啦？别再犹豫啦，赶紧下单把它带回家吧！现在下单还有特别的优惠活动哦，错过可就太可惜啦！
</p>
<p>
<span>强调购买方式</span>
购买的方式非常简单哦，大家只需要点击屏幕下方的购买按钮，按照提示填写好收货信息就可以啦。我们会尽快安排发货，让大家尽快收到心仪的电脑。
</p>
<p>
<span>结尾互动</span>
好啦，今天的直播就到这里啦，感谢家人们的陪伴和支持。如果大家还有什么问题或者建议，都可以随时在直播间里留言哦。下次直播我们还会有更多惊喜好物等着大家，再见啦，家人们！
</p>
</div>
<Editor
v-model="form.content"
:init="{
toolbar: false,
quickbars_insert_toolbar: false,
menubar: false,
statusbar: false,
height: 420,
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:13px }',
}" />
</el-col>
</el-row>
<template #footer>
......@@ -161,25 +173,3 @@ const show = ref(false)
</template>
</el-dialog>
</template>
<style lang="scss">
.live-talk-content {
font-size: 12px;
p {
line-height: 22px;
}
.t1 {
padding: 0 5px;
display: inline-block;
background-color: rgba(25, 102, 255, 0.08);
color: rgb(25, 102, 255);
border: 1px solid transparent;
}
span {
padding: 0 5px;
color: rgb(25, 102, 255);
border: 1px solid rgba(25, 102, 255, 0.12);
}
}
</style>
src/modules/live/test/views/Demo.vue
浏览文件 @ c8d750da
......@@ -38,11 +38,11 @@ watchEffect(() => {
// 商品卖点
const hotList = computed(() => {
return detail.value?.live_speech.selling_point.split(';')
return detail.value?.live_speech.selling_point.split(/;|；/)
})
// 营销活动
const actList = computed(() => {
return detail.value?.live_speech.marketing_campaign.split(';')
return detail.value?.live_speech.marketing_campaign.split(/;|；/)
})
// 直播记录数据
......@@ -82,49 +82,7 @@ onMounted(() => {
</div>
<div class="live-col" style="flex: 1">
<h2 class="h2-title">直播话术</h2>
<div class="live-talk-content">
<p class="t1">商品引入</p>
<p>
<span>开场互动</span>
亲爱的家人们，欢迎来到默认主播的直播间呀！今天可是有超棒的宝贝要给大家分享哦，大家有没有对电脑硬件感兴趣的呀？快来跟主播互动一下吧！
</p>
<p>
<span>引出话题</span>
说到电脑，那可是我们生活和工作中不可或缺的一部分呢。大家平时使用电脑的时候有没有遇到过卡顿、运行不流畅的情况呀？今天我带来的这款
1DIY 兼容机，就能完美解决这些问题哦！
</p>
<p>
<span>引出商品</span>
这款 1DIY
兼容机，它可是经过精心设计和配置的呢。它能够满足大家各种不同的使用需求，无论是日常办公、学习，还是玩大型游戏，都能轻松应对。
</p>
<p>
<span>目标人群场景锁定</span>
对于那些对电脑性能有较高要求的朋友们，这款兼容机绝对是你们的最佳选择。比如那些经常需要处理大量数据、进行图形设计的专业人士，或者是喜欢玩高画质游戏的游戏爱好者们，它都能给你们带来超棒的体验哦！
</p>
<p class="t1">商品讲解</p>
<p>
<span>产品卖点讲解</span>
咱们这款兼容机的第一个卖点就是它的强大性能。它配备了最新的处理器和高性能显卡，运行速度那叫一个快，让你在使用过程中感受不到丝毫卡顿。而且内存和硬盘的容量也非常大，能够存储大量的文件和数据。第二个卖点就是它的兼容性非常好，能够兼容各种软件和硬件，不用担心出现不兼容的情况。
</p>
<p>
<span>观众互动</span>
家人们，你们觉得什么样的电脑配置才是最适合自己的呢？快在评论区留言告诉主播哦，主播会根据大家的需求给大家更详细的介绍。
</p>
<p class="t1">引导转化</p>
<p>
<span>催单话术</span>
这么好的一款兼容机，大家是不是已经心动啦？别再犹豫啦，赶紧下单把它带回家吧！现在下单还有特别的优惠活动哦，错过可就太可惜啦！
</p>
<p>
<span>强调购买方式</span>
购买的方式非常简单哦，大家只需要点击屏幕下方的购买按钮，按照提示填写好收货信息就可以啦。我们会尽快安排发货，让大家尽快收到心仪的电脑。
</p>
<p>
<span>结尾互动</span>
好啦，今天的直播就到这里啦，感谢家人们的陪伴和支持。如果大家还有什么问题或者建议，都可以随时在直播间里留言哦。下次直播我们还会有更多惊喜好物等着大家，再见啦，家人们！
</p>
</div>
<div class="live-talk-content" v-html="detail?.live_speech.content"></div>
</div>
<div class="live-col" style="width: 350px">
<div class="live-col-box" v-if="isView">
......@@ -231,22 +189,6 @@ onMounted(() => {
.live-talk-content {
max-height: 660px;
overflow-y: auto;
p {
margin: 10px 0;
line-height: 24px;
}
.t1 {
padding: 0 5px;
display: inline-block;
background-color: rgba(25, 102, 255, 0.08);
color: rgb(25, 102, 255);
border: 1px solid transparent;
}
span {
padding: 0 5px;
color: rgb(25, 102, 255);
border: 1px solid rgba(25, 102, 255, 0.12);
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论