| | |
| | | <div class="rowTitle">手机号</div> |
| | | <u-input input-align="right" v-model="userInfo.phone" type="number" placeholder="请输入手机号" |
| | | class="input-item" /> |
| | | |
| | | |
| | | </div> |
| | | <div class="orderRow"> |
| | | <div class="rowTitle">邮箱</div> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {getEnvObj, getWebViewUrl} from "@/utils/index.js"; |
| | | import { |
| | | getEnvObj, |
| | | getWebViewUrl |
| | | } from "@/utils/index.js"; |
| | | import { |
| | | getUserInfo, |
| | | updateInfo, |
| | | updatePassword |
| | | } from '@/api/user/index.js'; |
| | | import {useUserStore} from "@/store/index.js"; |
| | | import { |
| | | useUserStore |
| | | } from "@/store/index.js"; |
| | | const userInfo = ref({ |
| | | id: '', |
| | | avatar: '', |
| | |
| | | if (!phone) return true |
| | | const phoneRegex = /^1[3-9]\d{9}$/ |
| | | if (!phoneRegex.test(phone)) { |
| | | |
| | | |
| | | uni.showToast({ |
| | | title: '请输入正确的手机号码', |
| | | icon: 'none', |
| | |
| | | } |
| | | // 校验邮箱 |
| | | const validateEmail = () => { |
| | | if (!userInfo.value.email) return true |
| | | if (!userInfo.value.email) return true |
| | | const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/ |
| | | if (!emailRegex.test(userInfo.value.email)) { |
| | | |
| | | |
| | | uni.showToast({ |
| | | title: '请输入正确的邮箱地址', |
| | | icon: 'none', |
| | |
| | | getUserInfoData(); |
| | | }; |
| | | |
| | | const {VITE_API_BASE_URL} = getEnvObj() |
| | | const { |
| | | VITE_API_BASE_URL |
| | | } = getEnvObj() |
| | | |
| | | function uploadUtil(options) { |
| | | const {formData, file, url} = options |
| | | |
| | | return new Promise((resolve, reject) => { |
| | | let accessToken = useUserStore()?.$state?.userInfo?.access_token; |
| | | |
| | | uni.uploadFile({ |
| | | url: `${VITE_API_BASE_URL}${url}`, |
| | | name: 'file', |
| | | header: {'Blade-Auth': 'bearer ' + accessToken}, |
| | | file, |
| | | formData, |
| | | success: (res) => { |
| | | const resData = JSON.parse(res.data) |
| | | if (resData.code === 200 || resData.code === 0) { |
| | | resolve(res) |
| | | } else { |
| | | showToast(resData.message) |
| | | |
| | | reject(res) |
| | | } |
| | | }, |
| | | fail: (err) => { |
| | | reject(err) |
| | | } |
| | | }); |
| | | }) |
| | | const { |
| | | formData, |
| | | filePath, |
| | | url |
| | | } = options; |
| | | |
| | | return new Promise((resolve, reject) => { |
| | | let accessToken = useUserStore()?.$state?.userInfo?.access_token; |
| | | |
| | | uni.uploadFile({ |
| | | url: `${VITE_API_BASE_URL}${url}`, |
| | | name: 'file', |
| | | header: { |
| | | 'Blade-Auth': 'bearer ' + accessToken |
| | | }, |
| | | filePath: filePath, |
| | | formData, |
| | | success: (res) => { |
| | | const resData = JSON.parse(res.data) |
| | | if (resData.code === 200 || resData.code === 0) { |
| | | resolve(res) |
| | | } else { |
| | | showToast(resData.message) |
| | | |
| | | reject(res) |
| | | } |
| | | }, |
| | | fail: (err) => { |
| | | reject(err) |
| | | } |
| | | }); |
| | | }) |
| | | } |
| | | const uploadAvatar = () => { |
| | | uni.chooseImage({ |
| | | count: 1, |
| | | success: (res) => { |
| | | const tempFilePaths = res.tempFiles[0]; |
| | | // 显示加载中 |
| | | uni.showLoading({ |
| | | title: '上传中...' |
| | | }); |
| | | |
| | | // 上传文件 |
| | | uploadUtil({ |
| | | file: tempFilePaths, |
| | | formData: { |
| | | fileName: tempFilePaths.name, |
| | | sn: 'avatar_upload' |
| | | }, |
| | | url: '/blade-resource/oss/endpoint/put-file' |
| | | }).then(res => { |
| | | const resData = JSON.parse(res.data); |
| | | if (resData.code === 200 || resData.code === 0) { |
| | | // 更新头像显示 |
| | | userInfo.value.avatar = resData.data.link || resData.data.url; |
| | | uni.hideLoading(); |
| | | uni.showToast({ |
| | | title: '头像上传成功', |
| | | icon: 'success' |
| | | }); |
| | | } else { |
| | | throw new Error(resData.message || '上传失败'); |
| | | |
| | | } |
| | | }).catch(err => { |
| | | uni.hideLoading(); |
| | | uni.showToast({ |
| | | title: err.message || '上传失败', |
| | | icon: 'none' |
| | | }); |
| | | }); |
| | | } |
| | | }); |
| | | uni.chooseImage({ |
| | | count: 1, |
| | | success: (res) => { |
| | | const tempFile = res.tempFiles[0]; // 获取文件对象 |
| | | const filePath = tempFile.path || tempFile.tempFilePath; |
| | | if (!filePath) { |
| | | uni.showToast({ |
| | | title: '获取文件路径失败', |
| | | icon: 'none' |
| | | }); |
| | | return; |
| | | } |
| | | let fileName = tempFile.name; |
| | | if (!fileName) { |
| | | const pathWithoutProtocol = filePath.replace(/^file:\/\//, ''); |
| | | fileName = pathWithoutProtocol.split('/').pop() || 'unknown.png'; |
| | | } |
| | | |
| | | // 显示加载中 |
| | | uni.showLoading({ |
| | | title: '上传中...' |
| | | }); |
| | | |
| | | // 上传文件 |
| | | uploadUtil({ |
| | | filePath: filePath, |
| | | formData: { |
| | | fileName: fileName, |
| | | sn: 'avatar_upload' |
| | | }, |
| | | url: '/blade-resource/oss/endpoint/put-file' |
| | | }).then(res => { |
| | | const resData = JSON.parse(res.data); |
| | | if (resData.code === 200 || resData.code === 0) { |
| | | // 更新头像显示 |
| | | userInfo.value.avatar = resData.data.link || resData.data.url; |
| | | uni.hideLoading(); |
| | | uni.showToast({ |
| | | title: '头像上传成功', |
| | | icon: 'success' |
| | | }); |
| | | } else { |
| | | throw new Error(resData.message || '上传失败'); |
| | | |
| | | } |
| | | }).catch(err => { |
| | | uni.hideLoading(); |
| | | uni.showToast({ |
| | | title: err.message || '上传失败', |
| | | icon: 'none' |
| | | }); |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | const submit = () => { |
| | | if (!validatePhone() || !validateEmail()) return |
| | |
| | | icon: 'none', |
| | | duration: 2000 |
| | | }); |
| | | getUserInfoData() |
| | | |
| | | } else { |
| | | uni.showToast({ |
| | |
| | | icon: 'none', |
| | | duration: 2000 |
| | | }); |
| | | getUserInfoData() |
| | | } |
| | | |
| | | |
| | | }); |
| | | getUserInfoData() |
| | | |
| | | }; |
| | | onShow(async () => { |
| | | getUserInfoData() |
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | .container { |
| | | width: 100%; |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | |
| | | |
| | | } |
| | | |
| | | .avatarBox { |
| | | width: 228rpx; |
| | | height: 228rpx; |
| | | margin:76rpx 0; |
| | | margin: 76rpx 0; |
| | | } |
| | | |
| | | .detailBox { |
| | |
| | | background: #FFFFFF; |
| | | border-radius: 12rpx; |
| | | box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
| | | |
| | | .detailCon { |
| | | padding: 0 24rpx; |
| | | } |
| | | |
| | | .orderRow { |
| | | display: flex; |
| | | justify-content: space-between; |
| | |
| | | height: 96rpx; |
| | | border-bottom: 2rpx solid #f5f5f5; |
| | | color: #7b7b7b; |
| | | |
| | | |
| | | .rowTitle { |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | |
| | | color: #222324; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | ::v-deep .u-input { |
| | | border: none !important; |
| | | background: transparent !important; |
| | |
| | | .btngroup { |
| | | display: flex; |
| | | position: absolute; |
| | | bottom:150rpx; |
| | | bottom: 150rpx; |
| | | } |
| | | .u-button:first-child{ |
| | | |
| | | .u-button:first-child { |
| | | margin-right: 30rpx; |
| | | } |
| | | |
| | | |
| | | .custom-style { |
| | | width: 276rpx; |
| | | height: 76rpx; |