321

src/router/index.ts

@@ -97,6 +97,14 @@ const routes: Array<RouteConfig> = [
         title:''
       }
     },
+    {
+      path:'/photo/edit',
+      name:'PhotoEdit',
+      component:()=>import('@/view/Other/PhotoEdit.vue'),
+      meta:{
+        title:'上传头像'
+      }
+    },
   {
     path: '/auth',
     component: () => import("@/view/Auth/index.vue"),

src/service/Service.ts

@@ -27,7 +27,11 @@ export class Service {
         const post = this.service.post
         const resolveData = async (ret: any) => {
             if (ret.code === 200){
-                return ret.data;
+                console.log(ret);
+                if(ret.data){
+                    return ret.data;
+                }
+                return ret
             }else {
                 if(ret.code === 401){
                     Toast.fail('请重新登录')

src/service/userService.ts

@@ -10,7 +10,8 @@ export class UserService extends Service {
         isRegisterd:{ path:'/user/isRegister', dataType:'application/x-www-form-urlencoded'},
         isPwdSet:{ path:'/user/isSetPassword', dataType:'application/x-www-form-urlencoded'},
         userInfo:{ path:'/user/detail',dataType:'application/x-www-form-urlencoded'},
-        editUser:{path:'/user/update'}
+        editUser:{path:'/user/update'},
+        avatar:{ path:'/user/upload/avatar',dataType:'multipart/form-data'}
     }
     constructor(){
         super()
@@ -70,6 +71,23 @@ export class UserService extends Service {
         })
     }
 
+    async avatarUpload(file:any){
+        const fd = new FormData()
+        fd.append('file', file)
+        console.log(fd);
+        return await this.service.post(this.router.avatar.path,fd,{
+            headers:{
+                Authorization: this.getAuth(),
+                "Content-Type": this.router.avatar.dataType
+            }
+        })
+    }
+
+
+    /**
+    * 编辑用户的相关信息
+     * @returns 
+     */
     async editUserInfo(userInfo:UserInfo){
         return await this.service.post(this.router.editUser.path,userInfo,{
             headers:{

src/store/app.ts

@@ -5,7 +5,8 @@ const stateData = {
         data:{
             title:'默认'
         }
-    }
+    },
+    fileData:{}
 }
 interface overlayData {
     title:string
@@ -22,6 +23,9 @@ export const appStore = {
         },
         SET_OVERLAY(state:AppType,payload:overlayData){
             Object.assign(state.overlay.data,payload)
+        },
+        SET_FILEDATA(state:AppType,payload:any){
+            state.fileData = payload
         }
     },
     actions: {

src/style.less

@@ -75,6 +75,8 @@ body{
     height: calc(100vh - 60px);
     overflow-y: scroll;
   }
+
+
   .van-dialog{
     background-color: #1D2649;
 
@@ -113,4 +115,9 @@ body{
   .van-action-sheet__cancel:active, .van-action-sheet__item:active{
     background-color: #394267;
   }
+}
+
+.van-popup .van-action-sheet__item, .van-popup .van-action-sheet__cancel{
+  padding:25px 0;
+  border-bottom: 1px solid rgba(255,255,255,.15);
 }
\ No newline at end of file

src/view/Mine/index.vue

@@ -2,7 +2,7 @@
     <Layout-Main class='page-scroll'> 
         <div class='user-info w-11/12 mx-auto flex text-font-white  items-center py-8 overflow-y-scroll'>
             <div class='w-3/12 pr-5'>
-                <img src="/img/mokeImg/avatar.png" class='rounded-full w-18 object-fill' >
+                <img :value='getUserInfo.avatar?userInfo.avatar:"/img/mokeImg/avatar.png"' class='rounded-full w-18 object-fill' >
             </div>
             <div class='w-9/12 info flex-grow'>
                 <div class='name-box flex justify-between'>

src/view/Other/PhotoEdit.vue

+<template>
+    <Layout-Child>
+        <div class="mt-6 mx-auto w-11/12 ">
+            <div class="py-20  mx-auto flex  flex-col justify-center items-center">
+               <img :src="srcData" class="  w-40 object-cover rounded-full shadow-lg">
+            </div>
+        </div>
+        <div class="fixed bottom-0 w-full left-0 z-30">
+            <app-btn text="确认上传" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none'></app-btn>
+        </div>
+    </Layout-Child>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  data(){
+    return{
+      srcData:'' as string | ArrayBuffer | null
+    }
+  },
+  components:{
+       'Layout-Child':()=>import('@/layout/Child.vue'),
+    //    'app-cell':()=>import('@/components/common/Cell.vue'),
+        'app-btn':()=>import('@/components/common/Btn.vue')
+  },
+  mounted() {
+    this.printFile(this.fileData[0])
+  },
+  methods:{
+     printFile(file:any) {
+        const that =this
+        const reader = new FileReader();
+        reader.onload = function(evt) {
+          if(evt.target){
+             console.log(evt.target.result);
+            that.srcData = evt.target.result;
+          }
+          
+        };
+        reader.readAsDataURL(file);
+      }
+  },
+  computed:{
+    fileData:function(){
+      return this.$store.state.app.fileData;
+    }
+  }
+});
+</script>
+
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file

src/view/User/index.vue

 <template>
 <Layout-Child>
     <div class=" w-11/12 mx-auto py-6 text-font-white">
-        <app-cell text='头像' boxType='border' type='image'  :value='userInfo.avatar?userInfo.avatar:"/img/mokeImg/avatar.png"' icon='icon-xiayibu'></app-cell>
+        <input type="file" accept="image/*" capture="camera" class=" hidden" ref='fileElem' @change="fileUpload"/>
+        <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
+        <app-cell text='头像' boxType='border' type='image'  :value='userInfo.avatar?userInfo.avatar:"/img/mokeImg/avatar.png"' icon='icon-xiayibu' @click.native='uploadImg'></app-cell>
         <app-cell text='昵称' boxType='border' :value='userInfo.nickname?userInfo.nickname:"无昵称"' icon='icon-xiayibu' @click.native="goEdit({type:'nickname',title:'设置昵称'})"></app-cell>
         <app-cell text='手机号' boxType='border' :value='userInfo.telephone?userInfo.telephone:""' icon='icon-xiayibu' @click.native="goEdit({type:'telephone',title:'设置昵称'})"></app-cell>
         <app-cell text='邮箱绑定' boxType='border' :value='userInfo.email?userInfo.email:""' icon='icon-xiayibu' @click.native="goEdit({type:'email',title:'邮箱绑定'})"></app-cell>
@@ -17,13 +19,22 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { ActionSheet } from 'vant';
 
+Vue.use(ActionSheet);
 export default Vue.extend({
     data(){
         return{
-            userInfo:this.$util.userMsg.getUserMsg()
+            userInfo:this.$util.userMsg.getUserMsg(),
+            show:false,
+            actions: [
+                { name: '拍摄头像',router:'/photo' },
+                { name: '从图片夹上传',router:'/photoEdit' },
+            ],
+            file:{}
         }
     },
+ 
   components:{
        'Layout-Child':()=>import('@/layout/Child.vue'),
        'app-cell':()=>import('@/components/common/Cell.vue'),
@@ -41,7 +52,30 @@ export default Vue.extend({
             });
       },
       goEdit(item: {type:string,title:string}){
-          this.$router.push({name:'Edit', params:{type: item.type,title: item.title}})
+        this.$router.push({name:'Edit', params:{type: item.type,title: item.title}})
+      },
+      uploadImg(){
+        this.show= true
+      },
+      async fileUpload(event:any){
+          this.file = event.target.files[0]
+        //   this.$store.commit('app/SET_FILEDATA',event.target.files)
+          const upload =  await this.$service.userService.avatarUpload(event.target.files[0])
+            if(upload){
+                this.$util.userMsg.updateUserMsg(upload)
+                this.$toast.success('头像更新成功')
+            }
+        //   this.$router.push({name:'PhotoEdit'})
+      },
+      onSelect(item:any){
+        this.show = false;
+        let fEl =this.$refs.fileElem as HTMLInputElement
+        switch(item.name){
+            case '从图片夹上传':
+                fEl.click();
+            break;     
+        }
+        this.$toast(item.name);
       }
   }
 });