xuchaoqing
/
fastadmin_tailored


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购买指定商品多选功能测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .demo-container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        .demo-title {
            font-size: 20px;
            color: #333;
            margin-bottom: 20px;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
        }
        
        .demo-section {
            margin-bottom: 25px;
        }
        
        .section-title {
            font-size: 16px;
            color: #555;
            margin-bottom: 15px;
            font-weight: bold;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .label {
            display: inline-block;
            margin-right: 10px;
            font-weight: normal;
        }
        
        .btn {
            display: inline-block;
            padding: 8px 16px;
            background-color: #28a745;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            font-size: 14px;
        }
        
        .btn:hover {
            background-color: #218838;
        }
        
        .btn i {
            margin-right: 5px;
        }
        
        .goods-description-box {
            min-height: 60px;
            padding: 15px;
            border: 1px dashed #ddd;
            border-radius: 4px;
            background-color: #fafafa;
            font-size: 13px;
            line-height: 1.5;
            color: #666;
            margin-top: 15px;
        }
        
        .goods-list-container {
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            background: white;
        }
        
        .goods-list-item {
            display: flex;
            align-items: center;
            padding: 12px;
            border-bottom: 1px solid #f0f0f0;
            background: #fafafa;
        }
        
        .goods-list-item:last-child {
            border-bottom: none;
        }
        
        .goods-image {
            width: 50px;
            height: 50px;
            border-radius: 4px;
            margin-right: 12px;
            flex-shrink: 0;
        }
        
        .goods-info {
            flex: 1;
            margin-right: 12px;
        }
        
        .goods-name {
            font-size: 14px;
            color: #333;
            margin-bottom: 4px;
            line-height: 1.4;
        }
        
        .goods-price {
            font-size: 12px;
            color: #e74c3c;
            font-weight: bold;
            margin-bottom: 2px;
        }
        
        .goods-meta {
            font-size: 11px;
            color: #999;
        }
        
        .goods-actions {
            flex-shrink: 0;
        }
        
        .remove-btn {
            color: #3c8dbc;
            text-decoration: none;
            font-size: 12px;
        }
        
        .remove-btn:hover {
            text-decoration: underline;
        }
        
        .label-tag {
            display: inline-block;
            padding: 2px 6px;
            background: #dc3545;
            color: white;
            font-size: 10px;
            border-radius: 3px;
            margin-right: 6px;
        }
        
        .spec-tag {
            display: inline-block;
            padding: 2px 6px;
            font-size: 10px;
            border-radius: 3px;
            margin-left: 8px;
        }
        
        .spec-single {
            background: #17a2b8;
            color: white;
        }
        
        .spec-multi {
            background: #ffc107;
            color: #333;
        }
        
        .code-block {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 15px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            line-height: 1.4;
            margin-top: 15px;
            overflow-x: auto;
        }
        
        .highlight {
            background: #fff3cd;
            padding: 15px;
            border: 1px solid #ffeaa7;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        
        .highlight h4 {
            margin: 0 0 10px 0;
            color: #856404;
        }
        
        .steps {
            background: #d1ecf1;
            padding: 15px;
            border: 1px solid #bee5eb;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        
        .steps h4 {
            margin: 0 0 10px 0;
            color: #0c5460;
        }
        
        .steps ol {
            margin: 0;
            padding-left: 20px;
        }
        
        .steps li {
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div class="demo-container">
        <div class="demo-title">🛒 购买指定商品多选功能测试</div>
        
        <div class="highlight">
            <h4>✅ 功能更新说明</h4>
            <p>消费抽奖活动中的"购买指定商品"任务现在支持多选模式，用户可以选择多个商品作为参与条件。</p>
        </div>
        
        <div class="steps">
            <h4>🔧 更新内容</h4>
            <ol>
                <li>将"添加商品"按钮的调用从 <code>selectGoods()</code> 改为 <code>selectTaskGoods('#selected-goods')</code></li>
                <li>修改默认的 <code>selectGoods()</code> 函数为多选模式</li>
                <li>确保模板能够正确处理多选商品的表单数据</li>
            </ol>
        </div>
        
        <div class="demo-section">
            <div class="section-title">📝 任务设置界面模拟</div>
            
            <div class="form-group">
                <label class="label"><span style="color: red;">*</span> 选择商品：</label>
                <label style="margin-right: 20px;">
                    <input type="radio" name="goods_select_type" value="include" checked> 指定商品参与
                </label>
                <label>
                    <input type="radio" name="goods_select_type" value="exclude"> 指定商品不可参与
                </label>
            </div>
            
            <div style="margin-bottom: 15px;">
                <button type="button" class="btn" onclick="simulateAddGoods()">
                    <i>+</i> 添加商品
                </button>
            </div>
            
            <div id="selected-goods" class="goods-description-box">
                <span style="color: #999;">该商品下单后将自动触发抽奖活动且发放一次抽奖机会，若用户产生维权退款，已发放的奖励自动回收。</span>
            </div>
        </div>
        
        <div class="demo-section">
            <div class="section-title">🎯 多选商品示例</div>
            <div id="demo-goods-list" class="goods-list-container">
                <!-- 这里将显示模拟的多选商品 -->
            </div>
        </div>
        
        <div class="demo-section">
            <div class="section-title">📊 生成的表单数据</div>
            <div class="code-block" id="form-data">
                <!-- 这里将显示生成的表单字段 -->
            </div>
        </div>
    </div>
    
    <div class="demo-container">
        <div class="demo-title">🔧 技术实现细节</div>
        
        <div class="demo-section">
            <div class="section-title">1. 按钮调用修改</div>
            <div class="code-block">
&lt;!-- 修改前 --&gt;
&lt;button onclick="selectGoods()"&gt;添加商品&lt;/button&gt;

&lt;!-- 修改后 --&gt;
&lt;button onclick="selectTaskGoods('#selected-goods')"&gt;添加商品&lt;/button&gt;
            </div>
        </div>
        
        <div class="demo-section">
            <div class="section-title">2. JavaScript函数配置</div>
            <div class="code-block">
// selectTaskGoods函数配置（多选模式）
selectTaskGoods: function(container) {
    Controller.api.selectGoods({
        mode: 'multiple',           // 多选模式
        title: '选择参与商品',       // 弹窗标题
        container: container || '#task-goods-container',
        template: 'goods-list-template'
    });
}
            </div>
        </div>
        
        <div class="demo-section">
            <div class="section-title">3. 模板智能字段名处理</div>
            <div class="code-block">
&lt;!-- 模板会根据选择数量自动决定字段名 --&gt;
&lt;% if(goods.length === 1) { %&gt;
    &lt;input type="hidden" name="goods_id" value="&lt;%=goods[i].id%&gt;" /&gt;
&lt;% } else { %&gt;
    &lt;input type="hidden" name="task_goods_ids[]" value="&lt;%=goods[i].id%&gt;" /&gt;
&lt;% } %&gt;
            </div>
        </div>
    </div>

    <script>
        // 模拟商品数据
        const mockGoods = [
            {
                id: 1,
                name: "清凉飞行家易打理4代弹力套西",
                image: "https://via.placeholder.com/50x50/007bff/ffffff?text=商品1",
                price: "999.00",
                goods_sn: "G001",
                type_text: "荐",
                spec_type: 1,
                category: { name: "服装" },
                type_name: "普通商品"
            },
            {
                id: 2,
                name: "时尚休闲运动鞋",
                image: "https://via.placeholder.com/50x50/28a745/ffffff?text=商品2",
                price: "299.00",
                goods_sn: "G002",
                type_text: "热",
                spec_type: 0,
                category: { name: "鞋类" },
                type_name: "普通商品"
            },
            {
                id: 3,
                name: "智能手表运动版",
                image: "https://via.placeholder.com/50x50/dc3545/ffffff?text=商品3",
                price: "1299.00",
                goods_sn: "G003",
                type_text: "新",
                spec_type: 1,
                category: { name: "数码" },
                type_name: "虚拟商品"
            }
        ];
        
        let selectedGoods = [];
        
        // 模拟添加商品
        function simulateAddGoods() {
            // 随机选择1-3个商品
            const count = Math.floor(Math.random() * 3) + 1;
            selectedGoods = mockGoods.slice(0, count);
            
            // 更新显示
            updateGoodsDisplay();
            updateFormData();
        }
        
        // 更新商品显示
        function updateGoodsDisplay() {
            const container = document.getElementById('demo-goods-list');
            const descBox = document.getElementById('selected-goods');
            
            if (selectedGoods.length === 0) {
                container.innerHTML = '<div style="padding: 20px; text-align: center; color: #999;">暂无选择商品</div>';
                descBox.innerHTML = '<span style="color: #999;">该商品下单后将自动触发抽奖活动且发放一次抽奖机会，若用户产生维权退款，已发放的奖励自动回收。</span>';
                return;
            }
            
            let html = '';
            selectedGoods.forEach(goods => {
                html += `
                    <div class="goods-list-item" data-id="${goods.id}">
                        <img src="${goods.image}" class="goods-image" alt="${goods.name}">
                        <div class="goods-info">
                            <div class="goods-name">
                                <span class="label-tag">${goods.type_text}</span>
                                ${goods.name}
                            </div>
                            <div class="goods-price">¥${goods.price}</div>
                            <div class="goods-meta">
                                编码: ${goods.goods_sn} | 分类: ${goods.category.name} | 类型: ${goods.type_name}
                                <span class="spec-tag ${goods.spec_type == 0 ? 'spec-single' : 'spec-multi'}">
                                    ${goods.spec_type == 0 ? '单规格' : '多规格'}
                                </span>
                            </div>
                        </div>
                        <div class="goods-actions">
                            <a href="javascript:;" class="remove-btn" onclick="removeGoods(${goods.id})">删除</a>
                        </div>
                    </div>
                `;
            });
            
            container.innerHTML = html;
            
            // 更新描述框
            descBox.innerHTML = `
                <div class="goods-list-container">
                    ${html}
                </div>
            `;
        }
        
        // 删除商品
        function removeGoods(id) {
            selectedGoods = selectedGoods.filter(goods => goods.id != id);
            updateGoodsDisplay();
            updateFormData();
        }
        
        // 更新表单数据显示
        function updateFormData() {
            const container = document.getElementById('form-data');
            
            if (selectedGoods.length === 0) {
                container.innerHTML = '暂无商品选择，不会生成表单字段';
                return;
            }
            
            let html = '';
            
            if (selectedGoods.length === 1) {
                // 单选模式
                html = `&lt;!-- 单选模式：只选择了 1 个商品 --&gt;\n&lt;input type="hidden" name="goods_id" value="${selectedGoods[0].id}" /&gt;`;
            } else {
                // 多选模式
                html = '&lt;!-- 多选模式：选择了 ' + selectedGoods.length + ' 个商品 --&gt;\n';
                selectedGoods.forEach(goods => {
                    html += `&lt;input type="hidden" name="task_goods_ids[]" value="${goods.id}" /&gt;\n`;
                });
            }
            
            container.innerHTML = html;
        }
        
        // 初始化显示
        updateGoodsDisplay();
        updateFormData();
    </script>
</body>
</html>