feat: 询盘登录逻辑调整

xinkeaboard-web/assets/style/loginModal.scss

@@ -1,326 +0,0 @@
-.sld_login_content {
-  width: 376px;
-  height: 391px;
-  position: relative;
-
-  .close_icon {
-    position: absolute;
-    top: -6px;
-    z-index: 999;
-    right: 25px;
-    color: #999;
-  }
-
-  .login {
-    width: 376px;
-    height: 391px;
-    margin: auto;
-    z-index: 99;
-   
-    position: relative;
-
-    .login_box {
-      position: relative;
-      z-index: 10000;
-      background: #fff;
-      padding: 10px 10px 50px;
-
-      .qrLogin {
-        position: absolute;
-        top: -23px;
-        left: 0;
-        z-index: 9;
-        .qrLeft {
-          width: 45px;
-          cursor: pointer;
-        }
-        .qrRight {
-          width: 86px;
-          height: 28px;
-          position: absolute;
-          top: 4px;
-          left: 50px;
-          z-index: 9;
-        }
-      }
-
-      .qrMain {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        width: 356px;
-        height: 345px;
-        cursor: default;
-        .qrMain_code {
-          position: relative;
-          width: 210px;
-          height: 210px;
-          .qrMain_code_bg {
-              width:100%;
-              height:100%;
-          }
-          .qrMain_code_cover {
-            width: 100%;
-            height: 100%;
-            background: rgba(0,0,0,.6);
-            position: absolute;
-            top: 0;
-            left: 0;
-            z-index: 9;
-            color: #FFFFFF;
-            text-align: center;
-            p {
-              font-size: 19px;
-              font-weight: 700;
-              margin-top: 65px;
-              margin-bottom: 40px;
-            }
-            .qrMain_code_cover_p {
-                margin-top: 90px;
-            }
-            div {
-              width: 100px;
-              line-height: 34px;
-              font-size: 13px;
-              font-weight: 700;
-              letter-spacing: 1px;
-              background: #E2231B;
-              border-radius: 3px;
-              margin: 0 auto;
-              cursor: pointer;
-            }
-          }
-        }
-        .qrMain_title {
-          color: #999999;
-          font-size: 13px;
-          font-weight: 700;
-          margin-top: 17px;
-          margin-bottom: 12px;
-        }
-        .qrMain_tips {
-          color: #999999;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          .qrMain_tips_item {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-right: 15px;
-            &:last-child {
-                margin-right: 0;
-            }
-            img {
-                position: relative;
-                top: 1px;
-                width: 15px;
-            }
-            span {
-                margin-left: 6px;
-            }
-          }
-        }
-      }
-
-      .top {
-        margin-top: 20px;
-        padding: 0 20px;
-        display: flex;
-        width: 356px;
-        cursor: default;
-
-        .item {
-          flex: 1;
-          text-align: center;
-          font-size: 18px;
-          color: #999999;
-          cursor: pointer;
-          position: relative;
-
-          &:first-child {
-            padding: 16px 45px 18px 35px;
-            &.active {
-              &:after {
-                  position: absolute;
-                  left: 50%;
-                  bottom: 0;
-                  margin-left: -45px;
-                  content: '';
-                  width: 80px;
-                  height: 1px;
-                  background-color: $colorMain;
-              }
-            }
-          }
-
-          &:last-child {
-            padding: 16px 35px 18px 45px;
-            &:before {
-              position: absolute;
-              left: 0;
-              top: 12px;
-              bottom: 12px;
-              width: 2px;
-              height: auto;
-              display: block;
-              content: " ";
-              font-size: 0;
-              background: #eee;
-            }
-            &.active {
-              &:after {
-                position: absolute;
-                left: 50%;
-                bottom: 0;
-                margin-left: -35px;
-                content: '';
-                width: 80px;
-                height: 1px;
-                background-color: $colorMain;
-              }
-            }
-          }
-
-          &.active {
-            color: #333333; /* $colorMain; */
-            font-weight: 700;
-          }
-        }
-      }
-
-      .center {
-        padding: 30px 30px 40px;
-
-        .item {
-          position: relative;
-          margin-top: 15px;
-          border-radius: 2px;
-
-          &:first-child {
-            margin-top: 0;
-          }
-
-          .icon {
-            position: absolute;
-            left: 1px;
-            top: 1px;
-            width: 50px;
-            text-align: center;
-            height: 38px;
-            background: #f8f8f8;
-
-            .input {
-              border: 1px solid #e8e8e8;
-              height: 40px;
-              padding: 0 44px 0 60px;
-              width: 100%;
-            }
-          }
-
-          .input {
-            border: 1px solid #e8e8e8;
-            height: 40px;
-            padding: 0 44px 0 60px;
-            width: 100%;
-          }
-
-          &.code {
-            .input {
-              padding-right: 10px;
-              width: 150px;
-            }
-          }
-        }
-
-        .cancel {
-          position: absolute;
-          right: 0;
-          top: 1px;
-          width: 44px;
-          height: 38px;
-          cursor: pointer;
-
-          :before {
-            position: absolute;
-            top: 9px;
-            left: 14px;
-          }
-        }
-
-        .send_code {
-          position: absolute;
-          right: 0;
-          top: 0;
-          background: #f9f9f9;
-          border: 1px solid #eee;
-          border-left: 0;
-          width: 80px;
-          height: 40px;
-          line-height: 40px;
-          text-align: center;
-          color: #000;
-
-          :hover {
-            color: $colorMain;
-          }
-        }
-
-        .error {
-          margin-top: 10px;
-          position: relative;
-          color: $colorMain;
-          height: 16px;
-          line-height: 16px;
-        }
-
-        .login_btn {
-          display: block;
-          margin-top: 35px;
-          background: $colorMain;
-          color: #fff;
-          text-align: center;
-          border-radius: 2px;
-          height: 45px;
-          line-height: 45px;
-          font-size: 18px;
-          letter-spacing: 0px;
-
-          &:hover {
-            opacity: 0.9;
-          }
-        }
-      }
-
-      .bottom {
-        height: 51px;
-        background: #fcfcfc;
-        border-top: 1px solid #eee;
-        position: absolute;
-        width: 100%;
-        bottom: 0;
-        left: 0;
-        display: flex;
-        padding: 0 32px;
-        box-sizing: border-box;
-
-        a {
-          display: block;
-          line-height: 50px;
-          margin-right: 10px;
-          color: #999;
-
-          &:hover {
-            color: #000;
-          }
-        }
-
-        img {
-          width: 28px;
-          height: 28px;
-        }
-      }
-    }
-  }
-}

xinkeaboard-web/components/LoginDialog.vue

@@ -14,8 +14,9 @@
         :rules="rules"
         label-position="top"
       >
-        <el-form-item :label="L['loginDialog']['邮箱']" prop="email">
+        <el-form-item class="login-email" :label="L['loginDialog']['邮箱']" prop="email">
           <el-input v-model="ruleForm.email" clearable />
+          <div v-if="emailExistMsg" class="login-email-error">{{ emailExistMsg }}</div>
         </el-form-item>
 
         <el-form-item
@@ -64,6 +65,7 @@ const emit = defineEmits(["login", "register", "forgot", "close"]);
 
 const visible = ref(false);
 const loginLoading = ref(false);
+const emailExistMsg = ref('')
 
 const ruleFormRef = ref();
 
@@ -122,13 +124,10 @@ const login = () => {
         filtersStore.setRefreshToken(res.data.refresh_token);
         filtersStore.setTime(new Date().getTime().toString()); //存储refresh_token更新时间
         //获取用户信息，并同步信息到pinia
+        emailExistMsg.value = ''
         return res;
       }
-      showMessage({
-        message: res.msg,
-        type: "error",
-      });
-
+      emailExistMsg.value = res.msg;
       return Promise.reject();
     })
     .then(() => {
@@ -211,6 +210,17 @@ defineExpose({ open });
       }
     }
   }
+
+  .login-email {
+    position: relative;
+    margin-bottom: 25px;
+    &-error {
+      position: absolute;
+      left: 0;
+      bottom: -30px;
+      color: red;
+    }
+  }
 }
 
 .login-bottom {

xinkeaboard-web/components/SldLoginModal.vue

@@ -1,225 +0,0 @@
-<!--登录弹框 @zjf-2021-01-08-->
-<template>
-  <div class="sld_login_modal">
-    <el-dialog
-      title=""
-      :model-value="modalVisible"
-      :close-on-click-modal="false"
-      :show-close="false"
-    >
-      <div class="sld_login_content">
-        <span
-          class="iconfont icon-shanchutupian close_icon"
-          @click="closeModal"
-        />
-        <div class="login">
-          <div class="login_box">
-            <div class="top">
-              <div class="item1">{{ L["账号登录"] }}</div>
-            </div>
-            <div class="center">
-              <div class="item account">
-                <span
-                  style="color: #bbb; font-size: 19px; padding-top: 7px"
-                  class="icon iconfont icon-wode"
-                ></span>
-                <input
-                  type="text"
-                  v-model="name"
-                  :placeholder="L['请输入账号']"
-                  class="input"
-                />
-                <div
-                  data-type="userName"
-                  class="cancel"
-                  @click="clearInputVal('name')"
-                >
-                  <span style="color: #bbb" class="iconfont icon-cuowu"></span>
-                </div>
-              </div>
-              <div class="item password">
-                <span
-                  style="color: #bbb; font-size: 21px; padding-top: 7px"
-                  class="icon iconfont icon-mima1"
-                ></span>
-                <input
-                  type="password"
-                  v-model="password"
-                  :placeholder="L['请输入密码']"
-                  class="input"
-                  autocomplete="new-password"
-                />
-                <div
-                  data-type="password"
-                  class="cancel"
-                  @click="clearInputVal('password')"
-                >
-                  <span style="color: #bbb" class="iconfont icon-cuowu"></span>
-                </div>
-              </div>
-              <div class="error">
-                <span
-                  v-if="errorMsg"
-                  style="color: #e1251b; font-size: 14px"
-                  class="iconfont icon-jubao"
-                ></span>
-                {{ errorMsg }}
-              </div>
-              <a href="javascript:void(0)" @click="login" class="login_btn">{{
-                L["登录"]
-              }}</a>
-            </div>
-            <div :class="{ bottom: true, flex_row_between_center: true }">
-              <router-link tag="a" :to="`/register`">
-                {{ L["立即注册"] }}
-              </router-link>
-              <router-link tag="a" :to="`/member/login/forget`">
-                {{ L["忘记密码"] }}
-              </router-link>
-            </div>
-          </div>
-        </div>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-import { ref, getCurrentInstance, watchEffect } from "vue";
-// import { lang_zn } from "@/assets/language/zh";
-import { getCurLanguage } from '@/composables/common.js';
-import { useFiltersStore } from "@/store/filter.js";
-import { ElMessage, ElButton, ElInput,ElDialog,ElCheckbox } from "element-plus";
-
-const filtersStore = useFiltersStore();
-// const L = lang_zn;
-const L = getCurLanguage();
-const modalVisible = ref(true);
-const route = useRoute();
-const name = ref(""); //用户名
-const errorMsg = ref(); //错误提示
-const password = ref(""); //密码
-const loginType = ref(1); //登陆类型：1-账号密码登陆，2-手机验证码登陆
-const fromurl = ref("");
-const emit = defineEmits(['refreshInfo','closeLoingModal'])
-const login = () => {
-  let param = {};
-  param.username = name.value;
-  param.password = password.value;
-  param.loginType = loginType.value;
-
-  //账号验证
-  if (!param.username) {
-    errorMsg.value = L["请输入账号"];
-    return false;
-  }
-
-  //密码校验
-  if (!param.password) {
-    errorMsg.value = L["请输入密码"];
-    return false;
-  } else {
-    let checkPwdVal = checkPwd(param.password);
-    if (checkPwdVal !== true) {
-      errorMsg.value = checkPwdVal;
-      return false;
-    }
-  }
-  post("v3/frontLogin/oauth/token", param).then((res) => {
-    if (res.state == 200) {
-      //将用户信息存缓存，并跳转到首页
-      filtersStore.setLoginStatus(true);
-      filtersStore.setToken(res.data.access_token);
-      filtersStore.setRefreshToken(res.data.refresh_token)
-      filtersStore.setTime(new Date().getTime().toString())//存储refresh_token更新时间
-      //获取用户信息，并同步信息到vuex
-      get("v3/member/front/member/getInfo").then((res) => {
-        if (res.state == 200) {
-          emit("refreshInfo");
-          filtersStore.setMemberInfo(res.data)
-          closeModal();
-          if(process.client){
-            if (window.history.state.back) {
-                if(window.history.state.back == '/register' || window.history.state.back == '/member/login/forget'){
-                window.location.href = '/'
-                }else{
-                window.location.href = window.history.state.back;
-                }
-            }else{
-                window.location.reload()
-            }
-          }
-
-        }
-      });
-    } else {
-      //提示错误
-      errorMsg.value = res.msg;
-    }
-  });
-};
-
-//清空输入框内容
-const clearInputVal = (type) => {
-  if (type == "name") {
-    name.value = "";
-  } else if (type == "password") {
-    password.value = "";
-  }
-};
-
-
-
-watchEffect(() => {
-  if(process.client){
-    if (modalVisible.value == false) {
-        document.body.style.overflow = "";
-    } else {
-        fromurl.value = window.location.origin + route.fullPath;
-    }
-  }
-
-});
-
-//关闭登录modal
-const closeModal = () => {
-  emit("closeLoingModal");
-};
-</script>
-
-<style lang="scss">
-@import "@/assets/style/loginModal.scss";
-
-.sld_login_modal {
-  .el-dialog {
-    width: 376px !important;
-  }
-
-  .el-dialog__body {
-    padding: 0;
-  }
-
-  .el-dialog__headerbtn {
-    z-index: 999;
-  }
-}
-
-.sld_login_modal {
-  .sld_login_content {
-    .login {
-      .login_box {
-        .top {
-          .item1 {
-            flex: 1;
-            text-align: center;
-            font-size: 18px;
-            color: #666;
-            position: relative;
-            cursor: default;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

xinkeaboard-web/components/loginModal.vue

@@ -1,223 +0,0 @@
-<!--登录弹框 @zjf-2021-01-08-->
-<template>
-  <div class="sld_login_modal">
-    <el-dialog
-      title=""
-      :model-value="modalVisible"
-      :close-on-click-modal="false"
-      :show-close="false"
-    >
-      <div class="sld_login_content">
-        <span
-          class="iconfont icon-shanchutupian close_icon"
-          @click="closeModal"
-        />
-        <div class="login">
-          <div class="login_box">
-            <div class="top">
-              <div class="item1">{{ L["账号登录"] }}</div>
-            </div>
-            <div class="center">
-              <div class="item account">
-                <span
-                  style="color: #bbb; font-size: 19px; padding-top: 7px"
-                  class="icon iconfont icon-wode"
-                ></span>
-                <input
-                  type="text"
-                  v-model="name"
-                  :placeholder="L['请输入账号']"
-                  class="input"
-                />
-                <div
-                  data-type="userName"
-                  class="cancel"
-                  @click="clearInputVal('name')"
-                >
-                  <span style="color: #bbb" class="iconfont icon-cuowu"></span>
-                </div>
-              </div>
-              <div class="item password">
-                <span
-                  style="color: #bbb; font-size: 21px; padding-top: 7px"
-                  class="icon iconfont icon-mima1"
-                ></span>
-                <input
-                  type="password"
-                  v-model="password"
-                  :placeholder="L['请输入密码']"
-                  class="input"
-                  autocomplete="new-password"
-                />
-                <div
-                  data-type="password"
-                  class="cancel"
-                  @click="clearInputVal('password')"
-                >
-                  <span style="color: #bbb" class="iconfont icon-cuowu"></span>
-                </div>
-              </div>
-              <div class="error">
-                <span
-                  v-if="errorMsg"
-                  style="color: #e1251b; font-size: 14px"
-                  class="iconfont icon-jubao"
-                ></span>
-                {{ errorMsg }}
-              </div>
-              <a href="javascript:void(0)" @click="login" class="login_btn">{{
-                L["登录"]
-              }}</a>
-            </div>
-            <div :class="{ bottom: true, flex_row_between_center: true }">
-              <router-link tag="a" :to="`/register`">
-                {{ L["立即注册"] }}
-              </router-link>
-              <router-link tag="a" :to="`/pwd/forget`">
-                {{ L["忘记密码"] }}
-              </router-link>
-            </div>
-          </div>
-        </div>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup>
-// import { lang_zn } from "@/assets/language/zh";
-import { getCurLanguage } from '@/composables/common.js';
-// const L = lang_zn;
-const L = getCurLanguage();
-const props = defineProps(["visibleFlag"]);
-const modalVisible = ref(props.visibleFlag);
-const { proxy } = getCurrentInstance();
-const route = useRoute();
-const name = ref(""); //用户名
-const errorMsg = ref(); //错误提示
-const password = ref(""); //密码
-const loginType = ref(1); //登陆类型：1-账号密码登陆，2-手机验证码登陆
-const fromurl = ref("");
-
-const login = () => {
-  let param = {};
-  param.username = name.value;
-  param.password = password.value;
-  param.loginType = loginType.value;
-
-  //账号验证
-  if (!param.username) {
-    errorMsg.value = L["请输入账号"];
-    return false;
-  }
-
-  //密码校验
-  if (!param.password) {
-    errorMsg.value = L["请输入密码"];
-    return false;
-  } else {
-    let checkPwdVal = checkPwd(param.password);
-    if (checkPwdVal !== true) {
-      errorMsg.value = checkPwdVal;
-      return false;
-    }
-  }
-
-  //如果未登录vuex中有购物车数据，需同步到该用户
-  let cartInfo = [];
-  let cartListData = store.state.cartListData;
-  if (JSON.stringify(cartListData) != "{}") {
-    cartListData.storeCartGroupList.map((cartListItem) => {
-      cartListItem.promotionCartGroupList.map((promotItem) => {
-        promotItem.cartList.map((cartItem) => {
-          cartInfo.push({
-            productId: cartItem.productId,
-            buyNum: cartItem.buyNum,
-          });
-        });
-      });
-    });
-  }
-  param.cartInfo = JSON.stringify(cartInfo);
-  post("v3/frontLogin/oauth/token", param).then((res) => {
-    if (res.state == 200) {
-      //将用户信息存缓存，并跳转到首页
-      localStorage.setItem("access_token", res.data.access_token);
-      localStorage.setItem("refresh_token", res.data.refresh_token);
-      localStorage.setItem("time", new Date().getTime().toString()); //存储refresh_token更新时间
-      //获取用户信息，并同步信息到vuex
-      get("v3/member/front/member/getInfo").then((res) => {
-        if (res.state == 200) {
-          emit("refreshInfo");
-          store.commit("updateMemberInfo", res.data);
-        //   proxy.$getLoginCartListData(); //更新购物车数据
-          closeModal();
-        }
-      });
-    } else {
-      //提示错误
-      errorMsg.value = res.msg;
-    }
-  });
-};
-
-//清空输入框内容
-const clearInputVal = (type) => {
-  if (type == "name") {
-    name.value = "";
-  } else if (type == "password") {
-    password.value = "";
-  }
-};
-
-watchEffect(() => {
-  modalVisible.value = props.visibleFlag;
-  if (modalVisible.value == false) {
-    document.body.style.overflow = "";
-  } else {
-    fromurl.value = window.location.origin + route.fullPath;
-  }
-});
-
-//关闭登录modal
-const closeModal = () => {
-  emit("closeLoingModal");
-};
-</script>
-
-<style lang="scss">
-@import "@/assets/style/loginModal.scss";
-
-.sld_login_modal {
-  .el-dialog {
-    width: 376px !important;
-  }
-
-  .el-dialog__body {
-    padding: 0;
-  }
-
-  .el-dialog__headerbtn {
-    z-index: 999;
-  }
-}
-
-.sld_login_modal {
-  .sld_login_content {
-    .login {
-      .login_box {
-        .top {
-          .item1 {
-            flex: 1;
-            text-align: center;
-            font-size: 18px;
-            color: #666;
-            position: relative;
-            cursor: default;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

xinkeaboard-web/composables/index.js

@@ -1,8 +1,8 @@
 // 测试环境
-export const apiUrl = 'http://54.46.9.88:8001/';
+// export const apiUrl = 'http://54.46.9.88:8001/';
 
 // 本地后端
-// export const apiUrl = 'http://192.168.0.158:8001/';
+export const apiUrl = 'http://192.168.0.158:8001/';
 
 export const defaultUrl = 'http://54.46.9.88:8001/';
 export const supplierUrl = 'http://54.46.9.88:82/user/login';

xinkeaboard-web/pages/goods/detail/[id].vue

@@ -962,12 +962,6 @@
         <!-- 商品主要信息 end -->
       </div>
 
-      <SldLoginModal
-        v-if="loginModalVisibleFlag"
-        @closeLoingModal="closeLoingModal"
-        @refreshInfo="refreshInfo"
-      />
-
       <EnquiryModal
         v-if="enquiryVis"
         :itemType="'GOODS'"
@@ -1029,7 +1023,6 @@ const salesPageSize = ref(20); //店铺热销列表默认一页显示20条数据
 const recommendeData = reactive({ data: {} }); //店铺热销推荐数据
 const couponModel = ref(false); //优惠券弹框是否显示
 const cartListData = reactive({ data: goodsInfox.cartListData }); //获取vux的store中的购物车数据
-const loginModalVisibleFlag = ref(false); //登录弹框是否显示，默认不显示
 const enquiryVis = ref(false); //登录弹框是否显示，默认不显示
 const container = ref(null); // 商品详情页底部内容区
 const containerTop = ref(0); //商品详情页底部内容区的top值
@@ -1644,10 +1637,6 @@ const goBuy = () => {
   enquiryVis.value = true;
 };
 
-//关闭登录弹框
-const closeLoingModal = () => {
-  loginModalVisibleFlag.value = false;
-};
 
 //关闭登录弹框
 const closeEnquiryModal = () => {
@@ -1860,7 +1849,18 @@ const focusStore = () => {
     });
   } else {
     //未登录提示登录
-    loginModalVisibleFlag.value = true;
+    return openLoginDialog({
+      onRegister: () => {
+        router.push({
+          path: "/register",
+        });
+      },
+      onForgot: () => {
+        router.push({
+          path: "/member/login/forget",
+        });
+      },
+    });
   }
 };
 //商品收藏及取消收藏
@@ -1887,7 +1887,18 @@ const collectGoods = () => {
     });
   } else {
     //未登录提示登录
-    loginModalVisibleFlag.value = true;
+    return openLoginDialog({
+      onRegister: () => {
+        router.push({
+          path: "/register",
+        });
+      },
+      onForgot: () => {
+        router.push({
+          path: "/member/login/forget",
+        });
+      },
+    });
   }
 };
 

xinkeaboard-web/pages/goods/list/[...slug].vue

@@ -338,10 +338,6 @@
         :itemId="productId"
         @closeLoingModal="closeEnquiryModal"
       />
-    <SldLoginModal
-    v-if="loginModalVisibleFlag"
-      @closeLoingModal="closeLoingModal"
-    />
   </div>
   </div>
 
@@ -361,7 +357,6 @@ const productId = ref();
 //变量------------------------------
 const firstLoading = ref(true); //是否第一次加载
 const skeletonData = reactive({ data: [] });
-const loginModalVisibleFlag = ref(false); //登录弹框是否显示，默认不显示
 const initSkeletonData = () => {
   for (let i = 0; i < 10; i++) {
     skeletonData.data.push({
@@ -688,13 +683,20 @@ const collectGoods = (defaultProductId, isFollowGoods) => {
     });
   } else {
     //未登录提示登录
-    loginModalVisibleFlag.value = true;
+    return openLoginDialog({
+      onRegister: () => {
+        router.push({
+          path: "/register",
+        });
+      },
+      onForgot: () => {
+        router.push({
+          path: "/member/login/forget",
+        });
+      },
+    });
   }
 };
-//关闭登录弹框
-const closeLoingModal = () => {
-  loginModalVisibleFlag.value = false;
-};
 
 //属性选择--start
 const attriOption = (attributeName, attributeValue, attributeId, attributeValueId) => {

xinkeaboard-web/pages/store/goods/[...slug].vue

@@ -156,10 +156,6 @@
         <!-- 分页 end -->
       </div>
       <!-- 右侧商品 end -->
-      <SldLoginModal
-        v-if="loginModalVisibleFlag"
-        @closeLoingModal="closeLoingModal"
-      />
 
       <!-- 空页面 start-->
       <SldCommonEmpty
@@ -189,7 +185,6 @@ const router = useRouter();
 const storeData = reactive({ cat: [], goods: { list: [], pagination: {} } }); //店铺数据，cat：店铺分类，goods：店铺商品列表
 const sort = ref(0); //0:默认/综合；1、销量从高到底；3、价格从低到高；4、价格从高到低；5、人气从高到低
 const headercat = ref(null); //获取dom的ref,名字同名
-const loginModalVisibleFlag = ref(false); //登录弹框是否显示，默认不显示
 const skeletonData = reactive({ category: [], goods: [] });
 const SEOinfo = reactive({
   seoTitle: "Products",
@@ -408,12 +403,20 @@ const collect = (defaultProductId, isFollowGoods) => {
     });
   } else {
     //未登录的话提示登录
-    loginModalVisibleFlag.value = true;
+    return openLoginDialog({
+      onRegister: () => {
+        router.push({
+          path: "/register",
+        });
+      },
+      onForgot: () => {
+        router.push({
+          path: "/member/login/forget",
+        });
+      },
+    });
   }
 };
-const closeLoingModal = () => {
-  loginModalVisibleFlag.value = false;
-};
 
 onMounted(() => {
   setTimeout(() => {