仿“拼多多”下单购买业务实现

一、页面展示

二、页面实现主要技术和难点

选择商品属性弹窗借助Mui组件实现。最难实现的应该是根据选择的商品属性动态的改变商品图片和价格，以及点击加减按钮，数量的变化以及总价钱的变化。页面间传值借助localStoage完成。（支付页面主要是页面间传值问题，比较简单，这里不再赘述，想看代码通过文章末尾源码地址获取）

三、关键代码讲解

选择商品属性业务实现

<!-- 选择商品规格 -->
		<div id="popover" class="mui-popover">
			<div id="item-select"></div>
			<div id="attr-title">请选择商品属性</div>
			<div id="attribute">
				<div id="attr-name"></div>
				<div id="attr-value"></div>
				<div id="changeNum">
					<span id="num-title">数量</span>
					<span id="change">
						<div id="lessen">-</div>
						<div id="num">0</div>
						<div id="add">+</div>
					</span>

				</div>
			</div>
			<div id="xiadan" class=" mui-bar mui-nav-tab">确定</div>
		</div>

//设置点击购买后弹出选择商品规格效果
		document.getElementById("purchase").addEventListener('tap', function() {
			$.ajax({
				url: "http://39.98.158.247:8040/item/detail",
				dataType: "json",
				data: {
					spu: type_id
				},
				success: function(data) {
					console.log(data);
					console.log(data.data[0].item_description);
					let obj = eval('(' + data.data[0].item_description + ')');
					let num = 1;
					let select_id = 0;
					let htmlContent2 = ""; //装载商品属性名
					let htmlContent3 = ""; //装载商品属性值
					let htmlContent5 = "";
					htmlContent5 +=
						`<span>${num}</span>`;
					$("#num").html(htmlContent5);
					//获取商品属性名
					for (var i = 0; i < obj.attributes.length; i++) {
						htmlContent2 +=
							`<span>${obj.attributes[i]}</span>`;
					}
					$("#attr-name").html(htmlContent2);

					//获取商品属性值
					for (var j = 0; j < data.data.length; j++) {
						obj = eval('(' + data.data[j].item_description + ')');
						htmlContent3 +=
							`<span class="attr-values" id="${j}">${obj.value}</span>`;
					}
					$("#attr-value").html(htmlContent3);
					//减少商品数量
					document.getElementById("lessen").addEventListener('tap', function() {
						let htmlContent5 = "";
						if (num > 0) {
							num--;
							// console.log(num);
						}
						htmlContent5 +=
							`<span>${num}</span>`;
						$("#num").html(htmlContent5);
						let htmlContent1 = ""; //装载选择的商品
						let price = data.data[select_id].item_price
						let totalP = 0;
						totalP = price * num;
						htmlContent1 +=
							`<img src="${data.data[select_id].item_img}"/>
						<span>￥${totalP}</span>`;
						$("#item-select").html(htmlContent1);
					})
					//增加商品数量
					document.getElementById("add").addEventListener('tap', function() {
						let htmlContent6 = "";
						num++;
						// console.log(num);
						htmlContent6 +=
							`<span>${num}</span>`;
						$("#num").html(htmlContent6);

						let htmlContent1 = ""; //装载选择的商品
						let price = data.data[select_id].item_price
						let totalP = 0;
						totalP = price * num;
						htmlContent1 +=
							`<img src="${data.data[select_id].item_img}"/>
							<span>￥${totalP}</span>`;
						$("#item-select").html(htmlContent1);

					})
					//根据选择的商品属性动态获取商品图片和价格
					for (var k = 0; k < data.data.length; k++) {
						document.getElementById(k).addEventListener('tap', function() {
							console.log(this.id);
							select_id = this.id;

							for (var m = 0; m < data.data.length; m++) {
								if (m == this.id) {
									document.getElementById(this.id).style.backgroundColor = "#d31b0e";
									document.getElementById(this.id).style.color = "white";
								} else {
									document.getElementById(m).style.backgroundColor = "#dfdfdf";
									document.getElementById(m).style.color = "#000000";
								}
							}
							let htmlContent1 = ""; //装载选择的商品
							let price = data.data[select_id].item_price
							let totalP = 0;
							totalP = price * num;
							htmlContent1 +=
								`<img src="${data.data[select_id].item_img}"/>
							<span>￥${totalP}</span>`;
							$("#item-select").html(htmlContent1);

						})
					}
					//点击确定按钮跳转到商品支付页
					document.getElementById("xiadan").addEventListener('tap', function() {
						window.open("pay-item.html", "_blank");
						localStorage.dataset = JSON.stringify(data);
						localStorage.id = select_id;
						localStorage.num = num;
					})
					mui('.mui-popover').popover('toggle', document.getElementById("openPopover"));
				},
				error: function() {
					console.log("request error");
				}
			})
		})
	}
}

四、源码资源

源码资源：源码地址

本文地址：https://blog.csdn.net/m0_45209576/article/details/107889536