feat：退出登录

f66f38fc · qinjianhui · ebd12b8c · f66f38fc · f66f38fc · f66f38fc
Commit f66f38fc authored Nov 02, 2023 by qinjianhui
Hide whitespace changes
Inline Side-by-side

Showing with 59 additions and 21 deletions

src/components/head.vue
+25 -17

src/components/headerNavMobile.vue
+31 -1

src/views/contact.vue
+1 -1

src/views/protocol.vue
+2 -2

No files found.
--- a/src/components/head.vue
+++ b/src/components/head.vue
 <template>
  <header class="header" :class="{ 'no-shadow': !shadow }">
-    <headerNavMobile v-if="$isMobile" :nav="navbar"></headerNavMobile>
+    <headerNavMobile v-if="$isMobile" :nav="navbar" :userInfo="userInfo"></headerNavMobile>
    <div class="container" v-else>
      <div class="logo">
        <span class="logo_text">
@@ -19,23 +19,22 @@
          </li>
        </ul>
      </nav>
-      <!-- <div class="user-info" v-if="userInfo">
-        <div class="user-msg">
-          <span class="user-name">{{ '小溪' }}</span>
-          <span>欢迎您</span>
-        </div>
-        <div class="logout" title="退出登录" @click="logout">
-          <img src="../assets/images/logout.png"/>
-        </div>
-      </div> -->
      <div class="right_btn">
        <!-- <el-button type="primary" size="mini" @click="login">登录</el-button>
        <el-button size="mini" @click="register">注册</el-button> -->
-        <div class="user-operate">
+        <div class="user-operate" v-if="!userInfo">
          <span class="login-btn" @click="login">登录</span>
          <span class="reg-btn" @click="register">注册</span>
        </div>
+        <div class="user-info" v-else>
+          <div class="user-msg">
+            <span class="user-name">{{ userInfo.companyName }}</span>
+            <span>欢迎您</span>
+          </div>
+          <div class="logout" title="退出登录" @click="logout">
+            <img src="../assets/images/logout.png" />
+          </div>
+        </div>
        <el-button type="primary" @click="freeTrial">免费试用</el-button>
      </div>
    </div>
@@ -64,7 +63,7 @@ export default {
        { name: '价格', path: '/price' },
        { name: '需求痛点', path: '/demand_pain_point' },
        { name: '关于我们', path: '/about_us' },
-        { name: '帮助', path: '/help'},
+        { name: '帮助', path: '/help' },
      ],
    }
  },
@@ -108,6 +107,19 @@ export default {
  right: 0;
  left: 0;
 }
+.user-name {
+  margin-right: 10px;
+}
+.user-msg {
+  color: #fff;
+}
+.logout {
+  margin-right: 30px;
+}
 @media screen and (max-width: 1100px) {
  .header {
    position: sticky;
@@ -156,10 +168,6 @@ export default {
  margin-right: 50px;
 }
-.user-name {
-  margin-right: 10px;
-}
 .logout img {
  width: 20px;
  vertical-align: middle;

--- a/src/components/headerNavMobile.vue
+++ b/src/components/headerNavMobile.vue
@@ -6,11 +6,21 @@
    <div class="header-nav-mobile_logo">
      <img src="../assets/logo.png" height="40px" />
    </div>
-    <div class="header-nav-mobile_login">
+    <div class="header-nav-mobile_login" v-if="!userInfo">
      <span @click="login">登录</span>
      <span style="margin: 0 5px">|</span>
      <span @click="register">注册</span>
    </div>
+    <div class="header-nav-mobile_user" v-else>
+      <span class="user-name">{{ userInfo.companyName }}</span>
+      <span style="margin: 0 10px">欢迎您</span>
+      <span style="margin: 0 5px">|</span>
+      <span style="margin-left: 10px;cursor: pointer;" @click="logout">
+        <img
+          style="width: 16px; height: 16px; vertical-align: middle"
+          src="../assets/images/logout.png" />
+      </span>
+    </div>
    <transition name="header-nav-mobile">
      <div
        v-show="showing"
@@ -35,6 +45,7 @@
  </div>
 </template>
 <script>
+import { mapMutations } from 'vuex'
 export default {
  name: 'headerNavMobile',
  data() {
@@ -46,8 +57,14 @@ export default {
    nav: {
      type: Array,
    },
+    userInfo: {
+      type: Object,
+    },
+  },
+  computed: {
  },
  methods: {
+    ...mapMutations(['setUserInfo']),
    toggleShow() {
      this.showing = !this.showing
    },
@@ -61,6 +78,11 @@ export default {
    register() {
      this.$router.push('/register')
    },
+    logout() {
+      localStorage.removeItem('userInfo')
+      this.setUserInfo(undefined)
+      this.$router.push('/login')
+    },
  },
 }
 </script>
@@ -94,6 +116,14 @@ export default {
  justify-content: flex-end;
 }
+.header-nav-mobile_user {
+  flex: 1;
+  display: flex;
+  font-size: 12px;
+  margin-right: 10px;
+  justify-content: flex-end;
+}
 .header-nav-mobile_trigger {
  flex: 1;
 }

--- a/src/views/contact.vue
+++ b/src/views/contact.vue
@@ -92,7 +92,7 @@ export default {
  },
  methods: {
    goBack() {
-      this.$router.push('/')
+      this.$router.push('/home')
    },
    logout() {},
  },

--- a/src/views/protocol.vue
+++ b/src/views/protocol.vue
@@ -223,8 +223,8 @@
          我们将通过记录用户行为收集您的发单地址、送达地、行踪轨迹、时长信息。我们收集上述信息，是基于法律法规要求以及保护您的人身财产安全、依照平台规则处理用户纠纷之需要。
          我们将使用您的订单信息来进行您的身份核验、确定交易、支付结算、为您查询订单以及提供客服咨询与售后服务；我们还会使用您的订单信息来判断您的交易是否存在异常以保护您的交易安全。
        </p>
-        <p style="text-indent: 2em">（4）支付功能</p>
+        <p>（4）支付功能</p>
-        <p>
+        <p style="text-indent: 2em">
          在您下单后，您可以选择九猫科技（西安）有限公司的关联方或与九猫科技（西安）有限公司合作的第三方支付机构(包括支付宝、微信支付等支付通道，以下称“支付机构”)所提供的支付服务，此时可能需要您提供银行卡卡号、有效期、银行预留手机号、持卡人姓名、持卡人身份证件、卡验证码信息，支付功能本身并不收集您的个人信息，但我们需要将您的九猫科技（西安）有限公司订单号与交易金额信息与这些支付机构共享以实现其确认您的支付指令并完成支付。“关联方”指一方现在或将来控制、受控制或与其处于共同控制下的任何公司、机构以及上述公司或机构的法定代表人。“控制”
          是指直接或间接地拥有影响所提及公司管理的能力，无论是通过所有权、有投票权的股
          份、合同或其他被人民法院认定的方式。