登录整合

src/main/resources/config/dev/application-dev.yml

@@ -2,12 +2,12 @@ spring:
   #数据源连接--start
   datasource:
     #driverClassName: com.mysql.jdbc.Driver
-    url: jdbc:mysql://192.168.1.11:3306/caimei@20180509?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
-    username: developer
-    password: 05bZ/OxTB:X+yd%1
-#    url: jdbc:mysql://119.29.0.46:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
-#    username: general
-#    password: 6#xsI%b4o@5c3RoE
+#    url: jdbc:mysql://192.168.1.11:3306/caimei@20180509?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
+#    username: developer
+#    password: 05bZ/OxTB:X+yd%1
+    url: jdbc:mysql://119.29.0.46:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
+    username: general
+    password: 6#xsI%b4o@5c3RoE
     # Hikari will use the above plus the following to setup connection pooling
     type: com.zaxxer.hikari.HikariDataSource
     hikari:
@@ -51,7 +51,7 @@ logging:
 # 服务域名
 caimei:
 #  spiServer: http://localhost:8008
-  spiServer: https://spi.caimei365.com
+  spiServer: https://spi-b.caimei365.com
   imageDomain: https://img-b.caimei365.com
   wwwDomain: https://www-b.caimei365.com
 

src/main/resources/static/css/product/list.css

@@ -4,7 +4,7 @@ li{list-style:none}
  * PC端
  */
 @media screen and (min-width:768px){
-    .crumbs{width:1184px;margin:0 auto;box-sizing:border-box;padding:15px 0;font-size:16px}
+    .crumbs{width:1184px;margin:0 auto;box-sizing:border-box;padding:15px 0;font-size:14px}
     .sortBox{width:1184px;margin:16px auto;box-sizing:border-box;padding:12px;font-size:0;text-align:center;background:#FFF}
     .sortBox li{display:inline-block;cursor:pointer;width:128px;height:40px;line-height:40px;font-size:16px;background:#F5F5F5;color:#93979F;position:relative;margin:0 8px}
     .sortBox li.on,.sortBox li.up,.sortBox li.down{background:#FFE6DC;color:#E15616}

src/main/resources/static/js/base.js

@@ -1,61 +1,84 @@
 var spiServer = $("#spiServer").val();
 var isPC = ($(window).width()>768);
-var loginState = false;
-// 导航分类数据
-var mainClassify = new Vue({
-    el: '#mainClassify',
+var globalUserData = '';
+if(localStorage.getItem('userInfo')){
+    globalUserData = JSON.parse(localStorage.getItem('userInfo'));
+}
+// 头部
+var globalHead = new Vue({
+    el: '#globalHead',
     data: {
-        classify: []
+        loginStatus: false,
+        userData: {},
+        classify: [],
+        headCart: {
+            cartList: [],
+            cartCount: 0,
+            productCount: 0,
+            priceTotal: 0
+        }
     },
-    methods: {},
-    created: function () {
-        var _self = this;
-        $.getJSON(spiServer+"/product/classify").done(function (r) {
-            if (r.code === 0 && r.data) {
-                _self.classify = r.data;
-                if(isPC){
-                    setTimeout(function(){
-                        $('#mainClassify').slide({
-                            mainCell:".clsCon"
-                            ,titCell:".clsTab a"
-                            ,trigger: "mouseover"
-                        });
-                    },500);
-                }else{
-                    setTimeout(function(){
-                        $('#mainClassify').slide({
-                            mainCell:".clsCon"
-                            ,titCell:".clsTab a"
-                            ,trigger: "click"
-                        });
-                    },500);
+    methods: {
+        // 导航分类数据
+        getClassify: function() {
+            var _self = this;
+            $.getJSON(spiServer+"/product/classify").done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.classify = r.data;
+                    if(isPC){
+                        setTimeout(function(){
+                            $('#mainClassify').slide({
+                                mainCell:".clsCon"
+                                ,titCell:".clsTab a"
+                                ,trigger: "mouseover"
+                            });
+                        },500);
+                    }else{
+                        setTimeout(function(){
+                            $('#mainClassify').slide({
+                                mainCell:".clsCon"
+                                ,titCell:".clsTab a"
+                                ,trigger: "click"
+                            });
+                        },500);
+                    }
                 }
-            }
-        });
-    }
-});
-// 头部购物车数据
-var headCart = new Vue({
-    el: '#headCart',
-    data: {
-        cartList: [],
-        cartCount: 0,
-        productCount: 0,
-        priceTotal: 0
+            });
+        },
+        // 头部购物车数据
+        getHeadCart: function(userId) {
+            var _self = this;
+            $.getJSON("/header/cart?userId="+userId).done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.headCart.cartList = r.data;
+                    _self.headCart.cartCount = r.data.length;
+                    r.data.map(function(item){
+                        _self.headCart.productCount += item.number;
+                        _self.headCart.priceTotal += item.number*item.price;
+                    });
+                }
+            });
+        },
+        // 退出登录
+        userLogOut: function(){
+            localStorage.removeItem('userInfo');
+            this.loginStatus = false;
+            window.location.href = "/index.html";
+        }
     },
-    methods: {},
     created: function () {
-        var _self = this;
-        $.getJSON("/header/cart?userId=10342").done(function (r) {
-            if (r.code === 0 && r.data) {
-                _self.cartList = r.data;
-                _self.cartCount = r.data.length;
-                r.data.map(function(item){
-                    _self.productCount += item.number;
-                    _self.priceTotal += item.number*item.price;
-                });
+        // 导航分类数据
+        this.getClassify();
+        // 判断登录状态
+        if (globalUserData.token) {
+            this.loginStatus = true;
+            this.userData = globalUserData;
+            if(this.userData.userId){
+                // 获取头部购物车数据
+                this.getHeadCart(this.userData.userId);
             }
-        });
+        }
+
     }
 });
 // 初始化效果

src/main/resources/static/js/product/detail.js

@@ -2,8 +2,9 @@ var productDetail = new Vue({
     el: "#productDetail",
     data: {
         productId: 0,
-        userId: 6,
+        userId: 0,
         userIdentity: '',
+        userToken: '',
         images: [],
         price: 564,
         priceFlag: 2,
@@ -108,5 +109,12 @@ var productDetail = new Vue({
             ,titCell:".tabTit span"
             ,trigger: "click"
         });
+        if(globalUserData){
+            this.userId = globalUserData.userId;
+            this.userIdentity = globalUserData.identity;
+            this.userToken = globalUserData.token;
+        }
+
+
     }
 });

src/main/resources/static/js/product/list.js

@@ -22,7 +22,9 @@ var productList = new Vue({
         bigType: "",
         smallType: "",
         tinyType: "",
-        userId: 0
+        userId: 0,
+        userIdentity: '',
+        userToken: ''
     },
     computed: {
         pageTotal: function () {
@@ -168,6 +170,11 @@ var productList = new Vue({
         this.params.sortField = getUrlParam("sortField") ? getUrlParam("sortField") : "";
         this.params.sortType = getUrlParam("sortType") ? getUrlParam("sortType") * 1 : 1;
         this.searchFlag = (this.params.keyword !== "");
+        if(globalUserData){
+            this.userId = globalUserData.userId;
+            this.userIdentity = globalUserData.identity;
+            this.userToken = globalUserData.token;
+        }
         var userInfo = localStorage.getItem('userInfo');
         if(userInfo){
             this.userId = JSON.parse(userInfo).userId;

src/main/resources/static/js/shopping/cart.js

@@ -1,7 +1,9 @@
 var shoppingCart = new Vue({
     el: "#shoppingCart",
     data: {
-        userId: 10342,
+        userId: 0,
+        userIdentity: '',
+        userToken: '',
         listLoading: true,
         listData: [],
         invalidData: [],
@@ -43,6 +45,11 @@ var shoppingCart = new Vue({
 
     },
     created: function () {
+        if(globalUserData){
+            this.userId = globalUserData.userId;
+            this.userIdentity = globalUserData.identity;
+            this.userToken = globalUserData.token;
+        }
         // 获取列表数据
         this.getCartLists();
     },

src/main/resources/templates/account/login.html

@@ -47,9 +47,9 @@
                     <a href="javascript:void(0);">忘记密码？</a>
                 </div>
                 <div class="submit clear">
-                    <a v-if="isPC" class="btn" href="javascript:void(0);">免费注册</a>
+                    <a v-if="isPC" class="btn" href="/sign-up.html">免费注册</a>
                     <button class="btn" type="button" @click="loginSubmit()">登录</button>
-                    <a v-if="!isPC" class="btn" href="javascript:void(0);">免费注册</a>
+                    <a v-if="!isPC" class="btn" href="/sign-up.html">免费注册</a>
                 </div>
                 <a v-if="isPC" href="javascript:void(0);" class="codeBtn icon" @click="toQrCodeLogin()"></a>
             </form>

src/main/resources/templates/components/header.html

@@ -1,4 +1,4 @@
-<header xmlns:th="http://www.w3.org/1999/xhtml">
+<header id="globalHead" xmlns:th="http://www.w3.org/1999/xhtml">
     <!--顶部导航-->
     <div class="baseHeadTop">
         <ul class="wrap clear">
@@ -16,19 +16,21 @@
                     <p>扫描关注</p>
                 </div>
             </li>
-            <li>
-                <a class="cTab" href="javascript:void(0);">用户名称</a>
+            <li v-if="loginStatus">
+                <a class="cTab" href="javascript:void(0);" v-text="userData.userName"></a>
                 <div class="cShow">
                     <a href="javascript:void(0);">我的采美</a>
                     <a href="javascript:void(0);">机构资料</a>
                     <a href="javascript:void(0);">我的机构</a>
                     <a href="javascript:void(0);">店铺管理</a>
                     <a href="javascript:void(0);">我的订单</a>
-                    <a href="javascript:void(0);">退出登录</a>
+                    <a href="javascript:void(0);" @click="userLogOut()">退出登录</a>
                 </div>
             </li>
-            <li><a href="javascript:void(0);">注册</a></li>
-            <li><a href="javascript:void(0);">登录</a></li>
+            <template v-else>
+                <li><a href="/sign-up.html">注册</a></li>
+                <li><a href="/login.html">登录</a></li>
+            </template>
         </ul>
     </div>
     <!--搜索及购物车-->
@@ -67,12 +69,12 @@
                     </span>
                 </div>
             </div>
-            <div class="headCart" id="headCart">
-                <a href="javascript:void(0);" class="addBtn icon">购物车<em v-if="cartCount>0" v-text="'('+cartCount+')'"></em></a>
-                <div id="cartData" class="cartData">
-                    <div v-if="cartCount>0">
+            <div class="headCart">
+                <a href="javascript:void(0);" class="addBtn icon">购物车<em v-text="'('+headCart.cartCount+')'"></em></a>
+                <div class="cartData">
+                    <div v-if="headCart.cartCount>0">
                         <ul class="cartMain">
-                            <li class="cartItem" v-for="cart in cartList">
+                            <li class="cartItem" v-for="cart in headCart.cartList">
                                 <a href="javascript:void(0)">
                                     <img :src="cart.image" >
                                     <span class="name" v-text="cart.name"></span>
@@ -83,15 +85,15 @@
                             </li>
                         </ul>
                         <div class="cartBtm">
-                            <span>共计：<em v-text="productCount"></em> 件</span>
-                            <span>合计：<em v-text="parseFloat(priceTotal).toFixed(2)"></em> 元</span>
+                            <span>共计：<em v-text="headCart.productCount"></em> 件</span>
+                            <span>合计：<em v-text="parseFloat(headCart.priceTotal).toFixed(2)"></em> 元</span>
                             <a class="btn" href="/shopping/cart.html">去购物车结算</a>
                         </div>
                     </div>
                     <div v-else class="empty">
                         <img src="/img/common/empty_cart.png">
                         <p>购物车暂无商品</p>
-                        <p>请先<a href="javascript:void(0);">登录</a>添加商品到购物车</p>
+                        <p v-if="!loginStatus">请先<a href="/login.html">登录</a>添加商品到购物车</p>
                     </div>
                 </div>
             </div>

src/main/resources/templates/index.html

@@ -72,12 +72,13 @@
                                             <em v-if="p.priceflag==1">未公开价格</em>
                                             <template v-else>
                                                 <em v-if="p.priceLoading">正在获取价格...</em>
-                                                <em v-else-if="p.priceflag==2 && p.userIdentity!=2">价格仅会员可见</em>
+                                                <template v-else-if="p.priceflag==2 && p.userIdentity!=2">
+                                                    <em>价格仅会员可见</em>
+                                                    <div class="btnBox">
+                                                        <a href="javascript:void(0)" class="btn">升级成为会员</a>
+                                                    </div>
+                                                </template>
                                                 <em v-else class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
-                                                <div class="btnBox">
-                                                    <a v-if="p.priceflag==2 && p.userIdentity!=2" href="javascript:void(0)" class="btn">升级成为会员</a>
-                                                    <a v-else href="javascript:void(0)" class="btn add">加入购物车</a>
-                                                </div>
                                             </template>
                                         </template>
                                         <template v-else>

src/main/resources/templates/product/list.html

@@ -114,12 +114,13 @@
                             <em v-if="p.priceflag==1">未公开价格</em>
                             <template v-else>
                                 <em v-if="p.priceLoading">正在获取价格...</em>
-                                <em v-else-if="p.priceflag==2 && p.userIdentity!=2">价格仅会员可见</em>
+                                <template v-else-if="p.priceflag==2 && p.userIdentity!=2">
+                                    <em>价格仅会员可见</em>
+                                    <div class="btnBox">
+                                        <a href="javascript:void(0)" class="btn">升级成为会员</a>
+                                    </div>
+                                </template>
                                 <em v-else class="p" v-text="'￥'+parseFloat(p.price).toFixed(2)"></em>
-                                <div class="btnBox">
-                                    <a v-if="p.priceflag==2 && p.userIdentity!=2" href="javascript:void(0)" class="btn">升级成为会员</a>
-                                    <a v-else href="javascript:void(0)" class="btn add">加入购物车</a>
-                                </div>
                             </template>
                         </template>
                         <template v-else>
@@ -152,6 +153,6 @@
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/footLink"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/product/cart.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/list.js(v=${version})}"></script>
 </body>
 </html>