|
|
<script setup lang="ts">
|
|
|
import { useRouter } from "vue-router";
|
|
|
import { reactive, ref } from "vue";
|
|
|
import cheackImg from "@/assets/svg/live/check.svg";
|
|
|
import starImg from "@/assets/svg/live/star.svg";
|
|
|
import plusImg from "@/assets/svg/live/plus.svg";
|
|
|
import emptyImg from "@/assets/live/empty.png";
|
|
|
import tipsImg from "@/assets/svg/live/tips.svg";
|
|
|
import { FormInstance } from "element-plus/es/components";
|
|
|
import { getSalespitch } from "@/api/chat";
|
|
|
import { Delete } from "@element-plus/icons-vue";
|
|
|
const ruleFormRef = ref<FormInstance>();
|
|
|
const salespitchList = ref([]);
|
|
|
import { message } from "@/utils/message";
|
|
|
const router = useRouter();
|
|
|
const formData = reactive({
|
|
|
productName: "",
|
|
|
detail: "",
|
|
|
script: "",
|
|
|
specifications: [
|
|
|
{
|
|
|
size: "",
|
|
|
//价格
|
|
|
price: ""
|
|
|
}
|
|
|
]
|
|
|
});
|
|
|
const loading = ref(false);
|
|
|
const rules = {
|
|
|
script: [{ required: true, message: "请输入", trigger: "change" }]
|
|
|
};
|
|
|
|
|
|
const handlePriceInput = item => {
|
|
|
item.price = item.price
|
|
|
.replace(/[^\d.]/g, "")
|
|
|
.replace(/^\./g, "")
|
|
|
.replace(/(\.\d*)\./g, "$1")
|
|
|
.replace(/(\d+\.\d{2}).*/g, "$1");
|
|
|
};
|
|
|
const buttonText = ref("生成AI话术");
|
|
|
const addNorms = () => {
|
|
|
formData.specifications.push({
|
|
|
size: "",
|
|
|
price: ""
|
|
|
});
|
|
|
};
|
|
|
const generateScript = async () => {
|
|
|
loading.value = true;
|
|
|
buttonText.value = "正在生成";
|
|
|
const res = await getSalespitch({
|
|
|
productName: formData.productName,
|
|
|
specifications: formData.specifications,
|
|
|
detail: formData.detail
|
|
|
});
|
|
|
loading.value = false;
|
|
|
buttonText.value = "生成AI话术";
|
|
|
if (res.code === 200) {
|
|
|
salespitchList.value = res.data;
|
|
|
// await window.electronAPI.clearSystemMessages();
|
|
|
const result = await window.electronAPI.bulkInsertSystemMessages(res.data);
|
|
|
if (result.success) {
|
|
|
message("生成成功！", { type: "success", showClose: true });
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="GoodsManage">
|
|
|
<div class="ai-script">
|
|
|
<div class="script-title">
|
|
|
<starImg />
|
|
|
<span class="name">AI直播讲品话术</span>
|
|
|
<cheackImg />
|
|
|
<span class="desc">生成/修改内容将自动保存</span>
|
|
|
</div>
|
|
|
<div v-if="salespitchList.length === 0" class="script-empty">
|
|
|
<img :src="emptyImg" alt="" />
|
|
|
<span>暂无AI讲品话术~</span>
|
|
|
</div>
|
|
|
<div v-else class="script-content">
|
|
|
<div class="tip">
|
|
|
<tipsImg />
|
|
|
<span>以下内容由AI自动生成</span>
|
|
|
</div>
|
|
|
<div
|
|
|
v-for="(item, index) in salespitchList"
|
|
|
:key="index"
|
|
|
class="speech-item"
|
|
|
>
|
|
|
{{ item }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main-content">
|
|
|
<el-form
|
|
|
ref="ruleFormRef"
|
|
|
:model="formData"
|
|
|
:rules="rules"
|
|
|
label-position="top"
|
|
|
>
|
|
|
<el-form-item label="商品名称" prop="productName">
|
|
|
<el-input size="large" v-model="formData.productName" />
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="商品规格" prop="specifications">
|
|
|
<div
|
|
|
class="norms-list"
|
|
|
v-for="(item, index) in formData.specifications"
|
|
|
:key="index"
|
|
|
>
|
|
|
<el-input
|
|
|
class="norms-item"
|
|
|
size="large"
|
|
|
v-model="item.size"
|
|
|
placeholder="请输入商品规格"
|
|
|
/>
|
|
|
<el-input
|
|
|
class="norms-item"
|
|
|
size="large"
|
|
|
v-model="item.price"
|
|
|
placeholder="请输入商品价格"
|
|
|
@input="handlePriceInput(item)"
|
|
|
/>
|
|
|
<el-icon
|
|
|
v-show="index === formData.specifications.length - 1"
|
|
|
@click="formData.specifications.splice(index, 1)"
|
|
|
role="img"
|
|
|
style="
|
|
|
font-size: 18px;
|
|
|
color: rgba(234, 42, 42, 1);
|
|
|
cursor: pointer;
|
|
|
"
|
|
|
><Delete
|
|
|
/></el-icon>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
<div class="add-norms-btn" @click="addNorms">
|
|
|
<plusImg />
|
|
|
<span>添加规格</span>
|
|
|
</div>
|
|
|
<el-form-item label="商品详情" prop="detail">
|
|
|
<el-input
|
|
|
:rows="8"
|
|
|
type="textarea"
|
|
|
placeholder="请输入"
|
|
|
v-model="formData.detail"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<!-- <el-form-item label="AI生成直播讲品话术" prop="script">
|
|
|
<el-input
|
|
|
:rows="8"
|
|
|
type="textarea"
|
|
|
placeholder="请输入根据商品信息需要AI主要主要讲解的内容，如重点突出商品的特殊工艺和无污染，适应各种场景"
|
|
|
v-model="formData.script"
|
|
|
/>
|
|
|
</el-form-item> -->
|
|
|
<div class="tips">
|
|
|
<tipsImg />
|
|
|
<span
|
|
|
>AI商品讲解话术由大模型基于上述内容自动生成，还能结合直播时长和商品特点，生成适配的A!数字人口播内容。</span
|
|
|
>
|
|
|
</div>
|
|
|
<div class="footer-btns">
|
|
|
<el-button class="reset" @click="ruleFormRef.resetFields()"
|
|
|
>重置</el-button
|
|
|
>
|
|
|
<el-button :loading="loading" type="primary" @click="generateScript">
|
|
|
{{ buttonText }}</el-button
|
|
|
>
|
|
|
</div>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<style lang="scss" scoped>
|
|
|
.GoodsManage {
|
|
|
margin-left: 16px;
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
flex-direction: row-reverse;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0px 4px 8px 0px rgba(46, 128, 250, 0.1);
|
|
|
|
|
|
.ai-script {
|
|
|
width: 453px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
border-left: 1px solid rgba(46, 128, 250, 0.1);
|
|
|
.script-title {
|
|
|
height: 54px;
|
|
|
border-bottom: 1px solid rgba(46, 128, 250, 0.1);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding-left: 16px;
|
|
|
.name {
|
|
|
font-weight: bold;
|
|
|
font-size: 16px;
|
|
|
color: #1d2129;
|
|
|
margin-left: 8px;
|
|
|
margin-right: 12px;
|
|
|
}
|
|
|
.desc {
|
|
|
font-weight: 500;
|
|
|
font-size: 14px;
|
|
|
color: #86909c;
|
|
|
margin-left: 4px;
|
|
|
}
|
|
|
}
|
|
|
.script-content {
|
|
|
padding: 16px;
|
|
|
overflow: auto;
|
|
|
height: calc(100vh - 210px);
|
|
|
.tip {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 8px;
|
|
|
span {
|
|
|
font-weight: 500;
|
|
|
font-size: 14px;
|
|
|
color: #4e5969;
|
|
|
margin-left: 8px;
|
|
|
}
|
|
|
}
|
|
|
.speech-item {
|
|
|
font-weight: 500;
|
|
|
font-size: 14px;
|
|
|
color: #1d2129;
|
|
|
background: #f3f4fc;
|
|
|
border-radius: 4px 4px 4px 4px;
|
|
|
padding: 8px 12px;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
}
|
|
|
.script-empty {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
flex: 1;
|
|
|
font-weight: 500;
|
|
|
font-size: 16px;
|
|
|
color: #86909c;
|
|
|
img {
|
|
|
width: 222px;
|
|
|
height: 138px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.main-content {
|
|
|
flex: 1;
|
|
|
padding: 16px;
|
|
|
position: relative;
|
|
|
.norms-list {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
align-items: center;
|
|
|
margin-bottom: 12px;
|
|
|
.norms-item {
|
|
|
width: calc(50% - 24px);
|
|
|
margin-right: 16px;
|
|
|
}
|
|
|
}
|
|
|
.add-norms-btn {
|
|
|
margin: 12px 0 16px 0;
|
|
|
display: flex;
|
|
|
width: 96px;
|
|
|
height: 32px;
|
|
|
border-radius: 4px 4px 4px 4px;
|
|
|
border: 1px solid #2e80fa;
|
|
|
cursor: pointer;
|
|
|
align-items: center;
|
|
|
font-size: 14px;
|
|
|
color: #2e80fa;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
.tips {
|
|
|
display: flex;
|
|
|
height: 32px;
|
|
|
line-height: 32px;
|
|
|
background: #fff7e8;
|
|
|
font-weight: 400;
|
|
|
font-size: 14px;
|
|
|
color: #1d2129;
|
|
|
padding-left: 12px;
|
|
|
align-items: center;
|
|
|
width: 739px;
|
|
|
span {
|
|
|
margin-left: 8px;
|
|
|
}
|
|
|
}
|
|
|
.footer-btns {
|
|
|
position: absolute;
|
|
|
bottom: 32px;
|
|
|
right: 16px;
|
|
|
.reset {
|
|
|
width: 94px;
|
|
|
height: 32px;
|
|
|
border-radius: 4px 4px 4px 4px;
|
|
|
border: 1px solid #2e80fa;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|