TradeMate Dev
709 lines
18 KiB
Vue
709 lines
18 KiB
Vue
<template>
|
||
<view class="marketing-container">
|
||
<view class="tabs">
|
||
<view
|
||
class="tab-item"
|
||
:class="{ active: activeTab === 'copy' }"
|
||
@click="switchTab('copy')"
|
||
>
|
||
开发信
|
||
</view>
|
||
<view
|
||
class="tab-item"
|
||
:class="{ active: activeTab === 'whatsapp' }"
|
||
@click="switchTab('whatsapp')"
|
||
>
|
||
WhatsApp话术
|
||
</view>
|
||
<view
|
||
class="tab-item"
|
||
:class="{ active: activeTab === 'product' }"
|
||
@click="switchTab('product')"
|
||
>
|
||
产品描述
|
||
</view>
|
||
<view
|
||
class="tab-item"
|
||
:class="{ active: activeTab === 'keywords' }"
|
||
@click="switchTab('keywords')"
|
||
>
|
||
关键词
|
||
</view>
|
||
</view>
|
||
|
||
<view class="stats-section" v-if="stats">
|
||
<view class="stat-card">
|
||
<text class="stat-value">{{ stats.today_copy || 0 }}</text>
|
||
<text class="stat-label">今日复制</text>
|
||
</view>
|
||
<view class="stat-card">
|
||
<text class="stat-value">{{ stats.today_send || 0 }}</text>
|
||
<text class="stat-label">今日发送</text>
|
||
</view>
|
||
<view class="stat-card">
|
||
<text class="stat-value">{{ stats.weekly_total || 0 }}</text>
|
||
<text class="stat-label">本周共</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-section">
|
||
<view class="form-item">
|
||
<text class="form-label">产品名称</text>
|
||
<input class="form-input" v-model="formData.product_name" :placeholder="tabConfig[activeTab].namePlaceholder" />
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="form-label">{{ tabConfig[activeTab].descLabel }}</text>
|
||
<textarea class="form-textarea" v-model="formData.description" :placeholder="tabConfig[activeTab].descPlaceholder" />
|
||
</view>
|
||
<view class="form-item" v-if="tabConfig[activeTab].showTarget">
|
||
<text class="form-label">目标市场</text>
|
||
<picker :range="targetMarkets" @change="onTargetChange">
|
||
<view class="picker-value">{{ formData.target || '选择目标市场' }}</view>
|
||
</picker>
|
||
</view>
|
||
<view class="form-item" v-if="tabConfig[activeTab].showStyle">
|
||
<text class="form-label">文案风格</text>
|
||
<view class="style-options">
|
||
<view
|
||
class="style-option"
|
||
:class="{ active: formData.style === 'professional' }"
|
||
@click="formData.style = 'professional'"
|
||
>
|
||
专业正式
|
||
</view>
|
||
<view
|
||
class="style-option"
|
||
:class="{ active: formData.style === 'friendly' }"
|
||
@click="formData.style = 'friendly'"
|
||
>
|
||
亲切友好
|
||
</view>
|
||
<view
|
||
class="style-option"
|
||
:class="{ active: formData.style === 'persuasive' }"
|
||
@click="formData.style = 'persuasive'"
|
||
>
|
||
促销风格
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button class="generate-btn" @click="generateContent" :disabled="loading">
|
||
{{ loading ? statusMessage || '生成中...' : tabConfig[activeTab].btnText }}
|
||
</button>
|
||
</view>
|
||
|
||
<view class="results-section" v-if="resultsMap[activeTab] && resultsMap[activeTab].length > 0">
|
||
<view class="results-header">
|
||
<text class="results-title">{{ tabConfig[activeTab].resultTitle }}</text>
|
||
<view class="results-actions">
|
||
<text class="refresh-btn" @click="generateContent">换一批</text>
|
||
<text class="export-btn" @click="exportCsv" v-if="activeTab !== 'keywords'">导出CSV</text>
|
||
</view>
|
||
</view>
|
||
<view class="style-tabs" v-if="activeTab !== 'keywords' && availableStyles.length > 1">
|
||
<view
|
||
class="style-tab"
|
||
v-for="s in availableStyles"
|
||
:key="s"
|
||
:class="{ active: selectedStyle === s }"
|
||
@click="selectedStyle = s"
|
||
>
|
||
{{ styleLabels[s] || s }}
|
||
</view>
|
||
</view>
|
||
<view class="results-list" v-if="activeTab !== 'keywords'">
|
||
<view class="result-item" v-for="(item, index) in filteredResults" :key="index">
|
||
<text class="result-text">{{ item.content || item }}</text>
|
||
<view class="result-actions">
|
||
<text class="copy-btn" @click="copyText(item.content || item)">复制</text>
|
||
<text class="send-btn" @click="sendToWhatsapp(item.content || item)" v-if="activeTab !== 'product'">发送</text>
|
||
<text class="competitor-btn" @click="runCompetitorAnalysis" v-if="activeTab === 'copy'">竞品分析</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="keywords-list" v-if="activeTab === 'keywords' && resultsMap.keywords && resultsMap.keywords.length > 0">
|
||
<view class="keyword-tag" v-for="(kw, idx) in resultsMap.keywords" :key="idx" @click="copyText(kw)">
|
||
{{ kw }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="competitor-section" v-if="competitorResult">
|
||
<view class="competitor-header">
|
||
<text class="competitor-title">竞品分析结果</text>
|
||
<text class="competitor-close" @click="competitorResult = null">×</text>
|
||
</view>
|
||
<view class="competitor-content">
|
||
<text class="competitor-text">{{ competitorResult }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="empty" v-if="!loading && (!resultsMap[activeTab] || resultsMap[activeTab].length === 0)">
|
||
<text>{{ tabConfig[activeTab].emptyHint }}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed } from 'vue'
|
||
import { marketingApi, interactionApi } from '@/utils/api.js'
|
||
|
||
const tabConfig = {
|
||
copy: {
|
||
label: '开发信',
|
||
category: 'sales_letter',
|
||
namePlaceholder: '如: 户外折叠椅',
|
||
descLabel: '产品描述',
|
||
descPlaceholder: '描述产品的特点、规格、优势...',
|
||
btnText: '生成开发信',
|
||
resultTitle: '生成的开发信',
|
||
emptyHint: '输入产品信息，点击生成开发信',
|
||
showTarget: true,
|
||
showStyle: true,
|
||
},
|
||
whatsapp: {
|
||
label: 'WhatsApp话术',
|
||
category: 'whatsapp',
|
||
namePlaceholder: '如: 户外折叠椅',
|
||
descLabel: '产品及沟通场景',
|
||
descPlaceholder: '描述产品特点，以及和客户沟通的具体场景...',
|
||
btnText: '生成话术',
|
||
resultTitle: '生成的WhatsApp话术',
|
||
emptyHint: '输入产品信息，点击生成话术',
|
||
showTarget: true,
|
||
showStyle: true,
|
||
},
|
||
product: {
|
||
label: '产品描述',
|
||
category: 'product_description',
|
||
namePlaceholder: '如: 户外折叠椅',
|
||
descLabel: '产品详细规格',
|
||
descPlaceholder: '描述产品的材质、尺寸、承重、颜色、包装等规格...',
|
||
btnText: '生成描述',
|
||
resultTitle: '生成的产品描述',
|
||
emptyHint: '输入产品信息，点击生成描述',
|
||
showTarget: false,
|
||
showStyle: false,
|
||
},
|
||
keywords: {
|
||
label: '关键词',
|
||
category: '',
|
||
namePlaceholder: '如: 户外折叠椅',
|
||
descLabel: '产品卖点',
|
||
descPlaceholder: '描述产品的核心卖点和目标客户群体...',
|
||
btnText: '生成关键词',
|
||
resultTitle: '关键词建议',
|
||
emptyHint: '输入产品信息，点击生成关键词',
|
||
showTarget: false,
|
||
showStyle: false,
|
||
},
|
||
}
|
||
|
||
const activeTab = ref('copy')
|
||
const loading = ref(false)
|
||
const statusMessage = ref('')
|
||
const resultsMap = reactive({ copy: [], whatsapp: [], product: [], keywords: [] })
|
||
const competitorResult = ref(null)
|
||
const stats = ref(null)
|
||
const selectedStyle = ref('professional')
|
||
|
||
const styleLabels = {
|
||
professional: '专业正式',
|
||
friendly: '亲切友好',
|
||
urgent: '紧急催促',
|
||
benefit_focused: '利益导向',
|
||
storytelling: '故事叙述',
|
||
}
|
||
|
||
const availableStyles = computed(() => {
|
||
const items = resultsMap[activeTab.value]
|
||
if (!items || items.length === 0 || typeof items[0] === 'string') return []
|
||
const styles = [...new Set(items.map(i => i.style).filter(Boolean))]
|
||
return styles
|
||
})
|
||
|
||
const filteredResults = computed(() => {
|
||
const items = resultsMap[activeTab.value]
|
||
if (!items || items.length === 0) return []
|
||
if (typeof items[0] === 'string') return items
|
||
const style = selectedStyle.value
|
||
const filtered = items.filter(i => i.style === style)
|
||
return filtered.length > 0 ? filtered : items
|
||
})
|
||
|
||
const formData = ref({
|
||
product_name: '',
|
||
description: '',
|
||
target: 'US importers',
|
||
style: 'professional',
|
||
})
|
||
|
||
const targetMarkets = ref([
|
||
'US importers',
|
||
'European buyers',
|
||
'Southeast Asia',
|
||
'Latin America',
|
||
'Middle East',
|
||
])
|
||
|
||
const onTargetChange = (e) => {
|
||
formData.value.target = targetMarkets.value[e.detail.value]
|
||
}
|
||
|
||
const switchTab = (tab) => {
|
||
activeTab.value = tab
|
||
loadStats()
|
||
}
|
||
|
||
const loadStats = async () => {
|
||
try {
|
||
const res = await interactionApi.getMarketingEffectStats()
|
||
stats.value = res
|
||
} catch (err) {
|
||
console.error('加载统计失败', err)
|
||
}
|
||
}
|
||
|
||
const generateContent = async () => {
|
||
if (!formData.value.product_name) {
|
||
uni.showToast({ title: '请输入产品名称', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
loading.value = true
|
||
statusMessage.value = 'AI 准备中...'
|
||
const tab = activeTab.value
|
||
|
||
try {
|
||
if (tab === 'keywords') {
|
||
statusMessage.value = '正在提取关键词...'
|
||
const res = await marketingApi.getKeywords(
|
||
formData.value.product_name,
|
||
formData.value.description,
|
||
''
|
||
)
|
||
resultsMap[tab] = res.keywords || []
|
||
} else {
|
||
const cfg = tabConfig[tab]
|
||
statusMessage.value = 'AI 正在生成文案（约15-30秒）...'
|
||
setTimeout(() => {
|
||
if (loading.value) statusMessage.value = 'AI 处理中，请稍候...'
|
||
}, 8000)
|
||
setTimeout(() => {
|
||
if (loading.value) statusMessage.value = '即将完成...'
|
||
}, 20000)
|
||
const res = await marketingApi.generate(
|
||
formData.value.product_name,
|
||
formData.value.description,
|
||
cfg.category,
|
||
formData.value.target,
|
||
formData.value.style
|
||
)
|
||
resultsMap[tab] = res.results || []
|
||
if (res.results && res.results.length > 0) {
|
||
selectedStyle.value = res.results[0].style || formData.value.style
|
||
}
|
||
loadStats()
|
||
}
|
||
} catch (err) {
|
||
uni.showToast({ title: err.message || '生成失败', icon: 'none' })
|
||
} finally {
|
||
loading.value = false
|
||
statusMessage.value = ''
|
||
}
|
||
}
|
||
|
||
const copyText = (text) => {
|
||
if (!text) {
|
||
uni.showToast({ title: '内容为空', icon: 'none' })
|
||
return
|
||
}
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
interactionApi.trackMarketingEffect({ action: 'copy', content_preview: text.slice(0, 100) }).catch(() => {})
|
||
loadStats()
|
||
uni.showToast({ title: '已复制', icon: 'success' })
|
||
}).catch(() => fallbackCopy(text))
|
||
} else {
|
||
fallbackCopy(text)
|
||
}
|
||
}
|
||
|
||
const fallbackCopy = (text) => {
|
||
const ta = document.createElement('textarea')
|
||
ta.value = text
|
||
ta.style.position = 'fixed'
|
||
ta.style.opacity = '0'
|
||
document.body.appendChild(ta)
|
||
ta.select()
|
||
try {
|
||
document.execCommand('copy')
|
||
interactionApi.trackMarketingEffect({ action: 'copy', content_preview: text.slice(0, 100) }).catch(() => {})
|
||
loadStats()
|
||
uni.showToast({ title: '已复制', icon: 'success' })
|
||
} catch {
|
||
uni.showToast({ title: '复制失败，请手动选择复制', icon: 'none' })
|
||
}
|
||
document.body.removeChild(ta)
|
||
}
|
||
|
||
const exportCsv = () => {
|
||
const items = resultsMap[activeTab.value]
|
||
if (!items || items.length === 0) return
|
||
let csv = 'Content\n'
|
||
items.forEach(r => {
|
||
const text = typeof r === 'string' ? r : (r.content || '')
|
||
csv += `"${text.replace(/"/g, '""')}"\n`
|
||
})
|
||
const blob = new Blob([csv], { type: 'text/csv' })
|
||
const url = URL.createObjectURL(blob)
|
||
uni.downloadFile({
|
||
url,
|
||
success: (res) => {
|
||
uni.saveFile({ tempFilePath: res.tempFilePath })
|
||
uni.showToast({ title: '导出成功', icon: 'success' })
|
||
},
|
||
fail: () => { uni.showToast({ title: '导出失败', icon: 'none' }) },
|
||
})
|
||
}
|
||
|
||
const sendToWhatsapp = (text) => {
|
||
interactionApi.trackMarketingEffect({ action: 'send', content_preview: text.slice(0, 100) }).catch(() => {})
|
||
loadStats()
|
||
uni.showToast({ title: '请先选择客户', icon: 'none' })
|
||
}
|
||
|
||
const runCompetitorAnalysis = async () => {
|
||
if (!formData.value.product_name) {
|
||
uni.showToast({ title: '请先输入产品名称', icon: 'none' })
|
||
return
|
||
}
|
||
try {
|
||
uni.showLoading({ title: '分析中...' })
|
||
const res = await marketingApi.competitorAnalysis(
|
||
formData.value.product_name,
|
||
formData.value.description,
|
||
'',
|
||
formData.value.target
|
||
)
|
||
uni.hideLoading()
|
||
const analysis = res.analysis
|
||
if (!analysis || Object.keys(analysis).length === 0) {
|
||
competitorResult.value = '暂无分析结果，请确认产品信息后重试'
|
||
return
|
||
}
|
||
const lines = []
|
||
if (analysis.price_range) lines.push(`💰 价格范围：${analysis.price_range}`)
|
||
if (analysis.market_trends) lines.push(`📈 市场趋势：${analysis.market_trends}`)
|
||
if (analysis.key_selling_points && analysis.key_selling_points.length) {
|
||
lines.push(`\n🏆 核心卖点：\n ${analysis.key_selling_points.map(p => `• ${p}`).join('\n ')}`)
|
||
}
|
||
if (analysis.common_keywords && analysis.common_keywords.length) {
|
||
lines.push(`\n🔑 常见关键词：\n ${analysis.common_keywords.map(k => `• ${k}`).join('\n ')}`)
|
||
}
|
||
if (analysis.suggestions && analysis.suggestions.length) {
|
||
lines.push(`\n💡 建议：\n ${analysis.suggestions.map(s => `• ${s}`).join('\n ')}`)
|
||
}
|
||
competitorResult.value = lines.length ? lines.join('\n') : '暂无分析结果'
|
||
} catch (err) {
|
||
uni.hideLoading()
|
||
uni.showToast({ title: err.message || '分析失败', icon: 'none' })
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.marketing-container {
|
||
min-height: 100vh;
|
||
background: #f5f5f5;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 20rpx;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
min-width: 160rpx;
|
||
text-align: center;
|
||
padding: 24rpx 16rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tab-item.active {
|
||
color: #1890ff;
|
||
border-bottom: 4rpx solid #1890ff;
|
||
}
|
||
|
||
.stats-section {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.stat-card {
|
||
flex: 1;
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
color: #1890ff;
|
||
display: block;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.form-section {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
display: block;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
height: 72rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
padding: 0 20rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.form-textarea {
|
||
width: 100%;
|
||
min-height: 160rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
padding: 20rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.picker-value {
|
||
height: 72rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
padding: 0 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.style-options {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.style-option {
|
||
flex: 1;
|
||
padding: 16rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.style-option.active {
|
||
background: #e6f7ff;
|
||
color: #1890ff;
|
||
border: 2rpx solid #1890ff;
|
||
}
|
||
|
||
.style-tabs {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
margin-bottom: 20rpx;
|
||
overflow-x: auto;
|
||
padding-bottom: 4rpx;
|
||
}
|
||
|
||
.style-tab {
|
||
flex-shrink: 0;
|
||
padding: 12rpx 24rpx;
|
||
background: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.style-tab.active {
|
||
background: #e6f7ff;
|
||
color: #1890ff;
|
||
border: 2rpx solid #1890ff;
|
||
}
|
||
|
||
.generate-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: #1890ff;
|
||
color: #fff;
|
||
border-radius: 12rpx;
|
||
font-size: 30rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.results-section {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.results-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.results-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.results-actions {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.refresh-btn {
|
||
font-size: 24rpx;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.export-btn {
|
||
font-size: 24rpx;
|
||
color: #52c41a;
|
||
}
|
||
|
||
.results-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.result-item {
|
||
padding: 20rpx;
|
||
background: #f9f9f9;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.result-text {
|
||
font-size: 26rpx;
|
||
line-height: 1.6;
|
||
display: block;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.result-actions {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.copy-btn, .send-btn, .competitor-btn {
|
||
font-size: 24rpx;
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
.copy-btn {
|
||
background: #e6f7ff;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.send-btn {
|
||
background: #07c160;
|
||
color: #fff;
|
||
}
|
||
|
||
.competitor-btn {
|
||
background: #f9f0ff;
|
||
color: #722ed1;
|
||
}
|
||
|
||
.keywords-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.keyword-tag {
|
||
padding: 12rpx 24rpx;
|
||
background: #e6f7ff;
|
||
color: #1890ff;
|
||
border-radius: 20rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.competitor-section {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.competitor-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.competitor-title {
|
||
font-size: 26rpx;
|
||
color: #722ed1;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.competitor-close {
|
||
font-size: 36rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.competitor-content {
|
||
padding: 16rpx;
|
||
background: #f9f0ff;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.competitor-text {
|
||
font-size: 24rpx;
|
||
line-height: 1.5;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.empty {
|
||
text-align: center;
|
||
color: #999;
|
||
padding: 100rpx;
|
||
}
|
||
</style>
|