快速登录弹窗

src/views/mall copy/index.vue

@@ -72,6 +72,7 @@ const handleLogin = () => {
 const loginSuccess = () => {
   showLogin.value = false
   Snackbar.success('登录成功')
+  window.location.reload()  
 }
 
 const loginClose = () => {

src/views/mall/components/details.vue

@@ -11,7 +11,6 @@
               v-show="showSelectedSkuImg"
               size="x-small" 
               class="close px-3"
-              :disabled="inputValue <= min || disabled" 
               @click="selectedSkuPicUrl = ''"
             >关闭</v-btn>
           </div>
@@ -47,11 +46,6 @@
     </v-card>
     <!-- 详情描述 detail-content-card -->
     <v-card class="carousel border-radius-8 white-bgc pa-5 mt-3" style="width: 100%;">
-      <!-- <div class="resume-header">
-        <div class="resume-title">
-          详情
-        </div>
-      </div> -->
       <div>
         <div class="mb-3">
           <v-tabs v-model="describeTab" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:model-value="null">
@@ -64,6 +58,8 @@
       </div>
     </v-card>
   </div>
+  <!-- 快速登录 -->
+  <loginPage v-if="showLogin" @loginSuccess="loginSuccess" @close="loginClose"></loginPage>
 </template>
 
 <script setup>
@@ -75,6 +71,8 @@ import comment from './details/detail-comment-card.vue'
 import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import Snackbar from '@/plugins/snackbar'
+import { getToken } from '@/utils/auth'
+import loginPage from '@/views/common/loginDialog.vue'
 
 const router = useRouter()
 const { id } = router.currentRoute.value.params
@@ -137,6 +135,7 @@ function onSkuChange(e) {
 
 const selectedSkuInfo = ref(null) // 购买规格信息
 const onBuy = async (info) => {
+  if (!getToken()) return handleLogin()
   selectedSkuInfo.value = info
   console.log('购买规格信息:', info)
 }
@@ -157,6 +156,24 @@ const onBuy = async (info) => {
 //   });
 // }
 
+const showLogin = ref(false)
+const handleLogin = () => {
+  Snackbar.warning('您还未登录，请先登录后再试')
+  showLogin.value = true // 打开快速登录弹窗
+}
+
+// 快速登录
+const loginSuccess = () => {
+  showLogin.value = false
+  Snackbar.success('登录成功')
+  // router.go(0)
+}
+
+const loginClose = () => {
+  showLogin.value = false
+  Snackbar.warning('您已取消登录')
+}
+
 </script>
 <style lang="scss" scoped>
 .border-radius-8 {

src/views/mall/components/details/detail-comment-card.vue

@@ -15,7 +15,7 @@
       <v-tabs v-model="currentTab" align-tabs="start" color="#ff8a04" @update:model-value="onTabsChange">
         <v-tab v-for="item of typeList" :key="item.name" :value="item.tab">{{ item.name }}</v-tab>
       </v-tabs>
-      <div class="card-content mt-5 px-3">
+      <div class="card-content mt-5 px-3" style="min-height: 300px;">
         <template v-if="state.commentList.length">
           <div class="comment-box" v-for="item in state.commentList" :key="item.id">
             <comment-item :item="item" />
@@ -27,6 +27,9 @@
             @handleChange="handleChangePage"
           ></CtPagination>
         </template>
+        <template v-else>
+          <div style="margin: 30px auto; color: #777;">暂无数据</div>
+        </template>
       </div>
     </div>
   </div>
@@ -64,7 +67,7 @@
 
   async function getList(id) {
     id = id || props.goodsId
-    // const res = await getCommentPage(id, 1, 3, 0);
+    state.commentList = []
     const res = await getCommentPage(
       props.goodsId,
       query.value.pageNo,
@@ -87,7 +90,6 @@
   function onTabsChange(e) {
     // 加载列表
     query.value.pageNo = 1;
-    state.list = [];
     query.value.total = 0;
     getList()
   }