|
@@ -0,0 +1,207 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="order-management">
|
|
|
|
+ <!-- 导航栏 -->
|
|
|
|
+ <div class="nav-bar">
|
|
|
|
+ <div class="back-btn" @click="$router.back()">
|
|
|
|
+ <i class="arrow-left"></i>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="title">订单管理</div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 订单列表 -->
|
|
|
|
+ <div class="order-list">
|
|
|
|
+ <div class="mining-card" v-for="item in miningList" :key="item.id">
|
|
|
|
+ <div class="mining-card-header earnings-header">
|
|
|
|
+ <div class="header-left">
|
|
|
|
+ <div class="mining-image">
|
|
|
|
+ <img :src="item.miner_datail.images" alt="mining image">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="mining-title">{{ item.miner_datail.title }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="earnings-amount">收益中</div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="u-line"></div>
|
|
|
|
+
|
|
|
|
+ <div class="earnings-details">
|
|
|
|
+ <div class="detail-item">
|
|
|
|
+ <span class="detail-label">日收益</span>
|
|
|
|
+ <span class="detail-value">{{ item.start_output }} 元</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="detail-item">
|
|
|
|
+ <span class="detail-label">收益期限</span>
|
|
|
|
+ <span class="detail-value">{{ item.cycle }} 天</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="detail-item">
|
|
|
|
+ <span class="detail-label">已获得股权</span>
|
|
|
|
+ <span class="detail-value">{{ item.miner_datail.computing_power }} 股</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="detail-item">
|
|
|
|
+ <span class="detail-label">参与价格</span>
|
|
|
|
+ <span class="detail-value">{{ item.money }} 元</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="u-line"></div>
|
|
|
|
+
|
|
|
|
+ <div class="mining-card-header earnings-header">
|
|
|
|
+ <div class="header-left">
|
|
|
|
+ <div class="mining-title">{{ item.addtime }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { getMinerInfo } from '@/api/profile';
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ name: 'OrderManagement',
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ miningList: [],
|
|
|
|
+ page: 1,
|
|
|
|
+ size: 10
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ async fetchMinerInfo() {
|
|
|
|
+ try {
|
|
|
|
+ const formData = new FormData();
|
|
|
|
+ formData.append('page', this.page);
|
|
|
|
+ formData.append('size', this.size);
|
|
|
|
+
|
|
|
|
+ const response = await getMinerInfo(formData);
|
|
|
|
+ if (response.data && response.data.mining_list) {
|
|
|
|
+ this.miningList = response.data.mining_list;
|
|
|
|
+ }
|
|
|
|
+ } catch (error) {
|
|
|
|
+ console.error('获取矿机信息失败:', error);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.fetchMinerInfo();
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped>
|
|
|
|
+.order-management {
|
|
|
|
+ min-height: 100vh;
|
|
|
|
+ background: #f5f5f5;
|
|
|
|
+ padding-bottom: 20px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.nav-bar {
|
|
|
|
+ height: 44px;
|
|
|
|
+ background-color: #ed4b39;
|
|
|
|
+ color: #fff;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ position: relative;
|
|
|
|
+ padding: 0 15px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.back-btn {
|
|
|
|
+ width: 24px;
|
|
|
|
+ height: 44px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.arrow-left {
|
|
|
|
+ width: 12px;
|
|
|
|
+ height: 12px;
|
|
|
|
+ border-left: 2px solid #fff;
|
|
|
|
+ border-bottom: 2px solid #fff;
|
|
|
|
+ transform: rotate(45deg);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.title {
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 50%;
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.order-list {
|
|
|
|
+ padding: 15px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.mining-card {
|
|
|
|
+ background: #fff;
|
|
|
|
+ border-radius: 12px;
|
|
|
|
+ padding: 15px;
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.mining-card-header {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.header-left {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ gap: 10px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.mining-image {
|
|
|
|
+ width: 40px;
|
|
|
|
+ height: 40px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.mining-image img {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ object-fit: cover;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.mining-title {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #333;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.earnings-amount {
|
|
|
|
+ color: #ed4b39;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.u-line {
|
|
|
|
+ margin: 10px 0;
|
|
|
|
+ border-bottom: 1px solid #e5e7eb;
|
|
|
|
+ width: 100%;
|
|
|
|
+ transform: scaleY(0.5);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.earnings-details {
|
|
|
|
+ display: grid;
|
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
|
+ gap: 15px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.detail-item {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ gap: 5px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.detail-label {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #666;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.detail-value {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #333;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+}
|
|
|
|
+</style>
|