2025/2/8第一次更新

node_modules/tnuiv3p-tn-update-user-info-popup/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './popup-custom'
+export * from './use-popup'

node_modules/tnuiv3p-tn-update-user-info-popup/composables/popup-custom.ts

@@ -0,0 +1,58 @@
+import { computed, toRef } from 'vue'
+import { useComponentColor, useNamespace } from '@tuniao/tnui-vue3-uniapp/hooks'
+import type { CSSProperties } from 'vue'
+import type { UpdateUserInfoPopupProps } from '../types'
+
+export const useUpdateUserInfoPopupCustomStyle = (
+  props: UpdateUserInfoPopupProps
+) => {
+  const ns = useNamespace('update-user-info-popup')
+
+  // 解析颜色
+  const [confirmBtnBgColorClass, confirmBtnBgColorStyle] = useComponentColor(
+    toRef(props, 'confirmBgColor'),
+    'bg'
+  )
+  const [confirmBtnTextColorClass, confirmBtnTextColorStyle] =
+    useComponentColor(toRef(props, 'confirmTextColor'), 'text')
+
+  // 提交按钮类和样式
+  const submitBtnClass = computed<string>(() => {
+    const cls: string[] = [ns.e('submit-btn')]
+
+    if (confirmBtnBgColorClass.value) {
+      cls.push(confirmBtnBgColorClass.value)
+    }
+    if (confirmBtnTextColorClass.value) {
+      cls.push(confirmBtnTextColorClass.value)
+    }
+
+    return cls.join(' ')
+  })
+  const submitBtnStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    if (!confirmBtnBgColorClass.value) {
+      style.backgroundColor =
+        confirmBtnBgColorStyle.value || 'var(--tn-color-primary)'
+    }
+    if (confirmBtnTextColorStyle.value) {
+      style.color = confirmBtnTextColorStyle.value
+    } else if (!confirmBtnBgColorClass.value) {
+      style.color = 'var(--tn-color-white)'
+    }
+
+    if (!props.avatar || !props.nickname) {
+      style.backgroundColor = 'var(--tn-color-gray-disabled)'
+      style.color = 'var(--tn-color-gray-dark)'
+    }
+
+    return style
+  })
+
+  return {
+    ns,
+    submitBtnClass,
+    submitBtnStyle,
+  }
+}

node_modules/tnuiv3p-tn-update-user-info-popup/composables/use-popup.ts

@@ -0,0 +1,78 @@
+import { ref, watch } from 'vue'
+import type { SetupContext } from 'vue'
+import type {
+  UpdateUserInfoPopupEmits,
+  UpdateUserInfoPopupProps,
+} from '../types'
+
+export const useUpdateUserInfoPopup = (
+  props: UpdateUserInfoPopupProps,
+  emits: SetupContext<UpdateUserInfoPopupEmits>['emit']
+) => {
+  // 显示更新用户信息弹框
+  const showUpdatePopup = ref<boolean>(false)
+  // 输入的用户名
+  const inputNickname = ref<string>(props.nickname)
+
+  watch(
+    () => props.show,
+    (val) => {
+      showUpdatePopup.value = val
+    },
+    {
+      immediate: true,
+    }
+  )
+
+  // 监听输入的用户名
+  const nickNameInputHandle = (e: any) => {
+    const value = e.detail.value
+    inputNickname.value = value
+    emits('update:nickname', value)
+  }
+
+  // 选择头像事件
+  // #ifdef MP-WEIXIN
+  const avatarChooseHandle = (e: any) => {
+    emits('choose-avatar', e.detail.avatarUrl)
+  }
+  // #endif
+  // #ifndef MP-WEIXIN
+  const avatarClickHandle = () => {
+    uni.chooseImage({
+      count: 1,
+      success: (res) => {
+        emits('choose-avatar', res.tempFilePaths[0])
+      },
+    })
+  }
+  // #endif
+
+  // 点击保存按钮
+  const submitBtnClickHandle = () => {
+    if (!inputNickname.value || !props.avatar) {
+      return
+    }
+    emits('confirm', props.avatar, inputNickname.value)
+    emits('update:show', false)
+  }
+
+  // 弹框关闭事件
+  const popupCloseHandle = () => {
+    emits('update:show', false)
+  }
+
+  return {
+    showUpdatePopup,
+    inputNickname,
+    nickNameInputHandle,
+    popupCloseHandle,
+    submitBtnClickHandle,
+    // #ifdef MP-WEIXIN
+    avatarChooseHandle,
+    // #endif
+    // #ifndef MP-WEIXIN
+    avatarClickHandle,
+    // #endif
+  }
+}