devbox
小桥流水78
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

黑马头条项目练习（day08）_黑马头条day8

作者：小桥流水78 | 2024-08-16 11:33:42

赞

踩

黑马头条day8

今天说到的是个人资料的设置，首先就是准备好我们项目所需要的页面组件

首先是user-profile/index.vue

  1. <template>
  2.   <div class="user-profile">
  3.     <!-- 导航栏 -->
  4.     <van-nav-bar
  5.       class="page-nav-bar"
  6.       title="个人信息"
  7.       left-arrow
  8.       @click-left="$router.back()"
  9.     />
  10.     <!-- /导航栏 -->
  11.  
  12.     <input type="file" hidden ref="file" @change="onChangeFile" />
  13.     <!-- 个人信息 -->
  14.     <van-cell
  15.       class="avatar-cell"
  16.       title="头像"
  17.       is-link
  18.       center
  19.       @click="$refs.file.click()"
  20.     >
  21.       <van-image class="avatar" round fit="cover" :src="user.photo" />
  22.     </van-cell>
  23.     <van-cell
  24.       @click="isUpdateNameShow = true"
  25.       title="昵称"
  26.       :value="user.name"
  27.       is-link
  28.     />
  29.     <van-cell
  30.       @click="isUpdateGenderShow = true"
  31.       title="性别"
  32.       :value="user.gender === 0 ? '男' : '女'"
  33.       is-link
  34.     />
  35.     <van-cell
  36.       @click="isUpdateBirthdayShow = true"
  37.       title="生日"
  38.       :value="user.birthday"
  39.       is-link
  40.     />
  41.     <!-- /个人信息 -->
  42.  
  43.     <!-- 编辑昵称 -->
  44.     <van-popup
  45.       v-model="isUpdateNameShow"
  46.       style="height: 100%"
  47.       position="bottom"
  48.     >
  49.       <UpdateName
  50.         v-model="user.name"
  51.         v-if="isUpdateNameShow"
  52.         @close="isUpdateNameShow = false"
  53.       ></UpdateName>
  54.     </van-popup>
  55.     <!-- /编辑昵称 -->
  56.  
  57.     <!-- 修改性别 -->
  58.     <van-popup
  59.       v-model="isUpdateGenderShow"
  60.       style="height: 50%"
  61.       position="bottom"
  62.     >
  63.       <UpdateGender
  64.         @close="isUpdateGenderShow = false"
  65.         v-model="user.gender"
  66.         v-if="isUpdateGenderShow"
  67.       ></UpdateGender>
  68.     </van-popup>
  69.     <!-- /修改性别 -->
  70.  
  71.     <!-- 修改生日 -->
  72.     <van-popup
  73.       v-model="isUpdateBirthdayShow"
  74.       style="height: 50%"
  75.       position="bottom"
  76.     >
  77.       <UpdateBirthday
  78.         @close="isUpdateBirthdayShow = false"
  79.         v-model="user.birthday"
  80.       ></UpdateBirthday>
  81.     </van-popup>
  82.     <!-- /修改生日 -->
  83.  
  84.     <!-- 修改个人头像 -->
  85.     <van-popup
  86.       v-model="isUpdatePhotoShow"
  87.       style="height: 100%"
  88.       position="bottom"
  89.     >
  90.       <updatePhoto :img="img" @close="isUpdatePhotoShow = false" @update-photo="user.photo = $event"></updatePhoto>
  91.     </van-popup>
  92.     <!-- /修改个人头像 -->
  93.   </div>
  94. </template>
  95.  
  96. <script>
  97. import { getUserProfileAPI } from "@/api";
  98. import UpdateName from "./components/update-name";
  99. import UpdateGender from "./components/update-gender";
  100. import UpdateBirthday from "./components/update-birthday";
  101. import updatePhoto from "./components/update-photo";
  102. export default {
  103.   name: "UserProfile",
  104.   components: {
  105.     UpdateName,
  106.     UpdateGender,
  107.     UpdateBirthday,
  108.     updatePhoto,
  109.   },
  110.   props: {},
  111.   data() {
  112.     return {
  113.       user: {},
  114.       isUpdateNameShow: false,
  115.       isUpdateGenderShow: false,
  116.       isUpdateBirthdayShow: false,
  117.       isUpdatePhotoShow: false,
  118.       img: null, // 存储blob地址
  119.     };
  120.   },
  121.   computed: {},
  122.   watch: {},
  123.   created() {
  124.     this.loadUserProfile();
  125.   },
  126.   mounted() {},
  127.   methods: {
  128.     async loadUserProfile() {
  129.       try {
  130.         const { data } = await getUserProfileAPI();
  131.         console.log(data);
  132.         this.user = data.data;
  133.       } catch (error) {
  134.         console.log(error);
  135.         this.$toast("获取用户信息失败");
  136.       }
  137.     },
  138.     onChangeFile() {
  139.       const img = this.$refs.file.files[0];
  140.       // 转化blob地址
  141.       this.img = window.URL.createObjectURL(img);
  142.       // console.log(img_url);
  143.  
  144.       this.isUpdatePhotoShow = true;
  145.       // 解决选择上一次相同的图片，不会触发change事件的问题
  146.       this.$refs.file.value = "";
  147.     },
  148.   },
  149. };
  150. </script>
  151.  
  152. <style scoped lang="less">
  153. .user-profile {
  154.   .avatar-cell {
  155.     .van-cell__value {
  156.       display: flex;
  157.       flex-direction: row-reverse;
  158.     }
  159.     .avatar {
  160.       width: 60px;
  161.       height: 60px;
  162.     }
  163.   }
  164.   .van-popup {
  165.     background-color: #f5f7f9;
  166.   }
  167. }
  168. </style>

然后就是user-profile/components/update-name.vue

  1. <template>
  2.   <div class="update-name">
  3.     <!-- 导航栏 -->
  4.     <van-nav-bar
  5.       title="设置昵称"
  6.       left-text="取消"
  7.       right-text="完成"
  8.       @click-left="$emit('close')"
  9.       @click-right="onComfirm"
  10.     />
  11.     <!-- /导航栏 -->
  12.     <!-- 输入框 -->
  13.     <div class="field-wrap">
  14.       <van-field
  15.         v-model.trim="message"
  16.         rows="2"
  17.         autosize
  18.         type="textarea"
  19.         maxlength="11"
  20.         placeholder="请输入昵称"
  21.         show-word-limit
  22.       />
  23.     </div>
  24.     <!-- /输入框 -->
  25.   </div>
  26. </template>
  27.  
  28. <script>
  29. import { updateUserProfileAPI } from "@/api";
  30. export default {
  31.   name: "UpdateName",
  32.   components: {},
  33.   props: {
  34.     value: {
  35.       type: String,
  36.       required: true,
  37.     },
  38.   },
  39.   data() {
  40.     return {
  41.       message: this.value,
  42.     };
  43.   },
  44.   computed: {},
  45.   watch: {},
  46.   created() {},
  47.   mounted() {},
  48.   methods: {
  49.     async onComfirm() {
  50.       this.$toast.loading({
  51.         message: "更新中...",
  52.         forbidClick: true,
  53.         duration: 0,
  54.       });
  55.       const massage = this.message;
  56.       if (massage.trim().length === 0) {
  57.         return this.$toast("用户名的长度不能为空");
  58.       }
  59.       try {
  60.         // 1. 发送请求实现后台数据的修改
  61.         await updateUserProfileAPI({
  62.           name: this.message,
  63.         });
  64.         this.$toast("更新成功");
  65.         // 2. 传到父级，更新父级数据
  66.         this.$emit("input", massage);
  67.         // 3. 关闭弹层
  68.         this.$emit("close");
  69.       } catch (error) {
  70.         console.log(error);
  71.         this.$toast("更新失败");
  72.         this.$toast("更新用户名失败");
  73.       }
  74.     },
  75.   },
  76. };
  77. </script>
  78.  
  79. <style scoped lang="less">
  80. .field-wrap {
  81.   padding: 20px;
  82. }
  83. </style>

然后就是user-profile/components/update-gender.vue

  1. <template>
  2.   <div class="update-gender">
  3.     <van-picker
  4.       @cancel="$emit('close')"
  5.       title="设置性别"
  6.       show-toolbar
  7.       :columns="columns"
  8.       :default-index="value"
  9.       @change="onChange"
  10.       @confirm="onConfirm"
  11.     />
  12.   </div>
  13. </template>
  14.  
  15. <script>
  16. import { updateUserProfileAPI } from "@/api";
  17. export default {
  18.   name: "",
  19.   components: {},
  20.   props: {
  21.     value: {
  22.       type: Number,
  23.       required: true,
  24.     },
  25.   },
  26.   data() {
  27.     return {
  28.       columns: ["男", "女"],
  29.       localGender: 0,
  30.     };
  31.   },
  32.   computed: {},
  33.   watch: {},
  34.   created() {},
  35.   mounted() {},
  36.   methods: {
  37.     onChange(picker, value, index) {
  38.       //   this.$toast(`当前值：${value}, 当前索引：${index}`);
  39.       this.localGender = index;
  40.     },
  41.     async onConfirm() {
  42.       this.$toast.loading({
  43.         message: "更新中...",
  44.         forbidClick: true,
  45.         duration: 0,
  46.       });
  47.       const localGender = this.localGender;
  48.       try {
  49.         // 1. 发送请求实现后台数据的修改
  50.         await updateUserProfileAPI({
  51.           gender: this.localGender,
  52.         });
  53.         this.$toast("更新成功");
  54.         // 2. 传到父级，更新父级数据
  55.         this.$emit("input", localGender);
  56.         // 3. 关闭弹层
  57.         this.$emit("close");
  58.       } catch (error) {
  59.         console.log(error);
  60.         this.$toast("更新失败");
  61.         this.$toast("更新用户名失败");
  62.       }
  63.     },
  64.   },
  65. };
  66. </script>
  67. <style lang="less" scoped></style>

然后就是user-profile/components/update-birthday.vue

  1. <template>
  2.   <div class="update-birthday">
  3.     <van-datetime-picker
  4.       v-model="currentDate"
  5.       type="date"
  6.       title="选择年月日"
  7.       :min-date="minDate"
  8.       :max-date="maxDate"
  9.       @cancel="$emit('close')"
  10.       @confirm="onConfirm"
  11.     />
  12.   </div>
  13. </template>
  14.  
  15. <script>
  16. import { updateUserProfileAPI } from "@/api";
  17. import dayjs from "dayjs";
  18. export default {
  19.   name: "UpdateBirthday",
  20.   components: {},
  21.   props: {
  22.     value: {
  23.       type: String,
  24.       required: true,
  25.     },
  26.   },
  27.   data() {
  28.     return {
  29.       minDate: new Date(1900, 0, 1),
  30.       //   maxDate: new Date(2025, 10, 1),
  31.       maxDate: new Date(),
  32.       currentDate: new Date(this.value),
  33.     };
  34.   },
  35.   computed: {},
  36.   watch: {},
  37.   created() {},
  38.   mounted() {},
  39.   methods: {
  40.     async onConfirm() {
  41.       this.$toast.loading({
  42.         message: "更新中...",
  43.         forbidClick: true,
  44.         duration: 0,
  45.       });
  46.       const localBirthday = dayjs(this.currentDate).format("YYYY-MM-DD");
  47.       try {
  48.         // 1. 发送请求实现后台数据的修改
  49.         await updateUserProfileAPI({
  50.           birthday: localBirthday,
  51.         });
  52.         this.$toast("更新成功");
  53.         // 2. 传到父级，更新父级数据
  54.         this.$emit("input", localBirthday);
  55.         // 3. 关闭弹层
  56.         this.$emit("close");
  57.       } catch (error) {
  58.         console.log(error);
  59.         this.$toast("更新失败");
  60.         this.$toast("更新用户名失败");
  61.       }
  62.     },
  63.   },
  64. };
  65. </script>
  66. <style lang="less" scoped></style>

然后就是user-profile/components/update-photo.vue

  1. <template>
  2.   <div class="update-photo">
  3.     <img class="img" :src="img" ref="img" />
  4.  
  5.     <div class="toolbar">
  6.       <div class="cancel" @click="$emit('close')">取消</div>
  7.       <div class="confirm" @click="onConfirm">完成</div>
  8.     </div>
  9.   </div>
  10. </template>
  11.  
  12. <script>
  13. import { updateUserPhotoAPI } from "@/api";
  14. import "cropperjs/dist/cropper.css";
  15. import Cropper from "cropperjs";
  16. export default {
  17.   name: "UpdatePhoto",
  18.   components: {},
  19.   props: {
  20.     // 预览图片地址信息
  21.     img: {
  22.       type: [String, Object],
  23.       required: true,
  24.     },
  25.   },
  26.   data() {
  27.     return {
  28.       cropper: null,
  29.     };
  30.   },
  31.   computed: {},
  32.   watch: {},
  33.   created() {},
  34.   mounted() {
  35.     const image = this.$refs.img;
  36.     this.cropper = new Cropper(image, {
  37.       viewMode: 1,
  38.       dragMode: "move",
  39.       aspectRatio: 1,
  40.       // autoCropArea: 1,
  41.       cropBoxMovable: false,
  42.       cropBoxResizable: false,
  43.       background: false,
  44.     });
  45.   },
  46.   methods: {
  47.     // 确定事件
  48.     async onUpdatePhoto(blob) {
  49.       this.$toast.loading({
  50.         message: "更新中...",
  51.         forbidClick: true,
  52.         duration: 0,
  53.       });
  54.       const formData = new FormData();
  55.       formData.append("photo", blob);
  56.       try {
  57.         // 1. 发送请求实现后台数据的修改
  58.         const { data } = await updateUserPhotoAPI(formData);
  59.         console.log(data);
  60.         this.$toast("更新成功");
  61.         // 2. 传到父级，更新父级数据
  62.         this.$emit("update-photo", data.data.photo);
  63.         // 3. 关闭弹层
  64.         this.$emit("close");
  65.       } catch (error) {
  66.         console.log(error);
  67.         this.$toast("更新失败");
  68.         this.$toast("更新头像失败");
  69.       }
  70.     },
  71.     onConfirm() {
  72.       this.cropper.getCroppedCanvas().toBlob(
  73.         (blob) => {
  74.           console.log(blob);
  75.           this.onUpdatePhoto(blob);
  76.           //   const formData = new FormData();
  77.  
  78.           // Pass the image file name as the third parameter if necessary.
  79.           //   formData.append("croppedImage", blob /*, 'example.png' */);
  80.  
  81.           // Use `jQuery.ajax` method for example
  82.           //   $.ajax("/path/to/upload", {
  83.           //     method: "POST",
  84.           //     data: formData,
  85.           //     processData: false,
  86.           //     contentType: false,
  87.           //     success() {
  88.           //       console.log("Upload success");
  89.           //     },
  90.           //     error() {
  91.           //       console.log("Upload error");
  92.           //     },
  93.           //   });
  94.         } /*, 'image/png' */
  95.       );
  96.     },
  97.   },
  98. };
  99. </script>
  100.  
  101. <style scoped lang="less">
  102. .update-photo {
  103.   background-color: #000;
  104.   height: 100%;
  105.   .toolbar {
  106.     position: fixed;
  107.     left: 0;
  108.     right: 0;
  109.     bottom: 0;
  110.     display: flex;
  111.     justify-content: space-between;
  112.     .cancel,
  113.     .confirm {
  114.       width: 90px;
  115.       height: 90px;
  116.       font-size: 30px;
  117.       display: flex;
  118.       justify-content: center;
  119.       align-items: center;
  120.       color: #fff;
  121.     }
  122.   }
  123. }
  124. .img {
  125.   display: block;
  126.   max-width: 100%;
  127. }
  128. </style>

over!

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/988039
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号