mr-component
Version:
A library for Mr components
396 lines (374 loc) • 12.4 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MrPaymentPopup 测试</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.test-container {
max-width: 400px;
margin: 0 auto;
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.test-button {
background: #2c64e3;
color: white;
border: none;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
margin: 10px 5px;
}
.test-button:hover {
background: #1e4bb8;
}
.test-section {
margin: 20px 0;
padding: 15px;
border: 1px solid #e0e0e0;
border-radius: 6px;
}
.test-section h3 {
margin-top: 0;
color: #333;
}
</style>
</head>
<body>
<div class="test-container">
<h1>MrPaymentPopup 组件测试</h1>
<div class="test-section">
<h3>基础功能测试</h3>
<button class="test-button" onclick="showBasicPopup()">显示基础弹窗</button>
<button class="test-button" onclick="showWithBalance()">显示余额信息</button>
<button class="test-button" onclick="showWithFee()">显示手续费</button>
</div>
<div class="test-section">
<h3>图标测试</h3>
<button class="test-button" onclick="showWithEmojiIcon()">Emoji图标</button>
<button class="test-button" onclick="showWithImageIcon()">图片图标</button>
<button class="test-button" onclick="showWithReactIcon()">React组件图标</button>
</div>
<div class="test-section">
<h3>完整功能测试</h3>
<button class="test-button" onclick="showFullPopup()">完整弹窗</button>
</div>
</div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-vant@4.0.0/dist/index.js"></script>
<script src="https://unpkg.com/mr-component@0.0.14/build/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/mr-component@0.0.14/build/index.css" />
<script>
// 等待所有资源加载完成
window.addEventListener('load', function () {
// 检查组件是否可用
if (typeof window.MrComponent === 'undefined') {
console.error('MrComponent 未加载，请检查网络连接');
document.body.innerHTML =
'<div style="padding: 20px; color: red;">❌ MrComponent 组件加载失败，请检查网络连接</div>';
return;
}
const { MrPaymentPopup } = window.MrComponent;
const { createRoot } = ReactDOM;
if (!MrPaymentPopup) {
console.error('MrPaymentPopup 组件未找到');
document.body.innerHTML =
'<div style="padding: 20px; color: red;">❌ MrPaymentPopup 组件未找到</div>';
return;
}
console.log('✅ MrPaymentPopup 组件加载成功');
// 创建根容器
const container = document.createElement('div');
container.id = 'mr-payment-popup-root';
document.body.appendChild(container);
const root = createRoot(container);
let currentPopup = null;
function renderPopup(props) {
try {
root.render(
React.createElement(MrPaymentPopup, {
...props,
onClose: () => {
root.render(null);
currentPopup = null;
},
onConfirm: (value, option) => {
console.log('确认选择:', value, option);
alert(`选择了: ${option?.name || value}`);
root.render(null);
currentPopup = null;
},
onChange: (value, option) => {
console.log('选择变化:', value, option);
},
}),
);
} catch (error) {
console.error('渲染弹窗失败:', error);
alert('渲染弹窗失败: ' + error.message);
}
}
// 将函数绑定到全局作用域
window.showBasicPopup = function () {
const props = {
visible: true,
title: '选择支付方式',
options: [
{
id: '1',
name: '支付宝',
balance: '1000.00',
currency: 'CNY',
fee: '0.00',
extra: '即时到账',
},
{
id: '2',
name: '微信支付',
balance: '500.00',
currency: 'CNY',
fee: '0.00',
extra: '即时到账',
},
],
showBalance: true,
showFee: true,
confirmButtonText: '确认支付',
};
renderPopup(props);
};
window.showWithBalance = function () {
const props = {
visible: true,
title: '选择支付方式',
options: [
{
id: '1',
name: '银行卡',
balance: '5000.00',
currency: 'CNY',
fee: '2.00',
extra: '2-3个工作日',
},
],
showBalance: true,
showFee: true,
confirmButtonText: '确认支付',
};
renderPopup(props);
};
window.showWithFee = function () {
const props = {
visible: true,
title: '选择支付方式',
options: [
{
id: '1',
name: '信用卡',
balance: '10000.00',
currency: 'CNY',
fee: '5.00',
extra: '1-2个工作日',
},
],
showBalance: true,
showFee: true,
confirmButtonText: '确认支付',
};
renderPopup(props);
};
window.showWithEmojiIcon = function () {
const props = {
visible: true,
title: '选择支付方式',
options: [
{
id: '1',
name: '支付宝',
icon: '💰',
balance: '1000.00',
currency: 'CNY',
fee: '0.00',
},
{
id: '2',
name: '微信支付',
icon: '💳',
balance: '500.00',
currency: 'CNY',
fee: '0.00',
},
],
showBalance: true,
showFee: true,
confirmButtonText: '确认支付',
};
renderPopup(props);
};
window.showWithImageIcon = function () {
const props = {
visible: true,
title: '选择支付方式',
options: [
{
id: '1',
name: '支付宝',
icon: 'https://img.alicdn.com/tfs/TB1Zv8_lxSYBuNjSspjXXX73VXa-390-63.png',
balance: '1000.00',
currency: 'CNY',
fee: '0.00',
},
{
id: '2',
name: '微信支付',
icon: 'https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png',
balance: '500.00',
currency: 'CNY',
fee: '0.00',
},
{
id: '3',
name: '银行卡',
icon: 'https://img.alicdn.com/tfs/TB1Ly5oS3HqK1RjSZFPXXcwapXa-238-54.png',
balance: '2000.00',
currency: 'CNY',
fee: '2.00',
},
],
showBalance: true,
showFee: true,
confirmButtonText: '确认支付',
};
renderPopup(props);
};
window.showWithReactIcon = function () {
const WalletIcon = () =>
React.createElement(
'div',
{
style: {
width: '24px',
height: '24px',
backgroundColor: '#4CAF50',
borderRadius: '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
fontSize: '12px',
fontWeight: 'bold',
},
},
'W',
);
const BankIcon = () =>
React.createElement(
'div',
{
style: {
width: '24px',
height: '24px',
backgroundColor: '#2196F3',
borderRadius: '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
fontSize: '12px',
fontWeight: 'bold',
},
},
'B',
);
const props = {
visible: true,
title: '选择支付方式',
options: [
{
id: '1',
name: '钱包',
icon: React.createElement(WalletIcon),
balance: '1000.00',
currency: 'CNY',
fee: '0.00',
},
{
id: '2',
name: '银行账户',
icon: React.createElement(BankIcon),
balance: '5000.00',
currency: 'CNY',
fee: '2.00',
},
],
showBalance: true,
showFee: true,
confirmButtonText: '确认支付',
};
renderPopup(props);
};
window.showFullPopup = function () {
const props = {
visible: true,
title: '选择支付方式',
options: [
{
id: '1',
name: '支付宝',
icon: 'https://img.alicdn.com/tfs/TB1Zv8_lxSYBuNjSspjXXX73VXa-390-63.png',
balance: '1000.00',
currency: 'CNY',
fee: '0.00',
extra: '即时到账',
},
{
id: '2',
name: '微信支付',
icon: 'https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png',
balance: '500.00',
currency: 'CNY',
fee: '0.00',
extra: '即时到账',
},
{
id: '3',
name: '银行卡',
icon: 'https://img.alicdn.com/tfs/TB1Ly5oS3HqK1RjSZFPXXcwapXa-238-54.png',
balance: '2000.00',
currency: 'CNY',
fee: '2.00',
extra: '2-3个工作日',
},
],
showBalance: true,
showFee: true,
allowAddCard: true,
addCardText: '添加新卡片',
confirmButtonText: '确认支付',
};
renderPopup(props);
};
console.log('✅ 所有测试函数已准备就绪');
console.log('可用的测试功能:');
console.log('- showBasicPopup(): 基础功能测试');
console.log('- showWithBalance(): 显示余额信息');
console.log('- showWithFee(): 显示手续费');
console.log('- showWithEmojiIcon(): Emoji图标测试');
console.log('- showWithImageIcon(): 图片图标测试');
console.log('- showWithReactIcon(): React组件图标测试');
console.log('- showFullPopup(): 完整功能测试');
});
</script>
</body>
</html>