zhunong-h5/src/views/dhjilu.vue

<template>
  <div>
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="back-btn" @click="$router.back()">
        <i class="arrow-left"></i>
      </div>
      <div class="title">兑换记录</div>
    </div>

    <!-- 主容器 -->
    <div class="dhjilu-container">
      <div class="content-wrapper">
        <!-- 记录列表 -->
        <div class="records-list">
          <div 
            v-for="(record, index) in exchangeRecords" 
            :key="record.id"
            class="record-item"
          >
            <div class="record-content">
              <div class="record-number">奖品{{ getChineseNumber(index + 1) }}</div>
              <div class="record-name">{{ record.productName }}</div>
              <div class="record-price">价值{{ record.value }}元</div>
              <div class="record-count">{{ record.count }}份</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Toast 提示 -->
    <Toast ref="toast" />
  </div>
</template>

<script>
import Toast from '@/components/Toast.vue';

export default {
  name: 'DhjiluPage',
  components: {
    Toast
  },
  data() {
    return {
      exchangeRecords: [
        {
          id: 1,
          productName: '小米手机',
          value: 5999,
          count: 0,
          points: 100,
          exchangeTime: '2024-01-15 14:30:00',
          status: 'completed'
        },
        {
          id: 2,
          productName: '片仔癀',
          value: 18000,
          count: 0,
          points: 200,
          exchangeTime: '2024-01-14 16:20:00',
          status: 'pending'
        },
        {
          id: 3,
          productName: '野山参',
          value: 38888,
          count: 1,
          points: 300,
          exchangeTime: '2024-01-13 09:15:00',
          status: 'completed'
        },
        {
          id: 4,
          productName: '纪念金条',
          value: 78000,
          count: 0,
          points: 400,
          exchangeTime: '2024-01-12 11:45:00',
          status: 'pending'
        },
        {
          id: 5,
          productName: '劳力士金表',
          value: 88000,
          count: 0,
          points: 500,
          exchangeTime: '2024-01-11 15:30:00',
          status: 'pending'
        }
      ]
    }
  },
  mounted() {
    this.loadExchangeRecords();
  },
  methods: {
    // 加载兑换记录
    async loadExchangeRecords() {
      try {
        // 这里应该调用真实的API
        // const response = await getExchangeRecords();
        // this.exchangeRecords = response.data;
        
        // 当前使用模拟数据，实际开发时替换为API调用
        console.log('兑换记录加载完成');
      } catch (error) {
        console.error('加载兑换记录失败:', error);
        this.$refs.toast.show('加载记录失败', 'error');
      }
    },

    // 转换数字为中文
    getChineseNumber(num) {
      const chineseNumbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
      return chineseNumbers[num - 1] || num;
    }
  }
}
</script>

<style scoped>
/* 导航栏样式 */
.nav-bar {
  height: 44px;
  background-color: #fff;
  color: #000;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 15px;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.back-btn {
  width: 24px;
  height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.arrow-left {
  width: 12px;
  height: 12px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
}

.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
}

/* 主容器 */
.dhjilu-container {
  min-height: calc(100vh - 44px);
  background: linear-gradient(135deg, #c94545 0%, #b43a39 100%);
  padding: 20px;
  padding-bottom: 100px;
}

.content-wrapper {
  background: white;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 记录列表 */
.records-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.record-item {
  background: linear-gradient(135deg, #f5a5a5 0%, #f0b8b8 100%);
  border-radius: 12px;
  padding: 20px 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.record-item:active {
  transform: scale(0.98);
}

.record-content {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 15px;
}

.record-number {
  font-size: 16px;
  font-weight: 600;
  color: #d91d42;
  min-width: 50px;
}

.record-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  text-align: left;
}

.record-price {
  font-size: 16px;
  font-weight: 600;
  color: #d91d42;
  text-align: right;
  min-width: 90px;
}

.record-count {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  text-align: right;
  min-width: 30px;
}

/* 响应式优化 */
@media screen and (max-width: 375px) {
  .dhjilu-container {
    padding: 15px;
  }
  
  .record-content {
    gap: 10px;
  }
  
  .record-number,
  .record-name,
  .record-price,
  .record-count {
    font-size: 14px;
  }
  
  .record-item {
    padding: 15px 12px;
  }
}

@media screen and (max-width: 320px) {
  .record-content {
    gap: 8px;
  }
  
  .record-number,
  .record-name,
  .record-price,
  .record-count {
    font-size: 13px;
  }
  
  .record-price {
    min-width: 80px;
  }
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-state .icon {
  font-size: 48px;
  margin-bottom: 15px;
  color: #ddd;
}

.empty-state .text {
  font-size: 16px;
  line-height: 1.5;
}
</style>