Dining_Hall/pages/remainingSum/rechargeRecord.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view>
    <Navbar title="充值记录" :goTo="paths.remainingSum" :showRightText="true" :isBack="false" :text="'充值日期'" @clickIcon="handleRightText"/>
    <u-loading-page :loading="showLoading" loading-text="加载中..."></u-loading-page>
    <view class="recharge-history">
      <!-- 顶部标签导航 -->
      <view class="tab-navigation">
        <Tabs :tabList="tabList" @changeTab="changeTab"/>
      </view> 
      <!-- 充值记录列表 -->
	  <scroll-view scroll-y @scrolltolower="onScrollTolower" class="record-list" v-if="!showLoading">
        <view v-for="(record, index) in rechargeRecords" :key="index" class="record-item">
          <!-- 左侧图标 -->
          <u-icon :name="getIconClass(record.type)" size="42"></u-icon>
		  <!-- <text>{{index}}</text> -->
          <!-- 中间充值详情 -->
          <view class="record-details">
            <view class="status" v-if="record.payState<=3" style="color: seagreen;">{{ record.payStateName }}</view>
            <view class="status" v-if="record.payState>3" style="color: red;">{{ record.payStateName }}</view>
			<view class="time">充值方式：{{ record.payTypeName }}</view>
            <view class="time">{{ record.tradeTime }}</view>
            <view class="time" v-if="record.payState==4">失败原因：{{ record.failReason }}</view> 
          </view>
          <!-- 右侧金额信息 -->
          <view class="amount-info">
            <view class="amount">¥{{ (record.amount/100).toFixed(2) }}</view>
            <view class="balance" v-if="record.payState==3">余额: {{ (record.walletBalTotal/100).toFixed(2) }}</view>
            <view class="query-btn" v-if="record.payState==2||record.payState==4" @click="queryResult(record)">再次查询充值结果</view>
          </view> 
        </view>
	  </scroll-view> 
    </view>
	<u-datetime-picker
      ref="datetimePicker"
      :show="show"
      v-model="dateValue"
      title="选择日期"
      :filter="filter"
      mode="date"
      closeOnClickOverlay
      @confirm="confirm"
      @cancel="cancel"
      @change="change"
      @close="close"
    ></u-datetime-picker>
  </view>
</template>

<script>
import { chargeRecordApi,getRechargeQueryResultApi } from '../../api/index/index'
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 {
		fontValue:uni.getStorageSync('fontSize') || 8,
		tabIndex: 0,
		showLoading:true,
		paths: {
			remainingSum: '/pages/remainingSum/index'
		},
		current: 0,
		show: false,
		dateValue:new Date(),
		startDateTime:"",
		endDateTime: "",
		activeTab: 'all',
		tabs: [
			{ id: 'all', name: '全部' },
			{ id: 'success', name: '充值成功' },
			{ id: 'failed', name: '充值失败' },
			{ id: 'timeout', name: '充值超时' }
		],
		tabList: ['全部', '充值成功', '充值失败', '充值超时'],
		queryParam:{
			pageNum:1,
			pageSize:10
		},
		rechargeState:"",
		total:0,
		rechargeRecords: []
    }
  },
  onLoad() {
  	this.getRecordList()
  },
  methods: {
	  //再次查询充值结果
	  queryResult(item){
			console.log(item)
			let param = {
	  		  	"accTradeId": item.tradeId,
			}
			getRechargeQueryResultApi(param).then((res)=>{
				this.getRecordList() 
			}).catch(()=>{
				this.getRecordList() 
			})
	  },
	  onScrollTolower(){
		if(this.total>this.rechargeRecords.length){
			this.queryParam.pageNum++
			this.getRecordList()
		}
	  },
	async getRecordList() {
		this.showLoading=true
		let params = {
		  custId: uni.getStorageSync('custId'),
		  rechargeState:this.rechargeState,
		  current:this.queryParam.pageNum,
		  size:this.queryParam.pageSize,
		  startDateTime:this.startDateTime,
		  endDateTime:this.endDateTime
		  
		}
		const res = await chargeRecordApi(params)
		console.log('?? ~ getBalance ~ res', res)
		// this.rechargeRecords = res.records;
		this.total=res.total;
		res.records.forEach(item=>{
			item.tradeTime = item.tradeTime.replace('T', ' ')
		})
		if (this.queryParam.pageNum==1) {
		    this.rechargeRecords = res.records
		} else {
			this.rechargeRecords.push(...res.records)
		} 
		this.showLoading=false 
	},
    changeTab(index) {
      console.log('?? ~ changeTab ~ index:', index)
      // this.tabIndex = index;
	  if(index==0){
		  this.rechargeState="";
		  this.queryParam.pageNum=1;
		  this.getRecordList()
	  }else{
		  this.rechargeState=index;
		  this.queryParam.pageNum=1;
		  this.getRecordList()
	  }
	  
    },
    filter(type, options) {
      // if (type === 'year') {
      //   return options.filter((option) => option % 2 === 0)
      // }
      return options
    },
    confirm(e) {
		this.show = false; 
		if (!isNaN(e.value)) {
			// const timestamp = parseInt(e.value);
			const selectedDate = new Date(e.value); 
			console.log(selectedDate) 
			const year = selectedDate.getFullYear();
			const month = ("0" + (selectedDate.getMonth() + 1)).slice(-2);
			const day = ("0" + selectedDate.getDate()).slice(-2); 
			const hours = ("0" + selectedDate.getHours()).slice(-2);
			const minutes = ("0" + selectedDate.getMinutes()).slice(-2);
			const seconds = ("0" + selectedDate.getSeconds()).slice(-2); 
			// this.startDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			this.startDateTime = `${year}-${month}-${day} 00:00:00`;
			// const endDate = new Date(selectedDate.getTime() + 86399999) 
			// const year2 = endDate.getFullYear();
			// const month2 = ("0" + (endDate.getMonth() + 1)).slice(-2);
			// const day2 = ("0" + endDate.getDate()).slice(-2); 
			this.endDateTime = `${year}-${month}-${day} 23:59:59` 
			this.show = false;
			this.queryParam.pageNum=1;
			this.getRecordList()
		}
		console.log(this.startDateTime)
		console.log(this.endDateTime)
    },
    cancel() {
      this.show = false;
    },
    change(e) {
      console.log('change', e)
    },
    close() {
      this.show = false;
    },
    handleRightText() {
      console.log('?? ~ handleRightText ~ ')
      this.current = 5
      this.show = 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 lang="scss" scoped>
page {
  background: #fff;
}

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

.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 {
	// background-color: #22c55e;
	height: 87vh;
  //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: 32rpx;
  font-weight: 500;
}

.time {
  font-size: 28rpx;
  color: #6b7280;
}

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

.amount {
  color: #f97316;
}

.balance {
  font-size: 28rpx;
  color: #6b7280;
}
.query-btn{
	padding: 14rpx 10rpx;
	font-size: 20rpx;
	background: #f97316;
	color: #FFF;
	margin-top: 10rpx;
	border-radius: 4rpx;
}
</style>