jmash-core-mp 0.1.21 → 0.1.22

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

@@ -1,389 +1,389 @@
-<template>
-  <!-- Web端账号登录弹窗 -->
-  <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">账号登录</h2>
-      </view>
-      <view class="header-close" bind:tap="onClose">
-        <text class="close-icon">×</text>
-      </view>
-    </view>
-
-    <!-- 内容区域 -->
-    <view class="popup-body" slot="content">
-      <!-- 用户名输入 -->
-      <view class="form-item">
-        <view class="form-label">用户名</view>
-        <input type="text" class="form-input" placeholder="请输入用户名" bind:input="onUsernameInput"
-          value="{{ username }}" />
-      </view>
-
-      <!-- 密码输入 -->
-      <view class="form-item">
-        <view class="form-label">密码</view>
-        <input type="password" class="form-input" placeholder="请输入密码" bind:input="onPasswordInput"
-          value="{{ password }}" />
-      </view>
-
-      <!-- 协议勾选 -->
-      <view class="agreement-row">
-        <cube-checkbox value="{{ agreed }}" bind:input="onAgreeChange" shape="square" class="agreement-check">
-          <text class="agreement-text">已阅读并同意</text>
-          <text id="user" class="agreement-link" bind:tap="goInfo">《用户使用协议》</text>
-          <text class="agreement-text">和</text>
-          <text id="privacy" class="agreement-link" bind:tap="goInfo">《隐私权政策》</text>
-        </cube-checkbox>
-      </view>
-
-      <!-- 操作按钮区 -->
-      <view class="action-area">
-        <button class="btn-login" bind:tap="handleLogin" disabled="{{ !canLogin }}">
-          登录
-        </button>
-        <button class="btn-register" bind:tap="handleRegister">
-          新用户注册
-        </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, computed } from '@mpxjs/core'
-import { useUserStore } from '../../store/user'
-
-createComponent({
-  properties: {
-    visible: {
-      type: Boolean,
-      value: false
-    }
-  },
-  setup(props) {
-    const userStore = useUserStore()
-    // 表单数据
-    const username = ref('')
-    const password = ref('')
-    const agreed = ref(false)
-    const isVisible = ref(props.visible)
-
-    const { visible } = toRefs(props)
-    watch(visible, (newVal) => {
-      isVisible.value = newVal
-      if (newVal) {
-        // 打开弹窗重置表单
-        username.value = ''
-        password.value = ''
-        agreed.value = false
-      }
-    })
-
-    // 登录按钮是否可点击计算属性
-    const canLogin = computed(() => {
-      return username.value.trim() && password.value.trim() && agreed.value
-    })
-
-    return {
-      username,
-      password,
-      agreed,
-      isVisible,
-      canLogin,
-      userStore
-    }
-  },
-  methods: {
-    // 关闭弹窗
-    onClose() {
-      this.isVisible = false
-      this.triggerEvent('close', false)
-    },
-
-    // 用户名输入
-    onUsernameInput(e) {
-      this.username = e.detail.value
-    },
-
-    // 密码输入
-    onPasswordInput(e) {
-      this.password = e.detail.value
-    },
-
-    // 协议勾选变化
-    onAgreeChange(e) {
-      this.agreed = e.detail.value
-    },
-
-    // 登录逻辑
-    handleLogin() {
-      if (!this.canLogin) return
-
-      // 表单校验
-      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) {
-        return mpx.showToast({ title: '请阅读并同意用户协议', icon: 'none', duration: 2000 })
-      }
-
-      mpx.showLoading({ title: '登录中...', mask: true })
-      // 调用store登录方法
-      let that = this;
-      this.userStore.webLogin(
-        this.username.trim(), this.password.trim()
-      ).then(res => {
-        mpx.hideLoading()
-        if (res.status) {
-          mpx.showToast({ title: '登录成功', icon: 'success', duration: 1500 })
-          // 触发登录成功事件
-          that.triggerEvent('loginSuccess', res.data)
-          // 关闭弹窗
-          setTimeout(() => {
-            that.onClose()
-          }, 1500)
-        } else {
-          mpx.showToast({ title: res.message || '登录失败，请重试', icon: 'error', duration: 2000 })
-        }
-      }).catch((err) => {
-        mpx.hideLoading()
-        console.error('登录失败:', err)
-        mpx.showToast({ title: '登录失败，请检查网络', icon: 'error', duration: 2000 })
-      })
-    },
-
-    // 注册跳转
-    handleRegister() {
-      // 触发注册事件，父组件处理跳转逻辑
-      this.triggerEvent('toRegister')
-    },
-
-    // 跳转协议页面
-    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: #1677ff; // Web端主色调蓝色
-$primary-dark: #0958d9;
-$text-1: #111111;
-$text-2: #555555;
-$text-3: #888888;
-$border: #d9d9d9;
-$border-hover: #4096ff;
-$bg-page: #f5f5f5;
-$bg-card: #ffffff;
-$bg-disabled: #f5f5f5;
-$text-disabled: #999999;
-
-.login-popup {
-  width: 420px;
-  background-color: $bg-card !important;
-  border-radius: 8px !important;
-  overflow: hidden;
-}
-
-.popup-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px 16px;
-  background: $bg-card;
-  border-bottom: 1px solid $border;
-
-  .header-info {
-    flex: 1;
-
-    .header-title {
-      font-size: 18px;
-      font-weight: 600;
-      color: $text-1;
-      margin: 0;
-      line-height: 1.5;
-    }
-  }
-
-  .header-close {
-    width: 28px;
-    height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: transparent;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background 0.2s;
-
-    &:hover {
-      background: $bg-page;
-    }
-
-    .close-icon {
-      font-size: 20px;
-      color: $text-3;
-      line-height: 1;
-    }
-  }
-}
-
-.popup-body {
-  padding: 24px;
-  background: $bg-card;
-}
-
-/* 表单通用样式 */
-.form-item {
-  margin-bottom: 20px;
-
-  .form-label {
-    font-size: 14px;
-    color: $text-1;
-    margin-bottom: 8px;
-    line-height: 1.5;
-  }
-
-  .form-input {
-    width: 100%;
-    height: 40px;
-    padding: 8px 12px;
-    font-size: 14px;
-    border: 1px solid $border;
-    border-radius: 6px;
-    outline: none;
-    transition: border-color 0.2s, box-shadow 0.2s;
-    box-sizing: border-box;
-
-    &:focus {
-      border-color: $border-hover;
-      box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
-    }
-
-    &::placeholder {
-      color: $text-3;
-    }
-  }
-}
-
-.agreement-row {
-  margin-bottom: 24px;
-
-  .agreement-check {
-    font-size: 13px;
-    cursor: pointer;
-
-    .agreement-text {
-      color: $text-2;
-      font-size: 13px;
-    }
-
-    .agreement-link {
-      color: $primary;
-      font-size: 13px;
-      cursor: pointer;
-      transition: color 0.2s;
-
-      &:hover {
-        color: $primary-dark;
-        text-decoration: underline;
-      }
-    }
-  }
-}
-
-.action-area {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-
-  .btn-login {
-    width: 100%;
-    height: 42px;
-    border-radius: 6px;
-    font-size: 15px;
-    font-weight: 500;
-    background-color: $primary;
-    color: #fff;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background-color: $primary-dark;
-    }
-
-    &:disabled {
-      background-color: $bg-disabled;
-      color: $text-disabled;
-      cursor: not-allowed;
-    }
-  }
-
-  .btn-register {
-    width: 100%;
-    height: 42px;
-    border-radius: 6px;
-    font-size: 15px;
-    font-weight: 500;
-    background-color: #fff;
-    color: $primary;
-    border: 1px solid $primary;
-    cursor: pointer;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background-color: rgba(22, 119, 255, 0.04);
-    }
-  }
-
-  .btn-cancel {
-    text-align: center;
-    padding: 8px 0;
-    cursor: pointer;
-
-    .cancel-text {
-      font-size: 14px;
-      color: $text-3;
-      transition: color 0.2s;
-
-      &:hover {
-        color: $text-2;
-      }
-    }
-  }
-}
-
-/* cube-ui组件样式调整 */
-:deep(.cube-checkbox__input) {
-  margin-right: 8px;
-}
-
-:deep(.cube-checkbox__content) {
-  line-height: 1.5;
-}
-</style>
-
-<script type="application/json">
-{
-  "component": true,
-  "usingComponents": {
-    "cube-modal": "@mpxjs/mpx-cube-ui/lib/components/modal/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>
+<template>
+  <!-- Web端账号登录弹窗 -->
+  <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">账号登录</h2>
+      </view>
+      <view class="header-close" bind:tap="onClose">
+        <text class="close-icon">×</text>
+      </view>
+    </view>
+
+    <!-- 内容区域 -->
+    <view class="popup-body" slot="content">
+      <!-- 用户名输入 -->
+      <view class="form-item">
+        <view class="form-label">用户名</view>
+        <input type="text" class="form-input" placeholder="请输入用户名" bind:input="onUsernameInput"
+          value="{{ username }}" />
+      </view>
+
+      <!-- 密码输入 -->
+      <view class="form-item">
+        <view class="form-label">密码</view>
+        <input type="password" class="form-input" placeholder="请输入密码" bind:input="onPasswordInput"
+          value="{{ password }}" />
+      </view>
+
+      <!-- 协议勾选 -->
+      <view class="agreement-row">
+        <cube-checkbox value="{{ agreed }}" bind:input="onAgreeChange" shape="square" class="agreement-check">
+          <text class="agreement-text">已阅读并同意</text>
+          <text id="user" class="agreement-link" bind:tap="goInfo">《用户使用协议》</text>
+          <text class="agreement-text">和</text>
+          <text id="privacy" class="agreement-link" bind:tap="goInfo">《隐私权政策》</text>
+        </cube-checkbox>
+      </view>
+
+      <!-- 操作按钮区 -->
+      <view class="action-area">
+        <button class="btn-login" bind:tap="handleLogin" disabled="{{ !canLogin }}">
+          登录
+        </button>
+        <button class="btn-register" bind:tap="handleRegister">
+          新用户注册
+        </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, computed } from '@mpxjs/core'
+import { useUserStore } from '../../store/user'
+
+createComponent({
+  properties: {
+    visible: {
+      type: Boolean,
+      value: false
+    }
+  },
+  setup(props) {
+    const userStore = useUserStore()
+    // 表单数据
+    const username = ref('')
+    const password = ref('')
+    const agreed = ref(false)
+    const isVisible = ref(props.visible)
+
+    const { visible } = toRefs(props)
+    watch(visible, (newVal) => {
+      isVisible.value = newVal
+      if (newVal) {
+        // 打开弹窗重置表单
+        username.value = ''
+        password.value = ''
+        agreed.value = false
+      }
+    })
+
+    // 登录按钮是否可点击计算属性
+    const canLogin = computed(() => {
+      return username.value.trim() && password.value.trim() && agreed.value
+    })
+
+    return {
+      username,
+      password,
+      agreed,
+      isVisible,
+      canLogin,
+      userStore
+    }
+  },
+  methods: {
+    // 关闭弹窗
+    onClose() {
+      this.isVisible = false
+      this.triggerEvent('close', false)
+    },
+
+    // 用户名输入
+    onUsernameInput(e) {
+      this.username = e.detail.value
+    },
+
+    // 密码输入
+    onPasswordInput(e) {
+      this.password = e.detail.value
+    },
+
+    // 协议勾选变化
+    onAgreeChange(e) {
+      this.agreed = e.detail.value
+    },
+
+    // 登录逻辑
+    handleLogin() {
+      if (!this.canLogin) return
+
+      // 表单校验
+      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) {
+        return mpx.showToast({ title: '请阅读并同意用户协议', icon: 'none', duration: 2000 })
+      }
+
+      mpx.showLoading({ title: '登录中...', mask: true })
+      // 调用store登录方法
+      let that = this;
+      this.userStore.webLogin(
+        this.username.trim(), this.password.trim()
+      ).then(res => {
+        mpx.hideLoading()
+        if (res.status) {
+          mpx.showToast({ title: '登录成功', icon: 'success', duration: 1500 })
+          // 触发登录成功事件
+          that.triggerEvent('loginSuccess', res.data)
+          // 关闭弹窗
+          setTimeout(() => {
+            that.onClose()
+          }, 1500)
+        } else {
+          mpx.showToast({ title: res.message || '登录失败，请重试', icon: 'error', duration: 2000 })
+        }
+      }).catch((err) => {
+        mpx.hideLoading()
+        console.error('登录失败:', err)
+        mpx.showToast({ title: '登录失败，请检查网络', icon: 'error', duration: 2000 })
+      })
+    },
+
+    // 注册跳转
+    handleRegister() {
+      // 触发注册事件，父组件处理跳转逻辑
+      this.triggerEvent('toRegister')
+    },
+
+    // 跳转协议页面
+    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: #1677ff; // Web端主色调蓝色
+$primary-dark: #0958d9;
+$text-1: #111111;
+$text-2: #555555;
+$text-3: #888888;
+$border: #d9d9d9;
+$border-hover: #4096ff;
+$bg-page: #f5f5f5;
+$bg-card: #ffffff;
+$bg-disabled: #f5f5f5;
+$text-disabled: #999999;
+
+.login-popup {
+  width: 420px;
+  background-color: $bg-card !important;
+  border-radius: 8px !important;
+  overflow: hidden;
+}
+
+.popup-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px 16px;
+  background: $bg-card;
+  border-bottom: 1px solid $border;
+
+  .header-info {
+    flex: 1;
+
+    .header-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: $text-1;
+      margin: 0;
+      line-height: 1.5;
+    }
+  }
+
+  .header-close {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background 0.2s;
+
+    &:hover {
+      background: $bg-page;
+    }
+
+    .close-icon {
+      font-size: 20px;
+      color: $text-3;
+      line-height: 1;
+    }
+  }
+}
+
+.popup-body {
+  padding: 24px;
+  background: $bg-card;
+}
+
+/* 表单通用样式 */
+.form-item {
+  margin-bottom: 20px;
+
+  .form-label {
+    font-size: 14px;
+    color: $text-1;
+    margin-bottom: 8px;
+    line-height: 1.5;
+  }
+
+  .form-input {
+    width: 100%;
+    height: 40px;
+    padding: 8px 12px;
+    font-size: 14px;
+    border: 1px solid $border;
+    border-radius: 6px;
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    box-sizing: border-box;
+
+    &:focus {
+      border-color: $border-hover;
+      box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
+    }
+
+    &::placeholder {
+      color: $text-3;
+    }
+  }
+}
+
+.agreement-row {
+  margin-bottom: 24px;
+
+  .agreement-check {
+    font-size: 13px;
+    cursor: pointer;
+
+    .agreement-text {
+      color: $text-2;
+      font-size: 13px;
+    }
+
+    .agreement-link {
+      color: $primary;
+      font-size: 13px;
+      cursor: pointer;
+      transition: color 0.2s;
+
+      &:hover {
+        color: $primary-dark;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.action-area {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .btn-login {
+    width: 100%;
+    height: 42px;
+    border-radius: 6px;
+    font-size: 15px;
+    font-weight: 500;
+    background-color: $primary;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: $primary-dark;
+    }
+
+    &:disabled {
+      background-color: $bg-disabled;
+      color: $text-disabled;
+      cursor: not-allowed;
+    }
+  }
+
+  .btn-register {
+    width: 100%;
+    height: 42px;
+    border-radius: 6px;
+    font-size: 15px;
+    font-weight: 500;
+    background-color: #fff;
+    color: $primary;
+    border: 1px solid $primary;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: rgba(22, 119, 255, 0.04);
+    }
+  }
+
+  .btn-cancel {
+    text-align: center;
+    padding: 8px 0;
+    cursor: pointer;
+
+    .cancel-text {
+      font-size: 14px;
+      color: $text-3;
+      transition: color 0.2s;
+
+      &:hover {
+        color: $text-2;
+      }
+    }
+  }
+}
+
+/* cube-ui组件样式调整 */
+:deep(.cube-checkbox__input) {
+  margin-right: 8px;
+}
+
+:deep(.cube-checkbox__content) {
+  line-height: 1.5;
+}
+</style>
+
+<script type="application/json">
+{
+  "component": true,
+  "usingComponents": {
+    "cube-modal": "@mpxjs/mpx-cube-ui/lib/components/modal/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>