会员卡购买、会员卡信息、充值对接后端finish

src/main/resources/static/css/userMember.css

@@ -145,5 +145,5 @@
 }
 
 .notice {
-     margin-left: 10px;
+     margin-left: 12px;
 }

src/main/resources/static/js/userMember.js

@@ -0,0 +1,121 @@
+$(document).ready(function () {
+    getVIP();
+});
+
+var isBuyState = true;
+var vipCardId;
+
+function getVIP() {
+    getRequest(
+        '/vip/' + sessionStorage.getItem('id') + '/get',
+        function (res) {
+            if (res.success) {
+                // 是会员
+                $("#member-card").css("visibility", "visible");
+                $("#member-card").css("display", "");
+                $("#nonmember-card").css("display", "none");
+
+                vipCardId = res.content.id;
+                $("#member-id").text(res.content.id);
+                $("#member-balance").text("¥" + res.content.balance);
+                $("#member-joinDate").text(res.content.joinDate.substring(0, 10));
+            } else {
+                // 非会员
+                $("#member-card").css("display", "none");
+                $("#nonmember-card").css("display", "");
+            }
+        },
+        function (error) {
+            alert(error);
+        });
+
+    getRequest(
+        '/vip/getVIPInfo',
+        function (res) {
+            if (res.success) {
+                $("#member-buy-price").text(res.content.price);
+                $("#member-buy-description").text("充值优惠：" + res.content.description + "。永久有效");
+                $("#member-description").text(res.content.description);
+            } else {
+                alert(res.content);
+            }
+
+        },
+        function (error) {
+            alert(error);
+        });
+}
+
+function buyClick() {
+    clearForm();
+    $('#buyModal').modal('show')
+    $("#userMember-amount-group").css("display", "none");
+    isBuyState = true;
+}
+
+function chargeClick() {
+    clearForm();
+    $('#buyModal').modal('show')
+    $("#userMember-amount-group").css("display", "");
+    isBuyState = false;
+}
+
+function clearForm() {
+    $('#userMember-form input').val("");
+    $('#userMember-form .form-group').removeClass("has-error");
+    $('#userMember-form p').css("visibility", "hidden");
+}
+
+function confirmCommit() {
+    if (validateForm()) {
+        if ($('#userMember-cardNum').val() === "123123123" && $('#userMember-cardPwd').val() === "123123") {
+            if (isBuyState) {
+                postRequest(
+                    '/vip/add?userId=' + sessionStorage.getItem('id'),
+                    null,
+                    function (res) {
+                        $('#buyModal').modal('hide');
+                        alert("购买会员卡成功");
+                        getVIP();
+                    },
+                    function (error) {
+                        alert(error);
+                    });
+            } else {
+                postRequest(
+                    '/vip/charge',
+                    {vipId: vipCardId, amount: parseInt($('#userMember-amount').val())},
+                    function (res) {
+                        $('#buyModal').modal('hide');
+                        alert("充值成功");
+                        getVIP();
+                    },
+                    function (error) {
+                        alert(error);
+                    });
+            }
+        } else {
+            alert("银行卡号或密码错误");
+        }
+    }
+}
+
+function validateForm() {
+    var isValidate = true;
+    if (!$('#userMember-cardNum').val()) {
+        isValidate = false;
+        $('#userMember-cardNum').parent('.form-group').addClass('has-error');
+        $('#userMember-cardNum-error').css("visibility", "visible");
+    }
+    if (!$('#userMember-cardPwd').val()) {
+        isValidate = false;
+        $('#userMember-cardPwd').parent('.form-group').addClass('has-error');
+        $('#userMember-cardPwd-error').css("visibility", "visible");
+    }
+    if (!isBuyState && (!$('#userMember-amount').val() || parseInt($('#userMember-amount').val()) <= 0)) {
+        isValidate = false;
+        $('#userMember-amount').parent('.form-group').addClass('has-error');
+        $('#userMember-amount-error').css("visibility", "visible");
+    }
+    return isValidate;
+}

src/main/resources/templates/userMember.html

@@ -42,7 +42,7 @@
 </div>
 <div class="content-container">
     <!--非会员-->
-    <div class="card col-md-8 col-md-offset-2">
+    <div class="card col-md-8 col-md-offset-2" id="nonmember-card" style="display: none;">
         <div class="header">
             <div class="title">会员卡</div>
             <div class="state">非会员</div>
@@ -52,14 +52,14 @@
             <hr/>
         </div>
         <div class="info">
-            <div class="price"><b>18</b>元/张</div>
-            <div class="description">充值优惠：满300送20。永久有效</div>
-            <button id="buy" data-toggle="modal" data-target="#buyModal">立即购买</button>
+            <div class="price"><b id="member-buy-price"></b>元/张</div>
+            <div id="member-buy-description" class="description"></div>
+            <button onclick="buyClick()">立即购买</button>
         </div>
     </div>
 
     <!--会员-->
-    <div class="card col-md-8 col-md-offset-2">
+    <div class="card col-md-8 col-md-offset-2" id="member-card" style="visibility: hidden;">
         <div class="header">
             <div class="title">会员卡</div>
             <div class="state">VIP</div>
@@ -72,22 +72,22 @@
             <div class="content">
                 <div class="line">
                     <div><b>会员卡号：</b></div>
-                    <div>100001</div>
+                    <div id="member-id"></div>
                 </div>
                 <div class="line">
                     <div><b>余额：</b></div>
-                    <div>¥0</div>
+                    <div id="member-balance"></div>
                 </div>
                 <div class="line">
                     <div><b>入会日期：</b></div>
-                    <div>2019/04/13</div>
+                    <div id="member-joinDate"></div>
                 </div>
                 <div class="line">
                     <div><b>充值优惠：</b></div>
-                    <div>满200减30</div>
+                    <div id="member-description"></div>
                 </div>
             </div>
-            <button>立即充值</button>
+            <button onclick="chargeClick()">立即充值</button>
         </div>
     </div>
 
@@ -154,29 +154,30 @@
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
+                </button>
                 <h4 class="modal-title" id="myModalLabel">购买会员卡</h4>
             </div>
-            <div class="modal-body">
+            <div class="modal-body" id="userMember-form">
                 <div class="form-group">
-                    <label for="userMember-cardNum">银行卡号</label>
+                    <label for="userMember-cardNum"><span class="error-text">*</span>银行卡号</label>
                     <input class="form-control" id="userMember-cardNum" placeholder="请输入银行卡号">
                     <p id="userMember-cardNum-error" class="notice">银行卡号不能为空</p>
                 </div>
                 <div class="form-group">
-                    <label for="userMember-cardPwd">密码</label>
+                    <label for="userMember-cardPwd"><span class="error-text">*</span>密码</label>
                     <input type="password" class="form-control" id="userMember-cardPwd" placeholder="请输入密码">
                     <p id="userMember-cardPwd-error" class="notice">密码不能为空</p>
                 </div>
-                <div class="form-group">
-                    <label for="userMember-amount">金额</label>
+                <div class="form-group" id="userMember-amount-group">
+                    <label for="userMember-amount"><span class="error-text">*</span>金额</label>
                     <input type="number" class="form-control" id="userMember-amount" placeholder="请输入充值金额">
                     <p id="userMember-amount-error" class="notice">充值金额需要大于0元</p>
                 </div>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
-                <button type="button" class="btn btn-primary">确定</button>
+                <button type="button" class="btn btn-primary" onclick="confirmCommit()">确定</button>
             </div>
         </div>
     </div>