Commit 4af920f00367a1ea3846b0dcb3afc9896bc50b4c

Authored by ww
1 parent 5f23a4ae

fix: personal info not update on checkout user

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,
... ...