Dining_Hall/pages/remainingSum/rechargeRecord.vue

<template>
  <view>
    <Navbar
      title="充值记录"
      :goTo="paths.remainingSum"
      :showRightText="true"
      :isBack="false"
      :text="'充值日期'"
      @clickIcon="handleRightText"
    />
    <u-datetime-picker
      :show="show5"
      v-model="value5"
      title="选择日期"
      :filter="filter"
      mode="date"
      :formatter="formatter"
      closeOnClickOverlay
      @confirm="confirm"
      @cancel="cancel"
      @change="change"
      @close="close"
    ></u-datetime-picker>
    <div class="recharge-history">
      <!-- 顶部标签导航 -->
      <div class="tab-navigation">
        <!--        <div-->
        <!--          v-for="tab in tabs"-->
        <!--          :key="tab.id"-->
        <!--          :class="['tab', { 'active': activeTab === tab.id }]"-->
        <!--          @click="setActiveTab(tab.id)"-->
        <!--        >-->
        <!--          {{ tab.name }}-->
        <!--        </div>-->
        <Tabs :tabList="tabList" @changeTab="changeTab" />
      </div>

      <!-- 充值记录列表 -->
      <div class="record-list">
        <div
          v-for="(record, index) in rechargeRecords"
          :key="index"
          class="record-item"
        >
          <!-- 左侧图标 -->
          <u-icon
            :name="getIconClass(record.type)"
            size="42"
          ></u-icon>

          <!-- 中间充值详情 -->
          <div class="record-details">
            <div class="status">{{ record.status }}</div>
            <div class="time">{{ record.time }}</div>
          </div>

          <!-- 右侧金额信息 -->
          <div class="amount-info">
            <div class="amount">¥{{ record.amount }}</div>
            <div class="balance">余额: {{ record.balance }}</div>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
import Tabs from '@/pages/components/Tabs.vue'
import UIcon from '../../uni_modules/uview-ui/components/u-icon/u-icon.vue'

export default {
  name: 'rechargeRecord',
  components: { UIcon, Tabs },
  data() {
    return {
      paths: {
        remainingSum: '/pages/remainingSum/index'
      },
      current: 0,
      show5: false,
      value5: Number(new Date()),
      activeTab: 'all',
      tabs: [
        { id: 'all', name: '全部' },
        { id: 'success', name: '充值成功' },
        { id: 'failed', name: '充值失败' },
        { id: 'timeout', name: '充值超时' }
      ],
      tabList: ['全部', '充值成功', '充值失败', '充值失败'],
      rechargeRecords: [
        {
          type: 'default',
          status: '充值成功',
          time: '2024-12-31 15:50:12',
          amount: '50.00',
          balance: '51.03'
        },
        {
          type: 'default',
          status: '充值成功',
          time: '2024-12-31 15:50:12',
          amount: '50.00',
          balance: '51.03'
        },
        {
          type: 'default',
          status: '充值成功',
          time: '2024-12-31 15:50:12',
          amount: '50.00',
          balance: '51.03'
        },
        {
          type: 'default',
          status: '充值成功',
          time: '2024-12-31 15:50:12',
          amount: '50.00',
          balance: '51.03'
        },
        {
          type: 'wechat',
          status: '充值成功',
          time: '2024-12-31 15:50:12',
          amount: '50.00',
          balance: '51.03'
        },
        {
          type: 'wallet',
          status: '充值成功',
          time: '2024-12-31 15:50:12',
          amount: '50.00',
          balance: '51.03'
        }
      ]
    }
  },
  methods: {
    changeTab(index) {
      console.log('🚀 ~ changeTab ~ index:', index)
      this.tabIndex = index
    },
    filter(type, options) {
      if (type === 'year') {
        return options.filter((option) => option % 2 === 0)
      }

      return options
    },
    confirm(e) {
      this[`show${this.current}`] = false
      this.result(e.value, e.mode)
    },
    cancel() {
      this[`show${this.current}`] = false
    },
    change(e) {
      console.log('change', e)
    },
    close() {
      this[`show${this.current}`] = false
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    handleRightText() {
      console.log('🚀 ~ handleRightText ~ ')
      this.current = 5
      this.show5 = true
    },
    setActiveTab(tabId) {
      this.activeTab = tabId
    },
    getIconClass(type) {
      switch (type) {
        case 'wechat':
          return require('../../static/images/successful.png')
        case 'wallet':
          return require('../../static/images/lose.png')
        default:
          return require('../../static/images/delay.png')
      }
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background: #fff;
}

.recharge-history {
  background: #fff;
  //background-color: #f3f4f6;
  min-height: 100vh;
}

.tab-navigation {
  display: flex;
  background-color: white;
  padding: 15px 16px 0 16px;
}

.tab {
  padding: 12px 16px;
  position: relative;
  cursor: pointer;
}

.tab.active {
  color: #f97316;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #f97316;
}

.record-list {
  //padding: 0 16px;
}

.record-item {
  display: flex;
  align-items: center;
  background-color: white;
  margin-top: 8px;
  padding: 16px;
  border-radius: 8px;
}

.icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner-circle {
  width: 24px;
  height: 24px;
  background-color: white;
  border-radius: 50%;
}

.default-icon {
  background-color: #3b82f6;
}

.wechat-icon {
  background-color: #22c55e;
}

.wallet-icon {
  background-color: #f97316;
}

.record-details {
  flex: 1;
  margin-left: 12px;
}

.status {
  font-size: 16px;
  font-weight: 500;
}

.time {
  font-size: 14px;
  color: #6b7280;
}

.amount-info {
  text-align: right;
}

.amount {
  color: #f97316;
}

.balance {
  font-size: 14px;
  color: #6b7280;
}
</style>