商城小程序（8.购物车页面）

目录

  • 一、商品列表区域
    • 1、渲染购物车商品列表的标题区域
    • 2、渲染商品列表区域的基本结构
    • 3、为my-goods组件封装radio勾选状态
    • 4、为my-goods组件封装radio-change事件
    • 5、修改购物车中商品的选择状态
    • 6、为my-goods组件封装NumberBox
    • 7、为my-goods封装num-change事件
    • 8、修改购物车商品数量
    • 9、渲染滑动删除的UI效果
    • 10、实现滑动删除的功能
  • 二、收货地址区域
    • 1、渲染收货地址组件
    • 2、实现收货地址区域的按需展示
    • 3、实现选择收货地址的功能
    • 4、将address信息存储到vuex中
    • 5、将store中的address持久化存储到本地
    • 6、将addstr抽离为getters
    • 7、重新选择收货地址
  • 三、结算区域
    • 1、渲染结算组件
    • 2、动态渲染已勾选商品的总数量
    • 3、动态渲染全选按钮的选中状态
    • 4、实现商品的全选/反选功能
    • 5、动态渲染已勾选商品的总价格
    • 6、动态计算购物车徽标的数值
    • 7、渲染购物车为空的页面

一、商品列表区域

本章主要完成pages下的cart购物页面编写
在这里插入图片描述

1、渲染购物车商品列表的标题区域

定义如下UI结构

<template><view><!-- 商品列表的标题区域 --><view class="cart-title"><!-- 左侧的图标 --><uni-icons type="shop" size="18"></uni-icons><!-- 右侧的文本 --><text class="cart-title-text">购物车</text></view></view>
</template>

美化样式

<style lang="scss">.cart-title {height: 40px;display: flex;align-items: center;padding-left: 5px;border-bottom: 1px solid #EFEFEF;.cart-title-text {font-size: 14px;margin-left: 10px;}}
</style>

在这里插入图片描述

2、渲染商品列表区域的基本结构

通过 mapState 辅助函数，将Store中的cart数组映射到当前页面中使用：

在这里插入图片描述

在UI结构中，通过v-for渲染自定义组件my-goods

在这里插入图片描述

3、为my-goods组件封装radio勾选状态

打开my-goods.vue组件，为商品左侧图片区域添加radio足迹

在这里插入图片描述

并美化UI ，使radio组件和image组件左右布局
在这里插入图片描述
在这里插入图片描述
使用v-if控制radio组件的按需展示

在这里插入图片描述

修改cart.vue中的商品列表区域，给showRadio赋值true展示勾选框

在这里插入图片描述
动态绑定勾选框的选择值
在这里插入图片描述

购物车页面有勾选
在这里插入图片描述
而商品列表页面就没有了
在这里插入图片描述

4、为my-goods组件封装radio-change事件

在这里插入图片描述

在这里插入图片描述

5、修改购物车中商品的选择状态

在这里插入图片描述
导入mapMutations这个辅助函数，从而将需要的mutations方法映射到当前页面中
在这里插入图片描述

每次点击勾选状态就能随时跟新，并且重新编译，保存上次的状态实现持久化

在这里插入图片描述

6、为my-goods组件封装NumberBox

修改my-goods.vue组件的源代码，在goods-info-box的view组件内部渲染Numberbox组件的基本内容，并绑定商品数量

在这里插入图片描述

美化样式

		.goods-item-right{display: flex;flex: 1;flex-direction: column;justify-content: space-between;.goods-name{font-size: 13px;}.goods-info-box{display: flex;justify-content: space-between;align-items: center;.goods-price{color: #C00000;font-size: 16px;}}}

控制numberbox的按需展示
在这里插入图片描述
my-goods页面用v-if绑定是否显示 默认为false不显示
在这里插入图片描述
在cart页面将shownum值赋值true展示num框
在这里插入图片描述
商品列表页面就没有数字选择框
在这里插入图片描述
在这里插入图片描述

7、为my-goods封装num-change事件

在这里插入图片描述

最后在my-goods.vue组件的methods节点中，定义numChangeHandler事件处理函数：

在这里插入图片描述

8、修改购物车商品数量

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
现在通过numbox修改商品数量，刷新页面后同样持久化存储
在这里插入图片描述

9、渲染滑动删除的UI效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

10、实现滑动删除的功能

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

我们把没有图片展示的商品都删除（这是之前我自己写的一个小bug，在goods-detail页面中，加入购物车功能持久化保存商品中的goods_small_logo拼写错了，之前写的samll所以添加的商品都没图片）
在这里插入图片描述
现在展示删除功能
在这里插入图片描述
在这里插入图片描述

二、收货地址区域

右键components，新建我们的收货地址组件

在这里插入图片描述

1、渲染收货地址组件

定义基本UI结构

<template><view><!-- 选择收货地址的盒子 --><view class="address-choose-box"><button type="primary" size="mini" class="btnChooseAddress">请选择收货地址</button></view><!-- 渲染收货信息的盒子 --><view class="address-info-box"><view class="row1"><view class="row1-left"><view class="username">收货人： kirito</view></view><view class="row1-right"><view class="phone">电话：1586xxxxxx</view><uni-icons type="arrowright" size="16"></uni-icons></view></view><view class="row2"><view class="row2-left">收货地址： </view><view class="row2-right">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</view></view></view><!-- 底部的边框线 --><image src="/static/gouwuchehenjiemian.png" class="address-border"></image></view>
</template>

美化

<style lang="scss">.address-border {display: block;width: 100%;height: 5px;}.address-choose-box {height: 90px;display: flex;justify-content: center;align-items: center;}.address-info-box {font-size: 12px;height: 90px;display: flex;flex-direction: column;justify-content: center;padding: 0 5px;.row1 {display: flex;justify-content: space-between;.row1-left {.username {}}.row1-right {display: flex;justify-content: space-between;.phone {}}}.row2 {display: flex;justify-content: space-between;align-items: center;margin-top: 10px;.row2-left {white-space: nowrap;}.row2-right {}}}
</style>

在cart购物车页面，引用收货地址组件
在这里插入图片描述

在这里插入图片描述

2、实现收货地址区域的按需展示

在这里插入图片描述
address为空时，只展示一个选择收货地址
在这里插入图片描述

3、实现选择收货地址的功能

在这里插入图片描述
在manifest.json中赋予权限，才能调用chooseaddress的api接口
在这里插入图片描述

因为新版接口不用解构的问题，我们可以把上面的chooseAddress方法改一下
在这里插入图片描述
数据在UI结构中回显
在这里插入图片描述

页面调试：选择收货地址

在这里插入图片描述
在这里插入图片描述

确定之后成功展示回显数据
在这里插入图片描述

4、将address信息存储到vuex中

在这里插入图片描述
在这里插入图片描述

export default {// 开启命名空间namespaced: true,//数据state: () => ({address: {}}),//方法mutation: {// 更新收货地址updateAddress(state, address) {state.address = address}},getters: {}
}

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
选择完地址后，我们重新编译程序，也能看到地址信息。
在这里插入图片描述

5、将store中的address持久化存储到本地

修改store/user.js：

export default {// 开启命名空间namespaced: true,//数据state: () => ({address: JSON.parse(uni.getStorageSync('address') || '{}')}),//方法mutations: {// 更新收货地址updateAddress(state, address) {state.address = addressthis.commit('m_user/saveAddressToStorage')},// 持久化存储addresssaveAddressToStorage(state) {uni.setStorageSync('address', JSON.stringify(state.address))}},getters: {}
}

重新编译 一样有效果
在这里插入图片描述

6、将addstr抽离为getters

为了提高代码的复用性，可以把收货地址的详细地址抽离为getters，方便在多个页面和组件之间实现复用

在这里插入图片描述

7、重新选择收货地址

在这里插入图片描述

三、结算区域

创建结算组件

在这里插入图片描述

在cart页面调用结算组件
在这里插入图片描述

1、渲染结算组件

结算组件的UI结构：

<template><view class="my-settle-container"><!-- 全选 --><label class="radio"><radio color="#C00000" :checked="true" /><text>全选</text></label><!-- 合计 --><view class="amount-box">合计：<text class="amount"></text></view><!-- 结算按钮 --><view class="btn-settle">结算（0）</view></view>
</template>

美化样式：

<style lang="scss">.my-settle-container {position: fixed;bottom: 0;left: 0;width: 100%;height: 50px;background-color: white;display: flex;justify-content: space-between;align-items: center;font-size: 14px;padding-left: 5px;.radio {display: flex;align-items: center;}.amount-box {.amount {color: #C00000;font-weight: bold;}}.btn-settle {background-color: #C00000;height: 50px;color: white;line-height: 50px;padding:0 10px;text-align: center;}}
</style>

在这里插入图片描述

2、动态渲染已勾选商品的总数量

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

3、动态渲染全选按钮的选中状态

在这里插入图片描述

为不全选时，下面全选按钮没有选中

在这里插入图片描述

4、实现商品的全选/反选功能

在这里插入图片描述
在这里插入图片描述

点灭全选按钮，上面全部的选择都取消了，点击单个选择，下面也会选中
在这里插入图片描述

5、动态渲染已勾选商品的总价格

在这里插入图片描述
在这里插入图片描述

6、动态计算购物车徽标的数值

在这里插入图片描述
在这里插入图片描述

加两件商品时，徽标成功增加

在这里插入图片描述

7、渲染购物车为空的页面

在这里插入图片描述

美化页面

	.cart-container {padding-bottom: 50px;}.cart-title {height: 40px;display: flex;align-items: center;padding-left: 5px;border-bottom: 1px solid #EFEFEF;.cart-title-text {font-size: 14px;margin-left: 10px;}}.empty-cart {display: flex;flex-direction: column;align-items: center;padding-top: 150px;.empty-img {width: 90px;height: 90px;}.tip-text {font-size: 12px;color: gray;margin-top: 15px;}}

删除所有商品后，页面返回
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于JavaWeb+BS架构+SpringBoot+Vue电影订票系统系统的设计和实现

基于JavaWeb+BS架构+SpringBoot+Vue电影订票系统系统的设计和实现

基于JavaWebBS架构SpringBootVue电影订票系统系统的设计和实现 文末获取源码Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 文末获取源码 Lun文目录 1 绪 论 3 1.1研究背景和意义 3 1.2拟解决的问题及特性 3 1.3论文的结构 …
阅读更多...
生物信息学导论-北大-序列比对基础知识

生物信息学导论-北大-序列比对基础知识

最近重新捡起coursera上的课了&#xff0c;这次准备好好学&#xff0c;把考试考了。。因此顺便记录一下学习过程。 ref: https://www.coursera.org/learn/sheng-wu-xin-xi-xue/home Sequence Alignment 序列比对 生物学问题 biological question: how to determine the simi…
阅读更多...
科技创新领航 ，安川运动控制器为工业自动化赋能助力

科技创新领航 ，安川运动控制器为工业自动化赋能助力

迈入工业4.0时代&#xff0c;工业自动化的不断发展&#xff0c;让高精度运动控制成为制造业高质量发展的重要技术手段。北京北成新控伺服技术有限公司作为一家集工业自动化产品销售、系统设计、开发、服务于一体的高新技术企业&#xff0c;其引进推出的运动控制产品一直以卓越的…
阅读更多...
libcurl开源库的编译与使用全攻略

libcurl开源库的编译与使用全攻略

libcurl简介 libcurl 是一个广泛使用的、支持多种协议的、开源的客户端URL传输库&#xff0c;提供了许多用于数据传输的API&#xff0c;例如文件传输、FTP、HTTP、HTTPS、SMTP等。libcurl 的主要特点包括 支持多种协议&#xff1a;libcurl 支持多种协议&#xff0c;如 HTTP、F…
阅读更多...
thinkphp美容SPA管理系统源码带文字安装教程

thinkphp美容SPA管理系统源码带文字安装教程

thinkphp美容SPA管理系统源码带文字安装教程 运行环境 服务器宝塔面板 PHP 7.0 Mysql 5.5及以上版本 Linux Centos7以上 基于thinkphp3.23B-JUI1.2开发&#xff0c;权限运用了Auth类认证&#xff0c;权限可以细分到每个功能&#xff0c; 增删改查功能一应俱全&#xff0c;整合了…
阅读更多...
基于YOLOv5的道路标志识别项目（yolov5界面GUI）

基于YOLOv5的道路标志识别项目（yolov5界面GUI）

基于YOLOv5的道路标志识别项目&#xff08;yolov5界面GUI&#xff09; English | 简体中文 这是一个关于yolov5的道路标志识别项目&#xff0c;使用Pyqt5开发界面&#xff0c;Yolov5训练模型&#xff0c;数据库Mysql&#xff0c;包含五个模块&#xff1a;初始化参数、标志识别…
阅读更多...
vim基本操作命令

vim基本操作命令

一、vi简介 vi是“Visual interface”的简称&#xff0c;它在Linux上的地位就仿佛Edit程序在DOS上一样。它可以执行输出、删除、查找、替换、块操作等众多文本操作&#xff0c;而且用户可以根据自己的需要对其进行定制。Vi不是一个排版程序&#xff0c;它不象Word或WPS那样可以…
阅读更多...
React18-树形菜单-递归

React18-树形菜单-递归

文章目录 案例分析技巧通信展示效果实现代码技巧点技巧点 Refer to 案例分析 https://github.com/dL-hx/manager-fe/commit/85faf3b1ae9a925513583feb02b9a1c87fb462f7 从接口获取城市数据,渲染出一个树形菜单 要求: 可以展开和收起 技巧 学会递归渲染出一个树形菜单, 并点击后…
阅读更多...
21道Java Spring MVC综合面试题详解含答案（值得珍藏）

21道Java Spring MVC综合面试题详解含答案（值得珍藏）

1.概述 1.1 什么是Spring MVC&#xff1f;简单介绍下你对Spring MVC的理解&#xff1f; Spring MVC是一个基于Java的实现了MVC设计模式的请求驱动类型的轻量级Web框架&#xff0c;通过把模型-视图-控制器分离&#xff0c;将web层进行职责解耦&#xff0c;把复杂的web应用分成…
阅读更多...
重定位，进程的创建,线程相关

重定位，进程的创建,线程相关

重定位 进程的重定位指将程序加载到内存中不同的位置执行&#xff0c;在进程换出换入过程中将会发生。通过更新程序中使用的相对地址。 进程的创建——fork&#xff08;&#xff09; 进程树&#xff0c;在自己的节点下创建进程节点。 使用fork&#xff0c;创建的子进程是父进…
阅读更多...
正则表达式、文件访问（Python实现）

正则表达式、文件访问（Python实现）

一、主要目的&#xff1a; 1.了解正则表达式的基本概念和处理过程。 2.掌握使用正则表达式模块 Re 进行字符串处理的方法。 3.了解文件的基本概念和类型。 4.掌握在 Python 中访问文本文件的方法和步骤。 5.熟悉在 Python 中访问二进制文件的方法和步骤。 二、主要内容和结…
阅读更多...
神州数码集团荣获“TiDB 社区最佳贡献企业”

神州数码集团荣获“TiDB 社区最佳贡献企业”

日前&#xff0c;神州数码在 TiDB 开源社区中获得了“TiDB 社区最佳贡献企业”奖。PingCAP 颁发该奖项以认可生态企业在社区中的卓越贡献和积极参与。 神州数码与 PingCAP 最早于 2020 年 12 月 28 日进行战略合作&#xff0c;基于全球领先的开源分布式关系型数据库 TiDB&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023