inleft
2022-02-15 91dc6cdda0548ff7f6e473a81933fa206d912cef
commit | author | age
9bcb19 1 <template>
I 2   <div class="account-settings-info-view">
3     <a-row :gutter="16">
4       <a-col :md="24" :lg="16">
5
6         <a-form layout="vertical" :form="form">
7           <a-form-item
8             label="昵称"
9           >
10             <a-input placeholder="给自己起个昵称吧" v-decorator="['nickName']"/>
11           </a-form-item>
12           <a-form-item
13             label="生日"
14           >
15             <a-date-picker placeholder="请选择生日" @change="onChange" style="width: 100%" v-decorator="['birthday', {rules: [{required: true, message: '请选择生日!'}]}]" />
16           </a-form-item>
17           <a-form-item
18             label="性别"
19           >
20             <a-radio-group v-decorator="['sex',{rules: [{ required: true, message: '请选择性别!' }]}]" >
21               <a-radio v-for="(item,index) in sexData" :key="index" :value="item.code">{{ item.name }}</a-radio>
22             </a-radio-group>
23           </a-form-item>
24           <a-form-item
25             label="手机"
26           >
27             <a-input placeholder="请输入手机号" v-decorator="['phone', {rules: [{required: true, message: '请输入手机号!'}]}]"/>
28           </a-form-item>
29           <a-form-item
30             label="电话"
31           >
32             <a-input placeholder="请输入电话" v-decorator="['tel', {rules: [{required: true, message: '请输入电话!'}]}]"/>
33           </a-form-item>
34           <a-form-item
35             label="电子邮件"
36             :required="false"
37           >
38             <a-input placeholder="请输入电子邮件地址" v-decorator="['email', {type: 'email',message: '请输入正确的邮箱号',rules: [{required: true, message: '请输入正确的邮箱号!'}]}]"/>
39           </a-form-item>
40           <a-form-item>
41             <a-button type="primary" @click="submitUserInfo">更新基本信息</a-button>
42           </a-form-item>
43         </a-form>
44
45       </a-col>
46       <a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
47         <div class="ant-upload-preview" @click="$refs.modal.edit(userInfo.id)" >
48           <a-icon type="cloud-upload-o" class="upload-icon"/>
49           <div class="mask">
50             <a-icon type="plus" />
51           </div>
52           <img :src="option.img"/>
53         </div>
54       </a-col>
55
56     </a-row>
57
58     <avatar-modal ref="modal" @ok="setavatar"/>
59
60   </div>
61 </template>
62
63 <script>
64   import store from '@/store'
65   import AvatarModal from './AvatarModal'
66   import { mapGetters } from 'vuex'
67   import moment from 'moment'
68   import { sysUserUpdateInfo } from '@/api/modular/system/userManage'
69 // mapActions
70 export default {
71   components: {
72     AvatarModal
73   },
74   data () {
75     return {
76       // cropper
77       preview: {},
78       form: this.$form.createForm(this),
79       sexData: [],
80       option: {
81         img: '/avatar2.jpg',
82         info: true,
83         size: 1,
84         outputType: 'jpeg',
85         canScale: false,
86         autoCrop: true,
87         // 只有自动截图开启 宽度高度才生效
88         autoCropWidth: 180,
89         autoCropHeight: 180,
90         fixedBox: true,
91         // 开启宽度和高度比例
92         fixed: true,
93         fixedNumber: [1, 1],
94         // userInfo
95         birthdayString: ''
96       }
97     }
98   },
99   computed: {
100     ...mapGetters(['userInfo'])
101   },
102   mounted () {
103     this.initUserInfo()
104   },
105   methods: {
106     // ...mapActions(['GetInfo']),
107     /**
108      * 初始化用户信息
109      */
110     initUserInfo () {
111       setTimeout(() => {
112         this.form.setFieldsValue(
113           {
114             birthday: moment(this.userInfo.birthday, 'YYYY-MM-DD'),
115             nickName: this.userInfo.nickName,
116             sex: this.userInfo.sex.toString(),
117             email: this.userInfo.email,
118             phone: this.userInfo.phone,
119             tel: this.userInfo.tel
120           }
121         )
122         this.birthdayString = moment(this.userInfo.birthday).format('YYYY-MM-DD')
123         this.option.img = process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/preview?id=' + this.userInfo.avatar
124         this.getSexData()
125       }, 100)
126     },
127     /**
128      * 日期需单独转换
129      */
130     onChange (date, dateString) {
131       this.birthdayString = dateString
132     },
133     submitUserInfo () {
134       const { form: { validateFields } } = this
135       validateFields((err, values) => {
136         if (!err) {
137           values.birthday = this.birthdayString
138           values.id = this.userInfo.id
139           sysUserUpdateInfo(values).then((res) => {
140             if (res.success) {
141               this.$message.success('个人信息更新成功')
142               store.dispatch('GetInfo').then(() => {})
143             } else {
144               this.$message.error(res.message)
145             }
146           })
147         }
148       })
149     },
150     getSexData () {
151       this.sexData = this.$options.filters['dictData']('sex')
152     },
153     setavatar (url) {
154       this.option.img = process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/preview?id=' + url
155       store.dispatch('GetInfo').then(() => {})
156     }
157   }
158 }
159 </script>
160
161 <style lang="less" scoped>
162
163   .avatar-upload-wrapper {
164     height: 200px;
165     width: 100%;
166   }
167
168   .ant-upload-preview {
169     position: relative;
170     margin: 0 auto;
171     width: 100%;
172     max-width: 180px;
173     border-radius: 50%;
174     box-shadow: 0 0 4px #ccc;
175
176     .upload-icon {
177       position: absolute;
178       top: 0;
179       right: 10px;
180       font-size: 1.4rem;
181       padding: 0.5rem;
182       background: rgba(222, 221, 221, 0.7);
183       border-radius: 50%;
184       border: 1px solid rgba(0, 0, 0, 0.2);
185     }
186     .mask {
187       opacity: 0;
188       position: absolute;
189       background: rgba(0,0,0,0.4);
190       cursor: pointer;
191       transition: opacity 0.4s;
192
193       &:hover {
194         opacity: 1;
195       }
196
197       i {
198         font-size: 2rem;
199         position: absolute;
200         top: 50%;
201         left: 50%;
202         margin-left: -1rem;
203         margin-top: -1rem;
204         color: #d6d6d6;
205       }
206     }
207
208     img, .mask {
209       width: 100%;
210       max-width: 180px;
211       height: 100%;
212       border-radius: 50%;
213       overflow: hidden;
214     }
215   }
216 </style>