Add functions of avatar and background

添加了修改头像、背景的功能
OnGoingLzy · Jul 15, 2022 · 3ae585a · 3ae585a
1 parent 6530a8c
commit 3ae585a
Show file tree

Hide file tree

Showing 11 changed files with 205 additions and 92 deletions.
diff --git a/src/assets/CSS/global.less b/src/assets/CSS/global.less
@@ -15,7 +15,7 @@
 }
 .shoucang-video-box{
     background: #F2F3F5;
-    width: 98%;
+    width: 100%;
     height: 80px;
     padding-top: 8px;
     display: flex;

diff --git a/src/components/commentComponent.vue b/src/components/commentComponent.vue
@@ -32,7 +32,6 @@
         </div>
       </div>
     </div>
-    <hr/>
   </div>
 
 </template>

diff --git a/src/components/header_.vue b/src/components/header_.vue
@@ -19,6 +19,7 @@
             height="34"
             :src='"http://localhost:9000/avatar/"+cAvatar'
             @click="toPersonalSpace"
+            style="border: 1px solid darkgrey"
         />
       </van-col>
       <van-col span="4" class="icondiv">
@@ -42,7 +43,7 @@ import router from "@/router";
 import {List, Notify, Toast} from "vant";
 
 export default {
-  inject: ['reload'],
+  inject: ['reload','footerReload'],
   name: "header_",
   data(){
     return{
@@ -74,6 +75,8 @@ export default {
       })
     },
     toPersonalSpace() {
+      sessionStorage.setItem("active",'3')
+      this.footerReload()
       this.$emit('visibleEvent',false) //点击后传递false给app.vue隐藏header
       this.$router.push('/personalSpace')
     },
@@ -101,16 +104,15 @@ export default {
   },//挂载
   mounted() {
     console.log("挂载.....")
-    console.log("获取session的cid1前:"+this.cid)
     this.cid = Number(sessionStorage.getItem('cid'))
-    console.log("获取session的cid1后:"+this.cid)
+
     //获取消息和头像等
     console.log("header里的avatar1:" + this.cAvatar)
-    if(this.cid === 404){
-      this.cAvatar = "default.png"
-    }else this.cAvatar = sessionStorage.getItem("cAvatar")
-    console.log("header里的avatar2:" + this.cAvatar)
-    console.log("------------")
+    if (sessionStorage.getItem('cid') !== null) {
+      this.$http.post("getMsgImg", sessionStorage.getItem('cid')).then(res => {
+        this.cAvatar = res.data.avatarName
+      })
+    }
   }
 }
 </script>

diff --git a/src/components/homeVideo.vue b/src/components/homeVideo.vue
@@ -78,15 +78,15 @@
       </div>
 
       <div class="video-box" v-for="(video,index) of videolist" :key="index" @click="toVideoFrame(video)">
-        <div style="background: #e0e0e0;border-top-left-radius: 8px;border-top-right-radius: 8px;">
-          <van-image style="z-index: 1" :src='"http://localhost:9000/videoCover/"+video.coverpath' width="100%" height="105px" fit="contain">
+        <div style="background: #e0e0e0;border-top-left-radius: 8px;border-top-right-radius: 8px;height: 80%">
+          <van-image style="z-index: 1" radius="8px 8px 0px 0px" :src='"http://localhost:9000/videoCover/"+video.coverpath' width="100%" height="110px" fit="contain">
+            <div style="z-index:2;margin-top: -30px;height: 30px;background: linear-gradient(to bottom,rgba(255,255,255,0),rgba(0,0,0,0.62))">
+              <span style="color: #ffffff;display: flex;line-height: 35px;margin-left: 10px" v-text="Math.floor(Number(video.videoseconds)/60).toString().padStart(2, '0')+':'+(Number(video.videoseconds)%60).toString().padStart(2, '0')"></span>
+            </div>
           </van-image>
-          <div style="z-index:2;margin-top: -30px;height: 30px;background: linear-gradient(to bottom,rgba(255,255,255,0),rgba(0,0,0,0.62))">
-            <span style="color: #ffffff;display: flex;line-height: 30px;margin-left: 10px" v-text="Math.floor(Number(video.videoseconds)/60).toString().padStart(2, '0')+':'+(Number(video.videoseconds)%60).toString().padStart(2, '0')"></span>
-          </div>
         </div>
 
-        <div class="van-ellipsis" style="width: 100%;text-align: left">
+        <div class="van-ellipsis" style="width: 100%;text-align: left;height: 30px">
           <span class="video-box-p" >{{video.videoname}}</span>
         </div>
       </div>
@@ -273,7 +273,7 @@ export default {
     border-radius: 5px;
   }
   .video-box{
-    position:relative;
+    //position:relative;
     width: 47%;
     height: 36%;
     //border: 1px solid #8470FF;

diff --git a/src/components/login.vue b/src/components/login.vue
@@ -87,7 +87,6 @@ export default {
         const {data: res2} = await this.$http.post("/getMsgImg", String(res.cid));//不能使用int型
         if (res !== "") {
           sessionStorage.setItem('cAvatar', res2.avatarName)
-          sessionStorage.setItem('cbkg',res2.bkgName)
         } else {
           sessionStorage.setItem('cAvatar','default.png')
         }

diff --git a/src/components/personalComponents/HeaderComponents/personalBackground.vue b/src/components/personalComponents/HeaderComponents/personalBackground.vue
@@ -18,8 +18,10 @@ export default {
     }
   },
   mounted() {
-    if(sessionStorage.getItem('cbkg')!==null){
-      this.bkgImg = sessionStorage.getItem('cbkg')
+    if (sessionStorage.getItem('cid') !== null) {
+      this.$http.post("getMsgImg", sessionStorage.getItem('cid')).then(res => {
+        this.bkgImg = res.data.bkgName
+      })
     }
 
   }

diff --git a/src/components/personalComponents/HeaderComponents/personalMessage.vue b/src/components/personalComponents/HeaderComponents/personalMessage.vue
@@ -11,6 +11,8 @@
             width="60"
             height="60"
             :src='"http://localhost:9000/avatar/"+cAvatar'
+            @click="showEditAvatar=true"
+            style="border: 1px solid darkgrey"
         />
       </van-col>
       <van-col span="8" class="pmsg-box-name">
@@ -39,13 +41,13 @@
     <div class="introduction">
       <p style="margin: 0">{{userMsg.introduction}}</p>
     </div>
+
+
   </div>
 </template>
 
 <script>
 
-import bus from "@/bus";
-
 export default {
   inject: ['reload','setVisible','reloadBar'],
   name: "personalMessage",
@@ -55,10 +57,11 @@ export default {
       cid: 0,
       cname: '请先登录',
       userMsg:[],
-      ctype: sessionStorage.getItem('ctype'),
+      ctype:sessionStorage.getItem("ctype"),
     }
   },
   methods:{
+
     iconClick(){
       this.setVisible(true)
       this.$router.push('/login')
@@ -67,21 +70,26 @@ export default {
       sessionStorage.setItem('personalActive','0')
       this.reloadBar()
       this.$router.push('editMsg')
-    }
+    },
+
   },
-  async mounted() {
+  mounted() {
     this.cid = Number(sessionStorage.getItem('cid'))  //一定要转换类型
     if (this.cid === 404) {
       this.cAvatar = "default.png"
-    } else this.cAvatar = sessionStorage.getItem("cAvatar")
+    }
 
     this.cname = sessionStorage.getItem('cname')
     if (this.cid === 404) {
       this.cname = "离线管理"
     }
-    await this.$http.post("getMsgImg", this.cid).then(res=>{
-      this.userMsg = res.data
-    })
+    if(this.cid!==0){
+      this.$http.post("getMsgImg", this.cid).then(res=>{
+        this.userMsg = res.data
+        this.cAvatar = res.data.avatarName
+
+      })
+    }
 
   }
 }

diff --git a/src/components/personalComponents/mainComponents/mainEditMsg.vue b/src/components/personalComponents/mainComponents/mainEditMsg.vue
@@ -1,5 +1,50 @@
 <template>
   <div class="edit-box">
+<!--    <van-uploader v-model="img"-->
+<!--                  accept="image/*"-->
+<!--                  max-count="1"-->
+<!--                  :after-read="selectAfter"-->
+<!--                  preview-size="100px"-->
+<!--                  :deletable="coverImg = null"-->
+<!--                  :preview-image=true-->
+<!--                  :max-size="4096 * 1024" @oversize="onOversize"-->
+<!--                  @delete="coverImg = null"-->
+
+<!--    />-->
+    <div class="upload-img-box">
+      <div class="upload-img-box-text">
+        <span style="font-size: 14px;color: #4b4b4b;line-height: 88px">头像</span>
+      </div>
+      <van-uploader
+                    :after-read="selectAvatarAfter"
+                    v-model="img"
+                    accept="image/*"
+                    preview-size="100px"
+                    :deletable="deletable"
+                    max-count="1"
+                    :preview-image=true
+                    @delete="AvatarImg = null"
+                    :max-size="4096 * 1024" @oversize="onOversize"
+
+      />
+    </div>
+    <div class="upload-img-box">
+      <div class="upload-img-box-text">
+        <span style="font-size: 14px;color: #4b4b4b;line-height: 88px">封面</span>
+      </div>
+      <van-uploader
+          :after-read="selectBKGAfter"
+          v-model="BKG"
+          accept="image/*"
+          preview-size="100px"
+          :deletable="deletable"
+          max-count="1"
+          :preview-image=true
+          @delete="BKGImg = null"
+          :max-size="10240 * 1024" @oversize="onOversize2"
+
+      />
+    </div>
     <van-field
         class="box"
         v-model.trim="cname"
@@ -30,32 +75,68 @@
 import {Toast} from "vant";
 
 export default {
-  inject:['changeBar'],
+  inject:['changeBar','reload'],
   name: "mainEditMsg",
   data(){
     return{
+      deletable:true,
       cname:null,
       introduction:null,
+      img:[],
+      BKG:[],
+      BKGImg: null,
+      AvatarImg: null,
     }
   },
   methods:{
+    selectAvatarAfter(file){
+      this.AvatarImg  = file.file
+    },
+    onOversize(){
+      Toast('头像大小不能超过 4Mb');
+    },
+    selectBKGAfter(file){
+      this.BKGImg  = file.file
+      console.log(this.BKGImg)
+    },
+    onOversize2(){
+      Toast('背景大小不能超过 10Mb');
+    },
     async updateMsg() {
       let formData = new FormData
       formData.append("cid", sessionStorage.getItem("cid"))
       formData.append("cname", this.cname)
       formData.append("introduction", this.introduction)
+      if(this.AvatarImg==null){
+        let file;
+        file = new File([], "default.png", undefined);
+        formData.append('avatar', file)
+      }else formData.append('avatar', this.AvatarImg)
+      if(this.BKGImg==null){
+        let file;
+        file = new File([], "defaultBkg.png", undefined);
+        formData.append('bkg', file)
+      }else formData.append('bkg', this.BKGImg)
+
       await this.$http.post("updateMsg", formData, {
         headers: {
           "Content-Type": "multipart/form-data"
         }
       }).then(res=>{
-        if(res.data===true){
+        if(res.data==='success'){
           Toast("修改成功!")
+          this.$http.post("getMsgImg",sessionStorage.getItem("cid")).then(res=>{
+            sessionStorage.setItem("cbkg",res.bkgName)
+            sessionStorage.setItem("cAvatar",res.avatarName)
+          })
+          this.reload()
           this.changeBar()
           this.$router.push('zhuye')
         }else {
-          Toast("修改失败")
+          Toast("修改失败"+res.data)
         }
+      }).catch(error=>{
+        Toast("出现了一个意外错误")
       })
     },
 
@@ -66,7 +147,19 @@ export default {
 <style lang="less" scoped>
   .edit-box{
     margin-top: 10px;
+    padding-top: 10px;
     padding-bottom: 20px;
     background: #fcfcfc;
   }
+  .upload-img-box{
+    padding-left: 16px;
+    padding-right: 16px;
+    display: flex;
+    /*垂直居中 */
+    .upload-img-box-text{
+      width: 98px;
+      vertical-align: middle;
+
+    }
+  }
 </style>
diff --git a/src/components/personalComponents/mainComponents/mainMyTougao.vue b/src/components/personalComponents/mainComponents/mainMyTougao.vue
@@ -23,7 +23,7 @@
     <div class="all-video-box">
       <div class="video-box" v-for="(video,index) of videolist" :key="index" @click="toVideoFrame(video)" v-if="video.status===2" >
         <div style="background: #e0e0e0;border-top-left-radius: 8px;border-top-right-radius: 8px;">
-          <van-image :src='"http://localhost:9000/videoCover/"+video.coverpath' width="100%" height="105px" fit="contain">
+          <van-image :src='"http://localhost:9000/videoCover/"+video.coverpath' width="100%" height="105px" fit="contain" radius="8px 8px 0px 0px">
           </van-image>
         </div>
 

diff --git a/src/components/personalComponents/mainComponents/mainShoucang.vue b/src/components/personalComponents/mainComponents/mainShoucang.vue
@@ -10,7 +10,7 @@
         <div class="shoucang-video-box" v-for="(video,index) of folderVideo" >
           <div style="width: 93%" @click="toVideo(video.videoid)">
             <div class="shoucang-video-box-img">
-              <van-image height="80px" width="120px" radius="5px" fit="cover" :src="'http://localhost:9000/videoCover/'+video.coverpath" >
+              <van-image height="80px" width="120px" radius="5px" fit="fill" :src="'http://localhost:9000/videoCover/'+video.coverpath" style="border: 1px solid darkgrey">
 
               </van-image>
             </div>
@@ -125,29 +125,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  //.shoucang-video-box{
-  //  background: #F2F3F5;
-  //  width: 100%;
-  //  height: 80px;
-  //  padding: 5px;
-  //  display: flex;
-  //  .shoucang-video-box-img{
-  //    width: 120px;
-  //    height: 80px;
-  //    display: inline-block;
-  //  }
-  //  .shoucang-video-box-msg{
-  //    padding-left: 7px;
-  //    width: 58%;
-  //    height: 80px;
-  //    display: inline-block;
-  //  }
-  //  .shoucang-video-box-edit{
-  //    display: inline-block;
-  //    width: 20px;
-  //    padding-left: 6px;
-  //  }
-  //}
+  .van-collapse-item__content{
+    padding: 11px 11px;
+  }
   .icondiv{
     padding: 6px;
     display: table-cell;