123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387 |
- <!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: "Microsoft YaHei", Arial, sans-serif;
- margin: 20px;
- background-color: #f5f5f5;
- }
- .container {
- max-width: 1200px;
- margin: 0 auto;
- background: white;
- padding: 20px;
- border-radius: 8px;
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
- }
- .header {
- text-align: center;
- margin-bottom: 30px;
- padding-bottom: 20px;
- border-bottom: 2px solid #3c8dbc;
- }
- .header h1 {
- color: #333;
- margin-bottom: 10px;
- }
- .header p {
- color: #666;
- font-size: 14px;
- }
- .demo-section {
- margin-bottom: 30px;
- padding: 20px;
- border: 1px solid #e5e5e5;
- border-radius: 5px;
- background-color: #fafafa;
- }
- .demo-section h3 {
- color: #3c8dbc;
- margin-top: 0;
- margin-bottom: 15px;
- font-size: 18px;
- }
- .demo-section p {
- color: #666;
- margin-bottom: 15px;
- line-height: 1.6;
- }
- .demo-buttons {
- margin-bottom: 15px;
- }
- .demo-button {
- display: inline-block;
- padding: 8px 16px;
- margin: 5px 10px 5px 0;
- background-color: #3c8dbc;
- color: white;
- text-decoration: none;
- border-radius: 4px;
- border: none;
- cursor: pointer;
- font-size: 14px;
- transition: background-color 0.3s;
- }
- .demo-button:hover {
- background-color: #2980b9;
- color: white;
- text-decoration: none;
- }
- .demo-button.secondary {
- background-color: #5cb85c;
- }
- .demo-button.secondary:hover {
- background-color: #449d44;
- }
- .demo-button.warning {
- background-color: #f0ad4e;
- }
- .demo-button.warning:hover {
- background-color: #ec971f;
- }
- .code-section {
- background-color: #f8f8f8;
- border: 1px solid #e5e5e5;
- border-radius: 4px;
- padding: 15px;
- margin-top: 10px;
- }
- .code-section h4 {
- color: #333;
- margin-top: 0;
- margin-bottom: 10px;
- font-size: 14px;
- }
- .code-section code {
- background-color: #f5f5f5;
- padding: 2px 4px;
- border-radius: 3px;
- font-family: "Courier New", monospace;
- font-size: 13px;
- }
- .code-section pre {
- background-color: #2d3748;
- color: #e2e8f0;
- padding: 15px;
- border-radius: 4px;
- overflow-x: auto;
- margin: 10px 0;
- font-family: "Courier New", monospace;
- font-size: 13px;
- line-height: 1.4;
- }
- .feature-list {
- list-style: none;
- padding: 0;
- }
- .feature-list li {
- padding: 8px 0;
- border-bottom: 1px solid #e5e5e5;
- position: relative;
- padding-left: 25px;
- }
- .feature-list li:before {
- content: "✓";
- position: absolute;
- left: 0;
- color: #5cb85c;
- font-weight: bold;
- }
- .feature-list li:last-child {
- border-bottom: none;
- }
- .alert {
- padding: 15px;
- margin-bottom: 20px;
- border: 1px solid transparent;
- border-radius: 4px;
- }
- .alert-info {
- color: #31708f;
- background-color: #d9edf7;
- border-color: #bce8f1;
- }
- .alert-success {
- color: #3c763d;
- background-color: #dff0d8;
- border-color: #d6e9c6;
- }
- table {
- width: 100%;
- border-collapse: collapse;
- margin-top: 15px;
- }
- table th,
- table td {
- border: 1px solid #ddd;
- padding: 8px;
- text-align: left;
- }
- table th {
- background-color: #f2f2f2;
- font-weight: bold;
- }
- table tr:nth-child(even) {
- background-color: #f9f9f9;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="header">
- <h1>优惠券选择功能测试示例</h1>
- <p>演示优惠券选择功能的不同调用模式和参数配置</p>
- </div>
- <div class="alert alert-info">
- <strong>说明:</strong>此页面为功能演示,实际使用时需要在FastAdmin后台环境中调用相应的API接口。
- </div>
- <!-- 单选模式 -->
- <div class="demo-section">
- <h3>1. 单选模式(默认模式)</h3>
- <p>单选模式下,用户点击优惠券行的"选择"按钮即可直接选择该优惠券并关闭弹窗。这是优惠券选择的默认模式。</p>
-
- <div class="demo-buttons">
- <button class="demo-button" onclick="simulateCall('single1')">基础单选</button>
- <button class="demo-button" onclick="simulateCall('single2')">指定单选模式</button>
- </div>
- <div class="code-section">
- <h4>调用代码:</h4>
- <pre>// 基础单选(默认)
- Fast.api.open('shop/coupon/select', '选择优惠券');
- // 明确指定单选模式
- Fast.api.open('shop/coupon/select?selectMode=single', '选择优惠券');</pre>
- </div>
- <ul class="feature-list">
- <li>点击"选择"按钮直接完成选择</li>
- <li>不显示确认按钮</li>
- <li>按钮颜色为蓝色</li>
- <li>自动检查优惠券状态(过期/停用的优惠券不可选)</li>
- </ul>
- </div>
- <!-- 多选模式 -->
- <div class="demo-section">
- <h3>2. 多选模式</h3>
- <p>多选模式下,用户可以选择多个优惠券,绿色按钮表示可选择,红色按钮表示已选择,最后需要点击"确认选择"按钮完成操作。</p>
-
- <div class="demo-buttons">
- <button class="demo-button secondary" onclick="simulateCall('multiple1')">基础多选</button>
- <button class="demo-button secondary" onclick="simulateCall('multiple2')">限制3个</button>
- <button class="demo-button secondary" onclick="simulateCall('multiple3')">限制5个</button>
- </div>
- <div class="code-section">
- <h4>调用代码:</h4>
- <pre>// 基础多选(无数量限制)
- Fast.api.open('shop/coupon/select?selectMode=multiple', '选择优惠券');
- // 限制最多选择3个
- Fast.api.open('shop/coupon/select?selectMode=multiple&maxSelect=3', '选择优惠券');
- // 限制最多选择5个
- Fast.api.open('shop/coupon/select?selectMode=multiple&maxSelect=5', '选择优惠券');</pre>
- </div>
- <ul class="feature-list">
- <li>绿色按钮表示可选择,红色按钮表示已选择</li>
- <li>显示确认按钮和选择数量</li>
- <li>支持最大选择数量限制</li>
- <li>达到限制后其他选择按钮自动禁用</li>
- <li>支持状态恢复(刷新后保持选择状态)</li>
- </ul>
- </div>
- <!-- 优惠券状态检查 -->
- <div class="demo-section">
- <h3>3. 优惠券状态检查</h3>
- <p>系统自动检查优惠券的可用状态,不可用的优惠券将显示为灰色按钮且不能点击。</p>
-
- <div class="alert alert-success">
- <strong>状态检查规则:</strong><br>
- • <code>expired = true</code> - 优惠券已过期<br>
- • <code>is_open != 1</code> - 优惠券已停用
- </div>
- <table>
- <thead>
- <tr>
- <th>优惠券状态</th>
- <th>按钮颜色</th>
- <th>是否可选</th>
- <th>提示信息</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>正常(未过期且开启)</td>
- <td>蓝色(单选)/ 绿色(多选)</td>
- <td>✓ 可选</td>
- <td>点击选择该优惠券</td>
- </tr>
- <tr>
- <td>已过期</td>
- <td>灰色</td>
- <td>✗ 不可选</td>
- <td>优惠券不可用</td>
- </tr>
- <tr>
- <td>已停用</td>
- <td>灰色</td>
- <td>✗ 不可选</td>
- <td>优惠券不可用</td>
- </tr>
- </tbody>
- </table>
- </div>
- <!-- 显示信息 -->
- <div class="demo-section">
- <h3>4. 优惠券信息显示</h3>
- <p>优惠券选择界面显示完整的优惠券信息,便于用户做出准确的选择。</p>
-
- <table>
- <thead>
- <tr>
- <th>显示列</th>
- <th>内容说明</th>
- <th>示例</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>优惠券信息</td>
- <td>名称、使用条件、时间信息</td>
- <td>新用户专享券<br>满100元,减20元<br>领取: 2024-01-01 | 使用: 30天</td>
- </tr>
- <tr>
- <td>使用条件</td>
- <td>使用条件描述</td>
- <td>新用户专享</td>
- </tr>
- <tr>
- <td>发放/已领</td>
- <td>发放数量和已领取数量</td>
- <td>发放: 1000<br>已领: 256</td>
- </tr>
- <tr>
- <td>状态</td>
- <td>优惠券当前状态</td>
- <td>正常 / 已过期 / 停用</td>
- </tr>
- <tr>
- <td>选择</td>
- <td>选择操作按钮</td>
- <td>选择 / 操作</td>
- </tr>
- </tbody>
- </table>
- </div>
- <!-- 回调数据格式 -->
- <div class="demo-section">
- <h3>5. 回调数据格式</h3>
- <p>选择完成后,回调函数会返回选中的优惠券数据数组。</p>
-
- <div class="code-section">
- <h4>回调函数示例:</h4>
- <pre>Fast.api.open('shop/coupon/select?selectMode=multiple', '选择优惠券', {
- callback: function(data) {
- console.log('选中的优惠券:', data);
- // data是数组,包含选中的优惠券对象
- data.forEach(function(coupon) {
- console.log('优惠券ID:', coupon.id);
- console.log('优惠券名称:', coupon.name);
- console.log('使用条件:', coupon.condition_name);
- console.log('结果数据:', coupon.result_data);
- });
- }
- });</pre>
- </div>
- <div class="code-section">
- <h4>优惠券对象结构:</h4>
- <pre>{
- "id": 1,
- "name": "新用户专享券",
- "condition_name": "新用户专享",
- "result": 1,
- "result_data": {
- "money": "100.00",
- "number": "20.00"
- },
- "give_num": 1000,
- "received_num": 256,
- "is_open": 1,
- "expired": false,
- "receive_times": "2024-01-01 - 2024-12-31",
- "use_times": "30",
- "mode": "fixation"
- }</pre>
- </div>
- </div>
- </div>
- <script>
- function simulateCall(type) {
- var calls = {
- 'single1': "Fast.api.open('shop/coupon/select', '选择优惠券');",
- 'single2': "Fast.api.open('shop/coupon/select?selectMode=single', '选择优惠券');",
- 'multiple1': "Fast.api.open('shop/coupon/select?selectMode=multiple', '选择优惠券');",
- 'multiple2': "Fast.api.open('shop/coupon/select?selectMode=multiple&maxSelect=3', '选择优惠券');",
- 'multiple3': "Fast.api.open('shop/coupon/select?selectMode=multiple&maxSelect=5', '选择优惠券');"
- };
-
- alert('模拟调用:\n\n' + calls[type] + '\n\n实际使用时需要在FastAdmin后台环境中调用。');
- }
- </script>
- </body>
- </html>
|