You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
415 lines
9.2 KiB
415 lines
9.2 KiB
<template>
|
|
<view class="container">
|
|
<view class="header">
|
|
<view class="header-bg">
|
|
<image
|
|
src="/static/会员背景.png"
|
|
class="header-img"
|
|
mode="scaleToFill"
|
|
/>
|
|
<text class="header-title">会员开通</text>
|
|
<!-- 加一个推出箭头 -->
|
|
<view class="header-icon" @click="goBack">
|
|
<uv-icon name="arrow-left" color="#000" size="20" />
|
|
</view>
|
|
<!-- 轮播容器 -->
|
|
<view class="uv-demo-block swiper-container">
|
|
<uv-swiper
|
|
bgColor="transparent"
|
|
:list="list"
|
|
previousMargin="70"
|
|
nextMargin="70"
|
|
acceleration
|
|
height="85"
|
|
circular
|
|
:autoplay="false"
|
|
radius="5"
|
|
>
|
|
</uv-swiper>
|
|
<button class="swiper-btn">
|
|
已选择
|
|
</button>
|
|
<image
|
|
class="swiper-arrow"
|
|
src="/static/修饰箭头.png"
|
|
mode="aspectFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 会员套餐选择容器 -->
|
|
<view class="membership-container">
|
|
<!-- 套餐选择 -->
|
|
<view class="package-list">
|
|
<view
|
|
class="package-item"
|
|
:class="{ 'active': selectedPackage === index }"
|
|
v-for="(item, index) in packageList"
|
|
:key="index"
|
|
@click="selectPackage(index)"
|
|
>
|
|
<view class="info">
|
|
<!-- 赠送标识 -->
|
|
<view class="gift-tag" v-if="item.gift">
|
|
赠送{{ item.gift }}天
|
|
</view>
|
|
|
|
<view class="package-title">{{ item.title }}</view>
|
|
|
|
<view class="package-price">¥{{ getInt(item.price) }}.<text class="package-decimal">{{ getDecimal(item.price) }}</text></view>
|
|
<view class="package-original">¥{{ item.originalPrice }}</view>
|
|
</view>
|
|
|
|
<view class="package-btn" :class="{ 'active': selectedPackage === index }">
|
|
{{ selectedPackage === index ? '已选择' : '点击选择' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 优惠券选择 -->
|
|
<view class="coupon-section">
|
|
<view class="coupon-title">选择优惠券</view>
|
|
<view class="coupon-selector" @click="selectCoupon">
|
|
<text class="coupon-text">请选择</text>
|
|
<uv-icon name="arrow-right" color="#999" size="16" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 会员权益 -->
|
|
<view class="benefits-section">
|
|
<view class="benefits-title">会员权益</view>
|
|
|
|
<view class="benefits-list">
|
|
<!-- 碎片学习 系统掌握 -->
|
|
<view class="benefit-item">
|
|
<view class="benefit-content">
|
|
<view class="benefit-title">碎片学习 系统掌握</view>
|
|
<view class="benefit-desc">根据薄弱点智能推荐，每节课3-5分钟，碎片化完成系统学习</view>
|
|
</view>
|
|
<view class="benefit-icon">
|
|
<image src="/static/会员图片1.png" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 匹配水平 -->
|
|
<view class="benefit-item">
|
|
<view class="benefit-content">
|
|
<view class="benefit-title">匹配水平</view>
|
|
<view class="benefit-desc">依据水平精准推课，不做无用功快速提升</view>
|
|
</view>
|
|
<view class="benefit-icon">
|
|
<image src="/static/会员图片2.png" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 科学闭环测 讲练结合 -->
|
|
<view class="benefit-item">
|
|
<view class="benefit-content">
|
|
<view class="benefit-title">科学闭环测 讲练结合</view>
|
|
<view class="benefit-desc">精心设计科学的学习流程 「测试-讲解-练习-检验」知识掌握更牢固</view>
|
|
</view>
|
|
<view class="benefit-icon">
|
|
<image src="/static/会员图片3.png" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [
|
|
'/static/会员1.png',
|
|
'/static/会员2.png',
|
|
'/static/会员3.png'
|
|
],
|
|
selectedPackage: 0, // 默认选择第一个套餐
|
|
packageList: [
|
|
{
|
|
title: '30天会员',
|
|
price: '36.00',
|
|
originalPrice: '128',
|
|
gift: null
|
|
},
|
|
{
|
|
title: '90天会员',
|
|
price: '88.00',
|
|
originalPrice: '384',
|
|
gift: '180'
|
|
},
|
|
{
|
|
title: '180天会员',
|
|
price: '128.00',
|
|
originalPrice: '384',
|
|
gift: null
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
// 截取价格的整数与小数部分
|
|
getInt(price){
|
|
if (price.indexOf('.') === -1) {
|
|
return price
|
|
}
|
|
if (price === null) {
|
|
return '0'
|
|
}
|
|
return String(price).split('.')[0]
|
|
},
|
|
getDecimal(price){
|
|
if (price === null) return '00'
|
|
const parts = String(price).split('.')
|
|
return parts[1] ? parts[1].padEnd(2, '0') : '00'
|
|
},
|
|
selectPackage(index) {
|
|
this.selectedPackage = index
|
|
},
|
|
selectCoupon() {
|
|
uni.showToast({
|
|
title: '功能开发中',
|
|
icon: 'none'
|
|
})
|
|
},
|
|
goBack() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
min-height: 100%;
|
|
}
|
|
|
|
.header{
|
|
width: 100%;
|
|
.header-bg{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 500rpx;
|
|
// background: red;
|
|
.header-img{
|
|
width: 100%;
|
|
height: 500rpx;
|
|
}
|
|
.header-title{
|
|
font-size: 32rpx;
|
|
color: black;
|
|
position: absolute;
|
|
top: 100rpx;
|
|
font-weight: 500;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.header-icon{
|
|
position: absolute;
|
|
top: 100rpx;
|
|
left: 30rpx;
|
|
}
|
|
.swiper-container{
|
|
margin-top: -300rpx;
|
|
.swiper-arrow{
|
|
width: 100%;
|
|
height: 22rpx;
|
|
}
|
|
.swiper-btn{
|
|
margin: 35rpx auto 15rpx;
|
|
width: 150rpx;
|
|
height: 52rpx;
|
|
border-radius: 999px;
|
|
background: #06DADC;
|
|
color: white;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
line-height: 52rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
// 会员套餐选择容器
|
|
.membership-container {
|
|
background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #FFFFFF 100%);
|
|
padding: 40rpx 30rpx;
|
|
margin-top: 20rpx;
|
|
|
|
.package-list {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.package-item {
|
|
position: relative;
|
|
flex: 1;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
|
|
text-align: center;
|
|
border: 2rpx solid #EEEEEE;
|
|
transition: all 0.3s;
|
|
// width: 119;
|
|
height: 210rpx;
|
|
// width: 238rpx;
|
|
.info{
|
|
padding: 16rpx 16rpx 0 16rpx ;
|
|
}
|
|
&.active {
|
|
border-color: $primary-color;
|
|
// box-shadow: 0 4rpx 20rpx rgba(34, 242, 235, 0.2);
|
|
}
|
|
|
|
.gift-tag {
|
|
position: absolute;
|
|
top: -30rpx;
|
|
left: 0;
|
|
// transform: translateX(-50%);
|
|
background: #FF4800;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 999rpx 999rpx 999rpx 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.package-title {
|
|
font-size: 28rpx;
|
|
color: #000;
|
|
margin-bottom: 16rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.package-price {
|
|
font-size: 36rpx;
|
|
color: #FF4800;
|
|
font-weight: 500;
|
|
margin-bottom: 8rpx;
|
|
.package-decimal{
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.package-original {
|
|
font-size: 24rpx;
|
|
color: #8B8B8B;
|
|
line-height: 1.4;
|
|
text-decoration: line-through;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.package-btn {
|
|
background: #E4E7EB;
|
|
color: #191919;
|
|
font-size: 28rpx;
|
|
// padding: 12rpx 20rpx;
|
|
width: 100%;
|
|
// border-radius: 30rpx;
|
|
transition: all 0.3s;
|
|
height: 52rpx;
|
|
line-height: 52rpx;
|
|
border-radius: 0 0 24rpx 24rpx;
|
|
&.active {
|
|
background: $primary-color;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.coupon-section {
|
|
.coupon-title {
|
|
font-size: 26rpx;
|
|
color: #181818;
|
|
margin-bottom: 10rpx;
|
|
// font-weight: 500;
|
|
}
|
|
|
|
.coupon-selector {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 10rpx 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 2rpx solid #f0f0f0;
|
|
|
|
.coupon-text {
|
|
font-size: 32rpx;
|
|
color: #C6C6C6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 会员权益样式 */
|
|
.benefits-section {
|
|
margin-top: 40rpx;
|
|
padding: 0 30rpx;
|
|
}
|
|
|
|
.benefits-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #191919;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.benefits-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32rpx;
|
|
}
|
|
|
|
.benefit-item {
|
|
background: #F8F8F8;
|
|
border: 1px solid #FFFFFF;
|
|
border-radius: 48rpx;
|
|
padding: 27rpx 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.benefit-content {
|
|
flex: 1;
|
|
margin-right: 40rpx;
|
|
}
|
|
|
|
.benefit-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.benefit-desc {
|
|
font-size: 24rpx;
|
|
color: #09B1B3;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.benefit-icon {
|
|
width: 152rpx;
|
|
height: 152rpx;
|
|
// flex-shrink: 0;
|
|
}
|
|
|
|
.benefit-icon image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|