jmash-core-mp 0.1.0

package/src/components/auth-user/jmash-user.mpx

@@ -0,0 +1,119 @@
+<template>
+  <view class="auth-user-box">
+    <block wx:if="{{ token }}">
+      <view class="auth-user-l">
+        <image src="{{ baseUrl+'/v1/file/image/clip/200/200/' + userInfo.avatar }}" class="avatar-img"
+          wx:if="{{ userInfo.avatar }}"></image>
+        <image src="{{ resourceUrl + '/images/mall/' + defaultAvatar }}" class="avatar-img" style="border-radius:50%"
+          wx:elif="{{ defaultAvatar }}"></image>
+        <image src="{{ resourceUrl }}/images/mall/tswk.png" class="avatar-img" wx:else></image>
+        <view class="auth-user-r">
+          <view class="user-edit">{{ userInfo.realName }}
+            <image src="{{ resourceUrl }}/images/mall/book/icon/user_edit_icon.png" class="edit_icon"
+              bind:tap="handleUpdateUser">
+            </image>
+          </view>
+          <text class="user-mobile">{{ userInfo.mobilePhoneIns }}</text>
+        </view>
+      </view>
+    </block>
+    <view class="auth-user-l" wx:else>
+      <image src="{{ resourceUrl }}/images/mall/tswk.png" class="avatar-img"></image>
+      <text bind:tap="handleLogin">登录</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import mpx, { createComponent, ref, onShow } from '@mpxjs/core'
+import { db } from '../../utils/db';
+import { authApi } from '../../api/auth/index';
+
+createComponent({
+  properties: {
+    defaultAvatar: {
+      type: String,
+      value: ''
+    },
+  },
+  setup(props, context) {
+    let config = getApp().globalData.config;
+    let resourceUrl = ref(config.resourceUrl);
+    let baseUrl = ref(config.baseUrl);
+    let token = ref('');
+    let userInfo = ref({});
+
+    onShow(() => {
+      token.value = db.getToken();
+      authApi.userInfo().then((resp) => {
+        userInfo.value = resp.data;
+      })
+    })
+    console.log(resourceUrl);
+    return { resourceUrl, baseUrl, token, userInfo };
+  },
+  methods: {
+    handleLogin() {
+      mpx.navigateTo({
+        url: '/jmash/pages/auth/login'
+      })
+    },
+    handleUpdateUser() {
+      mpx.navigateTo({
+        url: '/pages/user/index'
+      })
+    },
+  }
+
+})
+</script>
+
+<style lang="scss">
+@use "../../styles/index.scss" as *;
+
+.auth-user-box {
+  display: flex;
+  align-items: center;
+  padding: 30rpx 0 30rpx 30rpx;
+
+  .auth-user-l {
+    display: flex;
+    align-items: center;
+    font-size: 30rpx;
+    font-weight: bold;
+
+    .avatar-img {
+      width: 120rpx;
+      height: 120rpx;
+      border-radius: $border-max-radius;
+      margin-right: 20rpx;
+    }
+  }
+
+  .auth-user-r {
+    .user-edit {
+      display: flex;
+      align-items: center;
+
+      .edit_icon {
+        width: 34rpx;
+        height: 34rpx;
+        margin-left: 10rpx;
+      }
+    }
+
+    .user-mobile {
+      font-size: $font-size;
+      color: $font-color-grey;
+      font-weight: 500;
+    }
+  }
+}
+</style>
+
+<script type="application/json">
+{
+  "component": true,
+  "usingComponents": {}
+}
+</script>

package/src/components/common/auth-avatar/avatar-edit/index.mpx

@@ -0,0 +1,31 @@
+<template>
+  <view class="avatar-edit-component">
+    <text>头像编辑组件</text>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  data: {
+    title: '头像编辑'
+  }
+})
+</script>
+
+<style lang="scss">
+.avatar-edit-component {
+  padding: 40rpx;
+  text-align: center;
+  font-size: 32rpx;
+  color: #333;
+}
+</style>
+
+<script type="application/json">
+{
+  "component": true,
+  "usingComponents": {}
+}
+</script>

package/src/components/common/auth-search/index.mpx

@@ -0,0 +1,31 @@
+<template>
+  <view class="search-component">
+    <text>搜索组件</text>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  data: {
+    title: '搜索'
+  }
+})
+</script>
+
+<style lang="scss">
+.search-component {
+  padding: 40rpx;
+  text-align: center;
+  font-size: 32rpx;
+  color: #333;
+}
+</style>
+
+<script type="application/json">
+{
+  "component": true,
+  "usingComponents": {}
+}
+</script>

package/src/components/common/jmash-tab-bar.mpx

@@ -0,0 +1,50 @@
+<template>
+    <cube-tab-bar wx:model="{{ selectedLabelDefault }}" wx:model-prop="value" tabs="{{ tabs }}"
+        bindclick="clickHandler">
+    </cube-tab-bar>
+</template>
+
+<script>
+import mpx, { createComponent } from '@mpxjs/core'
+createComponent({
+    data: {
+        selectedLabelDefault: 'Home',
+        tabs: [{
+            label: '首页',
+            value: 'Home',
+            pagePath: '/pages/tabbar/home',
+            icon: 'home'
+        },
+        {
+            label: '我的',
+            value: 'My',
+            pagePath: '/pages/tabbar/my',
+            icon: 'user'
+        },]
+    },
+    methods: {
+        clickHandler(tab) {
+            console.log('tab was clicked', tab)
+            const target = this.tabs.find(item => item.value === tab.detail.value)
+            if (target) {
+                mpx.switchTab({
+                    url: target.pagePath
+                });
+            }
+        },
+        activeTab(value) {
+            console.log('activeTab set value:', value)
+            this.selectedLabelDefault = value;
+        }
+    }
+})
+</script>
+<script type="application/json">
+{
+    "usingComponents": {
+        "cube-tab-bar": "@mpxjs/mpx-cube-ui/lib/components/tab-bar/index.mpx",
+        //   "cube-tab": "@mpxjs/mpx-cube-ui/lib/components/tab-bar/tab.mpx",
+        //  "cube-icon": "@mpxjs/mpx-cube-ui/lib/components/icon/index.mpx"
+    }
+}
+</script>

package/src/components/core/jmash-cms-protocol.mpx

@@ -0,0 +1,67 @@
+<template>
+    <view class="cms_box" wx:for="{{ contents }}" wx:key="*this">
+        <view class="cms_title">{{ title }}</view>
+        <rich-text nodes="{{ item.infoContent }}"></rich-text>
+    </view>
+</template>
+
+<script>
+import { createComponent, ref, toRefs, watch } from '@mpxjs/core'
+import { cmsApi } from '../../api/cms/index'
+
+createComponent({
+    properties: {
+        // 站点ID
+        siteId: {
+            type: String,
+            value: ""
+        },
+        // 租户
+        tenant: {
+            type: String,
+            value: ""
+        },
+        // 别名
+        channelAlias: {
+            type: String,
+            value: ""
+        }
+    },
+    setup(props) {
+        let contents = ref([{ contentId: "123" }]);
+        let title = ref("");
+        const { channelAlias } = toRefs(props)
+        watch(channelAlias, (newVal) => {
+            cmsApi.findCmsContentInfo({ siteId: props.siteId, channelAlias: newVal, tenant: props.tenant }).then(({ data }) => {
+                console.log(data)
+                title.value = data.cmsInfo.infoTitle;
+                contents.value = data.infoContentResults;
+                console.log(contents)
+            })
+        })
+        return {
+            title,
+            contents
+        };
+    },
+})
+</script>
+
+<style lang="scss">
+.cms_box {
+    padding: 15px 3%;
+    font-size: 28rpx;
+    line-height: 25px;
+}
+
+.cms_title {
+    text-align: center;
+}
+</style>
+
+<script type="application/json">
+{
+    "component": true,
+    "usingComponents": {}
+}
+</script>

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

@@ -0,0 +1,343 @@
+<template>
+  <slot name="before"></slot>
+  <view class="login_box">
+    <!-- 头像区域 -->
+    <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>
+
+    <button open-type="getPhoneNumber" style="{{ loginStyle }}" bindgetphonenumber="wxPhoneLogin"
+      wx:if="{{ agreeStatus && isValidate }}">手机号授权登录</button>
+    <button bind:tap="onLogin" style="{{ loginStyle }}" wx:else>手机号授权登录</button>
+    <radio-group bindchange="agreeChange" class="protocol_agree" wx:if="{{ showPrivacyPolicy }}">
+      <label>
+        <radio value="{{ agreeStatus }}" checked="{{ agreeStatus }}" color="{{ checkedColor }}" />
+        已阅读<text id="user" style="{{ agreementStyle }}" catch:tap="goPolicyInfo">《用户使用协议》</text> <text id="privacy"
+          style="{{ agreementStyle }}" catch:tap="goPolicyInfo">《隐私权政策》</text>
+      </label>
+    </radio-group>
+    <slot name="after"></slot>
+  </view>
+</template>
+
+<script>
+import { auth } from '../../utils/auth'
+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 avatar = ref(config.resourceUrl + "/images/components/gray_head2x.png");
+    console.log(avatar);
+    return {
+      agreeStatus,
+      nameValue,
+      avatarUrl,
+      isValidate,
+      avatar,
+    };
+  },
+  methods: {
+    // 协议勾选事件
+    agreeChange() {
+      this.agreeStatus = !this.agreeStatus;
+      this.validate();
+    },
+    // 跳转隐私协议
+    goPolicyInfo(e) {
+      const id = e.currentTarget.id
+      this.triggerEvent("policy", id);
+      mpx.navigateTo({
+        url: '/jmash/pages/auth/cms-protocol?channelAlias=' + id
+      });
+    },
+    // 头像选择
+    onChooseAvatar(e) {
+      this.avatarUrl = e.detail.avatarUrl;
+      this.validate();
+    },
+    // 验证
+    validate() {
+      if (!this.nameValue) {
+        this.isValidate = false;
+        return;
+      }
+      this.isValidate = true;
+    },
+    // 登录前验证
+    onLogin() {
+      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) {
+      let that = this;
+      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);
+        auth.phoneCodeLogin(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>