UniappDay06

1.填写订单-渲染基本信息

1. 静态结构（分包）

2. 封装请求API

   import { http } from '@/utils/http'
   import { OrderPreResult } from '@/types/order'

   export const getmemberOrderPreAPI = () => {
   return http({
   method: 'GET',
   url: '/member/order/pre',
   })
   }

3. 初始化调用

   // 获取订单信息
   const orderPre = ref()
   const getmemberOrderPreData = async () => {
   const res = await getmemberOrderPreAPI()
   orderPre.value = res.result
   }
   // 初始化调用
   onLoad(() => {
   getmemberOrderPreData()
   })

4. 类型声明

5. 界面渲染

    <view class="goods">
      <navigator
        v-for="item in orderPre?.goods"
        :key="item.skuId"
        :url="`/pages/goods/goods?id=${item.id}`"
        class="item"
        hover-class="none"
      >
        <image class="picture" :src="item.picture" />
        <view class="meta">
          <view class="name ellipsis"> {{ item.name }} </view>
          <view class="attrs">{{ item.attrsText }} </view>
          <view class="prices">
            <view class="pay-price symbol">{{ item.payPrice }}</view>
            <view class="price symbol">{{ item.price }}</view>
          </view>
          <view class="count">x{{ item.count }}</view>
        </view>
      </navigator>
    </view>
    <!-- 吸底工具栏 -->

   {{ orderPre?.summary.totalPayPrice.toFixed(2) }} 提交订单

2. 收货地址

1. 计算默认收货地址

   const selectedAddress = computed(() => {
   // 查找默认收货地址
   return orderPre.value?.userAddresses.find((v) => v.isDefault)
   })

2. 地址列表页

3. 修改收货地址

   <view class="item-content" @tap="onChangeAddress(item)">

4. 收货地址Store

   import { AddressItem } from '@/types/address'
   import { defineStore } from 'pinia'
   import { ref } from 'vue'

   export const useAddressStore = defineStore('address', () => {
   const selectedAddress = ref()

   const changeSelectedAddress = (val: AddressItem) => {
   selectedAddress.value = val
   }

   return {
   selectedAddress,
   changeSelectedAddress,
   }
   })

5. 选中收货地址

   // 单纯的阻止冒泡，否则修改页面没法跳转
   @tap.stop="() => {}"

   // 修改收货地址
   const onChangeAddress = (item: AddressItem) => {
   //修改地址
   const addressStore = useAddressStore()
   addressStore.changeSelectedAddress(item)
   // 返回上一页
   uni.navigateBack()
   }

3.立即购买

1. 封装

   export const getmemberOrderPreNowAPI = (data: {
   skuId: string
   count: string
   addressId?: string
   }) => {
   return http({
   method: 'GET',
   url: '/member/order/pre/now',
   data,
   })
   }

2. 立即购买事件,跳转页面传参

   @buy-now="onBuyNow"

   // 立即购买
   const onBuyNow = (ev: SkuPopupEvent) => {
   // 跳转并传参
   uni.navigateTo({ url: /pagesOrder/create/create?skuId=${ev._id}&count=${ev.buy_num} })
   }

3. 立即购买

   // 页面参数
   const query = defineProps<{
   // 可有可无
   skuId?: string
   count?: string
   }>()

   // 获取订单信息
   const orderPre = ref()
   const getmemberOrderPreData = async () => {
   if (query.count && query.skuId) {
   const res = await getmemberOrderPreNowAPI({
   skuId: query.skuId,
   count: query.count,
   })
   orderPre.value = res.result
   } else {
   const res = await getmemberOrderPreAPI()
   orderPre.value = res.result
   }
   }

4.提交订单

1. 封装请求API

   // /member/order
   export const postMemberOrderAPI = (data: OrderCreateParams) => {
   return http<{ id: string }>({
   method: 'POST',
   url: '/member/order',
   data,
   })
   }

2. 类型声明文件

3. 提交按钮事件

4. 调用接口成功

5. 跳转订单详情

   // 提交订单
   const onOrderSubmit = async () => {
   if (!selectedAddress.value?.id) {
   uni.showToast({ title: '请选择收货地址' })
   }
   const res = await postMemberOrderAPI({
   addressId: selectedAddress.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,
   })
   // 关闭当前页面，再跳转
   uni.redirectTo({ url: /pagesOrder/detail/detail?id=${res.result.id} })
   }

6. 无收货地址交互

5.自定义导航栏交互

1. 导航栏左上角按钮，返回首页

   // 获取页面栈
   // pages是一个数组
   const pages = getCurrentPages()
   // 获取当前页面实例，数组最后一项
   const pageInstance = pages.at(-1) as any

2. 滚动驱动的动画

   // 页面渲染完毕，绑定动画效果d
   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,
   })
   })

6.订单状态渲染

1. 渲染订单状态