649 行
18 KiB
Vue
649 行
18 KiB
Vue
<template>
|
||
<s-layout class="madow-wrap" title="我的dmepa">
|
||
<!-- 顶部黑金尊享资产卡片 -->
|
||
<view class="header-box">
|
||
<view class="asset-card">
|
||
<!-- 卡片顶栏 -->
|
||
<view class="card-top ss-flex ss-row-between ss-col-center">
|
||
<view class="top-tag ss-flex ss-col-center">
|
||
<text class="tag-badge">生态资产</text>
|
||
</view>
|
||
<view class="rule-btn ss-flex ss-col-center" @tap="state.showHelp = true">
|
||
<text class="rule-btn-text">市值规则</text>
|
||
<text class="cicon-help-o ss-m-l-6"></text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- dmepa核心大字数 -->
|
||
<view class="madow-hero ss-flex ss-col-bottom ss-row-between">
|
||
<view class="hero-left ss-flex ss-col-bottom">
|
||
<text class="hero-num">{{ formatInt(state.info.madow) }}</text>
|
||
<text class="hero-unit">dmepa</text>
|
||
</view>
|
||
<button
|
||
v-if="state.info.can_withdraw_madow !== false && state.info.can_withdraw_madow !== 0 && state.info.can_withdraw_madow !== '0'"
|
||
class="ss-reset-button topup-btn ss-flex ss-row-center ss-col-center"
|
||
@tap="onWithdrawMadow"
|
||
>
|
||
<text class="cicon-moneybag ss-m-r-6"></text>
|
||
<text>提现</text>
|
||
</button>
|
||
</view>
|
||
|
||
<!-- 市值动态指示胶囊 -->
|
||
<view
|
||
class="rate-capsule ss-flex ss-row-between ss-col-center"
|
||
v-if="state.info.show_madow_rate !== false && state.info.show_madow_rate !== 0 && state.info.show_madow_rate !== '0'"
|
||
>
|
||
<view class="capsule-left ss-flex ss-col-center">
|
||
<text class="capsule-dot"></text>
|
||
<text class="capsule-text">市值 1 dmepa ≈ {{ state.info.madow_rate || '0' }} 元</text>
|
||
</view>
|
||
<text class="capsule-tag">生态增值</text>
|
||
</view>
|
||
|
||
<!-- 底部数据栏：结算提示（预估总市值已按需求隐藏） -->
|
||
<view class="card-footer ss-flex ss-row-right ss-col-center">
|
||
<view class="footer-tip">
|
||
<text class="tip-text">次日 00:30 起核算</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 列表标题区 -->
|
||
<view class="section-header ss-flex ss-row-between ss-col-center">
|
||
<view class="section-title-wrap ss-flex ss-col-center">
|
||
<view class="title-bar"></view>
|
||
<text class="section-title">每日贡献明细</text>
|
||
</view>
|
||
<text class="section-subtitle">按日核算入账</text>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view class="empty-wrap" v-if="state.inited && state.list.length === 0">
|
||
<s-empty
|
||
icon="/static/data-empty.png"
|
||
text="完成一笔订单后，次日 00:30 起参与dmepa核算。"
|
||
></s-empty>
|
||
</view>
|
||
|
||
<!-- 流水卡片列表 -->
|
||
<view class="list-container" v-if="state.list.length > 0">
|
||
<view
|
||
class="log-card"
|
||
v-for="(item, index) in state.list"
|
||
:key="item.id || index"
|
||
>
|
||
<view class="log-top ss-flex ss-row-between ss-col-center">
|
||
<view class="log-title-box ss-flex ss-col-center">
|
||
<view class="coin-icon ss-flex ss-row-center ss-col-center">
|
||
<text class="cicon-gift"></text>
|
||
</view>
|
||
<view class="log-main-info">
|
||
<text class="log-title">每日贡献dmepa</text>
|
||
<text class="log-date">{{ item.settle_date || item.date || item.createtime || '' }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="log-amount">
|
||
<text class="amount-plus">+</text>
|
||
<text class="amount-num">{{ formatInt(item.madow || item.amount) }}</text>
|
||
<text class="amount-unit">dmepa</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 详细指标标签（GMV、参与人数） -->
|
||
<view
|
||
class="log-tags ss-flex ss-col-center"
|
||
v-if="item.share_user_count || item.user_count || item.count || item.people || item.gmv || item.order_money"
|
||
>
|
||
<view
|
||
class="tag-item"
|
||
v-if="item.share_user_count || item.user_count || item.count || item.people"
|
||
>
|
||
<text class="tag-txt">当日参与 {{ item.share_user_count || item.user_count || item.count || item.people }} 人</text>
|
||
</view>
|
||
<view
|
||
class="tag-item"
|
||
v-if="item.gmv || item.order_money"
|
||
>
|
||
<text class="tag-txt">GMV ¥{{ item.gmv || item.order_money }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载更多 -->
|
||
<uni-load-more
|
||
v-if="state.list.length > 0"
|
||
:status="state.loadStatus"
|
||
:content-text="{
|
||
contentdown: '上拉加载更多',
|
||
}"
|
||
/>
|
||
|
||
<!-- 市值与规则说明弹窗 -->
|
||
<su-popup
|
||
:show="state.showHelp"
|
||
type="bottom"
|
||
round="24"
|
||
@close="state.showHelp = false"
|
||
showClose
|
||
>
|
||
<view class="rule-popup-body">
|
||
<view class="rule-popup-title ss-m-b-30">{{ state.ruleTitle }}</view>
|
||
<view
|
||
class="rule-item"
|
||
:class="index === state.rules.length - 1 ? 'ss-m-b-36' : 'ss-m-b-24'"
|
||
v-for="(item, index) in state.rules"
|
||
:key="index"
|
||
>
|
||
<view class="rule-item-title ss-flex ss-col-center ss-m-b-8">
|
||
<text class="rule-seq">{{ index + 1 }}</text>
|
||
<text class="rule-name">{{ item.title }}</text>
|
||
</view>
|
||
<view class="rule-item-desc">
|
||
{{ item.desc }}
|
||
</view>
|
||
</view>
|
||
|
||
<button class="ss-reset-button rule-confirm-btn" @tap="state.showHelp = false">
|
||
我知道了
|
||
</button>
|
||
</view>
|
||
</su-popup>
|
||
</s-layout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive } from 'vue';
|
||
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
|
||
import sheep from '@/sheep';
|
||
import _ from 'lodash';
|
||
|
||
const defaultRules = [
|
||
{
|
||
title: 'dmepa获取与核算',
|
||
desc: '平台合伙人与创客达成考核或完成订单后，系统将于次日 00:30 起统一参与每日dmepa加权核算并自动分发。',
|
||
},
|
||
{
|
||
title: '市值动态增值',
|
||
desc: '市值随全平台订单增加而上浮增值。全网完成订单总量越多，dmepa单价所对应的市值越高，共享生态红利。',
|
||
},
|
||
{
|
||
title: '价值说明与权益',
|
||
desc: '市值仅作为平台数字生态资产价值参考展示，不可直接兑换现金提现。具体权益按平台股东与合伙人章程执行。',
|
||
},
|
||
];
|
||
|
||
const state = reactive({
|
||
info: {
|
||
madow: sheep.$store('user').userInfo?.madow || '0',
|
||
madow_rate: sheep.$store('user').userInfo?.madow_rate || '0',
|
||
madow_value: sheep.$store('user').userInfo?.madow_value || '0.00',
|
||
show_madow_rate: sheep.$store('user').userInfo?.show_madow_rate ?? 1,
|
||
can_withdraw_madow: 1,
|
||
madow_withdraw_min: 1,
|
||
},
|
||
ruleTitle: '市值与增值规则',
|
||
rules: defaultRules,
|
||
list: [],
|
||
inited: false,
|
||
page: 1,
|
||
lastPage: 1,
|
||
loadStatus: '',
|
||
showHelp: false,
|
||
});
|
||
|
||
function onWithdrawMadow() {
|
||
sheep.$router.go('/pages/pay/withdraw', { type: 'madow' });
|
||
}
|
||
|
||
function formatInt(val) {
|
||
if (val === '' || val === null || val === undefined || val === '--') return '0';
|
||
const num = parseFloat(val) || 0;
|
||
if (num > 0 && num < 1) {
|
||
return parseFloat(num.toFixed(4)).toString();
|
||
}
|
||
return String(Math.floor(num));
|
||
}
|
||
|
||
function pickList(payload) {
|
||
if (!payload) return [];
|
||
if (Array.isArray(payload)) return payload;
|
||
if (Array.isArray(payload.list)) return payload.list;
|
||
if (Array.isArray(payload.list?.data)) return payload.list.data;
|
||
if (Array.isArray(payload.data)) return payload.data;
|
||
return [];
|
||
}
|
||
|
||
async function getMadow(page = 1) {
|
||
state.loadStatus = 'loading';
|
||
try {
|
||
const res = await sheep.$api.partner.madow({ page });
|
||
if (res?.code === 1) {
|
||
const data = res.data || {};
|
||
state.info.madow = data.madow ?? state.info.madow;
|
||
state.info.madow_rate = data.madow_rate ?? state.info.madow_rate;
|
||
state.info.madow_value = data.madow_value ?? state.info.madow_value;
|
||
if (data.show_madow_rate !== undefined) {
|
||
state.info.show_madow_rate = data.show_madow_rate;
|
||
}
|
||
if (data.can_withdraw_madow !== undefined) {
|
||
state.info.can_withdraw_madow = data.can_withdraw_madow;
|
||
}
|
||
if (data.madow_withdraw_min !== undefined) {
|
||
state.info.madow_withdraw_min = data.madow_withdraw_min;
|
||
}
|
||
if (data.rule_title) {
|
||
state.ruleTitle = String(data.rule_title).replace(/马币/g, '');
|
||
}
|
||
if (Array.isArray(data.rules) && data.rules.length > 0) {
|
||
state.rules = data.rules.map((item) => ({
|
||
...item,
|
||
title: String(item.title || '').replace(/马币/g, ''),
|
||
desc: String(item.desc || '').replace(/马币/g, ''),
|
||
}));
|
||
}
|
||
const list = pickList(data);
|
||
state.list = page === 1 ? list : _.concat(state.list, list);
|
||
state.page = data.list?.current_page || data.current_page || page;
|
||
state.lastPage = data.list?.last_page || data.last_page || 1;
|
||
state.loadStatus = state.page < state.lastPage ? 'more' : 'noMore';
|
||
state.inited = true;
|
||
return;
|
||
}
|
||
} catch (e) {}
|
||
if (page === 1) {
|
||
state.list = [];
|
||
}
|
||
state.loadStatus = 'noMore';
|
||
state.inited = true;
|
||
}
|
||
|
||
onLoad(() => {
|
||
getMadow();
|
||
});
|
||
|
||
onPullDownRefresh(async () => {
|
||
await getMadow(1);
|
||
uni.stopPullDownRefresh();
|
||
});
|
||
|
||
onReachBottom(() => {
|
||
if (state.loadStatus !== 'noMore') {
|
||
getMadow(state.page + 1);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.madow-wrap {
|
||
min-height: 100vh;
|
||
background-color: #f7f8fa;
|
||
}
|
||
|
||
/* 顶部资产区域 */
|
||
.header-box {
|
||
padding: 24rpx 30rpx 10rpx;
|
||
|
||
.asset-card {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 36rpx 32rpx 30rpx;
|
||
border-radius: 28rpx;
|
||
background: linear-gradient(138deg, #20222a 0%, #15161a 52%, #2c2419 100%);
|
||
box-shadow: 0 16rpx 36rpx rgba(18, 19, 23, 0.18), inset 0 1rpx 0 rgba(247, 219, 168, 0.28);
|
||
border: 1rpx solid rgba(235, 197, 131, 0.26);
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
right: -60rpx;
|
||
top: -60rpx;
|
||
width: 240rpx;
|
||
height: 240rpx;
|
||
background: radial-gradient(circle, rgba(235, 197, 131, 0.16) 0%, rgba(235, 197, 131, 0) 70%);
|
||
border-radius: 50%;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.card-top {
|
||
position: relative;
|
||
z-index: 2;
|
||
|
||
.top-tag {
|
||
.tag-badge {
|
||
font-size: 20rpx;
|
||
color: #2a2012;
|
||
background: linear-gradient(90deg, #f7dfa6 0%, #e2be78 100%);
|
||
padding: 4rpx 14rpx;
|
||
border-radius: 8rpx;
|
||
font-weight: 600;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.top-title {
|
||
font-size: 26rpx;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
font-weight: 400;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
}
|
||
|
||
.rule-btn {
|
||
padding: 6rpx 18rpx;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border: 1rpx solid rgba(235, 197, 131, 0.3);
|
||
border-radius: 24rpx;
|
||
|
||
.rule-btn-text {
|
||
font-size: 22rpx;
|
||
color: #f2cf8f;
|
||
}
|
||
|
||
.cicon-help-o {
|
||
font-size: 24rpx;
|
||
color: #f2cf8f;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 英雄数字 */
|
||
.madow-hero {
|
||
margin-top: 24rpx;
|
||
position: relative;
|
||
z-index: 2;
|
||
|
||
.hero-left {
|
||
.hero-num {
|
||
font-size: 64rpx;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
line-height: 1.1;
|
||
font-family: OPPOSANS, DIN, -apple-system, sans-serif;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
.hero-unit {
|
||
font-size: 26rpx;
|
||
color: #f4d397;
|
||
font-weight: 600;
|
||
margin-left: 12rpx;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
}
|
||
|
||
.topup-btn {
|
||
height: 56rpx;
|
||
padding: 0 28rpx;
|
||
background: linear-gradient(90deg, #f7dfa6 0%, #e2be78 100%);
|
||
border-radius: 28rpx;
|
||
color: #3b2b10;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
box-shadow: 0 6rpx 16rpx rgba(226, 190, 120, 0.28);
|
||
}
|
||
}
|
||
|
||
/* 市值胶囊 */
|
||
.rate-capsule {
|
||
margin-top: 24rpx;
|
||
background: rgba(244, 211, 151, 0.1);
|
||
border: 1rpx solid rgba(244, 211, 151, 0.22);
|
||
border-radius: 12rpx;
|
||
padding: 14rpx 20rpx;
|
||
position: relative;
|
||
z-index: 2;
|
||
|
||
.capsule-left {
|
||
.capsule-dot {
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
border-radius: 50%;
|
||
background-color: #eabf76;
|
||
margin-right: 12rpx;
|
||
box-shadow: 0 0 8rpx #eabf76;
|
||
}
|
||
|
||
.capsule-text {
|
||
font-size: 24rpx;
|
||
color: #fce8bf;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.capsule-tag {
|
||
font-size: 20rpx;
|
||
color: #f7d598;
|
||
opacity: 0.85;
|
||
}
|
||
}
|
||
|
||
/* 底部估值栏 */
|
||
.card-footer {
|
||
margin-top: 26rpx;
|
||
padding-top: 22rpx;
|
||
border-top: 1rpx solid rgba(255, 255, 255, 0.08);
|
||
position: relative;
|
||
z-index: 2;
|
||
|
||
.footer-metric {
|
||
.metric-label {
|
||
font-size: 22rpx;
|
||
color: rgba(255, 255, 255, 0.55);
|
||
display: block;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.metric-val-wrap {
|
||
.currency-symbol {
|
||
font-size: 26rpx;
|
||
color: #f4d397;
|
||
font-weight: 600;
|
||
margin-right: 4rpx;
|
||
margin-bottom: 2rpx;
|
||
}
|
||
|
||
.metric-val {
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
color: #f4d397;
|
||
font-family: OPPOSANS, DIN, -apple-system, sans-serif;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer-tip {
|
||
.tip-text {
|
||
font-size: 22rpx;
|
||
color: rgba(255, 255, 255, 0.45);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 列表标题区 */
|
||
.section-header {
|
||
padding: 30rpx 32rpx 16rpx;
|
||
|
||
.section-title-wrap {
|
||
.title-bar {
|
||
width: 6rpx;
|
||
height: 28rpx;
|
||
border-radius: 4rpx;
|
||
background: linear-gradient(180deg, #dfb775 0%, #ba8938 100%);
|
||
margin-right: 14rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #22252a;
|
||
}
|
||
}
|
||
|
||
.section-subtitle {
|
||
font-size: 22rpx;
|
||
color: #999ea6;
|
||
}
|
||
}
|
||
|
||
.empty-wrap {
|
||
padding: 60rpx 0;
|
||
}
|
||
|
||
/* 每日明细卡片列表 */
|
||
.list-container {
|
||
padding: 0 30rpx 20rpx;
|
||
|
||
.log-card {
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 26rpx 28rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(35, 42, 60, 0.04);
|
||
border: 1rpx solid #f0f1f5;
|
||
|
||
.log-top {
|
||
.log-title-box {
|
||
.coin-icon {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #fef4e2 0%, #fae6c3 100%);
|
||
margin-right: 18rpx;
|
||
|
||
.cicon-gift {
|
||
font-size: 32rpx;
|
||
color: #bf8d3b;
|
||
}
|
||
}
|
||
|
||
.log-main-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.log-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #23272e;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.log-date {
|
||
font-size: 22rpx;
|
||
color: #9ea4af;
|
||
}
|
||
}
|
||
}
|
||
|
||
.log-amount {
|
||
display: flex;
|
||
align-items: baseline;
|
||
|
||
.amount-plus {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #b58028;
|
||
margin-right: 2rpx;
|
||
}
|
||
|
||
.amount-num {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #b58028;
|
||
font-family: OPPOSANS, DIN, -apple-system, sans-serif;
|
||
}
|
||
|
||
.amount-unit {
|
||
font-size: 22rpx;
|
||
color: #b58028;
|
||
margin-left: 4rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.log-tags {
|
||
margin-top: 18rpx;
|
||
padding-top: 16rpx;
|
||
border-top: 1rpx solid #f6f7f9;
|
||
flex-wrap: wrap;
|
||
gap: 12rpx;
|
||
|
||
.tag-item {
|
||
background-color: #f7f8fb;
|
||
border-radius: 8rpx;
|
||
padding: 6rpx 14rpx;
|
||
|
||
.tag-txt {
|
||
font-size: 22rpx;
|
||
color: #6b7280;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 规则弹窗样式 */
|
||
.rule-popup-body {
|
||
padding: 36rpx 36rpx 48rpx;
|
||
background-color: #ffffff;
|
||
|
||
.rule-popup-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #1e222a;
|
||
text-align: center;
|
||
}
|
||
|
||
.rule-item {
|
||
.rule-item-title {
|
||
.rule-seq {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border-radius: 50%;
|
||
background: #f7dfa6;
|
||
color: #3b2b10;
|
||
font-size: 20rpx;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.rule-name {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #252932;
|
||
}
|
||
}
|
||
|
||
.rule-item-desc {
|
||
font-size: 24rpx;
|
||
color: #6a7180;
|
||
line-height: 38rpx;
|
||
padding-left: 44rpx;
|
||
}
|
||
}
|
||
|
||
.rule-confirm-btn {
|
||
width: 100%;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
text-align: center;
|
||
background: linear-gradient(90deg, #2b2e38 0%, #17181d 100%);
|
||
color: #f7d598;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
border-radius: 42rpx;
|
||
box-shadow: 0 8rpx 20rpx rgba(25, 27, 33, 0.2);
|
||
}
|
||
}
|
||
</style>
|