uniapp.3

1.手机号登录

获取登录code

let 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 class="overview" v-if="memberStore.profile"> <image class="avatar" :src="memberStore.profile.avatar" mode="aspectFill"></image> <view class="nickname"> {{ memberStore.profile.nickname || memberStore.profile.account }} </view> </view> <!-- 未登录 --> <view class="overview" v-else> <navigator url="/pages/login/login">未登录，点击登录</navigator> </view>

获取用户信息

const profile = ref<ProfileDetail>() 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 = ref<UniHelper.UniFormsInstance>()

<uni-forms :rules="rules" :model="form" ref="formRef"> <uni-forms-item name="receiver" class="form-item"> <input v-model="form.receiver" placeholder="请填写收货人姓名" /> </uni-forms-item> </uni-forms>