小程序购物车-模拟京东购物车

山沟沟里的娃

已于 2022-08-31 19:29:13 修改

阅读量949

点赞数

分类专栏： js 小程序文章标签：小程序前端 javascript

于 2022-08-31 19:22:06 首次发布

本文链接：https://blog.csdn.net/qq_34856863/article/details/126630373

版权

小程序同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

js文件

const app = getApp();
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		picUrl: app.globalData.bgUrl,
		isAllSelect: false,
		selectNum: 0,
		allPrice: 0,
		list: [
			{
				name: "店铺名称一",
				isSelect: 0,
				product: [
					{
						name: '衣服任洗',
						price: '32',
						num: '3',
						isSelect: 0
					},
					{
						name: '鞋靴任洗',
						price: '36',
						num: '1',
						isSelect: 0
					}
				]
			},
			
			{
				name: "店铺名称二",
				isSelect: 0,
				product: [
					{
						name: '衣服任洗',
						price: '35',
						num: '5',
						isSelect: 0
					},
					{
						name: '鞋靴任洗',
						price: '28',
						num: '1',
						isSelect: 0
					}
				]
			}
		]
	},
	onLoad(options) {
		
	},
	onShow() {

	},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom() {

	},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage() {

	},
	//单选商品
	productSelect(e){
		let {i, bigi} = e.currentTarget.dataset;
		this.numPriceFn(bigi,i)
	},
	//选中数据金额计算方法
	numPriceFn(bigi,i,type){
		let {list, selectNum, allPrice, isAllSelect} = this.data;
		let item = list[bigi].product[i];
		let itemPrice = (item.num*1) * (item.price*1);
		//商品单选
		if(!type){
			if(item.isSelect==1){
				item.isSelect = 0;
				selectNum = selectNum-item.num*1;
				allPrice = allPrice-itemPrice;
				isAllSelect = false;
			}else{
				item.isSelect = 1;
				selectNum = selectNum+item.num*1;
				allPrice = allPrice+itemPrice;
			}
		}
		if(type==1){
			if(item.isSelect != 1){
				item.isSelect = 1;
				selectNum = selectNum+item.num*1;
				allPrice = allPrice+itemPrice;
			}
		}
		if(type==2){
			item.isSelect = 0;
			selectNum = selectNum-item.num*1;
			allPrice = allPrice-itemPrice;
		}
		this.shopAllSelect(bigi,list)
		this.setData({
			list,
			selectNum,
			allPrice,
			isAllSelect
		},()=>{
			this.allSelect();
		})
	},
	//店铺商品单选是判断是否店铺所用商品是否选中
	shopAllSelect(i,list){
		if(list[i].product.filter(e => e.isSelect==0).length <= 0){
			list[i].isSelect = 1;
		}else{
			list[i].isSelect = 0;
		}
		this.setData({
			list
		})
	},
	//店铺全选方法
	shopSelectFn(e){
		let {i} = e.currentTarget.dataset;
		let {list} = this.data;
		if(list[i].isSelect == 0){
			list[i].isSelect = 1;
			list[i].product.map((e,j)=>{
				this.numPriceFn(i,j,1)
			});
		}else{
			list[i].isSelect = 0;
			list[i].product.map((e,j)=>{
				this.numPriceFn(i,j,2)
			});
			this.setData({
				isAllSelect: false
			})
		}
	},
	//总全选方法
	allSelectFn(){
		let {list, isAllSelect} = this.data;
		let type = null;
		if(isAllSelect){
			isAllSelect = false;
			type = 2;
		}else{
			isAllSelect = true;
			type = 1;
		}
		list.map((e,i)=>{
			e.product.map((a,j)=>{
				this.numPriceFn(i,j,type)
			})
		})
		this.setData({
			isAllSelect
		})
	},
	//判断全部按钮选中
	allSelect(){
		let {list} = this.data;
		this.setData({
			isAllSelect: list.filter(e => e.isSelect == 0).length > 0 ? false : true
		})
	},
	//数量
	numChange(e){
		console.log(e);
		let {num,i,bigI,types} = e.detail;
		// types  1加  2减  3输入
		let {list, allPrice, allSelect} = this.data;
		let itemNum = list[bigI].product[i].num;
		let itemPrice = list[bigI].product[i].price;
		if(list[bigI].product[i].isSelect==1){
			if(types==1){
				allSelect ++;
				allPrice = allPrice*1 + itemPrice*1
			}else if(types==2){
				allSelect --;
				allPrice = allPrice*1 - itemPrice*1
			}else if(types==3){
				allSelect = allSelect*1 - itemNum + num;
				allPrice = (allPrice*1 - itemPrice*1 * itemNum*1) + num*1 * itemPrice*1;
			}
		}
		list[bigI].product[i].num = num;
		this.setData({
			list,
			allPrice,
			allSelect
		})
	}
})

json文件

{
	"usingComponents": {},
	"navigationBarTitleText": "购物车"
}

wxml文件

<view class="shopItem" wx:for="{{list}}">
	<view class="shopName">
		<view class="left">
			<image class="select" bindtap="shopSelectFn" data-i="{{index}}" src="{{picUrl}}{{item.isSelect == '1' ? 'productSelectOn' : 'productSelect'}}.png"></image>
			<image class="icon" src="{{picUrl}}shopIcon.png"></image>
			<view class="h1">{{item.name}}</view>
			<view class="tag">自营</view>
			<image class="jt" src="{{picUrl}}selectRightJt.png"></image>
		</view>
		<view class="btn">优惠券</view>
	</view>
	<view class="productItem" wx:for="{{item.product}}" wx:for-item="a" wx:for-index="i">
		<image class="select" data-bigI="{{index}}" data-i="{{i}}" bindtap="productSelect" src="{{picUrl}}{{a.isSelect == '1' ? 'productSelectOn' : 'productSelect'}}.png"></image>
		<view class="product">
			<view class="pic">
				<image mode="aspectFill" class="aspectFillImg" src=""></image>
			</view>
			<view class="text">
				<view class="name wzyc">衣服/鞋靴任意洗</view>
				<view class="specs">
					<view class="i">衣鞋任洗,上门取送</view>
				</view>
				<view class="tagBox">
					<view class="tag">每100减10</view>
				</view>
				<view class="priceNum">
					<view class="price">￥<text>{{a.price}}</text></view>
					<number num="{{a.num}}" type="2" bigI="{{index}}" i="{{i}}" bindnumFn="numChange" />
				</view>
			</view>
		</view>
	</view>
</view>

<view class="pageBot">
	<view class="box">
		<view class="left" bindtap="allSelectFn">
			<image class="select" src="{{picUrl}}{{isAllSelect ? 'productSelectOn' : 'productSelect'}}.png"></image>
			<text>全选</text>
		</view>
		<view class="right">
			<view class="text">
				<view class="h3">已选{{selectNum}}件，<view class="priceBox">合计：<text>￥{{allPrice}}</text></view></view>
			</view>
			<view class="btn">去结算</view>
		</view>
	</view>
</view>
<view class="bKong"></view>
<view class="pageBotKong"></view>

wxss文件

page{
	background: #f5f5f5;
}
.shopItem{
	margin: 10rpx 20rpx 0;
	background: #fff;
	border-radius: 20rpx;
	padding: 0 30rpx 10rpx;
}
.bKong{
	height: 30rpx;
}
.shopName{
	height: 98rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.shopName .left{
	display: flex;
	align-items: center;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}
.shopName .left .select{
	width: 38rpx;
	height: 38rpx;
	margin: 0 20rpx 0 0;
}
.shopName .left .icon{
	width: 36rpx;
	height: 36rpx;
	margin: 0 20rpx 0 0;
}
.shopName .left .tag{
	padding: 0 5rpx;
	height: 28rpx;
	line-height: 28rpx;
	font-size: 20rpx;
	color: #fff;
	background: #ff5b0f;
	border-radius: 4rpx;
	margin: 0 0 0 10rpx;
}
.shopName .left .jt{
	width: 9rpx;
	height: 16rpx;
	margin: 0 0 0 10rpx;
}
.shopName .btn{
	width: 96rpx;
	height: 34rpx;
	text-align: center;
	line-height: 34rpx;
	font-size: 24rpx;
	color: #ff5b0f;
	background-color: #ffe0d2;
	border-radius: 17rpx;
}
.productItem{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.productItem .select{
	width: 38rpx;
	height: 38rpx;
}
.productItem .product{
	width: 592rpx;
	display: flex;
	align-items: center;
	margin: 0 0 20rpx;
	justify-content: space-between;
}
.productItem .pic{
	width: 200rpx;
	height: 200rpx;
	border-radius: 20rpx;
	overflow: hidden;
}
.productItem .text{
	width: 364rpx;

}
.productItem .text .name{
	font-size: 28rpx;
	font-weight: bold;
	margin: 0 0 10rpx;
}
.productItem .specs{
	display: flex;
	padding: 0 0 16rpx;
}
.productItem .specs .i{
	padding: 0 18rpx;
	height: 48rpx;
	line-height: 48rpx;
	border-radius: 24rpx;
	background: #eeeeee;
	color: #999;
}
.productItem .tagBox{
	display: flex;
	align-items: center;
	padding: 0 0 4rpx;
	min-height: 40rpx;
}
.productItem .tag{
	padding: 0 5rpx;
	height: 26rpx;
	font-size: 20rpx;
	color: #ff5b0f;
	line-height: 26rpx;
	border-radius: 6rpx;
	margin: 0 10rpx 10rpx 0;
	border: 2rpx solid #ff5b0f;
}
.productItem .priceNum{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.productItem .price{
	font-size: 24rpx;
	color: #f52d00;
	font-weight: bold;
}
.productItem .price text{
	font-size: 40rpx;
}
.pageBot{
	width: 100%;
	left: 0;
	bottom: 0;
	position: fixed;
	z-index: 10;
	background: #fff;
	box-shadow: 0rpx 0rpx 9rpx 0rpx 
		rgba(201, 201, 201, 0.5);
	padding-bottom: env(safe-area-inset-bottom);
}

.pageBot .box{
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}
.pageBot .left{
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #999;
}
.pageBot .left .select{
	width: 38rpx;
	height: 38rpx;
	margin: 0 10rpx 0 0;
}
.pageBot .right{
	display: flex;
	align-items: center;
}
.pageBot .right .btn{
	font-size: 28rpx;
	color: #fff;
	width: 202rpx;
	height: 74rpx;
	text-align: center;
	line-height: 74rpx;
	background-color: #ff4218;
	border-radius: 37rpx;
	margin: 0 0 0 25rpx
}
.pageBot .right .text{
	font-size: 22rpx;
	color: #999;
}
.pageBot .right .h3{
	font-size: 24rpx;
	display: flex;
	align-items: center;
}
.pageBot .right .priceBox{
	color: #333333;
}
.pageBot .right .priceBox text{
	color: #ff4309;
}
.pageBot .right .h4{
	padding: 10rpx 0 0;
}

.pageBotKong{
	height: 100rpx;
	padding-bottom: env(safe-area-inset-bottom);
}