studyTest/pages/payment/payment.vue

<template>
  <view class="payment-container">
    <view class="top-bar">
      <view class="title">缴费记录</view>
    </view>
    
    <view class="filter-bar">
      <view class="filter-item" :class="{ active: filterType === 'all' }" @click="filterType = 'all'">
        全部
      </view>
      <view class="filter-item" :class="{ active: filterType === 'pass' }" @click="filterType = 'pass'">
        已缴费
      </view>
      <view class="filter-item" :class="{ active: filterType === 'pending' }" @click="filterType = 'pending'">
        待缴费
      </view>
    </view>
    
    <view class="list-container">
      <view class="payment-item" v-for="(item, index) in res" :key="index">
        <view class="item-header">
          <view class="payment-type">
            <text>{{ item.room }}</text>
          </view>
          <view class="payment-status" :class="{ pass: item.pay_status === '0', pending: item.pay_status === '1' }">
            {{ item.pay_status === '0' ? '已缴费' : '待缴费' }}
          </view>
        </view>
        
        <view class="item-body">
          <view class="list">
            <view class="detail-label">金额</view>
            <view>¥{{ item.pay_amount }}</view>
          </view>
          
          <view class="list">
            <view class="detail-label">缴费日期</view>
            <view>{{ item.pay_date }}</view>
          </view>
          
          <view class="list">
            <view class="detail-label">缴费人</view>
            <view>{{ item.username }}</view>
          </view>
          
          <view class="list" v-if="item.remark">
            <view class="detail-label">备注</view>
            <view>{{ item.remark }}</view>
          </view>
        </view>
      </view>
      
      <view v-if="res.length === 0">
        <text>暂无缴费记录</text>
      </view>
    </view>
  </view>
</template>


<script setup>
import { ref, computed, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'

const filterType = ref('all')
const payments = ref([
  { id: 1, username:'李慧琳', room:'706', pay_amount: 75, pay_date: '2025-07-31', pay_status: '0', remark: '7月宿舍费' },
  { id: 2, username:'李慧琳', room:'706', pay_amount: 75, pay_date: '2025-06-30', pay_status: '0', remark: '6月宿舍费' },
  { id: 3, username:'李慧琳', room:'706', pay_amount: 75, pay_date: '2025-05-28', pay_status: '0', remark: '5月宿舍费' },
  { id: 4, username:'李慧琳', room:'706', pay_amount: 80, pay_date: '2025-08-31', pay_status: '1', remark: '8月宿舍费' }
])

const res = computed(() => {
  switch (filterType.value) {
    case 'pass':
      return payments.value.filter(item => item.pay_status === '0')
    case 'pending':
      return payments.value.filter(item => item.pay_status === '1')
    default: 
      return payments.value
  }
})

onShow(() => {
  const isLogin = uni.getStorageSync('isLogin')
  console.log(isLogin)
  if (!isLogin) {
    uni.redirectTo({
      url: '/pages/login/login'
    })
  }
})
</script>

<style scoped>
.payment-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.top-bar {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 34rpx;
  font-weight: bold;
}

.filter-bar {
  display: flex;
  background-color: #fff;
  padding: 15rpx 20rpx;
  border-bottom: 1px solid #eee;
}

.filter-item {
  flex: 1;
  text-align: center;
  padding: 15rpx 0;
  font-size: 28rpx;
  border-radius: 30rpx;
}

.filter-item.active {
  background-color: #e6f7ff;
  color: #36bffa;
}

.list-container {
  padding: 20rpx;
}

.payment-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #f5f5f5;
}

.payment-type text {
  font-size: 30rpx;
  font-weight: bold;
}

.payment-status {
  padding: 5rpx 20rpx;
  border-radius: 20rpx;
  font-size: 30rpx;
}

.payment-status.pass {
  background-color: #e6fffb;
  color: #00b42a;
}

.payment-status.pending {
  background-color: #fff2e8;
  color: #ff7d00;
}

.item-body {
  display: flex;
  flex-direction: column;
}

.list {
  display: flex;
  justify-content: space-between;
  padding: 15rpx 0;
  font-size: 28rpx;
}

.detail-label {
  color: #666;
}
</style>