wangfukang
2 weeks ago
3 changed files with 961 additions and 52 deletions
@ -0,0 +1,810 @@ |
|||||
|
<template> |
||||
|
<view class="invite-page"> |
||||
|
<view class="ambient ambient-one"></view> |
||||
|
<view class="ambient ambient-two"></view> |
||||
|
<view class="ambient ambient-three"></view> |
||||
|
|
||||
|
<view class="back-btn glass-card" @tap="goBack"> |
||||
|
<text class="back-arrow">‹</text> |
||||
|
<text>返回</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="invite-hero glass-card"> |
||||
|
<view class="hero-copy"> |
||||
|
<view class="invite-badge">半径里邀友计划</view> |
||||
|
<view class="invite-title">叫上好友一起来省钱</view> |
||||
|
<view class="invite-subtitle">{{activityDesc}}</view> |
||||
|
<view class="reward-panel" :class="{'reward-panel-empty': !hasRewardActivity}"> |
||||
|
<view class="reward-label">{{hasRewardActivity ? '当前区域奖励' : '当前区域'}}</view> |
||||
|
<view class="reward-amount" v-if="hasRewardActivity">¥{{formatAmount(rewardAmount)}}</view> |
||||
|
<view class="reward-empty-text" v-else>暂无拉新奖励活动</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="hero-ip"> |
||||
|
<view class="ip-halo"></view> |
||||
|
<image class="squirrel" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/f7227759d693497a8beab87ff437a875.png" mode="aspectFit"></image> |
||||
|
<view class="sticker sticker-a">好友 +1</view> |
||||
|
<view class="sticker sticker-b">现金奖励</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="rule-card glass-card"> |
||||
|
<view class="section-title">奖励规则</view> |
||||
|
<view class="rule-grid"> |
||||
|
<view class="rule-item"> |
||||
|
<text class="rule-dot">1</text> |
||||
|
<text>新用户首次注册并绑定手机号才可计奖</text> |
||||
|
</view> |
||||
|
<view class="rule-item"> |
||||
|
<text class="rule-dot">2</text> |
||||
|
<text>同一手机号、同一设备只奖励一次</text> |
||||
|
</view> |
||||
|
<view class="rule-item"> |
||||
|
<text class="rule-dot">3</text> |
||||
|
<text>好友需在分享时所在区域范围内登录</text> |
||||
|
</view> |
||||
|
<view class="rule-item"> |
||||
|
<text class="rule-dot">4</text> |
||||
|
<text>奖励通过微信商家转账发放到微信零钱</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view v-if="hasRewardActivity" class="auth-card glass-card"> |
||||
|
<view> |
||||
|
<view class="section-title">微信收款授权</view> |
||||
|
<view class="auth-desc">{{transferAuthDesc}}</view> |
||||
|
</view> |
||||
|
<view class="auth-action" :class="{'auth-action-done': isTransferAuthorized}" @tap="openTransferAuth"> |
||||
|
{{isTransferAuthorized ? '已开通' : '开通免确认收款'}} |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<button class="share-btn" :class="{'share-btn-disabled': !hasRewardActivity}" :disabled="!hasRewardActivity" open-type="share"> |
||||
|
{{hasRewardActivity ? '立即邀请好友' : '暂无活动'}} |
||||
|
</button> |
||||
|
|
||||
|
<view class="record-card glass-card"> |
||||
|
<view class="record-head"> |
||||
|
<view> |
||||
|
<view class="section-title">我的拉新记录</view> |
||||
|
<view class="record-subtitle">只展示已进入奖励处理流程的记录</view> |
||||
|
</view> |
||||
|
<view class="record-refresh" @tap="refreshRecords">刷新</view> |
||||
|
</view> |
||||
|
<view v-if="records.length === 0 && !recordLoading" class="record-empty"> |
||||
|
暂无拉新奖励记录 |
||||
|
</view> |
||||
|
<view v-for="item in records" :key="item.id" class="record-item"> |
||||
|
<view class="record-row"> |
||||
|
<text class="record-phone">{{maskMobile(item.invitedMobile)}}</text> |
||||
|
<text class="record-status" :class="'record-status-' + Number(item.status)">{{statusText(item.status)}}</text> |
||||
|
</view> |
||||
|
<view class="record-row record-row-sub"> |
||||
|
<text>奖励金额 ¥{{formatAmount(item.amount)}}</text> |
||||
|
<text>{{item.createTime || ''}}</text> |
||||
|
</view> |
||||
|
<view v-if="item.failReason" class="record-reason">{{item.failReason}}</view> |
||||
|
<view v-if="canConfirmTransfer(item)" class="confirm-transfer-btn" @tap="confirmTransfer(item)"> |
||||
|
确认收款 |
||||
|
</view> |
||||
|
</view> |
||||
|
<view v-if="records.length > 0" class="record-more" @tap="loadMoreRecords"> |
||||
|
{{recordLoading ? '加载中...' : (recordFinished ? '没有更多了' : '加载更多')}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { buildInviteHomeSharePath } from '@/utils/sharePath.js' |
||||
|
import { requireLoginToCurrentPage } from '@/utils/authRedirect.js' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
records: [], |
||||
|
recordPageNumber: 1, |
||||
|
recordPageSize: 10, |
||||
|
recordTotal: 0, |
||||
|
recordLoading: false, |
||||
|
recordFinished: false, |
||||
|
rewardAmount: 0, |
||||
|
configLoaded: false, |
||||
|
transferAuth: { |
||||
|
state: '', |
||||
|
authNo: '', |
||||
|
authId: '', |
||||
|
mchId: '', |
||||
|
appId: '', |
||||
|
packageInfo: '' |
||||
|
}, |
||||
|
transferAuthLoading: false, |
||||
|
authStatusLoaded: false, |
||||
|
autoAuthTriggered: false |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
hasRewardActivity() { |
||||
|
return Number(this.rewardAmount || 0) > 0 |
||||
|
}, |
||||
|
isTransferAuthorized() { |
||||
|
return this.transferAuth && this.transferAuth.state === 'TAKING_EFFECT' |
||||
|
}, |
||||
|
transferAuthDesc() { |
||||
|
if (this.isTransferAuthorized) { |
||||
|
return '已授权微信收款，后续奖励将自动到账微信零钱。' |
||||
|
} |
||||
|
return '开通后无需每笔确认，好友完成注册奖励会自动发放到微信零钱。' |
||||
|
}, |
||||
|
activityDesc() { |
||||
|
return this.hasRewardActivity |
||||
|
? '好友在当前区域完成新用户注册并绑定手机号后，你将获得现金奖励。' |
||||
|
: '当前区域暂未开启拉新奖励，活动开启后这里会第一时间展示金额。' |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
if (!requireLoginToCurrentPage()) return |
||||
|
this.enableShareMenu() |
||||
|
this.loadInviteConfig() |
||||
|
this.loadTransferAuthStatus() |
||||
|
this.refreshRecords() |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
this.loadMoreRecords() |
||||
|
}, |
||||
|
onShareAppMessage() { |
||||
|
return { |
||||
|
title: '来半径里一起拼团，注册后我还能领现金奖励', |
||||
|
path: buildInviteHomeSharePath() |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
goBack() { |
||||
|
const pages = getCurrentPages ? getCurrentPages() : [] |
||||
|
if (pages && pages.length > 1) { |
||||
|
uni.navigateBack() |
||||
|
return |
||||
|
} |
||||
|
uni.switchTab({ |
||||
|
url: '/pages/index/index', |
||||
|
fail: () => { |
||||
|
uni.redirectTo({ |
||||
|
url: '/pages/index/index' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
enableShareMenu() { |
||||
|
if (!uni.showShareMenu) return |
||||
|
uni.showShareMenu({ |
||||
|
withShareTicket: true, |
||||
|
menus: ['shareAppMessage'] |
||||
|
}) |
||||
|
}, |
||||
|
readCurrentRegionId() { |
||||
|
try { |
||||
|
const area = uni.getStorageSync('area') |
||||
|
if (!area) return '' |
||||
|
const data = typeof area === 'string' ? JSON.parse(area) : area |
||||
|
return data && data.id ? String(data.id) : '' |
||||
|
} catch (e) { |
||||
|
return '' |
||||
|
} |
||||
|
}, |
||||
|
loadInviteConfig() { |
||||
|
const regionId = this.readCurrentRegionId() |
||||
|
if (!regionId) { |
||||
|
this.rewardAmount = 0 |
||||
|
this.configLoaded = true |
||||
|
this.tryAutoOpenTransferAuth() |
||||
|
return |
||||
|
} |
||||
|
this.tui.request('/app/inviteReward/config', 'GET', { |
||||
|
regionId |
||||
|
}, false, true, true).then((res) => { |
||||
|
this.configLoaded = true |
||||
|
const config = res && res.code == 200 ? (res.result || null) : null |
||||
|
this.rewardAmount = config && Number(config.rewardAmount || 0) > 0 ? Number(config.rewardAmount || 0) : 0 |
||||
|
this.tryAutoOpenTransferAuth() |
||||
|
}).catch(() => { |
||||
|
this.configLoaded = true |
||||
|
this.rewardAmount = 0 |
||||
|
this.tryAutoOpenTransferAuth() |
||||
|
}) |
||||
|
}, |
||||
|
loadTransferAuthStatus() { |
||||
|
this.tui.request('/app/inviteReward/transferAuth/status', 'GET', {}, false, true, true).then((res) => { |
||||
|
if (res && res.code == 200 && res.result) { |
||||
|
this.transferAuth = Object.assign({}, this.transferAuth, res.result) |
||||
|
} |
||||
|
this.authStatusLoaded = true |
||||
|
this.tryAutoOpenTransferAuth() |
||||
|
}).catch(() => { |
||||
|
this.authStatusLoaded = true |
||||
|
this.tryAutoOpenTransferAuth() |
||||
|
}) |
||||
|
}, |
||||
|
tryAutoOpenTransferAuth() { |
||||
|
if (!this.configLoaded || !this.authStatusLoaded || this.autoAuthTriggered) return |
||||
|
if (!this.hasRewardActivity || this.isTransferAuthorized) return |
||||
|
this.autoAuthTriggered = true |
||||
|
setTimeout(() => this.openTransferAuth(), 300) |
||||
|
}, |
||||
|
openTransferAuth() { |
||||
|
if (this.isTransferAuthorized || this.transferAuthLoading) return |
||||
|
this.transferAuthLoading = true |
||||
|
this.tui.request('/app/inviteReward/transferAuth/apply', 'POST', {}, false, true, true).then((res) => { |
||||
|
this.transferAuthLoading = false |
||||
|
if (!res || res.code != 200 || !res.result) { |
||||
|
this.tui.toast((res && res.message) || '收款授权申请失败') |
||||
|
return |
||||
|
} |
||||
|
this.transferAuth = Object.assign({}, this.transferAuth, res.result) |
||||
|
if (this.isTransferAuthorized) { |
||||
|
this.tui.toast('已开通自动收款') |
||||
|
return |
||||
|
} |
||||
|
this.requestMerchantTransferAuth(res.result) |
||||
|
}).catch(() => { |
||||
|
this.transferAuthLoading = false |
||||
|
this.tui.toast('收款授权申请失败') |
||||
|
}) |
||||
|
}, |
||||
|
requestMerchantTransferAuth(authInfo) { |
||||
|
const packageInfo = authInfo && authInfo.packageInfo |
||||
|
if (!packageInfo) { |
||||
|
this.tui.toast('缺少微信授权信息') |
||||
|
return |
||||
|
} |
||||
|
if (typeof wx === 'undefined' || !wx.requestMerchantTransfer) { |
||||
|
this.tui.toast('当前微信版本暂不支持收款授权') |
||||
|
return |
||||
|
} |
||||
|
wx.requestMerchantTransfer({ |
||||
|
mchId: authInfo.mchId, |
||||
|
appId: authInfo.appId, |
||||
|
'package': packageInfo, |
||||
|
success: () => { |
||||
|
this.tui.toast('授权完成，正在同步状态', 1600, true) |
||||
|
}, |
||||
|
fail: () => { |
||||
|
this.tui.toast('未完成收款授权') |
||||
|
}, |
||||
|
complete: () => { |
||||
|
setTimeout(() => this.refreshTransferAuth(2), 1500) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
refreshTransferAuth(retryLeft = 0) { |
||||
|
this.tui.request('/app/inviteReward/transferAuth/query', 'POST', {}, false, true, true).then((res) => { |
||||
|
if (res && res.code == 200 && res.result) { |
||||
|
this.transferAuth = Object.assign({}, this.transferAuth, res.result) |
||||
|
if (this.isTransferAuthorized) { |
||||
|
this.tui.toast('已开通自动收款') |
||||
|
} else if (retryLeft > 0) { |
||||
|
setTimeout(() => this.refreshTransferAuth(retryLeft - 1), 1500) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
refreshRecords() { |
||||
|
this.recordPageNumber = 1 |
||||
|
this.recordFinished = false |
||||
|
this.loadRecords(true) |
||||
|
}, |
||||
|
loadMoreRecords() { |
||||
|
if (this.recordLoading || this.recordFinished) return |
||||
|
this.recordPageNumber += 1 |
||||
|
this.loadRecords(false) |
||||
|
}, |
||||
|
loadRecords(reset) { |
||||
|
this.recordLoading = true |
||||
|
this.tui.request('/app/inviteReward/my/page', 'GET', { |
||||
|
pageNumber: this.recordPageNumber, |
||||
|
pageSize: this.recordPageSize |
||||
|
}, false, true, true).then((res) => { |
||||
|
this.recordLoading = false |
||||
|
if (res.code != 200 || !res.result) { |
||||
|
if (!reset) this.recordPageNumber -= 1 |
||||
|
this.tui.toast(res.message || '拉新记录加载失败') |
||||
|
return |
||||
|
} |
||||
|
const page = res.result || {} |
||||
|
const nextRecords = page.records || [] |
||||
|
this.recordTotal = Number(page.total || 0) |
||||
|
this.records = reset ? nextRecords : this.records.concat(nextRecords) |
||||
|
this.recordFinished = this.records.length >= this.recordTotal || nextRecords.length < this.recordPageSize |
||||
|
}).catch(() => { |
||||
|
this.recordLoading = false |
||||
|
if (!reset) this.recordPageNumber -= 1 |
||||
|
this.tui.toast('拉新记录加载失败') |
||||
|
}) |
||||
|
}, |
||||
|
statusText(status) { |
||||
|
const map = { |
||||
|
0: '处理中', |
||||
|
1: '已发放', |
||||
|
2: '发放失败', |
||||
|
3: '已跳过' |
||||
|
} |
||||
|
return map[Number(status)] || '未知' |
||||
|
}, |
||||
|
formatAmount(value) { |
||||
|
const num = Number(value || 0) |
||||
|
return num.toFixed(2) |
||||
|
}, |
||||
|
maskMobile(mobile) { |
||||
|
const value = String(mobile || '') |
||||
|
if (value.length < 7) return value || '新用户' |
||||
|
return value.slice(0, 3) + '****' + value.slice(-4) |
||||
|
}, |
||||
|
parseWxResponse(item) { |
||||
|
try { |
||||
|
return item && item.wxResponse ? JSON.parse(item.wxResponse) : {} |
||||
|
} catch (e) { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
transferPackageInfo(item) { |
||||
|
const wxResponse = this.parseWxResponse(item) |
||||
|
return wxResponse.package_info || '' |
||||
|
}, |
||||
|
canConfirmTransfer(item) { |
||||
|
return Number(item && item.status) === 0 && !!this.transferPackageInfo(item) |
||||
|
}, |
||||
|
confirmTransfer(item) { |
||||
|
const packageInfo = this.transferPackageInfo(item) |
||||
|
if (!packageInfo) { |
||||
|
this.tui.toast('缺少收款确认信息，请刷新后再试') |
||||
|
return |
||||
|
} |
||||
|
if (typeof wx === 'undefined' || !wx.openBusinessView) { |
||||
|
this.tui.toast('当前微信版本暂不支持确认收款') |
||||
|
return |
||||
|
} |
||||
|
wx.openBusinessView({ |
||||
|
businessType: 'weappBusinessTransfer', |
||||
|
extraData: { |
||||
|
mchId: WECHAT_TRANSFER_MCH_ID, |
||||
|
appId: WECHAT_TRANSFER_APP_ID, |
||||
|
package: packageInfo |
||||
|
}, |
||||
|
success: () => { |
||||
|
this.tui.toast('请按微信页面提示确认收款', 1600, true) |
||||
|
setTimeout(() => this.refreshRecords(), 1200) |
||||
|
}, |
||||
|
fail: () => { |
||||
|
this.tui.toast('未完成收款确认') |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.invite-page { |
||||
|
position: relative; |
||||
|
min-height: 100vh; |
||||
|
overflow: hidden; |
||||
|
padding: 132rpx 34rpx 56rpx; |
||||
|
box-sizing: border-box; |
||||
|
background: |
||||
|
radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.96) 0, rgba(255, 255, 255, 0) 260rpx), |
||||
|
radial-gradient(circle at 84% 0, rgba(199, 248, 219, 0.72) 0, rgba(199, 248, 219, 0) 300rpx), |
||||
|
linear-gradient(160deg, #f8f5e8 0%, #eefbe8 42%, #e7f8ef 72%, #fbf7ed 100%); |
||||
|
color: #123b31; |
||||
|
} |
||||
|
|
||||
|
.ambient { |
||||
|
position: absolute; |
||||
|
border-radius: 999rpx; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
.ambient-one { |
||||
|
top: 88rpx; |
||||
|
left: -94rpx; |
||||
|
width: 270rpx; |
||||
|
height: 270rpx; |
||||
|
background: rgba(255, 255, 255, 0.58); |
||||
|
box-shadow: 0 0 90rpx rgba(255, 255, 255, 0.78); |
||||
|
} |
||||
|
|
||||
|
.ambient-two { |
||||
|
top: 268rpx; |
||||
|
right: -84rpx; |
||||
|
width: 230rpx; |
||||
|
height: 230rpx; |
||||
|
background: rgba(166, 255, 234, 0.42); |
||||
|
box-shadow: 0 0 88rpx rgba(42, 191, 139, 0.14); |
||||
|
} |
||||
|
|
||||
|
.ambient-three { |
||||
|
left: 84rpx; |
||||
|
bottom: 190rpx; |
||||
|
width: 150rpx; |
||||
|
height: 150rpx; |
||||
|
background: rgba(255, 240, 199, 0.48); |
||||
|
box-shadow: 0 0 76rpx rgba(255, 213, 127, 0.24); |
||||
|
} |
||||
|
|
||||
|
.glass-card { |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
box-sizing: border-box; |
||||
|
border: 1rpx solid rgba(255, 255, 255, 0.72); |
||||
|
background: rgba(255, 255, 255, 0.58); |
||||
|
box-shadow: |
||||
|
0 24rpx 64rpx rgba(62, 116, 91, 0.14), |
||||
|
inset 0 1rpx 0 rgba(255, 255, 255, 0.76); |
||||
|
backdrop-filter: blur(24rpx); |
||||
|
} |
||||
|
|
||||
|
.back-btn { |
||||
|
position: absolute; |
||||
|
top: 62rpx; |
||||
|
left: 34rpx; |
||||
|
z-index: 5; |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 4rpx; |
||||
|
height: 56rpx; |
||||
|
padding: 0 20rpx 0 14rpx; |
||||
|
border-radius: 999rpx; |
||||
|
color: #123b31; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 800; |
||||
|
} |
||||
|
|
||||
|
.back-arrow { |
||||
|
font-size: 40rpx; |
||||
|
line-height: 1; |
||||
|
transform: translateY(-2rpx); |
||||
|
} |
||||
|
|
||||
|
.invite-hero { |
||||
|
display: flex; |
||||
|
min-height: 392rpx; |
||||
|
padding: 34rpx 30rpx 28rpx; |
||||
|
overflow: hidden; |
||||
|
border-radius: 46rpx; |
||||
|
} |
||||
|
|
||||
|
.hero-copy { |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
flex: 1; |
||||
|
min-width: 0; |
||||
|
} |
||||
|
|
||||
|
.invite-badge { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
height: 46rpx; |
||||
|
padding: 0 18rpx; |
||||
|
border-radius: 999rpx; |
||||
|
background: rgba(18, 59, 49, 0.92); |
||||
|
color: #fff5cf; |
||||
|
font-size: 22rpx; |
||||
|
font-weight: 800; |
||||
|
} |
||||
|
|
||||
|
.invite-title { |
||||
|
width: 420rpx; |
||||
|
margin-top: 28rpx; |
||||
|
color: #17372d; |
||||
|
font-size: 43rpx; |
||||
|
font-weight: 900; |
||||
|
line-height: 1.22; |
||||
|
} |
||||
|
|
||||
|
.invite-subtitle { |
||||
|
width: 410rpx; |
||||
|
margin-top: 18rpx; |
||||
|
color: rgba(43, 83, 70, 0.66); |
||||
|
font-size: 25rpx; |
||||
|
line-height: 1.58; |
||||
|
} |
||||
|
|
||||
|
.reward-panel { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
gap: 18rpx; |
||||
|
margin-top: 26rpx; |
||||
|
padding: 14rpx 18rpx; |
||||
|
border-radius: 999rpx; |
||||
|
background: linear-gradient(90deg, rgba(227, 255, 150, 0.95), rgba(166, 255, 234, 0.95)); |
||||
|
box-shadow: 0 16rpx 36rpx rgba(42, 191, 139, 0.18); |
||||
|
} |
||||
|
|
||||
|
.reward-panel-empty { |
||||
|
background: rgba(255, 255, 255, 0.66); |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
.reward-label { |
||||
|
color: rgba(7, 61, 51, 0.7); |
||||
|
font-size: 22rpx; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
|
||||
|
.reward-amount { |
||||
|
color: #073d33; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 950; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
|
||||
|
.reward-empty-text { |
||||
|
color: rgba(43, 83, 70, 0.62); |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 800; |
||||
|
} |
||||
|
|
||||
|
.hero-ip { |
||||
|
position: absolute; |
||||
|
right: -18rpx; |
||||
|
bottom: 8rpx; |
||||
|
width: 260rpx; |
||||
|
height: 300rpx; |
||||
|
} |
||||
|
|
||||
|
.ip-halo { |
||||
|
position: absolute; |
||||
|
left: 22rpx; |
||||
|
bottom: 42rpx; |
||||
|
width: 220rpx; |
||||
|
height: 150rpx; |
||||
|
border-radius: 50%; |
||||
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.82), rgba(245, 225, 177, 0.18) 64%, rgba(255, 255, 255, 0)); |
||||
|
} |
||||
|
|
||||
|
.squirrel { |
||||
|
position: absolute; |
||||
|
right: 22rpx; |
||||
|
bottom: 28rpx; |
||||
|
width: 150rpx; |
||||
|
height: 150rpx; |
||||
|
filter: drop-shadow(0 28rpx 28rpx rgba(80, 103, 79, 0.16)); |
||||
|
} |
||||
|
|
||||
|
.sticker { |
||||
|
position: absolute; |
||||
|
z-index: 2; |
||||
|
padding: 10rpx 16rpx; |
||||
|
border: 1rpx solid rgba(255, 255, 255, 0.76); |
||||
|
border-radius: 999rpx; |
||||
|
background: rgba(255, 255, 255, 0.62); |
||||
|
box-shadow: 0 14rpx 38rpx rgba(93, 132, 101, 0.12); |
||||
|
color: rgba(26, 69, 55, 0.72); |
||||
|
font-size: 21rpx; |
||||
|
font-weight: 800; |
||||
|
} |
||||
|
|
||||
|
.sticker-a { |
||||
|
right: 150rpx; |
||||
|
top: 58rpx; |
||||
|
transform: rotate(-7deg); |
||||
|
} |
||||
|
|
||||
|
.sticker-b { |
||||
|
right: 18rpx; |
||||
|
top: 26rpx; |
||||
|
color: #8a6834; |
||||
|
transform: rotate(5deg); |
||||
|
} |
||||
|
|
||||
|
.rule-card { |
||||
|
margin-top: 28rpx; |
||||
|
padding: 30rpx; |
||||
|
border-radius: 38rpx; |
||||
|
} |
||||
|
|
||||
|
.section-title { |
||||
|
color: #17372d; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 900; |
||||
|
} |
||||
|
|
||||
|
.rule-grid { |
||||
|
margin-top: 22rpx; |
||||
|
} |
||||
|
|
||||
|
.rule-item { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
gap: 16rpx; |
||||
|
margin-top: 18rpx; |
||||
|
color: rgba(18, 59, 49, 0.76); |
||||
|
font-size: 25rpx; |
||||
|
line-height: 1.55; |
||||
|
} |
||||
|
|
||||
|
.rule-dot { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
flex-shrink: 0; |
||||
|
width: 34rpx; |
||||
|
height: 34rpx; |
||||
|
margin-top: 2rpx; |
||||
|
border-radius: 14rpx; |
||||
|
background: rgba(42, 191, 139, 0.14); |
||||
|
color: #15956a; |
||||
|
font-size: 21rpx; |
||||
|
font-weight: 900; |
||||
|
} |
||||
|
|
||||
|
.auth-card { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 22rpx; |
||||
|
margin-top: 28rpx; |
||||
|
padding: 30rpx; |
||||
|
border-radius: 38rpx; |
||||
|
} |
||||
|
|
||||
|
.auth-desc { |
||||
|
margin-top: 12rpx; |
||||
|
color: rgba(18, 59, 49, 0.58); |
||||
|
font-size: 24rpx; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.auth-action { |
||||
|
flex-shrink: 0; |
||||
|
padding: 16rpx 24rpx; |
||||
|
border-radius: 999rpx; |
||||
|
background: linear-gradient(90deg, #dcff8d, #8fffe7); |
||||
|
color: #0b5b47; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 900; |
||||
|
box-shadow: 0 12rpx 28rpx rgba(44, 175, 121, 0.18); |
||||
|
} |
||||
|
|
||||
|
.auth-action-done { |
||||
|
background: rgba(42, 191, 139, 0.12); |
||||
|
color: #198861; |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
.share-btn { |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
margin-top: 34rpx; |
||||
|
height: 96rpx; |
||||
|
line-height: 96rpx; |
||||
|
border-radius: 999rpx; |
||||
|
border: 0; |
||||
|
background: linear-gradient(90deg, #123b31, #2abf8b); |
||||
|
color: #ffffff; |
||||
|
font-size: 31rpx; |
||||
|
font-weight: 900; |
||||
|
box-shadow: 0 22rpx 42rpx rgba(42, 191, 139, 0.3); |
||||
|
} |
||||
|
|
||||
|
.share-btn::after { |
||||
|
border: 0; |
||||
|
} |
||||
|
|
||||
|
.share-btn-disabled { |
||||
|
background: rgba(255, 255, 255, 0.64); |
||||
|
color: rgba(43, 83, 70, 0.48); |
||||
|
box-shadow: none; |
||||
|
} |
||||
|
|
||||
|
.record-card { |
||||
|
margin-top: 34rpx; |
||||
|
padding: 32rpx; |
||||
|
border-radius: 38rpx; |
||||
|
} |
||||
|
|
||||
|
.record-head { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.record-subtitle { |
||||
|
margin-top: 8rpx; |
||||
|
color: rgba(18, 59, 49, 0.52); |
||||
|
font-size: 23rpx; |
||||
|
} |
||||
|
|
||||
|
.record-refresh { |
||||
|
padding: 10rpx 22rpx; |
||||
|
border-radius: 999rpx; |
||||
|
background: rgba(42, 191, 139, 0.12); |
||||
|
color: #198861; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
|
||||
|
.record-empty { |
||||
|
padding: 54rpx 0; |
||||
|
color: rgba(18, 59, 49, 0.48); |
||||
|
font-size: 26rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.record-item { |
||||
|
padding: 22rpx 0; |
||||
|
border-top: 1rpx solid rgba(18, 59, 49, 0.08); |
||||
|
} |
||||
|
|
||||
|
.record-row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 18rpx; |
||||
|
} |
||||
|
|
||||
|
.record-row-sub { |
||||
|
margin-top: 12rpx; |
||||
|
color: rgba(18, 59, 49, 0.58); |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.record-phone { |
||||
|
font-size: 29rpx; |
||||
|
font-weight: 800; |
||||
|
} |
||||
|
|
||||
|
.record-status { |
||||
|
padding: 6rpx 16rpx; |
||||
|
border-radius: 999rpx; |
||||
|
background: #edf3f1; |
||||
|
color: #50615c; |
||||
|
font-size: 22rpx; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
|
||||
|
.record-status-0 { |
||||
|
background: #eaf3ff; |
||||
|
color: #2f74c0; |
||||
|
} |
||||
|
|
||||
|
.record-status-1 { |
||||
|
background: #e9fbf2; |
||||
|
color: #1b9a66; |
||||
|
} |
||||
|
|
||||
|
.record-status-2 { |
||||
|
background: #fff0f0; |
||||
|
color: #d94f4f; |
||||
|
} |
||||
|
|
||||
|
.record-reason { |
||||
|
margin-top: 12rpx; |
||||
|
color: #d94f4f; |
||||
|
font-size: 23rpx; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
|
||||
|
.confirm-transfer-btn { |
||||
|
display: inline-flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 56rpx; |
||||
|
margin-top: 16rpx; |
||||
|
padding: 0 24rpx; |
||||
|
border-radius: 999rpx; |
||||
|
background: linear-gradient(90deg, #dcff8d, #8fffe7); |
||||
|
color: #0b5b47; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 900; |
||||
|
box-shadow: 0 12rpx 28rpx rgba(44, 175, 121, 0.18); |
||||
|
} |
||||
|
|
||||
|
.record-more { |
||||
|
padding-top: 24rpx; |
||||
|
border-top: 1rpx solid rgba(18, 59, 49, 0.08); |
||||
|
color: rgba(18, 59, 49, 0.58); |
||||
|
font-size: 25rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue