jmash-core-mp 0.1.21 → 0.1.22

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

@@ -1,366 +1,366 @@
-<template>
-  <!-- 我的页面 中个人信息编辑页面 -->
-  <view class="my-information">
-    <view class="main">
-      <!-- 头像区域 -->
-      <view class="main-profile" wx:if="{{ isUserAvatar }}">
-        <view class="profile-left">头像</view>
-        <view class="profile-right">
-          <button class="avatar-wrapper">
-            <image class="avatar-img" src="{{ resourceUrl + '/components/gray_head2x.png' }}" mode="aspectFill"
-              wx:if="{{ !userInfo.avatar }}" />
-            <image class="avatar-img" src="{{ imageUrl + userInfo.avatar }}" mode="aspectFill" wx:else />
-            <view class="avatar-badge">
-              <text class="badge-icon">✎</text>
-            </view>
-          </button>
-        </view>
-      </view>
-
-      <!-- 昵称 -->
-      <view class="main-nickname" wx:if="{{ isUserNickName }}">
-        <view class="nickname-left">昵称</view>
-        <view class="nickname-right">
-          <input wx:model="{{ userInfo.nickName }}" wx:model-prop="value" type="nickname" class="nickname-input"
-            placeholder="请输入昵称" />
-        </view>
-      </view>
-
-      <!-- 姓名 -->
-      <view class="main-nickname" wx:if="{{ isUserRealName }}">
-        <view class="nickname-left">姓名</view>
-        <view class="nickname-right">
-          <input wx:model="{{ userInfo.realName }}" wx:model-prop="value" type="text" class="nickname-input"
-            placeholder="请输入姓名" />
-        </view>
-      </view>
-
-    </view>
-    <!-- 保存按钮 -->
-    <view class="main-btn">
-      <button class="main-btn-item" bindtap="handleUpdateUser">保存</button>
-    </view>
-  </view>
-</template>
-
-<script lang="ts">
-import mpx, { createComponent } from '@mpxjs/core'
-import { UpdateUserReq, UserInfo } from '../../api/auth/types'
-import { authApi } from '../../api/auth/index'
-import { fileApi } from '../../api/files/index';
-import { FileInfo } from '../../api/files/types';
-import { useUserStore } from '../../store/user';
-
-createComponent({
-  properties: {
-    // 是否显示用户头像
-    isUserAvatar: {
-      type: Boolean,
-      value: true
-    },
-    // 是否显示昵称
-    isUserNickName: {
-      type: Boolean,
-      value: true
-    },
-    // 是否显示姓名
-    isUserRealName: {
-      type: Boolean,
-      value: true
-    },
-    // 是否显示手机号
-    isUserMobilePhone: {
-      type: Boolean,
-      value: true
-    },
-    // 是否显示更换手机号
-    isChangePhone: {
-      type: Boolean,
-      value: true
-    }
-  },
-  data: {
-    resourceUrl: getApp().globalData.config.resourceUrl + "/images",
-    imageUrl: getApp().globalData.config.baseUrl + "/v1/file/path/",
-    userInfo: {} as UserInfo,
-    userStore: {} as any
-  },
-  ready() {
-    this.userStore = useUserStore();
-    this.getUserInfo();
-  },
-  /**
- * 组件的方法列表
- */
-  methods: {
-    // 获取用户信息
-    getUserInfo(cache: boolean = true) {
-      console.log("getUserInfo");
-      this.userStore.getUserInfo(cache).then((resp: UserInfo) => {
-        this.userInfo = resp;
-      });
-    },
-
-    // 获取微信头像
-    onChooseAvatar(e: any) {
-      console.log("onChooseAvatar", e);
-      const { avatarUrl } = e.detail;
-      fileApi.uploadFile(avatarUrl).then((res: FileInfo) => {
-        console.log("uploadFile1", res);
-        this.userInfo.avatar = res.fileSrc;
-      });
-    },
-
-    // 更换手机号
-    getPhoneNumberWechat(e: any) {
-      console.log("getPhoneNumber", e);
-      const config = getApp().globalData.config;
-      if (e.detail.errMsg === "getPhoneNumber:ok") {
-        // 授权成功后,调用rbac模块接口 已登陆状态小程序更换绑定手机号
-        authApi.replaceBindphone({
-          appId: config.appId,
-          phoneCode: e.detail.code,
-          componentAppid: config.componentAppid
-        }).then((res) => {
-          if (res.data) {
-            this.getUserInfo(false);
-          }
-        })
-      }
-    },
-    getPhoneNumberAli(e: any) {
-      console.log("getPhoneNumber", e);
-      const config = getApp().globalData.config;
-      // 支付宝小程序获取手机号
-      my.getPhoneNumber({
-        success: (res: any) => {
-          console.log("手机号授权", res);
-          const { response } = res;
-          authApi.replaceBindphone({
-            appId: config.appId,
-            phoneCode: response,
-            componentAppid: config.componentAppid
-          }).then((res) => {
-            if (res.data) {
-              this.getUserInfo(false);
-            }
-          })
-        },
-        fail: () => {
-          mpx.showToast({
-            title: "您已取消授权",
-            icon: "none",
-            duration: 2000,
-          });
-        }
-      });
-    },
-    // 更新用户信息
-    handleUpdateUser() {
-      let updateReq: UpdateUserReq = { ...this.userInfo } as UpdateUserReq;
-      updateReq.requestId = Math.random() * 10 + "";
-      updateReq.updateMask = "nickName,avatar,realName";
-      authApi.updateUserInfo(updateReq).then((res) => {
-        // 保存成功后重新设置本地缓存信息,并跳转到我的页面
-        if (res.statusCode === 200) {
-          this.userStore.setUserInfo(res.data);
-          mpx.navigateBack({
-            delta: 1
-          });
-        };
-      });
-    },
-    // 手机号授权失败回调
-    onPhoneAuthFail() {
-      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: #e8e8e8;
-$bg-page: #f2f2f2;
-$bg-card: #ffffff;
-
-.my-information {
-  background-color: $bg-page;
-  width: 100%;
-  min-height: 100vh;
-  position: relative;
-  padding: 30rpx 0;
-
-  .main {
-    background-color: $bg-card;
-    margin: 0 30rpx;
-    border-radius: 24rpx;
-    overflow: hidden;
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
-
-    .main-profile,
-    .main-nickname,
-    .main-phone {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: 120rpx;
-      padding: 0 32rpx;
-      border-bottom: 1rpx solid $border;
-      transition: background-color 0.2s;
-
-      &:last-child {
-        border-bottom: none;
-      }
-
-      &:active {
-        background-color: rgba(0, 0, 0, 0.02);
-      }
-
-      .profile-left,
-      .nickname-left,
-      .phone-left {
-        font-size: 30rpx;
-        color: $text-1;
-        font-weight: 500;
-      }
-
-      .profile-right {
-        .avatar-wrapper {
-          position: relative;
-          margin: 0;
-          padding: 0;
-          background: transparent;
-          border: none;
-          line-height: 1;
-
-          .avatar-img {
-            width: 88rpx;
-            height: 88rpx;
-            border-radius: 50%;
-            border: 2rpx solid $border;
-            display: block;
-          }
-
-          .avatar-badge {
-            position: absolute;
-            right: -4rpx;
-            bottom: -4rpx;
-            width: 36rpx;
-            height: 36rpx;
-            background: $primary;
-            border-radius: 50%;
-            border: 2rpx solid $bg-card;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            .badge-icon {
-              font-size: 16rpx;
-              color: #fff;
-            }
-          }
-        }
-      }
-
-      .nickname-right,
-      .phone-right {
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        flex: 1;
-        margin-left: 30rpx;
-      }
-
-      .nickname-input {
-        flex: 1;
-        text-align: right;
-        font-size: 30rpx;
-        color: $text-1;
-        background: transparent;
-        border: none;
-        outline: none;
-        height: 80rpx;
-        line-height: 80rpx;
-        padding: 0;
-
-        &::placeholder {
-          color: $text-3;
-        }
-      }
-
-      .phone-right {
-        .phone-number {
-          font-size: 30rpx;
-          color: $text-1;
-          font-weight: 500;
-        }
-
-        .phone-right-btn {
-          background-color: #e6f7ff;
-          border-radius: 24rpx;
-          margin-left: 20rpx;
-          border: none;
-          font-size: 24rpx;
-          color: $primary;
-          padding: 12rpx 24rpx;
-          height: auto;
-          line-height: 1.4;
-        }
-      }
-    }
-
-    .main-phone {
-      border-bottom: none;
-    }
-  }
-
-  // 保存按钮样式
-  .main-btn {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 60rpx 30rpx;
-  }
-
-  .main-btn-item {
-    width: 100%;
-    height: 88rpx;
-    border-radius: 44rpx;
-    font-size: 32rpx;
-    font-weight: 600;
-    letter-spacing: 2rpx;
-    background-color: $primary;
-    color: #fff;
-    border: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.2s;
-    box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
-
-    &:active {
-      background-color: $primary-dark;
-    }
-  }
-}
-</style>
-
-<script type="application/json">
-{
-  "component": true
-}
-</script>
+<template>
+  <!-- 我的页面 中个人信息编辑页面 -->
+  <view class="my-information">
+    <view class="main">
+      <!-- 头像区域 -->
+      <view class="main-profile" wx:if="{{ isUserAvatar }}">
+        <view class="profile-left">头像</view>
+        <view class="profile-right">
+          <button class="avatar-wrapper">
+            <image class="avatar-img" src="{{ resourceUrl + '/components/gray_head2x.png' }}" mode="aspectFill"
+              wx:if="{{ !userInfo.avatar }}" />
+            <image class="avatar-img" src="{{ imageUrl + userInfo.avatar }}" mode="aspectFill" wx:else />
+            <view class="avatar-badge">
+              <text class="badge-icon">✎</text>
+            </view>
+          </button>
+        </view>
+      </view>
+
+      <!-- 昵称 -->
+      <view class="main-nickname" wx:if="{{ isUserNickName }}">
+        <view class="nickname-left">昵称</view>
+        <view class="nickname-right">
+          <input wx:model="{{ userInfo.nickName }}" wx:model-prop="value" type="nickname" class="nickname-input"
+            placeholder="请输入昵称" />
+        </view>
+      </view>
+
+      <!-- 姓名 -->
+      <view class="main-nickname" wx:if="{{ isUserRealName }}">
+        <view class="nickname-left">姓名</view>
+        <view class="nickname-right">
+          <input wx:model="{{ userInfo.realName }}" wx:model-prop="value" type="text" class="nickname-input"
+            placeholder="请输入姓名" />
+        </view>
+      </view>
+
+    </view>
+    <!-- 保存按钮 -->
+    <view class="main-btn">
+      <button class="main-btn-item" bindtap="handleUpdateUser">保存</button>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+import mpx, { createComponent } from '@mpxjs/core'
+import { UpdateUserReq, UserInfo } from '../../api/auth/types'
+import { authApi } from '../../api/auth/index'
+import { fileApi } from '../../api/files/index';
+import { FileInfo } from '../../api/files/types';
+import { useUserStore } from '../../store/user';
+
+createComponent({
+  properties: {
+    // 是否显示用户头像
+    isUserAvatar: {
+      type: Boolean,
+      value: true
+    },
+    // 是否显示昵称
+    isUserNickName: {
+      type: Boolean,
+      value: true
+    },
+    // 是否显示姓名
+    isUserRealName: {
+      type: Boolean,
+      value: true
+    },
+    // 是否显示手机号
+    isUserMobilePhone: {
+      type: Boolean,
+      value: true
+    },
+    // 是否显示更换手机号
+    isChangePhone: {
+      type: Boolean,
+      value: true
+    }
+  },
+  data: {
+    resourceUrl: getApp().globalData.config.resourceUrl + "/images",
+    imageUrl: getApp().globalData.config.baseUrl + "/v1/file/path/",
+    userInfo: {} as UserInfo,
+    userStore: {} as any
+  },
+  ready() {
+    this.userStore = useUserStore();
+    this.getUserInfo();
+  },
+  /**
+ * 组件的方法列表
+ */
+  methods: {
+    // 获取用户信息
+    getUserInfo(cache: boolean = true) {
+      console.log("getUserInfo");
+      this.userStore.getUserInfo(cache).then((resp: UserInfo) => {
+        this.userInfo = resp;
+      });
+    },
+
+    // 获取微信头像
+    onChooseAvatar(e: any) {
+      console.log("onChooseAvatar", e);
+      const { avatarUrl } = e.detail;
+      fileApi.uploadFile(avatarUrl).then((res: FileInfo) => {
+        console.log("uploadFile1", res);
+        this.userInfo.avatar = res.fileSrc;
+      });
+    },
+
+    // 更换手机号
+    getPhoneNumberWechat(e: any) {
+      console.log("getPhoneNumber", e);
+      const config = getApp().globalData.config;
+      if (e.detail.errMsg === "getPhoneNumber:ok") {
+        // 授权成功后,调用rbac模块接口 已登陆状态小程序更换绑定手机号
+        authApi.replaceBindphone({
+          appId: config.appId,
+          phoneCode: e.detail.code,
+          componentAppid: config.componentAppid
+        }).then((res) => {
+          if (res.data) {
+            this.getUserInfo(false);
+          }
+        })
+      }
+    },
+    getPhoneNumberAli(e: any) {
+      console.log("getPhoneNumber", e);
+      const config = getApp().globalData.config;
+      // 支付宝小程序获取手机号
+      my.getPhoneNumber({
+        success: (res: any) => {
+          console.log("手机号授权", res);
+          const { response } = res;
+          authApi.replaceBindphone({
+            appId: config.appId,
+            phoneCode: response,
+            componentAppid: config.componentAppid
+          }).then((res) => {
+            if (res.data) {
+              this.getUserInfo(false);
+            }
+          })
+        },
+        fail: () => {
+          mpx.showToast({
+            title: "您已取消授权",
+            icon: "none",
+            duration: 2000,
+          });
+        }
+      });
+    },
+    // 更新用户信息
+    handleUpdateUser() {
+      let updateReq: UpdateUserReq = { ...this.userInfo } as UpdateUserReq;
+      updateReq.requestId = Math.random() * 10 + "";
+      updateReq.updateMask = "nickName,avatar,realName";
+      authApi.updateUserInfo(updateReq).then((res) => {
+        // 保存成功后重新设置本地缓存信息,并跳转到我的页面
+        if (res.statusCode === 200) {
+          this.userStore.setUserInfo(res.data);
+          mpx.navigateBack({
+            delta: 1
+          });
+        };
+      });
+    },
+    // 手机号授权失败回调
+    onPhoneAuthFail() {
+      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: #e8e8e8;
+$bg-page: #f2f2f2;
+$bg-card: #ffffff;
+
+.my-information {
+  background-color: $bg-page;
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+  padding: 30rpx 0;
+
+  .main {
+    background-color: $bg-card;
+    margin: 0 30rpx;
+    border-radius: 24rpx;
+    overflow: hidden;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+
+    .main-profile,
+    .main-nickname,
+    .main-phone {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 120rpx;
+      padding: 0 32rpx;
+      border-bottom: 1rpx solid $border;
+      transition: background-color 0.2s;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &:active {
+        background-color: rgba(0, 0, 0, 0.02);
+      }
+
+      .profile-left,
+      .nickname-left,
+      .phone-left {
+        font-size: 30rpx;
+        color: $text-1;
+        font-weight: 500;
+      }
+
+      .profile-right {
+        .avatar-wrapper {
+          position: relative;
+          margin: 0;
+          padding: 0;
+          background: transparent;
+          border: none;
+          line-height: 1;
+
+          .avatar-img {
+            width: 88rpx;
+            height: 88rpx;
+            border-radius: 50%;
+            border: 2rpx solid $border;
+            display: block;
+          }
+
+          .avatar-badge {
+            position: absolute;
+            right: -4rpx;
+            bottom: -4rpx;
+            width: 36rpx;
+            height: 36rpx;
+            background: $primary;
+            border-radius: 50%;
+            border: 2rpx solid $bg-card;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .badge-icon {
+              font-size: 16rpx;
+              color: #fff;
+            }
+          }
+        }
+      }
+
+      .nickname-right,
+      .phone-right {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        flex: 1;
+        margin-left: 30rpx;
+      }
+
+      .nickname-input {
+        flex: 1;
+        text-align: right;
+        font-size: 30rpx;
+        color: $text-1;
+        background: transparent;
+        border: none;
+        outline: none;
+        height: 80rpx;
+        line-height: 80rpx;
+        padding: 0;
+
+        &::placeholder {
+          color: $text-3;
+        }
+      }
+
+      .phone-right {
+        .phone-number {
+          font-size: 30rpx;
+          color: $text-1;
+          font-weight: 500;
+        }
+
+        .phone-right-btn {
+          background-color: #e6f7ff;
+          border-radius: 24rpx;
+          margin-left: 20rpx;
+          border: none;
+          font-size: 24rpx;
+          color: $primary;
+          padding: 12rpx 24rpx;
+          height: auto;
+          line-height: 1.4;
+        }
+      }
+    }
+
+    .main-phone {
+      border-bottom: none;
+    }
+  }
+
+  // 保存按钮样式
+  .main-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 60rpx 30rpx;
+  }
+
+  .main-btn-item {
+    width: 100%;
+    height: 88rpx;
+    border-radius: 44rpx;
+    font-size: 32rpx;
+    font-weight: 600;
+    letter-spacing: 2rpx;
+    background-color: $primary;
+    color: #fff;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+    box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
+
+    &:active {
+      background-color: $primary-dark;
+    }
+  }
+}
+</style>
+
+<script type="application/json">
+{
+  "component": true
+}
+</script>