156 lines
4.4 KiB
Vue
156 lines
4.4 KiB
Vue
<script setup>
|
||
import { ref } from "vue";
|
||
import Container from "@/components/Container.vue";
|
||
import Avatar from "@/components/Avatar.vue";
|
||
import SButton from "@/components/SButton.vue";
|
||
import useStore from "@/store";
|
||
import { storeToRefs } from "pinia";
|
||
const store = useStore();
|
||
const { user } = storeToRefs(store);
|
||
|
||
const vipChoosen = ref(0);
|
||
|
||
const vips = [1, 3, 6, 12];
|
||
|
||
const chooseVip = (index) => {
|
||
vipChoosen.value = index;
|
||
};
|
||
|
||
const onPay = () => {
|
||
if (!user.value.id) {
|
||
return uni.showToast({
|
||
title: "请先登录",
|
||
icon: "none",
|
||
});
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<Container title="会员说明">
|
||
<view v-if="user.id" class="header">
|
||
<view>
|
||
<Avatar :src="user.avatar" :size="35" :border="true" />
|
||
<text>{{ user.nickName }}</text>
|
||
</view>
|
||
<text>5月5号到期</text>
|
||
</view>
|
||
<view class="container">
|
||
<view class="content">
|
||
<view class="title-bar">
|
||
<view />
|
||
<text>VIP 介绍</text>
|
||
</view>
|
||
<view>
|
||
<text
|
||
>射灵的的VIP服务是为了正式对战打造的专属特权，让您在激烈的射击运动中充分享受与同级别想着对战的乐趣；</text
|
||
>
|
||
<text
|
||
>VIP的收取形式灵活多样，充分考虑到了不同用户的需求。我们提供按月收取的方式，每月仅需10元，即可轻松成为VIP会员，享受一个月的尊贵特权。这种方式适合那些希望先体验VIP服务，再决定是否长期投入的用户。您可以先购买一个月的VIP，亲身感受VIP带来的种种好处，如果觉得满意，再继续选择适合自己的购买方案。而对于那些已经确定会长期参与对战，希望持续享受VIP特权的用户，我们则推出了更为优惠的一年VIP套餐。一次性购买一年的VIP，仅需100元，平均每月不到9元，您就能全年畅享VIP的所有权益。这不仅为您节省了时间和精力，还为您带来了实实在在的经济优惠。
|
||
一年的时间，足够您在对战的世界中尽情驰骋，不断挑战自我，创造属于自己的辉煌战绩。</text
|
||
>
|
||
<text
|
||
>VIP会员还将获得专属的客服支持。当您在游戏中遇到任何问题，无论是技术故障、规则疑问还是其他需要帮助的情况，都可以随时联系我们的VIP专属客服团队、他们将为您提供</text
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="content">
|
||
<view class="title-bar">
|
||
<view />
|
||
<text>成为射灵会员</text>
|
||
</view>
|
||
<view class="vip-items">
|
||
<view
|
||
v-for="(item, index) in vips"
|
||
:key="index"
|
||
:style="{
|
||
color: vipChoosen === index ? '#fff' : '#333333',
|
||
borderColor: vipChoosen === index ? '#FF7D57' : '#eee',
|
||
background:
|
||
vipChoosen === index
|
||
? '#FF7D57'
|
||
: 'linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%)',
|
||
}"
|
||
@click="chooseVip(index)"
|
||
>
|
||
{{ item }}个月会员
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<SButton :onClick="onPay">支付</SButton>
|
||
</view>
|
||
</Container>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.header {
|
||
width: calc(100% - 30px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #fff;
|
||
padding: 15px;
|
||
padding-top: 0;
|
||
font-size: 14px;
|
||
}
|
||
.header > view {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.header > view > text:last-child {
|
||
margin-left: 10px;
|
||
}
|
||
.header > text:nth-child(2) {
|
||
color: #fed847;
|
||
}
|
||
.container {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #e4e4e4;
|
||
padding-top: 10px;
|
||
}
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
padding: 15px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.title-bar {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
}
|
||
.title-bar > view:first-child {
|
||
width: 5px;
|
||
height: 15px;
|
||
border-radius: 10px;
|
||
background-color: #fed847;
|
||
margin-right: 10px;
|
||
}
|
||
.content > view:nth-child(2) {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
.content > view:nth-child(2) > text {
|
||
display: block;
|
||
margin-top: 10px;
|
||
}
|
||
.vip-items {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px;
|
||
}
|
||
.vip-items > view {
|
||
border: 1px solid #eee;
|
||
padding: 12px 0;
|
||
width: 23%;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
}
|
||
</style>
|