uniapp.3 - 技术栈

1.手机号登录

获取登录code

javascript 复制代码

let code = ''
onLoad(async () => {
  const res = await wx.login()
  code = res.code
})

获取手机号

javascript 复制代码

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)
}

小程序快捷登录

类型声明

javascript 复制代码

export type LoginResult = {
  id: number
  avatar: string
  account: string
  nickname?: string
  mobile: string
  token: string
}

2.个人信息

渲染头像和昵称

javascript 复制代码

import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()

javascript 复制代码

<!-- 已登录 -->
<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>

获取用户信息

javascript 复制代码

const profile = ref<ProfileDetail>()
const getMemberProfileData = async () => {
  const res = await getMemberProfileAPI()
  profile.value = res.result
}
 
onLoad(() => {
  getMemberProfileData()
})

更新头像

javascript 复制代码

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: '更新成功' })
          }
        },
      })
    },
  })
}

更新个人信息

javascript 复制代码

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.地址模块

表单数据结构

javascript 复制代码

const form = ref({
  receiver: '',      // 收货人
  contact: '',       // 联系方式
  fullLocation: '',  // 省市区（前端展示用）
  provinceCode: '',  // 省份编码（后端参数）
  cityCode: '',      // 城市编码（后端参数）
  countyCode: '',    // 区/县编码（后端参数）
  address: '',       // 详细地址
  isDefault: 0,      // 默认地址：1是 0否
})

收集地区数据

javascript 复制代码

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 })
}

是否是默认收货地址

javascript 复制代码

const onSwitchChange: UniHelper.SwitchOnChange = (ev) => {
  form.value.isDefault = ev.detail.value ? 1 : 0
}

表单校验

javascript 复制代码

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>()

javascript 复制代码

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