获取用户信息组件添加

components/auth/auth.vue

@@ -0,0 +1,101 @@
+<template>
+  <view class="mask" v-if="show">
+    <view class="content shadow">
+      <view class="text-black text-bold text-lg margin-bottom-lg">健康码小程序</view>
+      <view class="text-df text-gray">为了您的正常使用</view>
+      <view class="text-df text-gray margin-bottom-lg">小程序需要获得您的基本公开信息</view>
+
+      <button
+        @tap="getuserinfo"
+        class="text-purple"
+        open-type="getUserInfo"
+        plain
+        style="border: none;"
+      >极速登录</button>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex';
+
+export default {
+  data() {
+    return { show: false };
+  },
+  computed: {
+    ...mapState('user', ['user']),
+  },
+
+  watch: {
+    // 登录以后 如果没有微信信息
+    // 就显示本组件
+    user(value) {
+      if (value) {
+        if (!value.wxInfo || !value.wxInfo.nickname) {
+          this.show = true;
+        }
+      }
+    },
+  },
+
+  methods: {
+    ...mapActions('user', ['updateUserInfo']),
+
+    // 获取用户信息
+    getuserinfo() {
+      this.show = false;
+      uni.getUserInfo({
+        provider: 'weixin',
+        success: infoRes => {
+          const {
+            nickName,
+            avatarUrl,
+            city,
+            country,
+            gender,
+            language,
+            province,
+          } = infoRes.userInfo;
+          const params = {
+            nickname: nickName,
+            headImgUrl: avatarUrl,
+            city,
+            country,
+            sex: gender,
+            language,
+            province,
+          };
+          this.updateUserInfo(params);
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.mask {
+  z-index: 9998;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.2);
+}
+.content {
+  z-index: 9999;
+  position: absolute;
+  left: 50upx;
+  top: 50%;
+  box-sizing: border-box;
+  width: 650upx;
+  padding: 20px;
+  font-size: 14px;
+  transform: translate3d(0, -50%, 0);
+  background: #fff;
+  border-radius: 20upx;
+  text-align: center;
+}
+</style>

config/api/user.js

@@ -2,3 +2,6 @@ const proxyUrl = '/tall/v1.0';
 
 // 登录api
 export const SIGN_IN = `${proxyUrl}/users/signin`;
+
+// 上传用户微信信息
+export const UPDATE_USER = `${proxyUrl}/users/userInfo`;

pages/index/index.vue

@@ -5,6 +5,8 @@
       <mine v-else />
     </view>
     <nav-bottom @change="onNavChange" @scan="onScan" class="nav-bottom"></nav-bottom>
+
+    <auth />
   </view>
 </template>
 

store/modules/user/actions.js

@@ -1,6 +1,7 @@
-import { showModal } from 'utils/ui';
+import { showModal, showToast } from 'utils/ui';
 import { mpLogin, signIn } from 'utils/user';
-import { GET_USER_INFO, SUBMIT_USER_INFO } from 'api/user';
+import { UPDATE_USER } from 'api/user';
+import { http } from 'plugins/request/index';
 
 const actions = {
   // 登录
@@ -38,6 +39,27 @@ const actions = {
       })
       .catch(err => showModal(err));
   },
+
+  /**
+   * 上传用户的微信信息
+   * @param {*} commit
+   * @param {object} params 提交的完整数据
+   */
+  updateUserInfo({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      http
+        .post(UPDATE_USER, params)
+        .then(res => {
+          const { data } = res.data;
+          commit('updateUser', { type: 'wxInfo', params });
+          resolve(data);
+        })
+        .catch(data => {
+          showToast(data.msg || '保存用户信息失败');
+          reject(data);
+        });
+    });
+  },
 };
 
 export default actions;