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)
// up-datetime-picker 返回字符串格式，FilterTime 返回数组格式
const filterValue = ref<string[] | string>([])
function confirm(value) {
  // up-datetime-picker 组件确认时保持字符串格式 YYYY-MM
  console.log(111, value)
  filterValue.value = changtime(value.value, 'YYYY年MM月')
    show.value = false
}
function cancel() {
  show.value = false
}
function close() {
  show.value = false
}
function showTimeFilter() {
  show.value = true
}

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

// 格式化时间显示
function formatTimeDisplay() {
  console.log('formatTimeDisplay1111', filterValue.value)
  // 处理 filterValue 是字符串的情况（单个月份）
  if (typeof filterValue.value === 'string') {
    return filterValue.value
  }
  // 处理 filterValue 是数组的情况（时间范围）
  if (!filterValue.value || !filterValue.value[0] || !filterValue.value[1]) {
    // 当天的YYYY年MM月
    return changtime(new Date(), 'YYYY年MM月')
  }
  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
            :value="Array.isArray(filterValue) ? filterValue[0] : filterValue"
            mode="year-month"
            :show="show"
            close-on-click-overlay
            @confirm="(value) => {
                // filterValue.value = value;
                confirm(value);
            }"
            @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>