city-gather/src/subPack-refueling/activityList/index.vue

<script setup lang="ts">
import router from '@/router'
import { StaticUrl } from '@/config'

definePage({
  name: 'activityList',
  islogin: true,
  style: {
    navigationBarTitleText: '活动中心',
    navigationStyle: 'custom',
  },
})
const showModel = ref(false)
const clickItem = ref<Api.CouponInfoAppVo>()
const { data, isLastPage, page, send } = usePagination((pageNum, pageSize) => Apis.app.get_smqjh_system_app_api_coupon_page({ params: {
  pageNum,
  pageSize,
} }), {
  initialPage: 1,
  initialPageSize: 10,
  data: res => res.data?.list,
  append: true,
  immediate: false,
})
onShow(() => {
  data.value = []
  send()
},
)

// 查看详情
function handleViewDetail(item: any) {
  router.push({
    name: 'activityCenter-detail',
    params: { id: item.id },
  })
}

onReachBottom(() => {
  if (!isLastPage.value) {
    page.value++
  }
})
function handleExchange(item: Api.CouponInfoAppVo) {
  showModel.value = true
  clickItem.value = item
}
</script>

<template>
  <view class="activity-list-page px24rpx pt20rpx">
    <!-- 活动卡片列表 -->
    <view
      v-for="item in data"
      :key="item.id"
      class="activity-card mb24rpx overflow-hidden rounded-16rpx bg-white"
    >
      <view class="page-box flex flex-1 items-start justify-between px24rpx py28rpx">
        <view class="flex-1">
          <!-- 标题 -->
          <view class="text-32rpx font-semibold">
            {{ item.activityName }}
          </view>
          <!-- 抵扣信息 -->
          <view class="mt16rpx text-28rpx text-#333">
            抵扣{{ item.discountMoney }}元（满{{ item.amountMoney }}元可用）
          </view>
          <!-- 有效期 -->
          <view class="mt12rpx text-26rpx text-#666">
            有效期：{{ item.expirationTime ? item.expirationTime : `领取过后${item.expirationDate}天有效` }}
          </view>
          <!-- 已领取数量 -->
          <view class="mt12rpx text-26rpx text-#666">
            已领取：{{ Number(item.inventoryTotal) - Number(item.inventoryActual) }} / {{ item.inventoryTotal }}
          </view>
          <!-- 状态 -->
          <view v-if="item.receiveSign" class="mt12rpx text-26rpx text-#666">
            状态：已领取
          </view>
        </view>

        <!-- 右侧礼包图片 -->
        <image
          :src="`${StaticUrl}/smqjh-jy-center.png`"
          class="ml20rpx h212rpx w212rpx flex-shrink-0"
        />
      </view>

      <!-- 底部按钮 -->
      <view class="flex justify-center pb28rpx">
        <wd-button
          v-if="!item.receiveSign"
          size="small"
          custom-class="exchange-btn"
          @click="handleExchange(item)"
        >
          积分兑换
        </wd-button>
        <wd-button
          v-else
          size="small"
          plain
          custom-class="detail-btn"
          @click="handleViewDetail(item)"
        >
          查看详情
        </wd-button>
      </view>
    </view>
    <StatusTip v-if="!data.length" tip="暂无活动" />
    <IntegralPopup v-model="showModel" :coupon-id="String(clickItem?.id)" />
  </view>
</template>

<style lang="scss" scoped>
:deep(.exchange-btn) {
  min-width: 180rpx !important;
  border-radius: 32rpx !important;
}

:deep(.detail-btn) {
  min-width: 180rpx !important;
  border-radius: 32rpx !important;
  border-color: var(--them-color) !important;
  color: var(--them-color) !important;
}
.page-box{
  background: linear-gradient( 180deg, #FFDCDC 0%, #FFF8F8 36.01%, #FFFFFF 100%);
}
</style>