mr-component
Version:
A library for Mr components
499 lines (451 loc) • 14.7 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;
}
.status {
margin: 10px 0;
padding: 10px;
border-radius: 4px;
font-size: 14px;
}
.status.success {
background: #f6ffed;
border: 1px solid #b7eb8f;
color: #52c41a;
}
.status.error {
background: #fff2f0;
border: 1px solid #ffccc7;
color: #ff4d4f;
}
</style>
</head>
<body>
<div class="test-container">
<h1>MrPaymentPopup 本地测试</h1>
<div id="status" class="status" style="display: none"></div>
<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="../dist/VantComponents.js"></script>
<link rel="stylesheet" href="../dist/VantComponents.css" />
<script>
function showStatus(message, type = 'success') {
const statusDiv = document.getElementById('status');
statusDiv.textContent = message;
statusDiv.className = `status ${type}`;
statusDiv.style.display = 'block';
}
// 检查组件是否可用
function checkComponent() {
if (typeof VantComponents === 'undefined') {
showStatus('❌ VantComponents 未加载，请先运行 npm run build', 'error');
return false;
}
if (!VantComponents.MrPaymentPopup) {
showStatus('❌ MrPaymentPopup 组件未找到', 'error');
return false;
}
showStatus('✅ MrPaymentPopup 组件加载成功', 'success');
return true;
}
// 页面加载完成后检查
window.addEventListener('load', function () {
setTimeout(checkComponent, 1000); // 延迟1秒检查，确保文件加载完成
});
// 测试函数
function showBasicPopup() {
if (!checkComponent()) return;
const { MrPaymentPopup } = VantComponents;
const { createRoot } = ReactDOM;
const container = document.createElement('div');
container.id = 'popup-container';
document.body.appendChild(container);
const root = createRoot(container);
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: '确认支付',
onClose: () => {
root.render(null);
document.body.removeChild(container);
},
onConfirm: (value, option) => {
alert(`选择了: ${option?.name || value}`);
root.render(null);
document.body.removeChild(container);
},
};
root.render(React.createElement(MrPaymentPopup, props));
}
function showWithBalance() {
if (!checkComponent()) return;
const { MrPaymentPopup } = VantComponents;
const { createRoot } = ReactDOM;
const container = document.createElement('div');
container.id = 'popup-container';
document.body.appendChild(container);
const root = createRoot(container);
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: '确认支付',
onClose: () => {
root.render(null);
document.body.removeChild(container);
},
onConfirm: (value, option) => {
alert(`选择了: ${option?.name || value}`);
root.render(null);
document.body.removeChild(container);
},
};
root.render(React.createElement(MrPaymentPopup, props));
}
function showWithFee() {
if (!checkComponent()) return;
const { MrPaymentPopup } = VantComponents;
const { createRoot } = ReactDOM;
const container = document.createElement('div');
container.id = 'popup-container';
document.body.appendChild(container);
const root = createRoot(container);
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: '确认支付',
onClose: () => {
root.render(null);
document.body.removeChild(container);
},
onConfirm: (value, option) => {
alert(`选择了: ${option?.name || value}`);
root.render(null);
document.body.removeChild(container);
},
};
root.render(React.createElement(MrPaymentPopup, props));
}
function showWithEmojiIcon() {
if (!checkComponent()) return;
const { MrPaymentPopup } = VantComponents;
const { createRoot } = ReactDOM;
const container = document.createElement('div');
container.id = 'popup-container';
document.body.appendChild(container);
const root = createRoot(container);
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: '确认支付',
onClose: () => {
root.render(null);
document.body.removeChild(container);
},
onConfirm: (value, option) => {
alert(`选择了: ${option?.name || value}`);
root.render(null);
document.body.removeChild(container);
},
};
root.render(React.createElement(MrPaymentPopup, props));
}
function showWithImageIcon() {
if (!checkComponent()) return;
const { MrPaymentPopup } = VantComponents;
const { createRoot } = ReactDOM;
const container = document.createElement('div');
container.id = 'popup-container';
document.body.appendChild(container);
const root = createRoot(container);
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',
},
],
showBalance: true,
showFee: true,
confirmButtonText: '确认支付',
onClose: () => {
root.render(null);
document.body.removeChild(container);
},
onConfirm: (value, option) => {
alert(`选择了: ${option?.name || value}`);
root.render(null);
document.body.removeChild(container);
},
};
root.render(React.createElement(MrPaymentPopup, props));
}
function showWithReactIcon() {
if (!checkComponent()) return;
const { MrPaymentPopup } = VantComponents;
const { createRoot } = ReactDOM;
const container = document.createElement('div');
container.id = 'popup-container';
document.body.appendChild(container);
const root = createRoot(container);
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: '确认支付',
onClose: () => {
root.render(null);
document.body.removeChild(container);
},
onConfirm: (value, option) => {
alert(`选择了: ${option?.name || value}`);
root.render(null);
document.body.removeChild(container);
},
};
root.render(React.createElement(MrPaymentPopup, props));
}
function showFullPopup() {
if (!checkComponent()) return;
const { MrPaymentPopup } = VantComponents;
const { createRoot } = ReactDOM;
const container = document.createElement('div');
container.id = 'popup-container';
document.body.appendChild(container);
const root = createRoot(container);
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: '即时到账',
},
],
showBalance: true,
showFee: true,
allowAddCard: true,
addCardText: '添加新卡片',
confirmButtonText: '确认支付',
onClose: () => {
root.render(null);
document.body.removeChild(container);
},
onConfirm: (value, option) => {
alert(`选择了: ${option?.name || value}`);
root.render(null);
document.body.removeChild(container);
},
onAddCard: () => {
alert('点击了添加新卡片');
},
};
root.render(React.createElement(MrPaymentPopup, props));
}
</script>
</body>
</html>