feat: 增加账号设置页面

.env.development

@@ -3,5 +3,6 @@
 ENV = 'development'
 VUE_APP_BASE_API_URL = 'http://127.0.0.1:8888/api/front'
 VUE_APP_BASE_IMG_URL = 'http://47.106.243.172:8888'
+VUE_APP_BASE_UPLOAD_IMG_URL = 'http://127.0.0.1:8888'
 
 

.env.production

@@ -3,3 +3,4 @@
 ENV = 'production'
 VUE_APP_BASE_API_URL = 'http://47.106.243.172:8888/api/front'
 VUE_APP_BASE_IMG_URL = 'http://47.106.243.172:8888'
+VUE_APP_BASE_UPLOAD_IMG_URL = 'http://127.0.0.1:8888'

src/api/user.js

@@ -23,3 +23,11 @@ export function deleteComment(id) {
 export function updateComment(id,content) {
     return request.putForm(`/user/comment/${id}`,content);
 }
+
+export function getUserinfo() {
+    return request.get('/user');
+}
+
+export function updateUserInfo(userInfo) {
+    return request.put('/user',userInfo);
+}

src/components/common/Top.vue

@@ -32,8 +32,8 @@
         </span>
         <span v-if="token" class="user_link"
           ><!--<i class="line mr20">|</i
-          >--><a class="mr15">{{ nickName }}</a
+          >--><router-link :to="{name:'userSetup'}" class="mr15">{{ nickName }}</router-link>
-          ><a @click="logout" href="javascript:void(0)">退出</a></span
+          <a @click="logout" href="javascript:void(0)">退出</a></span
         >
       </div>
     </div>

src/router/index.js

@@ -61,6 +61,12 @@ const router = createRouter({
       name: 'bookContent',
       component: () => import('@/views/BookContent')
 	   
+    },
+    {
+      path: '/user/setup',
+      name: 'userSetup',
+      component: () => import('@/views/UserSetup')
+	   
     }
   ]
 })

src/views/Book.vue

@@ -155,7 +155,7 @@
                   :key="index"
                 >
                   <div class="user_heads fl" vals="389">
-                    <img :src="man" class="user_head" alt="" /><span
+                    <img :src="item.commentUserPhoto ? uploadImgBaseUrl + item.commentUserPhoto : man"  class="user_head" alt="" /><span
                       class="user_level1"
                       style="display: none"
                       >见习</span
@@ -358,6 +358,7 @@ export default {
       commentContent: "",
       newestComments: {},
       imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
+      uploadImgBaseUrl: process.env.VUE_APP_BASE_UPLOAD_IMG_URL,
       dialogUpdateCommentFormVisible: false,
       commentId: "",
       updateComment: ""

src/views/Register.vue

@@ -148,8 +148,9 @@ export default {
         ElMessage.error("用户名不能为空！");
         return;
       }
-      if (!/^1[3|4|5|6|7|8|9][0-9]{9}/.test(state.username)) {
+      if (!/^1[3-9]\d{9}$/.test(state.username)) {
         ElMessage.error("手机号格式不正确！");
+        return;
       }
       if (!state.password) {
         ElMessage.error("密码不能为空！");

src/views/UserSetup.vue

@@ -0,0 +1,171 @@
+<template>
+  <Header />
+
+  <div class="main box_center cf">
+    <div class="userBox cf">
+      <div class="my_l">
+        <ul class="log_list">
+          <li><a class="link_8 on">账号设置</a></li>
+        </ul>
+      </div>
+      <div class="my_r">
+        <div class="my_info cf">
+          <div class="my_info_txt">
+            <ul class="mytab_list">
+              <li>
+                <i class="tit">我的头像</i>
+                <el-upload
+                  class="avatar-uploader"
+                  :action="baseUrl + '/resource/image'"
+                  :show-file-list="false"
+                  :on-success="handleAvatarSuccess"
+                  :before-upload="beforeAvatarUpload"
+                >
+                  <img
+                    :src="userPhoto ? uploadImgBaseUrl + userPhoto : man"
+                    class="avatar"
+                  />
+                </el-upload>
+                <!--
+                <a style="position: relative">
+                  <img
+                    id="imgLogo"
+                    class="user_img"
+                    alt="我的头像"
+                    :src="userPhoto ? (uploadImgBaseUrl + userPhoto) : man"
+                  />
+                  <input
+                    class="opacity"
+                    onchange="picChange()"
+                    type="file"
+                    id="file0"
+                    name="file"
+                    title="点击上传图片"
+                    style="
+                      z-index: 100;
+                      cursor: pointer;
+                      left: 0px;
+                      top: -25px;
+                      width: 60px;
+                      height: 80px;
+                      opacity: 0;
+                      position: absolute;
+                    "
+                  />
+                </a>-->
+              </li>
+              <li>
+                <i class="tit">我的昵称</i
+                ><a id="my_name"
+                  >{{ nickName
+                  }}<!--<em class="ml10">[修改]</em>--></a
+                >
+              </li>
+              <li style="display: none">
+                <i class="tit">电子邮箱</i><a href="javascript:void(0);"></a>
+              </li>
+              <li>
+                <i class="tit">我的性别</i
+                ><a id="my_sex">男<!--<em class="ml10">[修改]</em>--></a>
+              </li>
+              
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <Footer />
+</template>
+
+<script>
+import "@/assets/styles/user.css";
+import man from "@/assets/images/man.png";
+import { reactive, toRefs, onMounted, ref } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import { Plus } from "@element-plus/icons-vue";
+import { UploadProps } from "element-plus";
+import { getImgVerifyCode } from "@/api/resource";
+import { getUserinfo ,updateUserInfo} from "@/api/user";
+import Header from "@/components/common/Header";
+import Footer from "@/components/common/Footer";
+export default {
+  name: "userSetup",
+  components: {
+    Header,
+    Footer,
+  },
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+
+    const state = reactive({
+      userPhoto: "",
+      nickName: "",
+      baseUrl: process.env.VUE_APP_BASE_API_URL,
+      uploadImgBaseUrl: process.env.VUE_APP_BASE_UPLOAD_IMG_URL,
+    });
+
+    onMounted(async () => {
+      const { data } = await getUserinfo();
+      state.userPhoto = data.userPhoto;
+      state.nickName = data.nickName;
+    });
+
+    const beforeAvatarUpload = (rawFile) => {
+      if (rawFile.type !== "image/jpeg") {
+        ElMessage.error("必须上传 JPG 格式的图片!");
+        return false;
+      } else if (rawFile.size / 1024 / 1024 > 5) {
+        ElMessage.error("图片大小最多 5MB!");
+        return false;
+      }
+      return true;
+    };
+
+    const handleAvatarSuccess = (response, uploadFile) => {
+      state.userPhoto = response.data;
+      updateUserInfo({'userPhoto':state.userPhoto});
+    };
+
+    return {
+      ...toRefs(state),
+      man,
+      beforeAvatarUpload,
+      handleAvatarSuccess
+    };
+  },
+};
+</script>
+
+<style scoped>
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+</style>