couponCenter_mpapp/src/pages-A/withdrawalDetails/index.vue

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import FilterTime from '@/components/FilterTime.vue'
import { LOGIN_PAGE } from '@/router/config'
import { useUserStore } from '@/store'
import { useTokenStore } from '@/store/token'
import { changtime, menuButtonInfo, safeAreaInsets, systemInfo } from '@/utils'

definePage({
    style: {
        navigationBarTitleText: '提现明细',
    },
})

const userStore = useUserStore()
const tokenStore = useTokenStore()
// 使用storeToRefs解构userInfo
const { userInfo } = storeToRefs(userStore)

function menuClick(page: string) {
    uni.navigateTo({
        url: `/pages-A/${page}/index`,
    })
}

const show = ref(false)
const filterValue = ref<string[]>([])
function confirm() {
    // 函数实现
    show.value = false
}
function cancel() {
    show.value = false
}
function close() {
    show.value = false
}
function showTimeFilter() {
    show.value = true
}

// 处理时间选择变化
function handleTimeChange(value: string[]) {
    console.log('时间选择变化', value)
    filterValue.value = value
}

// 格式化时间显示
function formatTimeDisplay() {
    if (!filterValue.value || filterValue.value[0] === '' || filterValue.value[1] === '') {
        return '全部时间'
    }
    return `${filterValue.value[0]} 至 ${filterValue.value[1]}`
}
const wjsList = ref([
    {
        id: 1,
        nickName: '昵称1',
        name: '优惠券1',
        price: 1000,
        date: '2023-08-01 10:00:00',
    },
    {
        id: 2,
        nickName: '昵称2',
        name: '优惠券2',
        price: 1300,
        date: '2023-10-01 10:00:00',
    },
])
const yjsList = ref([
    {
        id: 1,
        nickName: '昵称3',
        name: '优惠券3',
        price: 2300,
        date: '2023-10-01 10:00:00',
    },
    {
        id: 2,
        nickName: '昵称4',
        name: '优惠券4',
        price: 300,
        date: '2023-10-01 10:00:00',
    },
])
const list = ref([])
onLoad(() => {
    list.value = [...wjsList.value]
})

function goPage(page: string) {
    uni.navigateTo({
        url: `/pages-A/${page}/index`,
    })
}

const filterTimeRef = ref()
function openDatePicker() {
    // 调用子组件的方法
    filterTimeRef.value.openPopup()
}
</script>

<template>
    <view class="profile-container">
        <!-- 时间筛选 -->
        <view class="income-menu-time-filter">
            <view class="income-menu-time-filter-left">
                <view class="income-menu-time-filter-text" @click="showTimeFilter">
                    <text>{{ formatTimeDisplay() }}</text>
                    <up-icon name="arrow-down" color="#666666" size="14" />
                </view>
                <view>合计：￥4396.00</view>
            </view>
            <view class="income-menu-time-filter-right" @click="openDatePicker">
                日期筛选
            </view>
        </view>
        <view class="income-header-menu">
            <!-- 优惠券列表 -->
            <view class="income-header-menu-list">
                <view v-for="item in list" :key="item.id" class="income-header-menu-item">
                    <view class="income-header-menu-icon">
                        <image src="@/static/images/income/tx-icon.png" mode="aspectFit" />
                        <view class="income-header-menu-text">
                            <view class="income-header-menu-text-nickname">
                                提现金额
                            </view>
                            <view>2025/10/29  12:44:26</view>
                        </view>
                    </view>
                    <view class="income-header-menu-left">
                        <view class="income-header-menu-left-amount">
                            ￥{{ item.price }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <up-datetime-picker
            v-model="filterValue"
            mode="year-month"
            :show="show"
            close-on-click-overlay
            @confirm="confirm"
            @cancel="cancel"
        />
        <FilterTime ref="filterTimeRef" v-model="filterValue" @update:value="handleTimeChange" />
    </view>
</template>

<style lang="scss" scoped>
.profile-container {
  font-family: Alibaba PuHuiTi;
  min-height: 100vh;
  background-color: #f5f5f5;
  line-height: 1;
  padding: 20rpx;
  .income-menu-time-filter {
    height: 83rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 400;
    font-size: 24rpx;
    color: #333333;
    .income-menu-time-filter-left {
      display: flex;
      align-items: center;
      gap: 39rpx;
      .income-menu-time-filter-text {
        font-weight: 400;
        font-size: 26rpx;
        color: #000000;
        display: flex;
        align-items: center;
        gap: 12rpx;
      }
    }
    .income-menu-time-filter-right {
      font-weight: 400;
      font-size: 26rpx;
      color: #1777ff;
      display: flex;
      align-items: center;
    }
  }
  .income-header-menu {
    .income-header-menu-list {
      background: #ffffff;
      border-radius: 10rpx;
      .income-header-menu-item {
        height: 88rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eeeeee;
        padding: 32rpx 0 29rpx;
        margin: 0 26rpx;
        &:last-child {
          border-bottom: none;
        }
        .income-header-menu-icon {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 19rpx;
          image {
            width: 60rpx;
            height: 60rpx;
          }
          .income-header-menu-text {
            font-weight: 400;
            font-size: 24rpx;
            color: #888888;
            .income-header-menu-text-nickname {
              font-size: 28rpx;
              color: #222222;
              margin-bottom: 18rpx;
            }
          }
        }
        .income-header-menu-left {
          height: 100%;
          line-height: 100%;
          font-weight: 500;
          font-size: 24rpx;
          color: #888888;
          display: flex;
          align-items: center;
          .income-header-menu-left-amount {
            font-size: 30rpx;
            color: #222222;
            margin-bottom: 18rpx;
          }
        }
      }
    }
  }
}
</style>