Browse Source

feat: 登录相关

Tim_Walker 2 years ago
parent
commit
31c05a7799
3 changed files with 115 additions and 21 deletions
  1. 0 1
      src/App.vue
  2. 38 20
      src/pages/login/index.vue
  3. 77 0
      src/service/index.js

+ 0 - 1
src/App.vue

@@ -1,6 +1,5 @@
 <script>
 import { updateVersion } from './utils/system';
-
 export default {
   onLaunch() {
     //#ifdef MP-WEIXIN

+ 38 - 20
src/pages/login/index.vue

@@ -1,33 +1,56 @@
 <template>
   <view class="container">
-    <view class="login-btn">
-      <u-button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信用户一键登录</u-button>
+    <u-image src="@/static/logo.png"></u-image>
+    <view class="login-btn-wrap">
+      <u-button shape="circle" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信用户一键登录</u-button>
+      <u-button shape="circle" :customStyle="{ 'margin-top': '20rpx' }">手机号登录/注册</u-button>
+    </view>
+    <view>
+      我已阅读并同意
+      <text>《用户协议》</text>
+      <text>《隐私政策》</text>
     </view>
   </view>
 </template>
 
 <script>
 import { getWxLoginCode, getOpenId } from '@/api/system.js';
+import { request } from '@/service';
 export default {
   data() {
     return {
       appid: 'wx962bee9cb47b1696',
       secret: '366ebb364f2180d59de5c42e25a453ea',
+      form: {
+        client_id: 'chelvc_client',
+        client_secret: 'qWBe6jD%GCuPPTkP',
+        grant_type: 'wechat',
+        token: '',
+        mobile: '',
+      },
     };
   },
   methods: {
     async getPhoneNumber(e) {
       console.log(e);
       // TODO: update appid and secret
-      if (e.detail.errMsg != 'getPhoneNumber:ok') return uni.$u.toast('。。。');
-      const { encryptedData, iv } = e.detail;
-      const code = await getWxLoginCode();
-      const { openid, session_key } = await getOpenId(this.appid, this.secret, code);
-      // var pc = new WXBizDataCrypt(this.appid, session_key);
-
-      // var data = pc.decryptData(encryptedData, iv);
-
-      console.log('解密后 data: ', data);
+      if (e.detail.errMsg != 'getPhoneNumber:ok') return uni.$u.toast('请授权使用您的手机号');
+      this.form.mobile = e.detail.encryptedData;
+      this.form.token = await getWxLoginCode();
+      uni.getSystemInfoAsync({
+        success: res => {
+          console.log(res);
+        },
+      });
+      request({
+        url: '/uc/login',
+        method: 'post',
+        data: this.form,
+        header: {
+          'Content-type': 'application/form-data',
+        },
+        loadingText: '登录中...',
+      });
     },
   },
 };
@@ -35,15 +58,10 @@ export default {
 
 <style scoped>
 .container {
-  height: 100vh;
-  position: relative;
+  padding: 0 40rpx;
+  margin: 0 auto;
 }
-.login-btn {
-  padding: 0 20rpx;
-  box-sizing: border-box;
-  position: absolute;
-  top: 30%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.login-btn-wrap {
+  margin-top: 200rpx;
 }
 </style>

+ 77 - 0
src/service/index.js

@@ -0,0 +1,77 @@
+import { getSystemInfoAsync } from '@/utils/system';
+
+const BASE_URL = 'http://test.chelvc.com/api';
+const TIME_OUT = 60000;
+const errStatus = {
+  200: '成功',
+  400: '请求参数异常',
+  401: '用户认证失败,需要用户重新认证',
+  403: '用户无访问权限',
+  404: '访问的目标资源不存在',
+  405: '请求方式不支持',
+  406: '接口参数传递方式不支持',
+  410: '用户令牌已被重置,需要用户重新登录',
+  412: '参数校验异常,具体格式请查看响应参数格式',
+  415: '接口媒体类型不支持',
+  500: '服务端异常',
+};
+// const { osName, deviceId, osversion } = getSystemInfoAsync();
+
+export function request(options) {
+  uni.showLoading({
+    title: options.loadingText || '加载中...',
+  });
+  return new Promise((resolve, reject) => {
+    return uni.request({
+      timeout: TIME_OUT,
+      url: BASE_URL + options.url,
+      method: options.method.toUpperCase() || 'GET',
+      data: options.data,
+      header: Object.assign(
+        {},
+        {
+          'Content-Type': 'application/json; charset=utf-8',
+          client_id: 'chelvc_client',
+          client_secret: 'qWBe6jD%GCuPPTkP',
+          grant_type: 'wechat',
+          // Platform: osName.toUpperCase(),
+          // Device: deviceId,
+          // Version: osversion,
+          // Terminal: 'APPLET',
+        },
+        options.header,
+      ),
+      success: res => {
+        if (res.statusCode === 200) {
+          resolve(res.data);
+        } else {
+          uni.showToast({
+            icon: 'none',
+            title: errStatus[res.statusCode],
+            duration: 2000,
+          });
+        }
+      },
+      fail: err => {
+        console.log('fail:err', err);
+        if (err.errMsg.includes('timeout')) {
+          uni.showToast({
+            icon: 'none',
+            title: '网络连接超时,请检查您的网络',
+            duration: 2000,
+          });
+        }
+        reject(err);
+      },
+      complete: () => {
+        uni.hideLoading();
+      },
+    });
+  });
+}
+
+export function send(options) {
+  // TODO: add token in this method when login successfully
+  // const access_token = store.getters.access_token;
+  return request(options);
+}