个人信息

src/main.ts

@@ -11,7 +11,7 @@ import './browerPatch'
 import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-import { Quasar } from 'quasar'
+import { Quasar, Notify } from 'quasar'
 // Import icon libraries
 import '@quasar/extras/material-icons/material-icons.css'
 // Import Quasar css
@@ -27,7 +27,9 @@ initComponent(app)
 app.use(router)
 app.use(ElementPlus as any)
 app.use(Quasar, {
-  plugins: {}, // import Quasar plugins and add here
+  plugins: {
+    Notify,
+  }, // import Quasar plugins and add here
   config: {
     brand: {
       primary: 'var(--czr-main-color)',

src/views/study/components/study-layout.vue

@@ -31,7 +31,9 @@
               <q-item-section>切换主题</q-item-section>
             </q-item>
             <q-item clickable v-close-popup>
-              <q-item-section>个人信息</q-item-section>
+              <q-item-section @click="state.showInfo = true"
+                >个人信息</q-item-section
+              >
             </q-item>
           </q-list>
         </q-menu>
@@ -41,14 +43,77 @@
       <slot />
     </div>
   </div>
+  <q-dialog v-model="state.showInfo">
+    <q-card style="width: 60%; max-width: 60%">
+      <div>
+        <q-card-section>
+          <div class="text-h6">个人信息</div>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none">
+          <div class="flex">
+            <div class="flex-1">
+              <q-card-section class="q-pt-none">
+                <q-input
+                  outlined
+                  v-model="state.info.phone"
+                  label="联系方式"
+                  type="tel"
+                />
+              </q-card-section>
+              <q-card-section class="q-pt-none">
+                <q-input
+                  outlined
+                  v-model="state.info.email"
+                  label="邮箱"
+                  type="email"
+                />
+              </q-card-section>
+              <q-card-section class="q-pt-none">
+                <q-input outlined v-model="state.info.name" label="姓名" />
+              </q-card-section>
+            </div>
+            <div class="">
+              <el-upload
+                class="avatar-uploader"
+                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+                :show-file-list="false"
+                accept=".png,.jpg,.jpeg"
+                :on-success="handleAvatarSuccess"
+                :before-upload="beforeAvatarUpload"
+              >
+                <img v-if="state.avatar" :src="state.avatar" class="avatar" />
+                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+              </el-upload>
+            </div>
+          </div>
+        </q-card-section>
+      </div>
+
+      <q-card-actions align="right" class="text-teal bg-white">
+        <q-btn flat label="确定" v-close-popup />
+        <q-btn flat label="取消" v-close-popup />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
 import { useRouter } from 'vue-router'
+import { Plus } from '@element-plus/icons-vue'
+import { Notify } from 'quasar'
 
 const router = useRouter()
-const state: any = reactive({})
+const state: any = reactive({
+  showInfo: false,
+  info: {
+    name: '张三',
+    phone: '13112345678',
+    email: 'email@qq.com',
+  },
+  avatar: '',
+})
 const menusCpt = computed(() => {
   return router.options.routes.filter((v) => v.meta?.isMenu)
 })
@@ -56,7 +121,6 @@ const onSwitchTheme = () => {
   const rgb = getComputedStyle(document.documentElement).getPropertyValue(
     '--czr-main-color-rgb',
   )
-  console.log(rgb)
   switch (rgb) {
     case '235, 92, 32':
       {
@@ -80,6 +144,24 @@ const onSwitchTheme = () => {
       break
   }
 }
+const handleAvatarSuccess = (response, uploadFile) => {
+  state.avatar = URL.createObjectURL(uploadFile.raw!)
+}
+
+const beforeAvatarUpload = (rawFile) => {
+  if (rawFile.type !== 'image/jpeg') {
+    Notify.create({
+      message: '头像格式错误！',
+      position: 'top',
+      type: 'warning',
+    })
+    return false
+  } else if (rawFile.size / 1024 / 1024 > 2) {
+    // ElMessage.error('Avatar picture size can not exceed 2MB!')
+    return false
+  }
+  return true
+}
 </script>
 
 <style lang="scss" scoped>
@@ -115,4 +197,24 @@ const onSwitchTheme = () => {
   width: 100%;
   height: 3px; /* 增加下划线高度 */
 }
+:deep(.avatar-uploader .el-upload) {
+  border: 1px dashed #e5e7eb !important;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+:deep(.avatar-uploader .el-upload:hover) {
+  border-color: var(--czr-main-color);
+}
+
+:deep(.el-icon.avatar-uploader-icon) {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
 </style>