本文介绍了一种在微信环境中实现卡解绑功能的方法。通过前端JavaScript与后端Java交互，实现了用户验证、卡信息更新及页面跳转等功能。
大家好：
今天遇到一个问题，整理了大半天！ 微信app关闭页面跳到主界面：代码跟到家共享一下！
注意：
此方法只在手机上显示！
<span style="font-size:14px;"> WeixinJSBridge.invoke('closeWindow',{},function(res){
});</span>今天的问题是在前几天的文章后续添加的
<span style="font-size:14px;"><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/view/common/tags.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no" name="format-detection"/>
<meta content="no-cache" http-equiv="Cache-Control"/>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/base.css" type="text/css"/>
<title>卡解绑</title>
</head>
<body>
<input type="hidden" id ="cardno" name = "cardno" value="${cardno}">
<input type="hidden" id ="phone" name = "phone" value="${phone}">
<div class="container">
<div class="loss_report">
<dl class="report_dl">
<dt>京医通卡号：</dt>
<dd>${cardno}</dd>
<dt>手机号码：</dt>
<dd>${phone}</dd>
<dt>验 证 码 ：</dt>
<dd>
<input type="text" id="validateNumber" name ="validateNumber" value="" class="report_inp report_inp_bg report_inp40"/>
<input name="ShowTime"id="ShowTime" type="button" value="获取验证码" onclick="time(this)" class="btn btn_submit btn_get_code" />
</dd>
</dl>
</div>
<span class="loss_btn"><a href="javascript:userInfo();" class="btn btn_submit" id="agreesubmit" name="agreesubmit">解绑</a></span>
<p class="binding_success" style="display:none;">解绑成功！</p>
<a href="<%=request.getContextPath()%>/view/mobile/card/unbundling_principles.html" class="unbundling_explain">解绑原则说明</a>
</div>
<div class="pop_wrap" style="display:none;">
<div class="bg_mask"></div>
<div class="pop_content">
<b class="pop_b01">确认解绑</b>
<p>解绑后，您在
<span id = "datevalue" name = "datevalue" readonly="readonly"></span> <!-- <input id = "datevalue" name = "datevalue" disabled="disabled"> -->
以后才可绑定用其他证件办理的京医通卡，期间您只能绑定原证件办理的京医通卡。</p>
<span class="btn_two"><a class="btn_pop btn_win50" href="javascript:;">取消</a><a class="btn_pop btn_win49" href="javascript:;">解绑</a></span>
</div>
</div>
</body>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var _path = "<%=request.getContextPath()%>";
//页面加载事件
window.onload=function() //用window的onload事件，窗体加载完毕的时候
{
var date = new Date();
date.setMonth(date.getMonth() + 2);
date = date.getFullYear() + '-' + (date.getMonth() == 0 ? 12 : date.getMonth()) + '-' + date.getDate();
$("#datevalue").text(date);
}
//手机验证码
var cTime = 59;
function validateMobile() {
var phone = $("input[name='phone']").val();
if (cTime == 59)
$.post(_path + "/sendMessage/mobile/sendValidateNumber",
{
mobilePhone : phone
},
function(data) {
});
}
//点击获取验证码
function time(o) {
var phone = $("input[name='phone']").val();
var doc_height = $(document).height();
$('.bg_mask').height(doc_height);
if (phone == null || $.trim(phone) == "") {
$('.pop_wrap').show();
document.getElementById('errorMessage').innerHTML = '请您输入手机号';
return false;
}
if (!(/^0?(13[0-9]|15[012356789]|18[012356789]|14[57])[0-9]{8}$/
.test(phone))) {
$('.pop_wrap').show();
document.getElementById('errorMessage').innerHTML = '手机号码不正确';
return false;
}
if (cTime == 59) {
validateMobile(); //手机验证码
o.value = "获取验证码";
cTime = 59;
document.getElementById("phone").disabled=true;
}
if (cTime == 0) {
o.removeAttribute("disabled");
o.value = "获取验证码";
cTime = 59;
document.getElementById("phone").disabled=false;
} else {
o.setAttribute("disabled", true);
o.value = "" + cTime + "秒";
cTime--;
setTimeout(function() {
time(o)
}, 1000)
}
}
/**
* 倒计时
* @returns
*/
function countDown() {
window.setTimeout('countDown()', 1000);
if (cTime >= 0)
$("#ShowTime").val(cTime + "秒");
cTime--;
if (cTime < 0) {
$("#ShowTime").val("获取验证码");
$('#ShowTime').click(function() {
//这里添加onclick后的事件，比如：
$("#ShowTime").unbind("click");
cTime = 59;
});
return false;
}
}
//停3秒，跳转页面
var i = 4 ;
function showTime(){
i-=1 ;
if(i == 1)
{
var url = _path + "/mobile/myBjMedicalCard/selectCardInfoList";
window.location.href = url;
}
window.setTimeout("showTime()",500);
}
function pageJump(){
i-=1 ;
if(i == 1)
{
WeixinJSBridge.invoke('closeWindow',{},function(res){
});
}
window.setTimeout("pageJump()",500);
}
//提交信息
function userInfo(){
var cardno = $("input[name='cardno']").val();
var phone = $("input[name='phone']").val();
var validateNumber = $("input[name='validateNumber']").val();
var fluge = true;
if (!(/^0?(13[0-9]|15[012356789]|18[012356789]|14[57])[0-9]{8}$/
.test(phone))) {
alert("手机号码不正确");
fluge = false ;
return false;
}
if (validateNumber === null || validateNumber == "") {
alert("验证码不能为空");
fluge = false ;
return false;
}
if(fluge == true){
//先判断手机号跟验证码是否正确，再判断是否确认解绑
$.post(_path + "/sendMessage/mobile/validateFormNumber", {
validateNumber : validateNumber,
mobilePhone : phone
}, function(data) {
if (data.result == "1") {
alert("手机号码变更，请重新获取验证码");
return false;
}
if (data.result == "2") {
alert("验证码不正确");
return false;
}
if (data.result == "0") { //手机号码正确，验证码正确
//弹出确认解绑框
$(".pop_wrap").show();
$(".btn_win50").click( //点击取消，隐藏遮罩层
function(){$(".pop_wrap").hide();}
);
$(".btn_win49").click( //点击解绑，隐藏遮罩层并post请求 卡解绑
function(){
$(".pop_wrap").hide(); //遮罩层隐藏
document.getElementById("agreesubmit").href = "javascript:void(0)"; //点击解绑后，解绑按钮不可用
$.post(_path + "/mobile/cardManager/modifiedCardStatus", { //卡 解绑
cardno : cardno
}, function(data) {
if (data == "1") {
$.post(_path + "/mobile/cardManager/unbundlingQueryCardList", { //卡解绑成功后，查询是否还存在卡数据
}, function(data1) {
$(".binding_success").show(); //解除绑定成功！
if (data1 == "1"){
showTime(); //此处必须跳转页面
}else{
pageJump(); //此处必须跳转页面
}
})
} else {
alert("解除绑定失败");
};
});
}
);
}
});
}
}
</script>
</html></span><span style="font-size:14px;">package com.saohuobang.web.platform.bjmedicalcard.cardmanage.controller;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.saohuobang.web.common.logging.UnifyLogger;
import com.saohuobang.web.platform.bjmedicalcard.cardmanage.po.CardInfo;
import com.saohuobang.web.platform.bjmedicalcard.cardmanage.po.TradeRecords;
import com.saohuobang.web.platform.bjmedicalcard.cardmanage.po.UserCard;
import com.saohuobang.web.platform.bjmedicalcard.cardmanage.po.UserInfo;
import com.saohuobang.web.platform.bjmedicalcard.cardmanage.po.WxUserInfo;
import com.saohuobang.web.platform.bjmedicalcard.cardmanage.service.inf.CardManageInf;
import com.saohuobang.web.platform.bjmedicalcard.cardmanage.service.inf.UserCardInf;
import com.saohuobang.web.platform.bjmedicalcard.cardmanage.service.inf.UserInfoInf;
import com.saohuobang.web.platform.bjmedicalcard.cardmanage.service.inf.WxUserInfoInf;
import com.saohuobang.web.platform.bjmedicalcard.common.conf.AlarmIdConfig;
import com.saohuobang.web.platform.bjmedicalcard.common.conf.LogIdConfig;
import com.saohuobang.web.platform.bjmedicalcard.common.exception.BussinessException;
import com.saohuobang.web.platform.bjmedicalcard.common.util.AppConfig;
/**
* @ClassName: CardUnbundlingController
* @Description: (卡管理— 卡解绑)
* @author zhangx
* @date 2015年1月26日 上午11:03:15
*/
@Controller
@RequestMapping("/mobile/cardManager")
public class CardManagerController {
@Autowired
private CardManageInf cardManageInf; //卡管理
@Autowired
private UserInfoInf userInfoInf; //用户信息
@Autowired
private HttpSession httpSession;
@Autowired
private WxUserInfoInf wxUserInfoInf; //微信用户
@Autowired
private UserCardInf userCardInf;
private static Logger logger = Logger.getLogger(CardManagerController.class); //打印log日志
/**
* @Title: getUserPhone
* @Description: (根据京医通卡查询用户的电话)
* @author zhangx
* @param @param cardno
* @return String
*/
@RequestMapping("/getUserPhone")
public String getUserPhone(
HttpServletRequest request,
@RequestParam(value = "cardno", required = true) String cardno //京医通卡
,@RequestParam(value = "type", required = true) int type // 路径 为 0： 卡挂失；1：卡解绑
){
try {
UserInfo userInfo = userInfoInf.selectUserInfoByCardNo(cardno); //根据京医通卡号，查询用户信息 t_user_info 与 t_user_card 相关联查询
request.setAttribute("phone", userInfo.getPhone());
request.setAttribute("cardno", cardno);
} catch (Exception e) {
e.printStackTrace();
logger.error("根据根据京医通卡查询用户的电话出现异常,京医通卡号不能为空");
}
if(type == 0){ //卡挂失
return "/mobile/card/cardLossReport"; //返回数据，返回指定页面
}else{ //卡解绑
return "/mobile/card/cardUnbundling"; //返回数据，返回指定页面
}
}
/**
*
* @Title: modifiedCardStatus
* @Description: (卡管理—卡解绑)
* @author zhangx
* @param @param userid //用户ID
* @param @param cardno //京医通卡号
* @param @return identification //标识 1： 修改成功，0：失败
* @param @throws Exception
* @return Object
* @throws
*/
@RequestMapping("/modifiedCardStatus")
@ResponseBody
public String modifiedCardStatus(
@RequestParam(value = "userid", required = false) String userid, //用户ID
@RequestParam(value = "cardno", required = true) String cardno //京医通卡号
) {
Map<String, Object> modelMap = new HashMap<String, Object>();
String identification = null;
Integer cardstatus = 0; //绑卡信息 t_user_card 修改状态 状态:0停用，1启用 （卡解绑）
Integer cardtype = 2; //卡信息t_card_info 卡类型：0临时卡1实体卡2解绑卡（解绑）
modelMap.put("cardstatus",cardstatus);
modelMap.put("cardtype",cardtype);
modelMap.put("userid",userid);
modelMap.put("cardno",cardno);
try {
int stamp = cardManageInf.updateUnbundlingCard(modelMap); //根据根据京医通卡号，修改卡状态
if(stamp>0){
identification = "1"; //修改成功
}
} catch (Exception e) {
e.printStackTrace();
}
return identification;
}
/**
*
* @Title: unbundlingQueryCardList
* @Description: TODO (解绑后查询卡列表)
* @author zhangx
* @param @param model
* @param @return
* @return ModelAndView
* @throws
*/
@RequestMapping( value ="/unbundlingQueryCardList", method = RequestMethod.POST)
@ResponseBody
public String unbundlingQueryCardList() {
String wxOpenId = httpSession.getAttribute("wxOpenId").toString(); //获取session中的微信号
WxUserInfo wxUserInfo = wxUserInfoInf.selectWxUserInfoByOpenId(wxOpenId); //根据微信openid查询微信用户信息
Map<String, Object> map = new HashMap<String, Object>();
List<UserCard> userCards = new ArrayList<UserCard>();
String identification = null ; //标识字段
//判断是否和用户绑定
if (wxUserInfo !=null) {
map.put("userId", wxUserInfo.getUserId());
map.put("cardstatus", 1); //状态：启用
map.put("inputType", "4");
try {
userCards = userCardInf.selectCardInfoListByUserId(map);
}catch (BussinessException ex){
if (ex.getResultCode().getResultCode() == 1006) {
UnifyLogger.error(LogIdConfig.BUSINESS_ERR, AlarmIdConfig.CARD_STATUS_ERR, ex);
}
}catch (Exception e) {
e.printStackTrace();
}
}
if(userCards.size() > 0){ //判断卡列表中是否存在数据 存在数据就返回 1 否则就返回 0
identification = "1";
}else{
identification = "0";
}
return "0";
}
}</span>
扫一扫
6289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
