pbootcms会员开发教程（三）

注册/登录页面模板开发

PbootCMS默认自带注册登录模板，你可以定制成符合外贸站风格的样式，以下是完整模板示例。
3.1 登录页面模板（login.html）

html
{include file=header.html}

<div class=”login-page”>
<div class=”login-box”>
会员登录</h2>

<form action=”{pboot:login}” method=”post” class=”login-form”>
<div class=”form-group”>
用户名/邮箱</label>
<input type=”text” name=”username” required placeholder=”请输入用户名或邮箱”>
</div>

<div class=”form-group”>
密码</label>
<input type=”password” name=”password” required placeholder=”请输入密码”>
</div>

{pboot:if({pboot:logincodestatus})}
<div class=”form-group verify-group”>
验证码</label>
<input type=”text” name=”checkcode” required placeholder=”请输入验证码”>
<img src=”{pboot:sitepath}/index.php?p=verify” onclick=”this.src='{pboot:sitepath}/index.php?p=verify&_=’+Math.random()” class=”verify-img”>
</div>
{/pboot:if}

<div class=”form-group form-options”>
<input type=”checkbox” name=”remember” value=”1″> 记住登录状态</label>
<a href=”{pboot:register}” class=”to-register”>没有账号？立即注册</a>
</div>

<button type=”submit” class=”btn-submit”>登 录</button>

<!– 社交登录区域（外贸站建议加Google/Facebook登录） –>
<div class=”social-login”>
其他登录方式</p>
<a href=”/oauth/google” class=”btn-social btn-google”>Google登录</a>
<a href=”/oauth/facebook” class=”btn-social btn-facebook”>Facebook登录</a>
</div>
</form>
</div>
</div>

{include file=footer.html}

登录表单必填字段

字段名 必填 说明
username 是 用户名/邮箱/手机号
password 是 密码
checkcode 按后台配置 验证码（开启验证码时必填）
remember 否 记住登录（默认7天免登录）
3.2 注册页面模板（register.html）

外贸站注册建议收集公司、国家等信息，方便后续客户跟进：

html
{include file=header.html}

<div class=”register-page”>
<div class=”register-box”>
免费注册会员</h2>
<p class=”tip”>注册后可查看价格、下载产品资料、快速发送询盘</p>

<form action=”{pboot:register}” method=”post” class=”register-form”>
<div class=”form-row”>
<div class=”form-group”>
用户名 *</label>
<input type=”text” name=”username” required placeholder=”4-20位字符”>
</div>
<div class=”form-group”>
邮箱 *</label>
<input type=”email” name=”useremail” required placeholder=”您的常用邮箱”>
</div>
</div>

<div class=”form-row”>
<div class=”form-group”>
密码 *</label>
<input type=”password” name=”password” required placeholder=”至少6位字符”>
</div>
<div class=”form-group”>
确认密码 *</label>
<input type=”password” name=”rpassword” required placeholder=”再次输入密码”>
</div>
</div>

<!– 外贸站专属字段（后台需先添加自定义会员字段） –>
<div class=”form-row”>
<div class=”form-group”>
公司名称 *</label>
<input type=”text” name=”company” required placeholder=”您的公司全称”>
</div>
<div class=”form-group”>
国家/地区 *</label>
<input type=”text” name=”country” required placeholder=”例如：United States”>
</div>
</div>

<div class=”form-row”>
<div class=”form-group”>
联系电话</label>
<input type=”text” name=”usermobile” placeholder=”方便我们联系您”>
</div>
<div class=”form-group”>
公司网站</label>
<input type=”text” name=”website” placeholder=”如有请填写”>
</div>
</div>

{pboot:if({pboot:registercodestatus})}
<div class=”form-group verify-group”>
验证码 *</label>
<input type=”text” name=”checkcode” required placeholder=”请输入验证码”>
<img src=”{pboot:sitepath}/index.php?p=verify” onclick=”this.src='{pboot:sitepath}/index.php?p=verify&_=’+Math.random()” class=”verify-img”>
</div>
{/pboot:if}

<div class=”form-group agreement”>
<input type=”checkbox” required> 我已阅读并同意 <a href=”/page/agreement” target=”_blank”>用户协议</a></label>
</div>

<button type=”submit” class=”btn-submit”>注 册</button>

<p class=”to-login”>已有账号？<a href=”{pboot:login}”>立即登录</a></p>
</form>
</div>
</div>

{include file=footer.html}

注册表单必填字段

字段名 必填 说明
username 是 用户名，唯一，4-20位
password 是 密码，至少6位
rpassword 是 确认密码，需与密码一致
useremail 建议 邮箱，用于找回密码、接收询盘回复
usermobile 否 手机号
checkcode 按后台配置 验证码
自定义字段名 自行设置 如company、country等后台添加的字段