微信小程序头像，昵称调整

uniapp/src/pages/user_data/user_data.vue

@@ -1,13 +1,20 @@
 <template>
     <!-- Main Start -->
     <!-- 头部修改头像 -->
-    <view class="header bg-white pt-[30rpx]">
+    <view class="header bg-white py-[30rpx]">
-        <view class="flex justify-center">
+        <view class="flex">
-            <image @click="uploaderAvatar" :src="userInfo?.avatar"></image>
+            <button
+                class="flex flex-col items-center after:border-0"
+                hover-class="none"
+                open-type="chooseAvatar"
+                style="background-color: transparent"
+                @click="chooseAvatar"
+                @chooseavatar="chooseAvatar"
+            >
+                <image :src="userInfo?.avatar"></image>
+                <view class="mt-[10rpx] text-center text-muted text-xs"> 点击修改头像 </view>
+            </button>
         </view>
-        <view class="mt-[20rpx] text-center text-muted text-xs" @click="uploaderAvatar"
-            >点击修改头像</view
-        >
     </view>
 
     <!-- 用户ID -->
@@ -76,20 +83,36 @@
     </view>
 
     <!-- 昵称修改组件 -->
-    <u-popup v-model="showNickName" :closeable="true" mode="center" border-radius="20">
+    <u-popup
+        v-model="showNickName"
+        :closeable="true"
+        mode="center"
+        :maskCloseAble="false"
+        border-radius="20"
+    >
         <view class="px-[50rpx] py-[40rpx] bg-white" style="width: 85vw">
-            <view class="mb-[70rpx] text-xl text-center">修改昵称</view>
+            <form @submit="changeNameConfirm">
-            <u-form-item borderBottom>
+                <view class="mb-[70rpx] text-xl text-center">修改昵称</view>
-                <u-input
+                <u-form-item borderBottom>
-                    class="flex-1"
+                    <input
-                    v-model="newNickname"
+                        class="nr h-[60rpx] w-full"
-                    placeholder="请输入昵称"
+                        :value="userInfo.nickname"
-                    :border="false"
+                        name="nickname"
-                />
+                        type="nickname"
-            </u-form-item>
+                        placeholder="请输入昵称"
-            <view class="mt-[80rpx]">
+                    />
-                <u-button @click="changeNameConfirm" type="primary" shape="circle"> 确定 </u-button>
+                </u-form-item>
-            </view>
+                <view class="mt-[80rpx]">
+                    <button
+                        class="bg-primary text-white w-full h-[80rpx] !text-lg !leading-[80rpx] rounded-full"
+                        form-type="submit"
+                        hover-class="none"
+                        size="mini"
+                    >
+                        确定
+                    </button>
+                </view>
+            </form>
         </view>
     </u-popup>
 
@@ -171,7 +194,7 @@ import { FieldType, SMSEnum } from '@/enums/appEnums'
 import { uploadFile } from '@/utils/util'
 
 // 用户信息
-const userInfo = ref<any | null>(null)
+const userInfo = ref<any>({})
 // 用户信息的枚举
 const fieldType = ref(FieldType.NONE)
 //选择性别数据
@@ -244,11 +267,18 @@ const setUserInfoFun = async (value: string): Promise<void> => {
 }
 
 // 上传头像
-const uploaderAvatar = () => {
+const chooseAvatar = (e: any) => {
     fieldType.value = FieldType.AVATAR
+    // #ifndef MP-WEIXIN
     uni.navigateTo({
         url: '/uni_modules/vk-uview-ui/components/u-avatar-cropper/u-avatar-cropper?destWidth=300&rectWidth=200&fileType=jpg'
     })
+    // #endif
+    // #ifdef MP-WEIXIN
+    if (e.detail.avatarUrl) {
+        uploadAvatar(e.detail.avatarUrl)
+    }
+    // #endif
 }
 
 // 显示修改用户性别弹窗
@@ -264,22 +294,24 @@ const changeSexConfirm = (value) => {
 }
 
 // 修改用户账号
-const changeUserNameConfirm = () => {
+const changeUserNameConfirm = async () => {
     if (newUsername.value == '') return uni.$u.toast('账号不能为空')
     if (newUsername.value.length > 10) return uni.$u.toast('账号长度不得超过十位数')
 
     fieldType.value = FieldType.USERNAME
-    setUserInfoFun(newUsername.value)
+    await setUserInfoFun(newUsername.value)
     showUserName.value = false
 }
 
 // 修改用户昵称
-const changeNameConfirm = () => {
+const changeNameConfirm = async (e: any) => {
+    newNickname.value = e.detail.value.nickname
     if (newNickname.value == '') return uni.$u.toast('昵称不能为空')
     if (newNickname.value.length > 10) return uni.$u.toast('昵称长度不得超过十位数')
-    showNickName.value = false
     fieldType.value = FieldType.NICKNAME
-    setUserInfoFun(newNickname.value)
+    await setUserInfoFun(newNickname.value)
+
+    showNickName.value = false
 }
 
 // 微信小程序 绑定｜｜修改用户手机号
@@ -305,8 +337,7 @@ const goPage = (url: string) => {
     })
 }
 
-// 监听从裁剪页发布的事件，获得裁剪结果
+const uploadAvatar = (path: string) => {
-uni.$on('uAvatarCropper', (path) => {
     uni.showLoading({
         title: '正在上传中...',
         mask: true
@@ -320,6 +351,11 @@ uni.$on('uAvatarCropper', (path) => {
             uni.hideLoading()
             uni.$u.toast('上传失败')
         })
+}
+
+// 监听从裁剪页发布的事件，获得裁剪结果
+uni.$on('uAvatarCropper', (path) => {
+    uploadAvatar(path)
 })
 
 onShow(async () => {
@@ -334,7 +370,6 @@ onUnload(() => {
 <style lang="scss">
 .header {
     width: 100%;
-    height: 240rpx;
 
     image {
         width: 120rpx;