商城小程序（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 = address
			this.commit('m_user/saveAddressToStorage')
		},
		// 持久化存储address
		saveAddressToStorage(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.mfbz.cn/a/323496.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

[zabbix] zabbix监控

[zabbix] zabbix监控

一、温习zabbix自定义监控 二、zabbix 自动发现与自动注册 2.1 zabbix 自动发现 //zabbix 自动发现&#xff08;对于 agent2 是被动模式&#xff09; zabbix server 主动的去发现所有的客户端&#xff0c;然后将客户端的信息登记在服务端上。 缺点是如果定义的网段中的主机数…
阅读更多...
Linux进程【2】进程地址空间（+页表详解哦）

Linux进程【2】进程地址空间（+页表详解哦）

fork 引言&#xff08;程序地址空间&#xff09;进程地址空间进程地址空间mm_struct 虚拟地址到物理地址的转化总结 引言&#xff08;程序地址空间&#xff09; 在之前的学习过程中&#xff0c;我们认识了内存与地址&#xff0c;并且了解了在程序地址空间中的基本分区&#xf…
阅读更多...
C++ 之LeetCode刷题记录（十）

C++ 之LeetCode刷题记录（十）

&#x1f604;&#x1f60a;&#x1f606;&#x1f603;&#x1f604;&#x1f60a;&#x1f606;&#x1f603; 开始cpp刷题之旅&#xff0c;多学多练&#xff0c;尽力而为。 先易后难&#xff0c;先刷简单的。 66. 加一 给定一个由 整数 组成的 非空 数组所表示的非负整数…
阅读更多...
Alist开源网盘搭建

Alist开源网盘搭建

官网&#xff1a;https://alist.nn.ci/zh/github下载地址&#xff1a;https://github.com/alist-org/alist/releases gitcode上也提供了源码:https://gitcode.com/mirrors/alist-org/alist/tags 源码安装使用自己研究,这里不讲解,较为复杂 我使⽤的版本:v3.29.1 我的下载地址:…
阅读更多...
[ACM学习] 动态规划基础之一二三维dp

[ACM学习] 动态规划基础之一二三维dp

课内学习的动态规划 有记忆的迭代 优化解的结构&#xff1a;原始问题的一部分解是子问题的解 三要素&#xff1a;1.子问题 2.状态的定义 3.状态转移方程 定义 线性dp的一道例题 dp[i]表示以位置 i 结尾的方案总数&#xff0c;dp[4]2&#xff0c;因为&#xff1a;首先只放一…
阅读更多...
大数据开发之Hive(查询、分区表和分桶表、函数)

大数据开发之Hive(查询、分区表和分桶表、函数)

第 6 章&#xff1a;查询 6.1 基本语法及执行顺序 1、查询语句语法 select_expr, select_expr, ... FROM table_reference [WHERE where_condition] [GROUP BY col_list] [ORDER BY col_list] [CLUSTER BY col_list| [DISTRIBUTE BY col_list] [SORT BY col_list]] [LIMIT n…
阅读更多...
C#~Winform取消窗体最大化最小化按钮

C#~Winform取消窗体最大化最小化按钮

目录 取消最大化-false取消最小化-false效果 取消最大化-false 取消最小化-false 效果
阅读更多...
Umi3 创建，配置环境，路由传参（代码示例）

Umi3 创建，配置环境，路由传参（代码示例）

目录 创建项目 配置环境 创建脚手架 项目结构及其目录、 路由 配置路由 嵌套路由 编程式导航和声明式导航 声明式导航 编程式导航 约定式路由 路由传参 query传参&#xff08;问号&#xff09; 接收参数 params传参&#xff08;动态传参&#xff09; 接收参数 创…
阅读更多...
Android Text View 去掉默认的padding的实现方法

Android Text View 去掉默认的padding的实现方法

先看下最终实现效果&#xff0c;满意您在往下看&#xff1a; TextView 绘制的时候自带一定的Padding值&#xff0c;要想实现去掉默认的padding值&#xff0c;xml文件可以设置一个属性值 &#xff1a; android:includeFontPadding"false" 然后运行起来就会发现&…
阅读更多...
【总结】Dinky学习笔记

【总结】Dinky学习笔记

概述 Dinky 是一个开箱即用、易扩展&#xff0c;以 Apache Flink 为基础&#xff0c;连接 OLAP 和数据湖等众多框架的一站式实时计算平台&#xff0c;致力于流批一体和湖仓一体的探索与实践 官网&#xff1a;Dinky 核心特性 沉浸式&#xff1a;提供专业的 DataStudio 功能&a…
阅读更多...
喜好儿AI周报Weekly（第9期）CES2024 AI产业大爆发 | Rabbit R1 | 3D-Fauna | OLED屏幕 | Genie | MagicVideoV2 | Magnific

喜好儿AI周报Weekly（第9期）CES2024 AI产业大爆发 | Rabbit R1 | 3D-Fauna | OLED屏幕 | Genie | MagicVideoV2 | Magnific

各位观众朋友们大家好&#xff01;我是被老板派去出差逛CES2024 拉斯维加斯消费电子展差点迷路回不来的阿喜。一起去看看这一周有什么新鲜事吧。 本期导读&#xff1a; 逛逛CES 2024消费电子展Rabbit R1人工智能设备三星AI机器人BallieLG无线透明OLED屏幕Portalgraph VR空间投…
阅读更多...
【Linux】初识Linux及几个基本指令

【Linux】初识Linux及几个基本指令

Hello everybody!算算时间我已经有一个多月没有更新啦&#xff01;因为本专业是纺织工程&#xff0c;所以一直在复习应付期末考试\(0^◇^0)/。那好&#xff0c;废话不多说。让我们进入今天的主题&#xff01; 关于Linux系统可能很多同学不是很熟悉&#xff0c;有的人可能听过&…
阅读更多...
4、C语言：指针与数组

4、C语言：指针与数组

数组与指针 指针与地址指针与函数参数指针与数组地址算数运算字符指针与函数指针数组以及指向指针的指针多维数组命令行参数指向函数的指针复杂声明 指针是一种保存变量地址的变量。C语言中&#xff0c;指针的使用非常广泛&#xff0c;原因之一是&#xff0c;指针常常是表达某个…
阅读更多...
紫光展锐T610安卓核心板_虎贲T610安卓核心板参数

紫光展锐T610安卓核心板_虎贲T610安卓核心板参数

紫光展锐T610核心板是一款结构紧凑的4G智能模块&#xff0c;尺寸为52.5nm*38.5nm*2.9nm&#xff0c;适用于对产品结构尺寸要求较高的场合。该核心板搭载Android 11操作系统&#xff0c;采用12nm制程工艺&#xff0c;配备八核1.8GHz的CPU&#xff0c;包括2 x A751.8GHz 6 x A55…
阅读更多...
20240115在ubuntu20.04.6下查看显卡信息

20240115在ubuntu20.04.6下查看显卡信息

20240115在ubuntu20.04.6下查看显卡信息 2024/1/15 17:33 百度&#xff1a;ubuntu查看显卡型号命令 https://linux.xiaosiseo.com/post/6037.html#id4 Ubuntu查看显卡信息命令 小四LINUX7个月前 (05-22)Ubuntu3230 小四LINUX&#xff0c;是小四运营旗下网站&#xff0c;专注LIN…
阅读更多...
excel管理接口测试用例

excel管理接口测试用例

闲话休扯&#xff0c;上需求&#xff1a;自动读取、执行excel里面的接口测试用例&#xff0c;测试完成后&#xff0c;返回错误结果并发送邮件通知。 分析&#xff1a; 1、设计excel表格 2、读取excel表格 3、拼接url&#xff0c;发送请求 4、汇总错误结果、发送邮件 开始实现…
阅读更多...
短视频IP运营流程架构SOP模板PPT

短视频IP运营流程架构SOP模板PPT

【干货资料持续更新&#xff0c;以防走丢】 短视频IP运营流程架构SOP模板PPT 部分资料预览 资料部分是网络整理&#xff0c;仅供学习参考。 抖音运营资料合集&#xff08;完整资料包含以下内容&#xff09; 目录 抖音15秒短视频剧本创作公式 在抖音这个短视频平台上&#…
阅读更多...
QT报错记录

QT报错记录

Ubuntu22.04安装Qt之后启动Qt Creator报错&#xff1a; Fron 6.5.0, xcb-cursor0 or libxcb-cursor0 is needed to load the Qt xcb platforn plugin. Could not load. This application failed to start because no Qt platforn plugin could be initialized. Reinstalling t…
阅读更多...
OpenCV-Python(41):背景减除

OpenCV-Python(41):背景减除

目标 学习并掌握OpenCV中的背景减除方法 背景说明 在很多基础应用中背景检出都是一个非常重要的步骤。例如&#xff1a;顾客统计&#xff0c;使用一个静态摄像头来记录进入和离开房间的人数&#xff0c;或者是交通摄像头&#xff0c;需要提取交通工具的信息等。在所有的这些例…
阅读更多...
QT day6

QT day6

目录 思维导图 学生管理系统 思维导图 学生管理系统 ui界面 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QSqlDatabase> //数据库管理类 #include <QSqlQuery> //执行sql语句类 #include <QSqlRecord> //数据库记录类 …
阅读更多...
最新文章

Copyright @ 2022~2023