|
@@ -1,53 +1,21 @@
|
|
|
<template>
|
|
|
- <Container title="VIP充值">
|
|
|
+ <Container title="VIP充值" bgColor="#f8f8f8" headerColor="#fff">
|
|
|
<view class="recharge-main">
|
|
|
<!-- 内容区 -->
|
|
|
<view class="content">
|
|
|
<!-- 套餐选择 -->
|
|
|
<view class="plan-list">
|
|
|
- <view class="p"
|
|
|
- ><view
|
|
|
- class="plan-card"
|
|
|
- :class="activeCurrent === 1 && 'active'"
|
|
|
- @click="activeCurrent = 1"
|
|
|
- >
|
|
|
- <view class="plan-title">
|
|
|
- {{ data[1]?.package_name }}
|
|
|
- <text class="plan-tag" v-if="data[1]?.is_automatic_renewal">首月</text>
|
|
|
- </view>
|
|
|
- <view class="plan-price">
|
|
|
- <text class="price">{{
|
|
|
- data[1]?.automatic_renewal_first_price
|
|
|
- }}</text>
|
|
|
- <view class="plan-origin"
|
|
|
- >¥{{ data[1]?.package_original_price }}</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="plan-tip"
|
|
|
- v-if="data[1]?.is_automatic_renewal"
|
|
|
- :style="{
|
|
|
- opacity: activeCurrent === 1 ? 1 : 0,
|
|
|
- }"
|
|
|
- >每期自动续费{{
|
|
|
- data[1]?.automatic_renewal_price
|
|
|
- }}元,可取消</view
|
|
|
- ></view
|
|
|
- >
|
|
|
-
|
|
|
<view
|
|
|
class="plan-card"
|
|
|
- :class="activeCurrent === 0 && 'active'"
|
|
|
- @click="activeCurrent = 0"
|
|
|
+ v-for="(item, index) in data"
|
|
|
+ :class="activeCurrent === index && 'active'"
|
|
|
+ @click="activeCurrent = index"
|
|
|
>
|
|
|
- <view class="plan-title">{{ data[0]?.package_name }}</view>
|
|
|
+ <view class="plan-title">{{ item?.package_name }}</view>
|
|
|
<view class="plan-price">
|
|
|
- <text class="price">{{
|
|
|
- data[0]?.package_preferential_price
|
|
|
- }}</text>
|
|
|
+ <text class="price">{{ item?.package_preferential_price }}</text>
|
|
|
<view class="plan-origin"
|
|
|
- >¥{{ data[0]?.package_original_price }}</view
|
|
|
+ >¥{{ item?.package_original_price }}</view
|
|
|
>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -55,15 +23,15 @@
|
|
|
|
|
|
<!-- 权益展示 -->
|
|
|
<div class="title">权益展示</div>
|
|
|
- <view class="benefit" v-show="activeCurrent === 1">
|
|
|
- <view v-for="item in data[1]?.binding_rights_info" :key="item.id">{{
|
|
|
- item.authority_title
|
|
|
- }}</view>
|
|
|
- </view>
|
|
|
- <view class="benefit" v-show="activeCurrent === 0">
|
|
|
- <view v-for="item in data[0]?.binding_rights_info" :key="item.id">{{
|
|
|
- item.authority_title
|
|
|
- }}</view>
|
|
|
+ <view class="benefit">
|
|
|
+ <view
|
|
|
+ v-for="(item, i) in data[activeCurrent]?.binding_rights_info"
|
|
|
+ :key="item.id"
|
|
|
+ class="benefit-item"
|
|
|
+ >
|
|
|
+ <view class="t">权益{{ i + 1 }}</view>
|
|
|
+ {{ item.authority_title }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 底部按钮 -->
|
|
@@ -112,16 +80,16 @@ import ext from "../../ext.json";
|
|
|
|
|
|
const instance = getCurrentInstance();
|
|
|
|
|
|
-const activeCurrent = ref(1);
|
|
|
+const activeCurrent = ref(0);
|
|
|
const isSelected = ref([0]);
|
|
|
const data = ref([]);
|
|
|
|
|
|
const onSubmit = () => {
|
|
|
- // if (!isSelected.value[0])
|
|
|
- // return uni.showToast({
|
|
|
- // icon: "none",
|
|
|
- // title: "请阅读并确认",
|
|
|
- // });
|
|
|
+ if (!isSelected.value[0])
|
|
|
+ return uni.showToast({
|
|
|
+ icon: "none",
|
|
|
+ title: "请阅读并确认",
|
|
|
+ });
|
|
|
uni.login({
|
|
|
provider: instance.proxy.$mpPlatform.substring(3),
|
|
|
success: async ({ code }) => {
|
|
@@ -176,7 +144,6 @@ onMounted(async () => {
|
|
|
.recharge-main {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- background: #fff;
|
|
|
position: relative;
|
|
|
padding-bottom: 120rpx; // 预留底部按钮高度
|
|
|
}
|
|
@@ -219,8 +186,7 @@ onMounted(async () => {
|
|
|
gap: 52rpx;
|
|
|
color: #666666;
|
|
|
&.active {
|
|
|
- color: $uni-primary;
|
|
|
- border-color: $uni-primary;
|
|
|
+ border-color: #e7c8ac;
|
|
|
}
|
|
|
.plan-title {
|
|
|
font-size: 28rpx;
|
|
@@ -246,6 +212,7 @@ onMounted(async () => {
|
|
|
.price {
|
|
|
font-size: 60rpx;
|
|
|
font-weight: bold;
|
|
|
+ color: $error;
|
|
|
::before {
|
|
|
content: "¥";
|
|
|
font-size: 32rpx;
|
|
@@ -268,10 +235,34 @@ onMounted(async () => {
|
|
|
}
|
|
|
|
|
|
.benefit {
|
|
|
- border: 2rpx solid $default;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.benefit-item {
|
|
|
border-radius: 12rpx;
|
|
|
- padding: 24rpx;
|
|
|
+ padding: 32rpx 24rpx;
|
|
|
font-weight: bold;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 24rpx;
|
|
|
+
|
|
|
+ .t {
|
|
|
+ width: 105rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ background: linear-gradient(90deg, #f0dfcd 0%, #e7c8ac 100%);
|
|
|
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #000000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
view {
|
|
|
font-size: 28rpx;
|
|
|
color: #333;
|
|
@@ -317,8 +308,8 @@ onMounted(async () => {
|
|
|
|
|
|
.open-btn {
|
|
|
width: 100%;
|
|
|
- background: $uni-primary;
|
|
|
- color: #fff;
|
|
|
+ background: linear-gradient(90deg, #f0dfcd 0%, #e7c8ac 100%);
|
|
|
+ color: #000;
|
|
|
font-size: 32rpx;
|
|
|
border-radius: 12rpx;
|
|
|
height: 88rpx;
|
|
@@ -328,7 +319,7 @@ onMounted(async () => {
|
|
|
border: none;
|
|
|
margin-top: 0;
|
|
|
&:active {
|
|
|
- background: $uni-primary-disable;
|
|
|
+ background: linear-gradient(90deg, #f0dfcd 0%, #e7c8ac 100%);
|
|
|
}
|
|
|
}
|
|
|
</style>
|