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.
529 lines
13 KiB
529 lines
13 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"
|
|
:loading="!list.length"
|
|
@change="changeSwiper"
|
|
keyName="img"
|
|
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.content">
|
|
{{ item.content }}
|
|
</view>
|
|
|
|
<view class="package-title">{{ item.title }}</view>
|
|
|
|
<view class="package-price">¥{{ getInt(item.discountedprice) }}.<text class="package-decimal">{{ getDecimal(item.discountedprice) }}</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">
|
|
<view v-if="!selectedCoupon" class="coupon-placeholder">
|
|
<text class="coupon-text">请选择</text>
|
|
<uv-icon name="arrow-right" color="#999" size="16" />
|
|
</view>
|
|
<view v-else class="coupon-selected">
|
|
<view class="coupon-info">
|
|
<text class="coupon-name">{{ selectedCoupon.name }}</text>
|
|
<text class="coupon-amount">-¥{{ selectedCoupon.money }}</text>
|
|
</view>
|
|
<uv-icon name="arrow-right" color="#999" size="16" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 立即开通会员按钮 -->
|
|
<view class="member-button-section">
|
|
<uv-button
|
|
type="primary"
|
|
text="立即开通会员"
|
|
:custom-style="{
|
|
width: '100%',
|
|
height: '82rpx',
|
|
borderRadius: '44rpx',
|
|
backgroundColor: '#06DADC',
|
|
fontSize: '36rpx',
|
|
fontWeight: '500',
|
|
border: '1px solid #06DADC'
|
|
}"
|
|
@click="handleRecharge"
|
|
></uv-button>
|
|
</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: [
|
|
|
|
],
|
|
selectedPackage: 0, // 默认选择第一个套餐
|
|
selectedMember: 0, // 默认选择第一个会员
|
|
defaultPackageList: [
|
|
|
|
],
|
|
couponId: '',
|
|
selectedCoupon: null // 选中的优惠券信息
|
|
}
|
|
},
|
|
computed:{
|
|
packageList(){
|
|
return this.list[this.selectedMember].setmeals.length ? this.list[this.selectedMember].setmeals : this.defaultPackageList
|
|
}
|
|
},
|
|
|
|
|
|
methods: {
|
|
handleCouponSelected(coupon) {
|
|
|
|
// 处理选中的优惠券
|
|
this.selectedCoupon = coupon
|
|
this.couponId = coupon.id
|
|
|
|
uni.showToast({
|
|
title: `已选择优惠券：¥${coupon.money}`,
|
|
icon: 'success'
|
|
})
|
|
},
|
|
async handleRecharge(){
|
|
// console.log('选中的会员id是:', this.packageList[this.selectedPackage]);
|
|
|
|
const object = {
|
|
memberId: this.list[this.selectedMember].id,
|
|
setmealId: this.packageList[this.selectedPackage].id
|
|
}
|
|
if (this.couponId) {
|
|
object.couponId = this.couponId
|
|
}
|
|
const res = await this.$api.member.openMember({...object})
|
|
if (res.code === 200){
|
|
if (res.result === 0){
|
|
// 零元购
|
|
uni.showToast({
|
|
title: '充值成功',
|
|
icon: 'success'
|
|
})
|
|
this.goBack()
|
|
}else {
|
|
// 调起微信支付
|
|
this.$utils.wxPay(res.result)
|
|
}
|
|
}
|
|
},
|
|
goBack(){
|
|
uni.navigateBack()
|
|
},
|
|
// 截取价格的整数与小数部分
|
|
getInt(pri){
|
|
const price = String(pri)
|
|
if (price.indexOf('.') === -1) {
|
|
return price
|
|
}
|
|
if (price === null) {
|
|
return '0'
|
|
}
|
|
return String(price).split('.')[0]
|
|
},
|
|
getDecimal(pri){
|
|
const price = String(pri)
|
|
if (price === null) return '00'
|
|
const parts = price.split('.')
|
|
return parts[1] ? parts[1].padEnd(2, '0') : '00'
|
|
},
|
|
selectPackage(index) {
|
|
this.selectedPackage = index
|
|
},
|
|
selectCoupon() {
|
|
uni.navigateTo({
|
|
url: '/subPages/user/discount?from=recharge'
|
|
})
|
|
},
|
|
async getMemberList(){
|
|
const memberRes = await this.$api.member.getMemberList()
|
|
if (memberRes.code === 200){
|
|
this.list = memberRes.result
|
|
}
|
|
},
|
|
changeSwiper(e){
|
|
this.selectedMember = e.current
|
|
this.selectedPackage = 0
|
|
}
|
|
},
|
|
onShow(){
|
|
// 监听优惠券选择事件
|
|
uni.$on('couponSelected', this.handleCouponSelected)
|
|
this.getMemberList()
|
|
},
|
|
onUnload() {
|
|
// 移除事件监听
|
|
uni.$off('couponSelected', this.handleCouponSelected)
|
|
console.log('接触监听');
|
|
|
|
},
|
|
}
|
|
</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;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/* 立即开通会员按钮样式 */
|
|
.member-button-section {
|
|
margin: 0 50rpx 40rpx;
|
|
}
|
|
|
|
// 会员套餐选择容器
|
|
.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: -10rpx;
|
|
left: 0%;
|
|
// transform: translateX(-50%);
|
|
background: #FF6B6B;
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 20rpx 20rpx 20rpx 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-placeholder {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
|
|
.coupon-text {
|
|
font-size: 32rpx;
|
|
color: #C6C6C6;
|
|
}
|
|
}
|
|
|
|
.coupon-selected {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
|
|
.coupon-info {
|
|
display: flex;
|
|
// flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.coupon-name {
|
|
font-size: 28rpx;
|
|
color: #181818;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.coupon-amount {
|
|
font-size: 28rpx;
|
|
color: red;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 会员权益样式 */
|
|
.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>
|