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