苹果CMSV10用户中心user模块完整开发教程

一、用户模块基础概况

用户模块算是苹果cms整套系统里面页面数量最多的模块，完整会员中心一共有22份html模板文件，大部分页面都配套前端AJAX接口交互逻辑，开发工作量很大，这也是市面上定制一套会员中心模板报价普遍偏高的原因。

文件存放目录：html/user/

对应模型：model('User')

模型mid：6，模板中可以直接使用{$maccms.mid}获取该模型编号

页面aid：6，用户中心全部页面aid统一为6

变量调用说明

登录状态下，用户中心内部所有页面都可以直接使用$obj读取用户信息。

如果是用户中心以外的页面，要读取登录用户数据，变量前缀改为$user，例如用户名{$user.user_name}。

注意：以上变量只在非静态模式生效，如果网站开启纯静态，用户信息建议用JS接口获取展示。

用户中心内部 $obj 常用字段

全局页面 $user 变量（非用户中心页面）

在首页、播放页等外部页面，登录用户信息读取示例：{$user.user_id}、{$user.user_name}、{$user.user_nick_name}、{$user.user_end_time}(会员到期时间)、{$user.group_id}。

二、各个页面文件说明与模板示例代码

1、登录页面 login.html

路径：html/user/login.html，账号密码登录表单，带验证码判断，AJAX提交登录。

<form method="post" id="fm" action="">
  <h3>账户信息</h3>
  <div class="group">
     <label >账号</label>
     <input type="text" id="user_name" name="user_name"  placeholder="请输入您的登录账号">
  </div>
  <div class="group">
     <label>密码</label>
     <input type="password" id="user_pwd" name="user_pwd"  placeholder="请输入您的登录密码">
  </div>
  {if condition="$GLOBALS['config']['user']['login_verify'] eq 1"}
  <div class="group">
     <label>验证码</label>
     <input type="text" id="verify" name="verify" placeholder="请输入验证码">
     <img id="verify_img" src="{:url('verify/index')}" onClick="this.src=this.src+'?'"  alt="单击刷新" />
  </div>
  {/if}
  <input type="button" id="btn_submit"  value="立即登录">
</form>
<script type="text/javascript">
	$(function(){
		$("body").bind('keyup',function(event) {
			if(event.keyCode==13){ $('#btn_submit').click(); }
		});
		$('#btn_submit').click(function() {
			if ($('#user_name').val()  == '') { alert('请输入用户！'); $("#user_name").focus(); return false; }
			if ($('#user_pwd').val()  == '') { alert('请输入密码！'); $("#user_pwd").focus(); return false; }
			if ($('#verify').length> 0 && $('#verify').val()  == '') { alert('请输入验证码！'); $("#verify").focus(); return false; }
			$.ajax({
				url: "{:url('user/login')}",
				type: "post",
				dataType: "json",
				data: $('#fm').serialize(),
				beforeSend: function () {
					$("#btn_submit").css("background","#fd6a6a").val("loading...");
				},
				success: function (r) {
					if(r.code==1){
						location.href="{:url('user/index')}";
					}
					else{
						alert(r.msg);
						$('#verify_img').click();
					}
				},
				complete: function () {
					$("#btn_submit").css("background","#fa4646").val("立即登录");
				}
			});
		});
	});
</script>

2、注册页面 reg.html

路径：html/user/reg.html，支持账号注册、手机验证码注册、邮箱验证码注册，后台配置自动切换表单。

3、会员首页 index.html

路径：html/user/index.html，展示用户基础资料、会员等级、注册登录信息、推广链接。

<div>
  <p>用户名：{$obj.user_name}</p>
  <p>所属会员组：{$obj.group.group_name}</p>
  <p>会员期限：{$obj.user_end_time|mac_day}</p>
  <p>QQ号码：{$obj.user_qq}</p>
  <p>Email地址：{$obj.user_email}</p>
  <p>注册时间：{$obj.user_reg_time|mac_day}</p>
  <p>登陆IP：{$obj.user_login_ip|long2ip}</p>
  <p>登陆时间：{$obj.user_login_time|mac_day}</p>
  <p>账户积分：{$obj.user_points}</p>
  {if $GLOBALS['config']['user']['invite_reg_points'] gt 0}
  <p>推广注册链接：
     <input value="{$maccms.http_type}{$maccms.site_url}{:mac_url('user/reg')}?uid={$obj.user_id}">
  </p>
  {/if}
</div>

4、修改个人信息 info.html

路径：html/user/info.html，修改昵称、密码，绑定/解绑手机邮箱，修改密保问答。

5、权限页面 popedom.html

路径：html/user/popedom.html，变量$type_tree，输出当前用户拥有的栏目访问权限。

6、播放记录 plays.html

路径：html/user/plays.html，数组$list，volist循环，保存用户观看历史，支持单条、批量删除记录。

7、下载记录 downs.html

路径：html/user/downs.html，$list遍历下载历史记录。

8、我的收藏 favs.html

路径：html/user/favs.html，读取用户收藏视频、文章数据，支持删除收藏。

9、充值页面 buy.html

路径：html/user/buy.html，分为在线金额充值、卡密充值两套表单，提交生成充值订单。

10、订单支付页 pay.html

路径：html/user/pay.html，生成订单后跳转，选择支付渠道。

11、微信扫码支付 payment_weixin.html

路径：html/user/payment_weixin.html，展示支付二维码，JS轮询检测订单支付状态。

12、订单列表 orders.html

路径：html/user/orders.html，$list遍历充值订单，未支付订单可以再次发起支付。

13、卡密记录 cards.html

路径：html/user/cards.html，查看已经使用过的充值卡密记录。

14、积分日志 plog.html

路径：html/user/plog.html，记录积分增减明细，观看、充值、推广获得积分全部在这里。

15、提现表单与记录 cash.html

路径：html/user/cash.html，积分兑换现金提交提现申请，同时展示提现审核记录。

16、分销奖励 reward.html

路径：html/user/reward.html，三级分销收益记录页面。

17、会员升级 upgrade.html

路径：html/user/upgrade.html，消耗积分购买会员时长：包天、包周、包月、包年。

18、绑定手机/邮箱 bind.html

路径：html/user/bind.html，变量$ac，ac=phone绑定手机，ac=email绑定邮箱，发送验证码完成绑定。

19、找回密码 findpass.html

路径：html/user/findpass.html，密保问答方式重置密码。

20、短信邮箱找回 findpass_msg.html

路径：html/user/findpass_msg.html，通过手机或者邮箱接收验证码重置账号密码。

21、登录弹窗 ajax_login.html

路径：html/user/ajax_login.html，JS弹窗登录表单，home.js里面MAC.User.Login()调用，未登录弹出登录框。

22、登录后弹窗信息 ajax_info.html

登录成功之后弹窗展示用户简要信息，跳转会员中心、退出登录入口。

三、弹出登录调用代码

模板务必引入static/js/home.js，才能使用内置弹窗登录方法。

<a href="javascript:;" id="Login">会员</a>
<script>
  $('body').on('click','#Login',function(){
  	MAC.User.Login();
  });
</script>

四、用户模块通用分页代码

plays、favs、orders、plog等所有列表页面统一分页标签变量$__PAGING__。

<div>
  <em>共{$__PAGING__.record_total}条</em>
  <a href="{$__PAGING__.page_url|str_replace='PAGELINK',1,###}">首页</a>
  <a href="{$__PAGING__.page_url|str_replace='PAGELINK',$__PAGING__.page_prev,###}">上一页</a>
  {volist name="$__PAGING__.page_num" id="num"}
     {if condition="$__PAGING__['page_current'] eq $num"}
        <a href="javascript:;">{$num}</a>
     {else}
        <a href="{$__PAGING__.page_url|str_replace='PAGELINK',$num,###}">{$num}</a>
     {/if}
  {/volist}
  <a href="{$__PAGING__.page_url|str_replace='PAGELINK',$__PAGING__.page_next,###}">下一页</a>
  <a href="{$__PAGING__.page_url|str_replace='PAGELINK',$__PAGING__.page_total,###}">尾页</a>
</div>

五、开发注意要点

• 静态模式下$obj、$user服务端变量失效，用户信息要用前端接口获取渲染页面。

• 弹窗登录依赖home.js，自定义模板如果删掉该JS，弹窗登录功能直接失效。

• 表单全部使用AJAX异步提交，接口地址不要随意修改，和后端路由一一对应。

• 很多页面会读取后台用户配置，比如注册方式、验证码开关、提现比例，不要写死表单。

这份属于完整参考文档，实际做模板开发时，可以按需删减不需要的页面逻辑。