jmash-core-mp 0.1.2 → 0.1.3

package/README.md

@@ -34,10 +34,21 @@ npm run build -- --targets=wx,ali,web
 
 登录
 minidev login
-预览
-minidev preview --app-id 2021006137629651
 
-rm -rf .cache
+调试开发
+minidev dev
+
+本地 IP 调试
+minidev dev --host 192.168.1.154
+
+真机调试
+minidev remote-debug -a 2021006137629651
+
+Web 端调试
+minidev dev
+web -a 2021006137629651
+真机预览
+minidev preview -a 2021006137629651
 
 # pnpm publish --no-git-checks
 

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "jmash-core-mp",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "dependencies": {
+    "sm-crypto": "^0.4.0",
     "@mpxjs/api-proxy": "^2.10.19",
     "@mpxjs/core": "^2.10.19",
     "@mpxjs/fetch": "^2.10.19",
@@ -22,6 +23,7 @@
     "@babel/plugin-transform-runtime": "^7.10.4",
     "@babel/preset-env": "^7.10.4",
     "@babel/runtime-corejs3": "^7.10.4",
+    "@mini-types/global": "^1.0.33",
     "@mpxjs/babel-plugin-inject-page-events": "^2.9.0",
     "@mpxjs/eslint-config": "^2.0.3",
     "@mpxjs/miniprogram-simulate": "^1.4.17",

package/src/api/auth/index.ts

@@ -1,10 +1,13 @@
 import { ResponseData } from "../../types/core";
+import { OpensType } from "./types";
 import type {
   LoginReq,
   LoginRes,
   RolesPerms,
+  WebLoginReq,
   TokenModel,
-  PhoneNumberReq,
+  PhoneRegisterReq,
+  PhoneReplaceReq,
   UpdateUserReq,
   UserInfoReq,
   UserInfo,
@@ -15,8 +18,14 @@ import { config } from "../../utils/config";
 import mpx from "@mpxjs/core";
 
 class AuthApi {
-  // 登录
-  miniappLogin(data: LoginReq): Promise<ResponseData<LoginRes>> {
+  // 小程序静默登录
+  mpLogin(data: LoginReq): Promise<ResponseData<LoginRes>> {
+    if (__mpx_mode__ === "wx") {
+      data.opensType = OpensType.wechat;
+    }
+    if (__mpx_mode__ === "ali") {
+      data.opensType = OpensType.ali_pay;
+    }
     return mpx.xfetch.fetch({
       url: "/v1/front/rbac/miniapp_login/" + config.tenant,
       method: "POST",
@@ -27,14 +36,59 @@ class AuthApi {
       },
     });
   }
+
   // 手机号注册登录
-  miniappPhoneNumber(data: PhoneNumberReq): Promise<ResponseData<LoginRes>> {
+  mpPhoneRegister(data: PhoneRegisterReq): Promise<ResponseData<LoginRes>> {
+    if (__mpx_mode__ === "wx") {
+      data.opensType = OpensType.wechat;
+    }
+    if (__mpx_mode__ === "ali") {
+      data.opensType = OpensType.ali_pay;
+    }
     return mpx.xfetch.fetch({
       url: "/v1/front/rbac/miniapp_phonenumber/" + config.tenant,
       method: "POST",
       data: data,
+      header: {
+        Authorization: false,
+      },
+    });
+  }
+
+  // 已登陆状态小程序更换绑定手机号
+  replaceBindphone(data: PhoneReplaceReq): Promise<ResponseData<string>> {
+    data.tenant = config.tenant;
+    if (__mpx_mode__ === "wx") {
+      data.opensType = OpensType.wechat;
+    }
+    if (__mpx_mode__ === "ali") {
+      data.opensType = OpensType.ali_pay;
+    }
+    grpc.clearEmpty(data);
+    return mpx.xfetch.fetch({
+      url: "/v1/front/rbac/miniapp_bindphone",
+      method: "POST",
+      data: data,
     });
   }
+
+  //web登录.
+  webLogin(data: WebLoginReq): Promise<ResponseData<TokenModel>> {
+    data.tenant = config.tenant;
+    data.directoryId = "user";
+    data.clientId = config.appId ? config.appId : "h5";
+    data.captchaId = "1";
+    data.captchaCode = "1";
+    return mpx.xfetch.fetch({
+      url: "/v1/rbac/auth/login",
+      method: "POST",
+      data: data,
+      header: {
+        Authorization: false,
+      },
+    });
+  }
+
   // 刷新token
   refreshToken(): Promise<ResponseData<TokenModel>> {
     return mpx.xfetch.fetch({
@@ -144,17 +198,6 @@ class AuthApi {
     });
   }
 
-  // 已登陆状态小程序更换绑定手机号
-  replaceBindphone(data: PhoneNumberReq): Promise<ResponseData<string>> {
-    data.tenant = config.tenant;
-    grpc.clearEmpty(data);
-    return mpx.xfetch.fetch({
-      url: "/v1/front/rbac/miniapp_bindphone",
-      method: "POST",
-      data: data,
-    });
-  }
-
   // 获取当前会话用户的信息
   findUserInfo(data: UserInfoReq): Promise<ResponseData<UserInfo>> {
     data.tenant = config.tenant;

package/src/api/auth/types.ts

@@ -10,6 +10,15 @@ export interface TokenModel {
   tokenType: string;
 }
 
+export enum OpensType {
+  //微信
+  wechat,
+  //支付宝
+  ali_pay,
+  //云闪付
+  union_pay,
+}
+
 // 登录接口传参定义
 export interface LoginReq {
   // 小程序APPID
@@ -18,6 +27,30 @@ export interface LoginReq {
   loginCode: string;
   // 小程序托管微信第三方平台（可选）
   componentAppid?: string;
+  //登录类型
+  opensType?: OpensType;
+}
+
+/**
+ * 登录请求参数
+ */
+export interface WebLoginReq {
+  // 租户
+  tenant?: string;
+  // 目录ID
+  directoryId?: string;
+  //互斥角色
+  scope?: string;
+  //用户名
+  userName: string;
+  //加密密钥
+  encodePwd: string;
+  //验证码缓存key
+  captchaId?: string;
+  //验证码
+  captchaCode?: string;
+  // 客户ID
+  clientId?: string;
 }
 
 // 登录接口接收参数定义
@@ -33,7 +66,7 @@ export interface LoginRes {
 }
 
 // 获取手机号定义
-export interface PhoneNumberReq {
+export interface PhoneRegisterReq {
   // 租户
   tenant?: string;
   // 小程序APPID
@@ -44,8 +77,26 @@ export interface PhoneNumberReq {
   phoneCode: string;
   // 昵称
   nickName?: string;
+  // 头像
+  avatar?: string;
+  // 小程序托管微信第三方平台（可选）
+  componentAppid?: string;
+  //登录类型
+  opensType?: OpensType;
+}
+
+// 手机号绑定接口
+export interface PhoneReplaceReq {
+  // 租户
+  tenant?: string;
+  // 小程序APPID
+  appId: string;
+  // 获取手机号码
+  phoneCode: string;
   // 小程序托管微信第三方平台（可选）
   componentAppid?: string;
+  //登录类型
+  opensType?: OpensType;
 }
 
 // 刷新token

package/src/api/files/index.ts

@@ -88,56 +88,48 @@ class FileApi {
 
   // 上传文件
   uploadFile(file: string): Promise<FileInfo> {
-    const that = this;
-    return new Promise((resolve, reject) => {
-      const p = mpx.uploadFile({
-        url: that.uploadUrl(),
-        filePath: file,
-        name: "file",
-        header: {
-          "Content-Type": "multipart/form-data",
-          Authorization: db.getBearerToken(),
-        },
-      } as WechatMiniprogram.UploadFileOption) as any;
-      p.then((res: any) => {
-        console.log("uploadFile", res);
-        if (res.statusCode === 200) {
-          resolve(JSON.parse(res.data) as FileInfo);
-        } else if (res.statusCode === 401) {
-          // 清理登录信息
-          mpx.clearStorage();
-        } else {
-          mpx.showToast({
-            title: res.errMsg,
-            icon: "none",
-            duration: 2000,
-          });
-          resolve(JSON.parse(res.data) as FileInfo);
-        }
-      }).catch((err: any) => {
-        reject(err);
-      });
+    const p = mpx.uploadFile({
+      url: this.uploadUrl(),
+      filePath: file,
+      name: "file",
+      header: {
+        "Content-Type": "multipart/form-data",
+        Authorization: db.getBearerToken(),
+      },
+    } as WechatMiniprogram.UploadFileOption) as any;
+    return p.then((res: any) => {
+      console.log("uploadFile", res);
+      if (res.statusCode === 200) {
+        return JSON.parse(res.data) as FileInfo;
+      } else if (res.statusCode === 401) {
+        // 清理登录信息
+        mpx.clearStorage();
+        throw new Error("登录过期，请重新登录");
+      } else {
+        mpx.showToast({
+          title: res.errMsg,
+          icon: "none",
+          duration: 2000,
+        });
+        return JSON.parse(res.data) as FileInfo;
+      }
     });
   }
 
   // 上传文件
   downloadFile(url: string): Promise<FileDownInfo> {
-    return new Promise((resolve, reject) => {
-      const p = mpx.downloadFile({
-        url: url,
-        header: {
-          Authorization: db.getBearerToken(),
-        },
-      }) as any;
-      p.then((res: any) => {
-        resolve({
-          statusCode: res.statusCode,
-          tempFilePath: res.tempFilePath,
-          filePath: res.tempFilePath,
-        } as FileDownInfo);
-      }).catch((err: any) => {
-        reject(err);
-      });
+    const p = mpx.downloadFile({
+      url: url,
+      header: {
+        Authorization: db.getBearerToken(),
+      },
+    }) as any;
+    return p.then((res: any) => {
+      return {
+        statusCode: res.statusCode,
+        tempFilePath: res.tempFilePath,
+        filePath: res.tempFilePath,
+      } as FileDownInfo;
     });
   }
 

package/src/app.mpx

@@ -15,10 +15,12 @@ createApp({
     config: config
   }
 })
-// 只有运行时才能调用
-const accountInfo = mpx.getAccountInfoSync();
-// 微信
-config.appId = accountInfo.miniProgram.appId;
+if (__mpx_mode__ !== "web") {
+  // 只有运行时才能调用
+  const accountInfo = mpx.getAccountInfoSync();
+  // 微信
+  config.appId = accountInfo.miniProgram.appId;
+}
 </script>
 
 <style></style>
@@ -40,15 +42,18 @@ config.appId = accountInfo.miniProgram.appId;
       "custom": true,
       "color": "#86909C",
       "selectedColor": "#EA4C3B",
-      "borderStyle": "white",
       "list": [
         {
           "pagePath": "pages/tabbar/home",
-          "text": "首页"
+          "text": "首页",
+          "activeIcon": "",
+          "icon": ""
         },
         {
           "pagePath": "pages/tabbar/my",
-          "text": "我的"
+          "text": "我的",
+          "activeIcon": "",
+          "icon": ""
         }
       ]
     }

package/src/components/auth-user/jmash-logout.mpx

@@ -0,0 +1,91 @@
+<template>
+  <view class="logout-section">
+    <!-- 登录状态才显示退出按钮 -->
+    <button class="logout-btn" bind:tap="handleLogout" wx:if="{{ isLogin }}">退出登录</button>
+    <text class="version-text">当前版本 V{{ version }}</text>
+  </view>
+</template>
+
+<script>
+import mpx, { createComponent, computed } from '@mpxjs/core'
+import { useUserStore } from '../../store/user'
+
+createComponent({
+  properties: {
+    // 自定义版本号，默认读配置
+    version: {
+      type: String,
+      value: '1.0.0'
+    }
+  },
+  setup() {
+    let userStore = useUserStore();
+    const isLogin = computed(() => userStore.accessToken !== '');
+    return {
+      isLogin, userStore
+    };
+  },
+  methods: {
+    // 退出登录逻辑
+    handleLogout() {
+      mpx.showModal({
+        title: '提示',
+        content: '确定要退出登录吗？',
+        success: (res) => {
+          if (res.confirm) {
+            this.userStore.logout() // 调用退出接口
+            mpx.showToast({ title: '已退出登录', icon: 'success' })
+            // 通知父组件退出成功
+            this.triggerEvent('logoutSuccess');
+          }
+        }
+      })
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+$primary: #07c160;
+$text-3: #999999;
+
+.logout-section {
+  padding: 40rpx 16rpx 80rpx; // 底部留空适配tabbar
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .logout-btn {
+    width: 300rpx;
+    height: 72rpx;
+    border-radius: 36rpx;
+    border: 2rpx solid #ff4d4f;
+    background: #fff;
+    color: #ff4d4f;
+    font-size: 28rpx;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 24rpx;
+    transition: all 0.2s;
+
+    &:active {
+      background: #fff1f0;
+      transform: scale(0.98);
+    }
+  }
+
+  .version-text {
+    font-size: 24rpx;
+    color: $text-3;
+  }
+}
+</style>
+
+<script type="application/json">
+{
+  "component": true,
+  "usingComponents": {}
+}
+</script>

package/src/components/auth-user/jmash-update-user.mpx

@@ -6,7 +6,8 @@
       <view class="main-profile" wx:if="{{ isUserAvatar }}">
         <view class="profile-left">头像</view>
         <view class="profile-right">
-          <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+          <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar@wx="onChooseAvatar"
+            onChooseAvatar@ali="onChooseAvatar">
             <image class="avatar-img" src="{{ resourceUrl + '/components/gray_head2x.png' }}" mode="aspectFill"
               wx:if="{{ !userInfo.avatar }}" />
             <image class="avatar-img" src="{{ imageUrl + userInfo.avatar }}" mode="aspectFill" wx:else />
@@ -40,8 +41,13 @@
         <view class="phone-left">手机号</view>
         <view class="phone-right">
           <view class="phone-number">{{ userInfo.mobilePhone }}</view>
-          <button open-type="getPhoneNumber" class="phone-right-btn" bindgetphonenumber="getPhoneNumber"
-            wx:if="{{ isChangePhone }}">更换手机号</button>
+          <!-- 微信 -->
+          <button open-type="getPhoneNumber" class="phone-right-btn" bindgetphonenumber="getPhoneNumberWechat"
+            wx:if="{{ isChangePhone && __mpx_mode__ === 'wx' }}">更换手机号</button>
+          <!-- 支付宝 -->
+          <button open-type="getAuthorize" scope="phoneNumber" class="phone-right-btn"
+            wx:if="{{ isChangePhone && __mpx_mode__ === 'ali' }}" onGetAuthorize="getPhoneNumberAli"
+            onError="onPhoneAuthFail">更换手机号</button>
         </view>
       </view>
     </view>
@@ -59,9 +65,8 @@ import { config } from '../../utils/config'
 import { UpdateUserReq, UserInfo } from '../../api/auth/types'
 import { authApi } from '../../api/auth/index'
 import { fileApi } from '../../api/files/index';
-import { db } from '../../utils/db';
 import { FileInfo } from '../../api/files/types';
-import { auth } from '../../utils/auth';
+import { useUserStore } from '../../store/user';
 
 createComponent({
   properties: {
@@ -94,9 +99,11 @@ createComponent({
   data: {
     resourceUrl: config.resourceUrl + "/images",
     imageUrl: config.baseUrl + "/v1/file/path/",
-    userInfo: {} as UserInfo
+    userInfo: {} as UserInfo,
+    userStore: {} as any
   },
   ready() {
+    this.userStore = useUserStore();
     this.getUserInfo();
   },
   /**
@@ -104,19 +111,17 @@ createComponent({
  */
   methods: {
     // 获取用户信息
-    getUserInfo() {
+    getUserInfo(cache: boolean = true) {
       console.log("getUserInfo");
-      auth.getUserInfo().then((resp: UserInfo) => {
-        console.log("getUserInfo", resp);
+      this.userStore.getUserInfo(cache).then((resp: UserInfo) => {
         this.userInfo = resp;
-      })
+      });
     },
 
     // 获取微信头像
     onChooseAvatar(e: any) {
       console.log("onChooseAvatar", e);
       const { avatarUrl } = e.detail;
-
       fileApi.uploadFile(avatarUrl).then((res: FileInfo) => {
         console.log("uploadFile1", res);
         this.userInfo.avatar = res.fileSrc;
@@ -124,7 +129,8 @@ createComponent({
     },
 
     // 更换手机号
-    getPhoneNumber(e: any) {
+    getPhoneNumberWechat(e: any) {
+      console.log("getPhoneNumber", e);
       if (e.detail.errMsg === "getPhoneNumber:ok") {
         // 授权成功后,调用rbac模块接口 已登陆状态小程序更换绑定手机号
         authApi.replaceBindphone({
@@ -133,13 +139,37 @@ createComponent({
           componentAppid: config.componentAppid
         }).then((res) => {
           if (res.data) {
-            auth.getUserInfo(false).then((res) => {
-              this.userInfo = res as UserInfo;
-            });
+            this.getUserInfo(false);
           }
         })
       }
     },
+    getPhoneNumberAli(e: any) {
+      console.log("getPhoneNumber", e);
+      // 支付宝小程序获取手机号
+      my.getPhoneNumber({
+        success: (res: any) => {
+          console.log("手机号授权", res);
+          const { response } = res;
+          authApi.replaceBindphone({
+            appId: config.appId,
+            phoneCode: response,
+            componentAppid: config.componentAppid
+          }).then((res) => {
+            if (res.data) {
+              this.getUserInfo(false);
+            }
+          })
+        },
+        fail: () => {
+          mpx.showToast({
+            title: "您已取消授权",
+            icon: "none",
+            duration: 2000,
+          });
+        }
+      });
+    },
     // 更新用户信息
     handleUpdateUser() {
       let updateReq: UpdateUserReq = { ...this.userInfo } as UpdateUserReq;
@@ -148,12 +178,20 @@ createComponent({
       authApi.updateUserInfo(updateReq).then((res) => {
         // 保存成功后重新设置本地缓存信息,并跳转到我的页面
         if (res.statusCode === 200) {
-          db.setUserInfo(res.data)
+          this.userStore.setUserInfo(res.data);
           mpx.navigateBack({
             delta: 1
-          })
-        }
-      })
+          });
+        };
+      });
+    },
+    // 手机号授权失败回调
+    onPhoneAuthFail() {
+      mpx.showToast({
+        title: "手机号授权失败",
+        icon: "none",
+        duration: 2000,
+      });
     }
   }
 }
@@ -338,7 +376,6 @@ $bg-card: #ffffff;
 
 <script type="application/json">
 {
-  "component": true,
-  "usingComponents": {}
+  "component": true
 }
 </script>