quanwei
18 hours ago c441dea81bd86bdfb12dff35821fed51f4cc91c2
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
<template>
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="200px">
      <!--店员修改-->
      <div class="common-form">会员编辑</div>
      <el-form-item label="昵称" prop="nickName">
        <el-input class="max-w460" v-model="form.nickName" placeholder="请输入昵称"></el-input>
      </el-form-item>
      <el-form-item label="头像">
        <el-row>
          <el-button icon="el-icon-picture-outline" @click="openUpload('avatarUrl')">选择图片</el-button>
          <div v-if="form.avatarUrl!=''" class="img">
            <img :src="form.avatarUrl" width="100" height="100" />
          </div>
        </el-row>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.gender">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="0">女</el-radio>
          <el-radio :label="2">保密</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input class="max-w460" v-model="form.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
      </div>
    </el-form>
    <!--上传图片组件-->
    <Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
  </div>
</template>
 
<script>
  import UserApi from '@/api/user.js';
  import Upload from '@/components/file/Upload';
  import {
    formatModel
  } from '@/utils/base.js'
  export default {
    components: {
      /*上传组件*/
      Upload,
    },
    data() {
      return {
        form: {
          user_id: 0,
          nickName: '',
          avatarUrl: '',
          gender: '',
          mobile: '',
        },
        loading: false,
        /*是否上传图片*/
        isupload: false,
      };
    },
    created() {
      this.form.user_id = this.$route.query.user_id;
      this.getParams()
    },
 
    methods: {
      getParams() {
        let self = this;
        // 取到路由带过来的参数
        UserApi.getuser({
            user_id: self.form.user_id
          }, true)
          .then(data => {
            // 将数据放在当前组件的数据内
            self.form = formatModel(self.form, data.data.model);
          })
          .catch(error => {
 
          });
 
      },
      onSubmit() {
        let self = this;
        let form = self.form;
        self.$refs.form.validate((valid) => {
          if (valid) {
            self.loading = true;
            UserApi.edituser(form, true)
              .then(data => {
                self.$message({
                  message: '恭喜你,修改成功',
                  type: 'success'
                });
                self.$router.push('/user/user/index');
              })
              .catch(error => {
                self.loading = false;
              });
          }
        });
      },
      /*上传*/
      openUpload(e) {
        this.type = e;
        this.isupload = true;
      },
      /*获取图片*/
      returnImgsFunc(e) {
        if (e != null && e.length > 0) {
          if (this.type == 'avatarUrl') {
            this.form.avatarUrl = e[0].file_path;
          }
        }
        this.isupload = false;
      },
      /*取消*/
      cancelFunc() {
        this.$router.back(-1);
      },
 
    }
 
  };
</script>
 
<style lang="scss" scoped>
  .basic-setting-content {}
 
  .product-add {
    padding-bottom: 50px;
  }
</style>