1494 行
36 KiB
Vue
1494 行
36 KiB
Vue
<template>
|
||
<view class="dist fc-page">
|
||
<!-- 顶部导航：沿用全局规范，自适应状态栏与胶囊 -->
|
||
<fc-navbar title="分销中心" theme="gradient" :show-back="true" />
|
||
|
||
<!-- 佣金 Hero -->
|
||
<view class="dist__hero">
|
||
<view class="dist__hero-copy">
|
||
<text class="dist__hero-title">分享好内容，赚取佣金</text>
|
||
<text class="dist__hero-sub">好友消费，佣金自动到账</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 佣金钱包（悬浮卡片） -->
|
||
<view class="dist__wallet">
|
||
<view class="dist__wallet-head">
|
||
<view class="dist__wallet-label-wrap">
|
||
<image class="dist__wallet-icon" :src="iconUrl('wallet')" mode="aspectFit" />
|
||
<text class="dist__wallet-label">可提现佣金</text>
|
||
</view>
|
||
<view class="dist__withdraw-btn" @click="openWithdraw">
|
||
<text>提现</text>
|
||
</view>
|
||
</view>
|
||
<view class="dist__wallet-amount">
|
||
<text class="dist__wallet-symbol">¥</text>
|
||
<text class="dist__wallet-num">{{ money(overview.withdrawable) }}</text>
|
||
</view>
|
||
<view class="dist__wallet-stats">
|
||
<view class="dist__wallet-stat">
|
||
<text class="dist__wallet-stat-num">{{ money(overview.totalCommission) }}</text>
|
||
<text class="dist__wallet-stat-label">累计佣金</text>
|
||
</view>
|
||
<view class="dist__wallet-stat">
|
||
<text class="dist__wallet-stat-num">{{ money(overview.settled) }}</text>
|
||
<text class="dist__wallet-stat-label">已结算</text>
|
||
</view>
|
||
<view class="dist__wallet-stat">
|
||
<text class="dist__wallet-stat-num">{{ money(overview.todayCommission) }}</text>
|
||
<text class="dist__wallet-stat-label">今日佣金</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 数据加载失败提示 -->
|
||
<view v-if="loadError" class="dist__notice" @click="init">
|
||
<image class="dist__notice-icon" :src="iconUrl('info')" mode="aspectFit" />
|
||
<text class="dist__notice-text">数据加载失败，点击重试</text>
|
||
</view>
|
||
|
||
<!-- 邀请好友 -->
|
||
<view class="dist__card">
|
||
<view class="dist__card-head">
|
||
<view class="dist__card-title">
|
||
<view class="dist__card-icon-wrap">
|
||
<image class="dist__card-icon" :src="iconUrl('link-dist')" mode="aspectFit" />
|
||
</view>
|
||
<text>邀请好友</text>
|
||
</view>
|
||
<text class="dist__card-extra">已邀请 {{ overview.teamCount || 0 }} 人</text>
|
||
</view>
|
||
|
||
<view class="dist__invite-box">
|
||
<view class="dist__invite-code">
|
||
<text class="dist__invite-label">我的邀请码</text>
|
||
<text class="dist__invite-value">{{ overview.inviteCode || '—' }}</text>
|
||
</view>
|
||
<view class="dist__invite-copy" @click="copyCode">
|
||
<text>复制</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="dist__invite-actions">
|
||
<view class="dist__btn dist__btn--primary" @click="shareInvite">
|
||
<view class="dist__btn-icon-circle">
|
||
<image class="dist__btn-icon" :src="iconUrl('share')" mode="aspectFit" />
|
||
</view>
|
||
<text>分享给好友</text>
|
||
</view>
|
||
<view class="dist__btn dist__btn--ghost" @click="copyLink">
|
||
<image class="dist__btn-icon dist__btn-icon--plain" :src="iconUrl('network')" mode="aspectFit" />
|
||
<text>复制链接</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 我的团队 -->
|
||
<view class="dist__card">
|
||
<view class="dist__card-head">
|
||
<view class="dist__card-title">
|
||
<view class="dist__card-icon-wrap">
|
||
<image class="dist__card-icon" :src="iconUrl('users')" mode="aspectFit" />
|
||
</view>
|
||
<text>我的团队</text>
|
||
</view>
|
||
<text class="dist__card-extra">共 {{ overview.teamCount || 0 }} 人</text>
|
||
</view>
|
||
|
||
<view class="dist__seg">
|
||
<view
|
||
v-for="t in levelTabs"
|
||
:key="t.value"
|
||
class="dist__seg-item"
|
||
:class="{ 'dist__seg-item--active': level === t.value }"
|
||
@click="changeLevel(t.value)"
|
||
>
|
||
<text>{{ t.label }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="dist__team-summary">
|
||
<text>一级 {{ overview.l1Count || 0 }} 人</text>
|
||
<text class="dist__team-dot">·</text>
|
||
<text>二级 {{ overview.l2Count || 0 }} 人</text>
|
||
</view>
|
||
|
||
<!-- 切换筛选时的骨架屏 -->
|
||
<view v-if="teamLoading" class="dist__skeleton">
|
||
<view v-for="i in 3" :key="i" class="dist__skeleton-row">
|
||
<view class="dist__skeleton-avatar fc-skeleton"></view>
|
||
<view class="dist__skeleton-lines">
|
||
<view class="dist__skeleton-line fc-skeleton"></view>
|
||
<view class="dist__skeleton-line dist__skeleton-line--short fc-skeleton"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else-if="!team.length" class="dist__empty">
|
||
<view class="dist__empty-icon-wrap">
|
||
<image class="dist__empty-icon" :src="iconUrl('users')" mode="aspectFit" />
|
||
</view>
|
||
<text class="dist__empty-text">还没有团队成员</text>
|
||
<view class="dist__empty-btn" @click="shareInvite">
|
||
<text>邀请好友</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else class="dist__team-list">
|
||
<view v-for="t in visibleTeam" :key="t.id + '-' + t.level" class="dist__member">
|
||
<view class="dist__member-avatar">
|
||
<text>{{ firstChar(t.nickname) }}</text>
|
||
</view>
|
||
<view class="dist__member-main">
|
||
<view class="dist__member-top">
|
||
<text class="dist__member-name">{{ t.nickname || '匿名用户' }}</text>
|
||
<text class="dist__badge" :class="t.level === 1 ? 'dist__badge--l1' : 'dist__badge--l2'">
|
||
{{ t.level === 1 ? '一级' : '二级' }}
|
||
</text>
|
||
</view>
|
||
<text class="dist__member-meta">{{ joinText(t) }} · 业绩 ¥{{ money(t.performance) }}</text>
|
||
</view>
|
||
<view class="dist__member-income">
|
||
<text class="dist__member-income-num">+¥{{ money(t.commission) }}</text>
|
||
<text class="dist__member-income-label">贡献佣金</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="team.length > 5" class="dist__more" @click="teamExpanded = !teamExpanded">
|
||
<text>{{ teamExpanded ? '收起' : '展开全部 ' + team.length + ' 人' }}</text>
|
||
<view class="dist__chevron" :class="{ 'dist__chevron--up': teamExpanded }"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提现记录 -->
|
||
<view class="dist__card">
|
||
<view class="dist__card-head">
|
||
<view class="dist__card-title">
|
||
<view class="dist__card-icon-wrap">
|
||
<image class="dist__card-icon" :src="iconUrl('receipt')" mode="aspectFit" />
|
||
</view>
|
||
<text>提现记录</text>
|
||
</view>
|
||
<text v-if="records.length" class="dist__card-extra">共 {{ records.length }} 笔</text>
|
||
</view>
|
||
|
||
<view v-if="loading" class="dist__skeleton">
|
||
<view v-for="i in 3" :key="'record-' + i" class="dist__skeleton-record">
|
||
<view class="dist__skeleton-lines">
|
||
<view class="dist__skeleton-line fc-skeleton"></view>
|
||
<view class="dist__skeleton-line dist__skeleton-line--short fc-skeleton"></view>
|
||
</view>
|
||
<view class="dist__skeleton-amount fc-skeleton"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else-if="!records.length" class="dist__empty">
|
||
<view class="dist__empty-icon-wrap">
|
||
<image class="dist__empty-icon" :src="iconUrl('receipt')" mode="aspectFit" />
|
||
</view>
|
||
<text class="dist__empty-text">暂无提现记录</text>
|
||
</view>
|
||
|
||
<view v-else class="dist__record-list">
|
||
<view v-for="w in visibleRecords" :key="w.id" class="dist__record">
|
||
<view class="dist__record-main">
|
||
<view class="dist__record-top">
|
||
<text class="dist__record-title">提现到微信零钱</text>
|
||
<text class="dist__record-status" :class="'dist__record-status--' + w.status">
|
||
{{ statusText(w.status) }}
|
||
</text>
|
||
</view>
|
||
<text class="dist__record-time">{{ timeText(w.createdAt) }}</text>
|
||
<text class="dist__record-no fc-ellipsis">单号 {{ w.withdrawNo }}</text>
|
||
<text v-if="w.status === 'failed' && w.failReason" class="dist__record-no fc-ellipsis">失败原因：{{ w.failReason }}</text>
|
||
</view>
|
||
<view class="dist__record-right">
|
||
<text class="dist__record-amount">-¥{{ money(w.amount) }}</text>
|
||
<view v-if="w.status === 'paying'" class="dist__record-action" @click="confirmTransfer(w)">
|
||
<text>{{ w.transferStatus === 'WAIT_USER_CONFIRM' ? '去确认收款' : '转账中' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="records.length > 5" class="dist__more" @click="recordsExpanded = !recordsExpanded">
|
||
<text>{{ recordsExpanded ? '收起' : '查看全部记录' }}</text>
|
||
<view class="dist__chevron" :class="{ 'dist__chevron--up': recordsExpanded }"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="dist__bottom-space"></view>
|
||
|
||
<!-- 提现弹层 -->
|
||
<view v-if="showWithdraw" class="dist__mask" @click="closeWithdraw" @touchmove.stop.prevent>
|
||
<view class="dist__sheet" @click.stop>
|
||
<view class="dist__sheet-handle"></view>
|
||
<view class="dist__sheet-head">
|
||
<text class="dist__sheet-title">申请提现</text>
|
||
<view class="dist__sheet-close" @click="closeWithdraw">
|
||
<image class="dist__sheet-close-img" :src="iconUrl('close')" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="dist__sheet-balance">
|
||
<text class="dist__sheet-balance-label">可提现余额（元）</text>
|
||
<text class="dist__sheet-balance-num">{{ money(overview.withdrawable) }}</text>
|
||
</view>
|
||
|
||
<view v-if="!realname" class="dist__sheet-field">
|
||
<input
|
||
v-model="realnameInput"
|
||
class="dist__sheet-input dist__sheet-input--name"
|
||
type="text"
|
||
maxlength="20"
|
||
placeholder="收款人真实姓名（需与微信实名一致）"
|
||
placeholder-class="dist__sheet-placeholder"
|
||
/>
|
||
</view>
|
||
|
||
<view class="dist__sheet-field">
|
||
<text class="dist__sheet-symbol">¥</text>
|
||
<input
|
||
v-model="withdrawAmount"
|
||
class="dist__sheet-input"
|
||
type="digit"
|
||
maxlength="10"
|
||
placeholder="0.00"
|
||
placeholder-class="dist__sheet-placeholder"
|
||
/>
|
||
<text class="dist__sheet-all" @click="fillAll">全部</text>
|
||
</view>
|
||
|
||
<view v-if="quickAmounts.length" class="dist__sheet-chips">
|
||
<view
|
||
v-for="c in quickAmounts"
|
||
:key="c.value"
|
||
class="dist__chip"
|
||
:class="{ 'dist__chip--active': Number(withdrawAmount) === c.value }"
|
||
@click="withdrawAmount = String(c.value)"
|
||
>
|
||
<text>{{ c.label }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="dist__sheet-tip-row">
|
||
<image class="dist__sheet-tip-icon" :src="iconUrl('info')" mode="aspectFit" />
|
||
<text class="dist__sheet-tip">最低提现 ¥{{ minWithdrawText }}，预计 T+7 到账微信零钱</text>
|
||
</view>
|
||
|
||
<view
|
||
class="dist__sheet-btn"
|
||
:class="{ 'dist__sheet-btn--disabled': !canSubmit }"
|
||
@click="submitWithdraw"
|
||
>
|
||
<text>{{ submitting ? '提交中…' : '确认提现' }}</text>
|
||
</view>
|
||
<view class="dist__sheet-safe"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import distributionApi from '@/common/api/distribution.js'
|
||
import authApi from '@/common/api/auth.js'
|
||
import { WITHDRAW_TEXT } from '@/common/constants/ui.js'
|
||
import { fromNow } from '@/common/utils/format.js'
|
||
import { iconUrl, loadUiConfig, uiState, requestSubscribe } from '@/common/store/ui.js'
|
||
import FcNavbar from '@/components/fc-navbar/fc-navbar.vue'
|
||
|
||
export default {
|
||
components: { FcNavbar },
|
||
data() {
|
||
return {
|
||
overview: {},
|
||
team: [],
|
||
records: [],
|
||
level: 0,
|
||
// 最低提现金额由后台「分销设置」经 /distribution/overview 下发（加载前用 50 兜底）
|
||
minWithdraw: 50,
|
||
showWithdraw: false,
|
||
withdrawAmount: '',
|
||
// 收款人实名（提现转账用；为空时弹层内采集）
|
||
realname: '',
|
||
realnameInput: '',
|
||
submitting: false,
|
||
loading: true,
|
||
loadError: false,
|
||
teamLoading: true,
|
||
teamExpanded: false,
|
||
recordsExpanded: false,
|
||
teamSeq: 0,
|
||
hasShown: false,
|
||
levelTabs: [
|
||
{ label: '全部', value: 0 },
|
||
{ label: '一级', value: 1 },
|
||
{ label: '二级', value: 2 },
|
||
],
|
||
}
|
||
},
|
||
computed: {
|
||
/** 可提现金额（数值型） */
|
||
withdrawableNum() {
|
||
const n = Number(this.overview && this.overview.withdrawable)
|
||
return isNaN(n) ? 0 : Math.max(n, 0)
|
||
},
|
||
/** 最低提现金额展示文案（整数不带小数） */
|
||
minWithdrawText() {
|
||
const n = Number(this.minWithdraw)
|
||
if (isNaN(n) || n <= 0) return '0'
|
||
return n % 1 === 0 ? String(n) : n.toFixed(2)
|
||
},
|
||
/** 团队列表默认展示 5 条，可展开 */
|
||
visibleTeam() {
|
||
const list = this.team || []
|
||
return this.teamExpanded ? list : list.slice(0, 5)
|
||
},
|
||
/** 提现记录默认展示 5 条，可展开 */
|
||
visibleRecords() {
|
||
const list = this.records || []
|
||
return this.recordsExpanded ? list : list.slice(0, 5)
|
||
},
|
||
/** 快捷提现金额（不高于可提现余额） */
|
||
quickAmounts() {
|
||
const max = this.withdrawableNum
|
||
const min = Number(this.minWithdraw || 0)
|
||
if (max <= 0) return []
|
||
return [50, 100, 200, 500, 1000]
|
||
.filter((v) => v <= max && v >= min)
|
||
.slice(0, 3)
|
||
.map((v) => ({ value: v, label: '¥' + v }))
|
||
},
|
||
/** 提现金额是否可提交 */
|
||
canSubmit() {
|
||
if (this.submitting) return false
|
||
const amount = Number(this.withdrawAmount)
|
||
const min = Number(this.minWithdraw || 0)
|
||
return amount > 0 && amount >= min && amount <= this.withdrawableNum + 0.001
|
||
},
|
||
/** 邀请链接：H5 使用完整地址，小程序使用页面路径 */
|
||
inviteLink() {
|
||
const code = this.overview.inviteCode || ''
|
||
if (!code) return ''
|
||
// #ifdef H5
|
||
if (typeof location !== 'undefined' && location.origin) {
|
||
return location.origin + '/#/pages/index/index?ic=' + encodeURIComponent(code)
|
||
}
|
||
// #endif
|
||
return '/pages/index/index?ic=' + encodeURIComponent(code)
|
||
},
|
||
},
|
||
onLoad() {
|
||
loadUiConfig()
|
||
this.init()
|
||
},
|
||
/**
|
||
* 从其它页面返回时刷新，首次进入由 onLoad 负责，避免重复请求
|
||
*/
|
||
onShow() {
|
||
if (this.hasShown) this.init()
|
||
this.hasShown = true
|
||
},
|
||
/**
|
||
* 小程序右上角分享
|
||
*/
|
||
onShareAppMessage() {
|
||
const code = this.overview.inviteCode || ''
|
||
return {
|
||
title: uiState.shareTitle || uiState.siteName || '同城分类信息',
|
||
path: '/pages/index/index?ic=' + encodeURIComponent(code),
|
||
}
|
||
},
|
||
/**
|
||
* 小程序分享到朋友圈
|
||
*/
|
||
onShareTimeline() {
|
||
const code = this.overview.inviteCode || ''
|
||
return {
|
||
title: uiState.shareTitle || uiState.siteName || '同城分类信息',
|
||
query: 'ic=' + encodeURIComponent(code),
|
||
}
|
||
},
|
||
methods: {
|
||
iconUrl,
|
||
|
||
/**
|
||
* 加载概览、团队与提现记录
|
||
*/
|
||
async init() {
|
||
this.teamLoading = true
|
||
this.loading = true
|
||
try {
|
||
const [overview, records] = await Promise.all([
|
||
distributionApi.overview(),
|
||
distributionApi.withdrawRecords(),
|
||
])
|
||
this.overview = overview || {}
|
||
this.records = Array.isArray(records) ? records : (records && records.list) || []
|
||
this.loadError = false
|
||
if (overview && overview.minWithdraw != null) {
|
||
this.minWithdraw = Number(overview.minWithdraw) || 0
|
||
}
|
||
if (overview && overview.realname != null) {
|
||
this.realname = String(overview.realname)
|
||
}
|
||
} catch (e) {
|
||
this.loadError = true
|
||
uni.showToast({ title: '分销数据加载失败', icon: 'none' })
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
await this.fetchTeam(true)
|
||
},
|
||
|
||
/**
|
||
* 拉取团队列表（保持当前筛选层级）
|
||
* @param {boolean} silent 失败时是否静默
|
||
*/
|
||
async fetchTeam(silent = true) {
|
||
const seq = ++this.teamSeq
|
||
this.teamLoading = true
|
||
try {
|
||
const res = await distributionApi.team({
|
||
level: this.level || undefined,
|
||
page: 1,
|
||
size: 50,
|
||
})
|
||
if (seq !== this.teamSeq) return
|
||
this.team = (res && res.list) || []
|
||
} catch (e) {
|
||
if (seq !== this.teamSeq) return
|
||
// 静默刷新失败时保留旧列表，避免返回页面时列表被清空
|
||
if (!silent) {
|
||
this.team = []
|
||
uni.showToast({ title: '团队数据加载失败', icon: 'none' })
|
||
}
|
||
} finally {
|
||
if (seq === this.teamSeq) this.teamLoading = false
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 切换团队层级
|
||
* @param {number} v 0 全部 / 1 一级 / 2 二级
|
||
*/
|
||
changeLevel(v) {
|
||
if (this.level === v) return
|
||
this.level = v
|
||
this.teamExpanded = false
|
||
this.fetchTeam(false)
|
||
},
|
||
|
||
/**
|
||
* 提现状态文案
|
||
* @param {string} s 状态枚举
|
||
* @returns {string}
|
||
*/
|
||
statusText(s) {
|
||
return WITHDRAW_TEXT[s] || s
|
||
},
|
||
|
||
/**
|
||
* 相对时间文案
|
||
* @param {string} t 时间
|
||
* @returns {string}
|
||
*/
|
||
timeText(t) {
|
||
return fromNow(t) || '—'
|
||
},
|
||
|
||
/**
|
||
* 成员加入时间文案
|
||
* @param {Object} t 成员
|
||
* @returns {string}
|
||
*/
|
||
joinText(t) {
|
||
const s = fromNow(t && t.joinedAt)
|
||
return s ? s + '加入' : '最近加入'
|
||
},
|
||
|
||
/**
|
||
* 金额格式化（保留两位小数）
|
||
* @param {number|string} v 金额
|
||
* @returns {string}
|
||
*/
|
||
money(v) {
|
||
const n = Number(v)
|
||
if (!isFinite(n)) return '0.00'
|
||
return n.toFixed(2)
|
||
},
|
||
|
||
/**
|
||
* 昵称首字（头像占位）
|
||
* @param {string} name 昵称
|
||
* @returns {string}
|
||
*/
|
||
firstChar(name) {
|
||
const s = String(name || '').trim()
|
||
return s ? s.charAt(0) : '友'
|
||
},
|
||
|
||
/**
|
||
* 复制文本
|
||
* @param {string} text 内容
|
||
* @param {string} tip 提示文案
|
||
*/
|
||
copyText(text, tip) {
|
||
const data = String(text || '')
|
||
if (!data) {
|
||
uni.showToast({ title: '内容生成中，请稍后重试', icon: 'none' })
|
||
return
|
||
}
|
||
uni.setClipboardData({
|
||
data,
|
||
success: () => {
|
||
uni.showToast({ title: tip || '已复制', icon: 'none' })
|
||
},
|
||
fail: () => {
|
||
uni.showToast({ title: '复制失败，请长按复制', icon: 'none' })
|
||
},
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 复制邀请码
|
||
*/
|
||
copyCode() {
|
||
if (!this.overview.inviteCode) {
|
||
uni.showToast({ title: '邀请码加载中，请稍后重试', icon: 'none' })
|
||
return
|
||
}
|
||
this.copyText(this.overview.inviteCode, '邀请码已复制')
|
||
},
|
||
|
||
/**
|
||
* 复制邀请链接
|
||
*/
|
||
copyLink() {
|
||
if (!this.inviteLink) {
|
||
uni.showToast({ title: '邀请链接生成中，请稍后重试', icon: 'none' })
|
||
return
|
||
}
|
||
this.copyText(this.inviteLink, '邀请链接已复制')
|
||
},
|
||
|
||
/**
|
||
* 分享邀请：H5 走系统分享，小程序提示右上角分享，其余复制链接
|
||
*/
|
||
shareInvite() {
|
||
if (!this.overview.inviteCode) {
|
||
uni.showToast({ title: '邀请码加载中，请稍后重试', icon: 'none' })
|
||
return
|
||
}
|
||
// #ifdef H5
|
||
if (typeof navigator !== 'undefined' && navigator.share) {
|
||
try {
|
||
navigator
|
||
.share({
|
||
title: uiState.shareTitle || uiState.siteName || '同城分类信息 · 本地生活便民服务',
|
||
text: `邀请你加入${uiState.siteName || '同城分类信息'}，发布、找工作、找房子都方便`,
|
||
url: this.inviteLink,
|
||
})
|
||
.catch((err) => {
|
||
if (!err || err.name !== 'AbortError') this.copyLink()
|
||
})
|
||
} catch (e) {
|
||
this.copyLink()
|
||
}
|
||
return
|
||
}
|
||
this.copyLink()
|
||
return
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
uni.showShareMenu({
|
||
withShareTicket: true,
|
||
menus: ['shareAppMessage', 'shareTimeline'],
|
||
})
|
||
uni.showToast({ title: '点击右上角分享给好友', icon: 'none' })
|
||
return
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
this.copyLink()
|
||
// #endif
|
||
},
|
||
|
||
/**
|
||
* 打开提现弹层
|
||
*/
|
||
openWithdraw() {
|
||
if (this.withdrawableNum <= 0) {
|
||
uni.showToast({ title: '暂无可提现佣金，快去邀请好友吧', icon: 'none' })
|
||
return
|
||
}
|
||
this.withdrawAmount = ''
|
||
this.showWithdraw = true
|
||
},
|
||
|
||
/**
|
||
* 拉起微信「确认收款」页（商家转账 · 用户确认模式）
|
||
*/
|
||
confirmTransfer(w) {
|
||
if (!w || !w.packageInfo) {
|
||
uni.showToast({ title: '转账处理中，请在微信消息中确认收款', icon: 'none' })
|
||
return
|
||
}
|
||
if (typeof uni === 'undefined' || !uni.requestMerchantTransfer) {
|
||
uni.showToast({ title: '请在微信消息中确认收款', icon: 'none' })
|
||
return
|
||
}
|
||
uni.requestMerchantTransfer({
|
||
mchId: (this.overview && this.overview.transferMchId) || '',
|
||
appId: (this.overview && this.overview.transferAppId) || '',
|
||
package: w.packageInfo,
|
||
success: () => {
|
||
uni.showToast({ title: '已确认，等待到账', icon: 'none' })
|
||
setTimeout(() => this.refreshAfterWithdraw(), 1500)
|
||
},
|
||
fail: () => uni.showToast({ title: '已取消确认', icon: 'none' }),
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 关闭提现弹层
|
||
*/
|
||
closeWithdraw() {
|
||
if (this.submitting) return
|
||
this.showWithdraw = false
|
||
this.withdrawAmount = ''
|
||
},
|
||
|
||
/**
|
||
* 填入全部可提现金额
|
||
*/
|
||
fillAll() {
|
||
this.withdrawAmount = this.withdrawableNum.toFixed(2)
|
||
},
|
||
|
||
/**
|
||
* 提交提现申请
|
||
*/
|
||
async submitWithdraw() {
|
||
if (this.submitting) return
|
||
if (!this.canSubmit) { const amount = Number(this.withdrawAmount)
|
||
if (!amount || amount <= 0) {
|
||
uni.showToast({ title: '请输入提现金额', icon: 'none' })
|
||
} else if (amount < Number(this.minWithdraw || 0)) {
|
||
uni.showToast({ title: '最低提现 ¥' + this.minWithdrawText, icon: 'none' })
|
||
} else {
|
||
uni.showToast({ title: '提现金额超过可提现余额', icon: 'none' })
|
||
}
|
||
return
|
||
}
|
||
|
||
// 订阅消息授权（提现到账）；未配置模板时静默跳过
|
||
await requestSubscribe('transfer')
|
||
|
||
this.submitting = true
|
||
try {
|
||
// 未填写收款人实名：先采集并保存（微信商家转账会校验实名）
|
||
if (!this.realname) {
|
||
const name = String(this.realnameInput || '').trim()
|
||
if (!/^[\u4e00-\u9fa5·]{2,20}$/.test(name)) {
|
||
uni.showToast({ title: '请填写 2-20 位中文真实姓名', icon: 'none' })
|
||
return
|
||
}
|
||
try {
|
||
await authApi.saveRealname({ realname: name })
|
||
this.realname = name
|
||
} catch (e) {
|
||
uni.showToast({ title: e.message || '姓名保存失败', icon: 'none' })
|
||
return
|
||
}
|
||
}
|
||
|
||
const amount = Math.round(Number(this.withdrawAmount) * 100) / 100
|
||
await distributionApi.withdraw({ amount, channel: 'wxpay' })
|
||
this.showWithdraw = false
|
||
this.withdrawAmount = ''
|
||
uni.showToast({ title: '提现申请已提交', icon: 'none' })
|
||
await this.refreshAfterWithdraw()
|
||
} catch (e) {
|
||
uni.showToast({ title: e.message || '提现失败，请稍后重试', icon: 'none' })
|
||
} finally {
|
||
this.submitting = false
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 提现成功后刷新余额与记录
|
||
*/
|
||
async refreshAfterWithdraw() {
|
||
try {
|
||
const [overview, records] = await Promise.all([
|
||
distributionApi.overview(),
|
||
distributionApi.withdrawRecords(),
|
||
])
|
||
if (overview) this.overview = overview
|
||
this.records = Array.isArray(records) ? records : (records && records.list) || []
|
||
} catch (e) {}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* ==================== Hero ==================== */
|
||
.dist__hero {
|
||
background: $fc-gradient-hero;
|
||
padding: 12rpx 0 150rpx;
|
||
border-radius: 0 0 40rpx 40rpx;
|
||
}
|
||
.dist__hero-copy {
|
||
padding: 16rpx 40rpx 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.dist__hero-title {
|
||
color: $fc-text;
|
||
font-size: 38rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 0.5rpx;
|
||
}
|
||
.dist__hero-sub {
|
||
margin-top: 10rpx;
|
||
color: $fc-text-secondary;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
/* ==================== 佣金钱包 ==================== */
|
||
.dist__wallet {
|
||
position: relative;
|
||
z-index: 2;
|
||
margin: -116rpx 28rpx 0;
|
||
padding: 28rpx 30rpx 24rpx;
|
||
border-radius: 28rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 16rpx 40rpx rgba(4, 48, 30, 0.14);
|
||
}
|
||
.dist__wallet-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.dist__wallet-label-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 0;
|
||
}
|
||
.dist__wallet-icon {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.dist__wallet-label {
|
||
margin-left: 10rpx;
|
||
font-size: 24rpx;
|
||
color: $fc-text-secondary;
|
||
}
|
||
.dist__withdraw-btn {
|
||
flex-shrink: 0;
|
||
padding: 10rpx 30rpx;
|
||
border-radius: $fc-radius-pill;
|
||
background: $fc-gradient-primary;
|
||
color: $fc-primary-ink;
|
||
font-size: 24rpx;
|
||
font-weight: 700;
|
||
box-shadow: 0 6rpx 16rpx rgba(0, 184, 92, 0.24);
|
||
transition: transform 0.15s ease;
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
}
|
||
.dist__wallet-amount {
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-top: 16rpx;
|
||
}
|
||
.dist__wallet-symbol {
|
||
margin-right: 6rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: $fc-price;
|
||
}
|
||
.dist__wallet-num {
|
||
font-size: 72rpx;
|
||
font-weight: 800;
|
||
line-height: 1.1;
|
||
letter-spacing: -1rpx;
|
||
color: $fc-price;
|
||
}
|
||
.dist__wallet-stats {
|
||
display: flex;
|
||
margin-top: 26rpx;
|
||
padding-top: 22rpx;
|
||
border-top: 1rpx solid $fc-border-light;
|
||
}
|
||
.dist__wallet-stat {
|
||
position: relative;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
& + &::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 8rpx;
|
||
bottom: 8rpx;
|
||
width: 1rpx;
|
||
background: $fc-border-light;
|
||
}
|
||
}
|
||
.dist__wallet-stat-num {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: $fc-text;
|
||
}
|
||
.dist__wallet-stat-label {
|
||
margin-top: 8rpx;
|
||
font-size: 22rpx;
|
||
color: $fc-text-secondary;
|
||
}
|
||
|
||
/* ==================== 加载失败提示 ==================== */
|
||
.dist__notice {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 24rpx 28rpx 0;
|
||
padding: 20rpx 24rpx;
|
||
border-radius: 18rpx;
|
||
background: $fc-accent-lighter;
|
||
}
|
||
.dist__notice-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.dist__notice-text {
|
||
margin-left: 12rpx;
|
||
font-size: 24rpx;
|
||
color: $fc-accent-dark;
|
||
}
|
||
|
||
/* ==================== 卡片通用 ==================== */
|
||
.dist__card {
|
||
margin: 24rpx 28rpx 0;
|
||
padding: 28rpx;
|
||
border-radius: 24rpx;
|
||
background: #ffffff;
|
||
box-shadow: $fc-shadow-sm;
|
||
}
|
||
.dist__card-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.dist__card-title {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: $fc-text;
|
||
}
|
||
.dist__card-icon-wrap {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
margin-right: 14rpx;
|
||
border-radius: 16rpx;
|
||
background: $fc-primary-lighter;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.dist__card-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
.dist__card-extra {
|
||
flex-shrink: 0;
|
||
font-size: 22rpx;
|
||
color: $fc-text-secondary;
|
||
}
|
||
|
||
/* ==================== 邀请好友 ==================== */
|
||
.dist__invite-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 24rpx;
|
||
padding: 24rpx 26rpx;
|
||
border-radius: 20rpx;
|
||
border: 1rpx solid $fc-border;
|
||
background: $fc-primary-lighter;
|
||
}
|
||
.dist__invite-code {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.dist__invite-label {
|
||
font-size: 22rpx;
|
||
color: $fc-text-secondary;
|
||
}
|
||
.dist__invite-value {
|
||
margin-top: 6rpx;
|
||
font-size: 38rpx;
|
||
font-weight: 700;
|
||
letter-spacing: 4rpx;
|
||
color: $fc-primary-text;
|
||
}
|
||
.dist__invite-copy {
|
||
flex-shrink: 0;
|
||
margin-left: 20rpx;
|
||
padding: 10rpx 28rpx;
|
||
border-radius: $fc-radius-pill;
|
||
background: #ffffff;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
color: $fc-primary-text;
|
||
box-shadow: $fc-shadow-sm;
|
||
transition: transform 0.15s ease;
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
}
|
||
.dist__invite-actions {
|
||
display: flex;
|
||
margin-top: 24rpx;
|
||
}
|
||
.dist__btn {
|
||
flex: 1;
|
||
height: 84rpx;
|
||
border-radius: $fc-radius-pill;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
transition: transform 0.15s ease;
|
||
&:active {
|
||
transform: scale(0.98);
|
||
}
|
||
& + & {
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
.dist__btn--primary {
|
||
background: $fc-gradient-primary;
|
||
color: $fc-primary-ink;
|
||
box-shadow: 0 8rpx 20rpx rgba(0, 184, 92, 0.22);
|
||
}
|
||
.dist__btn--ghost {
|
||
border: 2rpx solid $fc-border;
|
||
background: #ffffff;
|
||
color: $fc-primary-text;
|
||
}
|
||
.dist__btn-icon-circle {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
margin-right: 10rpx;
|
||
border-radius: 50%;
|
||
background: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.dist__btn-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
.dist__btn-icon--plain {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
/* ==================== 团队 ==================== */
|
||
.dist__seg {
|
||
display: flex;
|
||
margin-top: 24rpx;
|
||
padding: 6rpx;
|
||
border-radius: $fc-radius-pill;
|
||
background: $fc-bg;
|
||
}
|
||
.dist__seg-item {
|
||
flex: 1;
|
||
height: 60rpx;
|
||
border-radius: $fc-radius-pill;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
color: $fc-text-secondary;
|
||
transition: all 0.2s ease;
|
||
&--active {
|
||
background: #ffffff;
|
||
color: $fc-primary-text;
|
||
font-weight: 700;
|
||
box-shadow: $fc-shadow-sm;
|
||
}
|
||
}
|
||
.dist__team-summary {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 18rpx;
|
||
font-size: 22rpx;
|
||
color: $fc-text-secondary;
|
||
}
|
||
.dist__team-dot {
|
||
margin: 0 12rpx;
|
||
color: $fc-text-placeholder;
|
||
}
|
||
.dist__team-list {
|
||
margin-top: 6rpx;
|
||
}
|
||
.dist__member {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx 0;
|
||
& + & {
|
||
border-top: 1rpx solid $fc-border-light;
|
||
}
|
||
}
|
||
.dist__member-avatar {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
border-radius: 50%;
|
||
background: $fc-primary-lighter;
|
||
color: $fc-primary-text;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.dist__member-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
margin-left: 18rpx;
|
||
}
|
||
.dist__member-top {
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 0;
|
||
}
|
||
.dist__member-name {
|
||
max-width: 300rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: $fc-text;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.dist__badge {
|
||
flex-shrink: 0;
|
||
margin-left: 12rpx;
|
||
padding: 2rpx 12rpx;
|
||
border-radius: $fc-radius-pill;
|
||
font-size: 20rpx;
|
||
&--l1 {
|
||
background: $fc-primary-lighter;
|
||
color: $fc-primary-text;
|
||
}
|
||
&--l2 {
|
||
background: $fc-bg;
|
||
color: $fc-text-secondary;
|
||
}
|
||
}
|
||
.dist__member-meta {
|
||
display: block;
|
||
margin-top: 8rpx;
|
||
font-size: 22rpx;
|
||
color: $fc-text-placeholder;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.dist__member-income {
|
||
flex-shrink: 0;
|
||
margin-left: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
}
|
||
.dist__member-income-num {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: $fc-price;
|
||
}
|
||
.dist__member-income-label {
|
||
margin-top: 6rpx;
|
||
font-size: 20rpx;
|
||
color: $fc-text-placeholder;
|
||
}
|
||
|
||
/* ==================== 提现记录 ==================== */
|
||
.dist__record-list {
|
||
margin-top: 6rpx;
|
||
}
|
||
.dist__record {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx 0;
|
||
& + & {
|
||
border-top: 1rpx solid $fc-border-light;
|
||
}
|
||
}
|
||
.dist__record-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.dist__record-top {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.dist__record-title {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: $fc-text;
|
||
}
|
||
.dist__record-status {
|
||
flex-shrink: 0;
|
||
margin-left: 12rpx;
|
||
padding: 2rpx 12rpx;
|
||
border-radius: $fc-radius-pill;
|
||
font-size: 20rpx;
|
||
background: $fc-accent-lighter;
|
||
color: $fc-accent-dark;
|
||
&--paid {
|
||
background: $fc-primary-lighter;
|
||
color: $fc-primary-text;
|
||
}
|
||
&--rejected {
|
||
background: #ffecec;
|
||
color: #c62f34;
|
||
}
|
||
}
|
||
.dist__record-time {
|
||
display: block;
|
||
margin-top: 8rpx;
|
||
font-size: 22rpx;
|
||
color: $fc-text-placeholder;
|
||
}
|
||
.dist__record-no {
|
||
display: block;
|
||
margin-top: 4rpx;
|
||
max-width: 420rpx;
|
||
font-size: 20rpx;
|
||
color: $fc-text-placeholder;
|
||
}
|
||
.dist__record-amount {
|
||
flex-shrink: 0;
|
||
margin-left: 16rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: $fc-text;
|
||
}
|
||
.dist__record-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
flex-shrink: 0;
|
||
}
|
||
.dist__record-action {
|
||
margin-top: 10rpx;
|
||
padding: 6rpx 18rpx;
|
||
border-radius: 24rpx;
|
||
background: $fc-primary;
|
||
color: $fc-primary-ink;
|
||
font-size: 22rpx;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ==================== 空态 / 骨架 / 展开 ==================== */
|
||
.dist__empty {
|
||
padding: 44rpx 0 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.dist__empty-icon-wrap {
|
||
width: 104rpx;
|
||
height: 104rpx;
|
||
border-radius: 32rpx;
|
||
background: $fc-gradient-soft;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.dist__empty-icon {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
}
|
||
.dist__empty-text {
|
||
margin-top: 18rpx;
|
||
font-size: 24rpx;
|
||
color: $fc-text-secondary;
|
||
}
|
||
.dist__empty-btn {
|
||
margin-top: 22rpx;
|
||
padding: 12rpx 40rpx;
|
||
border-radius: $fc-radius-pill;
|
||
background: $fc-gradient-primary;
|
||
color: $fc-primary-ink;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
}
|
||
.dist__skeleton {
|
||
padding-top: 6rpx;
|
||
}
|
||
.dist__skeleton-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx 0;
|
||
}
|
||
.dist__skeleton-record {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx 0;
|
||
& + & {
|
||
border-top: 1rpx solid $fc-border-light;
|
||
}
|
||
}
|
||
.dist__skeleton-avatar {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
.dist__skeleton-amount {
|
||
width: 120rpx;
|
||
height: 30rpx;
|
||
margin-left: 20rpx;
|
||
border-radius: 8rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.dist__skeleton-lines {
|
||
flex: 1;
|
||
margin-left: 18rpx;
|
||
}
|
||
.dist__skeleton-line {
|
||
width: 58%;
|
||
height: 24rpx;
|
||
&--short {
|
||
width: 38%;
|
||
height: 20rpx;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
.dist__more {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 6rpx;
|
||
padding-top: 24rpx;
|
||
border-top: 1rpx solid $fc-border-light;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
color: $fc-primary-text;
|
||
}
|
||
.dist__chevron {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
margin-top: -4rpx;
|
||
margin-left: 10rpx;
|
||
border-right: 2rpx solid currentColor;
|
||
border-bottom: 2rpx solid currentColor;
|
||
transform: rotate(45deg);
|
||
transition: transform 0.2s ease;
|
||
&--up {
|
||
margin-top: 4rpx;
|
||
transform: rotate(-135deg);
|
||
}
|
||
}
|
||
|
||
/* ==================== 提现弹层 ==================== */
|
||
.dist__mask {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: 200;
|
||
background: rgba(4, 48, 30, 0.55);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
.dist__sheet {
|
||
width: 100%;
|
||
padding: 16rpx 32rpx 32rpx;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
background: #ffffff;
|
||
animation: dist-sheet-up 0.24s ease-out;
|
||
}
|
||
@keyframes dist-sheet-up {
|
||
from {
|
||
transform: translateY(40rpx);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.dist__sheet-handle {
|
||
width: 72rpx;
|
||
height: 8rpx;
|
||
margin: 0 auto 24rpx;
|
||
border-radius: $fc-radius-pill;
|
||
background: $fc-border;
|
||
}
|
||
.dist__sheet-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.dist__sheet-title {
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
color: $fc-text;
|
||
}
|
||
.dist__sheet-close {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.dist__sheet-close-img {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
.dist__sheet-balance {
|
||
margin-top: 24rpx;
|
||
padding: 24rpx 26rpx;
|
||
border-radius: 20rpx;
|
||
background: $fc-gradient-soft;
|
||
}
|
||
.dist__sheet-balance-label {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
color: $fc-text-secondary;
|
||
}
|
||
.dist__sheet-balance-num {
|
||
display: block;
|
||
margin-top: 6rpx;
|
||
font-size: 48rpx;
|
||
font-weight: 800;
|
||
color: $fc-primary-text;
|
||
}
|
||
.dist__sheet-field {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 110rpx;
|
||
margin-top: 24rpx;
|
||
padding: 0 24rpx;
|
||
border-radius: 20rpx;
|
||
border: 2rpx solid $fc-border;
|
||
background: #ffffff;
|
||
}
|
||
.dist__sheet-symbol {
|
||
margin-right: 10rpx;
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: $fc-text;
|
||
}
|
||
.dist__sheet-input {
|
||
flex: 1;
|
||
height: 100%;
|
||
font-size: 44rpx;
|
||
font-weight: 700;
|
||
color: $fc-text;
|
||
}
|
||
/* 收款人姓名输入（字号比金额小一号，避免喧宾夺主） */
|
||
.dist__sheet-input--name {
|
||
padding-left: 24rpx;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
}
|
||
.dist__sheet-placeholder {
|
||
color: $fc-text-placeholder;
|
||
font-weight: 400;
|
||
}
|
||
.dist__sheet-all {
|
||
flex-shrink: 0;
|
||
margin-left: 16rpx;
|
||
padding: 8rpx 14rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
color: $fc-primary-text;
|
||
}
|
||
.dist__sheet-chips {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 8rpx;
|
||
}
|
||
.dist__chip {
|
||
margin-top: 16rpx;
|
||
margin-right: 16rpx;
|
||
padding: 8rpx 26rpx;
|
||
border-radius: $fc-radius-pill;
|
||
border: 1rpx solid transparent;
|
||
background: $fc-bg;
|
||
font-size: 24rpx;
|
||
color: $fc-text-secondary;
|
||
&--active {
|
||
border-color: $fc-primary;
|
||
background: $fc-primary-lighter;
|
||
color: $fc-primary-text;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
.dist__sheet-tip-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-top: 24rpx;
|
||
}
|
||
.dist__sheet-tip-icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-top: 4rpx;
|
||
margin-right: 8rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.dist__sheet-tip {
|
||
flex: 1;
|
||
font-size: 22rpx;
|
||
line-height: 1.5;
|
||
color: $fc-text-secondary;
|
||
}
|
||
.dist__sheet-btn {
|
||
height: 92rpx;
|
||
margin-top: 32rpx;
|
||
border-radius: $fc-radius-pill;
|
||
background: $fc-gradient-primary;
|
||
color: $fc-primary-ink;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 10rpx 24rpx rgba(0, 184, 92, 0.25);
|
||
&--disabled {
|
||
background: $fc-border;
|
||
color: $fc-text-placeholder;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
.dist__sheet-safe {
|
||
height: env(safe-area-inset-bottom);
|
||
}
|
||
.dist__bottom-space {
|
||
height: 32rpx;
|
||
}
|
||
</style>
|