xuchaoqing
/
fastadmin_tailored


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品选择功能测试示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
        }
        .demo-section {
            margin: 30px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .demo-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }
        .demo-button {
            background: #5cb85c;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .demo-button:hover {
            background: #449d44;
        }
        .demo-button.primary {
            background: #337ab7;
        }
        .demo-button.primary:hover {
            background: #286090;
        }
        .demo-button.warning {
            background: #f0ad4e;
        }
        .demo-button.warning:hover {
            background: #ec971f;
        }
        .code-block {
            background: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin: 10px 0;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            overflow-x: auto;
        }
        .selected-goods {
            background: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin: 10px 0;
            min-height: 50px;
        }
        .feature-list {
            list-style-type: none;
            padding: 0;
        }
        .feature-list li {
            padding: 5px 0;
            border-bottom: 1px solid #eee;
        }
        .feature-list li:before {
            content: "✓ ";
            color: #5cb85c;
            font-weight: bold;
        }
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }
        .comparison-table th, .comparison-table td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        .comparison-table th {
            background: #f5f5f5;
            font-weight: bold;
        }
        .highlight {
            background: #ffffcc;
            padding: 2px 4px;
            border-radius: 2px;
        }
    </style>
</head>
<body>
    <h1>商品选择功能测试示例</h1>
    
    <div class="demo-section">
        <div class="demo-title">功能概述</div>
        <p>新的商品选择功能完全通过操作列的选择按钮来实现单选和多选，提供更直观的用户体验。</p>
        
        <h3>主要特性：</h3>
        <ul class="feature-list">
            <li>去除了传统的checkbox/radio选择方式</li>
            <li>通过操作列的按钮实现选择功能</li>
            <li>单选模式：蓝色按钮，点击即选择并关闭</li>
            <li>多选模式：绿色/红色按钮，支持多次选择</li>
            <li>支持最大选择数量限制</li>
            <li>状态在搜索、分页后保持不变</li>
        </ul>
    </div>

    <div class="demo-section">
        <div class="demo-title">单选模式 vs 多选模式对比</div>
        
        <table class="comparison-table">
            <thead>
                <tr>
                    <th>特性</th>
                    <th>单选模式</th>
                    <th>多选模式</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>按钮颜色</td>
                    <td><span class="highlight">蓝色</span></td>
                    <td><span class="highlight">绿色（未选）/ 红色（已选）</span></td>
                </tr>
                <tr>
                    <td>按钮图标</td>
                    <td>✓ 选择</td>
                    <td>+ 选择 / - 取消选择</td>
                </tr>
                <tr>
                    <td>操作方式</td>
                    <td>点击直接完成选择</td>
                    <td>点击切换选择状态</td>
                </tr>
                <tr>
                    <td>确认按钮</td>
                    <td>隐藏（不需要）</td>
                    <td>显示（需要确认）</td>
                </tr>
                <tr>
                    <td>数量限制</td>
                    <td>固定1个</td>
                    <td>可配置最大数量</td>
                </tr>
                <tr>
                    <td>适用场景</td>
                    <td>奖品选择等</td>
                    <td>活动商品、优惠券商品等</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="demo-section">
        <div class="demo-title">1. 单选模式示例</div>
        <p>适用于奖品选择等只需选择一个商品的场景。</p>
        
        <button class="demo-button primary" onclick="openSingleSelect()">
            打开单选模式 (奖品选择)
        </button>
        
        <div class="code-block">
// JavaScript 调用代码
Fast.api.open('shop/goods/select?selectMode=single', '选择奖品', {
    callback: function(data) {
        if (data.length > 0) {
            var goods = data[0];
            console.log('选中的奖品:', goods);
            // 处理选中的奖品
        }
    }
});
        </div>
        
        <div class="selected-goods" id="single-result">
            选择结果将显示在这里...
        </div>
    </div>

    <div class="demo-section">
        <div class="demo-title">2. 多选模式示例</div>
        <p>适用于营销活动参与商品、优惠券适用商品等需要选择多个商品的场景。</p>
        
        <button class="demo-button" onclick="openMultiSelect()">
            打开多选模式 (无限制)
        </button>
        
        <button class="demo-button warning" onclick="openMultiSelectWithLimit()">
            打开多选模式 (最多3个)
        </button>
        
        <div class="code-block">
// 多选模式（无限制）
Fast.api.open('shop/goods/select?selectMode=multiple', '选择商品', {
    callback: function(data) {
        console.log('选中的商品列表:', data);
    }
});

// 多选模式（最多3个）
Fast.api.open('shop/goods/select?selectMode=multiple&maxSelect=3', '选择商品（最多3个）', {
    callback: function(data) {
        console.log('选中的商品列表:', data);
    }
});
        </div>
        
        <div class="selected-goods" id="multi-result">
            选择结果将显示在这里...
        </div>
    </div>

    <div class="demo-section">
        <div class="demo-title">3. 使用封装方法</div>
        <p>在activity.js中提供了封装好的方法，可以直接调用。</p>
        
        <div class="code-block">
// 奖品商品选择（单选）
Controller.api.selectPrizeGoods('#prize-goods-container');

// 任务商品选择（多选）
Controller.api.selectTaskGoods('#task-goods-container');

// 通用商品选择
Controller.api.selectGoods({
    mode: 'single',           // 'single' 或 'multiple'
    title: '选择商品',
    container: '#selected-goods',
    maxSelect: 0,             // 最大选择数量，0表示无限制
    callback: function(data) {
        // 处理选中的商品
    }
});
        </div>
    </div>

    <div class="demo-section">
        <div class="demo-title">界面特性说明</div>
        
        <h3>选择模式提示</h3>
        <ul>
            <li><strong>单选模式</strong>：页面顶部显示"单击任意商品的'选择'按钮即可完成选择"</li>
            <li><strong>多选模式</strong>：页面顶部显示"点击商品的'选择'按钮添加到选择列表，绿色表示可选择，红色表示已选择"</li>
        </ul>
        
        <h3>按钮状态</h3>
        <ul>
            <li><strong>单选按钮</strong>：蓝色背景，白色文字，带勾选图标</li>
            <li><strong>多选按钮（未选择）</strong>：绿色背景，白色文字，带加号图标</li>
            <li><strong>多选按钮（已选择）</strong>：红色背景，白色文字，带减号图标</li>
            <li><strong>禁用状态</strong>：半透明显示，无法点击</li>
        </ul>
        
        <h3>确认按钮</h3>
        <ul>
            <li><strong>单选模式</strong>：隐藏确认按钮，点击选择按钮直接完成选择</li>
            <li><strong>多选模式</strong>：显示确认按钮，显示已选择数量，如"确认选择 (3)"</li>
        </ul>
    </div>

    <script>
        // 模拟选择器函数（实际环境中这些由FastAdmin提供）
        function openSingleSelect() {
            document.getElementById('single-result').innerHTML = 
                '<div style="color: #337ab7;"><strong>模拟选择结果：</strong><br>' +
                '商品名称: 热卖厨邦酱油410ml特级生抽黄豆造美味鲜酱油<br>' +
                '商品ID: 40<br>' +
                '价格: ¥7.00<br>' +
                '<em>实际使用时，单选模式点击选择按钮会直接关闭弹窗并返回选中商品。</em></div>';
        }
        
        function openMultiSelect() {
            document.getElementById('multi-result').innerHTML = 
                '<div style="color: #5cb85c;"><strong>模拟选择结果：</strong><br>' +
                '已选择 2 个商品：<br>' +
                '1. 热卖厨邦酱油410ml特级生抽黄豆造美味鲜酱油 (¥7.00)<br>' +
                '2. 虚州卡密 (¥111.00)<br>' +
                '<em>实际使用时，多选模式可以选择多个商品，点击确认按钮完成选择。</em></div>';
        }
        
        function openMultiSelectWithLimit() {
            document.getElementById('multi-result').innerHTML = 
                '<div style="color: #f0ad4e;"><strong>模拟选择结果（限制3个）：</strong><br>' +
                '已选择 3 个商品：<br>' +
                '1. 热卖厨邦酱油410ml特级生抽黄豆造美味鲜酱油 (¥7.00)<br>' +
                '2. 虚州卡密 (¥111.00)<br>' +
                '3. 打底裤 (¥89.00)<br>' +
                '<em>已达到最大选择数量，其他商品的选择按钮将被禁用。</em></div>';
        }
    </script>
</body>
</html>