7.小兔鲜儿 - 用户模块

在用户登录/注册成功后，展示会员信息，更新会员信息。

会员中心页(我的)

主要实现两部分业务：

1. 渲染当前登录会员的昵称和头像，从 Store 中获取。
2. 猜你喜欢分页加载，可封装成组合式函数实现复用逻辑。

静态结构

会员中心页，替换掉原本的练习代码。

// src/pages/my/my.vue<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 订单选项
const orderTypes = [{ type: 1, text: '待付款', icon: 'icon-currency' },{ type: 2, text: '待发货', icon: 'icon-gift' },{ type: 3, text: '待收货', icon: 'icon-check' },{ type: 4, text: '待评价', icon: 'icon-comment' },
]
</script><template><scroll-view class="viewport" scroll-y enable-back-to-top><!-- 个人资料 --><view class="profile" :style="{ paddingTop: safeAreaInsets!.top + 'px' }"><!-- 情况1：已登录 --><view class="overview" v-if="false"><navigator url="/pagesMember/profile/profile" hover-class="none"><imageclass="avatar"mode="aspectFill"src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/avatar_3.jpg"></image></navigator><view class="meta"><view class="nickname"> 黑马程序员 </view><navigator class="extra" url="/pagesMember/profile/profile" hover-class="none"><text class="update">更新头像昵称</text></navigator></view></view><!-- 情况2：未登录 --><view class="overview" v-else><navigator url="/pages/login/login" hover-class="none"><imageclass="avatar gray"mode="aspectFill"src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png"></image></navigator><view class="meta"><navigator url="/pages/login/login" hover-class="none" class="nickname">未登录</navigator><view class="extra"><text class="tips">点击登录账号</text></view></view></view><navigator class="settings" url="/pagesMember/settings/settings" hover-class="none">设置</navigator></view><!-- 我的订单 --><view class="orders"><view class="title">我的订单<navigator class="navigator" url="/pagesOrder/list/list?type=0" hover-class="none">查看全部订单<text class="icon-right"></text></navigator></view><view class="section"><!-- 订单 --><navigatorv-for="item in orderTypes":key="item.type":class="item.icon":url="`/pagesOrder/list/list?type=${item.type}`"class="navigator"hover-class="none">{{ item.text }}</navigator><!-- 客服 --><button class="contact icon-handset" open-type="contact">售后</button></view></view><!-- 猜你喜欢 --><view class="guess"><XtxGuess ref="guessRef" /></view></scroll-view>
</template><style lang="scss">
page {height: 100%;overflow: hidden;background-color: #f7f7f8;
}.viewport {height: 100%;background-repeat: no-repeat;background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/center_bg.png);background-size: 100% auto;
}/* 用户信息 */
.profile {margin-top: 20rpx;position: relative;.overview {display: flex;height: 120rpx;padding: 0 36rpx;color: #fff;}.avatar {width: 120rpx;height: 120rpx;border-radius: 50%;background-color: #eee;}.gray {filter: grayscale(100%);}.meta {display: flex;flex-direction: column;justify-content: center;align-items: flex-start;line-height: 30rpx;padding: 16rpx 0;margin-left: 20rpx;}.nickname {max-width: 350rpx;margin-bottom: 16rpx;font-size: 30rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.extra {display: flex;font-size: 20rpx;}.tips {font-size: 22rpx;}.update {padding: 3rpx 10rpx 1rpx;color: rgba(255, 255, 255, 0.8);border: 1rpx solid rgba(255, 255, 255, 0.8);margin-right: 10rpx;border-radius: 30rpx;}.settings {position: absolute;bottom: 0;right: 40rpx;font-size: 30rpx;color: #fff;}
}/* 我的订单 */
.orders {position: relative;z-index: 99;padding: 30rpx;margin: 50rpx 20rpx 0;background-color: #fff;border-radius: 10rpx;box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);.title {height: 40rpx;line-height: 40rpx;font-size: 28rpx;color: #1e1e1e;.navigator {font-size: 24rpx;color: #939393;float: right;}}.section {width: 100%;display: flex;justify-content: space-between;padding: 40rpx 20rpx 10rpx;.navigator,.contact {text-align: center;font-size: 24rpx;color: #333;&::before {display: block;font-size: 60rpx;color: #ff9545;}}.contact {padding: 0;margin: 0;border: 0;background-color: transparent;line-height: inherit;}}
}/* 猜你喜欢 */
.guess {background-color: #f7f7f8;margin-top: 20rpx;
}
</style>

参考代码

封装猜你喜欢组合式函数

// src/composables/index.tsimport type { XtxGuessInstance } from '@/types/components'
import { ref } from 'vue'/*** 猜你喜欢组合式函数*/
export const useGuessList = () => {// 获取猜你喜欢组件实例const guessRef = ref<XtxGuessInstance>()// 滚动触底事件const onScrolltolower = () => {guessRef.value?.getMore()}// 返回 ref 和事件处理函数return { guessRef, onScrolltolower }
}

会员中心页(我的)：渲染用户头像，昵称，完善猜你喜欢分页加载。

// src/pages/my/my.vue<script setup lang="ts">
import { useMemberStore } from '@/stores'// 获取会员信息
const memberStore = useMemberStore() // [!code ++]// 猜你喜欢组合式函数
const { guessRef, onScrolltolower } = useGuessList() // [!code ++]
</script><template><scroll-view class="viewport" scroll-y enable-back-to-top @scrolltolower="onScrolltolower"><!-- 个人资料 --><view class="profile" :style="{ paddingTop: safeAreaInsets!.top + 'px' }"><!-- 情况1：已登录 --><view class="overview" v-if="memberStore.profile"><navigator url="/pagesMember/profile/profile" hover-class="none"><image class="avatar" :src="memberStore.profile.avatar" mode="aspectFill"></image></navigator><view class="meta"><view class="nickname">{{ memberStore.profile.nickname || memberStore.profile.account }}</view><navigator class="extra" url="/pagesMember/profile/profile" hover-class="none"><text class="update">更新头像昵称</text></navigator></view></view><!-- 情况2：未登录 --><view class="overview" v-else> ...省略 </view></view><!-- 猜你喜欢 --><view class="guess"><XtxGuess ref="guessRef" /></view></scroll-view>
</template>

会员设置页

会员模块的二级页面，按模块处理成分包页面，有以下好处：

1. 按模块管理页面，方便项目维护。
2. 减少主包体积，用到的时候再加载分包，属于性能优化解决方案。

::: tip 温馨提示

通过 VS Code 插件 uni-create-view 可以快速新建分包页面，自动配置分包路由。

:::

分包预下载

当用户进入【我的】页面时，由框架自动预下载【会员模块】的分包，提升进入后续分包页面时的启动速度。

// src/pages.json{// ...省略// 分包加载规则"subPackages": [{// 子包的根目录"root": "pagesMember",// 页面路径和窗口表现"pages": [{"path": "settings/settings","style": {"navigationBarTitleText": "设置"}}]}],// 分包预下载规则"preloadRule": {"pages/my/my": {"network": "all", // [!code ++]"packages": ["pagesMember"] // [!code ++]}}
}

静态结构

设置页：src/pagesMember/settings/settings.vue

<script setup lang="ts">
//
</script><template><view class="viewport"><!-- 列表1 --><view class="list" v-if="true"><navigator url="/pagesMember/address/address" hover-class="none" class="item arrow">我的收货地址</navigator></view><!-- 列表2 --><view class="list"><button hover-class="none" class="item arrow" open-type="openSetting">授权管理</button><button hover-class="none" class="item arrow" open-type="feedback">问题反馈</button><button hover-class="none" class="item arrow" open-type="contact">联系我们</button></view><!-- 列表3 --><view class="list"><navigator hover-class="none" class="item arrow" url=" ">关于小兔鲜儿</navigator></view><!-- 操作按钮 --><view class="action"><view class="button">退出登录</view></view></view>
</template><style lang="scss">
page {background-color: #f4f4f4;
}.viewport {padding: 20rpx;
}/* 列表 */
.list {padding: 0 20rpx;background-color: #fff;margin-bottom: 20rpx;border-radius: 10rpx;.item {line-height: 90rpx;padding-left: 10rpx;font-size: 30rpx;color: #333;border-top: 1rpx solid #ddd;position: relative;text-align: left;border-radius: 0;background-color: #fff;&::after {width: auto;height: auto;left: auto;border: none;}&:first-child {border: none;}&::after {right: 5rpx;}}.arrow::after {content: '\e6c2';position: absolute;top: 50%;color: #ccc;font-family: 'erabbit' !important;font-size: 32rpx;transform: translateY(-50%);}
}/* 操作按钮 */
.action {text-align: center;line-height: 90rpx;margin-top: 40rpx;font-size: 32rpx;color: #333;.button {background-color: #fff;margin-bottom: 20rpx;border-radius: 10rpx;}
}
</style>

退出登录

设置页需实现以下业务：

1. 退出登录，清理用户信息，返回上一页。
2. 根据登录状态，按需展示页面内容。

参考效果

参考代码

// src/pagesMember/settings/settings.vue<script setup lang="ts">
import { useMemberStore } from '@/stores'const memberStore = useMemberStore()
// 退出登录
const onLogout = () => {// 模态弹窗uni.showModal({content: '是否退出登录？',success: (res) => {if (res.confirm) {// 清理用户信息memberStore.clearProfile()// 返回上一页uni.navigateBack()}},})
}
</script><template><view class="viewport"><!-- 列表1 --><view class="list" v-if="memberStore.profile"><navigator url="./address/address" hover-class="none" class="item arrow">我的收货地址</navigator></view><!-- 列表2 --><view class="list"><button hover-class="none" class="item arrow" open-type="openSetting">授权管理</button><button hover-class="none" class="item arrow" open-type="feedback">问题反馈</button><button hover-class="none" class="item arrow" open-type="contact">联系我们</button></view><!-- 列表3 --><view class="list"><navigator hover-class="none" class="item arrow" url=" ">关于小兔鲜儿</navigator></view><!-- 操作按钮 --><view class="action" v-if="memberStore.profile"><view @tap="onLogout" class="button">退出登录</view></view></view>
</template>

会员信息页

用户可以对会员信息进行更新操作，涉及到表单数据提交、图片读取、文件上传等知识点。

静态结构

会员信息页，处理成分包页面：src/pagesMember/profile/profile.vue

<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script><template><view class="viewport"><!-- 导航栏 --><view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"><navigator open-type="navigateBack" class="back icon-left" hover-class="none"></navigator><view class="title">个人信息</view></view><!-- 头像 --><view class="avatar"><view class="avatar-content"><image class="image" src=" " mode="aspectFill" /><text class="text">点击修改头像</text></view></view><!-- 表单 --><view class="form"><!-- 表单内容 --><view class="form-content"><view class="form-item"><text class="label">账号</text><text class="account">账号名</text></view><view class="form-item"><text class="label">昵称</text><input class="input" type="text" placeholder="请填写昵称" value="" /></view><view class="form-item"><text class="label">性别</text><radio-group><label class="radio"><radio value="男" color="#27ba9b" :checked="true" />男</label><label class="radio"><radio value="女" color="#27ba9b" :checked="false" />女</label></radio-group></view><view class="form-item"><text class="label">生日</text><pickerclass="picker"mode="date"start="1900-01-01":end="new Date()"value="2000-01-01"><view v-if="false">2000-01-01</view><view class="placeholder" v-else>请选择日期</view></picker></view><view class="form-item"><text class="label">城市</text><picker class="picker" mode="region" :value="['广东省', '广州市', '天河区']"><view v-if="false">广东省广州市天河区</view><view class="placeholder" v-else>请选择城市</view></picker></view><view class="form-item"><text class="label">职业</text><input class="input" type="text" placeholder="请填写职业" value="" /></view></view><!-- 提交按钮 --><button class="form-button">保 存</button></view></view>
</template><style lang="scss">
page {background-color: #f4f4f4;
}.viewport {display: flex;flex-direction: column;height: 100%;background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);background-size: auto 420rpx;background-repeat: no-repeat;
}// 导航栏
.navbar {position: relative;.title {height: 40px;display: flex;justify-content: center;align-items: center;font-size: 16px;font-weight: 500;color: #fff;}.back {position: absolute;height: 40px;width: 40px;left: 0;font-size: 20px;color: #fff;display: flex;justify-content: center;align-items: center;}
}// 头像
.avatar {text-align: center;width: 100%;height: 260rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;.image {width: 160rpx;height: 160rpx;border-radius: 50%;background-color: #eee;}.text {display: block;padding-top: 20rpx;line-height: 1;font-size: 26rpx;color: #fff;}
}// 表单
.form {background-color: #f4f4f4;&-content {margin: 20rpx 20rpx 0;padding: 0 20rpx;border-radius: 10rpx;background-color: #fff;}&-item {display: flex;height: 96rpx;line-height: 46rpx;padding: 25rpx 10rpx;background-color: #fff;font-size: 28rpx;border-bottom: 1rpx solid #ddd;&:last-child {border: none;}.label {width: 180rpx;color: #333;}.account {color: #666;}.input {flex: 1;display: block;height: 46rpx;}.radio {margin-right: 20rpx;}.picker {flex: 1;}.placeholder {color: #808080;}}&-button {height: 80rpx;text-align: center;line-height: 80rpx;margin: 30rpx 20rpx;color: #fff;border-radius: 80rpx;font-size: 30rpx;background-color: #27ba9b;}
}
</style>

获取会员信息

需要登录后才能获取用户个人信息，在 项目起步 模块已封装请求拦截器，拦截器中自动添加 token ，无需再手动添加。

接口调用

接口地址：/member/profile

请求方式：GET

登录权限: 是

请求参数：无

接口封装

src/services/profile.ts

import type { ProfileDetail } from '@/types/member'
import { http } from '@/utils/http'/*** 获取个人信息*/
export const getMemberProfileAPI = () => {return http<ProfileDetail>({method: 'GET',url: '/member/profile',})
}

类型声明

src/types/member.d.ts

/** 个人信息 用户详情信息 */
export type ProfileDetail = {/** 用户ID */id: number/** 头像  */avatar: string/** 账户名  */account: string/** 昵称 */nickname?: string/** 性别 */gender?: Gender/** 生日 */birthday?: string/** 省市区 */fullLocation?: string/** 职业 */profession?: string
}
/** 性别 */
export type Gender = '女' | '男'

类型声明封装升级（可选），提取用户信息通用部分，再复用类型。

/** 封装通用信息 */
type BaseProfile = {/** 用户ID */id: number/** 头像  */avatar: string/** 账户名  */account: string/** 昵称 */nickname?: string
}/** 小程序登录 登录用户信息 */
export type LoginResult = BaseProfile & {/** 用户ID */id: number/** 头像  */avatar: string/** 账户名  */account: string/** 昵称 */nickname?: string/** 手机号 */mobile: string/** 登录凭证 */token: string
}/** 个人信息 用户详情信息 */
export type ProfileDetail = BaseProfile & {/** 性别 */gender?: Gender/** 生日 */birthday?: string/** 省市区 */fullLocation?: string/** 职业 */profession?: string
}
/** 性别 */
export type Gender = '女' | '男'

渲染会员信息

会员信息页

<script setup lang="ts">
import { getMemberProfileAPI } from '@/services/profile'
import type { ProfileDetail } from '@/types/member'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()// 获取个人信息
const profile = ref<ProfileDetail>()
const getMemberProfileData = async () => {const res = await getMemberProfileAPI()profile.value = res.result
}onLoad(() => {getMemberProfileData()
})
</script><template><view class="viewport"><!-- 导航栏 --><view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"><navigator open-type="navigateBack" class="back icon-left" hover-class="none"></navigator><view class="title">个人信息</view></view><!-- 头像 --><view class="avatar"><view class="avatar-content"><image class="image" :src="profile?.avatar" mode="aspectFill" /><text class="text">点击修改头像</text></view></view><!-- 表单 --><view class="form"><!-- 表单内容 --><view class="form-content"><view class="form-item"><text class="label">账号</text><text class="account">{{ profile?.account }}</text></view><view class="form-item"><text class="label">昵称</text><input class="input" type="text" placeholder="请填写昵称" :value="profile?.nickname" /></view><view class="form-item"><text class="label">性别</text><radio-group><label class="radio"><radio value="男" color="#27ba9b" :checked="profile?.gender === '男'" />男</label><label class="radio"><radio value="女" color="#27ba9b" :checked="profile?.gender === '女'" />女</label></radio-group></view><view class="form-item"><text class="label">出生日期</text><pickerclass="picker"mode="date":value="profile?.birthday"start="1900-01-01":end="new Date()"><view v-if="profile?.birthday">{{ profile?.birthday }}</view><view class="placeholder" v-else>请选择日期</view></picker></view><view class="form-item"><text class="label">城市</text><picker class="picker" :value="profile?.fullLocation?.split(' ')" mode="region"><view v-if="profile?.fullLocation">{{ profile.fullLocation }}</view><view class="placeholder" v-else>请选择城市</view></picker></view><view class="form-item"><text class="label">职业</text><input class="input" type="text" placeholder="请填写职业" :value="profile?.profession" /></view></view><!-- 提交按钮 --><button class="form-button">保 存</button></view></view>
</template>

更新会员头像

1. 通过 uni.chooseMedia() 读取用户相册的照片或者拍照。

2. 通过 uni.uploadFile() 上传用户图片。

接口信息

接口地址：/member/profile/avatar

请求方式：POST

登录权限: 是

请求参数：

Body

字段名称	是否必须	默认值	备注
name	是	无	后端数据字段名
filePath	是	无	新头像

参考代码

更新会员头像

<script setup lang="ts">
// ...省略// 修改头像
const onAvatarChange = () => {// 调用拍照/选择图片uni.chooseMedia({// 文件个数count: 1,// 文件类型mediaType: ['image'],success: (res) => {// 本地路径const { tempFilePath } = res.tempFiles[0]// 文件上传uni.uploadFile({url: '/member/profile/avatar', // [!code ++]name: 'file', // 后端数据字段名  // [!code ++]filePath: tempFilePath, // 新头像  // [!code ++]success: (res) => {// 判断状态码是否上传成功if (res.statusCode === 200) {// 提取头像const { avatar } = JSON.parse(res.data).result// 当前页面更新头像profile.value!.avatar = avatar // [!code ++]// 更新 Store 头像memberStore.profile!.avatar = avatar // [!code ++]uni.showToast({ icon: 'success', title: '更新成功' })} else {uni.showToast({ icon: 'error', title: '出现错误' })}},})},})
}
</script>

::: tip 知识回顾

• 网页端上传文件用 Axios + FormData

• 小程序端上传文件用 wx.uploadFile()

• 使用 uni.uploadFile() 能自动多端兼容

• 小程序端需配置上传文件安全域名

:::

更新表单信息

涉及到 <input>、<radio>、<picker> 表单组件的数据收集。

接口信息

接口地址：/member/profile

请求方式：PUT

登录权限: 是

请求参数：

Body

字段名称	是否必须	默认值	备注
nickname	是	无	用户昵称
gender	是	无	用户性别
birthday	是	无	用户生日
profession	是	无	用户职业

接口封装

/*** 修改个人信息* @param data 请求体参数*/
export const putMemberProfileAPI = (data: ProfileParams) => {return http<ProfileDetail>({method: 'PUT',url: '/member/profile',data,})
}

类型声明

/** 个人信息 修改请求体参数 */
export type ProfileParams = Pick<ProfileDetail,'nickname' | 'gender' | 'birthday' | 'profession'
> & {/** 省份编码 */provinceCode?: string/** 城市编码 */cityCode?: string/** 区/县编码 */countyCode?: string
}

参考代码

<input> 组件使用 v-model 收集数据，<radio-group> 组件使用 @change 事件收集数据。

<script setup lang="ts">
import type { Gender, ProfileDetail } from '@/types/member'// 获取个人信息，修改个人信息需提供初始值   // [!code ++]
const profile = ref({} as ProfileDetail) // [!code ++]
const profile = ref<ProfileDetail>() // [!code --]// 修改性别
const onGenderChange: UniHelper.RadioGroupOnChange = (ev) => {profile.value.gender = ev.detail.value as Gender
}
</script><template><view class="viewport"><!-- 表单 --><view class="form"><!-- 表单内容 --><view class="form-content"><view class="form-item"><text class="label">账号</text><text class="account">{{ profile.account }}</text></view><view class="form-item"><text class="label">昵称</text><input class="input" type="text" placeholder="请填写昵称" v-model="profile.nickname" /></view><view class="form-item"><text class="label">性别</text><radio-group @change="onGenderChange"><label class="radio"><radio value="男" color="#27ba9b" :checked="profile.gender === '男'" />男</label><label class="radio"><radio value="女" color="#27ba9b" :checked="profile.gender === '女'" />女</label></radio-group></view>...省略<view class="form-item"><text class="label">职业</text><input class="input" type="text" placeholder="请填写职业" v-model="profile.profession" /></view></view></view></view>
</template>

<picker> 组件使用 @change 事件收集数据。

<script setup lang="ts">
// 修改生日
const onBirthdayChange: UniHelper.DatePickerOnChange = (ev) => {profile.value.birthday = ev.detail.value
}// 修改城市
let fullLocationCode: [string, string, string] = ['', '', '']
const onFullLocationChange: UniHelper.RegionPickerOnChange = (ev) => {// 修改前端界面profile.value.fullLocation = ev.detail.value.join(' ')// 提交后端更新fullLocationCode = ev.detail.code!
}
</script><template><view class="form-item"><text class="label">生日</text><pickerclass="picker"mode="date"start="1900-01-01":end="new Date()":value="profile.birthday"@change="onBirthdayChange"><view v-if="profile.birthday">{{ profile.birthday }}</view><view class="placeholder" v-else>请选择日期</view></picker></view><view class="form-item"><text class="label">城市</text><pickerclass="picker"mode="region":value="profile.fullLocation?.split(' ')"@change="onFullLocationChange"><view v-if="profile.fullLocation">{{ profile.fullLocation }}</view><view class="placeholder" v-else>请选择城市</view></picker></view>
</template>

提交表单，更新会员信息，Store 昵称记得修改，用于会员中心页展示。

<script setup lang="ts">
import { useMemberStore } from '@/stores'// 点击保存提交表单
const memberStore = useMemberStore()// 点击保存提交表单
const onSubmit = async () => {const { nickname, gender, birthday, profession } = profile.valueconst res = await putMemberProfileAPI({nickname,gender,birthday,profession,provinceCode: fullLocationCode[0],cityCode: fullLocationCode[1],countyCode: fullLocationCode[2],})// 更新Store昵称memberStore.profile!.nickname = res.result.nicknameuni.showToast({ icon: 'success', title: '保存成功' })setTimeout(() => {uni.navigateBack()}, 400)
}
</script><template><!-- 提交按钮 --><button @tap="onSubmit" class="form-button">保 存</button>
</template>

8.小兔鲜儿 - 地址模块

• 能够获取不同类型的表单数据
• 能够动态设置导航栏的标题
• 能够使用 uni-ui 组件库的组件
• 能够完成收货地址的增删改查的功能

准备工作

静态结构

地址模块共两个页面：地址管理页，地址表单页 ，划分到会员分包中。

地址管理页

src/pagesMember/address/address.vue

<script setup lang="ts">
//
</script><template><view class="viewport"><!-- 地址列表 --><scroll-view class="scroll-view" scroll-y><view v-if="true" class="address"><view class="address-list"><!-- 收货地址项 --><view class="item"><view class="item-content"><view class="user">黑马小王子<text class="contact">13111111111</text><text v-if="true" class="badge">默认</text></view><view class="locate">广东省 广州市 天河区 黑马程序员</view><navigatorclass="edit"hover-class="none":url="`/pagesMember/address-form/address-form?id=1`">修改</navigator></view></view><!-- 收货地址项 --><view class="item"><view class="item-content"><view class="user">黑马小公主<text class="contact">13222222222</text><text v-if="false" class="badge">默认</text></view><view class="locate">北京市 北京市 顺义区 黑马程序员</view><navigatorclass="edit"hover-class="none":url="`/pagesMember/address-form/address-form?id=2`">修改</navigator></view></view></view></view><view v-else class="blank">暂无收货地址</view></scroll-view><!-- 添加按钮 --><view class="add-btn"><navigator hover-class="none" url="/pagesMember/address-form/address-form">新建地址</navigator></view></view>
</template><style lang="scss">
page {height: 100%;overflow: hidden;
}/* 删除按钮 */
.delete-button {display: flex;justify-content: center;align-items: center;width: 50px;height: 100%;font-size: 28rpx;color: #fff;border-radius: 0;padding: 0;background-color: #cf4444;
}.viewport {display: flex;flex-direction: column;height: 100%;background-color: #f4f4f4;.scroll-view {padding-top: 20rpx;}
}.address {padding: 0 20rpx;margin: 0 20rpx;border-radius: 10rpx;background-color: #fff;.item-content {line-height: 1;padding: 40rpx 10rpx 38rpx;border-bottom: 1rpx solid #ddd;position: relative;.edit {position: absolute;top: 36rpx;right: 30rpx;padding: 2rpx 0 2rpx 20rpx;border-left: 1rpx solid #666;font-size: 26rpx;color: #666;line-height: 1;}}.item:last-child .item-content {border: none;}.user {font-size: 28rpx;margin-bottom: 20rpx;color: #333;.contact {color: #666;}.badge {display: inline-block;padding: 4rpx 10rpx 2rpx 14rpx;margin: 2rpx 0 0 10rpx;font-size: 26rpx;color: #27ba9b;border-radius: 6rpx;border: 1rpx solid #27ba9b;}}.locate {line-height: 1.6;font-size: 26rpx;color: #333;}
}.blank {margin-top: 300rpx;text-align: center;font-size: 32rpx;color: #888;
}.add-btn {height: 80rpx;text-align: center;line-height: 80rpx;margin: 30rpx 20rpx;color: #fff;border-radius: 80rpx;font-size: 30rpx;background-color: #27ba9b;
}
</style>

地址表单页

src/pagesMember/address-form/address-form.vue

<script setup lang="ts">
import { ref } from 'vue'// 表单数据
const form = ref({receiver: '', // 收货人contact: '', // 联系方式fullLocation: '', // 省市区(前端展示)provinceCode: '', // 省份编码(后端参数)cityCode: '', // 城市编码(后端参数)countyCode: '', // 区/县编码(后端参数)address: '', // 详细地址isDefault: 0, // 默认地址，1为是，0为否
})
</script><template><view class="content"><form><!-- 表单内容 --><view class="form-item"><text class="label">收货人</text><input class="input" placeholder="请填写收货人姓名" value="" /></view><view class="form-item"><text class="label">手机号码</text><input class="input" placeholder="请填写收货人手机号码" value="" /></view><view class="form-item"><text class="label">所在地区</text><picker class="picker" mode="region" value=""><view v-if="false">广东省 广州市 天河区</view><view v-else class="placeholder">请选择省/市/区(县)</view></picker></view><view class="form-item"><text class="label">详细地址</text><input class="input" placeholder="街道、楼牌号等信息" value="" /></view><view class="form-item"><label class="label">设为默认地址</label><switch class="switch" color="#27ba9b" :checked="true" /></view></form></view><!-- 提交按钮 --><button class="button">保存并使用</button>
</template><style lang="scss">
page {background-color: #f4f4f4;
}.content {margin: 20rpx 20rpx 0;padding: 0 20rpx;border-radius: 10rpx;background-color: #fff;.form-item,.uni-forms-item {display: flex;align-items: center;min-height: 96rpx;padding: 25rpx 10rpx 40rpx;background-color: #fff;font-size: 28rpx;border-bottom: 1rpx solid #ddd;position: relative;margin-bottom: 0;// 调整 uni-forms 样式.uni-forms-item__content {display: flex;}.uni-forms-item__error {margin-left: 200rpx;}&:last-child {border: none;}.label {width: 200rpx;color: #333;}.input {flex: 1;display: block;height: 46rpx;}.switch {position: absolute;right: -20rpx;transform: scale(0.8);}.picker {flex: 1;}.placeholder {color: #808080;}}
}.button {height: 80rpx;margin: 30rpx 20rpx;color: #fff;border-radius: 80rpx;font-size: 30rpx;background-color: #27ba9b;
}
</style>

动态设置标题

新建地址 和 修改地址 复用同一个地址表单页，需要根据页面参数 id 动态设置页面标题。

<script setup lang="ts">
// 获取页面参数
const query = defineProps<{id?: string
}>()// 动态设置标题
uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新建地址' })
</script>

新建地址页

新用户没有收货地址，先完成新建地址，新建成功返回地址管理页。

主要功能：前端收集表单的数据，提交表单给后端。

接口封装

接口调用

接口地址：/member/address

请求方式：POST

登录权限: 是

请求参数：

Body

字段名称	是否必须	类型	备注
receiver	是	string	收货人姓名
contact	是	string	收货人联系方式
provinceCode	是	string	省对应的 code
cityCode	是	string	市对应的 code
countyCode	是	string	区/县对应的 code
address	是	string	收货人详细地址
isDefault	是	number	是否设置为默认地址（数值类型）

接口封装

src/services/address.ts

import type { AddressParams } from '@/types/address'
import { http } from '@/utils/http'/*** 添加收货地址* @param data 请求参数*/
export const postMemberAddressAPI = (data: AddressParams) => {return http({method: 'POST',url: '/member/address',data,})
}

类型声明

src/types/address.d.ts

/** 添加收货地址: 请求参数 */
export type AddressParams = {/** 收货人姓名 */receiver: string/** 联系方式 */contact: string/** 省份编码 */provinceCode: string/** 城市编码 */cityCode: string/** 区/县编码 */countyCode: string/** 详细地址 */address: string/** 默认地址，1为是，0为否 */isDefault: number
}

参考代码

地址表单页，input 组件通过 v-model 获取数据，其他表单组件结合 @change 事件获取。

<script setup lang="ts">
import { postMemberAddressAPI } from '@/services/address'
import { ref } from 'vue'// 表单数据
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 onSubmit = async () => {// 新建地址请求await postMemberAddressAPI(form.value)// 成功提示uni.showToast({ icon: 'success', title: '添加成功' })// 返回上一页setTimeout(() => {uni.navigateBack()}, 400)
}
</script><template><view class="content"><form><!-- 表单内容 --><view class="form-item"><text class="label">收货人</text><input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" /></view><view class="form-item"><text class="label">手机号码</text><input class="input" placeholder="请填写收货人手机号码" v-model="form.contact" /></view><view class="form-item"><text class="label">所在地区</text><pickerclass="picker"mode="region":value="form.fullLocation.split(' ')"@change="onRegionChange"><view v-if="form.fullLocation">{{ form.fullLocation }}</view><view v-else class="placeholder">请选择省/市/区(县)</view></picker></view><view class="form-item"><text class="label">详细地址</text><input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" /></view><view class="form-item"><label class="label">设为默认地址</label><switchclass="switch"color="#27ba9b":checked="form.isDefault === 1"@change="onSwitchChange"/></view></form></view><!-- 提交按钮 --><button @tap="onSubmit" class="button">保存并使用</button>
</template>

地址管理页

为了能及时看到新建的收货地址，需在 onShow 生命周期中获取地址列表数据。

接口调用

接口地址：/member/address

请求方式：GET

登录权限: 是

请求参数：无

接口封装

src/types/address.ts

/*** 获取收货地址列表*/
export const getMemberAddressAPI = () => {return http<AddressItem[]>({method: 'GET',url: '/member/address',})
}

类型声明

src/types/address.d.ts

/** 收货地址项 */
export type AddressItem = {/** 收货人姓名 */receiver: string/** 联系方式 */contact: string/** 省份编码 */provinceCode: string/** 城市编码 */cityCode: string/** 区/县编码 */countyCode: string/** 详细地址 */address: string/** 默认地址，1为是，0为否 */isDefault: number/** 收货地址 id */id: string/** 省市区 */fullLocation: string
}

复用地址类型：src/types/goods.d.ts

+ import type { AddressItem } from './global'- /** 地址信息 */
- export type AddressItem = {
-   receiver: string
-   contact: string
-   provinceCode: string
-   cityCode: string
-   countyCode: string
-   address: string
-   isDefault: number
-   id: string
-   fullLocation: string
- }

::: tip 温馨提示

用户登录后再访问商品详情，商品详情字段中包含用户收货地址列表，可以复用收货地址类型。

:::

参考代码

地址管理页

<script setup lang="ts">
import { getMemberAddressAPI } from '@/services/address'
import type { AddressItem } from '@/types/address'
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'// 获取收货地址列表数据
const addressList = ref<AddressItem[]>([])
const getMemberAddressData = async () => {const res = await getMemberAddressAPI()addressList.value = res.result
}// 初始化调用(页面显示)
onShow(() => {getMemberAddressData()
})
</script><template><view class="viewport"><!-- 地址列表 --><scroll-view class="scroll-view" scroll-y><view v-if="true" class="address"><view class="address-list"><!-- 收获地址项 --><view class="item" v-for="item in addressList" :key="item.id"><view class="item-content"><view class="user">{{ item.receiver }}<text class="contact">{{ item.contact }}</text><text v-if="item.isDefault" class="badge">默认</text></view><view class="locate">{{ item.fullLocation }} {{ item.address }}</view><navigatorclass="edit"hover-class="none":url="`/pagesMember/address-form/address-form?id=${item.id}`">修改</navigator></view></view></view></view><view v-else class="blank">暂无收货地址</view></scroll-view><!-- 添加按钮 --><view class="add-btn"><navigator hover-class="none" url="/pagesMember/address-form/address-form">新建地址</navigator></view></view>
</template>

修改地址页

通过页面参数 id 来区分当前是修改地址还是新建地址。

数据回显

修改地址之前，需要先实现数据回显，用户再进行有针对性的修改。

接口详情

接口地址：/member/address/:id

请求方式：GET

登录权限: 是

请求参数：

路径参数

字段名称	是否必须	默认值	备注
id	是	无	收货地址 ID

接口封装

src/services/address.ts

/*** 获取收货地址详情* @param id 地址id(路径参数)*/
export const getMemberAddressByIdAPI = (id: string) => {return http<AddressItem>({method: 'GET',url: `/member/address/${id}`,})
}

参考代码

页面初始化的时候根据 id 获取地址详情，把获取的数据合并到表单数据中，用于数据回显。

<script setup lang="ts">
// 获取收货地址详情数据
const getMemberAddressByIdData = async () => {// 有 id 才调用接口if (query.id) {// 发送请求const res = await getMemberAddressByIdAPI(query.id)// 把数据合并到表单中Object.assign(form.value, res.result)}
}// 页面加载
onLoad(() => {getMemberAddressByIdData()
})
</script>

更新地址

将用户修改后的地址信息重新发送到服务端进行存储。

接口详情

接口地址：/member/address/:id

请求方式：PUT

登录权限: 是

请求参数：

路径参数

字段名称	是否必须	默认值	备注
id	是	无	收货地址 ID

Body

字段名称	是否必须	默认值	备注
receiver	是	无	收货人姓名
contact	是	无	收货人联系方式
provinceCode	是	无	行政省对应的 code
cityCode	是	无	行政市对应的 code
countyCode	是	无	行政区县对应的 code
address	是	无	收货人详细地址
isDefault	是	无	是否设置为默认地址（数值类型）

接口封装

/*** 修改收货地址* @param id 地址id(路径参数)* @param data 表单数据(请求体参数)*/
export const putMemberAddressByIdAPI = (id: string, data: AddressParams) => {return http({method: 'PUT',url: `/member/address/${id}`,data,})
}

参考代码

根据是否有地址 id 来判断提交表单到底是新建地址还是更新地址。

<script setup lang="ts">
// 提交表单
const onSubmit = async () => {// 判断当前页面是否有地址 idif (query.id) {// 修改地址请求await putMemberAddressByIdAPI(query.id, form.value)} else {// 新建地址请求await postMemberAddressAPI(form.value)}// 成功提示uni.showToast({ icon: 'success', title: query.id ? '修改成功' : '添加成功' })// 返回上一页setTimeout(() => {uni.navigateBack()}, 400)
}
</script>

表单校验

通过 uni-ui 组件库的 uni-forms 组件实现表单校验。

操作步骤

1. 定义校验规则
2. 修改表单结构
3. 绑定校验规则
4. 提交时校验表单

参考代码

<script setup lang="ts">
// 定义校验规则
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>() // [!code ++]// 提交表单
const onSubmit = async () => {try {// 表单校验await formRef.value?.validate?.() // [!code ++]// 校验通过后再发送请求if (query.id) {// 修改地址请求await putMemberAddressByIdAPI(query.id, form.value)} else {// 新建地址请求await postMemberAddressAPI(form.value)}// 成功提示uni.showToast({ icon: 'success', title: query.id ? '修改成功' : '添加成功' })// 返回上一页setTimeout(() => {uni.navigateBack()}, 400)} catch (error) {uni.showToast({ icon: 'error', title: '请填写完整信息' }) // [!code ++]}
}
</script><template><view class="content"><uni-forms :rules="rules" :model="form" ref="formRef"><!-- 表单内容 --><uni-forms-item name="receiver" class="form-item"><text class="label">收货人</text><input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" /></uni-forms-item><uni-forms-item name="contact" class="form-item"><text class="label">手机号码</text><inputclass="input"placeholder="请填写收货人手机号码":maxlength="11"v-model="form.contact"/></uni-forms-item><uni-forms-item name="fullLocation" class="form-item"><text class="label">所在地区</text><pickerclass="picker"@change="onRegionChange"mode="region":value="form.fullLocation.split(' ')"><view v-if="form.fullLocation">{{ form.fullLocation }}</view><view v-else class="placeholder">请选择省/市/区(县)</view></picker></uni-forms-item><uni-forms-item name="address" class="form-item"><text class="label">详细地址</text><input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" /></uni-forms-item><view class="form-item"><label class="label">设为默认地址</label><switchclass="switch"color="#27ba9b"@change="onSwitchChange":checked="form.isDefault === 1"/></view></uni-forms></view><!-- 提交按钮 --><button @tap="onSubmit" class="button">保存并使用</button>
</template>

删除地址

通过 uni-ui 组件库的 uni-swipe-action 组件实现侧滑删除。

侧滑组件用法

<template><!-- 滑动操作分区 --><uni-swipe-action><!-- 滑动操作项 --><uni-swipe-action-item><!-- 默认插槽 --><view>内容</view><!-- 右侧插槽 --><template #right><button class="delete-button">删除</button></template></uni-swipe-action-item></uni-swipe-action>
</template>

接口封装

接口详情

接口地址：/member/address/:id

请求方式：DELETE

登录权限: 是

请求参数：

路径参数

字段名称	是否必须	默认值	备注
id	是	无	ID

接口封装

/*** 删除收货地址* @param id 地址id(路径参数)*/
export const deleteMemberAddressByIdAPI = (id: string) => {return http({method: 'DELETE',url: `/member/address/${id}`,})
}

参考代码

侧滑地址列表项，右侧显示删除按钮，删除地址前需二次确认。

<script setup lang="ts">
// 删除收货地址
const onDeleteAddress = (id: string) => {// 二次确认uni.showModal({content: '删除地址?',success: async (res) => {if (res.confirm) {// 根据id删除收货地址await deleteMemberAddressByIdAPI(id)// 重新获取收货地址列表getMemberAddressData()}},})
}
</script><template><view class="viewport"><!-- 地址列表 --><scroll-view class="scroll-view" scroll-y><view v-if="addressList.length" class="address"><uni-swipe-action class="address-list"><!-- 收货地址项 --><uni-swipe-action-item class="item" v-for="item in addressList" :key="item.id"><view class="item-content"><view class="user">{{ item.receiver }}<text class="contact">{{ item.contact }}</text><text v-if="item.isDefault" class="badge">默认</text></view><view class="locate">{{ item.fullLocation }} {{ item.address }}</view><navigatorclass="edit"hover-class="none":url="`/pagesMember/address-form/address-form?id=${item.id}`">修改</navigator></view><!-- 右侧插槽 --><template #right><button @tap="onDeleteAddress(item.id)" class="delete-button">删除</button></template></uni-swipe-action-item></uni-swipe-action></view><view v-else class="blank">暂无收货地址</view></scroll-view><!-- 添加按钮 --><view class="add-btn"><navigator hover-class="none" url="/pagesMember/address-form/address-form">新建地址</navigator></view></view>
</template>

9.小兔鲜儿 - SKU 模块

学会使用插件市场，下载并使用 SKU 组件，实现商品详情页规格展示和交互。

存货单位（SKU）

SKU 概念

存货单位（Stock Keeping Unit），库存管理的最小可用单元，通常称为“单品”。

SKU 常见于电商领域，对于前端工程师而言，更多关注 SKU 算法 和 用户交互体验。

插件市场

uni-app 插件市场，是 uni-app 官方插件生态集中地。

SKU 属于电商常见业务，插件市场有现成的 SKU 插件，我们下载并在项目中使用。

下载 SKU 插件

经过综合评估，我们选择该SKU 插件，请下载插件到本地。

体验地址

::: tip 常见问题

Q：如何评估第三方插件的质量？

A：查看插件的评分、评价、下载量、更新频率以及文档完整性，以确保插件具有良好的社区口碑、兼容性、性能和维护状况。

:::

使用 SKU 插件

组件安装到自己项目

1. 复制 vk-data-goods-sku-popup 和 vk-data-input-number-box 到项目的根 components 目录下。
2. 复制例子代码并运行体验。

插件文档(部分)

Props 参数

Props	说明	类型	默认值	可选值
v-model	双向绑定，true 为打开组件，false 为关闭组件	Boolean	false	true、false
mode	模式 1:都显示 2:只显示购物车 3:只显示立即购买	Number	1	1、2、3
localdata	商品信息本地数据源	Object	-	-

Event 事件名

Event	说明	回调参数
add-cart	点击添加到购物车时（需选择完 SKU 才会触发）	selectShop：当前选择的 sku 数据
buy-now	点击立即购买时（需选择完 SKU 才会触发）	selectShop：当前选择的 sku 数据
open	打开组件时	-
close	关闭组件时	-

::: tip 常见问题

Q：为什么插件使用时无需导入？

A：pages.json 的 easycom 配置中，默认自动扫描 xxx/xxx.vue 格式的组件，实现自动导入。

Q：为什么组件代码 Git 提交时报错？

A：插件未采用 eslint 校验代码，请在插件源文件中添加 /* eslint-disable */，禁用 eslint。

:::

在 vk-data-goods-sku-popup.vue 和 vk-data-input-number-box.vue 组件禁用 eslint。

<script>
/* eslint-disable */
// 省略组件源代码
</script>

温馨提示: 插件的作者已合并 eslint-disable PR ，现在已无需手动添加该注释。

插件类型问题

尽管该插件未采用 TS 开发，但作者提供了详细的插件文档，我们可以依据文档为插件添加 TS 类型声明文件，从而提高项目数据校验的安全性。

类型声明文件

vk-data-goods-sku-popup.d.ts

import { Component } from '@uni-helper/uni-app-types'/** SKU 弹出层 */
export type SkuPopup = Component<SkuPopupProps>/** SKU 弹出层实例 */
export type SkuPopupInstanceType = InstanceType<SkuPopup>/** SKU 弹出层属性 */
export type SkuPopupProps = {/** 双向绑定，true 为打开组件，false 为关闭组件 */modelValue: boolean/** 商品信息本地数据源 */localdata: SkuPopupLocaldata/** 按钮模式 1:都显示 2:只显示购物车 3:只显示立即购买 */mode?: 1 | 2 | 3/** 该商品已抢完时的按钮文字 */noStockText?: string/** 库存文字 */stockText?: string/** 点击遮罩是否关闭组件 */maskCloseAble?: boolean/** 顶部圆角值 */borderRadius?: string | number/** 最小购买数量 */minBuyNum?: number/** 最大购买数量 */maxBuyNum?: number/** 每次点击后的数量 */stepBuyNum?: number/** 是否只能输入 step 的倍数 */stepStrictly?: boolean/** 是否隐藏库存的显示 */hideStock?: false/** 主题风格 */theme?: 'default' | 'red-black' | 'black-white' | 'coffee' | 'green'/** 默认金额会除以100（即100=1元），若设置为0，则不会除以100（即1=1元） */amountType?: 1 | 0/** 自定义获取商品信息的函数（已知支付宝不支持，支付宝请改用localdata属性） */customAction?: () => void/** 是否显示右上角关闭按钮 */showClose?: boolean/** 关闭按钮的图片地址 */closeImage?: string/** 价格的字体颜色 */priceColor?: string/** 立即购买 - 按钮的文字 */buyNowText?: string/** 立即购买 - 按钮的字体颜色 */buyNowColor?: string/** 立即购买 - 按钮的背景颜色 */buyNowBackgroundColor?: string/** 加入购物车 - 按钮的文字 */addCartText?: string/** 加入购物车 - 按钮的字体颜色 */addCartColor?: string/** 加入购物车 - 按钮的背景颜色 */addCartBackgroundColor?: string/** 商品缩略图背景颜色 */goodsThumbBackgroundColor?: string/** 样式 - 不可点击时,按钮的样式 */disableStyle?: object/** 样式 - 按钮点击时的样式 */activedStyle?: object/** 样式 - 按钮常态的样式 */btnStyle?: object/** 字段名 - 商品表id的字段名 */goodsIdName?: string/** 字段名 - sku表id的字段名 */skuIdName?: string/** 字段名 - 商品对应的sku列表的字段名 */skuListName?: string/** 字段名 - 商品规格名称的字段名 */specListName?: string/** 字段名 - sku库存的字段名 */stockName?: string/** 字段名 - sku组合路径的字段名 */skuArrName?: string/** 字段名 - 商品缩略图字段名(未选择sku时) */goodsThumbName?: string/** 被选中的值 */selectArr?: string[]/** 打开弹出层 */onOpen: () => void/** 关闭弹出层 */onClose: () => void/** 点击加入购物车时（需选择完SKU才会触发）*/onAddCart: (event: SkuPopupEvent) => void/** 点击立即购买时（需选择完SKU才会触发）*/onBuyNow: (event: SkuPopupEvent) => void
}/**  商品信息本地数据源 */
export type SkuPopupLocaldata = {/** 商品 ID */_id: string/** 商品名称 */name: string/** 商品图片 */goods_thumb: string/** 商品规格列表 */spec_list: SkuPopupSpecItem[]/** 商品SKU列表 */sku_list: SkuPopupSkuItem[]
}/** 商品规格名称的集合 */
export type SkuPopupSpecItem = {/** 规格名称 */name: string/** 规格集合 */list: { name: string }[]
}/** 商品SKU列表 */
export type SkuPopupSkuItem = {/** SKU ID */_id: string/**  商品 ID */goods_id: string/** 商品名称 */goods_name: string/** 商品图片 */image: string/** SKU 价格 * 100, 注意：需要乘以 100 */price: number/** SKU 规格组成, 注意：需要与 spec_list 数组顺序对应 */sku_name_arr: string[]/** SKU 库存 */stock: number
}/** 当前选择的sku数据 */
export type SkuPopupEvent = SkuPopupSkuItem & {/** 商品购买数量 */buy_num: number
}/** 全局组件类型声明 */
declare module 'vue' {export interface GlobalComponents {'vk-data-goods-sku-popup': SkuPopup}
}

核心业务

渲染商品规格

使用以下两个属性：

• localdata 绑定商品 SKU 数据来源
• v-model 双向绑定，显示/隐藏组件

注意：后端返回的数据格式和插件所需的格式不一致，我们需要按插件要求进行处理。

<script setup lang="ts">
import type { SkuPopupLocaldata } from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup'// 获取商品详情信息
const goods = ref<GoodsResult>()
const getGoodsByIdData = async () => {const res = await getGoodsByIdAPI(query.id)goods.value = res.result// SKU组件所需格式localdata.value = {_id: res.result.id,name: res.result.name,goods_thumb: res.result.mainPictures[0],spec_list: res.result.specs.map((v) => ({ name: v.name, list: v.values })),sku_list: res.result.skus.map((v) => ({_id: v.id,goods_id: res.result.id,goods_name: res.result.name,image: v.picture,price: v.price * 100, // 注意：需要乘以 100stock: v.inventory,sku_name_arr: v.specs.map((vv) => vv.valueName),})),}
}// 是否显示SKU组件
const isShowSku = ref(false)
// 商品信息
const localdata = ref({} as SkuPopupLocaldata)
</script><template><!-- SKU弹窗组件 --><vk-data-goods-sku-popup v-model="isShowSku" :localdata="localdata" /><!-- 弹窗测试 --><button @tap="isShowSku = true">打开 SKU 弹窗</button>
</template>

打开弹窗交互

SKU 弹窗的按钮有三种形式。

<script setup lang="ts">
// 按钮模式
enum SkuMode {Both = 1,Cart = 2,Buy = 3,
}
const mode = ref<SkuMode>(SkuMode.Cart)
// 打开SKU弹窗修改按钮模式
const openSkuPopup = (val: SkuMode) => {// 显示SKU弹窗isShowSku.value = true// 修改按钮模式mode.value = val
}
</script><template><!-- SKU弹窗组件 --><vk-data-goods-sku-popupv-model="isShowSku":localdata="localdata":mode="mode"add-cart-background-color="#FFA868"buy-now-background-color="#27BA9B"/><!-- 显示两个按钮 --><view @tap="openSkuPopup(SkuMode.Both)" class="item arrow">请选择商品规格</view><!-- 显示一个按钮 --><view @tap="openSkuPopup(SkuMode.Cart)" class="addcart"> 加入购物车 </view><view @tap="openSkuPopup(SkuMode.Buy)" class="payment"> 立即购买 </view>
</template>

渲染被选中的值

1. 通过 ref 获取组件实例。

2. 通过 computed 计算出被选中的值，渲染到界面中。

<script setup lang="ts">
// SKU组件实例
const skuPopupRef = ref<SkuPopupInstance>()
// 计算被选中的值
const selectArrText = computed(() => {return skuPopupRef.value?.selectArr?.join(' ').trim() || '请选择商品规格'
})
</script><template><!-- SKU弹窗组件 --><vk-data-goods-sku-popupv-model="isShowSku":localdata="localdata":mode="mode"add-cart-background-color="#FFA868"buy-now-background-color="#27BA9B"ref="skuPopupRef":actived-style="{color: '#27BA9B',borderColor: '#27BA9B',backgroundColor: '#E9F8F5',}"/><!-- 操作面板 --><view class="action"><view @tap="openSkuPopup(SkuMode.Both)" class="item arrow"><text class="label">选择</text><text class="text ellipsis"> {{ selectArrText }} </text></view></view>
</template>

至此，已经完成 SKU 组件的交互，接下来进入到购物车模块，并实现加入购物车功能。

10.小兔鲜儿 - 购物车模块

完成加入购物车，购物车列表交互，计算结算金额等业务。

加入购物车

在商品详情页把 选中规格后的商品(SKU) 加入购物车。

接口相关

接口详情

接口地址：/member/cart

请求方式：POST

登录权限: 是

请求参数：

Body

字段名称	是否必须	默认值	备注
skuId	是	无	商品库存单位
count	是	无	购买商品数量

接口封装

src/services/cart.ts

import { http } from '@/utils/http'
/*** 加入购物车* @param data 请求体参数*/
export const postMemberCartAPI = (data: { skuId: string; count: number }) => {return http({method: 'POST',url: '/member/cart',data,})
}

参考代码

通过 SKU 组件提供的 add-cart 事件，获取加入购物车时所需的参数。

<script setup lang="ts">
// 加入购物车事件
const onAddCart = async (ev: SkuPopupEvent) => {await postMemberCartAPI({ skuId: ev._id, count: ev.buy_num })uni.showToast({ title: '添加成功' })isShowSku.value = false
}
</script><template><!-- SKU弹窗组件 --><vk-data-goods-sku-popup v-model="isShowSku" :localdata="localdata" @add-cart="onAddCart" />
</template>

购物车列表

购物车列表需要访问后才能登录。

静态结构

src/pages/cart/cart.vue

<script setup lang="ts">
//
</script><template><scroll-view scroll-y class="scroll-view"><!-- 已登录: 显示购物车 --><template v-if="true"><!-- 购物车列表 --><view class="cart-list" v-if="true"><!-- 优惠提示 --><view class="tips"><text class="label">满减</text><text class="desc">满1件, 即可享受9折优惠</text></view><!-- 滑动操作分区 --><uni-swipe-action><!-- 滑动操作项 --><uni-swipe-action-item v-for="item in 2" :key="item" class="cart-swipe"><!-- 商品信息 --><view class="goods"><!-- 选中状态 --><text class="checkbox" :class="{ checked: true }"></text><navigator:url="`/pages/goods/goods?id=1435025`"hover-class="none"class="navigator"><imagemode="aspectFill"class="picture"src="https://yanxuan-item.nosdn.127.net/da7143e0103304f0f3230715003181ee.jpg"></image><view class="meta"><view class="name ellipsis">人手必备，儿童轻薄透气防蚊裤73-140cm</view><view class="attrsText ellipsis">黄色小象 140cm</view><view class="price">69.00</view></view></navigator><!-- 商品数量 --><view class="count"><text class="text">-</text><input class="input" type="number" value="1" /><text class="text">+</text></view></view><!-- 右侧删除按钮 --><template #right><view class="cart-swipe-right"><button class="button delete-button">删除</button></view></template></uni-swipe-action-item></uni-swipe-action></view><!-- 购物车空状态 --><view class="cart-blank" v-else><image src="/static/images/blank_cart.png" class="image" /><text class="text">购物车还是空的，快来挑选好货吧</text><navigator open-type="switchTab" url="/pages/index/index" hover-class="none"><button class="button">去首页看看</button></navigator></view><!-- 吸底工具栏 --><view class="toolbar"><text class="all" :class="{ checked: true }">全选</text><text class="text">合计:</text><text class="amount">100</text><view class="button-grounp"><view class="button payment-button" :class="{ disabled: true }"> 去结算(10) </view></view></view></template><!-- 未登录: 提示登录 --><view class="login-blank" v-else><text class="text">登录后可查看购物车中的商品</text><navigator url="/pages/login/login" hover-class="none"><button class="button">去登录</button></navigator></view><!-- 猜你喜欢 --><XtxGuess ref="guessRef"></XtxGuess><!-- 底部占位空盒子 --><view class="toolbar-height"></view></scroll-view>
</template><style lang="scss">
// 根元素
:host {height: 100vh;display: flex;flex-direction: column;overflow: hidden;background-color: #f7f7f8;
}// 滚动容器
.scroll-view {flex: 1;
}// 购物车列表
.cart-list {padding: 0 20rpx;// 优惠提示.tips {display: flex;align-items: center;line-height: 1;margin: 30rpx 10rpx;font-size: 26rpx;color: #666;.label {color: #fff;padding: 7rpx 15rpx 5rpx;border-radius: 4rpx;font-size: 24rpx;background-color: #27ba9b;margin-right: 10rpx;}}// 购物车商品.goods {display: flex;padding: 20rpx 20rpx 20rpx 80rpx;border-radius: 10rpx;background-color: #fff;position: relative;.navigator {display: flex;}.checkbox {position: absolute;top: 0;left: 0;display: flex;align-items: center;justify-content: center;width: 80rpx;height: 100%;&::before {content: '\e6cd';font-family: 'erabbit' !important;font-size: 40rpx;color: #444;}&.checked::before {content: '\e6cc';color: #27ba9b;}}.picture {width: 170rpx;height: 170rpx;}.meta {flex: 1;display: flex;flex-direction: column;justify-content: space-between;margin-left: 20rpx;}.name {height: 72rpx;font-size: 26rpx;color: #444;}.attrsText {line-height: 1.8;padding: 0 15rpx;font-size: 24rpx;align-self: flex-start;border-radius: 4rpx;color: #888;background-color: #f7f7f8;}.price {line-height: 1;font-size: 26rpx;color: #444;margin-bottom: 2rpx;color: #cf4444;&::before {content: '￥';font-size: 80%;}}// 商品数量.count {position: absolute;bottom: 20rpx;right: 5rpx;display: flex;justify-content: space-between;align-items: center;width: 220rpx;height: 48rpx;.text {height: 100%;padding: 0 20rpx;font-size: 32rpx;color: #444;}.input {height: 100%;text-align: center;border-radius: 4rpx;font-size: 24rpx;color: #444;background-color: #f6f6f6;}}}.cart-swipe {display: block;margin: 20rpx 0;}.cart-swipe-right {display: flex;height: 100%;.button {display: flex;justify-content: center;align-items: center;width: 50px;padding: 6px;line-height: 1.5;color: #fff;font-size: 26rpx;border-radius: 0;}.delete-button {background-color: #cf4444;}}
}// 空状态
.cart-blank,
.login-blank {display: flex;justify-content: center;align-items: center;flex-direction: column;height: 60vh;.image {width: 400rpx;height: 281rpx;}.text {color: #444;font-size: 26rpx;margin: 20rpx 0;}.button {width: 240rpx !important;height: 60rpx;line-height: 60rpx;margin-top: 20rpx;font-size: 26rpx;border-radius: 60rpx;color: #fff;background-color: #27ba9b;}
}// 吸底工具栏
.toolbar {position: fixed;left: 0;right: 0;bottom: var(--window-bottom);z-index: 1;height: 100rpx;padding: 0 20rpx;display: flex;align-items: center;border-top: 1rpx solid #ededed;border-bottom: 1rpx solid #ededed;background-color: #fff;box-sizing: content-box;.all {margin-left: 25rpx;font-size: 14px;color: #444;display: flex;align-items: center;}.all::before {font-family: 'erabbit' !important;content: '\e6cd';font-size: 40rpx;margin-right: 8rpx;}.checked::before {content: '\e6cc';color: #27ba9b;}.text {margin-right: 8rpx;margin-left: 32rpx;color: #444;font-size: 14px;}.amount {font-size: 20px;color: #cf4444;.decimal {font-size: 12px;}&::before {content: '￥';font-size: 12px;}}.button-grounp {margin-left: auto;display: flex;justify-content: space-between;text-align: center;line-height: 72rpx;font-size: 13px;color: #fff;.button {width: 240rpx;margin: 0 10rpx;border-radius: 72rpx;}.payment-button {background-color: #27ba9b;&.disabled {opacity: 0.6;}}}
}
// 底部占位空盒子
.toolbar-height {height: 100rpx;
}
</style>

登录状态

已登录显示购物车列表，否则应引导用户去登录。

<script setup lang="ts">
import { useMemberStore } from '@/stores'// 获取会员Store
const memberStore = useMemberStore()
</script><template><scroll-view scroll-y class="scroll-view"><!-- 已登录: 显示购物车 --><template v-if="memberStore.profile"><!-- 购物车列表 --></template><!-- 未登录: 提示登录 --><view class="login-blank" v-else><text class="text">登录后可查看购物车中的商品</text><navigator url="/pages/login/login" hover-class="none"><button class="button">去登录</button></navigator></view></scroll-view>
</template>

列表渲染

调用接口获取当前登录用户购物车中的商品列表。

接口信息

接口地址：/member/cart

请求方式：GET

登录权限: 是

请求参数：无

接口封装

src/services/cart.ts

/*** 获取购物车列表*/
export const getMemberCartAPI = () => {return http<CartItem[]>({method: 'GET',url: '/member/cart',})
}

类型声明

src/services/cart.d.ts

/** 购物车类型 */
export type CartItem = {/** 商品 ID */id: string/** SKU ID */skuId: string/** 商品名称 */name: string/** 图片 */picture: string/** 数量 */count: number/** 加入时价格 */price: number/** 当前的价格 */nowPrice: number/** 库存 */stock: number/** 是否选中 */selected: boolean/** 属性文字 */attrsText: string/** 是否为有效商品 */isEffective: boolean
}

参考代码

在页面初始化的时候判断用户是否已登录，已登录获取购物车列表。

<script setup lang="ts">
import { getMemberCartAPI } from '@/services/cart'
import { useMemberStore } from '@/stores'
import type { CartItem } from '@/types/cart'
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'// 获取会员Store
const memberStore = useMemberStore()// 获取购物车数据
const cartList = ref<CartItem[]>([])
const getMemberCartData = async () => {const res = await getMemberCartAPI()cartList.value = res.result
}// 初始化调用: 页面显示触发
onShow(() => {// 用户已登录才允许调用if (memberStore.profile) {getMemberCartData()}
})
</script>

温馨提示：自行完成猜你喜欢分页加载。

删除购物车

通过侧滑删除购物车的商品，使用 uni-swipe-action 组件实现。

接口相关

接口详情

接口地址：/member/cart

请求方式：DELETE

登录权限: 是

请求参数：

Body

字段名称	是否必须	类型	备注
ids	是	string[]	SKUID 集合

接口封装

/*** 删除/清空购物车单品* @param data 请求体参数 ids SKUID 集合*/
export const deleteMemberCartAPI = (data: { ids: string[] }) => {return http({method: 'DELETE',url: '/member/cart',data,})
}

参考代码

<script setup lang="ts">
// 点击删除按钮
const onDeleteCart = (skuId: string) => {// 弹窗二次确认uni.showModal({content: '是否删除',success: async (res) => {if (res.confirm) {// 后端删除单品await deleteMemberCartAPI({ ids: [skuId] })// 重新获取列表getMemberCartData()}},})
}
</script><template><!-- 右侧删除按钮 --><template #right><view class="cart-swipe-right"><button @tap="onDeleteCart(item.skuId)" class="button delete-button">删除</button></view></template>
</template>

修改商品信息

修改购买数量，修改选中状态。

接口相关

接口详情

接口地址：/member/cart/:id

请求方式：PUT

登录权限: 是

请求参数：

路径参数

字段名称	是否必须	默认值	备注
id	是	无	商品的 skuId

Body

字段名称	是否必须	默认值	备注
selected	非必须		是否选中
count	非必须		数量

接口封装

/*** 修改购物车单品* @param skuId SKUID* @param data selected 选中状态 count 商品数量*/
export const putMemberCartBySkuIdAPI = (skuId: string,data: { selected?: boolean; count?: number },
) => {return http({method: 'PUT',url: `/member/cart/${skuId}`,data,})
}

修改商品数量

复用 SKU 插件中的 步进器组件 修改商品数量，补充类型声明文件让组件类型更安全。

声明文件

import { Component } from '@uni-helper/uni-app-types'/** 步进器 */
export type InputNumberBox = Component<InputNumberBoxProps>/** 步进器实例 */
export type InputNumberBoxInstance = InstanceType<InputNumberBox>/** 步进器属性 */
export type InputNumberBoxProps = {/** 输入框初始值（默认1） */modelValue: number/** 用户可输入的最小值（默认0） */min: number/** 用户可输入的最大值（默认99999） */max: number/**  步长，每次加或减的值（默认1） */step: number/** 是否禁用操作，包括输入框，加减按钮 */disabled: boolean/** 输入框宽度，单位rpx（默认80） */inputWidth: string | number/**  输入框和按钮的高度，单位rpx（默认50） */inputHeight: string | number/** 输入框和按钮的背景颜色（默认#F2F3F5） */bgColor: string/** 步进器标识符 */index: string/** 输入框内容发生变化时触发 */onChange: (event: InputNumberBoxEvent) => void/** 输入框失去焦点时触发 */onBlur: (event: InputNumberBoxEvent) => void/** 点击增加按钮时触发 */onPlus: (event: InputNumberBoxEvent) => void/** 点击减少按钮时触发 */onMinus: (event: InputNumberBoxEvent) => void
}/** 步进器事件对象 */
export type InputNumberBoxEvent = {/** 输入框当前值 */value: number/** 步进器标识符 */index: string
}/** 全局组件类型声明 */
declare module 'vue' {export interface GlobalComponents {'vk-data-input-number-box': InputNumberBox}
}

参考代码

<script setup lang="ts">
import type { InputNumberBoxEvent } from '@/components/vk-data-input-number-box/vk-data-input-number-box'// 修改商品数量
const onChangeCount = (ev: InputNumberBoxEvent) => {putMemberCartBySkuIdAPI(ev.index, { count: ev.value })
}
</script><template><!-- 商品数量 --><view class="count"><vk-data-input-number-boxv-model="item.count":min="1":max="item.stock":index="item.skuId"@change="onChangeCount"/></view>
</template>

修改商品选中/全选

修改单个商品选中会影响全选状态，修改全选状态同理。

全选商品

接口地址：/member/cart/selected

请求方式：PUT

登录权限: 是

请求参数：

路径参数

字段名称	是否必须	默认值	备注
id	是	无	skuId

Body

字段名称	是否必须	默认值	备注
selected	是	无	是否全选
ids	否	无	商品集合

接口封装

/*** 购物车全选/取消全选* @param data selected 是否选中*/
export const putMemberCartSelectedAPI = (data: { selected: boolean }) => {return http({method: 'PUT',url: '/member/cart/selected',data,})
}

参考代码

<script setup lang="ts">
// 修改选中状态-单品修改
const onChangeSelected = (item: CartItem) => {// 前端数据更新-是否选中取反item.selected = !item.selected// 后端数据更新putMemberCartBySkuIdAPI(item.skuId, { selected: item.selected })
}// 计算全选状态
const isSelectedAll = computed(() => {return cartList.value.length && cartList.value.every((v) => v.selected)
})// 修改选中状态-全选修改
const onChangeSelectedAll = () => {// 全选状态取反const _isSelectedAll = !isSelectedAll.value// 前端数据更新cartList.value.forEach((item) => {item.selected = _isSelectedAll})// 后端数据更新putMemberCartSelectedAPI({ selected: _isSelectedAll })
}
</script><template><!-- 商品信息 --><view class="goods"><!-- 选中状态 --><text @tap="onChangeSelected(item)" class="checkbox" :class="{ checked: item.selected }"></text></view><!-- 吸底工具栏 --><view class="toolbar"><text @tap="onChangeSelectedAll" class="all" :class="{ checked: isSelectedAll }">全选</text></view>
</template>

底部结算信息

计算总钱数(总金额)

计算并展示购物车中选中商品所要支付的总金额，在用户切换商品选中状态和改变购数量后总的金额也要相应的进行重新计算，要实现这个功能我们仍然借助计算属性来实现：

<script setup lang="ts">
// 计算选中单品列表
const selectedCartList = computed(() => {return cartList.value.filter((v) => v.selected)
})// 计算选中总件数
const selectedCartListCount = computed(() => {return selectedCartList.value.reduce((sum, item) => sum + item.count, 0)
})// 计算选中总金额
const selectedCartListMoney = computed(() => {return selectedCartList.value.reduce((sum, item) => sum + item.count * item.nowPrice, 0).toFixed(2)
})// 结算按钮
const gotoPayment = () => {if (selectedCartListCount.value === 0) {return uni.showToast({icon: 'none',title: '请选择商品',})}// 跳转到结算页uni.navigateTo({ url: '/pagesOrder/create/create' })
}
</script>

带返回按钮的购物车

为了解决小程序 tabBar 页面限制 导致无法返回上一页的问题，将购物车业务独立为组件，使其既可从底部 tabBar 访问，又可在商品详情页中跳转并返回。

这样就需要 两个购物车页面 实现该功能，其中一个页面为 tabBar 页，另一个为普通页。

目录结构如下：

pages/cart
├── components
│   └── CartMain.vue ...................................... 购物车业务组件
├── cart2.vue ............................................. 普通页
└── cart.vue   ............................................ TabBar页

把原本的购物车业务独立封装成组件，在两个购物车页面分别引入即可。

::: tip 温馨提示

• 小程序 跳转到 tabBar 页面 时，会关闭其他所有非 tabBar 页面。
• 小程序的 tabBar 页没有后退按钮，可通过 getCurrentPages() 验证，结果仅有一个页面，意味着历史记录被清空了。
• 有历史记录的普通页才显示后退按钮。

:::

11.小兔鲜儿 - 订单模块

订单模块页面较多，建议用新的分包文件夹独立管理订单模块页面：填写订单页，支付订单页，订单详情页，订单列表页。

填写订单页

小兔鲜儿项目有三种方式可以生成订单信息，分别是：购物车结算、立即购买、再次购买。

静态结构

<script setup lang="ts">
import { computed, ref } from 'vue'// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 订单备注
const buyerMessage = ref('')
// 配送时间
const deliveryList = ref([{ type: 1, text: '时间不限 (周一至周日)' },{ type: 2, text: '工作日送 (周一至周五)' },{ type: 3, text: '周末配送 (周六至周日)' },
])
// 当前配送时间下标
const activeIndex = ref(0)
// 当前配送时间
const activeDelivery = computed(() => deliveryList.value[activeIndex.value])
// 修改配送时间
const onChangeDelivery: UniHelper.SelectorPickerOnChange = (ev) => {activeIndex.value = ev.detail.value
}
</script><template><scroll-view scroll-y class="viewport"><!-- 收货地址 --><navigatorv-if="false"class="shipment"hover-class="none"url="/pagesMember/address/address?from=order"><view class="user"> 张三 13333333333 </view><view class="address"> 广东省 广州市 天河区 黑马程序员3 </view><text class="icon icon-right"></text></navigator><navigatorv-elseclass="shipment"hover-class="none"url="/pagesMember/address/address?from=order"><view class="address"> 请选择收货地址 </view><text class="icon icon-right"></text></navigator><!-- 商品信息 --><view class="goods"><navigatorv-for="item in 2":key="item":url="`/pages/goods/goods?id=1`"class="item"hover-class="none"><imageclass="picture"src="https://yanxuan-item.nosdn.127.net/c07edde1047fa1bd0b795bed136c2bb2.jpg"/><view class="meta"><view class="name ellipsis"> ins风小碎花泡泡袖衬110-160cm </view><view class="attrs">藏青小花 130</view><view class="prices"><view class="pay-price symbol">99.00</view><view class="price symbol">99.00</view></view><view class="count">x5</view></view></navigator></view><!-- 配送及支付方式 --><view class="related"><view class="item"><text class="text">配送时间</text><picker :range="deliveryList" range-key="text" @change="onChangeDelivery"><view class="icon-fonts picker">{{ activeDelivery.text }}</view></picker></view><view class="item"><text class="text">订单备注</text><inputclass="input":cursor-spacing="30"placeholder="选题，建议留言前先与商家沟通确认"v-model="buyerMessage"/></view></view><!-- 支付金额 --><view class="settlement"><view class="item"><text class="text">商品总价: </text><text class="number symbol">495.00</text></view><view class="item"><text class="text">运费: </text><text class="number symbol">5.00</text></view></view></scroll-view><!-- 吸底工具栏 --><view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"><view class="total-pay symbol"><text class="number">99.00</text></view><view class="button" :class="{ disabled: true }"> 提交订单 </view></view>
</template><style lang="scss">
page {display: flex;flex-direction: column;height: 100%;overflow: hidden;background-color: #f4f4f4;
}.symbol::before {content: '¥';font-size: 80%;margin-right: 5rpx;
}.shipment {margin: 20rpx;padding: 30rpx 30rpx 30rpx 84rpx;font-size: 26rpx;border-radius: 10rpx;background: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png)20rpx center / 50rpx no-repeat #fff;position: relative;.icon {font-size: 36rpx;color: #333;transform: translateY(-50%);position: absolute;top: 50%;right: 20rpx;}.user {color: #333;margin-bottom: 5rpx;}.address {color: #666;}
}.goods {margin: 20rpx;padding: 0 20rpx;border-radius: 10rpx;background-color: #fff;.item {display: flex;padding: 30rpx 0;border-top: 1rpx solid #eee;&:first-child {border-top: none;}.picture {width: 170rpx;height: 170rpx;border-radius: 10rpx;margin-right: 20rpx;}.meta {flex: 1;display: flex;flex-direction: column;justify-content: center;position: relative;}.name {height: 80rpx;font-size: 26rpx;color: #444;}.attrs {line-height: 1.8;padding: 0 15rpx;margin-top: 6rpx;font-size: 24rpx;align-self: flex-start;border-radius: 4rpx;color: #888;background-color: #f7f7f8;}.prices {display: flex;align-items: baseline;margin-top: 6rpx;font-size: 28rpx;.pay-price {margin-right: 10rpx;color: #cf4444;}.price {font-size: 24rpx;color: #999;text-decoration: line-through;}}.count {position: absolute;bottom: 0;right: 0;font-size: 26rpx;color: #444;}}
}.related {margin: 20rpx;padding: 0 20rpx;border-radius: 10rpx;background-color: #fff;.item {display: flex;justify-content: space-between;align-items: center;min-height: 80rpx;font-size: 26rpx;color: #333;}.input {flex: 1;text-align: right;margin: 20rpx 0;padding-right: 20rpx;font-size: 26rpx;color: #999;}.item .text {width: 125rpx;}.picker {color: #666;}.picker::after {content: '\e6c2';}
}/* 结算清单 */
.settlement {margin: 20rpx;padding: 0 20rpx;border-radius: 10rpx;background-color: #fff;.item {display: flex;align-items: center;justify-content: space-between;height: 80rpx;font-size: 26rpx;color: #333;}.danger {color: #cf4444;}
}/* 吸底工具栏 */
.toolbar {position: fixed;left: 0;right: 0;bottom: calc(var(--window-bottom));z-index: 1;background-color: #fff;height: 100rpx;padding: 0 20rpx;border-top: 1rpx solid #eaeaea;display: flex;justify-content: space-between;align-items: center;box-sizing: content-box;.total-pay {font-size: 40rpx;color: #cf4444;.decimal {font-size: 75%;}}.button {width: 220rpx;text-align: center;line-height: 72rpx;font-size: 26rpx;color: #fff;border-radius: 72rpx;background-color: #27ba9b;}.disabled {opacity: 0.6;}
}
</style>

购物车结算

在购物车点击去结算后，进入填写订单页，用户可以选择订单的收货地址或补充订单信息。

接口详情

接口地址：/member/order/pre

请求方式：GET

登录权限: 是

请求参数：无

接口封装

src/services/order.ts

import type { OrderPreResult } from '@/types/order'
import { http } from '@/utils/http'
/*** 填写订单-获取预付订单*/
export const getMemberOrderPreAPI = () => {return http<OrderPreResult>({method: 'GET',url: '/member/order/pre',})
}

类型声明

src/services/order.d.ts

import type { AddressItem } from './address'/** 获取预付订单 返回信息 */
export type OrderPreResult = {/** 商品集合 [ 商品信息 ] */goods: OrderPreGoods[]/** 结算信息 */summary: {/** 商品总价 */totalPrice: number/** 邮费 */postFee: number/** 应付金额 */totalPayPrice: number}/** 用户地址列表 [ 地址信息 ] */userAddresses: AddressItem[]
}/** 商品信息 */
export type OrderPreGoods = {/** 属性文字，例如“颜色:瓷白色 尺寸：8寸” */attrsText: string/** 数量 */count: number/** id */id: string/** 商品名称 */name: string/** 实付单价 */payPrice: string/** 图片 */picture: string/** 原单价 */price: string/** SKUID */skuId: string/** 实付价格小计 */totalPayPrice: string/** 小计总价 */totalPrice: string
}

将后端返回的预付订单数据，渲染到页面中。

立即购买

从商品详情页的 SKU 组件直接点击【立即购买按钮】跳转到填写订单页，需要传递页面参数。

接口详情

接口地址：/member/order/pre/now

请求方式：GET

登录权限: 是

请求参数：

Query

字段名称	是否必须	默认值	备注
skuId	是	无	商品库存 ID
count	是	无	商品数量
addressId	否	无	收货地址 ID

接口封装

/*** 填写订单-获取立即购买订单*/
export const getMemberOrderPreNowAPI = (data: {skuId: stringcount: stringaddressId?: string
}) => {return http<OrderPreResult>({method: 'GET',url: '/member/order/pre/now',data,})
}

页面传参

从商品详情页的【立即购买事件】中收集两个必要参数，跳转填写订单页并传递页面参数。

商品详情页

<script setup lang="ts">
// 立即购买
const onBuyNow = (ev: SkuPopupEvent) => {uni.navigateTo({ url: `/pagesOrder/create/create?skuId=${ev._id}&count=${ev.buy_num}` })
}
</script><template><!-- SKU弹窗组件 --><vk-data-goods-sku-popupv-model="isShowSku":localdata="localdata"@add-cart="onAddCart"@buy-now="onBuyNow"/>
</template>

填写订单页

<script setup lang="ts">
import { getMemberOrderPreAPI, getMemberOrderPreNowAPI } from '@/services/order'// 页面参数
const query = defineProps<{skuId?: stringcount?: string
}>()// 获取订单信息
const orderPre = ref<OrderPreResult>()
const getMemberOrderPreData = async () => {// 是否有立即购买参数if (query.count && query.skuId) {// 调用立即购买 APIconst res = await getMemberOrderPreNowAPI({count: query.count,skuId: query.skuId,})orderPre.value = res.result} else {// 调用预付订单 APIconst res = await getMemberOrderPreAPI()orderPre.value = res.result}
}
</script>

选择收货地址

收货地址在地址管理页面中选择，为了更好管理选中收货地址，创建独立 Store 维护。

地址 Store

src/stores/modules/address.ts

import type { AddressItem } from '@/types/address'
import { defineStore } from 'pinia'
import { ref } from 'vue'export const useAddressStore = defineStore('address', () => {const selectedAddress = ref<AddressItem>()const changeSelectedAddress = (val: AddressItem) => {selectedAddress.value = val}return { selectedAddress, changeSelectedAddress }
})

地址管理页

修改选中收货地址，<navigator> 组件需要阻止事件冒泡。

pagesMember/address/address.vue

<script setup lang="ts">
// 修改收货地址
const onChangeAddress = (item: AddressItem) => {// 修改选中收货地址const addressStore = useAddressStore()addressStore.changeSelectedAddress(item)// 返回上一页uni.navigateBack()
}
</script><template><!-- 收货地址项 --><uni-swipe-action-item class="item" v-for="item in addressList" :key="item.id"><view class="item-content" @tap="onChangeAddress(item)"><view class="user">{{ item.receiver }}<text class="contact">{{ item.contact }}</text><text v-if="item.isDefault" class="badge">默认</text></view><view class="locate">{{ item.fullLocation }} {{ item.address }}</view><navigatorclass="edit"hover-class="none":url="`/pagesMember/address-form/address-form?id=${item.id}`"@tap.stop="() => {}">修改</navigator></view></uni-swipe-action-item>
</template>

订单填写页

<script setup lang="ts">
import { useAddressStore } from '@/stores/modules/address'
import { computed } from 'vue'const addressStore = useAddressStore()
// 收货地址
const selecteAddress = computed(() => {return addressStore.selectedAddress || orderPre.value?.userAddresses.find((v) => v.isDefault)
})
</script><template><!-- 收货地址 --><navigatorv-if="selecteAddress"class="shipment"hover-class="none"url="/pagesMember/address/address?from=order"><view class="user"> {{ selecteAddress.receiver }} {{ selecteAddress.contact }} </view><view class="address"> {{ selecteAddress.fullLocation }} {{ selecteAddress.address }} </view><text class="icon icon-right"></text></navigator>
</template>

提交订单

收集填写订单页的数据，点击页面底部的提交订单按钮，创建一个新的订单。

接口详情

接口地址：/member/order

请求方式：POST

登录权限: 是

请求参数：

Body

字段名称	是否必须	默认值	备注
addressId	是	无	收货地址 ID
goods	是	无	订单商品
deliveryTimeType	是	无	配送时间
buyerMessage	是	无	买家留言
payType	是	无	支付方式（小程序中固定在线支付）
payChannel	是	无	支付渠道（小程序中固定微信支付）

接口封装

/*** 提交订单* @param data 请求参数*/
export const postMemberOrderAPI = (data: OrderCreateParams) => {return http<{ id: string }>({method: 'POST',url: '/member/order',data,})
}

类型声明

/** 提交订单 请求参数 */
export type OrderCreateParams = {/** 所选地址Id */addressId: string/** 配送时间类型，1为不限，2为工作日，3为双休或假日 */deliveryTimeType: number/** 订单备注 */buyerMessage: string/** 商品集合[ 商品信息 ] */goods: {/** 数量 */count: number/** skuId */skuId: string}[]/** 支付渠道：支付渠道，1支付宝、2微信--支付方式为在线支付时，传值，为货到付款时，不传值 */payChannel: 1 | 2/** 支付方式，1为在线支付，2为货到付款 */payType: 1 | 2
}/** 提交订单 返回信息 */
export type OrderCreateResult = {/** 订单Id */id: string
}

参考代码

点击提交订单按钮实现创建订单，订单创建成功后，跳转到订单详情并传递订单 id。

<script setup lang="ts">
// 提交订单
const onOrderSubmit = async () => {// 没有收货地址提醒if (!selecteAddress.value?.id) {return uni.showToast({ icon: 'none', title: '请选择收货地址' })}// 发送请求const res = await postMemberOrderAPI({addressId: selecteAddress.value?.id,buyerMessage: buyerMessage.value,deliveryTimeType: activeDelivery.value.type,goods: orderPre.value!.goods.map((v) => ({ count: v.count, skuId: v.skuId })),payChannel: 2,payType: 1,})// 关闭当前页面，跳转到订单详情，传递订单iduni.redirectTo({ url: `/pagesOrder/detail/detail?id=${res.result.id}` })
}
</script><template><view class="button" :class="{ disabled: !selecteAddress?.id }" @tap="onOrderSubmit">提交订单</view>
</template>

订单提交成功后，接下来进入到订单详情页。

订单详情页

需要展示多种订单状态 并实现不同订单状态对应的业务。

静态结构

已完成通过页面参数获取到订单 id 等基础业务。

<script setup lang="ts">
import { useGuessList } from '@/composables'
import { ref } from 'vue'// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 猜你喜欢
const { guessRef, onScrolltolower } = useGuessList()
// 弹出层组件
const popup = ref<UniHelper.UniPopupInstance>()
// 取消原因列表
const reasonList = ref(['商品无货','不想要了','商品信息填错了','地址信息填写错误','商品降价','其它',
])
// 订单取消原因
const reason = ref('')
// 复制内容
const onCopy = (id: string) => {// 设置系统剪贴板的内容uni.setClipboardData({ data: id })
}
// 获取页面参数
const query = defineProps<{id: string
}>()
</script><template><!-- 自定义导航栏: 默认透明不可见, scroll-view 滚动到 50 时展示 --><view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"><view class="wrap"><navigator v-if="true" open-type="navigateBack" class="back icon-left"></navigator><navigator v-else url="/pages/index/index" open-type="switchTab" class="back icon-home"></navigator><view class="title">订单详情</view></view></view><scroll-view scroll-y class="viewport" id="scroller" @scrolltolower="onScrolltolower"><template v-if="true"><!-- 订单状态 --><view class="overview" :style="{ paddingTop: safeAreaInsets!.top + 20 + 'px' }"><!-- 待付款状态:展示去支付按钮和倒计时 --><template v-if="true"><view class="status icon-clock">等待付款</view><view class="tips"><text class="money">应付金额: ¥ 99.00</text><text class="time">支付剩余</text>00 时 29 分 59 秒</view><view class="button">去支付</view></template><!-- 其他订单状态:展示再次购买按钮 --><template v-else><!-- 订单状态文字 --><view class="status"> 待付款 </view><view class="button-group"><navigatorclass="button":url="`/pagesOrder/create/create?orderId=${query.id}`"hover-class="none">再次购买</navigator><!-- 待发货状态：模拟发货,开发期间使用,用于修改订单状态为已发货 --><view v-if="false" class="button"> 模拟发货 </view></view></template></view><!-- 配送状态 --><view class="shipment"><!-- 订单物流信息 --><view v-for="item in 1" :key="item" class="item"><view class="message">您已在广州市天河区黑马程序员完成取件，感谢使用菜鸟驿站，期待再次为您服务。</view><view class="date"> 2023-04-14 13:14:20 </view></view><!-- 用户收货地址 --><view class="locate"><view class="user"> 张三 13333333333 </view><view class="address"> 广东省 广州市 天河区 黑马程序员 </view></view></view><!-- 商品信息 --><view class="goods"><view class="item"><navigatorclass="navigator"v-for="item in 2":key="item":url="`/pages/goods/goods?id=${item}`"hover-class="none"><imageclass="cover"src="https://yanxuan-item.nosdn.127.net/c07edde1047fa1bd0b795bed136c2bb2.jpg"></image><view class="meta"><view class="name ellipsis">ins风小碎花泡泡袖衬110-160cm</view><view class="type">藏青小花， 130</view><view class="price"><view class="actual"><text class="symbol">¥</text><text>99.00</text></view></view><view class="quantity">x1</view></view></navigator><!-- 待评价状态:展示按钮 --><view class="action" v-if="true"><view class="button primary">申请售后</view><navigator url="" class="button"> 去评价 </navigator></view></view><!-- 合计 --><view class="total"><view class="row"><view class="text">商品总价: </view><view class="symbol">99.00</view></view><view class="row"><view class="text">运费: </view><view class="symbol">10.00</view></view><view class="row"><view class="text">应付金额: </view><view class="symbol primary">109.00</view></view></view></view><!-- 订单信息 --><view class="detail"><view class="title">订单信息</view><view class="row"><view class="item">订单编号: {{ query.id }} <text class="copy" @tap="onCopy(query.id)">复制</text></view><view class="item">下单时间: 2023-04-14 13:14:20</view></view></view><!-- 猜你喜欢 --><XtxGuess ref="guessRef" /><!-- 底部操作栏 --><view class="toolbar-height" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"></view><view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"><!-- 待付款状态:展示支付按钮 --><template v-if="true"><view class="button primary"> 去支付 </view><view class="button" @tap="popup?.open?.()"> 取消订单 </view></template><!-- 其他订单状态:按需展示按钮 --><template v-else><navigatorclass="button secondary":url="`/pagesOrder/create/create?orderId=${query.id}`"hover-class="none">再次购买</navigator><!-- 待收货状态: 展示确认收货 --><view class="button primary"> 确认收货 </view><!-- 待评价状态: 展示去评价 --><view class="button"> 去评价 </view><!-- 待评价/已完成/已取消 状态: 展示删除订单 --><view class="button delete"> 删除订单 </view></template></view></template><template v-else><!-- 骨架屏组件 --><PageSkeleton /></template></scroll-view><!-- 取消订单弹窗 --><uni-popup ref="popup" type="bottom" background-color="#fff"><view class="popup-root"><view class="title">订单取消</view><view class="description"><view class="tips">请选择取消订单的原因：</view><view class="cell" v-for="item in reasonList" :key="item" @tap="reason = item"><text class="text">{{ item }}</text><text class="icon" :class="{ checked: item === reason }"></text></view></view><view class="footer"><view class="button" @tap="popup?.close?.()">取消</view><view class="button primary">确认</view></view></view></uni-popup>
</template><style lang="scss">
page {display: flex;flex-direction: column;height: 100%;overflow: hidden;
}.navbar {width: 750rpx;color: #000;position: fixed;top: 0;left: 0;z-index: 9;/* background-color: #f8f8f8; */background-color: transparent;.wrap {position: relative;.title {height: 44px;display: flex;justify-content: center;align-items: center;font-size: 32rpx;/* color: #000; */color: transparent;}.back {position: absolute;left: 0;height: 44px;width: 44px;font-size: 44rpx;display: flex;align-items: center;justify-content: center;/* color: #000; */color: #fff;}}
}.viewport {background-color: #f7f7f8;
}.overview {display: flex;flex-direction: column;align-items: center;line-height: 1;padding-bottom: 30rpx;color: #fff;background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);background-size: cover;.status {font-size: 36rpx;}.status::before {margin-right: 6rpx;font-weight: 500;}.tips {margin: 30rpx 0;display: flex;font-size: 14px;align-items: center;.money {margin-right: 30rpx;}}.button-group {margin-top: 30rpx;display: flex;justify-content: center;align-items: center;}.button {width: 260rpx;height: 64rpx;margin: 0 10rpx;text-align: center;line-height: 64rpx;font-size: 28rpx;color: #27ba9b;border-radius: 68rpx;background-color: #fff;}
}.shipment {line-height: 1.4;padding: 0 20rpx;margin: 20rpx 20rpx 0;border-radius: 10rpx;background-color: #fff;.locate,.item {min-height: 120rpx;padding: 30rpx 30rpx 25rpx 75rpx;background-size: 50rpx;background-repeat: no-repeat;background-position: 6rpx center;}.locate {background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);.user {font-size: 26rpx;color: #444;}.address {font-size: 24rpx;color: #666;}}.item {background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png);border-bottom: 1rpx solid #eee;position: relative;.message {font-size: 26rpx;color: #444;}.date {font-size: 24rpx;color: #666;}}
}.goods {margin: 20rpx 20rpx 0;padding: 0 20rpx;border-radius: 10rpx;background-color: #fff;.item {padding: 30rpx 0;border-bottom: 1rpx solid #eee;.navigator {display: flex;margin: 20rpx 0;}.cover {width: 170rpx;height: 170rpx;border-radius: 10rpx;margin-right: 20rpx;}.meta {flex: 1;display: flex;flex-direction: column;justify-content: center;position: relative;}.name {height: 80rpx;font-size: 26rpx;color: #444;}.type {line-height: 1.8;padding: 0 15rpx;margin-top: 6rpx;font-size: 24rpx;align-self: flex-start;border-radius: 4rpx;color: #888;background-color: #f7f7f8;}.price {display: flex;margin-top: 6rpx;font-size: 24rpx;}.symbol {font-size: 20rpx;}.original {color: #999;text-decoration: line-through;}.actual {margin-left: 10rpx;color: #444;}.text {font-size: 22rpx;}.quantity {position: absolute;bottom: 0;right: 0;font-size: 24rpx;color: #444;}.action {display: flex;flex-direction: row-reverse;justify-content: flex-start;padding: 30rpx 0 0;.button {width: 200rpx;height: 60rpx;text-align: center;justify-content: center;line-height: 60rpx;margin-left: 20rpx;border-radius: 60rpx;border: 1rpx solid #ccc;font-size: 26rpx;color: #444;}.primary {color: #27ba9b;border-color: #27ba9b;}}}.total {line-height: 1;font-size: 26rpx;padding: 20rpx 0;color: #666;.row {display: flex;align-items: center;justify-content: space-between;padding: 10rpx 0;}.symbol::before {content: '¥';font-size: 80%;margin-right: 3rpx;}.primary {color: #cf4444;font-size: 36rpx;}}
}.detail {line-height: 1;padding: 30rpx 20rpx 0;margin: 20rpx 20rpx 0;font-size: 26rpx;color: #666;border-radius: 10rpx;background-color: #fff;.title {font-size: 30rpx;color: #444;}.row {padding: 20rpx 0;.item {padding: 10rpx 0;display: flex;align-items: center;}.copy {border-radius: 20rpx;font-size: 20rpx;border: 1px solid #ccc;padding: 5rpx 10rpx;margin-left: 10rpx;}}
}.toolbar-height {height: 100rpx;box-sizing: content-box;
}.toolbar {position: fixed;left: 0;right: 0;bottom: calc(var(--window-bottom));z-index: 1;height: 100rpx;padding: 0 20rpx;display: flex;align-items: center;flex-direction: row-reverse;border-top: 1rpx solid #ededed;border-bottom: 1rpx solid #ededed;background-color: #fff;box-sizing: content-box;.button {display: flex;justify-content: center;align-items: center;width: 200rpx;height: 72rpx;margin-left: 15rpx;font-size: 26rpx;border-radius: 72rpx;border: 1rpx solid #ccc;color: #444;}.delete {order: 4;}.button {order: 3;}.secondary {order: 2;color: #27ba9b;border-color: #27ba9b;}.primary {order: 1;color: #fff;background-color: #27ba9b;}
}.popup-root {padding: 30rpx 30rpx 0;border-radius: 10rpx 10rpx 0 0;overflow: hidden;.title {font-size: 30rpx;text-align: center;margin-bottom: 30rpx;}.description {font-size: 28rpx;padding: 0 20rpx;.tips {color: #444;margin-bottom: 12rpx;}.cell {display: flex;justify-content: space-between;align-items: center;padding: 15rpx 0;color: #666;}.icon::before {content: '\e6cd';font-family: 'erabbit' !important;font-size: 38rpx;color: #999;}.icon.checked::before {content: '\e6cc';font-size: 38rpx;color: #27ba9b;}}.footer {display: flex;justify-content: space-between;padding: 30rpx 0 40rpx;font-size: 28rpx;color: #444;.button {flex: 1;height: 72rpx;text-align: center;line-height: 72rpx;margin: 0 20rpx;color: #444;border-radius: 72rpx;border: 1rpx solid #ccc;}.primary {color: #fff;background-color: #27ba9b;border: none;}}
}
</style>

自定义导航栏交互

1. 导航栏左上角按钮：获取当前页面栈，如果不能返回上一页，按钮变成返回首页。
2. 导航栏动画效果：滚动驱动的动画，根据滚动位置而不断改变动画的进度。

::: warning 注意事项

滚动驱动的动画目前仅支持微信小程序端，暂不支持 H5 端、App 端，多端兼容时添加条件编译。

:::

参考代码

<script setup lang="ts">
// 获取页面栈
const pages = getCurrentPages()
// 获取当前页面实例，数组最后一项
const pageInstance = pages.at(-1) as any// 页面渲染完毕，绑定动画效果
onReady(() => {// 动画效果,导航栏背景色pageInstance.animate('.navbar', // 选择器[{ backgroundColor: 'transparent' }, { backgroundColor: '#f8f8f8' }], // 关键帧信息1000, // 动画持续时长{scrollSource: '#scroller', // scroll-view 的选择器startScrollOffset: 0, // 开始滚动偏移量endScrollOffset: 50, // 停止滚动偏移量timeRange: 1000, // 时间长度},)// 动画效果,导航栏标题pageInstance.animate('.navbar .title', [{ color: 'transparent' }, { color: '#000' }], 1000, {scrollSource: '#scroller',timeRange: 1000,startScrollOffset: 0,endScrollOffset: 50,})// 动画效果,导航栏返回按钮pageInstance.animate('.navbar .back', [{ color: '#fff' }, { color: '#000' }], 1000, {scrollSource: '#scroller',timeRange: 1000,startScrollOffset: 0,endScrollOffset: 50,})
})
</script><template><!-- 自定义导航栏: 默认透明不可见, scroll-view 滚动到 50 时展示 --><view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"><view class="wrap"><navigatorv-if="pages.length > 1"open-type="navigateBack"class="back icon-left"></navigator><navigator v-else url="/pages/index/index" open-type="switchTab" class="back icon-home"></navigator><view class="title">订单详情</view></view></view><scroll-view class="viewport" scroll-y enable-back-to-top id="scroller">...滚动容器</scroll-view>
</template>

::: warning 版本升级

• uni-app 不支持 animate 类型。
• 原生微信小程序 支持 animate 类型 。
• 当前需求可基于 原生微信小程序 的 Page 实例类型 扩展 uni-app 的 Page 实例，参考代码 👇

// 基于小程序的 Page 实例类型扩展 uni-app 的 Page
type PageInstance = Page.PageInstance & WechatMiniprogram.Page.InstanceMethods<any>
const pageInstance = pages.at(-1) as PageInstanceconst pageInstance = pages.at(-1) as any // [!code --]

:::

获取订单详情

请求封装

/*** 获取订单详情* @param id 订单id*/
export const getMemberOrderByIdAPI = (id: string) => {return http<OrderResult>({method: 'GET',url: `/member/order/${id}`,})
}

类型声明

/** 订单详情 返回信息 */
export type OrderResult = {/** 订单编号 */id: string/** 订单状态，1为待付款、2为待发货、3为待收货、4为待评价、5为已完成、6为已取消 */orderState: number/** 倒计时--剩余的秒数 -1 表示已经超时，正数表示倒计时未结束 */countdown: number/** 商品集合 [ 商品信息 ] */skus: OrderSkuItem[]/** 收货人 */receiverContact: string/** 收货人手机 */receiverMobile: string/** 收货人完整地址 */receiverAddress: string/** 下单时间 */createTime: string/** 商品总价 */totalMoney: number/** 运费 */postFee: number/** 应付金额 */payMoney: number
}/** 商品信息 */
export type OrderSkuItem = {/** sku id */id: string/** 商品 id */spuId: string/** 商品名称 */name: string/** 商品属性文字 */attrsText: string/** 数量 */quantity: number/** 购买时单价 */curPrice: number/** 图片地址 */image: string
}

订单状态

在订单详情中除了展示订单信息外，还需要根据不同订单状态展示不同的内容。

订单状态（orderState）	含义
1	待付款
2	待发货
3	待收货
4	待评价
5	已完成
6	已取消

订单状态常量

枚举的作用：通过枚举来替代无意义的订单状态数字，提高程序的可读性。

src/services/constants.ts

/** 订单状态枚举 */
export enum OrderState {/** 待付款 */DaiFuKuan = 1,/** 待发货 */DaiFaHuo = 2,/** 待收货 */DaiShouHuo = 3,/** 待评价 */DaiPingJia = 4,/** 已完成 */YiWanCheng = 5,/** 已取消 */YiQuXiao = 6,
}/** 订单状态列表 */
export const orderStateList = [{ id: 0, text: '' },{ id: 1, text: '待付款' },{ id: 2, text: '待发货' },{ id: 3, text: '待收货' },{ id: 4, text: '待评价' },{ id: 5, text: '已完成' },{ id: 6, text: '已取消' },
]

根据后端返回的数据渲染订单详情。

<script setup lang="ts">
import { OrderState, orderStateList } from '@/services/constants'// 获取订单详情
const order = ref<OrderResult>()
const getMemberOrderByIdData = async () => {const res = await getMemberOrderByIdAPI(query.id)order.value = res.result
}onLoad(() => {getMemberOrderByIdData()
})
</script><template><!-- 订单状态 --><view class="overview"><!-- 待付款状态:展示去支付按钮和倒计时 --><template v-if="order.orderState === OrderState.DaiFuKuan"><view class="status icon-clock">等待付款</view><view class="tips"><text class="money">应付金额: ¥ 99.00</text><text class="time">支付剩余</text>00 时 29 分 59 秒</view><view class="button">去支付</view></template><!-- 其他订单状态:展示再次购买按钮 --><template v-else><!-- 订单状态文字 --><view class="status"> {{ orderStateList[order.orderState].text }} </view><navigatorclass="button":url="`/pagesOrder/create/create?orderId=${query.id}`"hover-class="none">再次购买</navigator><!-- 待发货状态：模拟发货,开发期间使用,用于修改订单状态为已发货 --><view v-if="false" class="button"> 模拟发货 </view></template></view>
</template>

再次购买

现在是第三种生成订单信息，从订单详情页的【再次购买】按钮跳转到填写订单页，需要传递页面参数。

接口封装

/*** 填写订单-再次购买* @param id 订单id*/
export const getMemberOrderRepurchaseByIdAPI = (id: string) => {return http<OrderPreResult>({method: 'GET',url: `/member/order/repurchase/${id}`,})
}

参考代码

订单详情页

<template><navigatorclass="button"hover-class="none":url="`/pagesOrder/create/create?orderId=${query.id}`">再次购买</navigator>
</template>

填写订单页

<script setup lang="ts">
// 页面参数
const query = defineProps<{skuId?: stringcount?: stringorderId?: string // [!code ++]
}>()// 获取订单信息
const orderPre = ref<OrderPreResult>()
const getMemberOrderPreData = async () => {if (query.count && query.skuId) {// 立即购买const res = await getMemberOrderPreNowAPI({count: query.count,skuId: query.skuId,})orderPre.value = res.result} else if (query.orderId) {// 再次购买const res = await getMemberOrderRepurchaseByIdAPI(query.orderId)orderPre.value = res.result} else {// 预付订单const res = await getMemberOrderPreAPI()orderPre.value = res.result}
}
</script>

支付倒计时

通过 uni-ui 组件库的 uni-countdown 实现倒计时。

<script setup lang="ts">
// 倒计时结束事件
const onTimeup = () => {// 修改订单状态为已取消order.value!.orderState = OrderState.YiQuXiao
}
</script><template><!-- 待付款状态:展示去支付按钮和倒计时 --><template v-if="order.orderState === OrderState.DaiFuKuan"><view class="status icon-clock">等待付款</view><view class="tips"><text class="money">应付金额: ¥ 99.00</text><text class="time">支付剩余</text><!-- 倒计时组件 --><uni-countdown:second="order.countdown"color="#fff"splitor-color="#fff":show-day="false":show-colon="false"@timeup="onTimeup"/></view><view class="button">去支付</view></template>
</template>

订单支付

订单支付其实就是根据订单号查询到支付信息，在小程序中调用微信支付的 API 而已。

微信支付说明

1. 由于微信支付的限制，仅 appid 为 wx26729f20b9efae3a 的开发者才能调用该接口。此外，开发者还需要微信授权登录。
2. 对于其他开发者，可以使用模拟支付接口进行开发测试，调用后，订单状态将自动更新为已支付。

调用接口

• 生产环境：调用正式接口，获取微信支付参数 + 发起微信支付
• 开发环境：调用模拟接口，通过模拟支付，修改订单状态为已支付

import { http } from '@/utils/http'/*** 获取微信支付参数* @param data orderId 订单id*/
export const getPayWxPayMiniPayAPI = (data: { orderId: string }) => {return http<WechatMiniprogram.RequestPaymentOption>({method: 'GET',url: '/pay/wxPay/miniPay',data,})
}/*** 模拟支付-内测版* @param data orderId 订单id*/
export const getPayMockAPI = (data: { orderId: string }) => {return http({method: 'GET',url: '/pay/mock',data,})
}

参考代码

通过环境变量区分开发环境，调用不同接口。

<script setup lang="ts">
import { getPayMockAPI, getPayWxPayMiniPayAPI } from '@/services/pay'// 订单支付
const onOrderPay = async () => {// 通过环境变量区分开发环境if (import.meta.env.DEV) {// 开发环境：模拟支付，修改订单状态为已支付await getPayMockAPI({ orderId: query.id })} else {// 生产环境：获取支付参数 + 发起微信支付const res = await getPayWxPayMiniPayAPI({ orderId: query.id })await wx.requestPayment(res.result)}// 关闭当前页，再跳转支付结果页uni.redirectTo({ url: `/pagesOrder/payment/payment?id=${query.id}` })
}
</script><template><view class="button" @tap="onOrderPay">去支付</view>
</template>

支付成功页

主要用于展示支付结果。

src/pagesOrder/payment/payment.vue

<script setup lang="ts">
import { useGuessList } from '@/composables'// 获取页面参数
const query = defineProps<{id: string
}>()// 猜你喜欢
const { guessRef, onScrolltolower } = useGuessList()
</script><template><scroll-view class="viewport" scroll-y @scrolltolower="onScrolltolower"><!-- 订单状态 --><view class="overview"><view class="status icon-checked">支付成功</view><view class="buttons"><navigatorhover-class="none"class="button navigator"url="/pages/index/index"open-type="switchTab">返回首页</navigator><navigatorhover-class="none"class="button navigator":url="`/pagesOrder/detail/detail?id=${query.id}`"open-type="redirect">查看订单</navigator></view></view><!-- 猜你喜欢 --><XtxGuess ref="guessRef" /></scroll-view>
</template><style lang="scss">
page {display: flex;flex-direction: column;height: 100%;overflow: hidden;
}.viewport {background-color: #f7f7f8;
}.overview {line-height: 1;padding: 50rpx 0;color: #fff;background-color: #27ba9b;.status {font-size: 36rpx;font-weight: 500;text-align: center;}.status::before {display: block;font-size: 110rpx;margin-bottom: 20rpx;}.buttons {height: 60rpx;line-height: 60rpx;display: flex;justify-content: center;align-items: center;margin-top: 60rpx;}.button {text-align: center;margin: 0 10rpx;font-size: 28rpx;color: #fff;&:first-child {width: 200rpx;border-radius: 64rpx;border: 1rpx solid #fff;}}
}
</style>

模拟发货

仅在订单状态为待发货时，可模拟发货，调用后订单状态修改为待收货，包含模拟物流。

仅在开发期间使用，项目上线后应该是由商家发货。

接口封装

/*** 模拟发货-内测版* @description 在DEV环境下使用，仅在订单状态为待发货时，可模拟发货，调用后订单状态修改为待收货，包含模拟物流。* @param id 订单id*/
export const getMemberOrderConsignmentByIdAPI = (id: string) => {return http({method: 'GET',url: `/member/order/consignment/${id}`,})
}

参考代码

<script setup lang="ts">
// 是否为开发环境
const isDev = import.meta.env.DEV
// 模拟发货
const onOrderSend = async () => {if (isDev) {await getMemberOrderConsignmentByIdAPI(query.id)uni.showToast({ icon: 'success', title: '模拟发货完成' })// 主动更新订单状态order.value!.orderState = OrderState.DaiShouHuo}
}
</script><template><!-- 待发货状态：模拟发货,开发期间使用,用于修改订单状态为已发货 --><view v-if="isDev && order.orderState == OrderState.DaiFaHuo" @tap="onOrderSend" class="button">模拟发货</view>
</template>

确认收货

点击确认收货时需二次确认，提示文案：为保障您的权益，请收到货并确认无误后，再确认收货

接口封装

/*** 确认收货* @description 仅在订单状态为待收货时，可确认收货。* @param id 订单id*/
export const putMemberOrderReceiptByIdAPI = (id: string) => {return http<OrderResult>({method: 'PUT',url: `/member/order/${id}/receipt`,})
}

参考代码

<script setup lang="ts">
// 确认收货
const onOrderConfirm = () => {// 二次确认弹窗uni.showModal({content: '为保障您的权益，请收到货并确认无误后，再确认收货',success: async (success) => {if (success.confirm) {const res = await putMemberOrderReceiptByIdAPI(query.id)// 更新订单状态order.value = res.result}},})
}
</script><template><!-- 待收货状态: 展示确认收货按钮 --><view v-if="order.orderState === OrderState.DaiShouHuo" @tap="onOrderConfirm" class="button">确认收货</view>
</template>

订单物流

仅在订单状态为待收货，待评价，已完成时，可获取物流信息。

请求封装

/*** 获取订单物流* @description 仅在订单状态为待收货，待评价，已完成时，可获取物流信息。* @param id 订单id*/
export const getMemberOrderLogisticsByIdAPI = (id: string) => {return http<OrderLogisticResult>({method: 'GET',url: `/member/order/${id}/logistics`,})
}/** 物流信息 返回值类型 */
export type OrderLogisticResult = {/** 快递公司 */company: {/** 公司名称 */name: string/** 快递编号 */number: string/** 联系电话 */tel: string}/** 商品件数 */count: number/** 物流日志 */list: LogisticItem[]
}/** 物流日志 */
export type LogisticItem = {/** 信息ID */id: string/** 信息文字 */text: string/** 时间 */time: string
}

删除订单

仅在订单状态为待评价，已完成，已取消时，可删除订单。

接口封装

/*** 删除订单* @description 仅在订单状态为待评价，已完成，已取消时，可删除订单。* @param data ids 订单集合*/
export const deleteMemberOrderAPI = (data: { ids: string[] }) => {return http({method: 'DELETE',url: `/member/order`,data,})
}

取消订单

仅在订单状态为待付款时，可取消订单。

接口封装

/*** 取消订单* @description 仅在订单状态为待付款时，可取消订单。* @param id 订单id* @param data cancelReason 取消理由*/
export const getMemberOrderCancelByIdAPI = (id: string, data: { cancelReason: string }) => {return http<OrderResult>({method: 'PUT',url: `/member/order/${id}/cancel`,data,})
}

订单列表页

根据订单的不同状态展示订单列表，并实现多 Tabs 分页加载。

静态结构

<script setup lang="ts">
import { ref } from 'vue'// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// tabs 数据
const orderTabs = ref([{ orderState: 0, title: '全部' },{ orderState: 1, title: '待付款' },{ orderState: 2, title: '待发货' },{ orderState: 3, title: '待收货' },{ orderState: 4, title: '待评价' },
])
</script><template><view class="viewport"><!-- tabs --><view class="tabs"><text class="item" v-for="item in 5" :key="item"> 待付款 </text><!-- 游标 --><view class="cursor" :style="{ left: 0 * 20 + '%' }"></view></view><!-- 滑动容器 --><swiper class="swiper"><!-- 滑动项 --><swiper-item v-for="item in 5" :key="item"><!-- 订单列表 --><scroll-view scroll-y class="orders"><view class="card" v-for="item in 2" :key="item"><!-- 订单信息 --><view class="status"><text class="date">2023-04-14 13:14:20</text><!-- 订单状态文字 --><text>待付款</text><!-- 待评价/已完成/已取消 状态: 展示删除订单 --><text class="icon-delete"></text></view><!-- 商品信息，点击商品跳转到订单详情，不是商品详情 --><navigatorv-for="sku in 2":key="sku"class="goods":url="`/pagesOrder/detail/detail?id=1`"hover-class="none"><view class="cover"><imagemode="aspectFit"src="https://yanxuan-item.nosdn.127.net/c07edde1047fa1bd0b795bed136c2bb2.jpg"></image></view><view class="meta"><view class="name ellipsis">ins风小碎花泡泡袖衬110-160cm</view><view class="type">藏青小花 130</view></view></navigator><!-- 支付信息 --><view class="payment"><text class="quantity">共5件商品</text><text>实付</text><text class="amount"> <text class="symbol">¥</text>99</text></view><!-- 订单操作按钮 --><view class="action"><!-- 待付款状态：显示去支付按钮 --><template v-if="true"><view class="button primary">去支付</view></template><template v-else><navigatorclass="button secondary":url="`/pagesOrder/create/create?orderId=id`"hover-class="none">再次购买</navigator><!-- 待收货状态: 展示确认收货 --><view v-if="false" class="button primary">确认收货</view></template></view></view><!-- 底部提示文字 --><view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">{{ true ? '没有更多数据~' : '正在加载...' }}</view></scroll-view></swiper-item></swiper></view>
</template><style lang="scss">
page {height: 100%;overflow: hidden;
}.viewport {height: 100%;display: flex;flex-direction: column;background-color: #fff;
}// tabs
.tabs {display: flex;justify-content: space-around;line-height: 60rpx;margin: 0 10rpx;background-color: #fff;box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);position: relative;z-index: 9;.item {flex: 1;text-align: center;padding: 20rpx;font-size: 28rpx;color: #262626;}.cursor {position: absolute;left: 0;bottom: 0;width: 20%;height: 6rpx;padding: 0 50rpx;background-color: #27ba9b;/* 过渡效果 */transition: all 0.4s;}
}// swiper
.swiper {background-color: #f7f7f8;
}// 订单列表
.orders {.card {min-height: 100rpx;padding: 20rpx;margin: 20rpx 20rpx 0;border-radius: 10rpx;background-color: #fff;&:last-child {padding-bottom: 40rpx;}}.status {display: flex;align-items: center;justify-content: space-between;font-size: 28rpx;color: #999;margin-bottom: 15rpx;.date {color: #666;flex: 1;}.primary {color: #ff9240;}.icon-delete {line-height: 1;margin-left: 10rpx;padding-left: 10rpx;border-left: 1rpx solid #e3e3e3;}}.goods {display: flex;margin-bottom: 20rpx;.cover {width: 170rpx;height: 170rpx;margin-right: 20rpx;border-radius: 10rpx;overflow: hidden;position: relative;}.quantity {position: absolute;bottom: 0;right: 0;line-height: 1;padding: 6rpx 4rpx 6rpx 8rpx;font-size: 24rpx;color: #fff;border-radius: 10rpx 0 0 0;background-color: rgba(0, 0, 0, 0.6);}.meta {flex: 1;display: flex;flex-direction: column;justify-content: center;}.name {height: 80rpx;font-size: 26rpx;color: #444;}.type {line-height: 1.8;padding: 0 15rpx;margin-top: 10rpx;font-size: 24rpx;align-self: flex-start;border-radius: 4rpx;color: #888;background-color: #f7f7f8;}.more {flex: 1;display: flex;align-items: center;justify-content: center;font-size: 22rpx;color: #333;}}.payment {display: flex;justify-content: flex-end;align-items: center;line-height: 1;padding: 20rpx 0;text-align: right;color: #999;font-size: 28rpx;border-bottom: 1rpx solid #eee;.quantity {font-size: 24rpx;margin-right: 16rpx;}.amount {color: #444;margin-left: 6rpx;}.symbol {font-size: 20rpx;}}.action {display: flex;justify-content: flex-end;align-items: center;padding-top: 20rpx;.button {width: 180rpx;height: 60rpx;display: flex;justify-content: center;align-items: center;margin-left: 20rpx;border-radius: 60rpx;border: 1rpx solid #ccc;font-size: 26rpx;color: #444;}.secondary {color: #27ba9b;border-color: #27ba9b;}.primary {color: #fff;background-color: #27ba9b;}}.loading-text {text-align: center;font-size: 28rpx;color: #666;padding: 20rpx 0;}
}
</style>

Tabs 滑动切换

订单列表的 Tabs 支持滑动切换，从【我的】进入订单列表，能高亮对应的下标。

<script setup lang="ts">
// tabs 数据
const orderTabs = ref([{ orderState: 0, title: '全部' },{ orderState: 1, title: '待付款' },{ orderState: 2, title: '待发货' },{ orderState: 3, title: '待收货' },{ orderState: 4, title: '待评价' },
])// 获取页面参数
const query = defineProps<{type: string
}>()// 高亮下标
const activeIndex = ref(orderTabs.value.findIndex((v) => v.orderState === Number(query.type)))
</script><template><view class="viewport"><!-- tabs --><view class="tabs"><textclass="item"v-for="(item, index) in orderTabs":key="item.title"@tap="activeIndex = index">{{ item.title }}</text><!-- 游标 --><view class="cursor" :style="{ left: activeIndex * 20 + '%' }"></view></view><!-- 滑动容器 --><swiper class="swiper" :current="activeIndex" @change="activeIndex = $event.detail.current"><!-- 滑动项 --><swiper-item v-for="item in orderTabs" :key="item.title"><!-- 订单列表 --><scroll-view scroll-y class="orders">...省略</scroll-view></swiper-item></swiper></view>
</template>

获取订单列表

当前页面是多 Tabs 列表的情况，每个 Tabs 都是独立的列表，并支持分页加载。

接口信息

接口地址：/member/order

请求方式：GET

Query 参数：

字段名称	是否必须	默认值	备注
page	可选	1	页码
pageSize	可选	10	页容量
orderState	可选	0	订单状态

接口封装

/*** 获取订单列表* @param data orderState 订单状态*/
export const getMemberOrderAPI = (data: OrderListParams) => {return http<OrderListResult>({method: 'GET',url: `/member/order`,data,})
}import type { PageParams } from '@/types/global'
/** 订单列表参数 */
export type OrderListParams = PageParams & { orderState: number }/** 订单列表 */
export type OrderListResult = {/** 总记录数 */counts: number/** 数据集合    [ 订单信息 ] */items: OrderItem[]/** 当前页码 */page: number/** 总页数 */pages: number/** 页尺寸 */pageSize: number
}/** 订单列表项 */
export type OrderItem = OrderResult & {/** 总件数 */totalNum: number
}

订单列表渲染

为了更好维护多 Tabs 列表，把列表抽离成业务组件，在组件内部独立维护列表数据，包括分页，下拉刷新等业务。

参考代码

订单列表页，把订单状态传递给列表组件（父传子）。

<script setup lang="ts">
// 导入列表组件
import OrderList from './components/OrderList.vue'
</script><template><!-- 滑动容器 --><swiper class="swiper" :current="activeIndex" @change="activeIndex = $event.detail.current"><!-- 滑动项 --><swiper-item v-for="item in orderTabs" :key="item.title"><!-- 订单列表 --><OrderList :order-state="item.orderState" /></swiper-item></swiper>
</template>

列表组件

<script setup lang="ts">
import { OrderState } from '@/services/constants'
import { orderStateList } from '@/services/constants'
import { getMemberOrderAPI } from '@/services/order'
import type { OrderItem } from '@/types/order'
import type { OrderListParams } from '@/types/order'
import { onMounted, ref } from 'vue'// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()// 定义 porps
const props = defineProps<{orderState: number
}>()// 请求参数
const queryParams: OrderListParams = {page: 1,pageSize: 5,orderState: props.orderState,
}// 获取订单列表
const orderList = ref<OrderItem[]>([])
const getMemberOrderData = async () => {const res = await getMemberOrderAPI(queryParams)orderList.value = res.result.items
}onMounted(() => {getMemberOrderData()
})
</script><template><scroll-view scroll-y class="orders"><view class="card" v-for="order in orderList" :key="order.id"><!-- 订单信息 --><view class="status"><text class="date">{{ order.createTime }}</text><!-- 订单状态文字 --><text>{{ orderStateList[order.orderState].text }}</text><!-- 待评价/已完成/已取消 状态: 展示删除订单 --><text v-if="order.orderState >= OrderState.DaiPingJia" class="icon-delete"></text></view><!-- 商品信息，点击商品跳转到订单详情，不是商品详情 --><navigatorv-for="item in order.skus":key="item.id"class="goods":url="`/pagesOrder/detail/detail?id=${order.id}`"hover-class="none"><view class="cover"><image mode="aspectFit" :src="item.image"></image></view><view class="meta"><view class="name ellipsis">{{ item.name }}</view><view class="type">{{ item.attrsText }}</view></view></navigator><!-- 支付信息 --><view class="payment"><text class="quantity">共{{ order.totalNum }}件商品</text><text>实付</text><text class="amount"> <text class="symbol">¥</text>{{ order.payMoney }}</text></view><!-- 订单操作按钮 --><view class="action"><!-- 待付款状态：显示去支付按钮 --><template v-if="order.orderState === OrderState.DaiFuKuan"><view class="button primary">去支付</view></template><template v-else><navigatorclass="button secondary":url="`/pagesOrder/create/create?orderId=id`"hover-class="none">再次购买</navigator><!-- 待收货状态: 展示确认收货 --><view v-if="order.orderState === OrderState.DaiShouHuo" class="button primary">确认收货</view></template></view></view><!-- 底部提示文字 --><view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">{{ true ? '没有更多数据~' : '正在加载...' }}</view></scroll-view>
</template>

分页加载

分页加载的逻辑在之前我们已经学习过，本节就不再重复讲义的内容了，下拉刷新业务同理。

订单支付

订单支付功能之前我们已经学习过，也不再重复。

确认收货，删除订单等按钮的业务同理。

12.小兔鲜儿 - 项目打包

微信小程序端

把当前 uni-app 项目打包成微信小程序端，并发布上线。

核心步骤

1. 运行打包命令 pnpm build:mp-weixin
2. 预览和测试，微信开发者工具导入生成的 /dist/build/mp-weixin 目录
3. 上传小程序代码
4. 提交审核和发布

步骤图示

项目打包上线需要使用到多个工具，注意工具之间的职责。

VSCode ----> 微信开发者工具 ----> 微信公众平台

了解：开发者也可独立使用 miniprogram-ci 进行小程序代码的上传等操作。

::: tip 举一反三

打包成其他小程序端的步骤类似，只是更换了 打包命令 和 开发者工具 。

:::

条件编译

::: tip 常见问题

Q：按照 uni-app 规范开发可保证多平台兼容，但每个平台有自己的一些特性，该如何处理？

A：通过 条件编译，让代码按条件编译到指定平台。

:::

网页端不支持微信平台授权登录等功能，可通过 条件编译，实现不同端渲染不同的登录界面。

条件编译语法

通过特殊注释，以 #ifdef 或 #ifndef 加 平台名称 开头，以 #endif 结尾。

多平台编译：#ifdef H5 || MP-WEIXIN 表示在 H5 端 或 微信小程序端 代码。

条件编译支持: 支持 .vue, .ts, .js, .scss, .css, pages.json 等文件。

<script setup lang="ts">
// 微信平台特有API，需要条件编译
// #ifdef MP-WEIXIN
wx.login()
wx.requestPayment()
// #endif
</script><template><!-- 微信开发能力按钮，需要条件编译 --><!-- #ifdef MP-WEIXIN --><button open-type="openSetting">授权管理</button><button open-type="feedback">问题反馈</button><button open-type="contact">联系我们</button><!-- #endif -->
</template><style>
/* 如果出现样式兼容，也可添加条件编译 */
page {/* #ifdef H5 */background-color: pink;/* #endif */
}
</style>

::: tip 开发技巧

可通过搜索 wx. 和 open-type 等平台关键词，快速查找需要小程序端需添加编译模式的代码。

:::

打包为 H5 端

把当前 uni-app 项目打包成网页(H5)端，并配置路由基础路径。

核心步骤

1. 运行打包命令 pnpm build:h5
2. 预览和测试，使用浏览器打开 /dist/build/h5 目录下的 index.html 文件
3. 由运维部署到服务器

路由基础路径

默认的路由基础路径为 / 根路径，部分网站并不是部署到根路径，需要按运维要求调整。

// manifest.json
{/* 网页端特有配置 */"h5": {"router": {// 基础路径：./ 为相对路径"base": "./"}} /* 小程序特有相关 */,"mp-weixin": {// …省略},"vueVersion": "3"
}

打包为 APP 端

App 端 的打包，预览、测试、发行，使用 HBuilderX 工具。