mr-component
Version:
A library for Mr components
287 lines (267 loc) • 9.14 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline' 'unsafe-eval' https://unpkg.com;"
/>
<title>MrPaymentPopup Demo</title>
<!-- React -->
<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@4.0.0/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/react-vant@4.0.0/lib/index.css" />
<!-- Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>
body {
margin: 0;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.demo-container {
max-width: 400px;
margin: 0 auto;
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.demo-title {
font-size: 24px;
font-weight: 600;
text-align: center;
margin-bottom: 24px;
color: #333;
}
.demo-button {
width: 100%;
height: 48px;
background: #1989fa;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
margin-bottom: 16px;
transition: all 0.2s;
}
.demo-button:hover {
background: #0571d3;
transform: translateY(-1px);
}
.demo-section {
margin-bottom: 24px;
}
.demo-section-title {
font-size: 18px;
font-weight: 500;
margin-bottom: 12px;
color: #666;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState } = React;
const { createRoot } = ReactDOM;
// 简化的MrPaymentPopup组件 - 避免复杂依赖
const SimplePaymentPopup = ({ visible, onClose, onConfirm }) => {
const [selectedValue, setSelectedValue] = useState('');
const paymentOptions = [
{ id: 'alipay', name: '支付宝', icon: '💰', balance: '¥2,580.00' },
{ id: 'wechat', name: '微信支付', icon: '💚', balance: '¥1,240.50' },
{ id: 'unionpay', name: '银联卡', icon: '💳', extra: '尾号1234' },
{ id: 'credit', name: '信用卡', icon: '💎', extra: 'Visa ****5678' },
];
if (!visible) return null;
return (
<div
style={{
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0,0,0,0.5)',
display: 'flex',
alignItems: 'flex-end',
zIndex: 1000,
}}
>
<div
style={{
width: '100%',
backgroundColor: 'white',
borderRadius: '16px 16px 0 0',
padding: '24px',
maxHeight: '70vh',
overflow: 'auto',
}}
>
<div
style={{
fontSize: '18px',
fontWeight: '600',
textAlign: 'center',
marginBottom: '20px',
paddingBottom: '16px',
borderBottom: '1px solid #eee',
}}
>
选择支付方式
</div>
<div>
{paymentOptions.map((option) => (
<div
key={option.id}
style={{
display: 'flex',
alignItems: 'center',
padding: '16px',
marginBottom: '8px',
backgroundColor: selectedValue === option.id ? '#f0f8ff' : 'transparent',
border: `1px solid ${selectedValue === option.id ? '#1989fa' : '#eee'}`,
borderRadius: '8px',
cursor: 'pointer',
}}
onClick={() => setSelectedValue(option.id)}
>
<div
style={{
width: '40px',
height: '40px',
borderRadius: '50%',
backgroundColor: '#f7f8fa',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '20px',
marginRight: '12px',
}}
>
{option.icon}
</div>
<div style={{ flex: 1 }}>
<div style={{ fontWeight: '500', marginBottom: '4px' }}>{option.name}</div>
<div style={{ fontSize: '14px', color: '#666' }}>
{option.balance || option.extra}
</div>
</div>
<div
style={{
width: '20px',
height: '20px',
borderRadius: '50%',
border: `2px solid ${selectedValue === option.id ? '#1989fa' : '#ddd'}`,
backgroundColor: selectedValue === option.id ? '#1989fa' : 'transparent',
}}
/>
</div>
))}
</div>
<div
style={{
display: 'flex',
gap: '12px',
marginTop: '24px',
}}
>
<button
style={{
flex: 1,
height: '48px',
border: '1px solid #ddd',
borderRadius: '8px',
backgroundColor: 'white',
color: '#666',
fontSize: '16px',
cursor: 'pointer',
}}
onClick={onClose}
>
取消
</button>
<button
style={{
flex: 1,
height: '48px',
border: 'none',
borderRadius: '8px',
backgroundColor: selectedValue ? '#1989fa' : '#ccc',
color: 'white',
fontSize: '16px',
cursor: selectedValue ? 'pointer' : 'not-allowed',
}}
disabled={!selectedValue}
onClick={() => {
if (selectedValue) {
onConfirm(selectedValue);
}
}}
>
确认支付
</button>
</div>
</div>
</div>
);
};
const App = () => {
const [showPayment, setShowPayment] = useState(false);
const [result, setResult] = useState('');
const handleConfirm = (paymentId) => {
const option = {
alipay: '支付宝',
wechat: '微信支付',
unionpay: '银联卡',
credit: '信用卡',
}[paymentId];
setResult(`选择了：${option}`);
setShowPayment(false);
};
return (
<div className="demo-container">
<h1 className="demo-title">支付弹窗组件演示</h1>
<div className="demo-section">
<h3 className="demo-section-title">基础功能</h3>
<button className="demo-button" onClick={() => setShowPayment(true)}>
打开支付弹窗
</button>
{result && (
<div
style={{
padding: '12px',
backgroundColor: '#f0f8ff',
border: '1px solid #1989fa',
borderRadius: '6px',
color: '#1989fa',
fontSize: '14px',
}}
>
{result}
</div>
)}
</div>
<SimplePaymentPopup
visible={showPayment}
onClose={() => setShowPayment(false)}
onConfirm={handleConfirm}
/>
</div>
);
};
// 渲染应用
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);
</script>
</body>
</html>