ZF sun
eae415ecad
策略: 微信小程序前端采用"专属 DIY 组件"模式实现推荐入驻主页,
不写 4 个独立 .vue 页面,而是在 components-diy/ 下新增 6 个动态数据组件,
商家在"自定义页面"装修面板里自由拖拽组合。组件 mounted 后自动 ajax
拉 /recommend/api/home/homeSummary 真实数据。
新增:
1. 6 个 vue 组件
- diy-recommend-code 推荐码展示 + 复制 + 分享链接
- diy-recommend-balance 可提现余额 / 待结算 / 累计收益 + 考察期剩余天数
- diy-recommend-stat 累计推荐 / 已入驻 / 累计收益 3 个数字
- diy-recommend-records 最近 3 条推荐(动态)
- diy-recommend-rules 奖励规则 4 条(API 推,可后台覆写)
- diy-recommend-action 立即提现 + 提现记录 + 入驻申请 三按钮
2. 公共 mixin — common/js/recommend-diy-data.js
- fetchRecommendInfo() ajax 拉 homeSummary(去抖 10s)
- computed: balance / code / probation / statistics / recentRecords / rewardRules
- formatMoney() 数字本地化
- 失败/未登录时 recommendInfo = null,模板显示占位
3. pages.json
- easycom 加规则 "diy-recommend-*" → components-diy/diy-recommend-$1.vue
- 已有 autoscan=true 自动发现;新增条目保证 builds 稳定
4. 语言包
- lang/zh-cn/components-diy/diy-recommend.js
- lang/en-us/components-diy/diy-recommend.js
5. 验证脚本
- scripts/verify_diy_recommend.js — 6 文件三段式校验
技术细节:
- 所有 vue 文件模板里 data-component-name 与 easycom 名字强一致
- 6 组件之间互不依赖,可任意组合到任意 Diy 页面
- API 数据通过 mixin 共享,组件不重复拉取
- 占位/loading/error 三态完整
- 大部分样式沿用项目既有 home-grown SCSS 写法,不引入新依赖
- bundle 体积增量 < 30KB
i18n-check.js 通过:
zh-cn: 224 files / 2678 keys
en-us: 224 files / 2678 keys
diff: 0 ✅
未做(后续可选):
- 4 个真正 .vue 页面(此 PR 不要,改用 DIY)
- getMyQrcode 真实二维码生成
- 提现账户管理 UI
109 lines
3.3 KiB
Vue
109 lines
3.3 KiB
Vue
<template>
|
|
<view data-component-name="diy-recommend-balance" class="diy-recommend-balance" :style="warpCss">
|
|
<view class="balance-card">
|
|
<view class="balance-row">
|
|
<view class="balance-half available">
|
|
<text class="label">{{ $lang('components-diy.diy-recommend-balance.available') }}</text>
|
|
<text class="big-num price-font">¥{{ formatMoney(balance.available) }}</text>
|
|
<text class="sub-tip" v-if="balance.available > 0 && probation.total_days">
|
|
{{ $lang('components-diy.diy-recommend-balance.passedProbation') }}
|
|
</text>
|
|
</view>
|
|
<view class="balance-half probation">
|
|
<text class="label">{{ $lang('components-diy.diy-recommend-balance.frozen') }}</text>
|
|
<text class="big-num price-font">¥{{ formatMoney(balance.frozen) }}</text>
|
|
<text class="sub-tip" v-if="probation.remaining_days > 0">
|
|
{{ $lang('components-diy.diy-recommend-balance.probationDays', { days: probation.remaining_days }) }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 累计总收益(底部) -->
|
|
<view class="total-row">
|
|
<text class="label">{{ $lang('components-diy.diy-recommend-balance.totalEarned') }}</text>
|
|
<text class="big-num price-font">¥{{ formatMoney(balance.total_earned) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import recommendData from '@/common/js/recommend-diy-data.js';
|
|
|
|
export default {
|
|
name: 'diy-recommend-balance',
|
|
mixins: [recommendData],
|
|
computed: {
|
|
warpCss() {
|
|
return {
|
|
padding: '24rpx',
|
|
backgroundColor: '#fff',
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.diy-recommend-balance {
|
|
.balance-card {
|
|
background: linear-gradient(180deg, #d9f2ff, #f0f9ff);
|
|
border-radius: 16rpx;
|
|
padding: 32rpx 24rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0,102,204,0.08);
|
|
}
|
|
.balance-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.balance-half {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 16rpx 20rpx;
|
|
border-radius: 12rpx;
|
|
background: rgba(255,255,255,0.65);
|
|
|
|
&.available {
|
|
.big-num { color: #1976d2; }
|
|
}
|
|
&.probation {
|
|
background: rgba(255,243,224,0.85);
|
|
.big-num { color: #e65100; }
|
|
}
|
|
|
|
.label {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
.big-num {
|
|
font-size: 44rpx;
|
|
font-weight: 700;
|
|
margin: 8rpx 0;
|
|
}
|
|
.sub-tip {
|
|
font-size: 22rpx;
|
|
color: #888;
|
|
}
|
|
}
|
|
.total-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-top: 1rpx solid #e0e0e0;
|
|
padding-top: 16rpx;
|
|
.label {
|
|
font-size: 26rpx;
|
|
color: #444;
|
|
}
|
|
.big-num {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #d81b60;
|
|
}
|
|
}
|
|
}
|
|
</style>
|