feat(subscription): 添加订阅功能并优化过期处理逻辑

- 扩展 trialExpiredType 类型,新增 'subscribe' 状态以支持主动订阅场景
- 新增 openSubscriptionDialog 方法,用于处理 VIP 状态点击事件
- 优化 VIP 状态卡片 UI,添加悬停与点击效果,提升交互体验
- 调整过期状态样式,保持水平布局并移除冗余按钮样式
- 在 Rakuten 组件中引入请求中断机制,提升任务控制灵活性- 更新 TrialExpiredDialog 组件,支持订阅类型提示与微信复制反馈- 修复部分 API 调用未传递 signal 参数的问题,增强请求管理能力
- 切换 Ruoyi 服务地址至生产环境配置,确保接口通信正常
- 移除部分无用代码与样式,精简组件结构
This commit is contained in:
2025-10-21 11:33:41 +08:00
parent 281ae6a846
commit 1be22664c4
9 changed files with 83 additions and 81 deletions

View File

@@ -84,7 +84,7 @@ const showSettingsDialog = ref(false)
// 试用期过期对话框
const showTrialExpiredDialog = ref(false)
const trialExpiredType = ref<'device' | 'account' | 'both'>('device')
const trialExpiredType = ref<'device' | 'account' | 'both' | 'subscribe'>('device')
// 菜单配置 - 复刻ERP客户端格式
const menuConfig = [
@@ -310,7 +310,7 @@ async function refreshVipStatus() {
}
// 判断过期类型
function checkExpiredType(): 'device' | 'account' | 'both' {
function checkExpiredType(): 'device' | 'account' | 'both' | 'subscribe' {
const accountExpired = vipExpireTime.value && new Date() > vipExpireTime.value
const deviceExpired = deviceTrialExpired.value
@@ -320,6 +320,17 @@ function checkExpiredType(): 'device' | 'account' | 'both' {
return 'account' // 默认
}
// 打开订阅对话框
function openSubscriptionDialog() {
// 如果VIP有效显示订阅/续费提示;如果已过期,显示过期提示
if (vipStatus.value.isVip) {
trialExpiredType.value = 'subscribe'
} else {
trialExpiredType.value = checkExpiredType()
}
showTrialExpiredDialog.value = true
}
// 提供给子组件使用
provide('refreshVipStatus', refreshVipStatus)
provide('checkExpiredType', checkExpiredType)
@@ -519,22 +530,18 @@ onUnmounted(() => {
</ul>
<!-- VIP状态卡片 -->
<div v-if="isAuthenticated" class="vip-status-card" :class="'vip-' + vipStatus.status">
<div v-if="isAuthenticated" class="vip-status-card" :class="'vip-' + vipStatus.status" @click="openSubscriptionDialog">
<div class="vip-info">
<div class="vip-status-text">
<template v-if="vipStatus.isVip">
<span v-if="vipStatus.status === 'warning'">即将到期</span>
<span v-else>订阅中</span>
</template>
<template v-else>
<span>已过期</span>
</template>
</div>
<div class="vip-expire-date" v-if="vipExpireTime">
有效期至{{ vipExpireTime ? new Date(vipExpireTime).toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' }) : '-' }}
</div>
</div>
</div>
</div>
@@ -924,6 +931,17 @@ onUnmounted(() => {
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.15);
transition: all 0.3s ease;
position: relative;
cursor: pointer;
user-select: none;
}
.vip-status-card:hover {
box-shadow: 0 3px 10px rgba(255, 215, 0, 0.25);
transform: translateY(-1px);
}
.vip-status-card:active {
transform: translateY(0);
}
/* 正常状态和警告状态 - 统一温暖金色渐变 */
@@ -934,15 +952,10 @@ onUnmounted(() => {
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.15);
}
/* 过期状态 - 灰色,垂直布局 */
/* 过期状态 - 灰色,保持水平布局 */
.vip-status-card.vip-expired {
background: linear-gradient(135deg, #FAFAFA 0%, #E8E8E8 100%);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
flex-direction: column;
justify-content: space-between;
align-items: stretch;
padding: 10px;
gap: 8px;
}
.vip-info {
@@ -970,33 +983,6 @@ onUnmounted(() => {
opacity: 0.9;
}
/* 右侧徽章按钮 */
.vip-badge {
padding: 5px 10px;
border-radius: 5px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
color: white;
box-shadow: 0 2px 6px rgba(74, 144, 226, 0.3);
}
/* 过期状态续费按钮 - 置底 */
.vip-renew-btn {
padding: 7px 0;
text-align: center;
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
color: white;
border-radius: 5px;
font-size: 11px;
font-weight: 600;
width: 100%;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(74, 144, 226, 0.3);
}
.vip-status-card.vip-expired .vip-info {
align-items: flex-start;
}

View File

@@ -2,9 +2,9 @@ export type HttpMethod = 'GET' | 'POST' | 'DELETE';
export const CONFIG = {
CLIENT_BASE: 'http://localhost:8081',
//RUOYI_BASE: 'http://8.138.23.49:8085',
RUOYI_BASE: 'http://192.168.1.89:8085',
SSE_URL: 'http://192.168.1.89:8085/monitor/account/events'
RUOYI_BASE: 'http://8.138.23.49:8085',
//RUOYI_BASE: 'http://192.168.1.89:8085',
SSE_URL: 'http://8.138.23.49:8085/monitor/account/events'
} as const;
function resolveBase(path: string): string {

View File

@@ -1,18 +1,18 @@
import { http } from './http'
export const rakutenApi = {
getProducts(params: { file?: File; shopName?: string; batchId?: string }) {
getProducts(params: { file?: File; shopName?: string; batchId?: string }, signal?: AbortSignal) {
const formData = new FormData()
if (params.file) formData.append('file', params.file)
if (params.batchId) formData.append('batchId', params.batchId)
if (params.shopName) formData.append('shopName', params.shopName)
return http.upload('/api/rakuten/products', formData)
return http.upload('/api/rakuten/products', formData, signal)
},
search1688(imageUrl: string, sessionId?: string) {
search1688(imageUrl: string, sessionId?: string, signal?: AbortSignal) {
const payload: Record<string, unknown> = { imageUrl }
if (sessionId) payload.sessionId = sessionId
return http.post('/api/rakuten/search1688', payload)
return http.post('/api/rakuten/search1688', payload, signal)
},
getLatestProducts() {

View File

@@ -32,9 +32,9 @@ const dragActive = ref(false)
// 试用期过期弹框
const showTrialExpiredDialog = ref(false)
const trialExpiredType = ref<'device' | 'account' | 'both'>('account')
const trialExpiredType = ref<'device' | 'account' | 'both' | 'subscribe'>('account')
const checkExpiredType = inject<() => 'device' | 'account' | 'both'>('checkExpiredType')
const checkExpiredType = inject<() => 'device' | 'account' | 'both' | 'subscribe'>('checkExpiredType')
// 计算属性 - 当前页数据
const paginatedData = computed(() => {

View File

@@ -1,9 +1,10 @@
<script setup lang="ts">
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
interface Props {
modelValue: boolean
expiredType: 'device' | 'account' | 'both' // 设备过期、账号过期、都过期
expiredType: 'device' | 'account' | 'both' | 'subscribe' // 设备过期、账号过期、都过期、主动订阅
}
interface Emits {
@@ -19,12 +20,14 @@ const visible = computed({
})
const titleText = computed(() => {
if (props.expiredType === 'subscribe') return '订阅服务'
if (props.expiredType === 'both') return '试用已到期'
if (props.expiredType === 'account') return '账号试用已到期'
return '设备试用已到期'
})
const subtitleText = computed(() => {
if (props.expiredType === 'subscribe') return '联系客服订阅或续费,享受完整服务'
if (props.expiredType === 'both') return '试用已到期,请联系客服订阅以获取完整服务'
if (props.expiredType === 'account') return '账号试用已到期,请联系客服订阅'
return '当前设备试用已到期,请更换新设备体验或联系客服订阅'
@@ -35,8 +38,11 @@ function handleConfirm() {
}
function copyWechat() {
navigator.clipboard.writeText('_linhong')
// ElMessage.success('微信号已复制')
navigator.clipboard.writeText('_linhong').then(() => {
ElMessage.success('微信号已复制')
}).catch(() => {
ElMessage.error('复制失败,请手动复制')
})
}
</script>
@@ -71,6 +77,7 @@ function copyWechat() {
<div class="wechat-label">客服微信</div>
<div class="wechat-id">_linhong</div>
</div>
<div class="copy-icon">📋</div>
</div>
<!-- 按钮 -->
@@ -137,11 +144,13 @@ function copyWechat() {
margin-bottom: 20px;
width: 90%;
cursor: pointer;
transition: background 0.3s;
transition: all 0.3s;
position: relative;
}
.wechat-card:hover {
background: #ebebeb;
background: #e8f5e9;
box-shadow: 0 2px 8px rgba(9, 187, 7, 0.15);
}
.wechat-icon {
@@ -170,6 +179,18 @@ function copyWechat() {
color: #1f1f1f;
}
.copy-icon {
margin-left: auto;
font-size: 16px;
opacity: 0.5;
transition: all 0.3s;
}
.wechat-card:hover .copy-icon {
opacity: 1;
transform: scale(1.1);
}
.confirm-btn {
height: 40px;
font-size: 14px;

View File

@@ -20,6 +20,7 @@ const tableLoading = ref(false)
const exportLoading = ref(false)
const statusMessage = ref('')
const statusType = ref<'info' | 'success' | 'warning' | 'error'>('info')
let abortController: AbortController | null = null
// 查询与上传
const singleShopName = ref('')
@@ -55,9 +56,9 @@ const activeStep = computed(() => {
// 试用期过期弹框
const showTrialExpiredDialog = ref(false)
const trialExpiredType = ref<'device' | 'account' | 'both'>('account')
const trialExpiredType = ref<'device' | 'account' | 'both' | 'subscribe'>('account')
const checkExpiredType = inject<() => 'device' | 'account' | 'both'>('checkExpiredType')
const checkExpiredType = inject<() => 'device' | 'account' | 'both' | 'subscribe'>('checkExpiredType')
// 左侧:上传文件名与地区
const selectedFileName = ref('')
@@ -153,7 +154,7 @@ async function searchProductInternal(product: any) {
showTrialExpiredDialog.value = true
return false
}
const res: any = await rakutenApi.search1688(product.imgUrl, currentBatchId.value)
const res: any = await rakutenApi.search1688(product.imgUrl, currentBatchId.value, abortController?.signal)
const data = res.data
if (!hasValid1688Data(data)) return false
const skuJson = data.skuPriceJson || data.skuPrice
@@ -176,7 +177,8 @@ async function searchProductWithRetry(product: any, maxRetry = 2) {
try {
const ok = await searchProductInternal(product)
if (ok) return true
} catch (e) {
} catch (e: any) {
if (e.name === 'AbortError') return false
console.warn('search1688 failed', e)
}
if (attempt < maxRetry) await delay(600)
@@ -244,6 +246,8 @@ async function handleStartSearch() {
return
}
abortController = new AbortController()
if (pendingFile.value) {
try {
loading.value = true
@@ -255,7 +259,7 @@ async function handleStartSearch() {
progressPercentage.value = 0
totalProducts.value = 0
processedProducts.value = 0
const resp: any = await rakutenApi.getProducts({file: pendingFile.value, batchId: currentBatchId.value})
const resp: any = await rakutenApi.getProducts({file: pendingFile.value, batchId: currentBatchId.value}, abortController?.signal)
const products = (resp.data.products || []).map((p: any) => ({...p, skuPrices: parseSkuPrices(p)}))
if (products.length === 0) {
@@ -264,9 +268,11 @@ async function handleStartSearch() {
allProducts.value = products
pendingFile.value = null
} catch (e) {
} catch (e: any) {
if (e.name !== 'AbortError') {
statusType.value = 'error'
statusMessage.value = '解析失败,请重试'
}
} finally {
loading.value = false
tableLoading.value = false
@@ -280,17 +286,21 @@ async function handleStartSearch() {
progressPercentage.value = 100
statusType.value = 'success'
statusMessage.value = ''
abortController = null
return
}
if (items.length === 0) {
statusType.value = 'warning'
statusMessage.value = '没有可处理的商品,请先导入或查询店铺'
abortController = null
return
}
await startBatch1688Search(items)
}
function stopTask() {
abortController?.abort()
abortController = null
loading.value = false
tableLoading.value = false
statusType.value = 'warning'
@@ -305,6 +315,7 @@ async function startBatch1688Search(products: any[]) {
progressPercentage.value = 100
statusType.value = 'success'
statusMessage.value = '所有商品都已获取1688数据'
abortController = null
return
}
loading.value = true
@@ -323,6 +334,7 @@ async function startBatch1688Search(products: any[]) {
statusMessage.value = ''
}
loading.value = false
abortController = null
}
async function serialSearch1688(products: any[]) {

View File

@@ -6,26 +6,19 @@ import AccountManager from '../common/AccountManager.vue'
import { batchConvertImages } from '../../utils/imageProxy'
import { handlePlatformFileExport } from '../../utils/settings'
import { getUsernameFromToken } from '../../utils/token'
const TrialExpiredDialog = defineAsyncComponent(() => import('../common/TrialExpiredDialog.vue'))
const refreshVipStatus = inject<() => Promise<boolean>>('refreshVipStatus')
// 接收VIP状态
const props = defineProps<{
isVip: boolean
}>()
type Shop = { id: string; shopName: string }
const accounts = ref<BanmaAccount[]>([])
const accountId = ref<number>()
// 收起功能移除
const shopList = ref<Shop[]>([])
const selectedShops = ref<string[]>([])
const dateRange = ref<string[]>([])
const loading = ref(false)
const exportLoading = ref(false)
const progressPercentage = ref(0)
@@ -44,9 +37,8 @@ let abortController: AbortController | null = null
// 试用期过期弹框
const showTrialExpiredDialog = ref(false)
const trialExpiredType = ref<'device' | 'account' | 'both'>('account')
const checkExpiredType = inject<() => 'device' | 'account' | 'both'>('checkExpiredType')
const trialExpiredType = ref<'device' | 'account' | 'both' | 'subscribe'>('account')
const checkExpiredType = inject<() => 'device' | 'account' | 'both' | 'subscribe'>('checkExpiredType')
function selectAccount(id: number) {
accountId.value = id
loadShops()
@@ -106,7 +98,6 @@ async function fetchData() {
// 刷新VIP状态
if (refreshVipStatus) await refreshVipStatus()
// VIP检查
if (!props.isVip) {
if (checkExpiredType) trialExpiredType.value = checkExpiredType()
@@ -123,14 +114,11 @@ async function fetchData() {
fetchCurrentPage.value = 1
fetchTotalItems.value = 0
currentBatchId.value = `ZEBRA_${Date.now()}`
const [startDate = '', endDate = ''] = dateRange.value || []
await fetchPageData(startDate, endDate)
}
async function fetchPageData(startDate: string, endDate: string) {
if (!isFetching.value) return
try {
const response = await zebraApi.getOrders({
accountId: Number(accountId.value) || undefined,
@@ -145,10 +133,8 @@ async function fetchPageData(startDate: string, endDate: string) {
const data = (response as any)?.data || response
const orders = data.orders || []
allOrderData.value = [...allOrderData.value, ...orders]
fetchTotalPages.value = data.totalPages || 0
fetchTotalItems.value = data.total || 0
if (fetchCurrentPage.value < fetchTotalPages.value && isFetching.value) {
progressPercentage.value = Math.round((fetchCurrentPage.value / fetchTotalPages.value) * 100)
fetchCurrentPage.value++

View File

@@ -39,7 +39,6 @@ spring:
server:
port: 8081
address: 127.0.0.1
# 外部API服务配置
api:
server:
@@ -61,7 +60,6 @@ project:
version: @project.version@
build:
time: @maven.build.timestamp@
logging:
level:
com.tashow.erp: INFO

View File

@@ -11,7 +11,6 @@ import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/monitor/device")
@Anonymous