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