<template> <view class="centenr"> <view class="Candywrapper"> <view class="card_box" style="background: url('../../static/imgs/czz.png') no-repeat;background-size: 100% 100%;"> <view style="margin: 13px 0px;">当前成长值</view> <view class="r-num">{{cardBalance.growthValue || 0}}</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" v-for="(item,index) in list" :key="index"> <view class="left-img"> <image src="../../static/icon/hyxf.png" mode="" v-if="item.changeType==1"></image> <image src="../../static/icon/jfdh.png" mode="" v-else></image> </view> <view style="width: 85%;"> <view class="right-box"> <view class="l-text">{{item.fromType}}</view> <view class="r-text" v-if="item.changeType==1">{{item.growthValue}}</view> <view class="r-text" v-else-if="item.changeType==0">-{{item.growthValue}}</view> <view class="r-text" v-else>0</view> </view> <view class="right-box"> <view class="">会员积分</view> <view class="">余额{{item.afterTheChange || 0}}</view> </view> <view class="right-box"> <view class="">{{item.storeName}}</view> <view class="">{{item.createTime}}</view> </view> </view> </view> <view v-if="!list || list.length==0"> <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"> </u-empty> </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">-199.00</view> </view> <view class="right-box"> <view class="">储值卡</view> <view class="">余额123456.98</view> </view> <view class="right-box"> <view class="">中建锦绣二期站</view> <view class="">2024-09-09 16:45:09</view> </view> </view> </view> <view class="bai_box"> <view class="left-img"> <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">-199.00</view> </view> <view class="right-box"> <view class="">储值卡</view> <view class="">余额123456.98</view> </view> <view class="right-box"> <view class="">中建锦绣二期站</view> <view class="">2024-09-09 16:45:09</view> </view> </view> </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> </template> <script> import request from '../../utils/request' export default { data() { return { query: { chainStoreId: '', couponType: '', useStatus: 0, pageNo: 1, pageSize: 10 }, cardBalance: {}, show: false, show1: false, value1: Number(new Date()), columns: [ ['全部类型', '消费有礼', '充值有礼', '开卡有礼', '邀请有礼', '生日有礼'] ], queryParams: { pageNo: 1, pageSize: 30, fromType: "", storeId: uni.getStorageSync("storeId"), startTime: "" }, list: [], total: 0 } }, onShow() { this.query.chainStoreId = uni.getStorageSync('chainStoreId'); this.getUserBalance() this.getList() }, onPullDownRefresh() { console.log("刷新"); this.list = [] this.queryParams = { pageNo: 1, pageSize: 30, fromType: "", storeId: uni.getStorageSync("storeId"), startTime: "" } this.getList() }, onReachBottom() { // 触底加载 if (this.list.length < this.total) { this.queryParams.pageNo++ this.getList() } }, methods: { // 获取余额信息 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/growthValueChange/queryByPageUni', method: 'get', params: this.queryParams }).then(res => { console.log(res,156); if (res.code == 200) { this.list = res.data.records this.total = res.data.total } }) }, confirm(e) { this.queryParams.pageNo = 1 if (e.value[0] == '全部类型') { this.queryParams.fromType = "" } else { this.queryParams.fromType = 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; } .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; } </style>