成品

components.d.ts

@@ -23,6 +23,7 @@ declare module 'vue' {
     VanCascader: typeof import('vant/es')['Cascader']
     VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
+    VanDialog: typeof import('vant/es')['Dialog']
     VanDropdownItem: typeof import('vant/es')['DropdownItem']
     VanDropdownMenu: typeof import('vant/es')['DropdownMenu']
     VanEmpty: typeof import('vant/es')['Empty']
@@ -34,6 +35,7 @@ declare module 'vue' {
     VanOverlay: typeof import('vant/es')['Overlay']
     VanPopup: typeof import('vant/es')['Popup']
     VanSearch: typeof import('vant/es')['Search']
+    VanShareSheet: typeof import('vant/es')['ShareSheet']
     VanSkeleton: typeof import('vant/es')['Skeleton']
     VanSkeletonImage: typeof import('vant/es')['SkeletonImage']
     VanSkeletonParagraph: typeof import('vant/es')['SkeletonParagraph']
@@ -45,6 +47,7 @@ declare module 'vue' {
     VanTabs: typeof import('vant/es')['Tabs']
     VanTextEllipsis: typeof import('vant/es')['TextEllipsis']
     VanTreeSelect: typeof import('vant/es')['TreeSelect']
+    VanUploader: typeof import('vant/es')['Uploader']
     VanWatermark: typeof import('vant/es')['Watermark']
   }
 }

src/api/myself.ts

@@ -19,4 +19,23 @@ export const getDoctorCollector = () =>
   instance.get('/center/collection/doctor')
 
 export const getArticleCollector = () =>
-  instance.get('/center/collection/article')
+  instance.get('/center/collection/article')
+
+
+// 修改个人信息
+export const fileUpload = (file: any) =>
+  instance({
+    url: '/file/upload',
+    method: 'post',
+    data: { file },
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+
+export const updateUserInfo = (data: any) =>
+  instance({
+    url: '/center/user/updateUserInfo',
+    method: 'post',
+    data: data
+  })

src/components/Header.vue

@@ -14,7 +14,7 @@ const back = () => {
 }
 onMounted(() => {
   if (props.color === 'white') {
-    document.querySelector('.title').style.color = '#fff'
+    // document.querySelector('.title').style.color = '#fff'
     document.querySelector('.title').style.backgroundColor = 'transparent'
   } else if (props.color === 'blue') {
     document.querySelector('.title').style.color = '#fff'
@@ -41,18 +41,38 @@ const collectFn = () => {
   }
   emit('collectFn', collectNum.value)
 }
+
+// 分享
+const showShare = ref(false)
+const options = [
+  [
+    { name: '微信', icon: 'wechat' },
+    { name: '朋友圈', icon: 'wechat-moments' },
+    { name: '微博', icon: 'weibo' },
+    { name: 'QQ', icon: 'qq' }
+  ],
+  [
+    { name: '复制链接', icon: 'link' },
+    { name: '分享海报', icon: 'poster' },
+    { name: '二维码', icon: 'qrcode' },
+    { name: '小程序码', icon: 'weapp-qrcode' }
+  ]
+]
 </script>
 
 <template>
   <div class="title">
     <van-icon style="position: absolute; left: 20px; top: 22px" @click="back" name="arrow-left" />
-    <slot></slot>
+    <div class="t1"><slot></slot></div>
     <div v-if="props.color && props.color !== 'appoint'">
       <span style="color: #fff" ref="collect" @click="collectFn">
         <van-icon style="position: absolute; right: 60px; top: 21px" name="star" size="22" />
       </span>
-      <van-icon style="position: absolute; right: 20px; top: 22px" name="share" color="#fff" />
+      <van-icon style="position: absolute; right: 20px; top: 22px" name="share" color="#fff" @click="showShare = true" />
     </div>
+
+    
+  <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
   </div>
 </template>
 
@@ -68,5 +88,12 @@ const collectFn = () => {
   z-index: 999;
   background-color: #fff;
   position: sticky;
+  .t1 {
+    width: 200px;
+    margin: 0 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap
+  }
 }
 </style>

src/stores/modules/user.ts

@@ -3,10 +3,10 @@ import { defineStore } from 'pinia'
 import { getUserInfoApi } from '@/api/login'
 
 export const useUserStore = defineStore('user', () => {
-  const token = ref(
-    'eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NTg4ODQxMzAsInN1YiI6IkxPR0lOX1VTRVIiLCJ1c2VySWQiOjgsInVzZXJOYW1lIjoiMTU2NzQ2NzU2NjcifQ.SzXVzIX5hk1trTyTTasnpLOGJQKhnjk56KCM5P5kVGo'
-  )
-  // const token = ref('')
+  // const token = ref(
+  //   'eyJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NTg4ODQxMzAsInN1YiI6IkxPR0lOX1VTRVIiLCJ1c2VySWQiOjgsInVzZXJOYW1lIjoiMTU2NzQ2NzU2NjcifQ.SzXVzIX5hk1trTyTTasnpLOGJQKhnjk56KCM5P5kVGo'
+  // )
+  const token = ref('')
   const setToken = (newToken: string) => {
     token.value = newToken
   }
@@ -18,6 +18,8 @@ export const useUserStore = defineStore('user', () => {
   const getUserInfo = async () => {
     const res = await getUserInfoApi()
     userInfo.value = res.data.data
+    console.log(userInfo.value);
+    
   }
   const setUserInfo = (newUser: any) => {
     userInfo.value = newUser
@@ -25,7 +27,7 @@ export const useUserStore = defineStore('user', () => {
 
   return { token, setToken, userInfo, getUserInfo, setUserInfo }
 },
-// {
-//   persist: true
-// }
+{
+  persist: true
+}
 )

src/views/1_login/LoginPage.vue

@@ -110,7 +110,8 @@ const loginFun = async () => {
   height: 100vh;
   width: 100vw;
   background-color: #fff;
-  background: linear-gradient(to top, #a2e9f7, #d4faf2, #99befc);
+  // background: linear-gradient(to top, #a2e9f7, #d4faf2, #99befc);
+  background: url('@/assets/bg.png') center / cover;
   display: flex;
   flex-direction: column;
   align-items: center;

src/views/7_myself/MyselfPage.vue

@@ -2,10 +2,12 @@
 import { onMounted, ref } from 'vue'
 import avatar from '@/assets/default.png'
 import { useRouter } from 'vue-router'
+import axios from 'axios';
 import { useUserStore } from '@/stores';
+import { fileUpload, updateUserInfo } from '@/api/myself';
 
 // 获取用户信息
-const userInfo = useUserStore().userInfo
+const userInfo = useUserStore()
 
 // 跳转到我的预约-全部页面
 const toAppointment = (num) => {
@@ -39,8 +41,34 @@ const cellList = ref([
 
 // 跳转到修改信息页面
 const router = useRouter()
-const toEdit = () => {
-  console.log('跳转到修改信息页面')
+const show = ref(false)
+/// 图片上传
+const userForm = ref({
+  url: '',
+  name: ''
+})
+const fileList = ref([{
+  url: userInfo.userInfo.avatarUrl || avatar,
+}])
+const imageUrl = ref('')
+const afterRead = async (file) => {
+  imageUrl.value = URL.createObjectURL(file.file)
+  const res = await fileUpload(file.file)
+  userForm.value.url = res.data.data.url
+  userForm.value.name = res.data.data.name
+}
+const user = ref({
+  nickname: userInfo.userInfo.nickname,
+  avatarUrl: userForm.value.url,
+  urlName: userForm.value.name
+})
+const toEdit = async () => {
+  user.value.avatarUrl = userForm.value.url
+  user.value.urlName = userForm.value.name
+  console.log(user.value);
+  await updateUserInfo(user.value)
+  await userInfo.getUserInfo()
+  showSuccessToast('修改成功')
 }
 </script>
 
@@ -49,14 +77,11 @@ const toEdit = () => {
     <!-- 用户名 -->
     <div class="header"></div>
     <div class="myself-header">
-      <img
-        :src="userInfo.avatarUrl || avatar"
-        alt=""
-      />
-      <span style="flex: 1; font-weight: 600; font-size: 18px;">
-        {{ userInfo.nickname || '用户名' }}
+      <img :src="userInfo.userInfo.avatarUrl || userInfo.avatar" alt="" />
+      <span style="flex: 1; font-weight: 600; font-size: 18px">
+        {{ userInfo.userInfo.nickname || '用户名' }}
       </span>
-      <el-icon @click="toEdit" size="22" color="#bbb"><Edit /></el-icon>
+      <el-icon @click="show = true" size="22" color="#bbb"><Edit /></el-icon>
     </div>
 
     <!-- 我的预约 -->
@@ -103,6 +128,26 @@ const toEdit = () => {
         is-link
       />
     </van-cell-group>
+
+    <van-dialog
+      v-model:show="show"
+      title="修改个人信息"
+      show-cancel-button
+      @confirm="toEdit"
+    >
+      <van-field
+        v-model="user.nickname"
+        label="昵称"
+        required
+        placeholder="请输入昵称"
+        style="margin: 8px 0"
+      />
+      <van-field name="uploader" required label="上传头像">
+        <template #input>
+          <van-uploader :after-read="afterRead" v-model="fileList" :max-count="1"/>
+        </template>
+      </van-field>
+    </van-dialog>
   </div>
 </template>
 

vite.config.ts

@@ -32,6 +32,11 @@ export default defineConfig({
         target: 'http://10.138.8.154:8081',
         changeOrigin: true
         // rewrite: (path) => path.replace(/^\/app/, '')
+      },
+      '/admin': {
+        target: 'http://10.138.8.154:8080',
+        changeOrigin: true
+        // rewrite: (path) => path.replace(/^\/admin/, '')
       }
     }
   }