mr-component
Version:
A library for Mr components
478 lines (429 loc) • 14.6 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BusinessPaymentSelector 图标配置演示</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
color: white;
margin-bottom: 40px;
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
font-weight: 700;
}
.header p {
font-size: 1.2rem;
opacity: 0.9;
}
.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.demo-card {
background: white;
border-radius: 16px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.demo-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 10px;
color: #333;
}
.demo-description {
color: #666;
margin-bottom: 20px;
line-height: 1.6;
}
.code-block {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 15px;
margin: 15px 0;
font-family: 'Courier New', monospace;
font-size: 14px;
overflow-x: auto;
}
.icon-examples {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin: 20px 0;
}
.icon-example {
background: #f8f9fa;
border-radius: 8px;
padding: 15px;
text-align: center;
}
.icon-example code {
display: block;
margin-top: 10px;
font-size: 12px;
color: #666;
}
.tips {
background: #e3f2fd;
border-left: 4px solid #2196f3;
padding: 15px;
margin: 20px 0;
border-radius: 4px;
}
.tips h4 {
color: #1976d2;
margin-bottom: 8px;
}
.tips ul {
margin-left: 20px;
color: #333;
}
.tips li {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎨 图标配置演示</h1>
<p>BusinessPaymentSelector 组件支持多种简单的图标配置方式</p>
</div>
<div class="demo-grid">
<!-- Emoji 图标 -->
<div class="demo-card">
<h3 class="demo-title">💫 Emoji 图标</h3>
<p class="demo-description">最简单的方式：直接使用emoji表情作为图标，支持1-4个字符</p>
<div class="icon-examples">
<div class="icon-example">
<div style="font-size: 32px">💳</div>
<code>icon: "💳"</code>
</div>
<div class="icon-example">
<div style="font-size: 32px">🏦</div>
<code>icon: "🏦"</code>
</div>
<div class="icon-example">
<div style="font-size: 32px">📱</div>
<code>icon: "📱"</code>
</div>
<div class="icon-example">
<div style="font-size: 32px">💰</div>
<code>icon: "💰"</code>
</div>
</div>
<div class="code-block">
{ id: "card", name: "Credit Card", icon: "💳", // 直接使用emoji balance: "2,580.00",
currency: "USD" }
</div>
<div id="emoji-demo"></div>
</div>
<!-- 图片 URL -->
<div class="demo-card">
<h3 class="demo-title">🖼️ 图片 URL</h3>
<p class="demo-description">使用在线图片或本地图片作为图标，自动识别URL格式</p>
<div class="code-block">
{ id: "paypal", name: "PayPal", icon: "https://logo.clearbit.com/paypal.com", balance:
"156.78", currency: "USD" }
</div>
<div class="tips">
<h4>支持的URL格式：</h4>
<ul>
<li>完整URL：<code>https://example.com/icon.png</code></li>
<li>相对路径：<code>./images/icon.png</code></li>
<li>绝对路径：<code>/assets/icon.png</code></li>
<li>包含扩展名：<code>icon.svg</code></li>
</ul>
</div>
<div id="image-demo"></div>
</div>
<!-- 字母缩写 -->
<div class="demo-card">
<h3 class="demo-title">🔤 字母缩写</h3>
<p class="demo-description">使用简短的字母作为图标，适合品牌缩写或代码</p>
<div class="icon-examples">
<div class="icon-example">
<div
style="
width: 40px;
height: 40px;
background: #1989fa;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
"
>
V
</div>
<code>icon: "V"</code>
</div>
<div class="icon-example">
<div
style="
width: 40px;
height: 40px;
background: #1989fa;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
"
>
MC
</div>
<code>icon: "MC"</code>
</div>
<div class="icon-example">
<div
style="
width: 40px;
height: 40px;
background: #1989fa;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
"
>
PP
</div>
<code>icon: "PP"</code>
</div>
<div class="icon-example">
<div
style="
width: 40px;
height: 40px;
background: #1989fa;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
"
>
AP
</div>
<code>icon: "AP"</code>
</div>
</div>
<div class="code-block">
{ id: "visa", name: "Visa Card", icon: "V", // 字母缩写 balance: "1,234.56", currency:
"USD" }
</div>
<div id="letter-demo"></div>
</div>
<!-- 默认图标 -->
<div class="demo-card">
<h3 class="demo-title">🔄 默认图标</h3>
<p class="demo-description">不设置icon属性时，自动使用支付方式名称的首字母作为图标</p>
<div class="code-block">
{ id: "bank", name: "Bank Transfer", // 不设置icon属性，自动显示"B" balance:
"10,000.00", currency: "USD" }
</div>
<div id="default-demo"></div>
</div>
<!-- 混合使用 -->
<div class="demo-card">
<h3 class="demo-title">🎯 完整示例</h3>
<p class="demo-description">展示如何在一个支付选择器中混合使用各种图标类型</p>
<div class="code-block">
const options = [ { id: "card", name: "Credit Card", icon: "💳", balance: "2,580.00" },
{ id: "paypal", name: "PayPal", icon: "https://logo.clearbit.com/paypal.com" }, { id:
"alipay", name: "Alipay", icon: "支" }, { id: "bank", name: "Bank Transfer" }, //
默认图标 ];
</div>
<div id="mixed-demo"></div>
</div>
<!-- 在低代码平台中使用 -->
<div class="demo-card">
<h3 class="demo-title">⚙️ 在低代码平台中配置</h3>
<p class="demo-description">现在icon属性使用StringSetter，配置更加简单直观</p>
<div class="tips">
<h4>配置说明：</h4>
<ul>
<li><strong>emoji：</strong>直接输入表情符号，如 💳 🏦 📱</li>
<li><strong>图片：</strong>输入完整的图片URL</li>
<li><strong>字母：</strong>输入1-4个字符的缩写</li>
<li><strong>空值：</strong>留空使用默认的首字母图标</li>
</ul>
</div>
<div style="background: #f0f7ff; padding: 20px; border-radius: 8px; margin-top: 15px">
<h4 style="color: #1976d2; margin-bottom: 10px">✅ 优化前后对比：</h4>
<p><strong>之前：</strong>使用SlotSetter，需要配置React组件，复杂难用</p>
<p><strong>现在：</strong>使用StringSetter，直接输入文本，简单直观</p>
</div>
</div>
</div>
</div>
<!-- React & ReactDOM -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- React-Vant -->
<script crossorigin src="https://unpkg.com/react-vant@3/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/react-vant@3/lib/index.css" />
<!-- 加载组件 -->
<script src="../lib/index.js"></script>
<link rel="stylesheet" href="../lib/index.css" />
<script>
const { BusinessPaymentSelector } = window.YourMaterialDemo;
// Emoji 图标示例
ReactDOM.render(
React.createElement(BusinessPaymentSelector, {
title: '选择支付方式',
showBalance: true,
options: [
{ id: 'card', name: 'Credit Card', icon: '💳', balance: '2,580.00', currency: 'USD' },
{ id: 'bank', name: 'Bank Account', icon: '🏦', balance: '15,680.50', currency: 'USD' },
{ id: 'mobile', name: 'Mobile Pay', icon: '📱', balance: '456.78', currency: 'USD' },
{ id: 'cash', name: 'Cash Wallet', icon: '💰', balance: '123.45', currency: 'USD' },
],
defaultValue: 'card',
theme: 'default',
size: 'normal',
}),
document.getElementById('emoji-demo'),
);
// 图片URL示例
ReactDOM.render(
React.createElement(BusinessPaymentSelector, {
title: '在线支付',
showBalance: true,
options: [
{
id: 'paypal',
name: 'PayPal',
icon: 'https://logo.clearbit.com/paypal.com',
balance: '1,234.56',
currency: 'USD',
},
{
id: 'stripe',
name: 'Stripe',
icon: 'https://logo.clearbit.com/stripe.com',
balance: '890.12',
currency: 'USD',
},
],
theme: 'primary',
size: 'normal',
}),
document.getElementById('image-demo'),
);
// 字母缩写示例
ReactDOM.render(
React.createElement(BusinessPaymentSelector, {
title: '银行卡支付',
showBalance: true,
options: [
{ id: 'visa', name: 'Visa Card', icon: 'V', balance: '5,678.90', currency: 'USD' },
{ id: 'master', name: 'MasterCard', icon: 'MC', balance: '3,456.78', currency: 'USD' },
{
id: 'amex',
name: 'American Express',
icon: 'AE',
balance: '7,890.12',
currency: 'USD',
},
],
theme: 'success',
size: 'normal',
}),
document.getElementById('letter-demo'),
);
// 默认图标示例
ReactDOM.render(
React.createElement(BusinessPaymentSelector, {
title: '转账方式',
showBalance: true,
options: [
{ id: 'bank', name: 'Bank Transfer', balance: '10,000.00', currency: 'USD' },
{ id: 'wire', name: 'Wire Transfer', balance: '25,000.00', currency: 'USD' },
{ id: 'check', name: 'Check Payment', balance: '5,000.00', currency: 'USD' },
],
theme: 'warning',
size: 'normal',
}),
document.getElementById('default-demo'),
);
// 混合使用示例
ReactDOM.render(
React.createElement(BusinessPaymentSelector, {
title: '选择支付方式',
showBalance: true,
showFee: true,
allowAddCard: true,
options: [
{
id: 'card',
name: 'Credit Card',
icon: '💳',
balance: '2,580.00',
currency: 'USD',
fee: '$2.99',
},
{
id: 'paypal',
name: 'PayPal',
icon: 'https://logo.clearbit.com/paypal.com',
balance: '1,456.78',
currency: 'USD',
fee: '$1.50',
},
{
id: 'alipay',
name: 'Alipay',
icon: '支',
balance: '8,890.00',
currency: 'CNY',
fee: '¥0.50',
},
{
id: 'bank',
name: 'Bank Transfer',
balance: '15,000.00',
currency: 'USD',
fee: 'Free',
},
],
defaultValue: 'card',
theme: 'default',
size: 'large',
showConfirmButton: true,
confirmButtonText: '确认支付',
}),
document.getElementById('mixed-demo'),
);
</script>
</body>
</html>