vue.js 商城项目，未添加图片

于 2022-11-07 22:32:59 发布
阅读量171 收藏
点赞数 2
文章标签： vue.js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_62745929/article/details/127740998
版权

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的购物车</title>
		<link rel="stylesheet" type="text/css" href="css/help-center.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
				font-family: "微软雅黑";
				list-style: none;
				color: #666;
				text-decoration: none;
				font-size: 14px;
			}
			body {
				background:url("img/3k.webp");
				height: 100%;
			}
			.header{
			font-size: 12px;
			border-bottom: 2px solid #ff6700;
			background: #fff;
			color: #b0b0b0;
			position: relative;
			z-index: 20;
			height: 100px;
		}
			.header .container {
			position: relative;
			width: 1226px;
			margin-right: auto;
			margin-left: auto;
		}
		 .header .container .header-logo {
			width: 93px;
			margin-top: 26px;
		}
		
		.logo {
			width: 48px;
			height: 48px;
			position: relative;
			display: block;
			width: 55px;
			height: 55px;
			overflow: hidden;
			background-color: #ff6700;
			}
			.header-title {
			float: left;
			margin-top: 26px;
			font-size: 12px;
			}
			.topbar-info {
			margin-top: 30px;
			line-height: 40px;
			}
			.link {
			padding: 0 5px;
			color: #757575;
			text-decoration: none;
			}
			.hid {
				overflow: hidden;
			}
			.left {
				float: left;
			}
			.box_head{
			position: relative;
			margin: 0;
			height: 50px;
			font-size: 30px;
			font-weight: 400;
			color: #757575;
			border-top: 1px solid #e0e0e0;
		  }
		  .box_head span{
		  	position: absolute;
			top: -20px;
			left: 372px;
			height: 40px;
			width: 482px;
			line-height: 40px;
			text-align: center;
			display: block;
			background-color: #f5f5f5;
			font-size: 30px;
			}
			#box {
				width:1240px;
				margin: 20px auto;
			}
			#box ul {
				margin-right: -14px;
				overflow: hidden;
			}
			#box li {
				width: 234px;
				float: left;
				margin-right: 14px;
				padding: 24px 0 20px;
				background: #FFF;
				text-align: center;
				position: relative;
				cursor: pointer;
				margin-bottom:14px;
			}
			.pro_img {
				width: 150px;
				height: 150px;
				margin: 0 auto 18px;
			}
			.pro_name {
				display: block;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				font-weight: 400;
			}
			.pro_name a {
				color: #333;
			}
			.pro_price {
				color: #ff6700;
				margin: 10px;
			}
			.pro_rank {
				color: #757575;
				margin: 10px;
			}
			#box li:hover .add_btn {
				display: block;
			}
			#box li:hover .pro_rank {
				opacity: 0;
			}
			#box li .add_btn:hover {
				background-color: #f60;
				color: white;
			}
			.add_btn {
				height: 22px;
				position: absolute;
				width: 122px;
				bottom: 28px;
				left: 50%;
				margin-left: -61px;
				line-height: 22px;
				display: none;
				color: #F60;
				font-size: 12px;
				border: 1px solid  #f60;
			}
			.car {
				width: 1240px;
				margin: 20px auto;
				background: #FFF;
			}
			.car .check{
				width: 50px;
			
			}
			.car .check i{
				color: #fff;
				display: inline-block;
				
				width: 18px;
				height: 18px;
				line-height: 18px;
				border: 1px solid #e0e0e0;
				margin-left: 24px;
				background-color: #fff;
				font-size: 16px;
				text-align: center;
				vertical-align: middle;
				position: relative;
				top: -1px;
				cursor: pointer;
				font-family: "iconfont";
			}
			.i_acity {
		
				border-color: #ff6700 !important;
				background-color: #ff6700 !important;
			}
			.car .img {
				width: 190px;
			}
			.car .img img {
				display: block;
				width: 80px;
				height: 80px;
				margin: 3px auto;
			}
			.car .name {
				width: 300px;
			}
			.car .name span {
				line-height: 1;
				margin-top: 8px;
				margin-bottom: 8px;
				font-size: 18px;
				font-weight: normal;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			.car .price {
				width: 144px;
				text-align: right;
				padding-right: 84px;
			}
			.car .price span {
				color: #ff6700;
				font-size: 16px;
			}
			.car .number{
				width: 150px;
			}
			.car .subtotal{
				width: 130px;
				
			}
			.car .ctrl {
				width: 105px;
				padding-right:25px;
				text-align: center;
			}
			.car .ctrl a {
				font-size: 20px;
				cursor: pointer;
				display: block;
				width: 26px;
				height: 26px;
				margin: 30px auto;
				line-height: 26px;
			}
			.car .ctrl a:hover {
				color: #FFF;
				background: #ff6700;
				border-radius: 50%;
			}
			.head_row {
				height: 70px;
				line-height: 70px;
			}
			.head_row, .row {
				border-bottom: solid 1px #e0e0e0;
			}
			.row {
				height: 86px;
				line-height:86px;
				padding: 15px 0;
				margin: 0px;
			}
			#sum_area{
				width:1240px;
				height: 60px;
				background: white;
				margin: 20px auto;
			}
			#sum_area #pay{
				width:250px;
				height:60px;
				text-align: center;
				float: right;
				line-height: 60px;
				font-size: 19px;
				background: #FF4B00;
				color: white;
			}
			#sum_area #pay_amout{
				width:250px;
				height:60px;
				text-align: center;
				float: right;
				line-height: 60px;
				font-size: 16px;
				color:#FF4B00 ;
			}
			#sum_area #pay_amout #price_num{
				width:100px;
				height: 60px;
				font-size: 25px;
				color:#FF4B00 ;
			/*	float: left;*/
			}
			
			.item_count_i{
				height: 85px;
				width:10%;
				/*border: 1px solid black;*/
				float: left;
				margin-right: 25px;
			}
			.num_count{
				width:150px;
				height:40px;
				border: 1.2px solid #E0E0E0;
				float:right;
				margin-top: 21px;
			
			}
			.count_i{
				width:30%;
				height:40px;
				line-height: 40px;
				float: left;
				text-align: center;
				font-size:21px;
				color: #747474;
			}
			.count_i:hover{
				width:30%;
				height:40px;
				line-height: 40px;
				float: left;
				text-align: center;
				font-size:21px;
				color: #747474;
				background: #E0E0E0;
				cursor: pointer;
			}
			.c_num{
				width:40%;
				height:40px;
				line-height: 40px;
				float: left;
				text-align: center;
				font-size:16px;
				color: #747474;
			}
			.count_d{
				width:30%;
				height:40px;
				line-height: 40px;
				float: left;
				text-align: center;
				font-size:25px;
				color: #747474;
			}
			.count_d:hover{
				width:30%;
				height:40px;
				line-height: 40px;
				float: left;
				text-align: center;
				font-size:25px;
				color: #747474;
				background: #E0E0E0;
				cursor: pointer;
			}
			.i_acity2 {
				border-color: #ff6700 !important;
				background-color: #ff6700 !important;
			}
		</style>
		<!-- 引入vue.js----必须否则不执行vue语法报错 -->
		<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{ message }}</p>
			<img src="img/ikun.jpg" >
			<div id="box">
				<h2 class="box_head"><span>赌狗天堂，以小博大</span></h2>
				<ul>
					<!-- v-for Vue循环语法 -->
					<li v-for="(item, index) in goodsList">
						<div class="pro_img">
							<img :src="item.imgUrl" width="150" height="150">
						</div>
						<h3 class="pro_name">
							<!-- {{}} Vue语法 用来渲染变量 -->
							<a href="#"> {{ item.proName }} </a>
						</h3>
						<p class="pro_price">{{ item.proPrice }}元</p>
						<p class="pro_rank">{{ item.proComm }}万人好评</p>
						<div
							class="add_btn"
							@click="addShop(item)">加入购物车</div>
					</li>
				</ul>
			</div>
			<div id="car" class="car">
				<div class="head_row hid">
					<div class="check left">
						<i
							:class="isCheckAll ? 'i_acity2' : ''"
							@click="checkAll()">√</i></div>
					<div class="img left">&nbsp;&nbsp;全选</div>
					<div class="name left">商品名称</div>
					<div class="price left">单价</div>
					<div class="number left">数量</div>
					<div class="subtotal left">小计</div>
					<div class="ctrl left">操作</div>
				</div>
				<div
					v-for="(item, index) in shopList"
					class="row hid">
					<div class="check left">
						<i
							:class="['i_check', item.check ? 'i_acity' : '']"
							@click="check(item)">√</i>
					</div>
					<div class="img left">
						<img :src="item.imgUrl" width="80" height="80">
					</div>
					<div class="name left">
						<span> {{ item.proName }} </span>
					</div>
					<div class="price left">
						<span>{{ item.proPrice }}元</span>
					</div>
					<div class="item_count_i">
						<div class="num_count">
							<div
								class="count_d"
								@click="reduction(item, index)">-</div>
							<div class="c_num">{{ item.proNumber }}</div>
							<div
								class="count_i"
								@click="add(item, index)">+</div>
						</div>
					</div>
					<div class="subtotal left">
						<span>{{ item.proTotal }}元</span>
					</div>
					<div class="ctrl left">
						<a
							href="javascript:;"
							@click="deleteShop(index)">×</a>
					</div>
				</div>
			</div>
			<div id="sum_area">
				<div
					id="pay"
					@click="goSettlement()">去结算</div>
				<div id="pay_amout">合计：<span id="price_num">{{ total }}</span>元</div>
			</div>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					message: '傻逼快给我下单',
					goodsList: [
						{
							"imgUrl": "img/1.png",
							"proName": " 手机盲盒1 ",
							"proPrice": "999",
							"proComm": "1"
						},
						{
							"imgUrl": "img/2.png",
							"proName": " 手机盲盒2 ",
							"proPrice": "99.9",
							"proComm": "2"
						},
						{
							"imgUrl": "img/3.png",
							"proName": " 手机盲盒3 ",
							"proPrice": "65",
							"proComm": "3"
						},
						{
							"imgUrl": "img/4.png",
							"proName": " 手机盲盒4 ",
							"proPrice": "149",
							"proComm": "4"
						},
						{
							"imgUrl": "img/5.png",
							"proName": "手机盲盒5  ",
							"proPrice": "750",
							"proComm": "5"
						},
						{
							"imgUrl": "img/6.png",
							"proName": " 手机盲盒6  ",
							"proPrice": "199",
							"proComm": "6"
						},
						{
							"imgUrl": "img/7.png",
							"proName": " 手机盲盒7",
							"proPrice": "19.9",
							"proComm": "7"
						},
						{
							"imgUrl": "img/8.png",
							"proName": "  手机盲盒8 ",
							"proPrice": "45",
							"proComm": "8"
						},
						{
							"imgUrl": "img/6.png",
							"proName": "  手机盲盒9  ",
							"proPrice": "207",
							"proComm": "9"
						},
						{
							"imgUrl": "img/5.png",
							"proName": " 手机盲盒10 ",
							"proPrice": "199",
							"proComm": "10"
						}
					],
					shopList: [],
					total: 0,
					isCheckAll: false
				},
				methods: {
					addShop(item) {
						// 添加购物车
						this.shopList.push({
							...item,
							proNumber: 1,
							proTotal: item.proPrice,
							check: false
						});
						// 购物车去重若存在相同名称的商品则去重不（即不重复添加）
						const hash = {};
						this.shopList = this.shopList.reduce((item, next)=>{
							hash[next.proName] ? '' : hash[next.proName] = true && item.push(next);
							return item;
						},[])
					},
					reduction(item, index) {
						// 商品数量减
						if (this.shopList[index].proNumber > 1) {
							// 最小数量为1
							--this.shopList[index].proNumber;
							this.shopList[index].proTotal = (this.shopList[index].proNumber * this.shopList[index].proPrice).toFixed(1);
						}
					},
					add(item, index) {
						// 商品数量加
						++this.shopList[index].proNumber;
						this.shopList[index].proTotal = (this.shopList[index].proNumber * this.shopList[index].proPrice).toFixed(1);
					},
					deleteShop(index) {
						// 移除商品
						this.shopList.splice(index, 1);
						this.calculateTotalPrice();
					},
					check(item) {
						// 小计
						item.check = true;
						this.calculateTotalPrice();
					},
					calculateTotalPrice() {
						// 计算总价
						this.total = 0;
						this.shopList.map(item => {
							if (item.check) {
								this.total += Number(item.proTotal);
							}
						});
					},
					checkAll() {
						// 全选
						this.isCheckAll = !this.isCheckAll; // 全选与反全选
						this.shopList.map(item => {
							item.check = this.isCheckAll;
						});
						this.calculateTotalPrice();
					},
					goSettlement() {
						// 去结算
						window.location.href='订单.html';
					}
				}
			})
		</script>
	</body>
</html>

唯欲
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值