1139 lines
25 KiB
Vue
1139 lines
25 KiB
Vue
<template>
|
|
<view class="page">
|
|
<!-- 固定导航栏 -->
|
|
<view class="navbar-fixed" :style="{ background: navbarBgColor }">
|
|
<image src="/static/ic_back.png" class="back-btn" @click="goBack" mode=""></image>
|
|
<text class="navbar-title">{{ $t('invite.title') }}</text>
|
|
</view>
|
|
|
|
<!-- 顶部红色奖励区域 -->
|
|
<view class="reward-header">
|
|
<image src="/static/new_bg1.png" class="bg-image" mode="scaleToFill"></image>
|
|
|
|
<!-- 奖励内容 -->
|
|
<view class="reward-content">
|
|
<text class="reward-title">{{ $t('invite.rewardTitle') }}</text>
|
|
<view class="reward-desc-box">
|
|
<text class="reward-desc">{{ $t('invite.rewardDesc') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 参与步骤 -->
|
|
<view class="steps-section">
|
|
<view class="section-title-row">
|
|
<view class="title-line"></view>
|
|
<text class="section-title">{{ $t('invite.stepsTitle') }}</text>
|
|
<view class="title-line"></view>
|
|
</view>
|
|
|
|
<view class="step-item">
|
|
<view class="step-icon step-icon-1">
|
|
<image src="/static/new_user.png" class="step-img" mode="widthFix"></image>
|
|
</view>
|
|
<text class="step-text">{{ $t('invite.step1') }}</text>
|
|
</view>
|
|
|
|
<view class="step-item">
|
|
<view class="step-icon step-icon-2">
|
|
<image src="/static/red_box.png" class="step-img" mode="widthFix"></image>
|
|
</view>
|
|
<text class="step-text">{{ $t('invite.step2') }}</text>
|
|
</view>
|
|
|
|
<view class="step-item">
|
|
<view class="step-icon step-icon-3">
|
|
<image src="/static/ic_wallet.png" class="step-img" mode="widthFix"></image>
|
|
</view>
|
|
<text class="step-text">{{ $t('invite.step3') }}</text>
|
|
</view>
|
|
|
|
<view class="detail-link" @click="showDetail">
|
|
<text class="detail-text">{{ $t('invite.viewDetail') }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="action-buttons">
|
|
<view class="action-btn qrcode-btn" @click="generateQRCode">
|
|
<text class="btn-text">{{ $t('invite.generateQRCode') }}</text>
|
|
</view>
|
|
<view class="action-btn share-btn" @click="shareToFriend">
|
|
<text class="btn-text">{{ $t('invite.shareToFriend') }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提现记录 -->
|
|
<view class="record-section">
|
|
<view class="record-header" @click="goToWithdrawDetail">
|
|
<text class="record-title">{{ $t('invite.withdrawRecord') }}</text>
|
|
<view class="record-more">
|
|
<text class="more-text">{{ $t('invite.withdrawPeriod') }}</text>
|
|
<image src="/static/arrow_right3.png" class="arrow-icon" mode=""></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="record-content">
|
|
<image src="/static/new_bg2.png" class="record-bg-image" mode="scaleToFill"></image>
|
|
|
|
<view class="reward-cards">
|
|
<view class="reward-card" v-for="(item, index) in withdrawRecords" :key="index">
|
|
<text class="reward-amount">{{ item.amount }}{{ $t('common.currency') }}</text>
|
|
<text class="reward-status">{{ item.status }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="apply-withdraw-btn" @click="applyWithdraw">
|
|
<text class="apply-text">{{ $t('invite.applyWithdraw') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 邀请记录 -->
|
|
<view class="invite-record-section">
|
|
<view class="invite-record-header">
|
|
<text class="record-title">{{ $t('invite.inviteRecord') }}</text>
|
|
</view>
|
|
|
|
<view class="invite-record-content">
|
|
<image src="/static/approved.png" class="content-bg-stamp" mode="aspectFit"></image>
|
|
|
|
<view class="table-header">
|
|
<text class="table-col">{{ $t('invite.username') }}</text>
|
|
<text class="table-col">{{ $t('invite.uid') }}</text>
|
|
<text class="table-col">{{ $t('invite.inviteTime') }}</text>
|
|
<text class="table-col">{{ $t('invite.paid') }}</text>
|
|
</view>
|
|
|
|
<view class="table-body">
|
|
<view class="table-row" v-for="(item, index) in inviteRecords" :key="index">
|
|
<text class="table-cell">{{ item.username }}</text>
|
|
<text class="table-cell">{{ item.uid }}</text>
|
|
<text class="table-cell">{{ item.time }}</text>
|
|
<view class="table-cell status-cell">
|
|
<text v-if="item.paid && item.amount" class="paid-amount">¥{{ item.amount }}</text>
|
|
<text v-else class="unpaid-text">¥0</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="inviteRecords.length === 0" class="empty-state">
|
|
<text class="empty-text">{{ $t('common.noData') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提现明细弹窗 -->
|
|
<view v-if="showWithdrawModal" class="modal-overlay" @click="closeWithdrawModal">
|
|
<view class="modal-content" @click.stop>
|
|
<view class="modal-header">
|
|
<text class="modal-title">{{ $t('invite.withdrawDetail') }}</text>
|
|
<image src="/static/ic_colse.png" class="close-icon" @click="closeWithdrawModal" mode=""></image>
|
|
</view>
|
|
|
|
<view class="modal-table">
|
|
<view class="modal-table-header">
|
|
<text class="modal-table-col">{{ $t('invite.time') }}</text>
|
|
<text class="modal-table-col">{{ $t('invite.amount') }}</text>
|
|
<text class="modal-table-col">{{ $t('invite.status') }}</text>
|
|
</view>
|
|
|
|
<view class="modal-table-body">
|
|
<view class="modal-table-row" v-for="(item, index) in withdrawDetailList" :key="index">
|
|
<text class="modal-table-cell">{{ item.time }}</text>
|
|
<text class="modal-table-cell">¥{{ item.amount }}</text>
|
|
<text class="modal-table-cell">{{ item.status }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 申请提现弹窗 -->
|
|
<view v-if="showApplyModal" class="modal-overlay" @click="closeApplyModal">
|
|
<view class="apply-modal-content" @click.stop>
|
|
<!-- 红色标题栏 -->
|
|
<view class="apply-modal-header">
|
|
<text class="apply-modal-title">{{ $t('invite.withdrawApplication') }} {{ applyStep }}/2</text>
|
|
</view>
|
|
|
|
<!-- 第一步：输入金额 -->
|
|
<view v-if="applyStep === 1" class="apply-step-content">
|
|
<text class="step-label">{{ $t('invite.enterAmount') }}</text>
|
|
<view class="amount-input-row">
|
|
<input class="amount-input" type="number" v-model="withdrawAmount" :placeholder="$t('invite.enterPlaceholder')" />
|
|
<text class="currency-text">{{ $t('common.currency') }}</text>
|
|
</view>
|
|
<text class="amount-hint">{{ $t('invite.amountHint') }}</text>
|
|
|
|
<view class="apply-btn" @click="nextStep">
|
|
<text class="apply-btn-text">{{ $t('invite.nextStep') }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 第二步：选择收款方式 -->
|
|
<view v-if="applyStep === 2" class="apply-step-content">
|
|
<text class="step-label">1.{{ $t('invite.selectPaymentMethod') }}</text>
|
|
<view class="payment-methods">
|
|
<view class="payment-method" :class="{ active: paymentMethod === 'wechat' }" @click="selectPaymentMethod('wechat')">
|
|
<text class="method-text">{{ $t('invite.wechat') }}</text>
|
|
</view>
|
|
<view class="payment-method" :class="{ active: paymentMethod === 'alipay' }" @click="selectPaymentMethod('alipay')">
|
|
<text class="method-text">{{ $t('invite.alipay') }}</text>
|
|
</view>
|
|
<view class="payment-method" :class="{ active: paymentMethod === 'bank' }" @click="selectPaymentMethod('bank')">
|
|
<text class="method-text">{{ $t('invite.bankCard') }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 微信/支付宝：上传收款码 -->
|
|
<view v-if="paymentMethod !== 'bank'">
|
|
<text class="step-label">2.{{ $t('invite.uploadQRCode') }}</text>
|
|
<view class="upload-area" @click="uploadQRCode">
|
|
<image v-if="qrcodeImage" :src="qrcodeImage" class="uploaded-image" mode="aspectFit"></image>
|
|
<text v-else class="upload-icon">+</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 银行卡：填写银行卡信息 -->
|
|
<view v-if="paymentMethod === 'bank'">
|
|
<text class="step-label">2.{{ $t('invite.enterBankInfo') }}</text>
|
|
|
|
<view class="form-item">
|
|
<text class="form-label">{{ $t('invite.bankCardNumber') }}</text>
|
|
<input class="form-input" v-model="bankCardNumber" :placeholder="$t('invite.enterBankCardNumber')" />
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="form-label">{{ $t('invite.cardholderName') }}</text>
|
|
<input class="form-input" v-model="cardholderName" :placeholder="$t('invite.enterCardholderName')" />
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="form-label">{{ $t('invite.bankName') }}</text>
|
|
<input class="form-input" v-model="bankName" :placeholder="$t('invite.enterBankName')" />
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<text class="form-label">{{ $t('invite.swiftCode') }} ({{ $t('invite.optional') }})</text>
|
|
<input class="form-input" v-model="swiftCode" :placeholder="$t('invite.enterSwiftCode')" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="apply-btn" @click="submitWithdraw">
|
|
<text class="apply-btn-text">{{ $t('invite.applyWithdraw') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
navbarBgColor: 'transparent',
|
|
scrollTop: 0,
|
|
showWithdrawModal: false,
|
|
showApplyModal: false,
|
|
applyStep: 1,
|
|
withdrawAmount: '',
|
|
paymentMethod: 'wechat',
|
|
qrcodeImage: '',
|
|
bankCardNumber: '',
|
|
cardholderName: '',
|
|
bankName: '',
|
|
swiftCode: '',
|
|
withdrawRecords: [],
|
|
withdrawDetailList: [],
|
|
inviteRecords: [{
|
|
username: 'aabbcc',
|
|
uid: '123123',
|
|
time: '2025/1/23',
|
|
paid: true,
|
|
amount: 12
|
|
},
|
|
{
|
|
username: 'aabbcc',
|
|
uid: '123123',
|
|
time: '2025/1/23',
|
|
paid: true,
|
|
amount: 4
|
|
},
|
|
{
|
|
username: 'aabbcc',
|
|
uid: '123123',
|
|
time: '2025/1/23',
|
|
paid: false
|
|
},
|
|
{
|
|
username: 'aabbcc',
|
|
uid: '123123',
|
|
time: '2025/1/23',
|
|
paid: true,
|
|
amount: 19
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 初始化提现记录数据
|
|
this.withdrawRecords = [{
|
|
amount: '99',
|
|
status: this.$t('invite.statusWaiting')
|
|
},
|
|
{
|
|
amount: '99',
|
|
status: this.$t('invite.statusProcessing')
|
|
},
|
|
{
|
|
amount: '99',
|
|
status: this.$t('invite.statusCompleted')
|
|
}
|
|
]
|
|
},
|
|
methods: {
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
showDetail() {
|
|
uni.showModal({
|
|
title: this.$t('invite.ruleTitle'),
|
|
content: this.$t('invite.ruleContent'),
|
|
showCancel: false
|
|
})
|
|
},
|
|
generateQRCode() {
|
|
uni.showToast({
|
|
title: this.$t('invite.qrcodeGenerated'),
|
|
icon: 'success'
|
|
})
|
|
},
|
|
shareToFriend() {
|
|
uni.share({
|
|
provider: 'weixin',
|
|
scene: 'WXSceneSession',
|
|
type: 0,
|
|
title: this.$t('invite.shareTitle'),
|
|
success: () => {
|
|
uni.showToast({
|
|
title: this.$t('invite.shareSuccess'),
|
|
icon: 'success'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
goToWithdrawDetail() {
|
|
// 打开提现明细弹窗
|
|
this.withdrawDetailList = [
|
|
{
|
|
time: '2025/1/23',
|
|
amount: '12',
|
|
status: this.$t('invite.statusCompleted')
|
|
},
|
|
{
|
|
time: '2025/1/23',
|
|
amount: '4',
|
|
status: this.$t('invite.statusProcessing')
|
|
},
|
|
{
|
|
time: '2025/1/23',
|
|
amount: '10',
|
|
status: this.$t('invite.statusCompleted')
|
|
}
|
|
]
|
|
this.showWithdrawModal = true
|
|
},
|
|
closeWithdrawModal() {
|
|
this.showWithdrawModal = false
|
|
},
|
|
applyWithdraw() {
|
|
// 打开申请提现弹窗
|
|
this.applyStep = 1
|
|
this.withdrawAmount = ''
|
|
this.paymentMethod = 'wechat'
|
|
this.qrcodeImage = ''
|
|
this.bankCardNumber = ''
|
|
this.cardholderName = ''
|
|
this.bankName = ''
|
|
this.swiftCode = ''
|
|
this.showApplyModal = true
|
|
},
|
|
closeApplyModal() {
|
|
this.showApplyModal = false
|
|
},
|
|
nextStep() {
|
|
if (!this.withdrawAmount || this.withdrawAmount < 1) {
|
|
uni.showToast({
|
|
title: this.$t('invite.enterAmountError'),
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.applyStep = 2
|
|
},
|
|
selectPaymentMethod(method) {
|
|
this.paymentMethod = method
|
|
},
|
|
uploadQRCode() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success: (res) => {
|
|
this.qrcodeImage = res.tempFilePaths[0]
|
|
}
|
|
})
|
|
},
|
|
submitWithdraw() {
|
|
// 验证微信/支付宝收款码
|
|
if (this.paymentMethod !== 'bank' && !this.qrcodeImage) {
|
|
uni.showToast({
|
|
title: this.$t('invite.uploadQRCodeError'),
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
// 验证银行卡信息
|
|
if (this.paymentMethod === 'bank') {
|
|
if (!this.bankCardNumber || !this.cardholderName || !this.bankName) {
|
|
uni.showToast({
|
|
title: this.$t('invite.bankInfoError'),
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
}
|
|
|
|
uni.showToast({
|
|
title: this.$t('invite.applySuccess'),
|
|
icon: 'success'
|
|
})
|
|
this.closeApplyModal()
|
|
},
|
|
handleScroll(e) {
|
|
// 页面滚动事件在 uni-app 中需要使用 onPageScroll
|
|
}
|
|
},
|
|
onPageScroll(e) {
|
|
const scrollTop = e.scrollTop
|
|
// 滚动距离超过 100px 时，导航栏背景从透明渐变到红色
|
|
if (scrollTop > 100) {
|
|
this.navbarBgColor = 'linear-gradient(135deg, #FF3B4E 0%, #FF6B7A 100%)'
|
|
} else {
|
|
// 根据滚动距离计算透明度
|
|
const opacity = scrollTop / 100
|
|
this.navbarBgColor = `rgba(255, 59, 78, ${opacity})`
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
min-height: 100vh;
|
|
background-color: #F3F4F8;
|
|
}
|
|
|
|
.navbar-fixed {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-top: 44px;
|
|
height: 88rpx;
|
|
transition: background 0.3s ease;
|
|
|
|
.back-btn {
|
|
position: absolute;
|
|
left: 30rpx;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.navbar-title {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.reward-header {
|
|
position: relative;
|
|
height: 550rpx;
|
|
background-color: #FF3B4E;
|
|
overflow: hidden;
|
|
|
|
.bg-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.reward-content {
|
|
position: relative;
|
|
z-index: 5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 550rpx;
|
|
padding: 80rpx 30rpx 0;
|
|
|
|
.reward-title {
|
|
font-size: 60rpx;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
|
|
margin-bottom: 60rpx;
|
|
letter-spacing: 2rpx;
|
|
text-align: center;
|
|
word-break: break-word;
|
|
max-width: 100%;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.reward-desc-box {
|
|
background-color: rgba(255, 255, 255, 0.98);
|
|
border-radius: 60rpx;
|
|
padding: 24rpx 50rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
|
max-width: 90%;
|
|
|
|
.reward-desc {
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
line-height: 1.8;
|
|
text-align: center;
|
|
word-break: break-word;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.steps-section {
|
|
background-color: #FFFFFF;
|
|
margin: 30rpx;
|
|
border-radius: 20rpx;
|
|
padding: 40rpx 30rpx;
|
|
|
|
.section-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 40rpx;
|
|
|
|
.title-line {
|
|
width: 60rpx;
|
|
height: 2rpx;
|
|
background-color: #333333;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
margin: 0 20rpx;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.step-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-left: 60rpx;
|
|
margin-bottom: 30rpx;
|
|
|
|
.step-icon {
|
|
width: 74rpx;
|
|
height: 74rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 24rpx;
|
|
flex-shrink: 0;
|
|
|
|
.step-img {
|
|
width: 74rpx;
|
|
height: 74rpx;
|
|
}
|
|
}
|
|
|
|
.step-text {
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
flex: 1;
|
|
line-height: 1.6;
|
|
word-break: break-word;
|
|
padding-top: 10rpx;
|
|
}
|
|
}
|
|
|
|
.detail-link {
|
|
text-align: center;
|
|
margin-top: 20rpx;
|
|
|
|
.detail-text {
|
|
font-size: 26rpx;
|
|
color: #007AFF;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
margin-bottom: 30rpx;
|
|
gap: 20rpx;
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
min-height: 50rpx;
|
|
border-radius: 44rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20rpx 10rpx;
|
|
|
|
&.qrcode-btn {
|
|
background: linear-gradient(135deg, #FF3B4E 0%, #FF6B7A 100%);
|
|
}
|
|
|
|
&.share-btn {
|
|
background: linear-gradient(135deg, #FF6B7A 0%, #FF3B4E 100%);
|
|
}
|
|
|
|
.btn-text {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
word-break: break-word;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.record-section {
|
|
margin: 0 30rpx 30rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
|
|
.record-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: linear-gradient(135deg, #FF3B4E 0%, #FF6B7A 100%);
|
|
padding: 24rpx 30rpx;
|
|
|
|
.record-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.record-more {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.more-text {
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.arrow-icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.record-content {
|
|
background-color: #FFFFFF;
|
|
padding: 50rpx 30rpx 40rpx;
|
|
border: 4rpx solid #FF3B4E;
|
|
border-top: none;
|
|
border-radius: 0 0 20rpx 20rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.record-bg-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 1;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.reward-cards {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-bottom: 40rpx;
|
|
position: relative;
|
|
|
|
.reward-card {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
&:not(:last-child)::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 1rpx;
|
|
height: 80rpx;
|
|
background-color: #E5E5E5;
|
|
}
|
|
|
|
.reward-amount {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
color: #FF3B4E;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.reward-status {
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.apply-withdraw-btn {
|
|
background: linear-gradient(135deg, #FF3B4E 0%, #FF6B7A 100%);
|
|
height: 88rpx;
|
|
border-radius: 44rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 70%;
|
|
margin: 0 auto;
|
|
|
|
.apply-text {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.invite-record-section {
|
|
margin: 0 30rpx 50rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
padding-bottom: 50rpx;
|
|
|
|
.invite-record-header {
|
|
background: linear-gradient(135deg, #FF3B4E 0%, #FF6B7A 100%);
|
|
padding: 24rpx 30rpx;
|
|
|
|
.record-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.invite-record-content {
|
|
background-color: #FFFFFF;
|
|
border: 4rpx solid #FF3B4E;
|
|
border-top: none;
|
|
border-radius: 0 0 20rpx 20rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.content-bg-stamp {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
bottom: 30rpx;
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
opacity: 0.35;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
}
|
|
|
|
.table-header {
|
|
display: flex;
|
|
background-color: #FFFFFF;
|
|
padding: 24rpx 16rpx;
|
|
border-bottom: 2rpx solid #F0F0F0;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.table-col {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.table-body {
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.table-row {
|
|
display: flex;
|
|
padding: 24rpx 16rpx;
|
|
border-bottom: 1rpx solid #F0F0F0;
|
|
align-items: center;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.table-cell {
|
|
flex: 1;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
text-align: center;
|
|
|
|
&.status-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.paid-amount {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.unpaid-text {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 80rpx 0;
|
|
text-align: center;
|
|
|
|
.empty-text {
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 提现明细弹窗
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
|
|
.modal-content {
|
|
background-color: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
width: 600rpx;
|
|
max-height: 70vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #F0F0F0;
|
|
position: relative;
|
|
|
|
.modal-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.close-icon {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.modal-table {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
|
|
.modal-table-header {
|
|
display: flex;
|
|
padding: 24rpx 20rpx;
|
|
background-color: #F8F8F8;
|
|
border-bottom: 1rpx solid #E5E5E5;
|
|
|
|
.modal-table-col {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.modal-table-body {
|
|
.modal-table-row {
|
|
display: flex;
|
|
padding: 24rpx 20rpx;
|
|
border-bottom: 1rpx solid #F0F0F0;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.modal-table-cell {
|
|
flex: 1;
|
|
font-size: 26rpx;
|
|
color: #666666;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 申请提现弹窗
|
|
.apply-modal-content {
|
|
border-radius: 20rpx;
|
|
width: 650rpx;
|
|
max-width: 90vw;
|
|
overflow: hidden;
|
|
position: relative;
|
|
max-height: 80vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.apply-modal-header {
|
|
background: linear-gradient(135deg, #FF3B4E 0%, #FF6B7A 100%);
|
|
padding: 30rpx 20rpx;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
|
|
.apply-modal-title {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
word-break: keep-all;
|
|
}
|
|
}
|
|
|
|
.apply-step-content {
|
|
padding: 40rpx 30rpx;
|
|
position: relative;
|
|
background-color: rgba(255, 255, 255, 0.95);
|
|
background-image: url('/static/new_bg2.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(255, 255, 255, 0.85);
|
|
z-index: 0;
|
|
}
|
|
|
|
.step-label {
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
font-weight: bold;
|
|
display: block;
|
|
margin-bottom: 20rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
line-height: 1.5;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.amount-input-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.amount-input {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
background-color: #FFFFFF;
|
|
border: 1rpx solid #E5E5E5;
|
|
border-radius: 12rpx;
|
|
padding: 0 20rpx;
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.currency-text {
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
|
|
.amount-hint {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
text-align: center;
|
|
display: block;
|
|
margin-bottom: 40rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.payment-methods {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
margin-bottom: 30rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.payment-method {
|
|
flex: 1;
|
|
height: 88rpx;
|
|
background-color: #E8E8E8;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 12rpx;
|
|
|
|
&.active {
|
|
background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
|
|
|
|
.method-text {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.method-text {
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.upload-area {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border: 2rpx dashed #CCCCCC;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 40rpx;
|
|
background-color: #FFFFFF;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.upload-icon {
|
|
font-size: 80rpx;
|
|
color: #CCCCCC;
|
|
}
|
|
|
|
.uploaded-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 12rpx;
|
|
}
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 20rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.form-label {
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
display: block;
|
|
margin-bottom: 10rpx;
|
|
line-height: 1.5;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background-color: #FFFFFF;
|
|
border: 1rpx solid #E5E5E5;
|
|
border-radius: 12rpx;
|
|
padding: 0 20rpx;
|
|
font-size: 26rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.apply-btn {
|
|
background: linear-gradient(135deg, #FF3B4E 0%, #FF6B7A 100%);
|
|
height: 88rpx;
|
|
border-radius: 44rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: 20rpx;
|
|
|
|
.apply-btn-text {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|