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.
311 lines
6.6 KiB
311 lines
6.6 KiB
<template>
|
|
<view class="u-page">
|
|
<!-- 头部会员卡片 -->
|
|
<view class="member-header">
|
|
<view class="member-card">
|
|
<view class="card-bg">
|
|
<view class="member-title">
|
|
<uv-icon name="level" size="60rpx" color="#FFD700"></uv-icon>
|
|
<text class="title-text">会员中心</text>
|
|
</view>
|
|
<view class="member-desc">开通永久会员，享受更多专属权益</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 会员权益 -->
|
|
<view class="rights-section">
|
|
<view class="section-title">
|
|
<text>会员专享权益</text>
|
|
</view>
|
|
<view class="rights-list">
|
|
<view class="right-item">
|
|
<view class="right-icon">
|
|
<uv-icon name="map-fill" size="40rpx" color="#FF6B6B"></uv-icon>
|
|
</view>
|
|
<view class="right-content">
|
|
<text class="right-title">查看详细地址</text>
|
|
<text class="right-desc">查看具体定位和村址，普通用户只能看到乡镇</text>
|
|
</view>
|
|
</view>
|
|
<view class="right-item">
|
|
<view class="right-icon">
|
|
<uv-icon name="phone-fill" size="40rpx" color="#4ECDC4"></uv-icon>
|
|
</view>
|
|
<view class="right-content">
|
|
<text class="right-title">查看联系方式</text>
|
|
<text class="right-desc">查看房主手机号，方便直接联系</text>
|
|
</view>
|
|
</view>
|
|
<view class="right-item">
|
|
<view class="right-icon">
|
|
<uv-icon name="star-fill" size="40rpx" color="#FFD700"></uv-icon>
|
|
</view>
|
|
<view class="right-content">
|
|
<text class="right-title">优先查看房源</text>
|
|
<text class="right-desc">抢先查看最新房源信息</text>
|
|
</view>
|
|
</view>
|
|
<view class="right-item">
|
|
<view class="right-icon">
|
|
<uv-icon name="heart-fill" size="40rpx" color="#9B59B6"></uv-icon>
|
|
</view>
|
|
<view class="right-content">
|
|
<text class="right-title">专属客服</text>
|
|
<text class="right-desc">享受一对一专属客服服务</text>
|
|
</view>
|
|
</view>
|
|
<view class="right-item">
|
|
<view class="right-icon">
|
|
<uv-icon name="gift-fill" size="40rpx" color="#E74C3C"></uv-icon>
|
|
</view>
|
|
<view class="right-content">
|
|
<text class="right-title">永久会员标识</text>
|
|
<text class="right-desc">尊贵的永久会员身份标识</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 永久会员价格 -->
|
|
<view class="package-section">
|
|
<view class="price-card">
|
|
<view class="price-header">
|
|
<view class="price-tag">
|
|
<text class="currency">￥</text>
|
|
<text class="price">99</text>
|
|
</view>
|
|
<text class="price-desc">永久会员</text>
|
|
</view>
|
|
<view class="price-benefits">
|
|
<text class="benefit-text">• 一次购买，终身享受所有会员权益</text>
|
|
<text class="benefit-text">• 无需续费，永久有效</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 开通按钮 -->
|
|
<view class="action-section">
|
|
<uv-button type="primary" @click="openMember"
|
|
style="background: linear-gradient(135deg, #1EC77A 0%, #16A085 100%); border: none; border-radius: 50rpx; height: 100rpx; font-size: 32rpx; font-weight: bold;">
|
|
立即开通永久会员 - ￥99
|
|
</uv-button>
|
|
<view class="agreement">
|
|
<text>开通即表示同意</text>
|
|
<text class="link" @click="showAgreement">《永久会员服务协议》</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
memberPrice: 99 // 永久会员价格
|
|
}
|
|
},
|
|
methods: {
|
|
openMember() {
|
|
uni.showModal({
|
|
title: '确认开通',
|
|
content: `确定开通永久会员吗？\n价格：￥${this.memberPrice}\n终身享受会员权益`,
|
|
confirmText: '确认开通',
|
|
cancelText: '取消',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.processPay()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
processPay() {
|
|
// 这里应该调用支付接口
|
|
uni.showLoading({
|
|
title: '处理中...'
|
|
})
|
|
|
|
// 模拟支付处理
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '永久会员开通成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
})
|
|
|
|
// 返回上一页并刷新用户信息
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 2000)
|
|
}, 2000)
|
|
},
|
|
showAgreement() {
|
|
uni.showModal({
|
|
title: '永久会员服务协议',
|
|
content: '1. 永久会员享有查看详细地址和联系方式的权限\n2. 会员权益包括但不限于：查看具体定位、村址信息、房主手机号等\n3. 永久会员权益终身有效，无需续费\n4. 其他会员服务条款...',
|
|
showCancel: false,
|
|
confirmText: '我知道了'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.u-page {
|
|
background: linear-gradient(180deg, #1EC77A 0%, #f5f5f5 30%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.member-header {
|
|
padding: 40rpx 30rpx;
|
|
}
|
|
|
|
.member-card {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 20rpx;
|
|
padding: 40rpx;
|
|
backdrop-filter: blur(10rpx);
|
|
}
|
|
|
|
.member-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.title-text {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: white;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.member-desc {
|
|
font-size: 28rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.rights-section, .package-section {
|
|
margin: 30rpx;
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
padding: 40rpx 30rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.rights-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30rpx;
|
|
}
|
|
|
|
.right-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.right-icon {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.right-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.right-title {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.right-desc {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.price-card {
|
|
text-align: center;
|
|
background: linear-gradient(135deg, #1EC77A 0%, #16A085 100%);
|
|
border-radius: 20rpx;
|
|
padding: 50rpx 30rpx;
|
|
color: white;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.price-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50rpx;
|
|
right: -50rpx;
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.price-header {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.price-tag {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.currency {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.price {
|
|
font-size: 120rpx;
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
}
|
|
|
|
.price-desc {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.price-benefits {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15rpx;
|
|
}
|
|
|
|
.benefit-text {
|
|
font-size: 26rpx;
|
|
opacity: 0.9;
|
|
text-align: left;
|
|
}
|
|
|
|
.action-section {
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.agreement {
|
|
text-align: center;
|
|
margin-top: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.link {
|
|
color: #1EC77A;
|
|
}
|
|
</style>
|