完善手机密码登录和Vuex状态管理

2025-08-18 12:11:54 +08:00 · 2022-04-20 03:08:59 +08:00
parent 671b5d343e
commit 93352b5386
12 changed files with 187 additions and 100 deletions
--- a/yudao-ui-app/pages/cart/cart.vue
+++ b/yudao-ui-app/pages/cart/cart.vue
@@ -4,7 +4,7 @@
      <u-empty mode="car" width="500rpx" height="500rpx" icon="/static/images/empty/cart.png"></u-empty>
    </view>

-    <view class="login-tips-box">
+    <view v-if="!hasLogin" class="login-tips-box">
      <view class="login-tips">
        <navigator url="/pages/login/login" open-type="navigate" hover-class="none">
          <text class="login-link">登录</text>
@@ -23,7 +23,12 @@ export default {
    }
  },
  onLoad() {},
-  methods: {}
+  methods: {},
+  computed: {
+    hasLogin() {
+      return this.$store.getters.hasLogin
+    }
+  }
 }
 </script>

--- a/yudao-ui-app/pages/login/login.vue
+++ b/yudao-ui-app/pages/login/login.vue
@@ -53,15 +53,13 @@ import { passwordLogin, sendSmsCode, smsLogin } from '../../common/api'
 export default {
  data() {
    return {
-      //租户ID
-      agent: 1,
      currentModeIndex: 0,
      loginModeList: ['密码登录', '验证码登录'],
      inputType: 'password',
      codeDisabled: false,
      codeTips: '',
      formData: {
-        mobile: '15601691234',
+        mobile: '',
        password: '',
        code: ''
      },
@@ -131,17 +129,17 @@ export default {
        })

        //scene:1登陆获取验证码场景
-        sendSmsCode({ agent: 1, mobile: mobile, scene: 1 })
+        sendSmsCode({ mobile: mobile, scene: 1 })
          .then(res => {
            //console.log(res)
            uni.hideLoading()
-            if (res.data.code === 0) {
+            if (res.code === 0) {
              // 这里此提示会被this.start()方法中的提示覆盖
              uni.$u.toast('验证码已发送')
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start()
            } else {
-              uni.$u.toast(res.data.msg)
+              uni.$u.toast(res.msg)
            }
          })
          .catch(err => {
@@ -153,26 +151,30 @@ export default {
    },
    handleSubmit() {
      this.$refs.form.validate().then(res => {
-        uni.$u.toast('登录')
        if (this.currentModeIndex === 0) {
-          passwordLogin({ agent: 1, mobile: this.formData.mobile, password: this.formData.password })
-            .then(res => {
-              if (res.data.code === 0) {
-                uni.$u.toast('登录成功')
-                // TODO 登录成功，保存toke
-              } else {
-                uni.$u.toast(res.data.msg)
-                // TODO 登录失败
-              }
-            })
-            .catch(err => {
-              uni.$u.toast('服务器接口请求异常')
-            })
+          this.handleLoginPromise(passwordLogin({ mobile: this.formData.mobile, password: this.formData.password }))
        } else if (this.currentModeIndex === 1) {
-          smsLogin({ agent: 1, mobile: this.formData.mobile, code: this.formData.code })
+          this.handleLoginPromise(smsLogin({ mobile: this.formData.mobile, code: this.formData.code }))
        }
      })
    },
+    handleLoginPromise(promise) {
+      promise
+        .then(res => {
+          if (res.code === 0) {
+            this.$store.commit('setToken', res.data)
+            uni.$u.toast('登录成功')
+            setTimeout(() => {
+              this.navigateBack()
+            }, 1000)
+          } else {
+            uni.$u.toast(res.msg)
+          }
+        })
+        .catch(err => {
+          uni.$u.toast('接口请求失败')
+        })
+    },
    navigateBack() {
      uni.navigateBack()
    }
@@ -200,8 +202,6 @@ export default {
  }
 }

-
-
 .lk-group {
  height: 40rpx;
  margin-top: 40rpx;
--- a/yudao-ui-app/pages/user/user.vue
+++ b/yudao-ui-app/pages/user/user.vue
@@ -2,8 +2,8 @@
  <view class="container">
    <view class="user-header">
      <view class="user-info" @click="loginOrJump('/pages/profile/profile')">
-        <u-avatar size="80" :src="avatar"></u-avatar>
-        <text class="nick-name">{{ nickName }}</text>
+        <u-avatar size="80" :src="userInfo.avatar"></u-avatar>
+        <text class="nick-name">{{ hasLogin ? userInfo.nickname || '游客' : '点击登录' }}</text>
      </view>
    </view>

@@ -19,8 +19,8 @@
      </view>

      <view class="order-status-box">
-        <u-grid :border="false" :col="orderStatusList.length"
-          ><u-grid-item v-for="(item, index) in orderStatusList" :key="index">
+        <u-grid :border="false" :col="orderStatusList.length">
+          <u-grid-item v-for="(item, index) in orderStatusList" :key="index">
            <u-icon :name="item.icon" :size="32"></u-icon>
            <text class="grid-title">{{ item.title }}</text>
          </u-grid-item>
@@ -45,13 +45,12 @@
      <u-cell class="fun-item" :border="false" icon="gift" title="分销中心" isLink></u-cell>
      <u-cell class="fun-item" :border="false" icon="tags" title="领券中心" isLink></u-cell>
      <u-cell class="fun-item" :border="false" icon="coupon" title="我的优惠券" isLink></u-cell>
-      <u-cell class="fun-item" :border="false" icon="map" title="收货地址"  @click="loginOrJump('/pages/address/list')" isLink></u-cell>
+      <u-cell class="fun-item" :border="false" icon="map" title="收货地址" @click="loginOrJump('/pages/address/list')" isLink></u-cell>
    </u-cell-group>

-    <view class="logout-btn">
-      <u-button type="error" color="#ea322b" text="确定"></u-button>
+    <view v-if="hasLogin" class="logout-btn">
+      <u-button type="error" color="#ea322b" text="退出登录" @click="logout"></u-button>
    </view>
-
  </view>
 </template>

@@ -59,8 +58,6 @@
 export default {
  data() {
    return {
-      avatar: '',
-      nickName: '点击登录',
      orderStatusList: [
        { icon: 'rmb-circle', title: '待支付' },
        { icon: 'car', title: '代发货' },
@@ -76,13 +73,34 @@ export default {
  },
  onLoad() {},
  methods: {
-    loginOrJump(pageUrl){
-      // TODO 判断是否已经登录逻辑
-      if (!uni.getStorageSync('token')) {
+    loginOrJump(pageUrl) {
+      if (!this.hasLogin) {
        uni.$u.route('/pages/login/login')
      } else {
        uni.$u.route(pageUrl)
      }
+    },
+    logout() {
+      uni.showModal({
+        title: '提示',
+        content: '您确定要退出登录吗',
+        success: res => {
+          if (res.confirm) {
+            console.log('用户点击确定')
+            this.$store.commit('logout')
+          } else if (res.cancel) {
+            console.log('用户点击取消')
+          }
+        }
+      })
+    }
+  },
+  computed: {
+    userInfo() {
+      return this.$store.state.userInfo
+    },
+    hasLogin() {
+      return this.$store.getters.hasLogin
    }
  }
 }