jmash-core-mp 0.1.21 → 0.1.22

package/src/components/core/jmash-login.ali.mpx

@@ -1,284 +1,284 @@
-<template>
-  <slot name="before"></slot>
-  <view class="login_box">
-    <!-- 手机号授权按钮 -->
-    <button open-type="getAuthorize" scope="phoneNumber" style="{{ loginStyle }}" onGetAuthorize="onPhoneAuthSuccess"
-      onError="onPhoneAuthFail" a:if="{{ agreeStatus }}">手机号授权登录</button>
-    <button onTap="onLoginCheck" style="{{ loginStyle }}" a:else>授权登录</button>
-
-    <checkbox-group onChange="agreeChange" class="protocol_agree" a:if="{{ showPrivacyPolicy }}">
-      <label>
-        <checkbox value="{{ agreeStatus+'' }}" checked="{{ agreeStatus }}" color="{{ checkedColor }}" />
-        已阅读
-        <text id="user" style="{{ agreementStyle }}" onTap="goPolicyInfo">《用户使用协议》</text>
-        <text id="privacy" style="{{ agreementStyle }}" onTap="goPolicyInfo">《隐私权政策》</text>
-      </label>
-    </checkbox-group>
-    <slot name="after"></slot>
-  </view>
-</template>
-
-<script lang="ts">
-import { useUserStore } from '../../store/user'
-import mpx, { createComponent, ref } from '@mpxjs/core'
-
-createComponent({
-  options: {
-    multipleSlots: true,
-  },
-  properties: {
-    // 登录按钮样式
-    loginStyle: {
-      type: String,
-      value:
-        "width: 100%;background-color: #2563EB;color: #fff;font-size: 15px;",
-    },
-    // 单选框选中的颜色
-    checkedColor: {
-      type: String,
-      value: "#0551ff",
-    },
-
-    // 协议样式
-    agreementStyle: {
-      type: String,
-      value: "color: #0551ff",
-    },
-
-    //登录后跳转页面
-    backurl: {
-      type: String,
-      value: "/pages/home",
-    },
-    // 登录后跳转方式 "redirectTo switchTab reLaunch navigateTo"
-    linkType: {
-      type: String,
-      value: "redirectTo",
-    },
-    //遮罩层效果
-    isShowModel: {
-      type: Boolean,
-      value: false,
-    },
-    // 是否显示隐私协议和政策
-    showPrivacyPolicy: {
-      type: Boolean,
-      value: true
-    }
-  },
-  setup(props) {
-    let agreeStatus = ref(false);
-    let userStore = useUserStore();
-    return {
-      agreeStatus,
-      userStore
-    };
-  },
-  methods: {
-    // 协议勾选事件
-    agreeChange() {
-      this.agreeStatus = !this.agreeStatus;
-    },
-    // 跳转隐私协议
-    goPolicyInfo(e: any) {
-      const id = e.currentTarget.id
-      this.triggerEvent("policy", id);
-      mpx.navigateTo({
-        url: '/jmash/pages/auth/cms-protocol?channelAlias=' + id
-      });
-    },
-    // 登录前检查
-    onLoginCheck() {
-      console.log("登录前检查");
-      if (!this.agreeStatus && this.showPrivacyPolicy) {
-        mpx.showModal({
-          title: "提示",
-          content: "您是否已阅读《用户使用协议》《隐私权政策》？",
-          success: (res) => {
-            if (res.confirm) {
-              this.agreeStatus = true;
-            }
-          },
-        });
-      }
-    },
-    // 手机号授权成功回调
-    onPhoneAuthSuccess() {
-      mpx.showLoading({
-        title: '登录中...',
-        mask: true
-      });
-      console.log("手机号授权成功");
-      // 支付宝小程序获取手机号
-      my.getPhoneNumber({
-        success: (res: any) => {
-          console.log("手机号授权", res);
-          const { response } = res;
-          this.userStore.mpRegister(response, this.nameValue, this.avatarUrl).then((resp) => {
-            mpx.hideLoading();
-            if (resp.status === false) {
-              mpx.showToast({
-                title: resp.message ? resp.message : "登录失败联系管理员",
-                icon: "none",
-                duration: 2000,
-              });
-              return;
-            }
-            const backurl = decodeURIComponent(this.backurl);
-            if (this.linkType === "switchTab") {
-              mpx.switchTab({ url: backurl });
-            } else if (this.linkType === "navigateTo") {
-              mpx.navigateTo({ url: backurl });
-            } else if (this.linkType === "redirectTo") {
-              mpx.redirectTo({ url: backurl });
-            } else {
-              mpx.reLaunch({ url: backurl });
-            }
-          }).catch(() => {
-            mpx.hideLoading();
-          });
-        },
-        fail: () => {
-          mpx.hideLoading();
-          mpx.showToast({
-            title: "您已取消授权",
-            icon: "none",
-            duration: 2000,
-          });
-        }
-      });
-    },
-    // 手机号授权失败回调
-    onPhoneAuthFail() {
-      mpx.showToast({
-        title: "手机号授权失败",
-        icon: "none",
-        duration: 2000,
-      });
-    }
-  }
-})
-</script>
-
-<style lang="scss">
-@use "../../styles/index.scss" as *;
-
-$primary: #07c160;
-$primary-dark: #06ad56;
-$text-1: #111111;
-$text-2: #555555;
-$text-3: #888888;
-$border: #d0d0d0;
-$bg-page: #f2f2f2;
-$bg-card: #ffffff;
-
-.login_box {
-  padding: 13% 3% 4%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .login_btn {
-    background-color: $blue-color;
-    color: $white-color;
-    padding: 16px 0;
-    width: $width;
-    font-size: $font-size;
-  }
-
-  .protocol_agree {
-    color: $font-color-grey-opacity;
-    font-size: $font-size;
-    margin-top: 20px;
-
-    text {
-      color: $blue-color;
-    }
-  }
-
-  .user-info-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 48rpx;
-    padding: 40rpx;
-    background: $bg-card;
-    border-radius: 24rpx;
-    width: 100%;
-
-    .user-avatar {
-      width: 160rpx;
-      height: 160rpx;
-      border-radius: 50%;
-      border: 4rpx solid $primary;
-      margin-bottom: 24rpx;
-    }
-
-    .user-name {
-      font-size: 36rpx;
-      font-weight: 600;
-      color: $text-1;
-      margin-bottom: 12rpx;
-    }
-
-    .info-tip {
-      font-size: 24rpx;
-      color: $primary;
-    }
-  }
-
-  .auth-section {
-    width: 100%;
-    margin-bottom: 48rpx;
-
-    .auth-user-btn {
-      display: flex;
-      align-items: center;
-      background: $bg-card;
-      border-radius: 24rpx;
-      padding: 32rpx;
-      width: 100%;
-      border: 2rpx dashed $border;
-      transition: all 0.3s;
-
-      .auth-avatar {
-        width: 100rpx;
-        height: 100rpx;
-        border-radius: 50%;
-        margin-right: 28rpx;
-        flex-shrink: 0;
-      }
-
-      .auth-content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-
-        .auth-title {
-          font-size: 32rpx;
-          font-weight: 600;
-          color: $text-1;
-          margin-bottom: 8rpx;
-        }
-
-        .auth-desc {
-          font-size: 24rpx;
-          color: $text-3;
-        }
-      }
-    }
-
-    .auth-user-btn:active {
-      background: $bg-page;
-      border-color: $primary;
-    }
-  }
-}
-</style>
-
-<script type="application/json">
-{
-  "component": true,
-  "usingComponents": {}
-}
-</script>
+<template>
+  <slot name="before"></slot>
+  <view class="login_box">
+    <!-- 手机号授权按钮 -->
+    <button open-type="getAuthorize" scope="phoneNumber" style="{{ loginStyle }}" onGetAuthorize="onPhoneAuthSuccess"
+      onError="onPhoneAuthFail" a:if="{{ agreeStatus }}">手机号授权登录</button>
+    <button onTap="onLoginCheck" style="{{ loginStyle }}" a:else>授权登录</button>
+
+    <checkbox-group onChange="agreeChange" class="protocol_agree" a:if="{{ showPrivacyPolicy }}">
+      <label>
+        <checkbox value="{{ agreeStatus+'' }}" checked="{{ agreeStatus }}" color="{{ checkedColor }}" />
+        已阅读
+        <text id="user" style="{{ agreementStyle }}" onTap="goPolicyInfo">《用户使用协议》</text>
+        <text id="privacy" style="{{ agreementStyle }}" onTap="goPolicyInfo">《隐私权政策》</text>
+      </label>
+    </checkbox-group>
+    <slot name="after"></slot>
+  </view>
+</template>
+
+<script lang="ts">
+import { useUserStore } from '../../store/user'
+import mpx, { createComponent, ref } from '@mpxjs/core'
+
+createComponent({
+  options: {
+    multipleSlots: true,
+  },
+  properties: {
+    // 登录按钮样式
+    loginStyle: {
+      type: String,
+      value:
+        "width: 100%;background-color: #2563EB;color: #fff;font-size: 15px;",
+    },
+    // 单选框选中的颜色
+    checkedColor: {
+      type: String,
+      value: "#0551ff",
+    },
+
+    // 协议样式
+    agreementStyle: {
+      type: String,
+      value: "color: #0551ff",
+    },
+
+    //登录后跳转页面
+    backurl: {
+      type: String,
+      value: "/pages/home",
+    },
+    // 登录后跳转方式 "redirectTo switchTab reLaunch navigateTo"
+    linkType: {
+      type: String,
+      value: "redirectTo",
+    },
+    //遮罩层效果
+    isShowModel: {
+      type: Boolean,
+      value: false,
+    },
+    // 是否显示隐私协议和政策
+    showPrivacyPolicy: {
+      type: Boolean,
+      value: true
+    }
+  },
+  setup(props) {
+    let agreeStatus = ref(false);
+    let userStore = useUserStore();
+    return {
+      agreeStatus,
+      userStore
+    };
+  },
+  methods: {
+    // 协议勾选事件
+    agreeChange() {
+      this.agreeStatus = !this.agreeStatus;
+    },
+    // 跳转隐私协议
+    goPolicyInfo(e: any) {
+      const id = e.currentTarget.id
+      this.triggerEvent("policy", id);
+      mpx.navigateTo({
+        url: '/jmash/pages/auth/cms-protocol?channelAlias=' + id
+      });
+    },
+    // 登录前检查
+    onLoginCheck() {
+      console.log("登录前检查");
+      if (!this.agreeStatus && this.showPrivacyPolicy) {
+        mpx.showModal({
+          title: "提示",
+          content: "您是否已阅读《用户使用协议》《隐私权政策》？",
+          success: (res) => {
+            if (res.confirm) {
+              this.agreeStatus = true;
+            }
+          },
+        });
+      }
+    },
+    // 手机号授权成功回调
+    onPhoneAuthSuccess() {
+      mpx.showLoading({
+        title: '登录中...',
+        mask: true
+      });
+      console.log("手机号授权成功");
+      // 支付宝小程序获取手机号
+      my.getPhoneNumber({
+        success: (res: any) => {
+          console.log("手机号授权", res);
+          const { response } = res;
+          this.userStore.mpRegister(response, this.nameValue, this.avatarUrl).then((resp) => {
+            mpx.hideLoading();
+            if (resp.status === false) {
+              mpx.showToast({
+                title: resp.message ? resp.message : "登录失败联系管理员",
+                icon: "none",
+                duration: 2000,
+              });
+              return;
+            }
+            const backurl = decodeURIComponent(this.backurl);
+            if (this.linkType === "switchTab") {
+              mpx.switchTab({ url: backurl });
+            } else if (this.linkType === "navigateTo") {
+              mpx.navigateTo({ url: backurl });
+            } else if (this.linkType === "redirectTo") {
+              mpx.redirectTo({ url: backurl });
+            } else {
+              mpx.reLaunch({ url: backurl });
+            }
+          }).catch(() => {
+            mpx.hideLoading();
+          });
+        },
+        fail: () => {
+          mpx.hideLoading();
+          mpx.showToast({
+            title: "您已取消授权",
+            icon: "none",
+            duration: 2000,
+          });
+        }
+      });
+    },
+    // 手机号授权失败回调
+    onPhoneAuthFail() {
+      mpx.showToast({
+        title: "手机号授权失败",
+        icon: "none",
+        duration: 2000,
+      });
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+@use "../../styles/index.scss" as *;
+
+$primary: #07c160;
+$primary-dark: #06ad56;
+$text-1: #111111;
+$text-2: #555555;
+$text-3: #888888;
+$border: #d0d0d0;
+$bg-page: #f2f2f2;
+$bg-card: #ffffff;
+
+.login_box {
+  padding: 13% 3% 4%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .login_btn {
+    background-color: $blue-color;
+    color: $white-color;
+    padding: 16px 0;
+    width: $width;
+    font-size: $font-size;
+  }
+
+  .protocol_agree {
+    color: $font-color-grey-opacity;
+    font-size: $font-size;
+    margin-top: 20px;
+
+    text {
+      color: $blue-color;
+    }
+  }
+
+  .user-info-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 48rpx;
+    padding: 40rpx;
+    background: $bg-card;
+    border-radius: 24rpx;
+    width: 100%;
+
+    .user-avatar {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 50%;
+      border: 4rpx solid $primary;
+      margin-bottom: 24rpx;
+    }
+
+    .user-name {
+      font-size: 36rpx;
+      font-weight: 600;
+      color: $text-1;
+      margin-bottom: 12rpx;
+    }
+
+    .info-tip {
+      font-size: 24rpx;
+      color: $primary;
+    }
+  }
+
+  .auth-section {
+    width: 100%;
+    margin-bottom: 48rpx;
+
+    .auth-user-btn {
+      display: flex;
+      align-items: center;
+      background: $bg-card;
+      border-radius: 24rpx;
+      padding: 32rpx;
+      width: 100%;
+      border: 2rpx dashed $border;
+      transition: all 0.3s;
+
+      .auth-avatar {
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 50%;
+        margin-right: 28rpx;
+        flex-shrink: 0;
+      }
+
+      .auth-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        .auth-title {
+          font-size: 32rpx;
+          font-weight: 600;
+          color: $text-1;
+          margin-bottom: 8rpx;
+        }
+
+        .auth-desc {
+          font-size: 24rpx;
+          color: $text-3;
+        }
+      }
+    }
+
+    .auth-user-btn:active {
+      background: $bg-page;
+      border-color: $primary;
+    }
+  }
+}
+</style>
+
+<script type="application/json">
+{
+  "component": true,
+  "usingComponents": {}
+}
+</script>