Initial commit: TradeMate 外贸小助手 MVP
项目结构: - backend/ Python FastAPI 后端 - uni-app/ uni-app跨端前端 - docs/ 设计文档 - docker-compose.yml Docker编排 - nginx/scripts/systemd 运维配置 已完成功能: - 用户认证 (JWT) - 智能翻译 + 回复建议 - 营销素材生成 - 客户管理 + 沉默检测 - 报价单管理 - 产品库管理 - 汇率换算 - 推送通知 (uni-push) - WhatsApp Webhook框架 - Celery定时任务
This commit is contained in:
TradeMate Dev
@@ -0,0 +1,591 @@
|
||||
<template>
|
||||
<view class="customers-container">
|
||||
<view class="filter-tabs">
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: filter === 'all' }"
|
||||
@click="filter = 'all'; loadCustomers()"
|
||||
>
|
||||
全部
|
||||
</view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: filter === 'lead' }"
|
||||
@click="filter = 'lead'; loadCustomers()"
|
||||
>
|
||||
潜在
|
||||
</view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: filter === 'negotiating' }"
|
||||
@click="filter = 'negotiating'; loadCustomers()"
|
||||
>
|
||||
谈判中
|
||||
</view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: filter === 'customer' }"
|
||||
@click="filter = 'customer'; loadCustomers()"
|
||||
>
|
||||
已成交
|
||||
</view>
|
||||
<view
|
||||
class="tab-item warning"
|
||||
:class="{ active: filter === 'silent' }"
|
||||
@click="filter = 'silent'; loadSilent()"
|
||||
>
|
||||
沉默
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="customer-list" v-if="customers.length > 0">
|
||||
<view class="customer-item" v-for="item in customers" :key="item.id">
|
||||
<view class="customer-info">
|
||||
<view class="customer-header">
|
||||
<text class="customer-name">{{ item.name }}</text>
|
||||
<text class="customer-status" :class="item.status">{{ getStatusText(item.status) }}</text>
|
||||
</view>
|
||||
<view class="customer-detail">
|
||||
<text class="detail-item" v-if="item.company">{{ item.company }}</text>
|
||||
<text class="detail-item" v-if="item.country">{{ item.country }}</text>
|
||||
<text class="detail-item" v-if="item.phone">{{ item.phone }}</text>
|
||||
</view>
|
||||
<view class="customer-contact" v-if="item.last_contact_at">
|
||||
<text class="contact-time">最后联系: {{ formatTime(item.last_contact_at) }}</text>
|
||||
<text class="silence-days" v-if="item.silence_days > 0">沉默 {{ item.silence_days }} 天</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="customer-actions">
|
||||
<view class="action-icon" @click="showCustomerDetail(item)">详</view>
|
||||
<view class="action-icon" @click="editCustomer(item)">编</view>
|
||||
<view class="action-icon delete" @click="deleteCustomer(item.id)">删</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="empty" v-else>
|
||||
<text>暂无客户数据</text>
|
||||
</view>
|
||||
|
||||
<view class="add-btn" @click="showAddModal = true">
|
||||
<text class="add-icon">+</text>
|
||||
</view>
|
||||
|
||||
<view class="modal" v-if="showAddModal || showEditModal" @click="closeModal">
|
||||
<view class="modal-content" @click.stop>
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">{{ showEditModal ? '编辑客户' : '新增客户' }}</text>
|
||||
<text class="modal-close" @click="closeModal">×</text>
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<view class="form-item">
|
||||
<text class="form-label">姓名 *</text>
|
||||
<input class="form-input" v-model="formData.name" placeholder="客户姓名" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">公司</text>
|
||||
<input class="form-input" v-model="formData.company" placeholder="公司名称" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">国家</text>
|
||||
<input class="form-input" v-model="formData.country" placeholder="国家" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">电话</text>
|
||||
<input class="form-input" v-model="formData.phone" placeholder="电话" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">WhatsApp</text>
|
||||
<input class="form-input" v-model="formData.whatsapp_id" placeholder="WhatsApp ID" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">邮箱</text>
|
||||
<input class="form-input" v-model="formData.email" placeholder="邮箱" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">状态</text>
|
||||
<picker :range="statusOptions" @change="onStatusChange">
|
||||
<view class="picker-value">{{ getStatusText(formData.status) || '选择状态' }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<button class="cancel-btn" @click="closeModal">取消</button>
|
||||
<button class="submit-btn" @click="submitCustomer">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-modal" v-if="showDetailModal" @click="showDetailModal = false">
|
||||
<view class="detail-content" @click.stop>
|
||||
<view class="detail-header">
|
||||
<text class="detail-name">{{ currentCustomer.name }}</text>
|
||||
<text class="detail-status" :class="currentCustomer.status">{{ getStatusText(currentCustomer.status) }}</text>
|
||||
</view>
|
||||
<view class="detail-body">
|
||||
<view class="detail-row" v-if="currentCustomer.company">
|
||||
<text class="detail-label">公司:</text>
|
||||
<text class="detail-value">{{ currentCustomer.company }}</text>
|
||||
</view>
|
||||
<view class="detail-row" v-if="currentCustomer.country">
|
||||
<text class="detail-label">国家:</text>
|
||||
<text class="detail-value">{{ currentCustomer.country }}</text>
|
||||
</view>
|
||||
<view class="detail-row" v-if="currentCustomer.phone">
|
||||
<text class="detail-label">电话:</text>
|
||||
<text class="detail-value">{{ currentCustomer.phone }}</text>
|
||||
</view>
|
||||
<view class="detail-row" v-if="currentCustomer.whatsapp_id">
|
||||
<text class="detail-label">WhatsApp:</text>
|
||||
<text class="detail-value">{{ currentCustomer.whatsapp_id }}</text>
|
||||
</view>
|
||||
<view class="detail-row" v-if="currentCustomer.email">
|
||||
<text class="detail-label">邮箱:</text>
|
||||
<text class="detail-value">{{ currentCustomer.email }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="detail-footer">
|
||||
<button class="close-btn" @click="showDetailModal = false">关闭</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onShow } from 'vue'
|
||||
import { customerApi } from '@/utils/api.js'
|
||||
|
||||
const filter = ref('all')
|
||||
const customers = ref([])
|
||||
const showAddModal = ref(false)
|
||||
const showEditModal = ref(false)
|
||||
const showDetailModal = ref(false)
|
||||
const currentCustomer = ref(null)
|
||||
const formData = ref({
|
||||
name: '',
|
||||
company: '',
|
||||
country: '',
|
||||
phone: '',
|
||||
whatsapp_id: '',
|
||||
email: '',
|
||||
status: 'lead',
|
||||
})
|
||||
|
||||
const statusOptions = ['lead', 'negotiating', 'customer', 'lost']
|
||||
|
||||
onShow(() => {
|
||||
loadCustomers()
|
||||
})
|
||||
|
||||
const loadCustomers = async () => {
|
||||
try {
|
||||
const res = await customerApi.list(1, 20, filter.value === 'all' ? undefined : filter.value)
|
||||
customers.value = res.items || []
|
||||
} catch (err) {
|
||||
uni.showToast({ title: err.message || '加载失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
const loadSilent = async () => {
|
||||
try {
|
||||
const res = await customerApi.getSilent(7)
|
||||
customers.value = res.customers || []
|
||||
} catch (err) {
|
||||
uni.showToast({ title: err.message || '加载失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusText = (status) => {
|
||||
const map = { lead: '潜在', negotiating: '谈判中', customer: '已成交', lost: '已丢失' }
|
||||
return map[status] || status
|
||||
}
|
||||
|
||||
const formatTime = (time) => {
|
||||
if (!time) return ''
|
||||
return time.split('T')[0]
|
||||
}
|
||||
|
||||
const showCustomerDetail = (item) => {
|
||||
currentCustomer.value = item
|
||||
showDetailModal.value = true
|
||||
}
|
||||
|
||||
const editCustomer = (item) => {
|
||||
formData.value = { ...item }
|
||||
showEditModal.value = true
|
||||
}
|
||||
|
||||
const closeModal = () => {
|
||||
showAddModal.value = false
|
||||
showEditModal.value = false
|
||||
formData.value = {
|
||||
name: '',
|
||||
company: '',
|
||||
country: '',
|
||||
phone: '',
|
||||
whatsapp_id: '',
|
||||
email: '',
|
||||
status: 'lead',
|
||||
}
|
||||
}
|
||||
|
||||
const onStatusChange = (e) => {
|
||||
formData.value.status = statusOptions[e.detail.value]
|
||||
}
|
||||
|
||||
const submitCustomer = async () => {
|
||||
if (!formData.value.name) {
|
||||
uni.showToast({ title: '请填写姓名', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
if (showEditModal.value) {
|
||||
await customerApi.update(formData.value.id, formData.value)
|
||||
uni.showToast({ title: '更新成功', icon: 'success' })
|
||||
} else {
|
||||
await customerApi.create(formData.value)
|
||||
uni.showToast({ title: '创建成功', icon: 'success' })
|
||||
}
|
||||
closeModal()
|
||||
loadCustomers()
|
||||
} catch (err) {
|
||||
uni.showToast({ title: err.message || '操作失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
const deleteCustomer = async (id) => {
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: '确定要删除该客户吗？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
try {
|
||||
await customerApi.delete(id)
|
||||
uni.showToast({ title: '删除成功', icon: 'success' })
|
||||
loadCustomers()
|
||||
} catch (err) {
|
||||
uni.showToast({ title: err.message || '删除失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.customers-container {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 24rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #1890ff;
|
||||
background: #e6f7ff;
|
||||
}
|
||||
|
||||
.tab-item.warning {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.customer-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.customer-item {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.customer-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.customer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.customer-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.customer-status {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.customer-status.lead { background: #fff7e6; color: #fa8c16; }
|
||||
.customer-status.negotiating { background: #e6f7ff; color: #1890ff; }
|
||||
.customer-status.customer { background: #f6ffed; color: #52c41a; }
|
||||
.customer-status.lost { background: #fff1f0; color: #ff4d4f; }
|
||||
|
||||
.customer-detail {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
background: #f5f5f5;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.customer-contact {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.silence-days {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.customer-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.action-icon.delete {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 100rpx;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
position: fixed;
|
||||
right: 40rpx;
|
||||
bottom: 40rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: #1890ff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.4);
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
font-size: 60rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 80%;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
font-size: 44rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 30rpx;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.picker-value {
|
||||
height: 72rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
padding: 30rpx;
|
||||
border-top: 2rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.cancel-btn, .submit-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background: #1890ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detail-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
width: 80%;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.detail-name {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.detail-status {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.detail-body {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
width: 160rpx;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: #1890ff;
|
||||
color: #fff;
|
||||
border-radius: 8rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user