uni-app--》基于小程序开发的电商平台项目实战（七）完结篇

news2025/1/14 20:45:26

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、

🛺系列专栏：uni-app

🚲座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。

👀引言

        ⚓经过web前端的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了uni-app专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第二站就是uni-app开发，希望看到我文章的朋友能对你有所帮助。

        今天开始使用 vue3 + uni-app 搭建一个电商购物的小程序，因为文章会将项目的每一个地方代码的书写都会讲解到，所以本项目会分成好几篇文章进行讲解，我会在最后一篇文章中会将项目代码开源到我的GitHub上，大家可以自行去进行下载运行，希望本文章对有帮助的朋友们能多多关注本专栏，学习更多前端uni-app知识。然后开篇先简单介绍一下本项目用到的技术栈都有哪几个方面（阅读此次项目实践文章能够学习到的技术）：

uni-app：跨平台的应用开发框架，基于vue.js可以一套代码同时构建运行在多个平台。

pnpm：高性能、轻量级npm替代品，帮助开发人员更加高效地处理应用程序的依赖关系。

vue3：vue.js最新版本的用于构建用户界面的渐进式JavaScript框架。

typescript：JavaScript的超集，提供了静态类型检查，使得代码更加健壮。

pinia：vue3构建的Vuex替代品，具有响应式能力，提供非常简单的 API，进行状态管理。

uni-ui：基于vue.js和uni-app的前端UI组件库，开发人员可以快速地构建跨平台应用程序。

        如果是第一次接触uni-app并且想学习uni-app的朋友，我是不建议直接从此次实战项目开始看起，可以先阅读一下我以前的基础文章：什么是uniapp？如何开发uniapp？按部就班的学习可以让学习变得更轻松更容易上手哦，闲话少说我们直接开始今天的uni-app实战篇。

目录

订单详情

自定义导航栏交互

订单状态渲染

订单支付

待发货与待收货

删除订单

订单详情

接下来就到了我们目前项目的最后一个需求订单详情的实现，完成了订单详情功能，本实战项目也开始正式步入尾声了，我会在文章最后附上本实战项目的源代码，需要的朋友可以随时下载学习只求别忘了给作者项目一个 star 就行。接下来让我们一起完成最后的订单详情功能的实现吧！

学习是一件比较枯燥的事情，希望大家能够坚持下去，在泥泞中向光明奔赴！

自定义导航栏交互

当我们在填写订单页面中点击提交订单按钮之后，接下来就跳转到订单详情页面了，订单的详情页面也是需要在分包中进行，因为订单详情的页面我们需要设置自定义导航栏，当我们创建好分包页面之后需要在pages.json文件中设置自定义导航栏：

当我们设置完自定义导航栏之后，原本小程序自带的返回首页或者上一页的按钮就会被自定义导航栏覆盖掉从而不能进行点击，这里不符合用户常用需求，所以这里我们需要单独通过代码来实现：

<!-- 自定义导航栏: 默认透明不可见, scroll-view 滚动到 50 时展示 -->
<view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
  <view class="wrap">
    <navigator v-if="pages.length > 1" open-type="navigateBack" class="back icon-left">
      <uni-icons type="back" size="30"></uni-icons>
    </navigator>
    <navigator v-else url="/pages/home/home" open-type="switchTab" class="back icon-home">
      <uni-icons type="home" size="30"></uni-icons>
    </navigator>
    <view class="title">订单详情</view>
  </view>
</view>

后面的具体搭建代码就不再展示，可自行下载源代码进行研读，这里呈现的效果如下：

在导航栏中我们设置了一个过渡动画，这里借助了当前页面栈中的一个动画效果，具体的使用方式讲解可参考官方文档，具体代码如下：

// 获取页面栈
const pages = getCurrentPages()
// 获取当前页面实例，数组最后一项
const pageInstance = pages.at(-1) as any
// 页面渲染完毕，绑定动画效果
onReady(() => {
  // 动画效果,导航栏背景色
  pageInstance.animate(
    '.navbar',
    [{ backgroundColor: 'transparent' }, { backgroundColor: '#f8f8f8' }],
    1000,
    {
      scrollSource: '#scroller',
      timeRange: 1000,
      startScrollOffset: 0,
      endScrollOffset: 50,
    },
  )
  // 动画效果,导航栏标题
  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,
  })
})

呈现的效果如下：

订单状态渲染

接下来实现订单状态功能的实现，根据用户传递过来的商品id生成对应的订单详情，接下来我们开始编写相应的接口函数：

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

在订单详情页面调用该接口函数，将获取到的数据存储在响应式ref当中：

// 获取订单详情
const order = ref<OrderResult>()
const getMemberOrderByIdData = async () => {
  const res = await getMemberOrderByIdAPI(query.id || '1714616959061987329')
  order.value = res.result
}
onLoad(() => {
  getMemberOrderByIdData()
})

将所有的状态单独抽离出来封装成一个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: '已取消' },
]

通过判断当前有无订单来判断当前处于待支付状态：

借助uniapp提供的倒计时组件，进行待支付跳转的判断：

如果时间超时的话，将当前的状态改为已取消状态：

// 倒计时结束事件
const onTimeup = () => {
  // 修改订单状态已取消
  order.value!.orderState = OrderState.YiQuXiao
}

呈现的效果如下：

订单支付

接下来我们实现当我们点击等待付款中的去支付按钮，进行相关支付功能的实现，因为我是个人开发者，所以我的appid是不能调用支付的二维码的，所以这里我们需要设置模拟支付的情况，这里我也编写了两个支持按钮，一个是正式环境的支付另一个是开发环境的模拟支付，如下：

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

接下来在订单详情界面调用该api函数，如下：

// 订单支付
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: `/subpackage/payment/payment?id=${query.id}` })
}

当订单支付成功之后，我们跳转到支付结果页面，支付结果页面也是一个分包页面：

<template>
  <scroll-view class="viewport" scroll-y @scrolltolower="onScrolltolower">
    <!-- 订单状态 -->
    <view class="overview">
      <view class="status icon-checked">支付成功</view>
      <view class="buttons">
        <navigator
          hover-class="none"
          class="button navigator"
          url="/pages/home/home"
          open-type="switchTab"
        >
          返回首页
        </navigator>
        <navigator
          hover-class="none"
          class="button navigator"
          :url="`/subpackage/detail/detail?id=${query.id}`"
          open-type="redirect"
        >
          查看订单
        </navigator>
      </view>
    </view>
    <!-- 猜你喜欢 -->
    <SwGuess ref="guessRef" />
  </scroll-view>
</template>

呈现的结果如下：

待发货与待收货

待发货因为是商家的工作，这里我们编写一个API，用来模拟发货成功：

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

首先我们先判断当前是否处于开发环境并处于待发货状态，并且给其设置了一个点击函数：

我们在回调函数中判断当前处于开发环境时调用API函数进行相应的模拟发货，并更改订单状态：

// 是否为开发环境
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
  }
}

然后我们再编写一个确认收获的API，如下：

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

和上面一样，这里需要我们判断一下当前是否处于待发货状态：

给其设置了一个回调函数，弹窗提示用户相关信息：

// 确认收货
const onOrderConfirm = () => {
  // 二次确认弹窗
  uni.showModal({
    content: '为保障您的权益，请收到货并确认无误后，再确认收货',
    confirmColor: '#27BA9B',
    success: async (success) => {
      if (success.confirm) {
        const res = await putMemberOrderReceiptByIdAPI(query.id)
        // 更新订单状态
        order.value = res.result
      }
    },
  })
}

最终呈现的结果如下：

接下来实现待收货完成之后的订单物流的展示，这里也需要编写相应的API接口：

/**
 * 获取订单物流
 * @description 仅在订单状态为待收货，待评价，已完成时，可获取物流信息。
 * @param id 订单id
 */
export const getMemberOrderLogisticsByIdAPI = (id: string) => {
  return http<OrderLogisticResult>({
    method: 'GET',
    url: `/member/order/${id}/logistics`,
  })
}

编写完接口函数之后，这里我们需要监听当前已经完成了第三种状态之后才能获取物流信息：

这里我们将物流信息获取到的数据通过插值语法进行动态渲染：

最终呈现的结果如下：

删除订单

删除订单页只有当订单处于待评价的时候才会出现：

这里删除订单仍在要借助API函数，如下：

/**
 * 取消订单
 * @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,
  })
}

这里我们开始在删除按钮的回调函数中调用该接口函数，删除订单之后将会跳转到订单列表列表界面，这里的仍然要创建一个分包界面，用于存放订单列表界面，这里不再赘述：

// 删除订单
const onOrderDelete = () => {
  // 二次确认
  uni.showModal({
    content: '是否删除订单',
    confirmColor: '#27BA9B',
    success: async (success) => {
      if (success.confirm) {
        await deleteMemberOrderAPI({ ids: [query.id] })
        uni.redirectTo({ url: '/subpackage/list/list' })
      }
    },
  })
}

最终呈现的结果如下：

没写完，写到快11点，手已经麻木了，就这样吧。明天继续将剩下的内容写完。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1108408.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

OSG粒子系统特效-----雨雪、爆炸、烟雾

OSG粒子系统特效-----雨雪、爆炸、烟雾

1、烟雾效果 飞机坠毁 陨石坠落 源码&#xff1a; // CMyOSGParticle.cpp : 此文件包含 "main" 函数。程序执行将在此处开始并结束。 //#include <iostream> #include <windows.h> #include <osgViewer/Viewer>#include <osg/Node> #inc…
阅读更多...
动态规划:从入门到入土系列(二)

动态规划:从入门到入土系列(二)

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f43b;推荐专栏2: &#x1f354;&#x1f35f;&#x1f32f;C语言进阶 &#x1f511;个人信条: &#x1f335;知行合一 前言 一、…
阅读更多...
AI AIgents时代-（五.）Autogen

AI AIgents时代-（五.）Autogen

由微软开发的 Autogen 是一个新的 Agents 项目&#xff0c;刚一上线就登上GitHub热榜&#xff0c;狂揽11k星✨✨✨ 项目地址&#xff1a;https://github.com/microsoft/autogen Autogen 允许你根据需要创建任意数量的Agents&#xff0c;并让它们协同工作以执行任务。它的独特之…
阅读更多...
LeetCode算法栈—有效的括号

LeetCode算法栈—有效的括号

目录 有效的括号 用到的数据结构&#xff1a; 位运算、Map 和 Stack Stack 常用的函数&#xff1a; 题解&#xff1a; 代码&#xff1a; 运行结果; 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符…
阅读更多...
SpringBoot2.x简单集成Flowable

SpringBoot2.x简单集成Flowable

环境和版本 window10 java1.8 mysql8 flowable6 springboot 2.7.6 配置 使用IDEA创建一个SpringBoot项目 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.…
阅读更多...
GitHub下载太慢的解决方案

GitHub下载太慢的解决方案

修改hosts文件&#xff1a; windows的hosts文件在 C:\Windows\System32\drivers\etc\hosts cmd管理员运行命令notepad C:\Windows\System32\drivers\etc\hosts 然后cmd命令重启网络ipconfig /flushdns windows修改hosts Ubuntu22.04修改hosts sudo vim /etc/hosts # This fil…
阅读更多...
RK3288 Android11 mini-pcie接口 4G模组EC200A适配（含自适应功能）

RK3288 Android11 mini-pcie接口 4G模组EC200A适配（含自适应功能）

这里写目录标题 1、修改驱动内核配置①使能USBNET功能②使能 USB 串口 GSM、CDMA 驱动③使能 USB 的 CDC ACM模式④使能PPP功能 2、使用lsusb命令查看是否识别到usb接口的“EC200A”4G模组3、在drivers/usb/serial/option.c添加VID和PID信息①添加VID和PID定义②在option_ids 数…
阅读更多...
找寻openSUSE的前世今生

找寻openSUSE的前世今生

找寻开始的地方 在一些资产管理平台、网管系统&#xff0c;完全依赖资产录入资产&#xff0c;假如存在SUSE类型网元&#xff0c;能否将SLES和openSUSE一同接入到SUSE类型下&#xff0c;就有待商榷了。 SLES和openSUSE是两个不同的Linux发行版&#xff0c;更准确说是两个不同的…
阅读更多...
基于PHP的蛋糕甜品商店管理系统设计与实现(源码+lw+部署文档+讲解等)

基于PHP的蛋糕甜品商店管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09; 代码参考数据库参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…
阅读更多...
python读写.pptx文件

python读写.pptx文件

1、读取PPT import pptx pptpptx.Presentation(rC:\Users\user\Documents\\2.pptx) # ppt.save(rC:\Users\user\Documents\\1.pptx) # slideppt.slides.add_slide(ppt.slide_layouts[1])# 读取所有幻灯片上的文字 for slide in ppt.slides:for shape in slide.shapes:if shape…
阅读更多...
[尚硅谷React笔记]——第4章 React ajax

[尚硅谷React笔记]——第4章 React ajax

目录&#xff1a; 脚手架配置代理_方法一 server1.js开启服务器server1:App.js解决跨域问题&#xff1a;脚手架配置代理_方法二 ​​​​​​​server2.js开启服务器server2第一步&#xff1a;创建代理配置文件编写setupProxy.js配置具体代理规则&#xff1a;App.js运行结果&a…
阅读更多...
js实现红包雨功能（canvas,react,ts），包括图片不规则旋转、大小、转速、掉落速度控制、屏幕最大红包数量控制等功能

js实现红包雨功能（canvas,react,ts），包括图片不规则旋转、大小、转速、掉落速度控制、屏幕最大红包数量控制等功能

介绍 本文功能由canvas实现红包雨功能&#xff08;index.tsx&#xff09;本文为react的ts版。如有其他版本需求可评论区观赏地址&#xff0c;需过墙 import React, { Component } from react; // import ./index.css; import moneyx from /assets/images/RedEnvelopeRain/bal…
阅读更多...
SEO业务适合什么代理IP？2023海外代理IP推荐排名

SEO业务适合什么代理IP？2023海外代理IP推荐排名

随着数字营销趋势的变化&#xff0c;搜索引擎优化仍然是企业在网络世界中努力繁荣的重要组成部分。为了实现 SEO 成功&#xff0c;从搜索引擎获取准确且多样化的数据至关重要&#xff0c;然而可能会受到诸如基于位置的限制和被检测风险等限制的阻碍&#xff0c;IP代理则可以帮助…
阅读更多...
百度开源分布式id生成器集成--真香警告

百度开源分布式id生成器集成--真香警告

百度开源分布式id生成器集成–真香警告 文章目录 [toc] 1.为什么需要分布式id生成器&#xff1f;2.常见id生成方案2.1 数据库表主键自增2.2 uuid2.3 雪花算法2.3.1 实现代码2.3.2 缺点的解决方案百度开源的分布式唯一ID生成器UidGenerator(本文重点讲解这个)Leaf--美团点评分布…
阅读更多...
gnome-terminal禁止关闭确认

gnome-terminal禁止关闭确认

当你想要关闭一个终端时&#xff0c;弹出“确认关闭&#xff1f;”多少有些烦。 比如当前为root下&#xff0c;要么一路exit&#xff0c;要么就点击确认&#xff1a; 解决方法&#xff1a; 安装一个配置编辑器来帮我们方便地编辑配置项 sudo apt install dconf-editor找到…
阅读更多...
小程序搭建OA项目首页布局界面

小程序搭建OA项目首页布局界面

首先让我们来学习以下Flex布局 一&#xff0c;Flex布局简介 布局的传统解决方案&#xff0c;基于盒状模型&#xff0c;依赖 display属性 position属性 float属性 Flex布局简介 Flex是Flexible Box的缩写&#xff0c;意为”弹性布局”&#xff0c;用来为盒状模型提供最大的…
阅读更多...
tomcat、nginx实现四层转发+七层代理+动静分离实验

tomcat、nginx实现四层转发+七层代理+动静分离实验

实验环境&#xff1a; nginx1——20.0.0.11——客户端 静态页面&#xff1a; nginx2——20.0.0.21——代理服务器1 nginx3——20.0.0.31——代理服务器2 动态页面&#xff1a; tomcat1——20.0.0.12——后端服务器1 tomcat2——20.0.0.22——后端服务器2 实验步骤&…
阅读更多...
什么是4K三路虚拟情景互动教学软件？

什么是4K三路虚拟情景互动教学软件？

4K三路虚拟情景互动教学软件具备了AI对话&#xff0c;场景库丰富自定义选择&#xff0c;画面色差调节&#xff0c;人物滤镜调节&#xff0c;截图编辑&#xff0c;视频录制与编辑&#xff0c;视频直播&#xff0c;画中画控制功能&#xff0c;字幕&#xff0c;图片和特效录入功能…
阅读更多...
sqlmap --os-shell选项原理解析

sqlmap --os-shell选项原理解析

文章目录 sqlmap --os-shell选项原理解析原理解析总结 sqlmap --os-shell选项原理解析 以sqli第一关为例。 --os-shell 是 SQLMap 工具的一个参数&#xff0c;用于在成功注入数据库后&#xff0c;执行操作系统命令并获取其输出。 sqlmap -u "http://192.168.188.199/sq…
阅读更多...
学信息系统项目管理师第4版系列31_信息系统工程

学信息系统项目管理师第4版系列31_信息系统工程

1. 信息系统战略三角突出了业务战略、信息系统和组织机制之间的必要一致性 1.1. 【高23上选07】 2. 软件工程 2.1. 软件工程方法是完成软件工程项目的技术手段&#xff0c;它支持整个软件生命周期 2.2. 软件工程使用的工具是人们在开发软件的活动中智力和体力的扩展与延伸 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023