首页 » 微信公众平台开发:从零基础到ThinkPHP5高性能框架实践 » 微信公众平台开发:从零基础到ThinkPHP5高性能框架实践全文在线阅读

《微信公众平台开发:从零基础到ThinkPHP5高性能框架实践》24.4.1 前端设计与实现

关灯直达底部

预约订单开发主要分为两个部分,一是用户填写的表单,二是信息的确认页面。

用户填写表单的页面是第一个Web页面,在该Web页面上方可以放置公司的Logo或者宣传图片,相关代码实现如下。


1     <p>2       <p>3         <p >4           <ul><img src="img/logo.png"              >5           </ul>6         </p>7       </p>8       <p></p>9     </p>  

下方放置页面功能介绍及订单填写表单,其中页面介绍相关代码如下。


1       <ul>2         <li>3           <h2>预约口腔医生</h2>4           <p>5             长沙市XX口腔竭诚为您服务<br/>6           联系电话:0731-7654321</p>7         </li>8       </ul>  

最后需要让用户填写表单,并将表单信息通过POST提交给submit.php文件。其相关代码实现如下。


 1   <form method="post" action="submit.php" onsubmit="return tgSubmit"> 2     <ul> 3       <li><span>请填写以下信息</span></li> 4       <li> 5         <table  border="0" cellspacing="0" cellpadding="0"> 6           <tbody> 7             <tr> 8               <th>姓名</th> 9               <td><input type="text" placeholder="请输入姓名"                  name="name" >10               </td>11             </tr>12           </tbody>13         </table>14       </li>15       <li>16         <table  border="0" cellspacing="0" cellpadding="0">17           <tbody>18             <tr>19               <th>性别</th>20               <td><select  name="sex" class=                 "dropdown-select"><option  selected="">请选择性别</option>                     <option >男</option><option >女</option></select>21               </td>22             </tr>23           </tbody>24         </table>25       </li>26       <li>27         <table  border="0" cellspacing="0" cellpadding="0">28           <tbody>29             <tr>30               <th>年龄</th>31               <td><input type="text" placeholder="请输入年龄"                  name="age" >32               </td>33             </tr>34           </tbody>35         </table>36       </li>37       <li>38         <table  border="0" cellspacing="0" cellpadding="0">39           <tbody>40             <tr>41               <th>手机</th>42               <td><input type="text" placeholder="请输入手机"                  name="mobile" >43               </td>44             </tr>45           </tbody>46         </table>47       </li>48       <li>49         <table  border="0" cellspacing="0" cellpadding="0">50           <tbody>51             <tr>52               <th>预约日期</th>53               <td>54                 <select  name="bookdate"                   >55                   <option  selected="">请选择预约日期</option>56                   <?php57                   for ($i = 1; $i <= 6; $i++) {58                     $offset = strtotime("+".($i-1)." day");59                     $bDate = date("m月d日",$offset);60                     $optionString .= '<option >'.$bDate.'</option>';61                   }62                   echo $optionString;63                   ?>64                 </select>65               </td>66             </tr>67           </tbody>68         </table>69       </li>70       <li>71         <table  border="0" cellspacing="0" cellpadding="0">72           <tbody>73             <tr>74               <th>预约专家</th>75               <td><select  name="bookexpert"                 ><option  selected="">请选择预约专家                 </option><option >陈艳</option><option >                 杨广胜</option><option >周平</option></select>76               </td>77             </tr>78           </tbody>79         </table>80       </li>81     </ul>82 83     <p >84       <input type="hidden" name="openid" >85       <input type="submit"               >86     </p>87   </form>  

在上述代码中,定义了一个form表单,设置了“姓名”“性别”“年龄”“手机”“预约日期”“预约专家”等选项。其中,“姓名”“年龄”“手机”由用户自己填写,“性别”“预约专家”由程序指定选择列表供用户选择,“预约日期”则由PHP程序生成未来6天的日期。在提交的表单信息中,还将用户的微信ID隐藏起来一起提交(第84行)。

对这些表单选项还需要使用JavaScript来校验用户是否正确输入,并在错误输入时显示提示语,其相关代码如下。


 1   <script> 2     function showTip(tipTxt) { 3       var p = document.createElement('p'); 4       p.innerHTML = '<p><p>' + tipTxt + '</p></p>'; 5       var tipNode = p.firstChild; 6       $("#wrap").after(tipNode); 7       setTimeout(function  { 8         $(tipNode).remove; 9       }, 1500);10     }11     function tgSubmit{12       var name=$("#name").val;13       if($.trim(name) == ""){14         showTip('请输入姓名')15         return false;16       }17       var sex=$("#sex").val;18       var age=$("#age").val;19       var patrn = /^[0-9]{1,2}$/;20       if (!patrn.exec($.trim(age))) {21         showTip('请输入年龄')22         return false;23       }24       var mobile=$("#mobile").val;25       if($.trim(mobile) == ""){26         showTip('请正确填写手机号码')27         return false;28       }29       var patrn = /^13[0-9]{9}$|^15[0-9]{9}$|^18[0-9]{9}$/;30       if (!patrn.exec($.trim(mobile))) {31         showTip('请正确填写手机号码')32         return false;33       }34       var bookdate=$("#bookdate").val;35       if($.trim(bookdate) == ""){36         showTip('请输入预约日期')37         return false;38       }39       var bookexpert=$("#bookexpert").val;40       if($.trim(bookexpert) == ""){41         showTip('请输入预约专家')42         return false;43       }44       return true;45     }46   </script>  

上述页面的实现效果如图24-9所示。

图24-9 订单预约页面