合并代码
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 164 KiB After Width: | Height: | Size: 164 KiB |
|
Before Width: | Height: | Size: 68 KiB After Width: | Height: | Size: 68 KiB |
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 102 KiB |
@@ -10,8 +10,8 @@
|
||||
</div>
|
||||
<div
|
||||
class="nav-item"
|
||||
:class="{ active: isActive('/matching') }"
|
||||
@click="handleNavClick('/matching')"
|
||||
:class="{ active: isActive('/mymatching') }"
|
||||
@click="handleNavClick('/mymatching')"
|
||||
>
|
||||
<User class="nav-icon" />
|
||||
<span class="nav-label">资金匹配</span>
|
||||
|
||||
@@ -40,12 +40,12 @@
|
||||
<!-- 修改后的操作区域 - 三个部分等宽 -->
|
||||
<div class="action-area">
|
||||
<div class="action-grid">
|
||||
<div @click="startMatching" class="action-main">
|
||||
<router-link to="/mymatching?autoStart=true" class="action-main">
|
||||
<div class="matching-text">
|
||||
<div>开始</div>
|
||||
<div>匹配</div>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
<div class="action-stack">
|
||||
<div class="action-sub-item top">
|
||||
<div class="action-icon">💎</div>
|
||||
@@ -87,38 +87,19 @@ export default {
|
||||
Swiper,
|
||||
SwiperSlide
|
||||
},
|
||||
methods:{
|
||||
async startMatching(type = 'small', amount = null) {
|
||||
// 先导航到匹配页面
|
||||
await this.$router.push('/matching')
|
||||
|
||||
// 等待页面加载完成后触发匹配
|
||||
setTimeout(() => {
|
||||
// 通过全局事件总线触发匹配页面的匹配方法
|
||||
window.dispatchEvent(new CustomEvent('autoStartMatching', {
|
||||
detail: {
|
||||
type,
|
||||
amount
|
||||
}
|
||||
}))
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
|
||||
|
||||
// 响应式数据
|
||||
const userPoints = ref(0)
|
||||
const carouselItems = ref([
|
||||
{ image: '../..../../imgs/top/1.jpg', title: '限时优惠活动' },
|
||||
{ image: '../../imgs/top/2.jpg', title: '新用户专享' },
|
||||
{ image: '../../imgs/top/3.jpg', title: '积分兑换' }
|
||||
{ image: '/imgs/top/1.jpg', title: '限时优惠活动' },
|
||||
{ image: '/imgs/top/2.jpg', title: '新用户专享' },
|
||||
{ image: '/imgs/top/3.jpg', title: '积分兑换' }
|
||||
])
|
||||
const headerItems = ref([
|
||||
{ image: "../../imgs/mainpage/交易记录.png", text: "交易记录", path: "/transfers" },
|
||||
{ image: "../../imgs/mainpage/订单查询.png", text: "订单查询", path: "/points-history" },
|
||||
{ image: "../../imgs/mainpage/客服中心.png", text: "客服中心", path: "/support" },
|
||||
{ image: "../../imgs/mainpage/系统公告.png", text: "系统公告", path: "/announcements" }
|
||||
{ image: "/imgs/mainpage/交易记录.png", text: "交易记录", path: "/transfers" },
|
||||
{ image: "/imgs/mainpage/订单查询.png", text: "订单查询", path: "/points-history" },
|
||||
{ image: "/imgs/mainpage/客服中心.png", text: "客服中心", path: "/support" },
|
||||
{ image: "/imgs/mainpage/系统公告.png", text: "系统公告", path: "/announcements" }
|
||||
])
|
||||
const newsItems = ref([
|
||||
"最新活动:双十一特惠",
|
||||
|
||||
@@ -89,6 +89,52 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 待处理分配 -->
|
||||
<div class="pending-section" v-if="pendingAllocations.length > 0">
|
||||
<h3>待处理分配</h3>
|
||||
<div class="allocation-list">
|
||||
<div
|
||||
v-for="allocation in pendingAllocations"
|
||||
:key="allocation.id"
|
||||
class="allocation-card"
|
||||
>
|
||||
<div class="allocation-info">
|
||||
<div class="allocation-header">
|
||||
<span class="order-id">订单 #{{ allocation.matching_order_id }}</span>
|
||||
<span class="cycle">第{{ allocation.cycle_number }}轮</span>
|
||||
</div>
|
||||
<div class="allocation-details">
|
||||
<p>转账给: <strong>{{ allocation.to_user_real_name }}</strong></p>
|
||||
<p>金额: <strong class="amount">¥{{ allocation.amount }}</strong></p>
|
||||
<p>总金额: ¥{{ allocation.total_amount }}</p>
|
||||
<p class="deadline-info">
|
||||
转账时效:
|
||||
<span :class="['time-left', allocation.time_status]">
|
||||
{{ allocation.time_left }}
|
||||
</span>
|
||||
<span class="deadline-time">({{ formatDeadline(allocation.deadline) }}前)</span>
|
||||
</p>
|
||||
<div v-if="!allocation.can_transfer" class="timeout-warning">
|
||||
<i class="el-icon-warning"></i>
|
||||
<span class="warning-text">{{ allocation.timeout_reason }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="allocation-actions">
|
||||
<button
|
||||
@click="confirmAllocation(allocation.id, allocation.amount)"
|
||||
class="confirm-btn"
|
||||
:disabled="processing || !allocation.can_transfer"
|
||||
:title="!allocation.can_transfer ? allocation.timeout_reason : ''"
|
||||
>
|
||||
{{ allocation.can_transfer ? '确认转账' : '无法转账' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 我的匹配订单 -->
|
||||
<div class="orders-section">
|
||||
<div class="section-title">
|
||||
@@ -196,6 +242,8 @@ export default {
|
||||
stats: {
|
||||
userStats: null
|
||||
},
|
||||
autoStartProcessed: false,
|
||||
pendingAllocations: [],
|
||||
creating: false,
|
||||
processing: false,
|
||||
matchingOrders: [],
|
||||
@@ -204,10 +252,25 @@ export default {
|
||||
matchingType: 'small', // 匹配类型:small(小额) 或 large(大额)
|
||||
customAmount: '' // 大额匹配自定义金额
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.$route.query.autoStart) {
|
||||
// 执行匹配逻辑
|
||||
this.matchingType = this.$route.query.type || 'small';
|
||||
if (this.matchingType === 'large' && this.$route.query.amount) {
|
||||
this.customAmount = this.$route.query.amount;
|
||||
}
|
||||
this.createOrder();
|
||||
|
||||
// 清除query参数,防止刷新后再次触发
|
||||
this.$router.replace({ ...this.$route, query: {} });
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadData()
|
||||
|
||||
this.handleAutoStartFromHome()
|
||||
|
||||
// 监听自动开始匹配事件
|
||||
const handleAutoStartMatching = async (event) => {
|
||||
const { type, amount } = event.detail
|
||||
@@ -225,12 +288,44 @@ export default {
|
||||
}
|
||||
|
||||
window.addEventListener('autoStartMatching', handleAutoStartMatching)
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleAutoStartFromHome() {
|
||||
// 获取路由查询参数
|
||||
const { autoStart, type, amount } = this.$route.query
|
||||
|
||||
// 如果参数存在且未处理过
|
||||
if (autoStart === 'true' && !this.autoStartProcessed) {
|
||||
this.autoStartProcessed = true // 防止重复触发
|
||||
|
||||
// 根据参数设置匹配类型
|
||||
if (type === 'large' && amount) {
|
||||
this.matchingType = 'large'
|
||||
this.customAmount = amount
|
||||
} else {
|
||||
this.matchingType = 'small'
|
||||
}
|
||||
|
||||
// 延迟触发匹配,确保页面已渲染完成
|
||||
setTimeout(() => {
|
||||
this.createOrder()
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
async loadPendingAllocations() {
|
||||
try {
|
||||
const response = await api.get('/matching/pending-allocations')
|
||||
this.pendingAllocations = response.data.data || []
|
||||
} catch (error) {
|
||||
console.error('加载待处理分配失败:', error)
|
||||
}
|
||||
},
|
||||
async loadData() {
|
||||
try {
|
||||
await this.loadMatchingOrders()
|
||||
await Promise.all([
|
||||
this.loadPendingAllocations(),
|
||||
])
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error)
|
||||
this.$message.error('加载数据失败')
|
||||
@@ -277,7 +372,7 @@ export default {
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$router.push('/profile')
|
||||
this.$router.push('/editdetailspage')
|
||||
}).catch(() => {})
|
||||
} else {
|
||||
this.$message.error(errorMessage)
|
||||
@@ -910,4 +1005,118 @@ input:checked + .slider:before {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.pending-section,
|
||||
.orders-section {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pending-section h3,
|
||||
.orders-section h3 {
|
||||
margin-bottom: 15px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.allocation-list,
|
||||
.orders-list {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.allocation-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border: 1px solid #e1e8ed;
|
||||
border-radius: 8px;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.allocation-header {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.order-id,
|
||||
.cycle {
|
||||
background: #3498db;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.allocation-details p {
|
||||
margin: 5px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.deadline-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.time-left {
|
||||
font-weight: bold;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.time-left.normal {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.time-left.urgent {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
|
||||
.time-left.expired {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
.deadline-time {
|
||||
color: #6c757d;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.allocation-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background: #27ae60;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.confirm-btn:hover {
|
||||
background: #229954;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -10,7 +10,7 @@
|
||||
<router-link to="/mypoints-history" class="detail-btn">
|
||||
<div>点击查看积分明细</div>
|
||||
</router-link>
|
||||
<img src="../../imgs/shop.png" alt="积分商城图标" class="balance-image">
|
||||
<img src="/imgs/shop.png" alt="积分商城图标" class="balance-image">
|
||||
</div>
|
||||
|
||||
<!-- 公告区域 -->
|
||||
@@ -23,7 +23,7 @@
|
||||
<router-link to="/shop">
|
||||
<button>点击查看全部商品</button>
|
||||
</router-link>
|
||||
<img src="../../imgs/shop2.png" alt="">
|
||||
<img src="/imgs/shop2.png" alt="">
|
||||
</div>
|
||||
|
||||
<!-- 分类区域 -->
|
||||
|
||||