youxi-app/pages/user/components/user.uvue

<script setup lang='ts'>
import { user } from '@/.cool'
import { computed, ref, type Ref, onMounted, nextTick } from 'vue'
import { config } from '@/config'
import { updateUserInfo } from '@/services/user'
const userInfo = computed(() => user.info.value?.userInfo)
type FormData = {
  username: string;
  nickName: string;
  phone: string;
  realName: string;
  birthDay: string;
  score: number;
  userId: string;
  avatar: string;
};
const formData = ref<FormData>({
  username: "",
  nickName: "",
  phone: "",
  realName: "",
  birthDay: "",
  score: 0,
  userId: "",
  avatar: ""
})
onMounted(() => {
  console.log(userInfo.value)
  nextTick(() => {
    formData.value.username = userInfo.value.username
    formData.value.nickName = userInfo.value.nickName
    formData.value.phone = userInfo.value.phone
    formData.value.realName = userInfo.value.realName
    formData.value.birthDay = userInfo.value.birthDay
    formData.value.score = userInfo.value.score
    formData.value.userId = userInfo.value.userId
    formData.value.avatar = userInfo.value.avatar
    avatar.value = userInfo.value.avatar ? config.baseUrl + userInfo.value.avatar : ''
  })
})
async function handleSubmit() {
  console.log(formData.value)
  await updateUserInfo(formData.value)
  await user.get()
  uni.showToast({
    title: '更新成功',
    icon: 'success',
    duration: 2000
  })

}
function handleSuccess(res: any) {
  formData.value.avatar = res.url
  avatar.value = config.baseUrl + res.url
}
const avatar = ref('')
</script>
<template>
  <view class="w-full h-full py-[20px] pb-[30px] ">
    <cl-row :gutter="20" class="w-full h-full">
      <cl-col :span="8">
        <view class="w-full h-full bg-[#00A9FF] rounded-3xl flex justify-end items-center shadow">
          <view class="w-[88px] h-[88px] border border-[#fff] border-solid border-[4px] rounded-full z-[1]">
            <cl-avatar :size="80"
              :src="userInfo.avatar ? config.baseUrl + userInfo.avatar : 'https://oss.xiaoxiongcode.com/static/个人中心/图层 506.png'"
              rounded></cl-avatar>
          </view>
          <view
            class="bg-[#FDF6E9] hh rounded-3xl p-[10px] w-full mt-[-30px] pt-[30px] px-[20px] text-black flex flex-col justify-between ">
            <view>
              <view class="py-1 text-[14px]">
                用户账号：{{ userInfo.username }}
              </view>
              <view class="py-1 text-[14px]">
                昵称：{{ userInfo.nickName }}
              </view>
              <view class="py-1 text-[14px]">
                积分 ：{{ userInfo.score }}
              </view>
            </view>
            <view class="btn my-1 h-[40px] rounded-full mx-auto flex justify-center items-center text-white"
              @click="handleSubmit">
              保存
            </view>
          </view>
        </view>
      </cl-col>
      <cl-col :span="16">
        <view class="w-full h-full bg-[#fff] shadow rounded-xl px-[10px] py-[10px] text-[#00A9FF] ">
          <scroll-view direction="vertical" :show-scrollbar="false" class="sidebar">
            <cl-form v-model="formData" labelPosition="left">
              <cl-form-item :pt="{ className: '!mb-4' }" label="头像" prop="avatar">
                <cl-upload v-model="avatar" @success="handleSuccess"></cl-upload>
              </cl-form-item>
              <cl-form-item :pt="{ className: '!mb-4' }" label="昵称" prop="nickName">
                <cl-input v-model="formData.nickName" placeholder="请输入昵称"></cl-input>
              </cl-form-item>
              <cl-form-item :pt="{ className: '!mb-4' }" label="手机号" prop="phone">
                <cl-input v-model="formData.phone" placeholder="请输入手机号"></cl-input>
              </cl-form-item>
              <cl-form-item :pt="{ className: '!mb-4' }" label="姓名" prop="realName">
                <cl-input v-model="formData.realName" placeholder="请输入姓名"></cl-input>
              </cl-form-item>
              <cl-form-item :pt="{ className: '!mb-4' }" label="生日" prop="birthDay">
                <cl-select-date v-model="formData.birthDay" type="date" label-format="YYYY年MM月DD日"
                  value-format="YYYY-MM-DD" title="选择日期"></cl-select-date>
              </cl-form-item>
            </cl-form>
          </scroll-view>
        </view>
      </cl-col>
    </cl-row>
  </view>
</template>
<style lang="scss" scoped>
.shadow {
  box-shadow: 3px 6px 10px 0px rgba(0, 128, 216, 0.86);
}

.sidebar {
  height: calc(80vh - 120px);
  max-height: calc(620px - 120px);
}

.hh {
  height: calc(100% - 80px);
}

.btn {
  width: 80%;
  background: linear-gradient(0deg, #34BAFF 0%, #B9EBFE 100%);
}
</style>