Commit 4af920f00367a1ea3846b0dcb3afc9896bc50b4c
1 parent
5f23a4ae
fix: personal info not update on checkout user
Showing
2 changed files
with
53 additions
and
102 deletions
1 | 1 | <template> |
2 | 2 | <BasicModal |
3 | 3 | width="80%" |
4 | - :height="compHeight" | |
5 | 4 | v-bind="$attrs" |
6 | 5 | @register="registerModal" |
7 | 6 | @ok="handleSubmit" |
... | ... | @@ -19,13 +18,13 @@ |
19 | 18 | list-type="picture-card" |
20 | 19 | class="round !flex justify-center items-center" |
21 | 20 | :show-upload-list="false" |
22 | - :customRequest="customUploadqrcodePic" | |
23 | - :before-upload="beforeUploadqrcodePic" | |
21 | + :customRequest="customUpload" | |
22 | + :before-upload="beforeUpload" | |
24 | 23 | > |
25 | 24 | <img |
26 | 25 | class="round" |
27 | - v-if="peresonalPic || headerImg" | |
28 | - :src="peresonalPic || headerImg" | |
26 | + v-if="personalPicture || headerImg" | |
27 | + :src="personalPicture || headerImg" | |
29 | 28 | alt="avatar" |
30 | 29 | /> |
31 | 30 | <div v-else> |
... | ... | @@ -38,13 +37,7 @@ |
38 | 37 | </div> |
39 | 38 | </div> |
40 | 39 | |
41 | - <Description | |
42 | - class="mt-8 p-4" | |
43 | - :column="1" | |
44 | - :bordered="true" | |
45 | - :data="getPersonalDetailValue" | |
46 | - :schema="schema" | |
47 | - /> | |
40 | + <Description @register="registerDesc" class="mt-8 p-4" /> | |
48 | 41 | </div> |
49 | 42 | <div class="ml-4 border border-gray-200"> |
50 | 43 | <div class="text-lg p-2 border border-gray-200"> 基本资料 </div> |
... | ... | @@ -56,21 +49,22 @@ |
56 | 49 | </BasicModal> |
57 | 50 | </template> |
58 | 51 | <script lang="ts"> |
59 | - import { defineComponent, ref, computed } from 'vue'; | |
52 | + import { defineComponent, ref, unref } from 'vue'; | |
60 | 53 | import { BasicModal, useModalInner } from '/@/components/Modal/index'; |
61 | 54 | import { BasicForm, useForm } from '/@/components/Form/index'; |
62 | 55 | import { formSchema } from './config'; |
63 | - import { Description, DescItem } from '/@/components/Description/index'; | |
56 | + import { Description, DescItem, useDescription } from '/@/components/Description/index'; | |
64 | 57 | import { uploadApi, personalPut } from '/@/api/personal/index'; |
65 | 58 | import { useMessage } from '/@/hooks/web/useMessage'; |
66 | - import { USER_INFO_KEY } from '/@/enums/cacheEnum'; | |
67 | - import { getAuthCache } from '/@/utils/auth'; | |
68 | 59 | import { Upload } from 'ant-design-vue'; |
69 | 60 | import { PlusOutlined } from '@ant-design/icons-vue'; |
70 | 61 | import { useUserStore } from '/@/store/modules/user'; |
71 | 62 | import type { FileItem } from '/@/components/Upload/src/typing'; |
72 | 63 | import { LoadingOutlined } from '@ant-design/icons-vue'; |
73 | 64 | import headerImg from '/@/assets/images/logo.png'; |
65 | + import { getMyInfo } from '/@/api/sys/user'; | |
66 | + import { UserInfoModel } from '/@/api/sys/model/userModel'; | |
67 | + import { UserInfo } from '/#/store'; | |
74 | 68 | |
75 | 69 | const schema: DescItem[] = [ |
76 | 70 | { |
... | ... | @@ -98,46 +92,41 @@ |
98 | 92 | label: '创建时间:', |
99 | 93 | }, |
100 | 94 | ]; |
101 | - const mockData: Recordable = { | |
102 | - username: 'test', | |
103 | - phoneNumber: 'VB', | |
104 | - email: '123', | |
105 | - realName: '15695909xxx', | |
106 | - accountExpireTime: '190848757@qq.com', | |
107 | - createTime: '厦门市思明区', | |
108 | - }; | |
95 | + | |
109 | 96 | export default defineComponent({ |
110 | 97 | name: 'Index', |
111 | 98 | components: { BasicModal, BasicForm, Description, Upload, PlusOutlined, LoadingOutlined }, |
112 | - emits: ['refreshPersonl', 'register'], | |
99 | + emits: ['refreshPersonal', 'register'], | |
113 | 100 | setup(_, { emit }) { |
114 | 101 | const loading = ref(false); |
115 | - const userInfo = getAuthCache(USER_INFO_KEY); | |
116 | 102 | const { createMessage } = useMessage(); |
117 | - const getPersonalValue: any = ref({}); | |
118 | - const getPersonalDetailValue: any = ref({}); | |
119 | - const updatePersonalData: any = ref({}); | |
120 | - const getBackendV: any = ref({}); | |
121 | - const getData: any = ref({}); | |
122 | - const updataPersonlData: any = ref({}); | |
103 | + | |
123 | 104 | const userStore = useUserStore(); |
124 | - const peresonalPic = ref(); | |
105 | + const personalPicture = ref<string>(); | |
106 | + | |
107 | + const personalInfo = ref<UserInfoModel>(); | |
125 | 108 | |
126 | - const customUploadqrcodePic = async ({ file }) => { | |
127 | - if (beforeUploadqrcodePic(file)) { | |
128 | - peresonalPic.value = ''; | |
109 | + const [registerDesc, { setDescProps }] = useDescription({ | |
110 | + schema, | |
111 | + column: 1, | |
112 | + bordered: true, | |
113 | + }); | |
114 | + | |
115 | + const customUpload = async ({ file }) => { | |
116 | + if (beforeUpload(file)) { | |
117 | + personalPicture.value = ''; | |
129 | 118 | loading.value = true; |
130 | 119 | const formData = new FormData(); |
131 | 120 | formData.append('file', file); |
132 | 121 | const response = await uploadApi(formData); |
133 | 122 | if (response.fileStaticUri) { |
134 | - peresonalPic.value = response.fileStaticUri; | |
123 | + personalPicture.value = response.fileStaticUri; | |
135 | 124 | loading.value = false; |
136 | 125 | } |
137 | 126 | } |
138 | 127 | }; |
139 | 128 | |
140 | - const beforeUploadqrcodePic = (file: FileItem) => { | |
129 | + const beforeUpload = (file: FileItem) => { | |
141 | 130 | const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; |
142 | 131 | if (!isJpgOrPng) { |
143 | 132 | createMessage.error('只能上传图片文件!'); |
... | ... | @@ -153,79 +142,41 @@ |
153 | 142 | showActionButtonGroup: false, |
154 | 143 | schemas: formSchema, |
155 | 144 | }); |
156 | - const refreshCacheGetData = () => { | |
157 | - const getItem = window.localStorage.getItem('updateUserInfo'); | |
158 | - const newItem = JSON.parse(getItem); | |
159 | - updataPersonlData.value = newItem; | |
160 | - }; | |
145 | + | |
161 | 146 | const [registerModal, { closeModal }] = useModalInner(async () => { |
162 | - refreshCacheGetData(); | |
163 | - const userInfo = userStore.getUserInfo; | |
164 | - try { | |
165 | - if (updataPersonlData.value != null) { | |
166 | - (peresonalPic.value = updataPersonlData.value.avatar), | |
167 | - setFieldsValue({ | |
168 | - realName: updataPersonlData.value.realName, | |
169 | - phoneNumber: updataPersonlData.value.phoneNumber, | |
170 | - email: updataPersonlData.value.email, | |
171 | - }); | |
172 | - getPersonalDetailValue.value = userInfo; | |
173 | - } else { | |
174 | - if (userInfo) { | |
175 | - getPersonalDetailValue.value = userInfo; | |
176 | - peresonalPic.value = userInfo.avatar; | |
177 | - setFieldsValue({ | |
178 | - realName: userInfo.realName, | |
179 | - phoneNumber: userInfo.phoneNumber, | |
180 | - email: userInfo.email, | |
181 | - }); | |
182 | - } | |
183 | - } | |
184 | - } catch (e) { | |
185 | - return e; | |
186 | - } | |
187 | - if (Object.keys(updatePersonalData.value).length != 0) { | |
188 | - getPersonalDetailValue.value = updatePersonalData.value; | |
189 | - peresonalPic.value = updatePersonalData.value.avatar; | |
190 | - setFieldsValue({ | |
191 | - realName: updatePersonalData.value.realName, | |
192 | - phoneNumber: updatePersonalData.value.phoneNumber, | |
193 | - email: updatePersonalData.value.email, | |
194 | - }); | |
195 | - } | |
147 | + const info = await getMyInfo(); | |
148 | + personalInfo.value = info; | |
149 | + personalPicture.value = info.avatar; | |
150 | + setFieldsValue(info); | |
151 | + setDescProps({ data: info }); | |
196 | 152 | }); |
153 | + | |
197 | 154 | const handleSubmit = async () => { |
198 | - const getUserInfo = await userInfo; | |
199 | - getPersonalValue.value = await validate(); | |
200 | - getPersonalValue.value.id = getUserInfo.userId; | |
201 | - getPersonalValue.value.username = getBackendV.value.username; | |
202 | - getPersonalValue.value.avatar = peresonalPic.value; | |
203 | - getData.value = await personalPut(getPersonalValue.value); | |
204 | - console.log(getData.value.realName); | |
205 | - userStore.setUserInfo(getData.value); | |
206 | - updatePersonalData.value = getData.value; | |
155 | + const value = await validate(); | |
156 | + const userInfo = userStore.getUserInfo; | |
157 | + const record = await personalPut({ | |
158 | + ...value, | |
159 | + id: userInfo.userId, | |
160 | + avatar: unref(personalPicture), | |
161 | + }); | |
162 | + | |
163 | + userStore.setUserInfo(record as unknown as UserInfo); | |
207 | 164 | createMessage.success('修改成功'); |
208 | - const setUpdateUserInfo = JSON.stringify(getData.value); | |
209 | - window.localStorage.setItem('updateUserInfo', setUpdateUserInfo); | |
210 | 165 | closeModal(); |
211 | 166 | resetFields(); |
212 | - emit('refreshPersonl', updatePersonalData.value); | |
167 | + emit('refreshPersonal', record); | |
213 | 168 | }; |
214 | - const compHeight = computed(() => { | |
215 | - return 1000; | |
216 | - }); | |
169 | + | |
217 | 170 | return { |
218 | - peresonalPic, | |
219 | - beforeUploadqrcodePic, | |
220 | - customUploadqrcodePic, | |
221 | - compHeight, | |
171 | + personalInfo, | |
172 | + registerDesc, | |
173 | + personalPicture, | |
174 | + beforeUpload, | |
175 | + customUpload, | |
222 | 176 | handleSubmit, |
223 | - getPersonalDetailValue, | |
224 | - schema, | |
225 | 177 | registerModal, |
226 | 178 | registerForm, |
227 | 179 | loading, |
228 | - mockData, | |
229 | 180 | headerImg, |
230 | 181 | }; |
231 | 182 | }, | ... | ... |
... | ... | @@ -53,7 +53,7 @@ |
53 | 53 | </Dropdown> |
54 | 54 | <LockAction @register="register" /> |
55 | 55 | <PersonalChild |
56 | - @refreshPersonl="refreshPersonlFunc" | |
56 | + @refreshPersonal="refreshPersonalFunc" | |
57 | 57 | ref="personalRef" |
58 | 58 | @register="registerPersonal" |
59 | 59 | /> |
... | ... | @@ -156,7 +156,7 @@ |
156 | 156 | }; |
157 | 157 | refreshCacheGetData(); |
158 | 158 | |
159 | - const refreshPersonlFunc = (v) => { | |
159 | + const refreshPersonalFunc = (v) => { | |
160 | 160 | refreshPersonlData.avatar = v.avatar; |
161 | 161 | refreshPersonlData.realName = v.realName; |
162 | 162 | }; |
... | ... | @@ -168,7 +168,7 @@ |
168 | 168 | return { |
169 | 169 | updataPersonlData, |
170 | 170 | refreshPersonlData, |
171 | - refreshPersonlFunc, | |
171 | + refreshPersonalFunc, | |
172 | 172 | personalRef, |
173 | 173 | registerPersonal, |
174 | 174 | openPersonalFunc, | ... | ... |