printer-miniapp/src/pages/personal/index.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '我的',
  },
}
</route>

<template>
  <view class="main overflow-hidden pt-2 px4" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <view class="head">
      <!-- <wd-upload
        accept="image"
        :file-list="fileList"
        :max-count="1"
        :upload-method="uploadImage"
        @change="handleChange"
      >
        <wd-img
          v-if="userInfo.avatar"
          custom-class="img-btn"
          :width="40"
          :height="40"
          :src="userInfo.avatar"
        />
        <wd-button v-else custom-class="gray-btn" type="icon" icon="photo"></wd-button>
      </wd-upload> -->
      <wd-img
        v-if="userInfo.avatar"
        custom-class="img-btn"
        :width="40"
        :height="40"
        :src="userInfo.avatar"
      />
      <view class="head-name">{{ userInfo.name }}</view>
    </view>
    <view class="main-content mt6">
      <view class="content-item line-b" @click="toAddUserHub">
        <view>添加打印助手</view>
        <wd-icon name="arrow-right" size="20px" color="#808080"></wd-icon>
      </view>
      <view class="content-item" @click="handleLogout">
        <view>退出登录</view>
        <wd-icon name="arrow-right" size="20px" color="#808080"></wd-icon>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getEnvBaseUrl } from '@/utils'
import { logout } from '@/service/api/index'
import { useUserStore } from '@/store'
import { useToast } from 'wot-design-uni'
import type { UploadMethod, UploadFile } from 'wot-design-uni/components/wd-upload/types'

// 请求基准地址
const baseUrl = getEnvBaseUrl()

const toast = useToast()
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const userInfo = reactive({
  avatar: '',
  name: '',
})
const fileList = ref([])

const uploadImage: UploadMethod = (file, formData, options) => {
  uni.uploadFile({
    url: `${baseUrl}/sys/user/avatar`,
    filePath: file.url,
    name: 'file', // 这里根据后端需要的字段来定义
    fileType: options.fileType,
    formData, // 如果需要额外的 formData
    success: async (res) => {
      if (res.statusCode === options.statusCode) {
        toast.success('头像上传成功')
        await useUserStore().initUserInfo()
        initFn()
      } else {
        const dataObj: any = JSON.parse(res.data)
        toast.error({ msg: dataObj.message || '头像上传失败', duration: 4000 })
      }
    },
    fail: (error) => {
      console.error('上传失败', error)
    },
  })
}

function handleChange({ fileList }) {
  fileList.value = fileList
}

function toAddUserHub() {
  uni.navigateTo({
    url: `/pages/assistant/detail?type=add`,
  })
}

function handleLogout() {
  // logout().then((res) => {
  //   if (res.code === 0) {
  //     useUserStore().setToken('')
  //     useUserStore().setAvatar('')
  //     useUserStore().setUserInfo({})
  //     toast.success('退出登录成功')
  //     toLogin()
  //   }
  // })

  useUserStore().clearUserInfo()
  toast.success('退出登录成功')
  uni.reLaunch({
    url: `/pages/login/index`
  })
}

function initFn() {
  // userInfo.name = useUserStore().userInfo.name
  // userInfo.avatar = useUserStore().userInfo.avatar
  userInfo.name = "微信用户"
  userInfo.avatar = "/static/images/avatar.png"
}

onLoad(() => {
  initFn()
})
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  align-items: center;
  .head-name {
    @apply pl-3;
  }
}
.main-content {
  padding: 20rpx;
  background-color: white;
  border-radius: 16rpx;
}
.content-item {
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding: 30rpx 0;
}
.line-b {
  border-bottom: 1px solid #eee;
}
:deep(.head .wd-upload__evoke) {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 0;
  border-radius: 100%;
}
:deep(.wd-upload) {
  display: flex;
}
:deep(.wd-upload__evoke-num) {
  display: none;
}
:deep(.wd-icon) {
  font-size: 50rpx;
}
:deep(.img-btn .wd-img__image) {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
}
:deep(.wd-upload__preview) {
  display: none !important;
}
:deep(.gray-btn.wd-button) {
  width: 80rpx;
  height: 80rpx;
  background-color: #ddd;
  border-radius: 40rpx;
}
:deep(.form-ipt) {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
</style>