1

pages/index/me-popup.vue

@@ -0,0 +1,81 @@
+<template>
+  <u-popup :show="show" mode="right" @close="close" @open="open" closeable>
+    <view style="width: 50vw" class="p20">
+      <scroll-view scroll-y="true">
+        <view class="x-f pb20 pt20">
+          <u-avatar src=""></u-avatar>
+          <view class="pl20">您好！{{ userInfo.nickname }}</view>
+        </view>
+
+        <u-cell-group>
+          <u-cell icon="grid-fill" title="切换系统" :is-link="true" @click="handleTo('/pages/index/index')" />
+          <u-cell icon="info-circle-fill" title="关于我们" :is-link="true" @click="handleTo('/pages/me/aboutMe')" />
+        </u-cell-group>
+
+        <u-button class="mt40" type="warning" plain text="退出当前账号" @click="handleLoginOut('general')" />
+      </scroll-view>
+    </view>
+
+    <u-modal
+      width="250px"
+      :show="modalShow"
+      title="提示"
+      content="确定退出登录吗？"
+      show-cancel-button
+      async-close
+      @confirm="confirm"
+      @cancel="modalShow = false"
+    />
+  </u-popup>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import nx from '@/nx'
+
+// Props & Emits
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:show', 'open', 'close'])
+
+// 响应式数据
+const modalShow = ref(false)
+
+// 计算属性
+const userInfo = computed(() => nx.$store('user').userInfo)
+
+// 方法
+const handleTo = url => {
+  nx.$router.go(url)
+}
+
+const handleLoginOut = () => {
+  modalShow.value = true
+}
+
+const confirm = async () => {
+  try {
+    await nx.$store('user').logout()
+  } catch (error) {
+    console.error('退出登录失败:', error)
+  } finally {
+    modalShow.value = false
+  }
+}
+
+const open = () => {
+  emit('open')
+}
+
+const close = () => {
+  emit('close')
+  emit('update:show', false)
+}
+</script>
+
+<style lang="scss" scoped></style>