小程序實現購物車完整版
更新時間：2021年07月26日 14:58:29 作者：皮皮灬蝦
這篇文章主要為大家詳細介紹了小程序實現購物車完整版，實現加減計算數量跟金額，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
小程序實現完整購物車[全選/反選計算金額/加減計算數量跟金額]，供大家參考，具體內容如下
一、wxml頁面代碼模塊
<view wx:if="{{hasList}}">
<view class="order_list">
<view class="order" wx:for="{{list}}" wx:key="{{index}}">
<view class="xuanze" wx:if="{{item.selected}}" catchtap="selectList" data-index="{{index}}">
<image src="/images/serch/xuanze.png" />
</view>
<view class="xuanze" catchtap="selectList" data-index="{{index}}" wx:else>
<image src="/images/serch/gouxuan.png" />
</view>
<!--列表商品圖片-->
<view class="order_img">
<image src="{{item.image}}" />
</view>
<view class="order_text">
<view class="text_top">
<!--列表標題-->
<view class="title">{{item.title}}</view>
<view class="detel" catchtap="deletes" data-index="{{index}}">
<image src="/images/serch/detel.png" />
</view>
</view>
<!--規(guī)格-->
<view class="size">規(guī)格：{{item.pro_name}}</view>
<view class="text_bottom">
<!--價格-->
<view class="money">￥{{item.price}}</view>
<!--商品數量加減-->
<view class="number">
<!--減按鈕-->
<view class="reduce" catchtap="btn_minus" data-obj="{{obj}}" data-index="{{index}}">
<!--按鈕圖片-->
<image src="/images/serch/jian-1.png" />
</view>
<!--數量-->
<view class="numb">{{item.num}}</view>
<!--加按鈕-->
<view class="add" catchtap="btn_add" data-index="{{index}}">
<!--按鈕圖片-->
<image src="/images/serch/add-1.png" />
</view>
</view>
</view>
</view>
</view>
</view>
<!--固定底部-->
<view class="buy">
<view class="buy_top">
<view class="top_left">
<view class="left_img" catchtap="selectAll" wx:if="{{selectAllStatus}}">
<image src="/images/serch/gouxuan.png" />
</view>
<view class="left_img" catchtap="selectAll" wx:else>
<image src="/images/serch/gouxuan.png" />
</view>
<view class="left_name">全選</view>
</view>
<view class="top_left">
<view class="left_img">
<image src="/images/serch/fenxiang.png" />
</view>
<view class="left_name">分享</view>
</view>
</view>
<view class="buy_bottom">
<view class="buy_left">
<view class="heji">合計：￥{{totalPrice}}</view>
</view>
<view class="buy_right">
<!--提交訂單-->
<view class="liji " catchtap="btn_submit_order">立即購買</view>
<view class="liji two active">預約試衣</view>
</view>
</view>
</view>
</view>
<!--購物車沒訂單-->
<view wx:else>
<view class="list_none">購物車是空的哦~</view>
</view>
二、樣式代碼
page {
background-color: rgba(238, 238, 238, 0.5);
}
.order {
height: 238rpx;
background-color: #fefeff;
margin: 27rpx;
border-radius: 4rpx;
display: flex;
align-items: center;
}
.xuanze {
width: 40rpx;
height: 40rpx;
/* background-color: darkgoldenrod; */
border-radius: 50%;
margin: 0 11rpx;
}
.xuanze image {
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
}
.order_img {
width: 180rpx;
height: 180rpx;
}
.order_img image {
width: 100%;
height: 100%;
display: block;
}
.order_text {
margin-left: 20rpx;
width: 58%;
height: 180rpx;
}
.text_top {
display: flex;
justify-content: space-between;
align-items: center;
}
.title {
width: 70%;
font-size: 28rpx;
color: #4b5248;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.detel {
width: 30rpx;
height: 30rpx;
}
.detel image {
width: 100%;
height: 100%;
display: block;
}
.size {
font-size: 24rpx;
color: #a8ada6;
}
.text_bottom {
display: flex;
margin-top: 50rpx;
align-items: center;
justify-content: space-between;
}
.money {
font-size: 30rpx;
color: #a5937f;
}
.number {
display: flex;
justify-content: space-around;
align-items: center;
width: 170rpx;
}
.reduce {
width: 46rpx;
height: 46rpx;
}
.reduce image {
width: 100%;
height: 100%;
display: block;
}
.numb {
font-size: 30rpx;
color: #a5937f;
}
.add {
width: 46rpx;
height: 46rpx;
}
.add image {
width: 100%;
height: 100%;
display: block;
}
/*購買按鈕*/
.buy {
height: 180rpx;
width: 696rpx;
position: fixed;
left: 27rpx;
bottom: 41rpx;
background-color: #555555f3;
border-radius: 4rpx;
}
.buy_top {
border-bottom: 1px solid rgb(98, 98, 99);
height: 75rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.top_left {
display: flex;
align-items: center;
}
.left_img {
width: 37rpx;
height: 37rpx;
margin: 11rpx;
}
.left_img image {
width: 100%;
height: 100%;
display: block;
}
.left_name {
font-size: 24rpx;
color: #fefeff;
margin-right: 29rpx;
}
.buy_bottom {
display: flex;
height: 104rpx;
justify-content: space-between;
align-items: center;
padding: 0rpx 30rpx 0rpx 12rpx;
}
.buy_left {
font-size: 26rpx;
color: #fff;
}
.buy_right {
display: flex;
align-items: center;
}
.liji {
width: 180rpx;
height: 70rpx;
border: 2rpx solid rgba(248, 248, 248, 1);
box-sizing: border-box;
border-radius: 4rpx;
line-height: 70rpx;
text-align: center;
font-size: 26rpx;
color: #FEFEFF;
}
.two{
margin-left: 12rpx;
}
.active{
background-color: #A5937F;
border: none;
}
三、js代碼模塊
Page({
/**
* 頁面的初始數據
*/
data: {
hasList: true, //默認展示列表數據
//商品列表數據
list: [{
id: 1,
title: '園藝大師抗皺精華露',
image: '/images/serch/2.png',
pro_name: "30ml",
num: 1,
price: 180,
selected: true
},
{
id: 2,
title: '伊芙琳玫瑰護手霜',
image: '/images/serch/1.png',
pro_name: "25g",
num: 1,
price: 62,
selected: true
},
{
id: 2,
title: '燕麥山羊乳舒緩護手霜',
image: '/images/serch/2.png',
pro_name: "75ml",
num: 1,
price: 175,
selected: true
}
],
//金額
totalPrice: 0, //總價，初始為0
//全選狀態(tài)
selectAllStatus: true, // 全選狀態(tài)，默認全選
},
/**
* 生命周期函數--監(jiān)聽頁面加載
*/
onLoad: function(options) {
},
/**
* 生命周期函數--監(jiān)聽頁面顯示
*/
onShow: function() {
wx.showToast({
title: '加載中',
icon: "loading",
duration: 1000
})
// 價格方法
this.count_price();
},
/** 當前商品選中事件 */
selectList(e) {
var that = this;
//獲取選中的 radio索引
var index = e.currentTarget.dataset.index;
//獲取到商品列表數據
var list = that.data.list;
//默認全選
that.data.selectAllStatus = true;
//循環(huán)數組數據，判斷--選中/未選中[selected]
list[index].selected = !list[index].selected;
//如果數組數據全部為selected[true],全選
for (var i = list.length - 1; i >= 0; i--) {
if (!list[i].selected) {
that.data.selectAllStatus = false;
break;
}
}
// 重新渲染數據
that.setData({
list: list,
selectAllStatus: that.data.selectAllStatus
})
// 調用計算金額方法
that.count_price();
},
// 刪除
deletes(e) {
var that = this;
// 獲取索引
const index = e.currentTarget.dataset.index;
// 獲取商品列表數據
let list = this.data.list;
wx.showModal({
title: '提示',
content: '確認刪除嗎',
success: function(res) {
if (res.confirm) {
// 刪除索引從1
list.splice(index, 1);
// 頁面渲染數據
that.setData({
list: list
});
// 如果數據為空
if (!list.length) {
that.setData({
hasList: false
});
} else {
// 調用金額渲染數據
that.count_price();
}
} else {
console.log(res);
}
},
fail: function(res) {
console.log(res);
}
})
},
/** 購物車全選事件 */
selectAll(e) {
// 全選ICON默認選中
let selectAllStatus = this.data.selectAllStatus;
// true ----- false
selectAllStatus = !selectAllStatus;
// 獲取商品數據
let list = this.data.list;
// 循環(huán)遍歷判斷列表中的數據是否選中
for (let i = 0; i < list.length; i++) {
list[i].selected = selectAllStatus;
}
// 頁面重新渲染
this.setData({
selectAllStatus: selectAllStatus,
list: list
});
// 計算金額方法
this.count_price();
},
/** 綁定加數量事件 */
btn_add(e) {
// 獲取點擊的索引
const index = e.currentTarget.dataset.index;
// 獲取商品數據
let list = this.data.list;
// 獲取商品數量
let num = list[index].num;
// 點擊遞增
num = num + 1;
list[index].num = num;
// 重新渲染 ---顯示新的數量
this.setData({
list: list
});
// 計算金額方法
this.count_price();
},
/**
* 綁定減數量事件
*/
btn_minus(e) {
// // 獲取點擊的索引
const index = e.currentTarget.dataset.index;
// const obj = e.currentTarget.dataset.obj;
// console.log(obj);
// 獲取商品數據
let list = this.data.list;
// 獲取商品數量
let num = list[index].num;
// 判斷num小于等于1 return; 點擊無效
if (num <= 1) {
return false;
}
// else num大于1 點擊減按鈕 數量--
num = num - 1;
list[index].num = num;
// 渲染頁面
this.setData({
list: list
});
// 調用計算金額方法
this.count_price();
},
// 提交訂單
btn_submit_order() {
var that = this;
console.log(that.data.totalPrice);
// 調起支付
// wx.requestPayment(
// {
// 'timeStamp': '',
// 'nonceStr': '',
// 'package': '',
// 'signType': 'MD5',
// 'paySign': '',
// 'success': function (res) { },
// 'fail': function (res) { },
// 'complete': function (res) { }
// })
wx.showModal({
title: '提示',
content: '合計金額-' + that.data.totalPrice + "暫未開發(fā)",
})
},
/**
* 計算總價
*/
count_price() {
// 獲取商品列表數據
let list = this.data.list;
// 聲明一個變量接收數組列表price
let total = 0;
// 循環(huán)列表得到每個數據
for (let i = 0; i < list.length; i++) {
// 判斷選中計算價格
if (list[i].selected) {
// 所有價格加起來 count_money
total += list[i].num * list[i].price;
}
}
// 最后賦值到data中渲染到頁面
this.setData({
list: list,
totalPrice: total.toFixed(2)
});
},
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了JS中的作用域鏈的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了js分析url獲取url參數，可以獲取?前面部分、#及后面部分，大家看代碼吧2013-12-12
這篇文章主要介紹了如何基于javascript實現貪吃蛇游戲,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
文章主要介紹了梳理總結JavaScript的23個String方法,JavaScript?中的String類型用于表示文本型的數據。它是由無符號整數值作為元素而組成的集合,更多詳細內容需要的朋友可以參考一下2022-07-07
事件委托，也叫事件代理，是JavaScript中綁定事件的一種常用技巧。就是將原本需要綁定在子元素的響應事件委托給父元素或更外層元素，讓外層元素擔當事件監(jiān)聽的職務。本文將詳細為大家介紹JavaScript事件委托的用法，需要的可以參考一下2022-01-01
這篇文章主要為大家詳細介紹了圖片懶加載imgLazyLoading.js的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
JavaScript 數據響應是一種重要的前端開發(fā)概念,是指在應用程序中的數據發(fā)生變化時,能夠自動更新與這些數據相關的用戶界面（UI）部分的能力,本文我們來總結一下目前可以簡單實現 JavaScript 中的數據響應的方法,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細介紹了JS輪播圖實現簡單代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了uni-app 自定義底部導航欄的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要為大家詳細介紹了fullPage.js和CSS3實現全屏滾動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05