wikiboss/Henglianshutong
1
0
派生 0
代码 工单 合并请求 Actions 软件包 项目 版本发布 百科 动态

feat(commission): 重写我的马豆页面为黑金高端资产风格，汇率升级为马币市值

浏览代码
这个提交包含在：
wikiboss
2026-09-17 16:13:47 +08:00
父节点 b771abfb91
当前提交 0bc8a2036c
共有 2 个文件被更改，包括 553 次插入 和 101 次删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

86
tests/verify_madow_ui_upgrade_spec.js 普通文件
查看文件

@@ -0,0 +1,86 @@
const fs = require('fs');
const path = require('path');
let passed = 0;
let failed = 0;
function assert(condition, testName, detail = '') {
if (condition) {
console.log(` [PASS] ${testName}`);
passed++;
} else {
console.error(` [FAIL] ${testName} - ${detail}`);
failed++;
}
}
console.log("========================================================");
console.log(" 我的马豆页面高端重构与「马币市值」规范 TDD 自动化测试");
console.log("========================================================\n");
const madowPagePath = path.resolve(__dirname, '../uniapp/pages/commission/madow.vue');
assert(fs.existsSync(madowPagePath), 'madow.vue 页面文件存在');
const content = fs.readFileSync(madowPagePath, 'utf-8');
// 1. 文案升级契约：原“汇率”升级为“马币市值”
assert(
content.includes('马币市值'),
'页面包含核心文案「马币市值」'
);
assert(
!content.includes('当前汇率'),
'旧文案「当前汇率」已被完全替换移除'
);
// 2. 资产卡片结构与指标展示
assert(
content.includes('formatInt') && content.includes('state.info.madow'),
'卡片核心指标正确绑定持仓马豆且保留整数格式化 formatInt'
);
assert(
content.includes('state.info.madow_rate'),
'卡片正确展示马币市值单价 state.info.madow_rate'
);
assert(
content.includes('state.info.madow_value'),
'卡片正确展示折合市值/预估市值 state.info.madow_value'
);
// 3. 高端交互与规则弹窗
assert(
content.includes('su-popup') && (content.includes('showHelp') || content.includes('showRule')),
'规则说明升级为 su-popup 优雅弹窗结构'
);
assert(
content.includes('马币市值') && (content.includes('随全平台订单') || content.includes('增值') || content.includes('核算')),
'规则说明文字中涵盖马币市值与增值核算说明'
);
// 4. 每日明细流水卡片与数据标签
assert(
content.includes('v-for="') && content.includes('state.list'),
'每日明细流水正确遍历 state.list'
);
assert(
content.includes('user_count') && content.includes('gmv'),
'明细卡片保留当日参与人数与 GMV 展示'
);
assert(
content.includes('s-empty') && content.includes('uni-load-more'),
'保留优雅空状态 s-empty 与加载更多 uni-load-more'
);
// 5. 数据交互方法
assert(
content.includes('getMadow') && content.includes('onPullDownRefresh') && content.includes('onReachBottom'),
'包含完整的下拉刷新与触底分页加载逻辑'
);
console.log("\n--------------------------------------------------------");
console.log(`测试执行结果: 通过 ${passed} 项, 失败 ${failed} 项`);
console.log("========================================================\n");
if (failed > 0) {
process.exit(1);
}

568
uniapp/pages/commission/madow.vue
查看文件

@@ -1,50 +1,114 @@
<template>
<s-layout class="wallet-wrap" title="我的马豆">
<view class="header-box ss-flex ss-row-center ss-col-center">
<view class="card-box ui-BG-Main ui-Shadow-Main">
<view class="card-head ss-flex ss-col-center">
<view class="card-title">马豆数量</view>
<s-layout class="madow-wrap" title="我的马豆">
<!-- 顶部黑金尊享资产卡片 -->
<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>
<text class="top-title">持有马豆总量</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>
<view class="money-num ss-m-t-24">{{ formatInt(state.info.madow) }}</view>
<view class="card-sub ss-m-t-16">
当前汇率 1 马豆 = {{ state.info.madow_rate || '0' }} 元
</view>
<view class="card-sub ss-m-t-8">约合 ¥{{ state.info.madow_value || '0.00' }}</view>
<view class="help-btn" @tap="state.showHelp = !state.showHelp">说明</view>
<view v-if="state.showHelp" class="help-text">
汇率随全平台订单增加而上浮，仅作价值展示，不可提现。
</view>
</view>
</view>
<s-empty
v-if="state.inited && state.list.length === 0"
icon="/static/data-empty.png"
text="完成一笔订单后，次日 00:30 起参与马豆核算。"
></s-empty>
<!-- 马豆核心大字数 -->
<view class="madow-hero ss-flex ss-col-bottom">
<text class="hero-num">{{ formatInt(state.info.madow) }}</text>
<text class="hero-unit">豆</text>
</view>
<view v-if="state.list.length > 0">
<view class="wallet-list ss-flex border-bottom" v-for="(item, index) in state.list" :key="item.id || index">
<view class="list-content">
<view class="title-box ss-flex ss-row-between ss-m-b-12">
<text class="title">每日贡献马豆</text>
<view class="money">
<text class="add">+{{ formatInt(item.madow || item.amount) }}</text>
<!-- 马币市值动态指示胶囊 -->
<view class="rate-capsule ss-flex ss-row-between ss-col-center">
<view class="capsule-left ss-flex ss-col-center">
<text class="capsule-dot"></text>
<text class="capsule-text">马币市值 1 马豆 ≈ {{ state.info.madow_rate || '0' }} 元</text>
</view>
<text class="capsule-tag">生态增值</text>
</view>
<!-- 底部数据栏：折合市值与结算提示 -->
<view class="card-footer ss-flex ss-row-between ss-col-center">
<view class="footer-metric">
<text class="metric-label">预估马币总市值</text>
<view class="metric-val-wrap ss-flex ss-col-bottom">
<text class="currency-symbol">¥</text>
<text class="metric-val">{{ state.info.madow_value || '0.00' }}</text>
</view>
</view>
<view class="desc">
{{ item.date || item.createtime || '' }}
<text v-if="item.user_count || item.count || item.people">
· 当日 {{ item.user_count || item.count || item.people }} 人
</text>
<text v-if="item.gmv || item.order_money">
· GMV {{ item.gmv || item.order_money }}
</text>
<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 起参与马豆核算。"
></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">每日贡献马豆</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">豆</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"
@@ -52,6 +116,52 @@
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">马币市值与增值规则</view>
<view class="rule-item ss-m-b-24">
<view class="rule-item-title ss-flex ss-col-center ss-m-b-8">
<text class="rule-seq">1</text>
<text class="rule-name">马豆获取与核算</text>
</view>
<view class="rule-item-desc">
平台合伙人与创客达成考核或完成订单后，系统将于次日 00:30 起统一参与每日马豆加权核算并自动分发。
</view>
</view>
<view class="rule-item ss-m-b-24">
<view class="rule-item-title ss-flex ss-col-center ss-m-b-8">
<text class="rule-seq">2</text>
<text class="rule-name">马币市值动态增值</text>
</view>
<view class="rule-item-desc">
马币市值随全平台订单增加而上浮增值。全网完成订单总量越多，马豆单价所对应的马币市值越高，共享生态红利。
</view>
</view>
<view class="rule-item ss-m-b-36">
<view class="rule-item-title ss-flex ss-col-center ss-m-b-8">
<text class="rule-seq">3</text>
<text class="rule-name">价值说明与权益</text>
</view>
<view class="rule-item-desc">
马币市值仅作为平台数字生态资产价值参考展示，不可直接兑换现金提现。具体权益按平台股东与合伙人章程执行。
</view>
</view>
<button class="ss-reset-button rule-confirm-btn" @tap="state.showHelp = false">
我知道了
</button>
</view>
</su-popup>
</s-layout>
</template>
@@ -61,8 +171,6 @@
import sheep from '@/sheep';
import _ from 'lodash';
const headerBg = sheep.$url.css('/assets/addons/shopro/uniapp/user/wallet_card_bg.png');
const state = reactive({
info: {
madow: sheep.$store('user').userInfo?.madow || '0',
@@ -134,100 +242,358 @@
</script>
<style lang="scss" scoped>
.madow-wrap {
min-height: 100vh;
background-color: #f7f8fa;
}
/* 顶部资产区域 */
.header-box {
background-color: $white;
padding: 30rpx;
padding: 24rpx 30rpx 10rpx;
.card-box {
.asset-card {
width: 100%;
min-height: 280rpx;
padding: 40rpx;
border-radius: 30rpx;
overflow: hidden;
position: relative;
z-index: 1;
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;
&::after {
&::before {
content: '';
display: block;
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
top: 0;
left: 0;
background: v-bind(headerBg) no-repeat;
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-head,
.card-title,
.money-num,
.card-sub,
.help-btn,
.help-text {
.card-top {
position: relative;
z-index: 3;
color: $white;
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;
}
}
}
.card-title {
font-size: 24rpx;
/* 英雄数字 */
.madow-hero {
margin-top: 24rpx;
position: relative;
z-index: 2;
.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;
}
}
.money-num {
font-size: 40rpx;
font-weight: 500;
font-family: OPPOSANS;
/* 马币市值胶囊 */
.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-sub {
font-size: 24rpx;
opacity: 0.9;
}
/* 底部估值栏 */
.card-footer {
margin-top: 26rpx;
padding-top: 22rpx;
border-top: 1rpx solid rgba(255, 255, 255, 0.08);
position: relative;
z-index: 2;
.help-btn {
margin-top: 20rpx;
font-size: 22rpx;
text-decoration: underline;
}
.footer-metric {
.metric-label {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.55);
display: block;
margin-bottom: 6rpx;
}
.help-text {
margin-top: 12rpx;
font-size: 22rpx;
line-height: 34rpx;
opacity: 0.9;
.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);
}
}
}
}
}
.wallet-list {
padding: 30rpx;
background-color: #ffffff;
/* 列表标题区 */
.section-header {
padding: 30rpx 32rpx 16rpx;
.list-content {
flex: 1;
.title {
font-size: 28rpx;
color: $dark-3;
.section-title-wrap {
.title-bar {
width: 6rpx;
height: 28rpx;
border-radius: 4rpx;
background: linear-gradient(180deg, #dfb775 0%, #ba8938 100%);
margin-right: 14rpx;
}
.desc {
color: $gray-c;
font-size: 22rpx;
.section-title {
font-size: 30rpx;
font-weight: 600;
color: #22252a;
}
}
.money {
font-size: 28rpx;
font-weight: bold;
font-family: OPPOSANS;
.section-subtitle {
font-size: 22rpx;
color: #999ea6;
}
}
.add {
color: var(--ui-BG-Main);
.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>