211 lines
11 KiB
Vue
211 lines
11 KiB
Vue
<route lang="json5" type="page">
|
||
{
|
||
style: {
|
||
navigationStyle: 'custom',
|
||
},
|
||
}
|
||
</route>
|
||
|
||
<template>
|
||
<view class="h-screen flex flex-col bg-[#f8f8f8] relative z-[0]">
|
||
<view class="relative">
|
||
<Navbar
|
||
safeAreaInsetTop
|
||
bg-color="transparent"
|
||
:bordered="false"
|
||
left-arrow
|
||
title="卡密兑换"
|
||
@click-left="handleClickLeft"
|
||
content-class="justify-between"
|
||
></Navbar>
|
||
<view class="bg-[#fff] rounded-[8rpx] px-[46rpx] pt-[40rpx] pb-[30rpx] mx-[30rpx] mt-[40rpx]">
|
||
<view class="flex items-center gap-[12rpx]">
|
||
<image
|
||
:src="userStore.userInfo?.avatar"
|
||
mode="scaleToFill"
|
||
class="w-[60rpx] h-[60rpx] rounded-full"
|
||
/>
|
||
<text class="text-[#000] text-[36rpx] font-bold">{{ userStore.userInfo?.nickname }}</text>
|
||
<image
|
||
src="https://api.static.ycymedu.com/sub/images/ucenter/vip-flag.png"
|
||
mode="scaleToFill"
|
||
class="w-[120rpx] h-[28rpx]"
|
||
v-if="isVIP"
|
||
/>
|
||
<image
|
||
v-else
|
||
src="https://api.static.ycymedu.com/sub/images/ucenter/no-vip.png"
|
||
mode="scaleToFill"
|
||
class="w-[120rpx] h-[28rpx]"
|
||
/>
|
||
</view>
|
||
|
||
<view class="mt-[40rpx]">
|
||
<view
|
||
class="flex items-center gap-[10rpx] px-[30rpx] py-[25rpx] rounded-[20rpx] bg-[#f5f5f5] mb-[40rpx]"
|
||
>
|
||
<view class="i-carbon-account text-[#999999]"></view>
|
||
<input
|
||
v-model="cardNumber"
|
||
type="number"
|
||
placeholder="请输入卡号"
|
||
confirm-type="done"
|
||
class="text-start flex-auto"
|
||
/>
|
||
</view>
|
||
|
||
<view
|
||
class="flex items-center gap-[10rpx] px-[30rpx] py-[25rpx] rounded-[20rpx] bg-[#f5f5f5]"
|
||
>
|
||
<view class="i-carbon-locked text-[#999999]"></view>
|
||
<input
|
||
v-model="cardPassword"
|
||
type="number"
|
||
placeholder="请输入卡密"
|
||
confirm-type="done"
|
||
class="text-start flex-auto"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<button class="submit-button" @click="handleActive" :disabled="isVIP">
|
||
{{ isVIP ? '已开通' : '立即兑换' }}
|
||
</button>
|
||
<view class="text-[#999] text-[24rpx] text-center mt-[20rpx] text-center" v-show="isVIP">
|
||
到期时间:{{ endTime }}
|
||
</view>
|
||
</view>
|
||
<view class="custom-background h-[780rpx] w-full absolute top-0 left-0 z-[-1]"></view>
|
||
</view>
|
||
|
||
<view
|
||
class="flex flex-col items-start justify-center text-[#999] text-[28rpx] px-[46rpx] mt-[60rpx]"
|
||
>
|
||
<text class="text-[#333] text-[30rpx] font-semibold mb-[20rpx]">兑换规则</text>
|
||
<text class="mb-[20rpx]">
|
||
1.适用对象：普通类文理科考生、新高考选科类考生 （提前批次及艺术体育类考生暂不适用)
|
||
</text>
|
||
<text class="mb-[20rpx]">2.使用时效：有效期截止到用户自行选择高考年的8月31日为止。</text>
|
||
<text>3.这里是兑换规则介绍详情。</text>
|
||
</view>
|
||
</view>
|
||
|
||
<MessageBox
|
||
:show="showMessageBox"
|
||
title=""
|
||
:show-close="false"
|
||
:defaultPadding="false"
|
||
default-width="472rpx"
|
||
>
|
||
<template>
|
||
<view class="mt-[60rpx] flex flex-col items-center">
|
||
<image
|
||
src="data:image/png;base64,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"
|
||
mode="aspectFit"
|
||
class="h-[112rpx]"
|
||
/>
|
||
<text class="text-[40rpx] font-semibold my-[10rpx]">兑换成功</text>
|
||
<text class="text-[28rpx] text-[#666] text-center px-[39rpx]">
|
||
您已成功兑换六纬高级会员，快去体验吧！
|
||
</text>
|
||
<view class="h-[2rpx] bg-[#E5E5E5] w-full mt-[20rpx]"></view>
|
||
<view
|
||
class="w-full text-[#9D5800] py-[26rpx] text-center text-[36rpx] font-bold"
|
||
@click="handleStart"
|
||
>
|
||
开启六纬之旅
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</MessageBox>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
|
||
import MessageBox from '@/pages-sub/components/messageBox/MessageBox.vue'
|
||
import { activeCard, getBingInfo } from '@/service/index/api'
|
||
|
||
import { useUserStore } from '@/store/user'
|
||
|
||
const userStore = useUserStore()
|
||
|
||
const cardNumber = ref('')
|
||
const cardPassword = ref('')
|
||
|
||
const isVIP = computed(() => {
|
||
return userStore.userInfo.estimatedAchievement.isVIP
|
||
})
|
||
|
||
const handleClickLeft = () => {
|
||
console.log(123)
|
||
|
||
uni.navigateBack()
|
||
}
|
||
|
||
const showMessageBox = ref(false)
|
||
|
||
const handleStart = () => {
|
||
showMessageBox.value = false
|
||
}
|
||
|
||
const handleActive = () => {
|
||
activeCard({
|
||
cardCode: cardNumber.value,
|
||
cardPwd: cardPassword.value,
|
||
}).then((res) => {
|
||
if (res.code === 200) {
|
||
showMessageBox.value = true
|
||
userStore.setIsVIP(true)
|
||
userStore.setVipCode(cardNumber.value)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.message,
|
||
icon: 'none',
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
const endTime = ref('')
|
||
|
||
onLoad(() => {
|
||
getBingInfo().then((res) => {
|
||
if (res.code === 200) {
|
||
endTime.value = (res.result as { endTime: string }).endTime
|
||
cardNumber.value = (res.result as { cardCode: string }).cardCode
|
||
}
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.custom-background {
|
||
background: linear-gradient(180deg, #fbddbf 0%, rgba(251, 221, 191, 0) 100%);
|
||
background-position: 50% 50%;
|
||
background-origin: padding-box;
|
||
background-clip: border-box;
|
||
background-size: auto auto;
|
||
}
|
||
|
||
.submit-button {
|
||
background: linear-gradient(270deg, #f9e1b5 0%, #e4be80 100%);
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
color: #9d5800;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
border-radius: 16rpx;
|
||
margin-top: 60rpx;
|
||
}
|
||
|
||
.check-style {
|
||
width: 112rpx;
|
||
height: 112rpx;
|
||
background: linear-gradient(270deg, #f9e1b5 0%, #e4be80 100%);
|
||
box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(228, 190, 128, 0.2);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style>
|