113 lines
3.3 KiB
Vue
113 lines
3.3 KiB
Vue
<template>
|
|
<crud-layout mainIsScroll bg="/static/page/blue-bg.png">
|
|
<view class="px-2 py-4">
|
|
<view class="card w-full h-400rpx relative activity-card overflow-hidden">
|
|
<view class="ribbon">兑换券</view>
|
|
<view class="px-8 pt-5 flex justify-between items-center font-bold">
|
|
<text class="text-32 c-#FF4F3F">限时领取</text>
|
|
<text class="text-30 c-#FF4F3F px-1 rounded-full bg-#eeeeee44">2025-09-21~2025-12-20</text>
|
|
</view>
|
|
<view class="w-4/5 px-8 pt-4 text-30 c-#fff">店内核销将会自动扣费1元并领取价值89元的速干T恤1件</view>
|
|
<view class="absolute bottom-60 left-60 text-28 bg-#eeeeee44 c-#fff px-2 rounded-full">限量领取 先领先得</view>
|
|
</view>
|
|
<view v-if="isGet" class="text-center card p-3 sub-text-30">已 领 取</view>
|
|
<view v-else class="text-center card p-3 sub-text-30" @click="doGetCoupon">立 即 领 取</view>
|
|
<view v-if="isGet" class="text-center">
|
|
<tm-button class="px-2 my-4" @click="CouponVerification">我的核销码</tm-button>
|
|
</view>
|
|
</view>
|
|
</crud-layout>
|
|
|
|
<tm-drawer z-index="100" v-model:show="showQrCodeDialog" title="兑换券核销二维码" :show-close="true" position="bottom" size="60%">
|
|
<view class="flex-col-center">
|
|
<view class="h-80rpx" />
|
|
<canvas canvas-id="qrcodeId" class="size-200px" />
|
|
</view>
|
|
</tm-drawer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { actCancel } from "@/sheep/api"
|
|
import { onLoad } from "@dcloudio/uni-app"
|
|
import { ref } from "vue"
|
|
import uqrcode from "@@/utils/uqrcode"
|
|
import * as CryptoJS from "crypto-js"
|
|
|
|
const isGet = ref(false) // 是否已领取
|
|
const couponInfo = ref<any>(null)
|
|
const showQrCodeDialog = ref(false)
|
|
|
|
onLoad(() => {
|
|
getCouponInfo()
|
|
})
|
|
|
|
// 获取优惠券信息
|
|
const getCouponInfo = async () => {
|
|
try {
|
|
uni.showLoading({ title: "加载中...", mask: true })
|
|
const { code, data }: any = await actCancel.appFindUnique()
|
|
if (code != 0) {
|
|
isGet.value = false
|
|
return
|
|
}
|
|
couponInfo.value = data
|
|
isGet.value = true
|
|
} catch (error) {
|
|
uni.showToast({ title: "加载失败", icon: "none" })
|
|
} finally {
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
|
|
// 领取兑换券
|
|
const doGetCoupon = async () => {
|
|
try {
|
|
uni.showLoading({ title: "正在领取..." })
|
|
const { code, msg }: any = await actCancel.appGet({})
|
|
if (code != 0) return uni.showToast({ title: msg || "领取失败", icon: "none" })
|
|
uni.showToast({ title: "领取成功", icon: "success" })
|
|
await getCouponInfo()
|
|
} catch (error: any) {
|
|
uni.showToast({ title: "领取失败", icon: "none" })
|
|
} finally {
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
|
|
// 券核销
|
|
const CouponVerification = async () => {
|
|
showQrCodeDialog.value = true
|
|
const words = CryptoJS.enc.Utf8.parse(JSON.stringify({ actId: couponInfo.value.id, totalPrice: 1 }))
|
|
uqrcode.make({
|
|
canvasId: "qrcodeId",
|
|
text: CryptoJS.enc.Base64.stringify(words),
|
|
size: 200,
|
|
margin: 0,
|
|
success: (res) => {},
|
|
complete: () => {},
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.activity-card {
|
|
background-image: url("../../static/page/activity-card-bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position: 150%;
|
|
background-color: #1879ff77;
|
|
}
|
|
.ribbon {
|
|
width: 160rpx;
|
|
height: 40rpx;
|
|
background: #dd0d1f;
|
|
position: absolute;
|
|
left: -40rpx;
|
|
top: 20rpx;
|
|
transform: rotateZ(-45deg);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
}
|
|
</style>
|