jmash-core-mp 0.1.21 → 0.1.22

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

@@ -1,416 +1,416 @@
-<template>
-  <!-- 授权登录 -->
-  <cube-modal wx:ref="loginModal" visible="{{ isVisible }}" noBuiltInBtns="true" maskClosable="false" z-index="999"
-    bind:cancel="onClose" mask-opacity="0.1" class="login-popup">
-    <!-- 标题区域 -->
-    <view class="popup-header" slot="header">
-      <view class="header-info">
-        <h2 class="header-title">授权登录{{ appName }}</h2>
-      </view>
-      <view class="header-close" bind:tap="onClose">
-        <text class="close-icon">×</text>
-      </view>
-    </view>
-
-    <!-- 内容区域 -->
-    <view class="popup-body" slot="content">
-      <!-- 头像区域 -->
-      <view class="avatar-section">
-        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
-          <image class="avatar-img" src="{{ avatarUrl || avatar }}" mode="aspectFill" />
-          <view class="avatar-badge">
-            <text class="badge-icon">✎</text>
-          </view>
-        </button>
-        <text class="avatar-tip">点击更换头像</text>
-      </view>
-
-      <!-- 姓名输入 -->
-      <view class="name-section">
-        <view class="name-field">
-          <text class="field-icon">👤</text>
-          <input type="nickname" class="weui-input name-input" bind:input="validate" placeholder="请输入您的姓名"
-            wx:model="{{ nameValue }}" wx:model-prop="value" />
-        </view>
-      </view>
-
-      <!-- 协议勾选 -->
-      <view class="agreement-row">
-        <cube-checkbox wx:model="{{ isCheckBox }}" bind:input="validate" wx:model-prop="value" shape="square"
-          class="agreement-check">
-          <text class="agreement-text">已阅读</text>
-          <text id="user" class="agreement-link" catch:tap="goInfo">《用户使用协议》</text>
-          <text class="agreement-text">和</text>
-          <text id="privacy" class="agreement-link" catch:tap="goInfo">《隐私权政策》</text>
-        </cube-checkbox>
-      </view>
-      <!-- 按钮组 -->
-      <view class="action-area">
-        <button primary wx:if="{{ !isValidate }}" bind:tap="onLogin" class="btn-login">
-          授权登录
-        </button>
-        <button wx:else open-type="getPhoneNumber" bind:getphonenumber="wxPhoneLogin" class="btn-login">
-          手机号授权登录
-        </button>
-        <view class="btn-cancel" bind:tap="onClose">
-          <text class="cancel-text">暂不登录</text>
-        </view>
-      </view>
-    </view>
-  </cube-modal>
-</template>
-
-<script>
-import mpx, { createComponent, ref, watch, toRefs } from '@mpxjs/core'
-import { useUserStore } from '../../store/user';
-
-createComponent({
-  properties: {
-    visible: {
-      type: Boolean,
-      value: false,
-    }
-  },
-  setup(props) {
-    let config = getApp().globalData.config || { resourceUrl: '', name: '应用' };
-    let resourceUrl = config.resourceUrl;
-    let appName = config.name;
-    let avatar = resourceUrl + "/images/components/gray_head2x.png";
-    let avatarUrl = ref('');
-    let nameValue = ref('');
-    let isCheckBox = ref(false);
-    let isValidate = ref(false);
-    let isVisible = ref(props.visible);
-    let userStore = useUserStore();
-
-    const { visible } = toRefs(props)
-    watch(visible, (newVal) => {
-      isVisible.value = newVal;
-      if (newVal) {
-        avatarUrl.value = '';
-        nameValue.value = '';
-        isCheckBox.value = false;
-        isValidate.value = false;
-      }
-    });
-
-    return {
-      resourceUrl,
-      appName,
-      avatar,
-      avatarUrl,
-      nameValue,
-      isCheckBox,
-      isValidate,
-      isVisible,
-      userStore
-    };
-  },
-  methods: {
-    onClose() {
-      this.isVisible = false;
-      this.triggerEvent('close', false);
-    },
-
-    onLogin() {
-      let res = this.validate();
-      if (!res.validate) {
-        mpx.showToast({
-          icon: "error",
-          title: res.message,
-          duration: 2000
-        });
-      }
-    },
-
-    onChooseAvatar(e) {
-      this.avatarUrl = e.detail.avatarUrl;
-      this.validate();
-    },
-
-    wxPhoneLogin(event) {
-      console.log(event);
-      if (event.detail.errMsg === "getPhoneNumber:ok") {
-        mpx.showLoading({
-          title: '登录中...',
-          mask: true
-        });
-
-        this.userStore.mpRegister(event.detail.code).then((resp) => {
-          mpx.hideLoading();
-          if (resp.status) {
-            this.triggerEvent("status", resp.status);
-            this.onClose();
-          } else {
-            mpx.showToast({
-              icon: "error",
-              title: resp.message || '登录失败',
-              duration: 2000
-            });
-          }
-        }).catch(() => {
-          mpx.hideLoading();
-          mpx.showToast({
-            icon: "error",
-            title: '登录失败，请重试',
-            duration: 2000
-          });
-        });
-      }
-    },
-
-    validate() {
-      if (!this.isCheckBox) {
-        this.isValidate = false;
-        return { validate: false, message: "请阅读并同意用户协议" };
-      }
-      if (!this.nameValue) {
-        this.isValidate = false;
-        return { validate: false, message: "请输入姓名" };
-      }
-      this.isValidate = true;
-      return { validate: true, message: "" };
-    },
-
-    goInfo(e) {
-      const id = e.currentTarget?.id;
-      this.triggerEvent("policy", id);
-      mpx.navigateTo({
-        url: '/jmash/pages/auth/cms-protocol?channelAlias=' + id
-      });
-    },
-  }
-})
-</script>
-
-<style lang="scss">
-$primary: #07c160;
-$primary-dark: #06ad56;
-$text-1: #111111;
-$text-2: #555555;
-$text-3: #888888;
-$border: #d0d0d0;
-$bg-page: #f2f2f2;
-$bg-card: #ffffff;
-
-.login-popup {
-  background-color: $bg-card !important;
-  border-radius: 32rpx 32rpx 0 0 !important;
-  overflow: hidden;
-}
-
-.popup-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 36rpx 40rpx 28rpx;
-  background: $bg-card;
-
-  .header-info {
-    flex: 1;
-
-    .header-title {
-      font-size: 36rpx;
-      font-weight: 700;
-      color: $text-1;
-      margin: 0;
-      letter-spacing: 1rpx;
-    }
-  }
-
-  .header-close {
-    width: 56rpx;
-    height: 56rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: $bg-page;
-    border-radius: 50%;
-
-    .close-icon {
-      font-size: 28rpx;
-      color: $text-3;
-      line-height: 1;
-      margin-top: -2rpx;
-    }
-  }
-}
-
-.popup-body {
-  padding: 20rpx 48rpx 56rpx;
-  background: $bg-card;
-}
-
-.avatar-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 48rpx;
-
-  .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 {
-  margin-bottom: 36rpx;
-
-  .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;
-  }
-}
-
-.agreement-row {
-  margin-bottom: 48rpx;
-  padding: 0 4rpx;
-
-  .agreement-check {
-    font-size: 24rpx;
-
-    .agreement-text {
-      color: $text-3;
-      font-size: 24rpx;
-    }
-
-    .agreement-link {
-      color: $primary;
-      font-size: 24rpx;
-    }
-  }
-}
-
-.action-area {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .btn-login {
-    width: 100%;
-    height: 88rpx;
-    border-radius: 44rpx;
-    font-size: 30rpx;
-    font-weight: 600;
-    letter-spacing: 2rpx;
-    background-color: $primary;
-    color: #fff;
-
-    &.btn-disabled {
-      opacity: 0.5;
-    }
-  }
-
-  .btn-cancel {
-    margin-top: 28rpx;
-    padding: 16rpx 32rpx;
-
-    .cancel-text {
-      font-size: 26rpx;
-      color: $text-3;
-    }
-  }
-}
-
-:deep(.cube-button--primary) {
-  background-color: $primary;
-  border: none;
-
-  &:active {
-    background-color: $primary-dark;
-  }
-}
-
-:deep(.cube-checkbox__input) {
-  margin-right: 8rpx;
-}
-
-:deep(.cube-checkbox__content) {
-  font-size: 20rpx;
-  line-height: 1.5;
-}
-</style>
-
-<script type="application/json">
-{
-  "component": true,
-  "usingComponents": {
-    "cube-modal": "@mpxjs/mpx-cube-ui/lib/components/modal/index.mpx",
-    "cube-button": "@mpxjs/mpx-cube-ui/lib/components/button/index.mpx",
-    "cube-checkbox": "@mpxjs/mpx-cube-ui/lib/components/checkbox/index.mpx",
-    "cube-checkbox-group": "@mpxjs/mpx-cube-ui/lib/components/checkbox-group/index.mpx"
-  }
-}
+<template>
+  <!-- 授权登录 -->
+  <cube-modal wx:ref="loginModal" visible="{{ isVisible }}" noBuiltInBtns="true" maskClosable="false" z-index="999"
+    bind:cancel="onClose" mask-opacity="0.1" class="login-popup">
+    <!-- 标题区域 -->
+    <view class="popup-header" slot="header">
+      <view class="header-info">
+        <h2 class="header-title">授权登录{{ appName }}</h2>
+      </view>
+      <view class="header-close" bind:tap="onClose">
+        <text class="close-icon">×</text>
+      </view>
+    </view>
+
+    <!-- 内容区域 -->
+    <view class="popup-body" slot="content">
+      <!-- 头像区域 -->
+      <view class="avatar-section">
+        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+          <image class="avatar-img" src="{{ avatarUrl || avatar }}" mode="aspectFill" />
+          <view class="avatar-badge">
+            <text class="badge-icon">✎</text>
+          </view>
+        </button>
+        <text class="avatar-tip">点击更换头像</text>
+      </view>
+
+      <!-- 姓名输入 -->
+      <view class="name-section">
+        <view class="name-field">
+          <text class="field-icon">👤</text>
+          <input type="nickname" class="weui-input name-input" bind:input="validate" placeholder="请输入您的姓名"
+            wx:model="{{ nameValue }}" wx:model-prop="value" />
+        </view>
+      </view>
+
+      <!-- 协议勾选 -->
+      <view class="agreement-row">
+        <cube-checkbox wx:model="{{ isCheckBox }}" bind:input="validate" wx:model-prop="value" shape="square"
+          class="agreement-check">
+          <text class="agreement-text">已阅读</text>
+          <text id="user" class="agreement-link" catch:tap="goInfo">《用户使用协议》</text>
+          <text class="agreement-text">和</text>
+          <text id="privacy" class="agreement-link" catch:tap="goInfo">《隐私权政策》</text>
+        </cube-checkbox>
+      </view>
+      <!-- 按钮组 -->
+      <view class="action-area">
+        <button primary wx:if="{{ !isValidate }}" bind:tap="onLogin" class="btn-login">
+          授权登录
+        </button>
+        <button wx:else open-type="getPhoneNumber" bind:getphonenumber="wxPhoneLogin" class="btn-login">
+          手机号授权登录
+        </button>
+        <view class="btn-cancel" bind:tap="onClose">
+          <text class="cancel-text">暂不登录</text>
+        </view>
+      </view>
+    </view>
+  </cube-modal>
+</template>
+
+<script>
+import mpx, { createComponent, ref, watch, toRefs } from '@mpxjs/core'
+import { useUserStore } from '../../store/user';
+
+createComponent({
+  properties: {
+    visible: {
+      type: Boolean,
+      value: false,
+    }
+  },
+  setup(props) {
+    let config = getApp().globalData.config || { resourceUrl: '', name: '应用' };
+    let resourceUrl = config.resourceUrl;
+    let appName = config.name;
+    let avatar = resourceUrl + "/images/components/gray_head2x.png";
+    let avatarUrl = ref('');
+    let nameValue = ref('');
+    let isCheckBox = ref(false);
+    let isValidate = ref(false);
+    let isVisible = ref(props.visible);
+    let userStore = useUserStore();
+
+    const { visible } = toRefs(props)
+    watch(visible, (newVal) => {
+      isVisible.value = newVal;
+      if (newVal) {
+        avatarUrl.value = '';
+        nameValue.value = '';
+        isCheckBox.value = false;
+        isValidate.value = false;
+      }
+    });
+
+    return {
+      resourceUrl,
+      appName,
+      avatar,
+      avatarUrl,
+      nameValue,
+      isCheckBox,
+      isValidate,
+      isVisible,
+      userStore
+    };
+  },
+  methods: {
+    onClose() {
+      this.isVisible = false;
+      this.triggerEvent('close', false);
+    },
+
+    onLogin() {
+      let res = this.validate();
+      if (!res.validate) {
+        mpx.showToast({
+          icon: "error",
+          title: res.message,
+          duration: 2000
+        });
+      }
+    },
+
+    onChooseAvatar(e) {
+      this.avatarUrl = e.detail.avatarUrl;
+      this.validate();
+    },
+
+    wxPhoneLogin(event) {
+      console.log(event);
+      if (event.detail.errMsg === "getPhoneNumber:ok") {
+        mpx.showLoading({
+          title: '登录中...',
+          mask: true
+        });
+
+        this.userStore.mpRegister(event.detail.code).then((resp) => {
+          mpx.hideLoading();
+          if (resp.status) {
+            this.triggerEvent("status", resp.status);
+            this.onClose();
+          } else {
+            mpx.showToast({
+              icon: "error",
+              title: resp.message || '登录失败',
+              duration: 2000
+            });
+          }
+        }).catch(() => {
+          mpx.hideLoading();
+          mpx.showToast({
+            icon: "error",
+            title: '登录失败，请重试',
+            duration: 2000
+          });
+        });
+      }
+    },
+
+    validate() {
+      if (!this.isCheckBox) {
+        this.isValidate = false;
+        return { validate: false, message: "请阅读并同意用户协议" };
+      }
+      if (!this.nameValue) {
+        this.isValidate = false;
+        return { validate: false, message: "请输入姓名" };
+      }
+      this.isValidate = true;
+      return { validate: true, message: "" };
+    },
+
+    goInfo(e) {
+      const id = e.currentTarget?.id;
+      this.triggerEvent("policy", id);
+      mpx.navigateTo({
+        url: '/jmash/pages/auth/cms-protocol?channelAlias=' + id
+      });
+    },
+  }
+})
+</script>
+
+<style lang="scss">
+$primary: #07c160;
+$primary-dark: #06ad56;
+$text-1: #111111;
+$text-2: #555555;
+$text-3: #888888;
+$border: #d0d0d0;
+$bg-page: #f2f2f2;
+$bg-card: #ffffff;
+
+.login-popup {
+  background-color: $bg-card !important;
+  border-radius: 32rpx 32rpx 0 0 !important;
+  overflow: hidden;
+}
+
+.popup-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 36rpx 40rpx 28rpx;
+  background: $bg-card;
+
+  .header-info {
+    flex: 1;
+
+    .header-title {
+      font-size: 36rpx;
+      font-weight: 700;
+      color: $text-1;
+      margin: 0;
+      letter-spacing: 1rpx;
+    }
+  }
+
+  .header-close {
+    width: 56rpx;
+    height: 56rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $bg-page;
+    border-radius: 50%;
+
+    .close-icon {
+      font-size: 28rpx;
+      color: $text-3;
+      line-height: 1;
+      margin-top: -2rpx;
+    }
+  }
+}
+
+.popup-body {
+  padding: 20rpx 48rpx 56rpx;
+  background: $bg-card;
+}
+
+.avatar-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 48rpx;
+
+  .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 {
+  margin-bottom: 36rpx;
+
+  .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;
+  }
+}
+
+.agreement-row {
+  margin-bottom: 48rpx;
+  padding: 0 4rpx;
+
+  .agreement-check {
+    font-size: 24rpx;
+
+    .agreement-text {
+      color: $text-3;
+      font-size: 24rpx;
+    }
+
+    .agreement-link {
+      color: $primary;
+      font-size: 24rpx;
+    }
+  }
+}
+
+.action-area {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .btn-login {
+    width: 100%;
+    height: 88rpx;
+    border-radius: 44rpx;
+    font-size: 30rpx;
+    font-weight: 600;
+    letter-spacing: 2rpx;
+    background-color: $primary;
+    color: #fff;
+
+    &.btn-disabled {
+      opacity: 0.5;
+    }
+  }
+
+  .btn-cancel {
+    margin-top: 28rpx;
+    padding: 16rpx 32rpx;
+
+    .cancel-text {
+      font-size: 26rpx;
+      color: $text-3;
+    }
+  }
+}
+
+:deep(.cube-button--primary) {
+  background-color: $primary;
+  border: none;
+
+  &:active {
+    background-color: $primary-dark;
+  }
+}
+
+:deep(.cube-checkbox__input) {
+  margin-right: 8rpx;
+}
+
+:deep(.cube-checkbox__content) {
+  font-size: 20rpx;
+  line-height: 1.5;
+}
+</style>
+
+<script type="application/json">
+{
+  "component": true,
+  "usingComponents": {
+    "cube-modal": "@mpxjs/mpx-cube-ui/lib/components/modal/index.mpx",
+    "cube-button": "@mpxjs/mpx-cube-ui/lib/components/button/index.mpx",
+    "cube-checkbox": "@mpxjs/mpx-cube-ui/lib/components/checkbox/index.mpx",
+    "cube-checkbox-group": "@mpxjs/mpx-cube-ui/lib/components/checkbox-group/index.mpx"
+  }
+}
 </script>