本帖最后由 xnink 于 2026-5-29 15:17 编辑
点外卖一直有用返现的习惯，后面发现了美团返返这个小程序
这是美团官方的返现，比小蚕返现高，但是每次使用的时候，只显示返现的比例
不会显示具体返现的金额，于是我就用AI做了这一款返现金额计算器
使用之前用这个计算一下，我就知道大概返现多少钱，我实际消费多少钱。
如图：
为了方便直接微信打开使用，我用html2web搭建了一个在线地址：https://gdybkjn4.html2web.com/
那废话不多说直接代码：
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美团返返 - 返现计算器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body {
background: #FFF7E8;
min-height: 100vh;
padding: 30px 15px;
}
.container {
max-width: 400px;
margin: 0 auto;
background: #fff;
border-radius: 20px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.top {
background: linear-gradient(90deg, #FFD100, #FF9F00);
padding: 25px 20px;
text-align: center;
color: #fff;
}
.logo {
width: 70px;
height: 70px;
border-radius: 50%;
background: url('https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc_gen_image/856bd96283fb4a63b633c808a854458b.jpeg~tplv-a9rns2rl98-image_pre_watermark_1_5b.png?lk3s=8e244e95&rcl=2026052811331390A8460780C96C15551E&rrcfp=827586d3&x-expires=2095299210&x-signature=IaKHEXk63LDhHtoYKZ%2FeeVFUQlg%3D') center/cover no-repeat;
margin: 0 auto 10px;
border: 2px solid #fff;
}
.top h2 {
font-size: 20px;
}
.top p {
font-size: 12px;
opacity: 0.9;
margin-top: 4px;
}
/* 官方入口模块 */
.entry-box {
margin: 20px;
padding: 16px;
background: #FFF9F2;
border-radius: 12px;
border: 1px solid #FFE8C7;
display: flex;
gap: 12px;
}
.entry-btn {
flex: 1;
height: 44px;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.official-btn {
background: #FF9F00;
color: #fff;
}
.redpack-btn {
background: #FF3300;
color: #fff;
border: 1px solid #FF3300 !important;
}
.entry-btn:active {
opacity: 0.9;
}
/* 使用说明区域 */
.explain {
margin: 0 20px 20px;
padding: 16px;
background: #FFF9F2;
border-radius: 12px;
border: 1px solid #FFE8C7;
}
.explain-title {
font-size: 16px;
color: #FF6A00;
font-weight: 600;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.explain-text {
font-size: 14px;
color: #555;
line-height: 1.6;
}
/* 图文说明按钮 */
.guide-btn {
background: #FF9F00;
color: #fff;
border: none;
border-radius: 8px;
padding: 4px 10px;
font-size: 12px;
cursor: pointer;
}
.content {
padding: 0 20px 25px;
}
.item {
margin-bottom: 16px;
}
.item label {
font-size: 14px;
color: #333;
display: block;
margin-bottom: 6px;
font-weight: 500;
}
.item input {
width: 100%;
height: 46px;
border: 1px solid #eee;
border-radius: 12px;
padding: 0 15px;
font-size: 15px;
background: #fafafa;
outline: none;
}
.item input:focus {
border-color: #FF9F00;
background: #fff;
}
.tips {
color: #ff3333;
font-size: 12px;
margin-top: 4px;
display: none;
}
.btn {
width: 100%;
height: 48px;
background: #FF9F00;
color: #fff;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 14px;
margin-top: 10px;
cursor: pointer;
}
.btn:active {
opacity: 0.9;
}
.result {
margin-top: 22px;
background: #FFF9F2;
border-radius: 16px;
padding: 18px;
border: 1px solid #FFE8C7;
display: none;
}
.result-title {
font-size: 15px;
color: #FF6A00;
font-weight: bold;
margin-bottom: 12px;
}
.line {
display: flex;
justify-content: space-between;
padding: 6px 0;
font-size: 14px;
}
.total {
border-top: 1px dashed #FFD7A5;
margin-top: 10px;
padding-top: 12px;
font-weight: bold;
font-size: 15px;
color: #FF3300;
}
/* 右侧悬浮客服按钮 */
.service-btn {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 120px;
background: #FF9F00;
color: #fff;
border-radius: 25px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 12px rgba(255, 159, 0, 0.3);
cursor: pointer;
z-index: 999;
}
.service-btn svg {
width: 24px;
height: 24px;
fill: #fff;
}
.service-btn span {
font-size: 12px;
writing-mode: vertical-rl;
}
/* 遮罩层通用样式 */
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}
/* 弹窗主体 */
.popup {
background: #fff;
width: 320px;
padding: 30px 25px;
border-radius: 20px;
text-align: center;
position: relative;
}
/* 关闭按钮 */
.close {
position: absolute;
top: 18px;
right: 20px;
font-size: 24px;
color: #999;
cursor: pointer;
}
.close:hover {
color: #333;
}
/* 标题 */
.popup-title {
font-size: 22px;
font-weight: 600;
margin-bottom: 25px;
}
/* 二维码/图文说明图片样式 */
.qrcode-img, .guide-img {
width: 220px;
height: auto;
margin: 0 auto 15px;
display: block;
border-radius: 8px;
object-fit: contain;
}
/* 提示文字 */
.popup-tip {
font-size: 15px;
color: #999;
margin-bottom: 30px;
}
/* 微信行 */
.wechat-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 18px;
color: #333;
}
.wechat-icon {
width: 24px;
height: 24px;
}
</style>
</head>
<body>
<!-- 右侧悬浮客服按钮 -->
<div class="service-btn" id="serviceBtn">
<svg viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm0-4h-2V7h2v8z"></path>
</svg>
<span>联系客服</span>
</div>
<!-- 客服弹窗遮罩 + 弹窗 -->
<div class="mask" id="mask">
<div class="popup">
<span class="close" id="closeBtn">×</span>
<h4 class="popup-title">扫码联系作者</h4>
<img class="qrcode-img" src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/6f3eb3131fd44d8183f3bff1585eb91b.jpg~tplv-a9rns2rl98-image.png?lk3s=8e244e95&rcl=20260528121236F72C6A068A21F41CFC54&rrcfp=dafada99&x-expires=2096165557&x-signature=eIzfrQT9BHZ%2B3TjRMVvpAw%2Fz39E%3D" alt="客服二维码">
<p class="popup-tip">您的反馈帮助我更好的改进。</p>
<div class="wechat-row">
<!-- 微信图标 -->
<svg class="wechat-icon" viewBox="0 0 1024 1024">
<path fill="#07C160" d="M690.1 479.1c0-106.9-95.2-193.5-212.3-193.5-117 0-212.3 86.6-212.3 193.5 0 106.9 95.2 193.5 212.3 193.5 41.2 0 79.2-11.9 111.2-32.7 8.5-5.5 16.4-11.8 23.6-18.7 4.3-4.1 11.7-3.9 15.6 0.5l49.9 46.3c3.8 3.5 10.3 2.3 11.9-2.2 18.3-52.4 5.8-109.3-27.4-152.3 29.8-36.8 47.5-82.9 47.5-134.9zM377.4 420.2c-23.8 0-43.1-19.3-43.1-43.1s19.3-43.1 43.1-43.1 43.1 19.3 43.1 43.1-19.3 43.1-43.1 43.1zm199.2 0c-23.8 0-43.1-19.3-43.1-43.1s19.3-43.1 43.1-43.1 43.1 19.3 43.1 43.1-19.3 43.1-43.1 43.1z"></path>
</svg>
<span>微信：xnink_</span>
</div>
</div>
</div>
<!-- 图文说明弹窗遮罩 + 弹窗 -->
<div class="mask" id="guideMask">
<div class="popup">
<span class="close" id="guideCloseBtn">×</span>
<h4 class="popup-title">图文使用说明</h4>
<img class="guide-img" src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc_gen_image/2c0884603c864c5fbdeb88fcb085e62b.jpeg~tplv-a9rns2rl98-image.png?lk3s=8e244e95&rcl=202605281429053815600D7FD60413FCE8&rrcfp=e875b5a5&x-expires=2095309747&x-signature=y8%2Bj5Z2JXDjfQWtUSzMQ8pr0PRo%3D" alt="图文使用说明">
</div>
</div>
<div class="container">
<div class="top">
<div class="logo"></div>
<h2>美团返返 · 返现计算器</h2>
<p>一键计算 · 省钱一目了然</p>
</div>
<!-- 新增：官方入口 + 领取红包 模块 -->
<div class="entry-box">
<button class="entry-btn official-btn">官方入口</button>
<button class="entry-btn redpack-btn">领取红包</button>
</div>
<!-- 使用说明（带图文按钮） -->
<div class="explain">
<div class="explain-title">
📖 使用说明
<button class="guide-btn" id="openGuideBtn">查看图文示例</button>
</div>
<div class="explain-text">
1. 先点击-🧧<span style="cursor:pointer;color:#FF3300;"><strong>领取红包</strong></span>-领红包后下单更优惠；<br>
2. 通过<span style="cursor:pointer;color:#FF3300;"><strong>官方入口</strong></span>或<strong>美团返返</strong>小程序进入外卖页面；<br>
3. 填写订单实际支付金额、下单返现比例；<br>
4. 依次填写评价返现比例、单笔返现最大限额；<br>
5. 点击计算，即可查看总返现金额与实际支出。
</div>
</div>
<div class="content">
<div class="item">
<label>预估付款金额（元）</label>
<input type="number" id="pay" placeholder="例如：16">
<div class="tips" id="payTips">⚠️ 请输入实付金额</div>
</div>
<div class="item">
<label>下单返现比例（%）</label>
<input type="number" id="r1" value="35">
</div>
<div class="item">
<label>评价额外返现（%）</label>
<input type="number" id="r2" value="5">
</div>
<div class="item">
<label>下单返现上限（元）</label>
<input type="number" id="max" value="16">
</div>
<button class="btn">立即计算</button>
<div class="result" id="res">
<div class="result-title">📊 计算结果</div>
<div class="line"><span>下单立返</span><span id="b1">-</span></div>
<div class="line"><span>评价再返</span><span id="b2">-</span></div>
<div class="line total"><span>预估合计返现</span><span id="all">-</span></div>
<div class="line total"><span>预估实际花费</span><span id="cost">-</span></div>
</div>
</div>
</div>
<script>
// 计算器逻辑
function calc() {
let pay = parseFloat(document.getElementById('pay').value) || 0
let tips = document.getElementById('payTips')
let resultBox = document.getElementById('res')
if (pay <= 0) {
tips.style.display = 'block'
resultBox.style.display = 'none'
return
}
tips.style.display = 'none'
let r1 = parseFloat(document.getElementById('r1').value) || 0
let r2 = parseFloat(document.getElementById('r2').value) || 0
let max = parseFloat(document.getElementById('max').value) || 0
let b1 = pay * r1 / 100
if (b1 > max) b1 = max
let b2 = pay * r2 / 100
let all = b1 + b2
let cost = pay - all
document.getElementById('b1').innerText = b1.toFixed(2) + ' 元'
document.getElementById('b2').innerText = b2.toFixed(2) + ' 元'
document.getElementById('all').innerText = all.toFixed(2) + ' 元'
document.getElementById('cost').innerText = cost.toFixed(2) + ' 元'
resultBox.style.display = 'block'
}
// 客服弹窗逻辑
const serviceBtn = document.getElementById('serviceBtn')
const mask = document.getElementById('mask')
const closeBtn = document.getElementById('closeBtn')
serviceBtn.addEventListener('click', () => {
mask.style.display = 'flex'
})
closeBtn.addEventListener('click', () => {
mask.style.display = 'none'
})
mask.addEventListener('click', (e) => {
if(e.target === mask) {
mask.style.display = 'none'
}
})
// 图文说明弹窗逻辑
const openGuideBtn = document.getElementById('openGuideBtn')
const guideMask = document.getElementById('guideMask')
const guideCloseBtn = document.getElementById('guideCloseBtn')
openGuideBtn.addEventListener('click', () => {
guideMask.style.display = 'flex'
})
guideCloseBtn.addEventListener('click', () => {
guideMask.style.display = 'none'
})
guideMask.addEventListener('click', (e) => {
if(e.target === guideMask) {
guideMask.style.display = 'none'
}
})
</script>
</body>
</html> | 
发表于 2026-5-29 15:09
