jmash-core-mp 0.1.21 → 0.1.22

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

@@ -1,359 +1,359 @@
-<template>
-  <view class="auth-user-box">
-    <block wx:if="{{ isLogin }}">
-      <view class="auth-user-l" bind:tap="handleUpdateUser">
-        <!-- 头像 -->
-        <view class="avatar-wrapper">
-          <image src="{{ baseUrl+'/v1/file/image/clip/200/200/' + userInfo.avatar }}" class="avatar-img"
-            wx:if="{{ userInfo.avatar }}" mode="aspectFill"></image>
-          <image src="{{ defaultAvatar }}" class="avatar-img" wx:elif="{{ defaultAvatar }}" mode="aspectFill"></image>
-          <image src="{{ resourceUrl }}/images/mall/tswk.png" class="avatar-img" wx:else mode="aspectFill"></image>
-          <!-- <view class="avatar-badge">
-            <text class="badge-icon">✎</text>
-          </view> -->
-        </view>
-
-        <!-- 用户信息 -->
-        <view class="auth-user-r">
-          <view class="user-edit">
-            <text class="user-name" style="color: {{ userNameColor }}">{{ userInfo.realName || '微信用户' }}</text>
-            <view class="edit-icon-bg">
-              <text class="edit-icon">✎</text>
-            </view>
-          </view>
-          <text class="user-mobile" style="color: {{ userMobileColor }}">{{ userInfo.mobilePhoneIns || '未绑定手机号'
-            }}</text>
-        </view>
-
-        <!-- 右侧箭头 -->
-        <!-- <view class="right-arrow" bind:tap="handleUpdateUser">
-          <text class="arrow-icon">›</text>
-        </view> -->
-      </view>
-    </block>
-
-    <!-- 未登录状态 -->
-    <view class="auth-user-l not-logged-in" wx:else>
-      <view class="not-logged-wrapper">
-        <view class="avatar-wrapper" bind:tap="handleLogin">
-          <!--  <image src="{{ resourceUrl }}/images/mall/tswk.png" class="avatar-img not-logged" mode="aspectFill"></image> -->
-          <image src="{{ defaultAvatar }}" class="avatar-img not-logged" wx:if="{{ defaultAvatar }}" mode="aspectFill">
-          </image>
-          <image src="{{ resourceUrl }}/images/mall/tswk.png" class="avatar-img not-logged" wx:else mode="aspectFill">
-          </image>
-          <view class="avatar-plus">
-            <text class="plus-icon">+</text>
-          </view>
-        </view>
-        <view class="auth-user-r">
-          <text class="login-hint-text">登录后解锁更多功能</text>
-          <view class="login-btn" bind:tap="handleLogin">
-            <text class="login-text">立即登录</text>
-            <text class="login-arrow">›</text>
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script lang="ts">
-import mpx, { createComponent, ref, onShow, computed } from '@mpxjs/core'
-import { useUserStore } from '../../store/user'
-import { UserInfo } from "../../api/auth/types";
-
-createComponent({
-  properties: {
-    defaultAvatar: {
-      type: String,
-      value: ''
-    },
-    backurl: {
-      type: String,
-      value: '/pages/home'
-    },
-    tabbar: {
-      type: String,
-      value: 'false'
-    },
-    userNameColor: {
-      type: String,
-      value: '#111111'
-    },
-    userMobileColor: {
-      type: String,
-      value: '#999999'
-    }
-  },
-  setup(props, context) {
-    let config = getApp().globalData.config;
-    let resourceUrl = ref(config.resourceUrl);
-    let baseUrl = ref(config.baseUrl);
-    let userInfo = ref({} as UserInfo);
-    let userStore = useUserStore();
-    let refreshFunc = () => {
-      // 检查登录是否有效？
-      if (userStore.checkLogin()) {
-        userStore.getUserInfo().then((resp) => {
-          userInfo.value = resp;
-        });
-      }
-    };
-    onShow(refreshFunc);
-    //console.log(resourceUrl);
-    const isLogin = computed(() => userStore.accessToken !== '');
-    return { resourceUrl, baseUrl, userInfo, userStore, refreshFunc, isLogin };
-  },
-  methods: {
-    handleLogin() {
-      console.log("handleLogin");
-      //检查登录并跳转登录
-      this.userStore.loginOnlyAC().then(() => {
-        //登录成功，加载业务
-        console.log("静默登录成功");
-        this.refreshFunc();
-      }).catch(() => {
-        console.log("登录失败1！", this.backurl);
-        mpx.navigateTo({
-          url: '/jmash/pages/auth/login' + "?backurl=" + encodeURIComponent(this.backurl) + "&tabbar=" + this.tabbar
-        })
-      });
-    },
-    handleUpdateUser() {
-      mpx.navigateTo({
-        url: '/jmash/pages/auth/update-user'
-      })
-    },
-  }
-
-})
-</script>
-
-<style lang="scss">
-@use "../../styles/index.scss" as *;
-
-// 颜色变量
-$primary: #07c160;
-$text-1: #111111;
-$text-2: #666666;
-$text-3: #999999;
-$border: #e8e8e8;
-$bg-page: #f5f5f5;
-$bg-card: #ffffff;
-
-// 修改背景色从白色变到透明
-.auth-user-box {
-  display: flex;
-  align-items: center;
-  padding: 32rpx 24rpx 32rpx 0;
-  // background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
-  border-radius: 20rpx;
-  margin: 16rpx 16rpx 24rpx 0;
-  // box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
-  transition: all 0.3s;
-  background: transparent;
-
-  &:active {
-    transform: translateY(1rpx);
-    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
-  }
-
-  .auth-user-l {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    width: 100%;
-
-    .avatar-wrapper {
-      position: relative;
-      margin-right: 30rpx;
-      flex-shrink: 0;
-      cursor: pointer;
-
-      .avatar-img {
-        width: 130rpx;
-        height: 130rpx;
-        border-radius: 50%;
-        // background-color: $bg-page;
-        display: block;
-        transition: all 0.3s;
-        // border: 3rpx solid rgba(7, 193, 96, 0.1);
-        // box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.1);
-
-        &:active {
-          transform: scale(1.05);
-        }
-
-        &.not-logged {
-          opacity: 0.4;
-          filter: grayscale(100%);
-          box-shadow: none;
-        }
-      }
-
-      .avatar-badge {
-        position: absolute;
-        right: -2rpx;
-        bottom: -2rpx;
-        width: 36rpx;
-        height: 36rpx;
-        background: $primary;
-        border-radius: 50%;
-        border: 2rpx solid $bg-card;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-shadow: 0 2rpx 6rpx rgba(7, 193, 96, 0.3);
-
-        .badge-icon {
-          font-size: 16rpx;
-          color: #fff;
-        }
-      }
-    }
-  }
-
-  .auth-user-r {
-    flex: 1;
-    min-width: 0;
-
-    .user-edit {
-      display: flex;
-      align-items: center;
-      margin-bottom: 10rpx;
-      cursor: pointer;
-
-      .user-name {
-        font-size: 32rpx;
-        font-weight: 600;
-        color: $text-1;
-        line-height: 1.2;
-      }
-
-      .edit-icon-bg {
-        width: 36rpx;
-        height: 36rpx;
-        background: $primary;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-left: 8rpx;
-
-        .edit-icon {
-          font-size: 16rpx;
-          color: #fff;
-        }
-      }
-    }
-
-    .user-mobile {
-      font-size: 24rpx;
-      color: $text-3;
-      line-height: 1.4;
-    }
-  }
-
-  .right-arrow {
-    flex-shrink: 0;
-    width: 32rpx;
-    height: 32rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .arrow-icon {
-      font-size: 66rpx;
-      color: $text-3;
-      font-weight: 300;
-      line-height: 1;
-    }
-  }
-
-  // 未登录状态
-  .not-logged-in {
-    .not-logged-wrapper {
-      display: flex;
-      align-items: center;
-      width: 100%;
-    }
-
-    .avatar-wrapper {
-      .avatar-plus {
-        position: absolute;
-        right: -4rpx;
-        bottom: -4rpx;
-        width: 40rpx;
-        height: 40rpx;
-        background: $primary;
-        border-radius: 50%;
-        border: 3rpx solid $bg-card;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
-
-        .plus-icon {
-          font-size: 36rpx;
-          color: #fff;
-          line-height: 1;
-          font-weight: 300;
-        }
-      }
-    }
-
-    .auth-user-r {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      min-width: 0;
-      margin-left: 8rpx;
-
-      .login-hint-text {
-        font-size: 24rpx;
-        color: $text-3;
-        margin-bottom: 12rpx;
-        line-height: 1.4;
-      }
-
-      .login-btn {
-        display: inline-flex;
-        align-items: center;
-        padding: 12rpx 24rpx;
-        background: linear-gradient(135deg, #07c160 0%, #05a050 100%);
-        border-radius: 40rpx;
-        cursor: pointer;
-        box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.25);
-        transition: all 0.3s;
-        width: fit-content;
-
-        &:active {
-          transform: scale(0.98);
-          box-shadow: 0 2rpx 6rpx rgba(7, 193, 96, 0.2);
-        }
-
-        .login-text {
-          font-size: 26rpx;
-          font-weight: 600;
-          color: #fff;
-        }
-
-        .login-arrow {
-          font-size: 30rpx;
-          color: #fff;
-          margin-left: 4rpx;
-          line-height: 1;
-          font-weight: 300;
-        }
-      }
-    }
-  }
-}
-</style>
-
-<script type="application/json">
-{
-  "component": true,
-  "usingComponents": {}
-}
-</script>
+<template>
+  <view class="auth-user-box">
+    <block wx:if="{{ isLogin }}">
+      <view class="auth-user-l" bind:tap="handleUpdateUser">
+        <!-- 头像 -->
+        <view class="avatar-wrapper">
+          <image src="{{ baseUrl+'/v1/file/image/clip/200/200/' + userInfo.avatar }}" class="avatar-img"
+            wx:if="{{ userInfo.avatar }}" mode="aspectFill"></image>
+          <image src="{{ defaultAvatar }}" class="avatar-img" wx:elif="{{ defaultAvatar }}" mode="aspectFill"></image>
+          <image src="{{ resourceUrl }}/images/mall/tswk.png" class="avatar-img" wx:else mode="aspectFill"></image>
+          <!-- <view class="avatar-badge">
+            <text class="badge-icon">✎</text>
+          </view> -->
+        </view>
+
+        <!-- 用户信息 -->
+        <view class="auth-user-r">
+          <view class="user-edit">
+            <text class="user-name" style="color: {{ userNameColor }}">{{ userInfo.realName || '微信用户' }}</text>
+            <view class="edit-icon-bg">
+              <text class="edit-icon">✎</text>
+            </view>
+          </view>
+          <text class="user-mobile" style="color: {{ userMobileColor }}">{{ userInfo.mobilePhoneIns || '未绑定手机号'
+            }}</text>
+        </view>
+
+        <!-- 右侧箭头 -->
+        <!-- <view class="right-arrow" bind:tap="handleUpdateUser">
+          <text class="arrow-icon">›</text>
+        </view> -->
+      </view>
+    </block>
+
+    <!-- 未登录状态 -->
+    <view class="auth-user-l not-logged-in" wx:else>
+      <view class="not-logged-wrapper">
+        <view class="avatar-wrapper" bind:tap="handleLogin">
+          <!--  <image src="{{ resourceUrl }}/images/mall/tswk.png" class="avatar-img not-logged" mode="aspectFill"></image> -->
+          <image src="{{ defaultAvatar }}" class="avatar-img not-logged" wx:if="{{ defaultAvatar }}" mode="aspectFill">
+          </image>
+          <image src="{{ resourceUrl }}/images/mall/tswk.png" class="avatar-img not-logged" wx:else mode="aspectFill">
+          </image>
+          <view class="avatar-plus">
+            <text class="plus-icon">+</text>
+          </view>
+        </view>
+        <view class="auth-user-r">
+          <text class="login-hint-text">登录后解锁更多功能</text>
+          <view class="login-btn" bind:tap="handleLogin">
+            <text class="login-text">立即登录</text>
+            <text class="login-arrow">›</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import mpx, { createComponent, ref, onShow, computed } from '@mpxjs/core'
+import { useUserStore } from '../../store/user'
+import { UserInfo } from "../../api/auth/types";
+
+createComponent({
+  properties: {
+    defaultAvatar: {
+      type: String,
+      value: ''
+    },
+    backurl: {
+      type: String,
+      value: '/pages/home'
+    },
+    tabbar: {
+      type: String,
+      value: 'false'
+    },
+    userNameColor: {
+      type: String,
+      value: '#111111'
+    },
+    userMobileColor: {
+      type: String,
+      value: '#999999'
+    }
+  },
+  setup(props, context) {
+    let config = getApp().globalData.config;
+    let resourceUrl = ref(config.resourceUrl);
+    let baseUrl = ref(config.baseUrl);
+    let userInfo = ref({} as UserInfo);
+    let userStore = useUserStore();
+    let refreshFunc = () => {
+      // 检查登录是否有效？
+      if (userStore.checkLogin()) {
+        userStore.getUserInfo().then((resp) => {
+          userInfo.value = resp;
+        });
+      }
+    };
+    onShow(refreshFunc);
+    //console.log(resourceUrl);
+    const isLogin = computed(() => userStore.accessToken !== '');
+    return { resourceUrl, baseUrl, userInfo, userStore, refreshFunc, isLogin };
+  },
+  methods: {
+    handleLogin() {
+      console.log("handleLogin");
+      //检查登录并跳转登录
+      this.userStore.loginOnlyAC().then(() => {
+        //登录成功，加载业务
+        console.log("静默登录成功");
+        this.refreshFunc();
+      }).catch(() => {
+        console.log("登录失败1！", this.backurl);
+        mpx.navigateTo({
+          url: '/jmash/pages/auth/login' + "?backurl=" + encodeURIComponent(this.backurl) + "&tabbar=" + this.tabbar
+        })
+      });
+    },
+    handleUpdateUser() {
+      mpx.navigateTo({
+        url: '/jmash/pages/auth/update-user'
+      })
+    },
+  }
+
+})
+</script>
+
+<style lang="scss">
+@use "../../styles/index.scss" as *;
+
+// 颜色变量
+$primary: #07c160;
+$text-1: #111111;
+$text-2: #666666;
+$text-3: #999999;
+$border: #e8e8e8;
+$bg-page: #f5f5f5;
+$bg-card: #ffffff;
+
+// 修改背景色从白色变到透明
+.auth-user-box {
+  display: flex;
+  align-items: center;
+  padding: 32rpx 24rpx 32rpx 0;
+  // background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
+  border-radius: 20rpx;
+  margin: 16rpx 16rpx 24rpx 0;
+  // box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  transition: all 0.3s;
+  background: transparent;
+
+  &:active {
+    transform: translateY(1rpx);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
+  }
+
+  .auth-user-l {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    width: 100%;
+
+    .avatar-wrapper {
+      position: relative;
+      margin-right: 30rpx;
+      flex-shrink: 0;
+      cursor: pointer;
+
+      .avatar-img {
+        width: 130rpx;
+        height: 130rpx;
+        border-radius: 50%;
+        // background-color: $bg-page;
+        display: block;
+        transition: all 0.3s;
+        // border: 3rpx solid rgba(7, 193, 96, 0.1);
+        // box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.1);
+
+        &:active {
+          transform: scale(1.05);
+        }
+
+        &.not-logged {
+          opacity: 0.4;
+          filter: grayscale(100%);
+          box-shadow: none;
+        }
+      }
+
+      .avatar-badge {
+        position: absolute;
+        right: -2rpx;
+        bottom: -2rpx;
+        width: 36rpx;
+        height: 36rpx;
+        background: $primary;
+        border-radius: 50%;
+        border: 2rpx solid $bg-card;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 2rpx 6rpx rgba(7, 193, 96, 0.3);
+
+        .badge-icon {
+          font-size: 16rpx;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .auth-user-r {
+    flex: 1;
+    min-width: 0;
+
+    .user-edit {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10rpx;
+      cursor: pointer;
+
+      .user-name {
+        font-size: 32rpx;
+        font-weight: 600;
+        color: $text-1;
+        line-height: 1.2;
+      }
+
+      .edit-icon-bg {
+        width: 36rpx;
+        height: 36rpx;
+        background: $primary;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 8rpx;
+
+        .edit-icon {
+          font-size: 16rpx;
+          color: #fff;
+        }
+      }
+    }
+
+    .user-mobile {
+      font-size: 24rpx;
+      color: $text-3;
+      line-height: 1.4;
+    }
+  }
+
+  .right-arrow {
+    flex-shrink: 0;
+    width: 32rpx;
+    height: 32rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .arrow-icon {
+      font-size: 66rpx;
+      color: $text-3;
+      font-weight: 300;
+      line-height: 1;
+    }
+  }
+
+  // 未登录状态
+  .not-logged-in {
+    .not-logged-wrapper {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    .avatar-wrapper {
+      .avatar-plus {
+        position: absolute;
+        right: -4rpx;
+        bottom: -4rpx;
+        width: 40rpx;
+        height: 40rpx;
+        background: $primary;
+        border-radius: 50%;
+        border: 3rpx solid $bg-card;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
+
+        .plus-icon {
+          font-size: 36rpx;
+          color: #fff;
+          line-height: 1;
+          font-weight: 300;
+        }
+      }
+    }
+
+    .auth-user-r {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-width: 0;
+      margin-left: 8rpx;
+
+      .login-hint-text {
+        font-size: 24rpx;
+        color: $text-3;
+        margin-bottom: 12rpx;
+        line-height: 1.4;
+      }
+
+      .login-btn {
+        display: inline-flex;
+        align-items: center;
+        padding: 12rpx 24rpx;
+        background: linear-gradient(135deg, #07c160 0%, #05a050 100%);
+        border-radius: 40rpx;
+        cursor: pointer;
+        box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.25);
+        transition: all 0.3s;
+        width: fit-content;
+
+        &:active {
+          transform: scale(0.98);
+          box-shadow: 0 2rpx 6rpx rgba(7, 193, 96, 0.2);
+        }
+
+        .login-text {
+          font-size: 26rpx;
+          font-weight: 600;
+          color: #fff;
+        }
+
+        .login-arrow {
+          font-size: 30rpx;
+          color: #fff;
+          margin-left: 4rpx;
+          line-height: 1;
+          font-weight: 300;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<script type="application/json">
+{
+  "component": true,
+  "usingComponents": {}
+}
+</script>