|
|
@@ -1,762 +1,1095 @@
|
|
|
<template>
|
|
|
- <view class="benefits-page" :style="{ paddingTop: (12 + statusBarHeight + 44) + 'px' }">
|
|
|
- <!-- 顶部导航栏 -->
|
|
|
- <view class="nav-bar" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
|
|
|
- <view class="nav-content">
|
|
|
- <view class="nav-left" @click="goBack">
|
|
|
- <u-icon name="arrow-leftward" color="rgba(255, 255, 255, 1)" size="42"></u-icon>
|
|
|
- </view>
|
|
|
- <view class="nav-title">我的权益</view>
|
|
|
- <view class="nav-right"></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 当前会员状态卡片 -->
|
|
|
- <view class="membership-card">
|
|
|
- <view class="card-content">
|
|
|
- <view class="card-left">
|
|
|
- <view class="card-title">我的权益</view>
|
|
|
- <view class="card-subtitle">常规版 剩余5天到期</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="card-right">
|
|
|
- <view class="benefit-item">
|
|
|
- <view class="benefit-label">查看权益</view>
|
|
|
- <view class="benefit-count">10/50</view>
|
|
|
- </view>
|
|
|
- <view class="benefit-item">
|
|
|
- <view class="benefit-label">沟通权益</view>
|
|
|
- <view class="benefit-count">10/50</view>
|
|
|
- </view>
|
|
|
- <view class="benefit-item">
|
|
|
- <view class="benefit-label">普通职位</view>
|
|
|
- <view class="benefit-count">10/50</view>
|
|
|
- </view>
|
|
|
- <view class="benefit-item">
|
|
|
- <view class="benefit-label">急聘职位</view>
|
|
|
- <view class="benefit-count">10/50</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 购买VIP享受更多权益 -->
|
|
|
- <view class="benefits-section">
|
|
|
- <!-- 权益对比表格 -->
|
|
|
- <view class="benefits-table">
|
|
|
- <view class="section-title">购买VIP, 享受更多权益</view>
|
|
|
- <!-- 表头 -->
|
|
|
- <view class="table-header">
|
|
|
- <view class="header-cell benefit-type">权益类型</view>
|
|
|
- <view class="header-cell basic">基础权益</view>
|
|
|
- <view class="header-cell regular active">
|
|
|
- <!-- <view class="plan-tag">生效中</view> -->
|
|
|
- <view class="plan-name">常规版</view>
|
|
|
- <view class="plan-expire">剩余5天到期</view>
|
|
|
- </view>
|
|
|
- <view class="header-cell vip">VIP版</view>
|
|
|
- <view class="header-cell flagship recommended">
|
|
|
- <view class="plan-tag">推荐</view>
|
|
|
- <view class="plan-name">旗舰版</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 表格内容 -->
|
|
|
- <view class="table-row">
|
|
|
- <view class="row-cell benefit-type">在线普通职位</view>
|
|
|
- <view class="row-cell basic">10个</view>
|
|
|
- <view class="row-cell regular">35个</view>
|
|
|
- <view class="row-cell vip">45个</view>
|
|
|
- <view class="row-cell flagship">不限</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="table-row">
|
|
|
- <view class="row-cell benefit-type">在线急聘职位</view>
|
|
|
- <view class="row-cell basic">0个</view>
|
|
|
- <view class="row-cell regular">5个</view>
|
|
|
- <view class="row-cell vip">15个</view>
|
|
|
- <view class="row-cell flagship">50个</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="table-row">
|
|
|
- <view class="row-cell benefit-type">每日查看总数</view>
|
|
|
- <view class="row-cell basic">20个</view>
|
|
|
- <view class="row-cell regular">50个</view>
|
|
|
- <view class="row-cell vip">不限</view>
|
|
|
- <view class="row-cell flagship">不限</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="table-row">
|
|
|
- <view class="row-cell benefit-type">每日沟通总数</view>
|
|
|
- <view class="row-cell basic">5个</view>
|
|
|
- <view class="row-cell regular">20个</view>
|
|
|
- <view class="row-cell vip">50个</view>
|
|
|
- <view class="row-cell flagship">100个</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="table-row">
|
|
|
- <view class="row-cell benefit-type">查看沟通范围</view>
|
|
|
- <view class="row-cell basic">仅普通职位</view>
|
|
|
- <view class="row-cell regular">仅普通职位</view>
|
|
|
- <view class="row-cell vip">不限</view>
|
|
|
- <view class="row-cell flagship">不限</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="table-row price-row">
|
|
|
- <view class="row-cell benefit-type">价格</view>
|
|
|
- <view class="row-cell basic">免费</view>
|
|
|
- <view class="row-cell regular">¥599/年</view>
|
|
|
- <view class="row-cell vip">¥1599/年</view>
|
|
|
- <view class="row-cell flagship">¥2599/年</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 说明文字 -->
|
|
|
- <view class="notes">
|
|
|
- <view class="note-item">
|
|
|
- <text class="note-number">1.</text>
|
|
|
- <text class="note-text">基础&常规权益中,查看和开聊权限仅限普通职位使用</text>
|
|
|
- </view>
|
|
|
- <view class="note-item">
|
|
|
- <text class="note-number">2.</text>
|
|
|
- <text class="note-text">在常规版本体验期中购买VIP及以上版本体验卡将会立即失效</text>
|
|
|
- </view>
|
|
|
- <view class="note-item">
|
|
|
- <text class="note-number">3.</text>
|
|
|
- <text class="note-text">你可以直接购买VIP,也可以</text>
|
|
|
- <text class="note-link" @click="viewAllBenefits">查看全部权益包</text>
|
|
|
- <text class="note-text">进行购买</text>
|
|
|
- </view>
|
|
|
- <view class="note-item">
|
|
|
- <text class="note-number">4.</text>
|
|
|
- <text class="note-text">如有问题,请联系我的客服</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 升级VIP按钮 -->
|
|
|
- <view class="upgrade-button" @click="showPaymentModal">
|
|
|
- 升级VIP
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 支付弹窗 -->
|
|
|
- <u-popup v-model="showPayment" mode="bottom" border-radius="42" height="auto" :safe-area-inset-bottom="true">
|
|
|
- <view class="payment-picker">
|
|
|
- <view class="picker-header">
|
|
|
- <text class="picker-title">选择会员版本</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="picker-content">
|
|
|
- <view
|
|
|
- class="plan-option"
|
|
|
- :class="{ active: selectedPlan === 'regular' }"
|
|
|
- @click="selectPlan('regular')"
|
|
|
- >
|
|
|
- <view class="option-left">
|
|
|
- <view class="radio-btn" :class="{ checked: selectedPlan === 'regular' }">
|
|
|
- <u-icon v-if="selectedPlan === 'regular'" name="checkmark" color="#ffffff" size="28"></u-icon>
|
|
|
- </view>
|
|
|
- <text class="option-text">常规版</text>
|
|
|
- <view class="price-tag">
|
|
|
- <text>¥599</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view
|
|
|
- class="plan-option"
|
|
|
- :class="{ active: selectedPlan === 'vip' }"
|
|
|
- @click="selectPlan('vip')"
|
|
|
- >
|
|
|
- <view class="option-left">
|
|
|
- <view class="radio-btn" :class="{ checked: selectedPlan === 'vip' }">
|
|
|
- <u-icon v-if="selectedPlan === 'vip'" name="checkmark" color="#ffffff" size="28"></u-icon>
|
|
|
- </view>
|
|
|
- <text class="option-text">VIP版</text>
|
|
|
- <view class="price-tag">
|
|
|
- <text>¥1599</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view
|
|
|
- class="plan-option"
|
|
|
- :class="{ active: selectedPlan === 'flagship' }"
|
|
|
- @click="selectPlan('flagship')"
|
|
|
- >
|
|
|
- <view class="option-left">
|
|
|
- <view class="radio-btn" :class="{ checked: selectedPlan === 'flagship' }">
|
|
|
- <u-icon v-if="selectedPlan === 'flagship'" name="checkmark" color="#ffffff" size="28"></u-icon>
|
|
|
- </view>
|
|
|
- <text class="option-text">旗舰版</text>
|
|
|
- <view class="price-tag">
|
|
|
- <text>¥2599</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 支付按钮 -->
|
|
|
- <view class="payment-button" @click="confirmPayment">
|
|
|
- <text>确认支付 ¥{{ getSelectedPrice() }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
- </view>
|
|
|
+ <view class="benefits-page" :style="{ paddingTop: (12 + statusBarHeight + 44) + 'px' }">
|
|
|
+ <!-- 顶部导航栏 -->
|
|
|
+ <view class="nav-bar" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
|
|
|
+ <view class="nav-content">
|
|
|
+ <view class="nav-left" @click="goBack">
|
|
|
+ <u-icon name="arrow-leftward" color="rgba(255, 255, 255, 1)" size="42"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="nav-title">我的权益</view>
|
|
|
+ <view class="nav-right"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 当前会员状态卡片 -->
|
|
|
+ <view class="membership-card">
|
|
|
+ <view class="card-content">
|
|
|
+ <view class="card-left">
|
|
|
+ <view class="card-title">我的权益</view>
|
|
|
+ <view class="card-subtitle">常规版 剩余5天到期</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="card-right">
|
|
|
+ <view class="benefit-item">
|
|
|
+ <view class="benefit-label">查看权益</view>
|
|
|
+ <view class="benefit-count">10/50</view>
|
|
|
+ </view>
|
|
|
+ <view class="benefit-item">
|
|
|
+ <view class="benefit-label">沟通权益</view>
|
|
|
+ <view class="benefit-count">10/50</view>
|
|
|
+ </view>
|
|
|
+ <view class="benefit-item">
|
|
|
+ <view class="benefit-label">普通职位</view>
|
|
|
+ <view class="benefit-count">10/50</view>
|
|
|
+ </view>
|
|
|
+ <view class="benefit-item">
|
|
|
+ <view class="benefit-label">急聘职位</view>
|
|
|
+ <view class="benefit-count">10/50</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 购买VIP享受更多权益 -->
|
|
|
+ <view class="benefits-section">
|
|
|
+ <!-- 权益对比表格 -->
|
|
|
+ <view class="benefits-table">
|
|
|
+ <view class="section-title">购买VIP, 享受更多权益</view>
|
|
|
+ <!-- 表头 -->
|
|
|
+ <view class="table-header">
|
|
|
+ <view class="header-cell benefit-type">权益类型</view>
|
|
|
+ <view class="header-cell basic">基础权益</view>
|
|
|
+ <view class="header-cell regular active">
|
|
|
+ <!-- <view class="plan-tag">生效中</view> -->
|
|
|
+ <view class="plan-name">常规版</view>
|
|
|
+ <view class="plan-expire">剩余5天到期</view>
|
|
|
+ </view>
|
|
|
+ <view class="header-cell vip">VIP版</view>
|
|
|
+ <view class="header-cell flagship recommended">
|
|
|
+ <view class="plan-tag">推荐</view>
|
|
|
+ <view class="plan-name">旗舰版</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 表格内容 -->
|
|
|
+ <view class="table-row">
|
|
|
+ <view class="row-cell benefit-type">在线普通职位</view>
|
|
|
+ <view class="row-cell basic">10个</view>
|
|
|
+ <view class="row-cell regular">35个</view>
|
|
|
+ <view class="row-cell vip">45个</view>
|
|
|
+ <view class="row-cell flagship">不限</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="table-row">
|
|
|
+ <view class="row-cell benefit-type">在线急聘职位</view>
|
|
|
+ <view class="row-cell basic">0个</view>
|
|
|
+ <view class="row-cell regular">5个</view>
|
|
|
+ <view class="row-cell vip">15个</view>
|
|
|
+ <view class="row-cell flagship">50个</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="table-row">
|
|
|
+ <view class="row-cell benefit-type">每日查看总数</view>
|
|
|
+ <view class="row-cell basic">20个</view>
|
|
|
+ <view class="row-cell regular">50个</view>
|
|
|
+ <view class="row-cell vip">不限</view>
|
|
|
+ <view class="row-cell flagship">不限</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="table-row">
|
|
|
+ <view class="row-cell benefit-type">每日沟通总数</view>
|
|
|
+ <view class="row-cell basic">5个</view>
|
|
|
+ <view class="row-cell regular">20个</view>
|
|
|
+ <view class="row-cell vip">50个</view>
|
|
|
+ <view class="row-cell flagship">100个</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="table-row">
|
|
|
+ <view class="row-cell benefit-type">查看沟通范围</view>
|
|
|
+ <view class="row-cell basic">仅普通职位</view>
|
|
|
+ <view class="row-cell regular">仅普通职位</view>
|
|
|
+ <view class="row-cell vip">不限</view>
|
|
|
+ <view class="row-cell flagship">不限</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="table-row price-row">
|
|
|
+ <view class="row-cell benefit-type">价格</view>
|
|
|
+ <view class="row-cell basic">免费</view>
|
|
|
+ <view class="row-cell regular">¥599/年</view>
|
|
|
+ <view class="row-cell vip">¥1599/年</view>
|
|
|
+ <view class="row-cell flagship">¥2599/年</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 说明文字 -->
|
|
|
+ <view class="notes">
|
|
|
+ <view class="note-item">
|
|
|
+ <text class="note-number">1.</text>
|
|
|
+ <text class="note-text">基础&常规权益中,查看和开聊权限仅限普通职位使用</text>
|
|
|
+ </view>
|
|
|
+ <view class="note-item">
|
|
|
+ <text class="note-number">2.</text>
|
|
|
+ <text class="note-text">在常规版本体验期中购买VIP及以上版本体验卡将会立即失效</text>
|
|
|
+ </view>
|
|
|
+ <view class="note-item">
|
|
|
+ <text class="note-number">3.</text>
|
|
|
+ <text class="note-text">你可以直接购买VIP,也可以</text>
|
|
|
+ <text class="note-link" @click="viewAllBenefits">查看全部权益包</text>
|
|
|
+ <text class="note-text">进行购买</text>
|
|
|
+ </view>
|
|
|
+ <view class="note-item">
|
|
|
+ <text class="note-number">4.</text>
|
|
|
+ <text class="note-text">如有问题,请联系我的客服</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 升级VIP按钮 -->
|
|
|
+ <view class="flex flex-column justify-evenly" style="width:100%;flex-direction: column;padding-bottom: 16px;">
|
|
|
+ <view class="flex flex-direction align-start flex-wrap" style="width: 88%; margin: auto;">
|
|
|
+ <view class="flex" style="width: 100%">
|
|
|
+ <u-checkbox size="28rpx" v-model="checked" shape="circle">
|
|
|
+ <view class="flex" style="flex-direction: row;">开通即同意<navigator style="color: #016bf6"
|
|
|
+ url="/my/setting/weekXiYi" open-type="navigate">《会员开通协议》</navigator>
|
|
|
+ </view>
|
|
|
+ </u-checkbox>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="upgrade-button" @click="showPaymentModal">
|
|
|
+ 升级VIP
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 支付弹窗 -->
|
|
|
+ <u-popup v-model="showPayment" mode="bottom" border-radius="42" height="auto" :safe-area-inset-bottom="true">
|
|
|
+ <view class="payment-picker">
|
|
|
+ <view class="picker-header">
|
|
|
+ <text class="picker-title">选择会员版本</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="picker-content">
|
|
|
+ <view class="plan-option" :class="{ active: selectedPlan === 'regular' }"
|
|
|
+ @click="selectPlan('regular')">
|
|
|
+ <view class="option-left">
|
|
|
+ <view class="radio-btn" :class="{ checked: selectedPlan === 'regular' }">
|
|
|
+ <u-icon v-if="selectedPlan === 'regular'" name="checkmark" color="#ffffff"
|
|
|
+ size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ <text class="option-text">常规版</text>
|
|
|
+ <view class="price-tag">
|
|
|
+ <text>¥599</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="plan-option" :class="{ active: selectedPlan === 'vip' }" @click="selectPlan('vip')">
|
|
|
+ <view class="option-left">
|
|
|
+ <view class="radio-btn" :class="{ checked: selectedPlan === 'vip' }">
|
|
|
+ <u-icon v-if="selectedPlan === 'vip'" name="checkmark" color="#ffffff"
|
|
|
+ size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ <text class="option-text">VIP版</text>
|
|
|
+ <view class="price-tag">
|
|
|
+ <text>¥1599</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="plan-option" :class="{ active: selectedPlan === 'flagship' }"
|
|
|
+ @click="selectPlan('flagship')">
|
|
|
+ <view class="option-left">
|
|
|
+ <view class="radio-btn" :class="{ checked: selectedPlan === 'flagship' }">
|
|
|
+ <u-icon v-if="selectedPlan === 'flagship'" name="checkmark" color="#ffffff"
|
|
|
+ size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ <text class="option-text">旗舰版</text>
|
|
|
+ <view class="price-tag">
|
|
|
+ <text>¥2599</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 支付按钮 -->
|
|
|
+ <view class="payment-button" @click="confirmPayment">
|
|
|
+ <text>确认支付 ¥{{ getSelectedPrice() }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- statusBarHeight: 0, // 状态栏高度
|
|
|
- // 当前会员信息
|
|
|
- currentPlan: 'regular',
|
|
|
- remainingDays: 5,
|
|
|
- // 权益使用情况
|
|
|
- benefits: {
|
|
|
- view: { used: 10, total: 50 },
|
|
|
- communicate: { used: 10, total: 50 },
|
|
|
- regularJobs: { used: 10, total: 50 },
|
|
|
- urgentJobs: { used: 10, total: 50 }
|
|
|
- },
|
|
|
- // 支付弹窗
|
|
|
- showPayment: false,
|
|
|
- selectedPlan: 'regular',
|
|
|
- planPrices: {
|
|
|
- regular: 599,
|
|
|
- vip: 1599,
|
|
|
- flagship: 2599
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- // 获取状态栏高度
|
|
|
- let systemInfo = uni.getSystemInfoSync();
|
|
|
- this.statusBarHeight = systemInfo.statusBarHeight || 0;
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 返回上一页
|
|
|
- goBack() {
|
|
|
- uni.navigateBack()
|
|
|
- },
|
|
|
-
|
|
|
- // 查看全部权益包
|
|
|
- viewAllBenefits() {
|
|
|
- uni.showToast({
|
|
|
- title: '查看全部权益包',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 显示支付弹窗
|
|
|
- showPaymentModal() {
|
|
|
- this.showPayment = true
|
|
|
- },
|
|
|
-
|
|
|
- // 选择会员计划
|
|
|
- selectPlan(plan) {
|
|
|
- this.selectedPlan = plan
|
|
|
- },
|
|
|
-
|
|
|
- // 获取选中计划的价格
|
|
|
- getSelectedPrice() {
|
|
|
- return this.planPrices[this.selectedPlan]
|
|
|
- },
|
|
|
-
|
|
|
- // 确认支付
|
|
|
- confirmPayment() {
|
|
|
- uni.showToast({
|
|
|
- title: `支付¥${this.getSelectedPrice()}成功`,
|
|
|
- icon: 'success'
|
|
|
- })
|
|
|
- this.showPayment = false
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ statusBarHeight: 0, // 状态栏高度
|
|
|
+ // 当前会员信息
|
|
|
+ currentPlan: 'regular',
|
|
|
+ remainingDays: 5,
|
|
|
+ // 权益使用情况
|
|
|
+ benefits: {
|
|
|
+ view: {
|
|
|
+ used: 10,
|
|
|
+ total: 50
|
|
|
+ },
|
|
|
+ communicate: {
|
|
|
+ used: 10,
|
|
|
+ total: 50
|
|
|
+ },
|
|
|
+ regularJobs: {
|
|
|
+ used: 10,
|
|
|
+ total: 50
|
|
|
+ },
|
|
|
+ urgentJobs: {
|
|
|
+ used: 10,
|
|
|
+ total: 50
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checked: false,
|
|
|
+ // 支付弹窗
|
|
|
+ showPayment: false,
|
|
|
+ selectedPlan: 'regular',
|
|
|
+ planPrices: {
|
|
|
+ regular: 599,
|
|
|
+ vip: 1599,
|
|
|
+ flagship: 2599
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // 获取状态栏高度
|
|
|
+ let systemInfo = uni.getSystemInfoSync();
|
|
|
+ this.statusBarHeight = systemInfo.statusBarHeight || 0;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 返回上一页
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack()
|
|
|
+ },
|
|
|
+ //支付
|
|
|
+ confirmPayment() {
|
|
|
+
|
|
|
+ let that = this;
|
|
|
+ if (that.isTrue == false) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let token = uni.getStorageSync('token')
|
|
|
+ if (!token) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "登录过期",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('进入支付')
|
|
|
+ that.isTrue = false;
|
|
|
+ if (this.openWay == 2) {
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ // 微信APP支付 根据订单id获取支付信息
|
|
|
+ this.$Request
|
|
|
+ .post("/app/wxPay/wxPayOrder", {
|
|
|
+ classify: 1,
|
|
|
+ money: this.vipPrice,
|
|
|
+ type: 2,
|
|
|
+ })
|
|
|
+ .then((ret) => {
|
|
|
+ this.isCheckPay(ret.code, "wxpay", JSON.stringify(ret.data));
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ // 微信小程序支付
|
|
|
+ this.$Request
|
|
|
+ .post("/app/wxPay/wxPayOrder", {
|
|
|
+ classify: 3,
|
|
|
+ money: this.vipPrice,
|
|
|
+ type: 2,
|
|
|
+ })
|
|
|
+ .then((ret) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ console.log(ret.data);
|
|
|
+ uni.requestPayment({
|
|
|
+ provider: "wxpay",
|
|
|
+ timeStamp: ret.data.timestamp,
|
|
|
+ nonceStr: ret.data.noncestr,
|
|
|
+ package: ret.data.package,
|
|
|
+ signType: ret.data.signType,
|
|
|
+ paySign: ret.data.sign,
|
|
|
+ success: function(suc) {
|
|
|
+ console.log("success:" + JSON.stringify(suc));
|
|
|
+ uni.showToast({
|
|
|
+ title: "支付成功",
|
|
|
+ icon: "success",
|
|
|
+ });
|
|
|
+ that.show = false;
|
|
|
+ that.isTrue = true;
|
|
|
+ that.getUserInfo();
|
|
|
+ },
|
|
|
+ fail: function(err) {
|
|
|
+ console.log("fail:" + JSON.stringify(err));
|
|
|
+ that.isTrue = true;
|
|
|
+ uni.showToast({
|
|
|
+ title: "支付失败",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+
|
|
|
+ // #ifdef H5
|
|
|
+ let ua = navigator.userAgent.toLowerCase();
|
|
|
+ if (ua.indexOf("micromessenger") !== -1) {
|
|
|
+ let data = {
|
|
|
+ classify: 2,
|
|
|
+ money: this.vipPrice,
|
|
|
+ type: 2,
|
|
|
+ };
|
|
|
+ this.$Request.postJson("/app/wxPay/wxPayOrder", data).then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.callPay(res.data);
|
|
|
+ } else {
|
|
|
+ that.isTrue = true;
|
|
|
+ uni.showToast({
|
|
|
+ icon: "none",
|
|
|
+ title: "支付失败!",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ } else {
|
|
|
+ // APP支付宝支付
|
|
|
+ // #ifdef APP
|
|
|
+ console.log("APP进入支付。");
|
|
|
+ const datas = {
|
|
|
+ classify: 4,
|
|
|
+ money: 0.1,
|
|
|
+ type: 2,
|
|
|
+ }
|
|
|
+ this.$Request.postT("/app/aliPay/payMoneyOrder", datas).then((ret) => {
|
|
|
+ this.show = false;
|
|
|
+ console.log(ret);
|
|
|
+ this.isCheckPay(ret.code, "alipay", ret.data);
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ // #ifdef H5
|
|
|
+ let data = {
|
|
|
+ classify: 4,
|
|
|
+ money: this.vipPrice,
|
|
|
+ type: 2,
|
|
|
+ };
|
|
|
+ this.$Request.postJson("/app/aliPay/payMoneyOrder", data).then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.show = false;
|
|
|
+ that.isTrue = true;
|
|
|
+ const div = document.createElement("div");
|
|
|
+ div.innerHTML = res.data; //此处form就是后台返回接收到的数据
|
|
|
+ // document.body.appendChild(div);
|
|
|
+ // document.forms[0].submit();
|
|
|
+ } else {
|
|
|
+ that.isTrue = true;
|
|
|
+ uni.showToast({
|
|
|
+ icon: "none",
|
|
|
+ title: "支付失败!",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ }
|
|
|
+ },
|
|
|
+ callPay: function(response) {
|
|
|
+ if (typeof WeixinJSBridge === "undefined") {
|
|
|
+ if (document.addEventListener) {
|
|
|
+ document.addEventListener(
|
|
|
+ "WeixinJSBridgeReady",
|
|
|
+ this.onBridgeReady(response),
|
|
|
+ false
|
|
|
+ );
|
|
|
+ } else if (document.attachEvent) {
|
|
|
+ document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady(response));
|
|
|
+ document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady(response));
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.onBridgeReady(response);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onBridgeReady: function(response) {
|
|
|
+ let that = this;
|
|
|
+ if (!response.package) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log(response, "++++++++");
|
|
|
+ WeixinJSBridge.invoke(
|
|
|
+ "getBrandWCPayRequest", {
|
|
|
+ appId: response.appid, //公众号名称，由商户传入
|
|
|
+ timeStamp: response.timestamp, //时间戳，自1970年以来的秒数
|
|
|
+ nonceStr: response.noncestr, //随机串
|
|
|
+ package: response.package,
|
|
|
+ signType: response.signType, //微信签名方式：
|
|
|
+ paySign: response.sign, //微信签名
|
|
|
+ },
|
|
|
+ function(res) {
|
|
|
+ console.log(res, "/*-/*-/*-");
|
|
|
+ if (res.err_msg === "get_brand_wcpay_request:ok") {
|
|
|
+ // 使用以上方式判断前端返回,微信团队郑重提示：
|
|
|
+ //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
|
|
+ uni.showLoading({
|
|
|
+ title: "支付成功",
|
|
|
+ });
|
|
|
+ setTimeout(function() {
|
|
|
+ that.isTrue = true;
|
|
|
+ uni.hideLoading();
|
|
|
+ }, 1000);
|
|
|
+ that.show = false;
|
|
|
+ that.getUserInfo();
|
|
|
+ } else {
|
|
|
+ that.isTrue = true;
|
|
|
+ uni.hideLoading();
|
|
|
+ }
|
|
|
+ WeixinJSBridge.log(response.err_msg);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ isCheckPay(status, name, order) {
|
|
|
+ let that = this;
|
|
|
+ if (status == 0) {
|
|
|
+ this.setPayment(name, order);
|
|
|
+ } else {
|
|
|
+ uni.hideLoading();
|
|
|
+ that.isTrue = true;
|
|
|
+ uni.showToast({
|
|
|
+ title: "支付信息有误",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setPayment(name, order) {
|
|
|
+ let that = this;
|
|
|
+ console.log("*-*-*");
|
|
|
+ uni.requestPayment({
|
|
|
+ provider: name,
|
|
|
+ orderInfo: order, //微信、支付宝订单数据
|
|
|
+ success: function(res) {
|
|
|
+ console.log(res);
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showLoading({
|
|
|
+ title: "支付成功",
|
|
|
+ });
|
|
|
+ that.show = false;
|
|
|
+ that.getUserInfo();
|
|
|
+ that.isTrue = true;
|
|
|
+ },
|
|
|
+ fail: function(err) {
|
|
|
+ console.log(err);
|
|
|
+ that.isTrue = true;
|
|
|
+ uni.hideLoading();
|
|
|
+ },
|
|
|
+ complete() {
|
|
|
+ that.isTrue = true;
|
|
|
+ uni.hideLoading();
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectWay: function(item) {
|
|
|
+ this.openWay = item.id;
|
|
|
+ },
|
|
|
+ //获取会员开通价格
|
|
|
+ getVipPrice() {
|
|
|
+ if (uni.getStorageSync("userType") == 1) {
|
|
|
+ //用户会员价格
|
|
|
+ this.$Request.get("/app/common/type/331").then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.vipPrice = res.data.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ //企业会员价格
|
|
|
+ this.$Request.get("/app/common/type/332").then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.vipPrice = res.data.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取个人信息
|
|
|
+ getUserInfo() {
|
|
|
+ this.$Request.get("/app/user/selectUserById").then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ if (res.data.isUserVip + "" == 1) {
|
|
|
+ this.isVip = true;
|
|
|
+ this.dataTime = res.data.userMonthTime;
|
|
|
+ } else {
|
|
|
+ this.isVip = false;
|
|
|
+ }
|
|
|
+ if (res.data.isCompanyVip + "" == "1") {
|
|
|
+ this.isVipC = true;
|
|
|
+ this.dataTimeC = res.data.companyMonthTime;
|
|
|
+ } else {
|
|
|
+ this.isVipC = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ //会员简历刷新次数
|
|
|
+ getVipPeople() {
|
|
|
+ this.$Request.get("/app/common/type/328").then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.vipNum = res.data.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //非会员简历刷新次数
|
|
|
+ getNoVipPeople() {
|
|
|
+ this.$Request.get("/app/common/type/327").then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.noVipNum = res.data.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //会员岗位刷新次数
|
|
|
+ getVipCom() {
|
|
|
+ this.$Request.get("/app/common/type/330").then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.vipNumCom = res.data.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //非会员岗位刷新次数
|
|
|
+ getNoVipCom() {
|
|
|
+ this.$Request.get("/app/common/type/329").then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.noVipNumCom = res.data.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 查看全部权益包
|
|
|
+ viewAllBenefits() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '查看全部权益包',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 显示支付弹窗
|
|
|
+ showPaymentModal() {
|
|
|
+ if (this.checked == false) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "请阅读并同意《会员开通协议》",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log('准备支付')
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.showPayment = true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择会员计划
|
|
|
+ selectPlan(plan) {
|
|
|
+ this.selectedPlan = plan
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取选中计划的价格
|
|
|
+ getSelectedPrice() {
|
|
|
+ return this.planPrices[this.selectedPlan]
|
|
|
+ },
|
|
|
+
|
|
|
+ // 确认支付
|
|
|
+ // confirmPayment() {
|
|
|
+ // uni.showToast({
|
|
|
+ // title: `支付¥${this.getSelectedPrice()}成功`,
|
|
|
+ // icon: 'success'
|
|
|
+ // })
|
|
|
+ // this.showPayment = false
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.benefits-page {
|
|
|
- min-height: 100vh;
|
|
|
- background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 80%));
|
|
|
- background-size: 100% 40%;
|
|
|
- background-repeat: no-repeat;
|
|
|
-}
|
|
|
-
|
|
|
-// 顶部导航栏
|
|
|
-.nav-bar {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- z-index: 1000;
|
|
|
-
|
|
|
- .nav-content {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- height: 88rpx;
|
|
|
- padding: 0 32rpx;
|
|
|
-
|
|
|
- .nav-left, .nav-right {
|
|
|
- width: 60rpx;
|
|
|
- height: 60rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .nav-title {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 当前会员状态卡片
|
|
|
-.membership-card {
|
|
|
- background: linear-gradient(66.73deg, rgba(255, 160, 162, 1),rgba(255, 203, 204.5, 0.3) 49%,rgba(255, 181.5, 183.25, 0.56) 100%);
|
|
|
- border-radius: 20rpx;
|
|
|
- padding: 32rpx;
|
|
|
- margin: 0 40rpx;
|
|
|
- box-shadow: 0 8rpx 24rpx rgba(255, 182, 193, 0.3);
|
|
|
-
|
|
|
- .card-content {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: flex-start;
|
|
|
-
|
|
|
- .card-left {
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .card-title {
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 48rpx;
|
|
|
- font-weight: 700;
|
|
|
- line-height: 60rpx;
|
|
|
- letter-spacing: 0px;
|
|
|
- text-align: left;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .card-subtitle {
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 32rpx;
|
|
|
- letter-spacing: 0%;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .card-right {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
- border-radius: 12rpx;
|
|
|
- background: radial-gradient(184.79% 115.97% at 92% 113.99999999999999%,rgba(255, 102, 0, 0.35),rgba(255, 65, 86, 1) 100%);
|
|
|
- gap: 16rpx;
|
|
|
- padding: 14rpx 38rpx;
|
|
|
-
|
|
|
- .benefit-item {
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .benefit-label {
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 32rpx;
|
|
|
- letter-spacing: 0%;
|
|
|
- text-align: left;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .benefit-count {
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 700;
|
|
|
- line-height: 32rpx;
|
|
|
- letter-spacing: 0%;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 权益对比区域
|
|
|
-.benefits-section {
|
|
|
- margin: 20rpx 40rpx;
|
|
|
-
|
|
|
- .section-title {
|
|
|
- color: rgba(23, 23, 37, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 44rpx;
|
|
|
- letter-spacing: 0.5%;
|
|
|
- text-align: left;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 权益对比表格
|
|
|
-.benefits-table {
|
|
|
- background: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 26rpx;
|
|
|
- overflow: hidden;
|
|
|
- box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
|
|
-
|
|
|
- .table-header {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
|
- background: #f8f9fa;
|
|
|
- border-bottom: 4rpx solid #FFFFFF;
|
|
|
-
|
|
|
- .header-cell {
|
|
|
- padding: 12rpx;
|
|
|
- color: rgba(23, 23, 37, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 26rpx;
|
|
|
- letter-spacing: 0.5%;
|
|
|
- text-align: center;
|
|
|
- position: relative;
|
|
|
- border-right: 4rpx solid #FFFFFF;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- border-top-left-radius: 16rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- border-right: none;
|
|
|
- border-top-right-radius: 16rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &.benefit-type {
|
|
|
- color: rgba(23, 23, 37, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 26rpx;
|
|
|
- letter-spacing: 0.5%;
|
|
|
- text-align: center;
|
|
|
- background: rgba(219, 216, 216, 1);
|
|
|
- }
|
|
|
-
|
|
|
- &.basic {
|
|
|
- background: rgba(219, 216, 216, 1);
|
|
|
- }
|
|
|
-
|
|
|
- &.active {
|
|
|
- background: linear-gradient(135.00deg, rgba(255, 187, 141, 0.4),rgba(255, 102, 0, 0.4) 100%);
|
|
|
- color: rgba(224, 90, 0, 1);
|
|
|
- }
|
|
|
-
|
|
|
- &.vip {
|
|
|
- background: linear-gradient(135.00deg, rgba(255, 180, 180, 0.6),rgba(255, 89, 89, 0.6) 100%);
|
|
|
- color: rgba(255, 62, 62, 1);
|
|
|
- }
|
|
|
-
|
|
|
- &.recommended {
|
|
|
- background: linear-gradient(133.74deg, rgba(251, 231, 185, 1),rgba(240, 176, 72, 1) 100%);
|
|
|
- color: rgba(212, 131, 0, 1);
|
|
|
- }
|
|
|
-
|
|
|
- .plan-tag {
|
|
|
- position: absolute;
|
|
|
- top: 0rpx;
|
|
|
- right: 0rpx;
|
|
|
- background: var(--线性渐变, linear-gradient(132.53deg, rgba(106.94185638427734, 84.63434600830078, 214.0178680419922, 0.96),rgba(144.87640380859375, 87.8011474609375, 191.25, 1) 95%));
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 12rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 14rpx;
|
|
|
- letter-spacing: 0px;
|
|
|
- text-align: left;
|
|
|
- padding: 4rpx 12rpx;
|
|
|
- border-radius: 0rpx 16rpx 0rpx 16rpx;
|
|
|
- transform-origin: center;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: inherit;
|
|
|
- transform: rotate(-45deg);
|
|
|
- z-index: -1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .plan-name {
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 4rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .plan-expire {
|
|
|
- font-size: 16rpx;
|
|
|
- color: rgba(224, 90, 0, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .table-row {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
|
- border-bottom: 4rpx solid #FFFFFF;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- border-bottom: none;
|
|
|
-
|
|
|
- .row-cell:first-child {
|
|
|
- border-bottom-left-radius: 16rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .row-cell:last-child {
|
|
|
- border-bottom-right-radius: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.price-row {
|
|
|
- background: #f8f9fa;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-
|
|
|
- .row-cell {
|
|
|
- padding: 24rpx 12rpx;
|
|
|
- font-size: 16rpx;
|
|
|
- text-align: center;
|
|
|
- border-right: 4rpx solid #FFFFFF;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- border-right: none;
|
|
|
- }
|
|
|
-
|
|
|
- &.benefit-type {
|
|
|
- text-align: center;
|
|
|
- color: rgba(23, 23, 37, 1);
|
|
|
- font-weight: 500;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: rgba(246, 246, 246, 1);
|
|
|
- }
|
|
|
-
|
|
|
- &.basic {
|
|
|
- color: #666;
|
|
|
- background: rgba(246, 246, 246, 1);
|
|
|
- }
|
|
|
-
|
|
|
- &.regular {
|
|
|
- color: rgba(224, 90, 0, 1);
|
|
|
- font-weight: 600;
|
|
|
- background: rgba(254, 240, 229, 1);
|
|
|
- }
|
|
|
-
|
|
|
- &.vip {
|
|
|
- color: rgba(255, 62, 62, 1);
|
|
|
- font-weight: 600;
|
|
|
- background: rgba(255, 235, 235, 1);
|
|
|
- }
|
|
|
-
|
|
|
- &.flagship {
|
|
|
- color: #f57c00;
|
|
|
- font-weight: 600;
|
|
|
- background: rgba(254, 238, 209, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 说明文字
|
|
|
-.notes {
|
|
|
- margin-top: 32rpx;
|
|
|
-
|
|
|
- .note-item {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- margin-bottom: 16rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- line-height: 1.5;
|
|
|
- gap: 8rpx;
|
|
|
-
|
|
|
- .note-number , .note-text {
|
|
|
- color: rgba(102, 102, 102, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 26rpx;
|
|
|
- letter-spacing: 0.5%;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .note-link {
|
|
|
- color: #1976d2;
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 26rpx;
|
|
|
- letter-spacing: 0.5%;
|
|
|
- text-decoration: underline;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 升级VIP按钮
|
|
|
-.upgrade-button {
|
|
|
- position: fixed;
|
|
|
- bottom: 32rpx;
|
|
|
- left: 32rpx;
|
|
|
- right: 32rpx;
|
|
|
- height: 88rpx;
|
|
|
- background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%));
|
|
|
- border-radius: 44rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: #fff;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 600;
|
|
|
- box-shadow: 0 8rpx 24rpx rgba(25, 118, 210, 0.3);
|
|
|
-}
|
|
|
-
|
|
|
-// 支付弹窗样式 - 仿照 tagManage 页面
|
|
|
-.payment-picker {
|
|
|
- background: #fff;
|
|
|
- border-radius: 20rpx 20rpx 0 0;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.picker-header {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- padding: 30rpx 40rpx 20rpx;
|
|
|
- border-bottom: 1rpx solid #F2F2F2;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .picker-title {
|
|
|
- color: rgba(34, 37, 42, 1);
|
|
|
- font-family: DM Sans;
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 23px;
|
|
|
- letter-spacing: 0px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.picker-content {
|
|
|
- padding: 32rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.plan-option {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- padding: 16rpx 28rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid rgba(227, 231, 236, 1);
|
|
|
- border-radius: 24px;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- margin-bottom: 32rpx;
|
|
|
-
|
|
|
- &:active {
|
|
|
- background-color: #F9F9F9;
|
|
|
- }
|
|
|
-
|
|
|
- &.active {
|
|
|
- border-color: #007AFF;
|
|
|
- background: #F0F9FF;
|
|
|
- }
|
|
|
-
|
|
|
- .option-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .radio-btn {
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
- border: 2rpx solid #E5E5EA;
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-right: 24rpx;
|
|
|
- background: #fff;
|
|
|
- transition: all 0.2s;
|
|
|
-
|
|
|
- &.checked {
|
|
|
- border-color: #007AFF;
|
|
|
- background: #007AFF;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .option-text {
|
|
|
- font-size: 28rpx;
|
|
|
- color: rgba(29, 33, 41, 1);
|
|
|
- font-weight: 400;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .price-tag {
|
|
|
- background: rgba(153, 196, 250, 0.4);
|
|
|
- border-radius: 8rpx;
|
|
|
- padding: 4rpx 12rpx;
|
|
|
-
|
|
|
- text {
|
|
|
- font-size: 24rpx;
|
|
|
- line-height: 24rpx;
|
|
|
- color: rgba(1, 107, 246, 1);
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.picker-content :last-child {
|
|
|
- margin-bottom: 0rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.payment-button {
|
|
|
- width: 90%;
|
|
|
- height: 88rpx;
|
|
|
- background: linear-gradient(90deg, #007AFF 0%, #42a5f5 100%);
|
|
|
- border-radius: 44rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin: 32rpx;
|
|
|
- box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
|
|
|
-
|
|
|
- text {
|
|
|
- color: #fff;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+ .benefits-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 80%));
|
|
|
+ background-size: 100% 40%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 顶部导航栏
|
|
|
+ .nav-bar {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 1000;
|
|
|
+
|
|
|
+ .nav-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 88rpx;
|
|
|
+ padding: 0 32rpx;
|
|
|
+
|
|
|
+ .nav-left,
|
|
|
+ .nav-right {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 当前会员状态卡片
|
|
|
+ .membership-card {
|
|
|
+ background: linear-gradient(66.73deg, rgba(255, 160, 162, 1), rgba(255, 203, 204.5, 0.3) 49%, rgba(255, 181.5, 183.25, 0.56) 100%);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+ margin: 0 40rpx;
|
|
|
+ box-shadow: 0 8rpx 24rpx rgba(255, 182, 193, 0.3);
|
|
|
+
|
|
|
+ .card-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ .card-left {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .card-title {
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 60rpx;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-subtitle {
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 32rpx;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-right {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background: radial-gradient(184.79% 115.97% at 92% 113.99999999999999%, rgba(255, 102, 0, 0.35), rgba(255, 65, 86, 1) 100%);
|
|
|
+ gap: 16rpx;
|
|
|
+ padding: 14rpx 38rpx;
|
|
|
+
|
|
|
+ .benefit-item {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .benefit-label {
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 32rpx;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .benefit-count {
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 32rpx;
|
|
|
+ letter-spacing: 0%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 权益对比区域
|
|
|
+ .benefits-section {
|
|
|
+ margin: 20rpx 40rpx;
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ color: rgba(23, 23, 37, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 44rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 权益对比表格
|
|
|
+ .benefits-table {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 26rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ .table-header {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
|
+ background: #f8f9fa;
|
|
|
+ border-bottom: 4rpx solid #FFFFFF;
|
|
|
+
|
|
|
+ .header-cell {
|
|
|
+ padding: 12rpx;
|
|
|
+ color: rgba(23, 23, 37, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 26rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ border-right: 4rpx solid #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ border-top-left-radius: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-right: none;
|
|
|
+ border-top-right-radius: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.benefit-type {
|
|
|
+ color: rgba(23, 23, 37, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 26rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-align: center;
|
|
|
+ background: rgba(219, 216, 216, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.basic {
|
|
|
+ background: rgba(219, 216, 216, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: linear-gradient(135.00deg, rgba(255, 187, 141, 0.4), rgba(255, 102, 0, 0.4) 100%);
|
|
|
+ color: rgba(224, 90, 0, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.vip {
|
|
|
+ background: linear-gradient(135.00deg, rgba(255, 180, 180, 0.6), rgba(255, 89, 89, 0.6) 100%);
|
|
|
+ color: rgba(255, 62, 62, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.recommended {
|
|
|
+ background: linear-gradient(133.74deg, rgba(251, 231, 185, 1), rgba(240, 176, 72, 1) 100%);
|
|
|
+ color: rgba(212, 131, 0, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .plan-tag {
|
|
|
+ position: absolute;
|
|
|
+ top: 0rpx;
|
|
|
+ right: 0rpx;
|
|
|
+ background: var(--线性渐变, linear-gradient(132.53deg, rgba(106.94185638427734, 84.63434600830078, 214.0178680419922, 0.96), rgba(144.87640380859375, 87.8011474609375, 191.25, 1) 95%));
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 12rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 14rpx;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: left;
|
|
|
+ padding: 4rpx 12rpx;
|
|
|
+ border-radius: 0rpx 16rpx 0rpx 16rpx;
|
|
|
+ transform-origin: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: inherit;
|
|
|
+ transform: rotate(-45deg);
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .plan-name {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .plan-expire {
|
|
|
+ font-size: 16rpx;
|
|
|
+ color: rgba(224, 90, 0, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-row {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
|
+ border-bottom: 4rpx solid #FFFFFF;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+
|
|
|
+ .row-cell:first-child {
|
|
|
+ border-bottom-left-radius: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row-cell:last-child {
|
|
|
+ border-bottom-right-radius: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.price-row {
|
|
|
+ background: #f8f9fa;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row-cell {
|
|
|
+ padding: 24rpx 12rpx;
|
|
|
+ font-size: 16rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-right: 4rpx solid #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.benefit-type {
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(23, 23, 37, 1);
|
|
|
+ font-weight: 500;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(246, 246, 246, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.basic {
|
|
|
+ color: #666;
|
|
|
+ background: rgba(246, 246, 246, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.regular {
|
|
|
+ color: rgba(224, 90, 0, 1);
|
|
|
+ font-weight: 600;
|
|
|
+ background: rgba(254, 240, 229, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.vip {
|
|
|
+ color: rgba(255, 62, 62, 1);
|
|
|
+ font-weight: 600;
|
|
|
+ background: rgba(255, 235, 235, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.flagship {
|
|
|
+ color: #f57c00;
|
|
|
+ font-weight: 600;
|
|
|
+ background: rgba(254, 238, 209, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 说明文字
|
|
|
+ .notes {
|
|
|
+ margin-top: 32rpx;
|
|
|
+
|
|
|
+ .note-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 1.5;
|
|
|
+ gap: 8rpx;
|
|
|
+
|
|
|
+ .note-number,
|
|
|
+ .note-text {
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 26rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .note-link {
|
|
|
+ color: #1976d2;
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 26rpx;
|
|
|
+ letter-spacing: 0.5%;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 升级VIP按钮
|
|
|
+ .upgrade-button {
|
|
|
+ //position: fixed;
|
|
|
+ // bottom: 32rpx;
|
|
|
+ // left: 32rpx;
|
|
|
+ // right: 32rpx;
|
|
|
+ width: 88%;
|
|
|
+ height: 88rpx;
|
|
|
+ background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%));
|
|
|
+ border-radius: 44rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ box-shadow: 0 8rpx 24rpx rgba(25, 118, 210, 0.3);
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 支付弹窗样式 - 仿照 tagManage 页面
|
|
|
+ .payment-picker {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .picker-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 30rpx 40rpx 20rpx;
|
|
|
+ border-bottom: 1rpx solid #F2F2F2;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .picker-title {
|
|
|
+ color: rgba(34, 37, 42, 1);
|
|
|
+ font-family: DM Sans;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 23px;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .picker-content {
|
|
|
+ padding: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .plan-option {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16rpx 28rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid rgba(227, 231, 236, 1);
|
|
|
+ border-radius: 24px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: #F9F9F9;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border-color: #007AFF;
|
|
|
+ background: #F0F9FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .option-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .radio-btn {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ border: 2rpx solid #E5E5EA;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ background: #fff;
|
|
|
+ transition: all 0.2s;
|
|
|
+
|
|
|
+ &.checked {
|
|
|
+ border-color: #007AFF;
|
|
|
+ background: #007AFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .option-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: rgba(29, 33, 41, 1);
|
|
|
+ font-weight: 400;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-tag {
|
|
|
+ background: rgba(153, 196, 250, 0.4);
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding: 4rpx 12rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 24rpx;
|
|
|
+ color: rgba(1, 107, 246, 1);
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .picker-content :last-child {
|
|
|
+ margin-bottom: 0rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .payment-button {
|
|
|
+ width: 90%;
|
|
|
+ height: 88rpx;
|
|
|
+ background: linear-gradient(90deg, #007AFF 0%, #42a5f5 100%);
|
|
|
+ border-radius: 44rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 32rpx;
|
|
|
+ box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
川