jmash-core-mp 0.1.21 → 0.1.22

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

@@ -1,421 +1,421 @@
-<template>
-  <view class="login-container">
-    <view class="login_box">
-      <view class="avatar-section">
-        <view class="avatar-wrapper">
-          <image class="avatar-img" src="{{ avatar }}" />
-        </view>
-        <view class="avatar-tip">欢迎登录</view>
-      </view>
-
-      <view class="form-section">
-        <view class="form-item">
-          <view class="form-label">用户名</view>
-          <input class="form-input" type="text" placeholder="请输入用户名" bind:input="onUsernameInput"
-            value="{{ username }}" />
-        </view>
-
-        <view class="form-item">
-          <view class="form-label">密码</view>
-          <input class="form-input" type="password" placeholder="请输入密码" bind:input="onPasswordInput"
-            value="{{ password }}" />
-        </view>
-      </view>
-
-      <view class="agreement-section" wx:if="{{ showPrivacyPolicy }}">
-        <checkbox-group bind:change="onAgreementChange">
-          <label class="agreement-label">
-            <checkbox value="agree" checked="{{ agreed }}" color="{{ checkedColor }}" />
-            <text class="agreement-text">我已阅读并同意</text>
-          </label>
-        </checkbox-group>
-        <view class="agreement-links">
-          <text id="user" bind:tap="goPolicyInfo" class="agreement-link">《用户使用协议》</text>
-          <text class="agreement-separator">和</text>
-          <text id="privacy" bind:tap="goPolicyInfo" class="agreement-link">《隐私权政策》</text>
-        </view>
-      </view>
-
-      <button class="login-btn" style="{{ loginStyle }}" bind:tap="onUsernameLogin">登录</button>
-
-      <view class="bottom-actions">
-        <text class="register-btn" bind:tap="onRegister">注册账号</text>
-      </view>
-    </view>
-  </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 config = getApp().globalData.config || { resourceUrl: '', name: '应用' };
-    let agreeStatus = ref(false);
-    let nameValue = ref('');
-    let avatarUrl = ref('');
-    let isValidate = ref(false);
-    let userStore = useUserStore();
-    let avatar = ref(config.resourceUrl + "/images/components/gray_head2x.png");
-    let username = ref('');
-    let password = ref('');
-    let agreed = ref(false);
-    console.log(avatar);
-    return {
-      agreeStatus,
-      nameValue,
-      avatarUrl,
-      isValidate,
-      avatar,
-      userStore,
-      username,
-      password,
-      agreed
-    };
-  },
-  methods: {
-    // 协议勾选事件
-    agreeChange() {
-      this.agreeStatus = !this.agreeStatus;
-      this.validate();
-    },
-    // 用户名输入
-    onUsernameInput(e: any) {
-      this.username = e.detail.value;
-    },
-    // 密码输入
-    onPasswordInput(e: any) {
-      this.password = e.detail.value;
-    },
-    // 协议勾选变化
-    onAgreementChange(e: any) {
-      this.agreed = e.detail.value.includes('agree');
-    },
-    // 用户名密码登录
-    onUsernameLogin() {
-      if (!this.username.trim()) {
-        return mpx.showToast({ title: '请输入用户名', icon: 'none', duration: 2000 })
-      }
-      if (!this.password.trim()) {
-        return mpx.showToast({ title: '请输入密码', icon: 'none', duration: 2000 })
-      }
-      if (!this.agreed && this.showPrivacyPolicy) {
-        return mpx.showToast({ title: '请阅读并同意用户协议', icon: 'none', duration: 2000 })
-      }
-
-      mpx.showLoading({ title: '登录中...', mask: true })
-      let that = this;
-      this.userStore.webLogin(
-        this.username.trim(),
-        this.password.trim()
-      ).then((res: any) => {
-        mpx.hideLoading()
-        if (res.status) {
-          mpx.showToast({ title: '登录成功', icon: 'success', duration: 1500 })
-          that.triggerEvent('loginSuccess', res.data)
-          setTimeout(() => {
-            that.doRedirect()
-          }, 1500)
-        } else {
-          mpx.showToast({ title: res.message || '登录失败，请重试', icon: 'error', duration: 2000 })
-        }
-      }).catch((err: any) => {
-        mpx.hideLoading()
-        console.error('登录失败:', err)
-        mpx.showToast({ title: '登录失败，请检查网络', icon: 'error', duration: 2000 })
-      })
-    },
-    // 注册账号
-    onRegister() {
-      this.triggerEvent('toRegister')
-    },
-    // 跳转隐私协议
-    goPolicyInfo(e: any) {
-      const id = e.currentTarget.id
-      this.triggerEvent("policy", id);
-      mpx.navigateTo({
-        url: '/jmash/pages/auth/cms-protocol?channelAlias=' + id
-      });
-    },
-    // 验证
-    validate() {
-      if (!this.nameValue) {
-        this.isValidate = false;
-        return;
-      }
-      this.isValidate = true;
-    },
-    // 登录后跳转
-    doRedirect() {
-      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 });
-      }
-    },
-    // 登录前验证
-    onLogin() {
-      console.log(this.agreeStatus);
-      if (!this.agreeStatus && this.showPrivacyPolicy) {
-        mpx.showModal({
-          title: "提示",
-          content: "您是否已阅读《用户使用协议》《隐私权政策》？",
-          success: (res) => {
-            if (res.confirm) {
-              this.agreeStatus = true;
-            }
-          },
-        });
-      }
-      if (!this.nameValue) {
-        mpx.showToast({
-          title: "请输入姓名",
-          icon: "none",
-          duration: 2000,
-        });
-      }
-    },
-    wxPhoneLogin(event: any) {
-      let that = this;
-      console.log(event);
-      if (!this.agreeStatus && this.showPrivacyPolicy) {
-        mpx.showModal({
-          title: "提示",
-          content: "您是否已阅读《用户使用协议》《隐私权政策》？",
-          success(res) {
-            if (res.confirm) {
-              that.agreeStatus = true;
-            }
-          },
-        });
-        return;
-      }
-      if (!this.nameValue) {
-        mpx.showToast({
-          title: "请输入姓名",
-          icon: "none",
-          duration: 2000,
-        });
-        return;
-      }
-      if (event.detail.errMsg === "getPhoneNumber:ok") {
-        console.log(event.detail.code);
-        this.userStore.mpRegister(event.detail.code, this.nameValue).then((resp) => {
-          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 });
-          }
-        });
-      } else {
-        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;
-    }
-  }
-
-  .avatar-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 32rpx;
-
-    .avatar-wrapper {
-      position: relative;
-      margin: 0;
-      padding: 0;
-      background: none;
-      border: none;
-      line-height: 1;
-
-      .avatar-img {
-        width: 120rpx;
-        height: 120rpx;
-        border-radius: 50%;
-        border: 4rpx solid $border;
-        display: block;
-      }
-
-      .avatar-badge {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        width: 36rpx;
-        height: 36rpx;
-        background: $primary;
-        border-radius: 50%;
-        border: 3rpx solid $bg-card;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .badge-icon {
-          font-size: 16rpx;
-          color: #fff;
-        }
-      }
-    }
-
-    .avatar-tip {
-      margin-top: 16rpx;
-      font-size: 20rpx;
-      color: $text-3;
-    }
-  }
-
-  .name-section {
-    width: 100%;
-    margin-bottom: 32rpx;
-
-    .name-field {
-      display: flex;
-      align-items: center;
-      background: $bg-page;
-      border-radius: 20rpx;
-      padding: 0 28rpx;
-      height: 88rpx;
-      border: 2rpx solid transparent;
-      transition: border-color 0.25s, background-color 0.25s;
-
-      .field-icon {
-        font-size: 32rpx;
-        margin-right: 16rpx;
-        flex-shrink: 0;
-      }
-
-      .name-input {
-        flex: 1;
-        min-width: 0;
-        font-size: 28rpx;
-        color: $text-1;
-        background: transparent;
-        border: none;
-        outline: none;
-        height: 80rpx;
-        line-height: 80rpx;
-        padding: 0;
-      }
-
-      .name-input::placeholder {
-        font-size: 28rpx;
-        color: $text-3;
-      }
-    }
-
-    .name-field:focus-within {
-      border-color: $primary;
-      background: $bg-card;
-    }
-  }
-}
-</style>
-
-<script type="application/json">
-{
-  "component": true,
-  "usingComponents": {}
-}
-</script>
+<template>
+  <view class="login-container">
+    <view class="login_box">
+      <view class="avatar-section">
+        <view class="avatar-wrapper">
+          <image class="avatar-img" src="{{ avatar }}" />
+        </view>
+        <view class="avatar-tip">欢迎登录</view>
+      </view>
+
+      <view class="form-section">
+        <view class="form-item">
+          <view class="form-label">用户名</view>
+          <input class="form-input" type="text" placeholder="请输入用户名" bind:input="onUsernameInput"
+            value="{{ username }}" />
+        </view>
+
+        <view class="form-item">
+          <view class="form-label">密码</view>
+          <input class="form-input" type="password" placeholder="请输入密码" bind:input="onPasswordInput"
+            value="{{ password }}" />
+        </view>
+      </view>
+
+      <view class="agreement-section" wx:if="{{ showPrivacyPolicy }}">
+        <checkbox-group bind:change="onAgreementChange">
+          <label class="agreement-label">
+            <checkbox value="agree" checked="{{ agreed }}" color="{{ checkedColor }}" />
+            <text class="agreement-text">我已阅读并同意</text>
+          </label>
+        </checkbox-group>
+        <view class="agreement-links">
+          <text id="user" bind:tap="goPolicyInfo" class="agreement-link">《用户使用协议》</text>
+          <text class="agreement-separator">和</text>
+          <text id="privacy" bind:tap="goPolicyInfo" class="agreement-link">《隐私权政策》</text>
+        </view>
+      </view>
+
+      <button class="login-btn" style="{{ loginStyle }}" bind:tap="onUsernameLogin">登录</button>
+
+      <view class="bottom-actions">
+        <text class="register-btn" bind:tap="onRegister">注册账号</text>
+      </view>
+    </view>
+  </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 config = getApp().globalData.config || { resourceUrl: '', name: '应用' };
+    let agreeStatus = ref(false);
+    let nameValue = ref('');
+    let avatarUrl = ref('');
+    let isValidate = ref(false);
+    let userStore = useUserStore();
+    let avatar = ref(config.resourceUrl + "/images/components/gray_head2x.png");
+    let username = ref('');
+    let password = ref('');
+    let agreed = ref(false);
+    console.log(avatar);
+    return {
+      agreeStatus,
+      nameValue,
+      avatarUrl,
+      isValidate,
+      avatar,
+      userStore,
+      username,
+      password,
+      agreed
+    };
+  },
+  methods: {
+    // 协议勾选事件
+    agreeChange() {
+      this.agreeStatus = !this.agreeStatus;
+      this.validate();
+    },
+    // 用户名输入
+    onUsernameInput(e: any) {
+      this.username = e.detail.value;
+    },
+    // 密码输入
+    onPasswordInput(e: any) {
+      this.password = e.detail.value;
+    },
+    // 协议勾选变化
+    onAgreementChange(e: any) {
+      this.agreed = e.detail.value.includes('agree');
+    },
+    // 用户名密码登录
+    onUsernameLogin() {
+      if (!this.username.trim()) {
+        return mpx.showToast({ title: '请输入用户名', icon: 'none', duration: 2000 })
+      }
+      if (!this.password.trim()) {
+        return mpx.showToast({ title: '请输入密码', icon: 'none', duration: 2000 })
+      }
+      if (!this.agreed && this.showPrivacyPolicy) {
+        return mpx.showToast({ title: '请阅读并同意用户协议', icon: 'none', duration: 2000 })
+      }
+
+      mpx.showLoading({ title: '登录中...', mask: true })
+      let that = this;
+      this.userStore.webLogin(
+        this.username.trim(),
+        this.password.trim()
+      ).then((res: any) => {
+        mpx.hideLoading()
+        if (res.status) {
+          mpx.showToast({ title: '登录成功', icon: 'success', duration: 1500 })
+          that.triggerEvent('loginSuccess', res.data)
+          setTimeout(() => {
+            that.doRedirect()
+          }, 1500)
+        } else {
+          mpx.showToast({ title: res.message || '登录失败，请重试', icon: 'error', duration: 2000 })
+        }
+      }).catch((err: any) => {
+        mpx.hideLoading()
+        console.error('登录失败:', err)
+        mpx.showToast({ title: '登录失败，请检查网络', icon: 'error', duration: 2000 })
+      })
+    },
+    // 注册账号
+    onRegister() {
+      this.triggerEvent('toRegister')
+    },
+    // 跳转隐私协议
+    goPolicyInfo(e: any) {
+      const id = e.currentTarget.id
+      this.triggerEvent("policy", id);
+      mpx.navigateTo({
+        url: '/jmash/pages/auth/cms-protocol?channelAlias=' + id
+      });
+    },
+    // 验证
+    validate() {
+      if (!this.nameValue) {
+        this.isValidate = false;
+        return;
+      }
+      this.isValidate = true;
+    },
+    // 登录后跳转
+    doRedirect() {
+      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 });
+      }
+    },
+    // 登录前验证
+    onLogin() {
+      console.log(this.agreeStatus);
+      if (!this.agreeStatus && this.showPrivacyPolicy) {
+        mpx.showModal({
+          title: "提示",
+          content: "您是否已阅读《用户使用协议》《隐私权政策》？",
+          success: (res) => {
+            if (res.confirm) {
+              this.agreeStatus = true;
+            }
+          },
+        });
+      }
+      if (!this.nameValue) {
+        mpx.showToast({
+          title: "请输入姓名",
+          icon: "none",
+          duration: 2000,
+        });
+      }
+    },
+    wxPhoneLogin(event: any) {
+      let that = this;
+      console.log(event);
+      if (!this.agreeStatus && this.showPrivacyPolicy) {
+        mpx.showModal({
+          title: "提示",
+          content: "您是否已阅读《用户使用协议》《隐私权政策》？",
+          success(res) {
+            if (res.confirm) {
+              that.agreeStatus = true;
+            }
+          },
+        });
+        return;
+      }
+      if (!this.nameValue) {
+        mpx.showToast({
+          title: "请输入姓名",
+          icon: "none",
+          duration: 2000,
+        });
+        return;
+      }
+      if (event.detail.errMsg === "getPhoneNumber:ok") {
+        console.log(event.detail.code);
+        this.userStore.mpRegister(event.detail.code, this.nameValue).then((resp) => {
+          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 });
+          }
+        });
+      } else {
+        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;
+    }
+  }
+
+  .avatar-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 32rpx;
+
+    .avatar-wrapper {
+      position: relative;
+      margin: 0;
+      padding: 0;
+      background: none;
+      border: none;
+      line-height: 1;
+
+      .avatar-img {
+        width: 120rpx;
+        height: 120rpx;
+        border-radius: 50%;
+        border: 4rpx solid $border;
+        display: block;
+      }
+
+      .avatar-badge {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 36rpx;
+        height: 36rpx;
+        background: $primary;
+        border-radius: 50%;
+        border: 3rpx solid $bg-card;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .badge-icon {
+          font-size: 16rpx;
+          color: #fff;
+        }
+      }
+    }
+
+    .avatar-tip {
+      margin-top: 16rpx;
+      font-size: 20rpx;
+      color: $text-3;
+    }
+  }
+
+  .name-section {
+    width: 100%;
+    margin-bottom: 32rpx;
+
+    .name-field {
+      display: flex;
+      align-items: center;
+      background: $bg-page;
+      border-radius: 20rpx;
+      padding: 0 28rpx;
+      height: 88rpx;
+      border: 2rpx solid transparent;
+      transition: border-color 0.25s, background-color 0.25s;
+
+      .field-icon {
+        font-size: 32rpx;
+        margin-right: 16rpx;
+        flex-shrink: 0;
+      }
+
+      .name-input {
+        flex: 1;
+        min-width: 0;
+        font-size: 28rpx;
+        color: $text-1;
+        background: transparent;
+        border: none;
+        outline: none;
+        height: 80rpx;
+        line-height: 80rpx;
+        padding: 0;
+      }
+
+      .name-input::placeholder {
+        font-size: 28rpx;
+        color: $text-3;
+      }
+    }
+
+    .name-field:focus-within {
+      border-color: $primary;
+      background: $bg-card;
+    }
+  }
+}
+</style>
+
+<script type="application/json">
+{
+  "component": true,
+  "usingComponents": {}
+}
+</script>