jmash-core-mp 0.1.0

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

@@ -0,0 +1,414 @@
+<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 { auth } from '../../utils/auth'
+
+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);
+
+    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
+    };
+  },
+  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
+        });
+
+        auth.phoneCodeLogin(event.detail.code, this.nameValue).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>

package/src/custom-tab-bar/index.mpx

@@ -0,0 +1,11 @@
+<template>
+    <jmash-tab-bar wx:ref="tabBar"></jmash-tab-bar>
+</template>
+<style lang="scss"></style>
+<script type="application/json">
+    {
+        "usingComponents": {
+            "jmash-tab-bar": "../components/common/jmash-tab-bar.mpx"
+        }
+    }
+</script>

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*?fallback=true' {
+  const URL: string
+  export default URL
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+export type { AppConfig, ResponseData, ValidateData } from "./types/core";
+export { mpxFetch } from "./utils/request";
+export { config } from "./utils/config";
+export { grpc } from "./utils/grpc";
+export { auth } from "./utils/auth";
+export { authApi } from "./api/auth";
+export { cmsApi } from "./api/cms";
+export { dictApi } from "./api/dict";
+export { fileApi } from "./api/files";

package/src/packages/index.mpx

@@ -0,0 +1,8 @@
+<script type="application/json">
+{
+    "pages": [
+        "./pages/auth/login",
+        "./pages/auth/cms-protocol"
+    ]
+}
+</script>

package/src/packages/pages/auth/cms-protocol.mpx

@@ -0,0 +1,31 @@
+<template>
+    <cms-protocol siteId="{{ siteId }}" tenant="{{ tenant }}" channelAlias="{{ channelAlias }}"></cms-protocol>
+</template>
+
+<script>
+import { createPage, ref, onLoad } from '@mpxjs/core'
+
+createPage({
+    setup(props) {
+        console.log("123", props);
+        let siteId = ref(getApp().globalData.config.siteId);
+        let tenant = ref(getApp().globalData.config.tenant);
+        let channelAlias = ref('');
+        onLoad((options) => {
+            console.log(options);
+            channelAlias.value = options.channelAlias || 'privacy';
+        })
+        return { siteId, tenant, channelAlias };
+    },
+})
+</script>
+
+<style lang="scss"></style>
+
+<script type="application/json">
+{
+    "usingComponents": {
+        "cms-protocol": "../../../components/core/jmash-cms-protocol.mpx"
+    }
+}
+</script>

package/src/packages/pages/auth/login.mpx

@@ -0,0 +1,53 @@
+<template>
+  <jmash-login tabbar="{{ tabbar }}" backurl="{{ backurl }}">
+    <image mode="widthFix" src="{{ resourceUrl }}/images/login_bg.png" class="index_bj" slot="before">
+      <image mode="widthFix" src="{{ resourceUrl }}/images/logo.png" class="login_logo"></image>
+    </image>
+    <view class="tips_box" slot="after">温馨提示：{{ appName }}手机号授权登录。</view>
+  </jmash-login>
+</template>
+
+<script>
+import { createPage, ref } from '@mpxjs/core'
+
+createPage({
+  setup(props) {
+    let resourceUrl = ref(getApp().globalData.config.resourceUrl);
+    let appName = ref(getApp().globalData.config.name);
+    let tabbar = ref(props.tabbar === 'true');
+    let backurl = ref(props.backurl || '');
+    console.log(appName);
+    return { resourceUrl, appName, tabbar, backurl };
+  }
+})
+</script>
+
+<style lang="scss">
+.index_bj {
+  width: 100%;
+  position: relative;
+
+  .login_logo {
+    position: absolute;
+    left: 50%;
+    top: 20%;
+    transform: translateX(-50%);
+    width: 120rpx;
+  }
+}
+
+.tips_box {
+  text-align: center;
+  color: #666;
+  font-size: 24rpx;
+  margin-top: 40rpx;
+}
+</style>
+
+<script type="application/json">
+{
+  "usingComponents": {
+    "jmash-login": "../../../components/core/jmash-login.mpx"
+  }
+}
+</script>

package/src/pages/basic-component.mpx

@@ -0,0 +1,31 @@
+<template>
+  <view class="basic-component-page">
+    <text>{{ title }}</text>
+  </view>
+</template>
+
+<script>
+import { createPage, ref } from '@mpxjs/core'
+
+createPage({
+  setup(props, context) {
+    let title = ref('组件演示');
+    return { title };
+  },
+})
+</script>
+
+<style lang="scss">
+.basic-component-page {
+  padding: 40rpx;
+  text-align: center;
+  font-size: 32rpx;
+  color: #333;
+}
+</style>
+
+<script type="application/json">
+{
+  "usingComponents": {}
+}
+</script>

package/src/pages/half-home.mpx

@@ -0,0 +1,58 @@
+<template>
+  <view class="half-home-page">
+    <text>主页（半屏登录）</text>
+    <!-- 授权登录弹出层 -->
+    <jmash-popup-login visible="{{ isLoginPopup }}" bind:close="onLoginClose"
+      bind:status="loginSuccess"></jmash-popup-login>
+  </view>
+</template>
+
+<script>
+import { createPage, ref } from '@mpxjs/core'
+import { auth } from "../utils/auth.ts";
+
+createPage({
+  setup() {
+    let isLoginPopup = ref(false);
+    //检查登录并跳转登录
+    auth.loginOnlyAC().then(() => {
+      //登录成功，加载业务
+      console.log("静默登录成功");
+    }).catch(() => {
+      isLoginPopup.value = true;
+    });
+    return { isLoginPopup };
+  },
+  methods: {
+    // 授权登录弹出层关闭
+    onLoginClose: function (visible) {
+      console.log(visible.detail);
+      this.isLoginPopup = visible.detail;
+    },
+    // 登录成功
+    loginSuccess: function (status) {
+      if (status.detail) {
+        // 登录成功,加载业务
+        console.log("登录成功");
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.half-home-page {
+  padding: 40rpx;
+  text-align: center;
+  font-size: 32rpx;
+  color: #333;
+}
+</style>
+
+<script type="application/json">
+{
+  "usingComponents": {
+    "jmash-popup-login": "../components/core/jmash-popup-login.mpx"
+  }
+}
+</script>

package/src/pages/home.mpx

@@ -0,0 +1,38 @@
+<template>
+  <view class="home-page">
+    <text>主页（全屏登录）</text>
+  </view>
+</template>
+
+<script>
+import { createPage } from '@mpxjs/core'
+import { db } from '../utils/db'
+import mpx from '@mpxjs/core'
+
+createPage({
+  setup() {
+    // 无法退回,检查登录状态
+    if (!db.getToken()) {
+      mpx.navigateTo({
+        url: '/jmash/pages/auth/login'
+      })
+    }
+    return {}
+  }
+})
+</script>
+
+<style lang="scss">
+.home-page {
+  padding: 40rpx;
+  text-align: center;
+  font-size: 32rpx;
+  color: #333;
+}
+</style>
+
+<script type="application/json">
+{
+  "usingComponents": {}
+}
+</script>

package/src/pages/index.mpx

@@ -0,0 +1,45 @@
+<template>
+  <view class="page-body">
+    <button type="default" bind:tap="toHomePage">Welcome to Jmash Core MP</button>
+  </view>
+</template>
+
+<script>
+import mpx, { createPage } from '@mpxjs/core'
+
+createPage({
+  setup(props, context) {
+    console.log(context.refs);
+    return {};
+  },
+  methods: {
+    toHomePage() {
+      mpx.switchTab({
+        url: '/pages/tabbar/home'
+      })
+    },
+  }
+})
+</script>
+
+<style lang="scss">
+.page-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 40rpx;
+  gap: 30rpx;
+
+  button {
+    width: 80%;
+    height: 80rpx;
+    font-size: 32rpx;
+  }
+}
+</style>
+
+<script type="application/json">
+{
+  "usingComponents": {}
+}
+</script>