<template> <view class="centenr"> <view class="Candywrapper"> <view class="tab-box"> <view class="tab_" :class="{active:index== type }" @click="getindex(index)" v-for="(item,index) in tabs" :key="index"> {{ item.name }} </view> </view> <view v-if="type==0"> <view class="card_box c-url"> <view style="margin: 13px 0px;">可用余额(元)</view> <view class="r-num">1299.00</view> </view> <view class="tab-bs"> <view class="w_box" @click="show1 = true">类型筛选 <u-icon name="arrow-down-fill"></u-icon> </view> <view class="w_box" @click="show = true">全部时间 <u-icon name="arrow-down-fill"></u-icon> </view> </view> <view class="bai_box"> <view class="left-img"> <!-- <image src="../../static/icon/hyxf.png" mode=""></image> --> <image src="../../static/icon/jfdh.png" mode=""></image> </view> <view style="width: 85%;"> <view class="right-box"> <view class="l-text">积分兑换</view> <view class="r-text">900</view> </view> <view class="right-box"> <view class="">储值卡</view> <view class="">余额120000.00</view> </view> <view class="right-box"> <view class="">中建锦绣二期店</view> <view class="">2024-09-09 16:54:09</view> </view> </view> </view> <view class="bai_box"> <view class="left-img"> <image src="../../static/icon/hycz.png" mode=""></image> </view> <view style="width: 85%;"> <view class="right-box"> <view class="l-text">会员充值</view> <view class="r-text">900</view> </view> <view class="right-box"> <view class="">储值卡</view> <view class="">余额120000.00</view> </view> <view class="right-box"> <view class="">中建锦绣二期店</view> <view class="">2024-09-09 16:54:09</view> </view> </view> </view> <view class="bai_box"> <view class="left-img"> <image src="../../static/icon/yp.png" mode=""></image> </view> <view style="width: 85%;"> <view class="right-box"> <view class="l-text">油品</view> <view class="r-text">900</view> </view> <view class="right-box"> <view class="">储值卡</view> <view class="">余额120000.00</view> </view> <view class="right-box"> <view class="">中建锦绣二期店</view> <view class="">2024-09-09 16:54:09</view> </view> </view> </view> <!-- <view v-if="!pointsList || pointsList.length==0"> <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"> </u-empty> </view> --> <u-datetime-picker :show="show" v-model="value1" mode="year-month" @cancel="cancel1" @confirm="confirm1"></u-datetime-picker> <u-picker :show="show1" :columns="columns" @cancel="cancel" @confirm="confirm"></u-picker> </view> <view v-if="type==1"> <view class="tab-bs"> <view class="w_box" @click="show1 = true">类型筛选 <u-icon name="arrow-down-fill"></u-icon> </view> <view class="w_box" @click="show = true">全部时间 <u-icon name="arrow-down-fill"></u-icon> </view> </view> <view class="bai_box"> <view class="left-img"> <image src="../../static/icon/hyxf.png" mode=""></image> </view> <view style="width: 85%;"> <view class="right-box"> <view class="l-text">额度增加</view> <view class="r-text">+2000.00</view> </view> <view class="right-box"> <view class="">小小(156****6655)</view> <view class="">当前额度0.00</view> </view> <view class="right-box"> <view class="">操作人:问问</view> <view class="">2024-09-09 16:54:09</view> </view> </view> </view> <!-- <view v-if="!pointsList || pointsList.length==0"> <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"> </u-empty> </view> --> <u-datetime-picker :show="show" v-model="value1" mode="year-month" @cancel="cancel1" @confirm="confirm1"></u-datetime-picker> <u-picker :show="show1" :columns="columns" @cancel="cancel" @confirm="confirm"></u-picker> </view> </view> </view> </template> <script> import request from '../../utils/request' export default { data() { return { tabs: [{ name: '余额明细', }, { name: '额度明细', }, ], type: 0, query: { chainStoreId: '', couponType: '', useStatus: 0, pageNo: 1, pageSize: 10 }, cardBalance: {}, show: false, show1: false, value1: Number(new Date()), columns: [ ['全部类型', '油品', '积分兑换', '会员充值'] ], queryParams: { pageNo: 1, pageSize: 30, type: "", storeId: uni.getStorageSync("storeId"), changeReason: "", startTime: "" }, pointsList: [], total: 0 } }, onShow() { this.query.chainStoreId = uni.getStorageSync('chainStoreId'); this.getUserBalance() this.getList() }, onPullDownRefresh() { console.log("刷新"); this.pointsList = [] this.queryParams = { pageNo: 1, pageSize: 30, type: "", storeId: uni.getStorageSync("storeId"), changeReason: "", startTime: "" } this.getList() }, onReachBottom() { // 触底加载 if (this.pointsList.length < this.total) { this.queryParams.pageNo++ this.getList() } }, methods: { getindex(index) { this.type = index }, // 获取余额信息 getUserBalance() { request({ url: '/business/userManager/user/getUserBalanceApplet', method: 'get', params: this.query }).then(res => { if (res.code == 200) { this.cardBalance = res.data } }) }, getList() { request({ url: '/business/integral/integralDetail/queryByPageUni', method: 'get', params: this.queryParams }).then(res => { if (res.code == 200) { this.pointsList = res.data.records this.total = res.data.total } }) }, confirm(e) { this.queryParams.pageNo = 1 if (e.value[0] == '全部类型') { this.queryParams.type = "" } else { this.queryParams.type = e.value[0] } this.getList() this.show1 = false }, cancel() { this.show1 = false }, timestampToString(timestamp) { // 将时间戳转换为Date对象 const date = new Date(timestamp); // 使用toLocaleDateString和toLocaleTimeString可以根据本地格式转换日期和时间 const dateString = date.toLocaleDateString() const timeString = date.toLocaleTimeString(); // 返回日期和时间的组合 return date.getFullYear() + '-' + (date.getMonth() + 1); }, confirm1(e) { this.queryParams.startTime = this.timestampToString(e.value) this.queryParams.pageNo = 1 this.getList() this.show = false }, cancel1() { this.show = false } } } </script> <style scoped lang="scss"> .centenr { width: 100%; height: 100vh; background: #F9F9F9; } .Candywrapper { background: #F9F9F9; box-sizing: border-box; padding: 10px; } .card_box { width: 100%; height: 90px; box-sizing: border-box; padding: 10px; color: #fff; font-size: 14px; } .c-url { background: url('../../static/imgs/jf.png') no-repeat; background-size: 100% 100%; } .r-size { width: 100%; display: flex; align-items: center; justify-content: flex-end; } .r-num { font-weight: 600; font-size: 20px; color: #FFFFFF; } .tab-bs { width: 100%; display: flex; align-items: center; justify-content: space-between; background: #fff; margin: 15px auto; } .w_box { width: 50%; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 15px; } .bai_box { width: 100%; box-sizing: border-box; padding: 15px 10px; background: #fff; display: flex; align-items: center; justify-content: space-between; } .left-img { margin-right: 10px; image { width: 40px; height: 40px; } } .right-box { width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #666666; } .l-text { font-size: 16px; color: #333333; margin-bottom: 5px; font-weight: bold; } .r-text { font-size: 16px; color: #333333; margin-bottom: 5px; font-weight: bold; } .tab-box { width: 100%; height: 40px; background: #fff; display: flex; box-sizing: border-box; margin-bottom: 25px; justify-content: center; } .tab_ { width: 75px; height: 100%; //border-bottom: 2px solid #FF770F; display: flex; font-weight: 500; font-size: 14px; color: #999999; align-items: center; justify-content: center; margin-left: 50px; cursor: pointer; } .active { border-bottom: 2px solid #FF770F !important; color: #FF770F !important; } </style>