|
|
@@ -1,10 +1,103 @@
|
|
|
<script setup lang="ts">
|
|
|
-definePage({ name: 'charge-voucher', islogin: false, style: { navigationBarTitleText: '', navigationStyle: 'custom' } })
|
|
|
+import router from '@/router'
|
|
|
+import { StaticUrl } from '@/config'
|
|
|
+
|
|
|
+definePage({
|
|
|
+ name: 'charge-voucher',
|
|
|
+ islogin: false,
|
|
|
+ style: {
|
|
|
+ navigationBarTitleText: '',
|
|
|
+ navigationStyle: 'custom',
|
|
|
+ },
|
|
|
+})
|
|
|
+const { statusBarHeight, MenuButtonHeight, opcity } = storeToRefs(useSysStore())
|
|
|
+onMounted(() => {
|
|
|
+ opcity.value = 0
|
|
|
+})
|
|
|
+onPageScroll((e) => {
|
|
|
+ const calculatedOpacity = e.scrollTop / 100
|
|
|
+ opcity.value = Math.min(1, Math.max(0.1, calculatedOpacity))
|
|
|
+})
|
|
|
+
|
|
|
+const selectIndex = ref(0)
|
|
|
+function selectVoucher(index: number) {
|
|
|
+ selectIndex.value = index
|
|
|
+ console.log('Selected voucher index:', index)
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <view class="">
|
|
|
- view
|
|
|
+ <view class="min-h-screen" :style="{ backgroundImage: `url(${StaticUrl}/buy-center-bg.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }">
|
|
|
+ <wd-navbar
|
|
|
+ title="购券中心" :custom-style="`background-color: rgba(226, 255, 145, ${opcity})`" :bordered="false"
|
|
|
+ :z-index="99" safe-area-inset-top left-arrow fixed @click-left="router.back()"
|
|
|
+ />
|
|
|
+ <view :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }" class="px24rpx">
|
|
|
+ <view class="h-342rpx" />
|
|
|
+ <view class="relative rounded-16rpx from-[#E1FF90] via-[#FAFFEE] to-[#FFFFFF] bg-gradient-to-b p-12rpx">
|
|
|
+ <image
|
|
|
+ class="absolute right-12rpx top-12rpx h-144rpx w-144rpx"
|
|
|
+ :src="`${StaticUrl}/buy-center-cardIcon.png`"
|
|
|
+ mode="scaleToFill"
|
|
|
+ />
|
|
|
+ <view class="mt-16rpx text-center">
|
|
|
+ <view class="text-28rpx">
|
|
|
+ 平台券金额
|
|
|
+ </view>
|
|
|
+ <view class="mt-16rpx text-28rpx font-800">
|
|
|
+ 100<text class="text-24rpx">
|
|
|
+ 元
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mb-16rpx mt-28rpx flex items-center justify-around text-28rpx">
|
|
|
+ <view @click="router.push({ name: 'charge-buy-a-ticket-list' })">
|
|
|
+ 充值记录
|
|
|
+ </view>
|
|
|
+ <view class="h-40rpx w-2rpx bg-#E6E6E6" />
|
|
|
+ <view @click="router.push({ name: 'charge-buy-a-ticket-list' })">
|
|
|
+ 退款
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt-20rpx">
|
|
|
+ <view class="text-32rpx font-bold">
|
|
|
+ 本次充值
|
|
|
+ </view>
|
|
|
+ <view class="mt-24rpx flex flex-wrap items-center justify-start gap-20rpx">
|
|
|
+ <view v-for="(item, index) in 6" :key="index" class="h-136rpx w-220rpx text-center" :class="selectIndex === index ? 'text-[#9ED605]' : 'text-#2B303Ac'" :style="{ backgroundImage: `url(${StaticUrl}/${selectIndex === index ? 'buy-center-rechargesel' : 'buy-center-recharge'}.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }" @click="selectVoucher(index)">
|
|
|
+ <view class="h-80rpx text-28rpx font-bold line-height-[80rpx]">
|
|
|
+ 10<text class="text-24rpx">
|
|
|
+ 元
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="h-46rpx text-28rpx font-bold line-height-[46rpx] font-italic">
|
|
|
+ 充电优惠券
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt-24rpx">
|
|
|
+ <view class="font-bold">
|
|
|
+ 温馨提示
|
|
|
+ </view>
|
|
|
+ <view class="mt-24rpx text-24rpx text-#AAAAAA">
|
|
|
+ <view>1.平台券仅限本平台使用，不可转赠和出售。</view>
|
|
|
+ <view class="mt-20rpx">
|
|
|
+ 2.平台券仅可用于本平台充电服务，若订单金额超过平台券余额，
|
|
|
+ 需补足差价；若余额有剩余，可留存下次使用；剩余平台券余额支
|
|
|
+ 持手动退款。
|
|
|
+ </view>
|
|
|
+ <view class="mt-20rpx">
|
|
|
+ 3.平台保留调整平台券使用规则的权利，调整前将提前公告。
|
|
|
+ 如有疑问，请联系客服。
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="fixed bottom-66rpx left-24rpx h-100rpx w-702rpx rounded-16rpx bg-[linear-gradient(90deg,#DBFC81_0%,#9ED605_100%)] text-center text-28rpx font-800 line-height-[100rpx] shadow-[inset_0rpx_6rpx_20rpx_2rpx_#FFFFFF]">
|
|
|
+ 立即支付
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
