feat: 增强用户登录体验与组件逻辑优化

- 在多个组件中添加用户登录状态检查，确保用户在进行特定操作前已登录。
- 更新购物车、消息中心等组件的点击事件，未登录时提示用户登录。
- 优化优惠券领取逻辑，未登录时引导用户登录。
- 调整样式以提升组件一致性，确保用户界面友好。

buyer/src/components/fixed/index.vue

@@ -10,6 +10,7 @@
 
 <script>
 import { getIconUrl } from "@/assets/iconfont/iconMap";
+import storage from "@/plugins/storage.js";
 
 export default {
   name: "fixed-index",
@@ -19,22 +20,26 @@ export default {
         {
           icon:"user",
           label:"会员中心",
-          path:"/home"
+          path:"/home",
+          requireLogin: true,
         },
         {
           icon:"carts",
           label:"购物车",
-          path:"/cart"
+          path:"/cart",
+          requireLogin: true,
         },
         {
           icon:"notification",
           label:"消息",
-          path:"/home/MsgList"
+          path:"/home/MsgList",
+          requireLogin: true,
         },
         {
           icon:"collage",
           label:"收藏",
-          path:"/home/Favorites"
+          path:"/home/Favorites",
+          requireLogin: true,
         },
         {
           icon:"back",
@@ -71,13 +76,37 @@ export default {
         this.isScrolling = false;
       }
     },
-    handleClickIcon(val){
-        if(val.path === 'back'){
-          this.scrollToTop()
-        }else{
-          this.$router.push(val.path)
+    isLoggedIn () {
+      const rawUserInfo = storage.getItem('userInfo');
+      if (rawUserInfo) {
+        try {
+          return !!JSON.parse(rawUserInfo).username;
+        } catch {
+          return false;
         }
-    }
+      }
+      return !!storage.getItem('accessToken');
+    },
+    goLogin (rePath) {
+      this.$router.push({
+        path: '/login',
+        query: {
+          rePath,
+          query: JSON.stringify(this.$route.query || {}),
+        },
+      });
+    },
+    handleClickIcon (val) {
+      if (val.path === 'back') {
+        this.scrollToTop();
+        return;
+      }
+      if (val.requireLogin && !this.isLoggedIn()) {
+        this.goLogin(val.path);
+        return;
+      }
+      this.$router.push(val.path);
+    },
   }
 }
 </script>

buyer/src/components/header/Header.vue

@@ -124,9 +124,27 @@ export default {
     }
   },
   methods: {
-    goToPay() { // 跳转购物车
-      let url = this.$router.resolve({
-        path: '/cart'
+    goToPay() {
+      if (!this.userInfo.username) {
+        Modal.confirm({
+          title: '温馨提示',
+          content: '请登录后执行此操作',
+          okText: '立即登录',
+          cancelText: '取消',
+          onOk: () => {
+            this.$router.push({
+              path: '/login',
+              query: {
+                rePath: '/cart',
+                query: JSON.stringify(this.$route.query || {}),
+              },
+            });
+          },
+        });
+        return;
+      }
+      const url = this.$router.resolve({
+        path: '/cart',
       });
       window.open(url.href, '_blank');
     },
@@ -169,16 +187,29 @@ export default {
       }
     },
     shopEntry() {
-      // 店铺入驻
       if (storage.getItem('accessToken')) {
-        let routeUrl = this.$router.resolve({
+        const routeUrl = this.$router.resolve({
           path: '/shopEntry',
-          query: {id: 1}
+          query: { id: 1 },
         });
         window.open(routeUrl.href, '_blank');
-      } else {
-        this.$router.push('login');
+        return;
       }
+      Modal.confirm({
+        title: '温馨提示',
+        content: '请登录后执行此操作',
+        okText: '立即登录',
+        cancelText: '取消',
+        onOk: () => {
+          this.$router.push({
+            path: '/login',
+            query: {
+              rePath: '/shopEntry',
+              query: JSON.stringify({ id: 1 }),
+            },
+          });
+        },
+      });
     },
     handleCartDropdownVisible(visible) {
       if (visible) {

buyer/src/components/indexDecorate/modelList/Carousel.vue

@@ -51,7 +51,7 @@
             </div> -->
           </div>
           <div v-else class="flex flex-a-c ">
-            <div class="btns" @click="$router.push('login')">登录</div>
+            <div class="btns" @click="goLogin">登录</div>
             <div class="btns sign-up" @click="$router.push('signUp')">注册</div>
           </div>
 
@@ -84,6 +84,7 @@
 
 <script>
 
+import { Modal } from "@/utils/message";
 import storage from "@/plugins/storage";
 import config from "@/config";
 import defaultAvatar from "@/assets/images/default.png";
@@ -182,17 +183,34 @@ export default {
         query: Object.fromEntries(new URLSearchParams(search)),
       };
     },
+    isMemberRoute(location) {
+      return location.path.startsWith("/home/") || location.path === "/cart";
+    },
+    promptLoginThenNavigate(location) {
+      Modal.confirm({
+        title: "温馨提示",
+        content: "请登录后执行此操作",
+        okText: "立即登录",
+        cancelText: "取消",
+        onOk: () => {
+          this.$router.push({
+            path: "/login",
+            query: {
+              rePath: location.path,
+              query: JSON.stringify(location.query || {}),
+            },
+          });
+        },
+      });
+    },
+    goLogin() {
+      this.$router.push("/login");
+    },
     // 快捷跳转中心
     entryControl(val) {
       const location = this.resolveRoute(val.path);
-      if (location.path.startsWith("/home/") && !storage.getItem("userInfo")) {
-        this.$router.push({
-          path: "/login",
-          query: {
-            rePath: location.path,
-            query: JSON.stringify(location.query || {}),
-          },
-        });
+      if (this.isMemberRoute(location) && !storage.getItem("userInfo")) {
+        this.promptLoginThenNavigate(location);
         return;
       }
       const url = this.$router.resolve(location);

buyer/src/pages/CouponCenter.vue

@@ -57,6 +57,7 @@
 </template>
 <script>
 import { Modal } from "@/utils/message";
+import storage from "@/plugins/storage";
 import { couponList, receiveCoupon } from "@/api/member.js";
 export default {
   data() {
@@ -115,6 +116,26 @@ export default {
     },
     // 领取优惠券
     receive(item) {
+      const userInfo = storage.getItem("userInfo");
+      const isLogin = userInfo && JSON.parse(userInfo).username;
+      if (!isLogin) {
+        Modal.confirm({
+          title: "温馨提示",
+          content: "请登录后执行此操作",
+          okText: "立即登录",
+          cancelText: "取消",
+          onOk: () => {
+            this.$router.push({
+              path: "/login",
+              query: {
+                rePath: this.$route.path,
+                query: JSON.stringify(this.$route.query),
+              },
+            });
+          },
+        });
+        return;
+      }
       receiveCoupon(item.id)
         .then((res) => {
           if (!res || !res.success) return;

buyer/src/pages/SignUp.vue

@@ -15,7 +15,7 @@
           ref="formRegist"
           :model="formRegist"
           :rules="ruleInline"
-          style="width:300px;"
+          class="signup-form"
         >
           <el-form-item prop="username">
             <el-input
@@ -66,7 +66,7 @@
               >注册</el-button
             >
           </el-form-item>
-          <el-form-item><span class="color999 ml_20">点击注册，表示您同意《<router-link to="/article?id=1371992704333905920" target="_blank">商城用户协议</router-link>》</span></el-form-item>
+          <el-form-item><span class="color999">点击注册，表示您同意《<router-link to="/article?id=1371992704333905920" target="_blank">商城用户协议</router-link>》</span></el-form-item>
         </el-form>
         <!-- 拼图验证码 -->
         <Verify
@@ -240,7 +240,15 @@ export default {
   margin: 0 auto;
   width: 600px;
   background-color: #fff;
-  padding: 20px 150px;
+  padding: 20px 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .signup-form {
+    width: 300px;
+  }
+
   .login-btn{
     position: absolute;
     right: 20px;
@@ -250,8 +258,9 @@ export default {
 
 .verify-con{
   position: absolute;
-  left: 140px;
+  left: 50%;
   top: 80px;
+  transform: translateX(-50%);
   z-index: 10;
 }
 

buyer/src/pages/home/memberCenter/Profile.vue

@@ -47,6 +47,7 @@
 <script>
 import { Message } from "@/utils/message";
 import { editMemberInfo } from '@/api/account.js';
+import { getMemberMsg } from '@/api/login.js';
 import { commonUrl } from '@/plugins/request.js';
 import storage from '@/plugins/storage.js';
 import { User } from '@element-plus/icons-vue';
@@ -64,11 +65,44 @@ export default {
     }
   },
   mounted () {
-    this.formItem = JSON.parse(storage.getItem('userInfo'))
-    this.formItem.birthday = this.normalizeBirthday(this.formItem.birthday)
     this.accessToken.accessToken = storage.getItem('accessToken');
+    this.loadUserInfo();
   },
   methods: {
+    loadUserInfo () {
+      const rawUserInfo = storage.getItem('userInfo');
+      if (rawUserInfo) {
+        this.applyUserInfo(JSON.parse(rawUserInfo));
+        return;
+      }
+      if (!storage.getItem('accessToken')) {
+        this.redirectToLogin();
+        return;
+      }
+      getMemberMsg().then(res => {
+        if (res.success && res.result) {
+          storage.setItem('userInfo', res.result);
+          this.applyUserInfo(res.result);
+        } else {
+          this.redirectToLogin();
+        }
+      }).catch(() => {
+        this.redirectToLogin();
+      });
+    },
+    applyUserInfo (userInfo) {
+      this.formItem = { ...userInfo };
+      this.formItem.birthday = this.normalizeBirthday(this.formItem.birthday);
+    },
+    redirectToLogin () {
+      this.$router.push({
+        path: '/login',
+        query: {
+          rePath: this.$route.path,
+          query: JSON.stringify(this.$route.query || {}),
+        },
+      });
+    },
     normalizeBirthday (value) {
       if (!value) return ''
       if (value instanceof Date) return value

buyer/src/pages/payment/Pay.vue

@@ -182,7 +182,7 @@
                 }}</span>折</span>
                 <span class="describe">满{{ item.consumeThreshold }}元可用</span>
               </div>
-              <p>使用范围：{{ useScope(item.scopeType) }}</p>
+              <p>使用范围：{{ useScope(item.scopeType, item.storeName) }}</p>
               <p>有效期：{{ item.endTime }}</p>
             </div>
             <img class="used" v-if="usedCouponId.includes(item.id)" src="../../assets/images/geted.png" alt="" />
@@ -861,8 +861,10 @@ export default {
         });
     },
     // 优惠券可用范围
-    useScope(type) {
+    useScope(type, storeName) {
+      let shop = "平台";
       let goods = "全部商品";
+      if (storeName !== "platform") shop = storeName;
       switch (type) {
         case "ALL":
           goods = "全部商品";
@@ -874,7 +876,7 @@ export default {
           goods = "部分分类商品";
           break;
       }
-      return `${goods}可用`;
+      return `${shop}${goods}可用`;
     },
   },
 };
@@ -1380,6 +1382,7 @@ export default {
 .coupon-item {
   width: 280px;
   height: 125px;
+  margin-left: 0;
   margin-right: 10px;
   margin-bottom: 10px;
   overflow: hidden;
@@ -1470,6 +1473,10 @@ export default {
 .coupon-list {
   max-height: 260px;
   overflow: scroll;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  justify-content: flex-start;
 }
 
 .pay-gcc-module {

buyer/vue.config.js

@@ -51,7 +51,13 @@ module.exports = {
         minSize: 20000,
         cacheGroups: {
           vendor: {
-            test: /[\\/]node_modules[\\/]/,
+            test(module) {
+              if (!module.context) return false;
+              if (/[\\/]node_modules[\\/]vue-qr[\\/]/.test(module.context)) {
+                return false;
+              }
+              return /[\\/]node_modules[\\/]/.test(module.context);
+            },
             name(module) {
               const match =
                 module.context &&