vue 美食杰 编辑个人

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

效果图

index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
import {userInfo} from '@/service/api';
import Store from '@/store'


import Home from '@/views/home/Home.vue'
import Login from '@/views/user-login/index.vue'
import Space from '@/views/user-space/space.vue'
import Recipe from '@/views/recipe/recipe.vue'
import Detail from '@/views/detail/detail.vue'
import Edit from '@/views/user-space/edit.vue'
const router = new Router({
    mode:"history",
    routes:[
        {
            path:'/',
            name:"Home",
            title:'首页',
            component:Home
        },
        {
            path:'/edit',
            name:"edit",
            title:'编辑个人',
            component:Edit
        },
        {
            path:'/detail',
            name:"detail",
            title:'详情',
            component:Detail
        },
        {
            path:'/login',
            name:'login',
            title:'登录页',
            component:Login,
            meta:{
                login:true
            },
        },
        {
            path:'/space',
            name:'space',
            title:'我的',
            component:Space,
            meta:{
                login:true
            },
        },
        {
            path:'/recipe',
            name:'recipe',
            title:'菜谱大全',
            component:Recipe,
            meta:{
                login:true
            },
        }
    ]
});

实现跳转：

          <router-link to="/edit" v-show="isOwner">编辑个人资料</router-link>

edit.vue

<template>
  <div class="edit">
    <div class="edit-item">
      <span class="label">修改头像</span>
      <!-- 上传图片-->
      <upload-img
        imgMaxWidth="210"
        //
        action="/api/upload?type=user"
        //传头像
        :imageUrl="avatar"
        @resurl="
          (data) => {
            avatar = data.resImgUrl;
          }
        "
      ></upload-img>
    </div>
    <div class="edit-item">
      <span class="label">修改名称</span>
      <div>
        <el-input v-model="name" class="create-input" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="edit-item">
      <span class="label">个人简介</span>
      <div>
        <el-input
          v-model="sign"
          type="textarea"
          class="create-input"
          placeholder="请输入内容"
        ></el-input>
      </div>
    </div>
    <div>
      <el-button class="send" type="primary" size="medium" @click="save">保存</el-button>
    </div>
  </div>
</template>
<script>
import UploadImg from "@/components/upload-img";
import { userEdit } from "@/service/api";
export default {
  components: { UploadImg },
  data() {
  	//从vuex上拿取的用户数据
    const userInfo = this.$store.state.userInfo;
    return {
      //图片
      avatar: userInfo.avatar,
      //名称
      name: userInfo.name,
      //个人简介
      sign: userInfo.sign,
    };
  },
  methods: {
  	//保存
    async save() {
      await userEdit({ name: this.name, sign: this.sign, avatar: this.avatar }).then(
        (result) => {
          // console.log(result);
          // console.log(result);
          if (result.code === 0) {
            this.$router.push({
              name: "space",
            });
          }
        }
      );
    },
  },
};
</script>
<style lang="stylus">
.edit
  background-color #fff
  padding 10px 0 20px 20px
  .edit-item
    display flex
    margin-bottom 20px
    .label
      margin-right 10px
</style>

upload-img.vue

<template>
  <el-upload
    class="avatar-uploader"
    :action="action"
    :show-file-list="false"
    :before-upload="beforeAvater"
    :on-success="avatarSuccess"
  >
    <img :src="url" :style="{ width: imgMaxWidth + 'px' }" />
  </el-upload>
</template>
<script>
export default {
  props: {
    action: String,
    imageUrl: {
      type: String,
      default: "",
    },
    imgMaxWidth: {
      type: [Number, String],
      default: "auto",
    },
    maxSize: {
      type: String,
      default: 2,
    },
  },
  data() {
    return {
      url: this.imageUrl,
    };
  },
  methods: {
    //上传前
    beforeAvater(file) {
      console.log(file, "beforeAvater");
      const isJPG = file.type === "image/jpeg" || file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 < this.maxSize;
      if (!isJPG) {
        this.$message.error("上传的头像只能是jpeg或gif格式的");
      }
      if (!isLt2M) {
        this.$message.error("上传的图片大小不能超过2M");
      }
      return isJPG && isLt2M;
    },
    // 上传完成后
    avatarSuccess(scr, file) {
      console.log("avatarSuccess", scr, file);
      if (scr.code === 1) {
        this.$message({
          message: scr.mes,
          type: "watning",
        });
        return;
      }

      this.url = URL.createObjectURL(file.raw);
      this.$emit("resurl", {
        // resImgUrl: scr.data.url,
        resImgUrl: this.url,
      });
    },
  },
};
</script>