<template>
<uni-popup ref="popup" type="center">
<view class="bg">
<view class="vip-card-container">
<view class="title">
开通VIP立享无限次恢复
</view>
<view class="icon-list">
<view class="item">
<image src="@/static/icon_zp.png" />
<view class="text">
照片找回
</view>
</view>
<view class="item">
<image src="@/static/icon_sp.png" />
<view class="text">
视频查找
</view>
</view>
<view class="item">
<image src="@/static/icon_wd.png" />
<view class="text">
文件速查
</view>
</view>
</view>
<view class="btn" @click="jumpPage">
立即开通
</view>
<image class="close" src="@/static/clos.png" @click="closeCard">
</image>
</view>
</view>
</uni-popup>
</template>
<script setup>
import { ref, onMounted,getCurrentInstance } from 'vue';
import { userInfoStore } from "@/store/userInfoStore.js";
import { appInfoStore } from '@/store/appInfoStore.js'
const { proxy } = getCurrentInstance();
const userStore = userInfoStore();
const appInfo = appInfoStore()
const userRef = ref()
const emit = defineEmits(['stopScan'])
const popup = ref();
onMounted(async () => {
await userStore.updateUserInfo();
const isWhite = appInfo.getisWhite()
userRef.value = userStore.getUserInfo()
if (!userRef.value.isVip && !isWhite) {
open()
}
})
const open = () => {
popup.value.open()
}
// 跳转会员页面
const jumpPage = () => {
emit('stopScan')
proxy.$toPage('/pages/vip/vip')
// toPage('/pages/vip/vip')
}
// 关闭
const closeCard = () => {
uni.reLaunch({
url: '/pages/index/index'
})
if (userRef.value.isVip) {
popup.value.close()
} else {
uni.reLaunch({
url: '/pages/index/index'
})
}
}
</script>
<style lang="scss" scoped>
.bg {
width: 50vh;
height: 1086rpx;
background-image: url('@/static/img_light_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
align-items: center;
}
.vip-card-container {
// background-color: red;
width: 586rpx;
height: 626rpx;
margin: 0rpx auto;
background-image: url('@/static/img_pop_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
.title {
margin-top: 120rpx;
height: 56rpx;
font-family: PingFang HK, PingFang HK;
font-weight: 500;
font-size: 40rpx;
color: #0F244D;
line-height: 56rpx;
text-align: center;
font-style: normal;
text-transform: none;
}
.icon-list {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
.item {
width: 108rpx;
height: 160rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
image {
width: 108rpx;
height: 108rpx;
}
.text {
height: 36rpx;
font-family: PingFang HK, PingFang HK;
font-weight: 400;
font-size: 24rpx;
color: #0F244D;
line-height: 36rpx;
text-align: center;
font-style: normal;
text-transform: none;
}
}
}
.btn {
width: 458rpx;
height: 98rpx;
background: #EB5352;
border-radius: 60rpx 60rpx 60rpx 60rpx;
color: white;
text-align: center;
line-height: 98rpx;
}
.close {
width: 64rpx;
height: 64rpx;
position: absolute;
bottom: -40rpx;
left: 50%;
transform: translateX(-50%);
}
}
</style>
0 个回复