|
|
@@ -1,4 +1,6 @@
|
|
|
<script setup lang="ts">
|
|
|
+import type { CouponInfoAppVo } from '@/api/globals'
|
|
|
+
|
|
|
definePage({
|
|
|
name: 'activityCenter-detail',
|
|
|
islogin: true,
|
|
|
@@ -8,20 +10,48 @@ definePage({
|
|
|
},
|
|
|
})
|
|
|
|
|
|
-// 活动数据
|
|
|
-const activityInfo = ref({
|
|
|
- title: '企业用户专享礼包',
|
|
|
- discount: '抵扣15元(满100元可用)',
|
|
|
- status: '进行中',
|
|
|
- activityId: 'SDIE-DLEIJ-31095',
|
|
|
- stock: 168,
|
|
|
-})
|
|
|
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 = ref([
|
|
|
+const rules = computed(() => [
|
|
|
{
|
|
|
title: '1.抵扣券',
|
|
|
- items: ['抵扣15元(满100元可用)'],
|
|
|
+ items: [discountText.value],
|
|
|
},
|
|
|
{
|
|
|
title: '2.使用限制',
|
|
|
@@ -33,28 +63,27 @@ const rules = ref([
|
|
|
},
|
|
|
{
|
|
|
title: '4.有效期',
|
|
|
- items: ['领取后7天内有效'],
|
|
|
+ items: [`领取后${couponInfo.value?.expirationDate || 7}天内有效`],
|
|
|
},
|
|
|
])
|
|
|
|
|
|
// 领取活动
|
|
|
function handleClaim() {
|
|
|
- // TODO: 调用领取接口
|
|
|
- useGlobalToast().show('领取成功')
|
|
|
+ useUserStore().handleExchange(couponInfo.value)
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <view class="activity-page pt20rpx">
|
|
|
+ <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">
|
|
|
- {{ activityInfo.title }}
|
|
|
+ {{ couponInfo.activityName }}
|
|
|
</view>
|
|
|
<view class="mt12rpx text-28rpx">
|
|
|
- {{ activityInfo.discount }}
|
|
|
+ {{ discountText }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<image
|
|
|
@@ -71,7 +100,7 @@ function handleClaim() {
|
|
|
活动状态:
|
|
|
</view>
|
|
|
<view class="text-#333">
|
|
|
- {{ activityInfo.status }}
|
|
|
+ {{ activityStatus }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="mt20rpx flex items-center text-28rpx">
|
|
|
@@ -79,7 +108,7 @@ function handleClaim() {
|
|
|
活动ID:
|
|
|
</view>
|
|
|
<view class="text-#333">
|
|
|
- {{ activityInfo.activityId }}
|
|
|
+ {{ couponInfo.activityId }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="mt20rpx flex items-center text-28rpx">
|
|
|
@@ -87,7 +116,7 @@ function handleClaim() {
|
|
|
剩余库存:
|
|
|
</view>
|
|
|
<view class="text-#333">
|
|
|
- {{ activityInfo.stock }}张
|
|
|
+ {{ couponInfo.inventoryActual }}张
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -113,8 +142,13 @@ function handleClaim() {
|
|
|
|
|
|
<!-- 底部固定按钮 -->
|
|
|
<FixedLayout>
|
|
|
- <wd-button block size="large" @click="handleClaim">
|
|
|
- 立即领取
|
|
|
+ <wd-button
|
|
|
+ block
|
|
|
+ size="large"
|
|
|
+ :disabled="couponInfo?.receiveSign || activityStatus !== '进行中'"
|
|
|
+ @click="handleClaim"
|
|
|
+ >
|
|
|
+ {{ couponInfo?.receiveSign ? '已领取' : '立即领取' }}
|
|
|
</wd-button>
|
|
|
</FixedLayout>
|
|
|
</template>
|