smqjh-refuel/src/pages/activityCenter/index.vue

<script setup lang="ts">
import type { CouponInfoAppVo } from '@/api/globals'

definePage({
  name: 'activityCenter-detail',
  islogin: true,
  style: {
    navigationBarTitleText: '活动详情',
    navigationStyle: 'custom',
  },
})

const staticUrl = import.meta.env.VITE_STATIC_BASE_URL
const couponInfo = ref<CouponInfoAppVo>()

const { send } = useRequest(couponId => Apis.app.get_smqjh_system_app_api_coupon_findbyid({ params: { couponId } }), {
  immediate: false,
}).onSuccess((res) => {
  couponInfo.value = res.data.data
})

onLoad((options: any) => {
  send(options.id)
})

// 抵扣信息文案
const discountText = computed(() => {
  if (!couponInfo.value)
    return ''
  const discount = (couponInfo.value.discountMoney || 0) / 100
  const amount = (couponInfo.value.amountMoney || 0) / 100
  return `抵扣${discount}元（满${amount}元可用）`
})

// 活动状态
const activityStatus = computed(() => {
  if (!couponInfo.value)
    return ''
  const now = Date.now()
  const start = couponInfo.value.couponStartTime ? new Date(couponInfo.value.couponStartTime).getTime() : 0
  const end = couponInfo.value.couponEndTime ? new Date(couponInfo.value.couponEndTime).getTime() : 0

  if (start && now < start)
    return '未开始'
  if (end && now > end)
    return '已结束'
  return '进行中'
})

// 活动规则
const rules = computed(() => [
  {
    title: '1.抵扣券',
    items: [discountText.value],
  },
  {
    title: '2.使用限制',
    items: ['每单限用1张', '不可与其他优惠同享'],
  },
  {
    title: '3.使用油站',
    items: ['全部合作油站', '部分油站不可用'],
  },
  {
    title: '4.有效期',
    items: [`领取后${couponInfo.value?.expirationDate || 7}天内有效`],
  },
])

// 领取活动
function handleClaim() {
  useUserStore().handleExchange(couponInfo.value)
}
</script>

<template>
  <view v-if="couponInfo" class="activity-page pt20rpx">
    <!-- 活动卡片 -->
    <view class="mx24rpx overflow-hidden rounded-16rpx">
      <view class="pages-bg flex items-center justify-between px24rpx py28rpx">
        <view>
          <view class="text-32rpx text-#333 font-semibold">
            {{ couponInfo.activityName }}
          </view>
          <view class="mt12rpx text-28rpx">
            {{ discountText }}
          </view>
        </view>
        <image
          :src="`${staticUrl}/smqjh-jy-center.png`"
          class="h156rpx w156rpx"
        />
      </view>
    </view>

    <!-- 活动状态信息 -->
    <view class="mx24rpx mt20rpx rounded-16rpx bg-white px24rpx py28rpx">
      <view class="flex items-center text-28rpx">
        <view class="text-#666">
          活动状态：
        </view>
        <view class="text-#333">
          {{ activityStatus }}
        </view>
      </view>
      <view class="mt20rpx flex items-center text-28rpx">
        <view class="text-#666">
          活动ID：
        </view>
        <view class="text-#333">
          {{ couponInfo.activityId }}
        </view>
      </view>
      <view class="mt20rpx flex items-center text-28rpx">
        <view class="text-#666">
          剩余库存：
        </view>
        <view class="text-#333">
          {{ couponInfo.inventoryActual }}张
        </view>
      </view>
    </view>

    <!-- 活动规则 -->
    <view class="mx24rpx mt20rpx rounded-16rpx bg-white px24rpx py28rpx">
      <view class="text-32rpx text-#333 font-semibold">
        活动规则
      </view>
      <view v-for="(rule, index) in rules" :key="index" class="mt24rpx">
        <view class="text-28rpx text-#333 font-medium">
          {{ rule.title }}
        </view>
        <view v-for="(item, idx) in rule.items" :key="idx" class="mt12rpx text-26rpx text-#666">
          · {{ item }}
        </view>
      </view>
    </view>

    <!-- 底部占位 -->
    <view class="h200rpx" />
  </view>

  <!-- 底部固定按钮 -->
  <FixedLayout>
    <wd-button
      block
      size="large"
      :disabled="couponInfo?.receiveSign || activityStatus !== '进行中'"
      @click="handleClaim"
    >
      {{ couponInfo?.receiveSign ? '已领取' : '立即领取' }}
    </wd-button>
  </FixedLayout>
</template>

<style lang="scss" scoped>
.pages-bg{
  background: linear-gradient( 180deg, #FFDCDC 0%, #FFFFFF 100%);
}
</style>