购物车按钮

src/views/mall/components/details.vue

@@ -4,7 +4,10 @@
   <!-- <Navbar /> -->
   <div class="default-width pb-5 mt-3 pt-3" v-if="state.goodsInfo && Object.keys(state.goodsInfo).length">
     <v-card class="carousel border-radius-8 white-bgc pa-5" style="width: 100%;">
-      <v-btn variant="text" size="x-large" prepend-icon="mdi-chevron-triple-left" color="primary" @click.stop="goBack">返回</v-btn>
+      <div class="d-flex justify-space-between align-center">
+        <v-btn variant="text" size="x-large" prepend-icon="mdi-chevron-triple-left" color="primary" @click.stop="goBack">返回</v-btn>
+        <v-btn variant="text" size="x-large" prepend-icon="mdi-cart-outline" color="primary" @click.stop="goBack">购物车</v-btn>
+      </div>
       <div class="mt-1 d-flex">
         <!-- 图片展示-轮播 -->
         <div style="width: 400px; height: 400px;">

src/views/mall/home/index.vue

@@ -17,9 +17,12 @@
           </v-carousel>
         </div>
 
-        <v-tabs class="mt-10" v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa">
-          <v-tab v-for="(val, i) in tabList" :key="i" :value="val.value">{{ val.title }}</v-tab>
-        </v-tabs>
+        <div class="tabs">
+          <v-tabs class="mt-10" v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa">
+            <v-tab v-for="(val, i) in tabList" :key="i" :value="val.value">{{ val.title }}</v-tab>
+          </v-tabs>
+          <v-btn class="cart" variant="text" prepend-icon="mdi-cart-outline" color="primary" @click="handleTo('/mall/cart')">购物车</v-btn>
+        </div>
 
         <!-- 热门商品 -->
         <HotGoods v-if="tab === 0" :templateData="template" />
@@ -44,6 +47,7 @@ import { useMallStore } from '@/store/mall'
 import { useUserStore } from '@/store/user'
 import Snackbar from '@/plugins/snackbar'
 import { useRouter } from 'vue-router'
+import { getToken } from '@/utils/auth'
 
 const router = useRouter()
 
@@ -90,6 +94,8 @@ const loginSuccess = () => {
     setTimeout(() => {
       returnUrl.value = ''
     }, 1000)
+  } else {
+    window.location.reload()
   }
 }
 
@@ -97,7 +103,28 @@ const loginClose = () => {
   showLogin.value = false
   Snackbar.warning('您已取消登录')
 }
+
+const handleTo = (path) => {
+  if (!getToken()) {
+    Snackbar.warning('请先登录')
+    showLogin.value = true // 打开快速登录弹窗
+    returnUrl.value = path
+    return
+  }
+  router.push(path)
+}
 </script>
 
 <style scoped lang="scss">
+.tabs {
+  position: relative;
+  .cart {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 48px;
+    line-height: 48px;
+    // color: var(--v-primary-base);
+  }
+}
 </style>