
1.手机号登录获取登录codelet code onLoad(async () { const res await wx.login() code res.code })获取手机号const onGetphonenumber: UniHelper.ButtonOnGetphonenumber async (ev) { const encryptedData ev.detail.encryptedData! const iv ev.detail.iv! const res await postLoginWxMinAPI({ code, encryptedData, iv }) loginSuccess(res.result) }小程序快捷登录类型声明export type LoginResult { id: number avatar: string account: string nickname?: string mobile: string token: string }2.个人信息渲染头像和昵称import { useMemberStore } from /stores const memberStore useMemberStore()!-- 已登录 -- view classoverview v-ifmemberStore.profile image classavatar :srcmemberStore.profile.avatar modeaspectFill/image view classnickname {{ memberStore.profile.nickname || memberStore.profile.account }} /view /view !-- 未登录 -- view classoverview v-else navigator url/pages/login/login未登录点击登录/navigator /view获取用户信息const profile refProfileDetail() const getMemberProfileData async () { const res await getMemberProfileAPI() profile.value res.result } onLoad(() { getMemberProfileData() })更新头像const onAvatarChange () { uni.chooseMedia({ count: 1, mediaType: [image], success: (res) { const { tempFilePath } res.tempFiles[0] // 小程序端文件上传用 uni.uploadFile不用 axios uni.uploadFile({ url: /member/profile/avatar, name: file, filePath: tempFilePath, success: (res) { if (res.statusCode 200) { const { avatar } JSON.parse(res.data).result profile.value!.avatar avatar // 更新当前页面头像 memberStore.profile!.avatar avatar // 同步更新 Store 头像 uni.showToast({ icon: success, title: 更新成功 }) } }, }) }, }) }更新个人信息const onSubmit async () { const { nickname, gender, birthday, profession } profile.value const res await putMemberProfileAPI({ nickname, gender, birthday, profession, provinceCode: fullLocationCode[0], cityCode: fullLocationCode[1], countyCode: fullLocationCode[2], }) memberStore.profile!.nickname res.result.nickname // 同步更新 Store 昵称 uni.showToast({ icon: success, title: 保存成功 }) setTimeout(() { uni.navigateBack() }, 400)3.地址模块表单数据结构const form ref({ receiver: , // 收货人 contact: , // 联系方式 fullLocation: , // 省市区前端展示用 provinceCode: , // 省份编码后端参数 cityCode: , // 城市编码后端参数 countyCode: , // 区/县编码后端参数 address: , // 详细地址 isDefault: 0, // 默认地址1是 0否 })收集地区数据const onRegionChange: UniHelper.RegionPickerOnChange (ev) { // 省市区(前端展示) form.value.fullLocation ev.detail.value.join( ) // 省市区(后端参数) const [provinceCode, cityCode, countyCode] ev.detail.code! // 合并数据 Object.assign(form.value, { provinceCode, cityCode, countyCode }) }是否是默认收货地址const onSwitchChange: UniHelper.SwitchOnChange (ev) { form.value.isDefault ev.detail.value ? 1 : 0 }表单校验const rules: UniHelper.UniFormsRules { receiver: { rules: [{ required: true, errorMessage: 请输入收货人姓名 }], }, contact: { rules: [ { required: true, errorMessage: 请输入联系方式 }, { pattern: /^1[3-9]\d{9}$/, errorMessage: 手机号格式不正确 }, ], }, fullLocation: { rules: [{ required: true, errorMessage: 请选择所在地区 }], }, address: { rules: [{ required: true, errorMessage: 请选择详细地址 }], }, } const formRef refUniHelper.UniFormsInstance()uni-forms :rulesrules :modelform refformRef uni-forms-item namereceiver classform-item input v-modelform.receiver placeholder请填写收货人姓名 / /uni-forms-item /uni-forms