vue之个人中心编辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<template>
  <div>
    <div class="edit-item" @click="itemClcik">
      <span>{{ left }}</span>
      <span>
        <slot name="right">{{ right }}</slot>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "editUser",
  props: ["left", "right"],
  data() {
    return {};
  },
  methods: {
    itemClcik() {
      //点击的 时候 触发父元素的事件
      this.$emit("itemClcik");
    }
  },
  components: {}
};
</script>
<style  lang="scss" scoped>
.edit-item {
  padding: 15px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;

  // span{

  // }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<template>
  <div v-if="selectUser">
    <nav-bar></nav-bar>
    <div class="upload_box">
      <van-uploader preview-size="100vw" class="upload_img" :after-read="afterRead" />
      <edit-item left="头像">
        <img v-if="selectUser.user_img" :src="selectUser.user_img" />
        <img v-else class="touxian" slot="right" src="@/assets/default_img.jpg" />
      </edit-item>
    </div>
    <edit-item left="昵称" @itemClcik="show = true">
      <a href="###" slot="right">{{ selectUser.name }}</a>
    </edit-item>
    <edit-item left="UID">
      <span slot="right">{{ selectUser.id }}</span>
    </edit-item>
    <edit-item left="性别" @itemClcik="genderShow = true">
      <span slot="right">{{ selectUser.gender }}</span>
    </edit-item>
    <edit-item left="个性签名" @itemClcik="textShow = true">
      <span slot="right">{{ selectUser.user_desc }}</span>
    </edit-item>

    <button class="goback" @click="$router.push('/userinfo')">返回个人中心</button>

    <!-- 修改昵称的 弹出 -->
    <van-dialog
      v-model="show"
      title="昵称"
      show-cancel-button
      @confirm="confirmClick"
      @cancel="cancelClick"
    >
      <van-field v-model="content" />
    </van-dialog>

    <!-- 修改性别 -->
    <van-action-sheet v-model="genderShow" :actions="actions" @select="onSelect" cancel-text="取消" />

    <!-- 修改个性的 弹出 -->
    <van-dialog
      v-model="textShow"
      title="个性签名"
      show-cancel-button
      @confirm="confirmTextClick"
      @cancel="cancelClick"
    >
      <van-field v-model="content" type="textarea" />
    </van-dialog>
  </div>
</template>

<script>
import Vue from "vue";
import { Uploader, ActionSheet } from "vant";

Vue.use(ActionSheet);
Vue.use(Uploader);
import NavBar from "../../components/comtent/NavBar";
import EditItem from "../../components/comtent/EditItem";
export default {
  name: "UserEdits",
  data() {
    return {
      //当前用户信息
      selectUser: {},
      //是否显示 弹出窗
      show: false,
      textShow: false,
      genderShow: false,
      //表单的数据
      content: "",
      actions: [
        { name: "男", val: 0 },
        { name: "女", val: 1 }
      ]
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    //根据 id 拿到当前的用户信息
    async getUserInfo() {
      const id = localStorage.getItem("id");
      const { data } = await this.$request.get("/user/" + id);
      // console.log("编辑的res", data, data[0]);
      this.selectUser = data[0];
    },
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      //图片上传的 时候 需要 定义一个 fromDate对象 然后往里面传入 要更新的头像
      const fromdata = new FormData();
      fromdata.append("file", file.file); // file.file 才是具体的图片文件
      //然后把图片 向后端传入数据
      const { data } = await this.$request.post("/upload", fromdata);
      console.log("data", data, data.url);
      // 然后 把img的url路径更改为 后端返回的路径
      this.selectUser.user_img = data.url;
      this.userUpdata();
    },
    //更新用户信息 上传头像后
    async userUpdata() {
      const id = localStorage.getItem("id");
      const res = await this.$request.post("/update/" + id, this.selectUser);
      console.log("更新res", res);
    },
    //显示 要编辑的
    async showEdit() {
      this.show = true;
    },
    //点击 修改昵称 确认按钮的时候
    confirmClick() {
      this.selectUser.name = this.content;
      this.userUpdata();
      this.content = "";
    },
    // 修改个性签名的 确认按钮
    confirmTextClick() {
      this.selectUser.user_desc = this.content;
      // console.log("更新res2", this.selectUser);
      this.userUpdata();
      this.content = "";
    },
    //点击取消按钮
    cancelClick() {
      this.content = "";
    },
    //修改性别
    onSelect(item) {
      console.log("修改", item);
      this.selectUser.gender = item.name;
      this.userUpdata();
      this.genderShow = false;
    }
  },
  components: {
    NavBar,
    EditItem
  }
};
</script>
<style  lang="scss" scoped>
.upload_box {
  position: relative;
  overflow: hidden;

  .upload_img {
    opacity: 0;
    position: absolute;
  }
}
.touxian {
  width: 0.3rem;
  height: 0.3rem;
}
.goback {
  width: 100%;
  height: 0.4rem;
}
</style>