|
|
|
@ -0,0 +1,415 @@ |
|
|
|
<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> |
hflllll
1 month ago
