82 lines
2.3 KiB
Vue
82 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { reactive, ref, computed } from "vue"
|
|
import { onLoad, onShow } from "@dcloudio/uni-app"
|
|
|
|
import { SERVICE_IMAGE } from "@@/constant/index"
|
|
import { filePath } from "@@/utils/file"
|
|
import uqrcode from "@@/utils/uqrcode"
|
|
|
|
import { applyApi } from "@@/api"
|
|
|
|
const showQrCodeDialog = ref(false)
|
|
|
|
const state = reactive({
|
|
actId: ''
|
|
})
|
|
|
|
onLoad((options: any) => {
|
|
state.actId = options.actId
|
|
getQrcodeDetail()
|
|
})
|
|
|
|
const getQrcodeDetail = async () => {
|
|
const { data = {} } = await applyApi.getCodeById({ id: state.actId })
|
|
if (!data.shortCode) {
|
|
uni.showToast({ title: "优惠券错误", icon: "none" })
|
|
return
|
|
}
|
|
uqrcode.make({
|
|
canvasId: "qrcodeId",
|
|
text: data.shortCode,
|
|
size: 100,
|
|
margin: 0,
|
|
success: (res) => { },
|
|
complete: () => { },
|
|
})
|
|
}
|
|
|
|
const doViewQrcode = async () => {
|
|
const { data = {} } = await applyApi.getCodeById({ id: state.actId })
|
|
if (!data.shortCode) {
|
|
uni.showToast({ title: "优惠券错误", icon: "none" })
|
|
return
|
|
}
|
|
showQrCodeDialog.value = true
|
|
uqrcode.make({
|
|
canvasId: "viewQrcodeId",
|
|
text: data.shortCode,
|
|
size: 200,
|
|
margin: 0,
|
|
success: (res) => { },
|
|
complete: () => { },
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<crud-layout tabBarType="just-flot-back" :bg="filePath(SERVICE_IMAGE.blueBg)">
|
|
<view class="h-30rpx"></view>
|
|
<view class="size-full relative">
|
|
<image class="w-650rpx h-1030rpx p-10rpx rounded-12rpx" :src="filePath(SERVICE_IMAGE.birthdayCoupon)"
|
|
mode="aspectFit" />
|
|
<view class="z-100 size-120px absolute left-20rpx top-600rpx flex-row-center bg-white p-20rpx rounded-12rpx"
|
|
@tap="doViewQrcode">
|
|
<canvas canvas-id="qrcodeId" class="size-100px" />
|
|
</view>
|
|
</view>
|
|
<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="viewQrcodeId" class="size-200px" />
|
|
</view>
|
|
</tm-drawer>
|
|
</crud-layout>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.layout_main {
|
|
padding: 0 !important;
|
|
}
|
|
</style> |