Vue仿淘宝购物车网页

最新推荐文章于 2023-10-18 11:00:00 发布
最新推荐文章于 2023-10-18 11:00:00 发布
阅读量3.7k 收藏 34
点赞数 4
分类专栏： Vue 文章标签： vue.js javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46077567/article/details/103965325
版权
本文介绍了使用Vue.js实现淘宝购物车页面的过程，包括全选、店铺全选、商品选择与删除、结算功能，以及页面底部的商品轮播图。通过实战练习提升Vue技能，同时也展示了项目的html、js和css代码段。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

用vue实现淘宝网页购物车页面，自己练习，有什么不足请多多指教
功能主要包括：

  1. 全选；
  2. 店铺全选；
  3. 商品的选中和删除
  4. 结算
  5. 页面下方展示商品的轮播图

效果图如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
数据是我模拟的

html部分：

<div id="container_full">
			<div id="header">
				<div id="headerTitlebox">
					<ul class="headerTitleboxes">
						<li 
						v-for="(item, index) in headerTitle1"
						:class="['headerTitle1', {'account': index === 0}, {'message': index === 1}, {'mobile': index === 2}]"
						><a href="javascripts:;">{
  {item.title}}</a></li>
					</ul>
					<ul class="headerTitleboxes">
						<li 
						v-for="(item, index) in headerTitle2"
						:class="['headerTitle2', {'shoppingcart': index === 5}, {'favorite': index === 4}]"
						><a href="javascripts:;">{
  {item.title}}</a></li>
					</ul>
				</div>
			</div>
			<div id="container">
				<div class="titleBox">
					<div class="iconBox">
						<img src="image/1.jpg" />
					</div>
					<div class="searchBox">
						<select v-model="selected">
							<option v-for="option in options" v-bind:value="option">{
  {option}}</option>
							</select><input :class="[isfacus ? 'unfacus' : '']" @click="showImg()" /><div><a href="javascripts:;">搜 索</a></div>
					</div>
				</div>
				<div id="shoppingcart">
					<div class="total">
						<div class="totalTitle">
							<a href="javascript:;">全部商品 <span>{
  {products_number}}</span></a href="javascript:;"><span></span><a href="javascript:;">降价商品</a><span></span><a>库存紧张</a>
						</div>
						<div class="totalPrice">
							<div>已选商品（不含运费）<span>{
  {selected_products == 0 ? '0.00' : (priceFilter(total_amount))}}</span></div><a href="javascript:;" :class="[selected_products == 0 ? 'amount_not_top' : 'amount_top']">结算</a>
						</div>
					</div>
					<div class="productTitle">
						<div class="td-check"><input type="checkbox" id="check_all" v-model="checked_all" @click="all_product_checked"><label for="check_all"> 全选</label></div>
						<div class="td-product">商品信息</div>
						<div class="td-price">单价</div>
						<div class="td-num">数量</div>
						<div class="td-total">金额</div>
						<div class="td-do">操作</div>
					</div>
					<!-- 购物车为空时 -->
					<template v-if="goods.length == 0">
						<div class="cart_empty">
							您的购物车还是空的哦，快去挑选您喜欢的东西吧
						</div>
					</template>
					<!-- 购物车不为空时 -->
					<template v-else>
						<div v-for="(shop, shop_index) in goods">
							<!-- 当店铺下面有已购买商品时显示店铺和商品信息 -->
							<div v-if="shop.list.length != 0">
								<!-- 商品详细标题 -->
								<div class="shop_inf">
									<ul>
										<li class="shop_inf_check_all">
											<input type="checkbox" v-model="shop.all_checked"  @click="shop_all_check(shop_index)"/>
										</li>
										<li>
											<img v-bind:src="shop.url" class="shop_icon"/>
										</li>
										<li><span>店铺：</span><a :href="shop.href">{
  {shop.shop_name}}</a></li>
										<li>
											<img src="image/kefu.png" class="shop_icon"/>
										</li>
										<li>
											<img src="image/youhui.png" v-if="shop.discount.length != 0" class="shop_icon" />
										</li>
									</ul>
								</div>
								<div v-for="(product, product_index) in shop.list" class="product"
									v-bind:class="[product.product_checked ? 'selected_styles' : '']"
								>
									<div class="product_description" v-if="product.product_description != ''">
										<div class="product_description_bg">{
  {product.product_description}}</div>
									</div>
									<div class="product_details">
										
										<!-- 商品是否选中 -->
										<div class="product_check">
											<input type="checkbox" v-model="product.product_checked" 
												v-on:click="product_checked_click(shop_index, product_index)" />
										</div>
										
										<!-- 商品图片 -->
										<div class="product_img">
											<img :src="product.url" style="width: 100px; height: 100px;"/>
										</div>
										
										<!-- 商品名称 -->
										<div class="product_shop_inf">
											<div class="product_shop_name">
												<a :href="product.href">{
  {product.product_name}}</a>
											</div>
										</div>
										
										<div class="product_shop_icon">
											<img src="image/card.png" title="支持信用卡" />
											<img src="image/promise.png" title="消费者保障服务,商家承诺如实描述" />
											<img src="image/sevendays.png" title="七天无理由" />
										</div>
										
										<!-- 尺寸颜色属性 -->
										<div class="product_type_select" :class="[product.edit_type? 'product_type_select_hover' : '']" @mouseenter="enter(shop_index, product_index)"
											@mouseleave="leave(shop_index, product_index)">
											<div class="product_type_all">
												<div class="product_edit" id="product_edit"
													v-if="product.edit_type"
													v-bind:class="[product.edit_type ? 'product_edit_type_true' : 'product_edit_type_false']">
													<button class="product_edit_button">编辑</button>
												</div>
												<div v-for="type in product.product_type" class="product_type">{
  {type.key}}：{
  {type.value}}</div>
											</div>
										</div>
										
										<!-- 商品价格 -->
										<div class="product_price">
											<div v-if="product.origin_price" class="product_price_origin">￥{
  {priceFilter(product.origin_price)}}</div>
											<div class="product_price_current">￥{
  {priceFilter(product.current_price)}}</div>
										</div>
										
										<!-- 商品数量 -->
										<div class="product_number">
											<div class="product_number_content">
												<div class="product_number_button">
													<button v-if="product.number > 1" @click="product_reduce(shop_index, product_index)">-</button>
												</div>
												<div class="product_number_input">
													<input type="text" v-model="product.number" readonly />
												</div>
												<div class="product_number_button" @click="product_add(shop_index, product_index)">
													<button>+</button>
												</div>
											</div>
										</div>
										
										<!-- 金额统计 -->
										<div class="product_amount">
											<div class="product_total_price">￥{
  {priceFilter(product_total_price(shop_index, product_index))}}</div>
										</div>
										
										<!-- 操作 -->
										<div class="product_operation" @mouseenter="enterOperation(shop_index, product_index)" @mouseleave="leaveOperation(shop_index, product_index)">
											<div>
												<a>移入收藏夹</a>
											</div>
											<div>
												<a @click="product_delete(shop_index, product_index)">删除</a>
											</div>
											<div>
												<a class="product_operation_good" v-if="product.edit_operation">相似宝贝</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</template>
				</div>
			</div>
			
			<!-- 底部页面 -->
			<div id="footer">
				<div class="foot_settle">
					<div class="footer_left">
						<ul>
							<li>
								<input type="checkbox" id="check_all" v-model="checked_all" @click="all_product_checked"><label for="check_all"> 全选</label>
							</li>
							<li><a href="javascript:;" @click="selected_delete">删除</a></li>
							<li><a href="javascript:;">清除失效宝贝</a></li>
							<li><a href="javascript:;">移入收藏夹</a></li>
							<li><a href="javascript:;">分享</a></li>
						</ul>
					</div>
					<div class="piece">已选商品 <strong class="piece_num">{
  {selected_products}}</strong> 件</div>
					<div class="totalMoney">合计 (不含运费) : <strong class="total_text">{
  {priceFilter(total_amount)}}</strong></div>
					<div class="settle_accounts">
						<button :class="[selected_products == 0 ? 'settle_button_not' : 'settle_button']" :disabled="selected_products == 0 ? true : false">结 算</button>
					</div>
				</div>
			</div>
		</div>
		
		<div id="my">
			<div class="index-content" >
				<div class="titlebox">
					<div class="product_title" @mouseenter="ismouse = true" @mouseleave="ismouse = false">
						<div class="totalTitle" v-for="(list, list_index) in lists" @mouseenter="enter(list_index)" @mouseleave="leave(list_index)">
							<a href="javascript:;" :class="[show(list_index) ? 'title_selected' : 'title_selected_not']">{
  {list.title_name}}</a><span v-if="list_index < (lists.length - 1)"></span>
						</div>
					</div>
					
				</div>
				<div class="listbox"  v-show="show(list_index)" v-for="(list, list_index) in lists">
					<template v-if="list.pages.length > 1">
						<div class="banner" v-for="(page, page_index) in list.pages" v-if="pageShow(list_index, page_index)">
							<div class="banner_box" v-for="(img, img_index) in page.imgs">
								<div class="img_box">
									<img :src="img.url"/>
								</div>
								<div class="img_price">{
  {img.current_price}}</div>
								<div class="img_detail"><a :href="img.href">{
  {img.detail}}</a> </div>
								<div class="img_num">销量：{
  {img.number}}</div>
							</div>
						</div>
						<div class="dot_box">
							<ul @mouseenter="ispage = true" @mouseleave="ispage = false"><li v-for="(page, page_index) in list.pages" 
							:class="[pageShow(list_index, page_index)? 'page_selected' : 'page_selected_not']"
							@mouseenter="enterDot(list_index, page_index)" @mouseleave="leaveDot(list_index, page_index)"><div></div></li></ul>
						</div>
					</template>
					<template v-if=" list .pages.length == 1">
						<div class="banner" v-for="(page, page_index) in list.pages">
							<div class="banner_box_small" v-for="(img, img_index) in page.imgs">
								<div class="img_box">
									<img :src="img.url"/>
								</div>
								<div class="img_price">{
  {img.current_price}}</div>
								<div class="img_detail"><a :href="img.href">{
  {img.detail}}</a> </div>
								<div class="img_num">销量：{
  {img.number}}</div>
							</div>
						</div>
					</template>
				</div>
				
			</div>
		</div>

js部分：


			window.onscroll = function(){
   
				function getScroll(){
   
					return{
   
						left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
						top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
					};
				};
				var stop = getScroll().top;
				var height = document.documentElement.clientHeight || document.body.clientHeight;
				var loc = stop + height;
				console.log(loc);
				if(loc > 900){
   
					document.getElementById('footer').style.position = 'static';
					
				}else{
   
					document.getElementById("footer").style.position = 'fixed';
				}
			}
			
			//导航栏
			var header = new Vue({
   
				el:'#header',
				data:{
   
					headerTitle1:[
						{
   title: '登录/注册'},
						{
   title: '消息'},
						{
   title: '手机逛淘宝'},
						{
   title: '淘宝网首页'},
					],
					headerTitle2:[
						{
   title: '网站导航'},
						{
   title: '联系客服'},
						{
   title: '千牛卖家中心'},
						{
   title: '商品分类'},
						{
   title: '收藏夹'},
						{
   title: '购物车'},
						{
   title: '我的淘宝'}
					],
					
				}
			})
			var searchBox = new Vue({
   
				el:'#container_full',
				data:{
   
					selected:'宝贝',
					options:['宝贝', '天猫', '店铺'],
					isfacus: true,
					ishover: false,
					istype: false,
					isshow: false,
					goods:[
						{
   
							shop_name: '妮妮美衣专柜',
							url:'image/store01.png',
							href: 'https://ninimy.taobao.com/shop/view_shop.htm?spm=a1z0d.6639537.1997196601.1.4f727484t60Dil&user_number_id=156723513',
							discount: [],
							all_checked: false,
							list: [
								{
   
									product_name: '万搭好物加厚高领打底衫长袖针织衫女坑条套头毛衣修身显瘦基本款',
									product_description:'普通商品',
									url:'image/good01.jpg',
									href:'https://item.taobao.com/item.htm?spm=a1z0d.6639537.1997196601.4.4f727484t60Dil&id=609304258906',
									edit_type: false,
									edit_operation: false,
									product_type: [
										{
   
											id: 1,
											key: '颜色分类',
											value: '杏色',	
										},
										{
   
											id: 2,
											key: '尺码',
											value: '均码'
										}
									],
									current_price: 69.00,
									origin_price: 0,
									number: 1,
									product_checked: false,
								},
								{
   
									product_name: '不挑人高领毛衣秋冬宽松套头上衣女袖子撞色针织毛线衣百搭显瘦',
									product_description: '普通商品',
									url:'image/good02.jpg',
									href:'https://item.taobao.com/item.htm?spm=a1z0d.6639537.1997196601.13.4f727484t60Dil&id=607442903741',
									edit_type: false,
									edit_operation: false,
									product_type: [
										{
   
											id: 1,
											key: '颜色分类',
											value: '灰色',
										},
										{
   
											id: 2,
											key: '尺码',
											value: '均码',
										},
									],
									current_price: 79.00,
									origin_price: 0,
									number: 1,
									product_checked: false,
								}
							]
						},
						{
   
							shop_name:'云朵工厂旗舰店',
							url: 'image/store02.png',
							href:'https://store.taobao.com/shop/view_shop.htm?spm=a1z0d.6639537.1997196601.21.4f727484t60Dil&user_number_id=1813235978',
							discount: [],
							all_checked: false,
							list:[
								{
   
									product_name:'云朵工厂秋冬新款休闲纯色围巾情侣长款仿羊绒围脖加大围巾披肩',
									product_description:'普通商品',
									url:'image/good03.jpg',
									href:'https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.181.4f727484Z9q0Lr&id=557264289179',
									edit_type: false,
									edit_operation: false,
									product_type: [
										{
   
											id: 1,
											key: '颜色分类',
											value:'银鼠灰色',
										}
									],
									current_price: 29.00,
									origin_price: 58.00,
									number: 1,
									product_checked: false,
								}
							]
						},
					],
					//其他属性数据
					checked_all: false,
					message:'hello'
				},
				methods:{
   
					showImg: function
最低0.47元/天 解锁文章
vue购物车简单页面
PoisonJF的博客
11-28 365
购物车页面: 需求：统计价格，按钮增删，移除，无数据展示购物车为空 ps：该页面为bilibili视频网站截图，粘于此处，奋勉己身 页面html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>书籍购物车</title> <link rel="stylesheet" href="style.css"> </hea
基于Vue.js实现的仿淘宝风格移动商城
lysBlog
02-21 2119
**基于Vue.js实现的仿淘宝风格移动商城**
vue实现的仿淘宝购物车功能详解
10-17
主要介绍了vue实现的仿淘宝购物车功能,结合完整实例形式较为详细的分析了vue.js仿淘宝购物车功能的具体样式、功能相关实现技巧与操作注意事项,需要的朋友可以参考下
vue仿淘宝商品详情demo
11-09
使用vue2仿照了淘宝商品详情以及加入购物车。包含的页面有首页、分类更多、商品详情，其中商品详情的加入购物车利用了vue的组件功能
vue搭建购物车页面
02-23
利用vue搭建购物车页面webpack打包vue，js文件，共享数据双向绑定，全选和反选以及计算功能
vue 简单的购物车页面案例
Drizzlejj的博客
12-27 6001
1.效果 2.实现的功能 （1）点击全选购物车所有的商品均被选中，并计算出总金额 （2）取消全选，金额为 0。 （3）增加购物车页面商品的数量，总金额也跟随变化。 （4）购物车商品限购 （5）删除商品 3.实现步骤： （1）从后台拿到加入了购物车商品的信息。为一个数组。 （2）新建一个列表，用 v-for 遍历这个数组 (3) 给全选按钮添加勾选状态，以及每一单项的状态改变事件 （4）给按钮添加点击事件和禁止按钮条件。 （5）计算总金额。 （6）添加删除事件，，并同步更新.
商城手机端vue仿淘宝商品详情demo
05-19
在“商城手机端vue仿淘宝商品详情demo”项目中，Vue.js 被用于构建一个类似淘宝的商品详情展示和购物车功能。Vue的核心特性包括数据绑定、组件系统和指令系统，使得开发者可以更高效地组织和管理代码。 1. **数据...
vue+element仿淘宝项目
06-17
【Vue+Element仿淘宝项目详解】 Vue.js是一个轻量级的前端JavaScript框架，以其易用性、灵活性和组件化的特点深受开发者喜爱。Element UI则是一个基于Vue.js的UI组件库，提供了一系列美观、实用的组件，如表格、...
【vue】仿淘宝商品详情---实现滚动显隐标签页&锚点导航
一位前行者的博客
11-08 2021
封装成组件复用的话，首先快捷键的每一项数据需要父组件传入；在父组件定义一个数组作为右侧导航栏的数据；由于左侧区域的某一块内容没有数据时，其对应的导航项不显示； 要给每一块的内容最外层绑定ref，是为了获取该dom元素，通过点击导航栏某一项时，让页面可以滚动到对应的元素内容； 导航在抽屉里做的，给最外层绑定ref=“drawer”，可以获取到当前页面最外层的dom元素，根据最外层容器的dom元素来获取滚动高度； 组件要接收导航栏数据、接收当前是否是抽屉(默认为抽屉，传false为普通正常页...
vue实现仿淘宝结账页面
weixin_30346033的博客
11-08 688
这个demo，是小颖基于之前的vue2.0在table中实现全选和反选 文章进行更新后的demo，主要功能呢，是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面，具体页面效果请看下面的动图：（如果大家发现有什么问题请及时提出帮小颖改正错误呦，谢谢啦嘻嘻） 效果图： 更新后的home.vue <template> <d...
仿淘宝购物车界面
06-06
仿淘宝购物车界面代码
html实现仿淘宝购物车功能
04-16
实现了淘宝的购物车功能，可添加购物车，删除商品，等等功能，界面美观
模仿淘宝网购物车纯JS实现
01-09
模仿淘宝网购物车纯JS实现，改变商品数量时，单个商品金额和购物车会跟着变动变动，支持删除。
原生js仿淘宝购物车页面.zip
07-11
实现效果： 原生js仿淘宝购物车页面，通过原生js实现淘宝购物车的效果，点击加减，数量的变化以及总价的变化，非常适合一些电商网站或者大型商城，php中文网推荐下载！
vue-购物车实例
05-02
这是一个Vue实例，其主要实现一个简单的购物车功能。用于实践Vue的数据绑定，条件，循环，父子通信，组件化等功能。 这个实例详细的实现说明，可查看博客：https://blog.csdn.net/xufang461010923/article/details/89743564
使用vue做一个“淘宝“项目——0
weixin_48462447的博客
03-23 2353
前言：1.搭建好vue环境 2.设置好镜像 一、设置好环境之后呢，要用cmd来创建项目 我这里是在c盘下创建的项目文件，这里的项目名是mall-mobile（可根据自己的需求改变盘符） vue create mall-mobile 创建完之后选中最后一个文件（上下选择，空格确认） 选中（*）用" √ "代替了，记住将 Linter/Formatter 取消勾选 (√)Choose Vue version(如果没有这个选项则光选下面三个就可以了) (√)Babel (√)Router (√)Vuex
vue仿淘宝结账订单
weixin_30707875的博客
02-27 806
<template> <div class="container"> <div class="checkout-title"> <span>购物车</span> </div> <table class="product_table"> <tbody> <templ...
基于Vue与Node.js的购物网站设计与实现-计算机毕业设计源码28500
weixin_bysj1330的博客
10-18 734
1.浏览商品：只要进入这个平台就可以查看各种商品，有生活各类所需要的商品，用户可以根据自己的需要自行浏览，选择自己心仪的商品。 2.查询商品：对于购买商品目标明确的用户，就可以在搜索栏里直接搜索自己想购买的商品，更快、更准确的找到商品。 3.个人信息：登记个人信息并注册就可以成为平台的会员，该模块包括姓名、性别、所在城市、账户余额、电话和电子邮件。 4.密码修改：这个模块中包括原密码、新密码和确认密码。
Vue全家桶实现一个Web App
weixin_33885253的博客
09-25 387
vue-jumei-app 好的生活，聚集美丽，成人之美！从现在做起！ 效果预览 ?预览地址：[请点我！在线预览，手机浏览或切换浏览器移动调试]() PS：google浏览器在切换不同的手机测试，需要重新刷新页面；安卓手机可能不适应 ?源码地址：Github在这里 项目描述 技术栈 Vue2.0全家桶 + axios +　Vuex...
vue仿淘宝购物车多选商品
最新发布
02-15
### 使用 Vue.js 实现淘宝购物车多选商品功能 为了实现类似于淘宝购物车的多选商品功能，在 Vue 中可以通过 `v-model` 绑定复选框的状态到数组中，从而追踪哪些商品被选中。下面是一个完整的示例： #### HTML 部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值