script setup 基本信息import computed ref onMounted from vue 头像import reactive toRefs from vue 修改个人信息import ElMessage ElMessageBox from element-plusimport axios from axios;export default setup

<script setup>
import { computed, ref, onMounted } from 'vue'
import { reactive, toRefs } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios';

export default {
  setup() {
    const logOut = () => {
      if (window.confirm('确定退出吗?')) {
        clearToken()
        clearTAR()
        refreshPage()
      } else {
        // 取消退出操作
      }
    }

    const clearToken = () => {
      const token = localStorage.getItem('token')
      axios.post('http://nn.nncoding.icu:8080/api/logout', {}, {
        headers: {
          token: token
        }
      }).then((result) => {
        console.log(result)
      }).catch((error) => {
        console.log(error)
      })
    }

    const clearTAR = () => {
      localStorage.removeItem('token')
      localStorage.removeItem('roles')
    }

    const refreshPage = () => {
      location.reload()
    }

    const state = reactive({
      squareUrl: '',
      username: '',
      phone: '',
      email: '',
      title: ''
    })

    const { squareUrl, username, phone, email, title } = toRefs(state)

    const size = ref('')
    const iconStyle = computed(() => {
      const marginMap = {
        large: '8px',
        default: '6px',
        small: '4px',
      }
      return {
        marginRight: marginMap[size.value] || marginMap.default,
      }
    })
    const blockMargin = computed(() => {
      const marginMap = {
        large: '32px',
        default: '28px',
        small: '24px',
      }
      return {
        marginTop: marginMap[size.value] || marginMap.default,
      }
    })

    const open = () => {
      ElMessageBox.alert(
        '用户名: <input type="text" style="float:left;width:100%;height:25px;border-radius:5px;border:1px solid;">' +
        '<br/>密码:&nbsp; <input type="password" style="float:left;width:100%;height:25px;border-radius:5px;border:1px solid;">' +
        '<br/>邮箱:  <input type="email" style="float:left;width:100%;height:25px;border-radius:5px;border:1px solid;">' +
        '<br/>电话号码:<input type="num" style="float:left;width:100%;height:25px;border-radius:5px;border:1px solid;">',
        {
          dangerouslyUseHTMLString: true,
        }
      )
    }

    const getUserInfo = () => {
      const token = localStorage.getItem("token");

      axios.get('http://localhost:8080/api/user/info', {
        headers: {
          token: token
        }
      }).then((response) => {
        state.username = response.data.data.username;
        state.phone = response.data.data.phone;
        state.email = response.data.data.email;
        state.title = response.data.data.title;
        let str = response.data.data.headUrl;
        let url = str.match(/(http[s]?:\/\/[^\s]+)/g);
        state.squareUrl = url[0];
      }).catch((error) => {
        console.error(error);
      });
    }

    onMounted(() => {
      getUserInfo();
    })

    return {
      logOut,
      size,
      iconStyle,
      blockMargin,
      open,
      ...toRefs(state)
    }
  },
}
</script