购物车h5页面
<view a:if="{
{slideProductList.length!==0}}" class="hears">
<!-- 购物车开始 -->
<view class="hear">
<view class="hear-choice">
<view class="hears-choice" style="display:flex;align-items:center;">
<view class="checkbox">
<image data-index="{
{index}}" onTap="checkedAll" class="circular-img" mode="scaleToFill" src="{
{allslelect}}"/>
</view>
<view class="choice">
全选
</view>
</view>
<view class="price">
价格:${
{count}}
</view>
</view>
<view>
<button class="hear-btn" size="mini" onTap="delete" type="primary">删除</button>
</view>
</view>
<block a:for="{
{slideProductList}}">
<view class="box-commodity">
<view class="box-bg">
<view class="circular">
<image onTap="select" data-index="{
{index}}" class="circular-img" mode="scaleToFill" src="{
{item.check}}"/>
</view>
<view class="img-commoditys">
<image class="img-commodity" mode="scaleToFill" src="{
{item.url}}"/>
</view>
<view class="box-information">
<view class="box-name">
{
{item.name}}
</view>
<view class="box-price">
价格:￥${
{item.price}}
</view>
</view>
<view style="display:flex;margin-right:20rpx;">
<button class="num-btn" data-index="{
{index}}" size="default" onTap="subtraction" type="primary">-</button>
<input class="int" value="{
{item.num}}"></input>
<button data-index="{
{index}}" onTap="addtion" class="num-btn" size="default" type="primary">+</button>
</view>
</view>
</view>
</block>
<!-- 购物车结束 -->
</view>
<view class="nocar" a:elif="{
{slideProductList.length===0}}">
<view>
<image class="nocar-img" mode="scaleToFill" src="/image/nocar.png"/>
</view>
</view>```
css页面
```css
.hears{
background-color: #e3e3e3;
overflow:hidden;
}
.hear{
margin-top: 20rpx;
width: 100vw;
height: 8vh;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-around;
border-radius: 12rpx;
}
.hear-choice{
display: flex;
align-items: center;
}
.hears-choice{
margin-right: 62rpx;
}
.choice{
font-weight: 600;
margin-left: 12rpx;
}
.box-commodity{
display: flex;
justify-content: center;
}
.price{
color: #ff4337;
font-size:24rpx;
font-weight: 600;
}
.checkbox{
padding-top: 8rpx
}
.box-bg{
width: 94vw;
height: 18vh;
border-radius: 20rpx;
background-color: #fff;
margin-top: 20rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: space-around;
}
.img-commodity{
width: 22vw;
height: 14vh;
border-radius: 20rpx;
}
.box-name{
font-size: 30rpx;
font-weight: 600;
margin-bottom: 20rpx;
}
.num-btn{
line-height: 38rpx;
width: 44rpx;
height: 44rpx;
font-size: 46rpx;
border-radius: 100%;
background-color: #ff4337;
border: #fff;
}
.int{
width: 6vw;
padding-left: 22rpx;
/* padding-bottom: 20rpx; */
margin-top: -6rpx;
font-size: 24rpx;
}
.box-price{
font-size: 24rpx;
font-weight: 600;
color:#ff4337;
}
.box-information{
width:37vw;
}
.hear-btn{
border-radius: 12rpx;
background-color: #ff4337;
border:#fff;
}
.circular-img{
width: 48rpx;
height: 48rpx;
}
.nocar{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.nocar-img{
width: 30vw;
height: 14vh;
}
JS
Page({
data: {
slideProductList: [
{
url: "/image/RNG.jpg",
name: "RNG同款限定图像",
price: "99",
num: "1",
check: "/image/circular.png"
},
{
url: "/image/RNG.jpg",
name: "RNG同款限定图像1",
price: "299",
num: "1",
check: "/image/circular.png"
}
],
allslelect: "/image/circular.png",
count: 0
},
// 单选
select(e) {
//单选
var i = e.currentTarget.dataset.index;
var check = this.data.slideProductList[i].check;
var select = this.data.slideProductList;
if (check === "/image/circular.png") {
var check = "/image/Select.png";
} else {
var check = "/image/circular.png";
}
select[i].check = check;
//单选控制全选
let result = !select.some(item=>{
console.log(item)
return item.check==="/image/circular.png"
})
this.setData({
allslelect:result ?"/image/Select.png":"/image/circular.png",
slideProductList: select
});
this.num();
},
//全选
checkedAll(e) {
//选中状态
var select = this.data.allslelect;
if (select === "/image/circular.png") {
var select = "/image/Select.png";
} else {
var select = "/image/circular.png";
}
var check = this.data.slideProductList;
if (select === "/image/Select.png") {
for (var i = 0; i < check.length; i++) {
check[i].check = "/image/Select.png";
}
} else {
for (var i = 0; i < check.length; i++) {
check[i].check = "/image/circular.png";
}
}
this.setData({
allslelect: select,
slideProductList: check
});
this.num();
},
// 总价
num() {
var that = this;
let check = this.data.slideProductList;
var allnum = 0;
for (var i = 0; i < check.length; i++) {
if (check[i].check === "/image/Select.png") {
allnum += check[i].num * check[i].price;
}
}
that.setData({
count: allnum
});
},
//删除
delete(){
my.confirm({
title: '温馨提示',
content: '您是否想要删除商品',
confirmButtonText: '确定',
cancelButtonText: '取消',
success: (result) => {
if(result.confirm===true){
this.deleteAll()
}
},
});
},
deleteAll() {
let newArr = [];
newArr = this.data.slideProductList.filter(item => {
return item.check === "/image/circular.png";
});
this.setData({
slideProductList: newArr
});
this.num();
},
//增
addtion(e) {
var i = e.currentTarget.dataset.index;
var num = this.data.slideProductList;
if (num[i].num < 99) {
num[i].num++;
}
this.setData({
slideProductList: num
});
if (this.data.slideProductList[i].check === "/image/Select.png") {
this.num();
}
},
//减
subtraction(e) {
var i = e.currentTarget.dataset.index;
var num = this.data.slideProductList;
if (num[i].num < 2) {
num.splice(i, 1);
} else {
num[i].num--;
}
this.setData({
slideProductList: num
});
if (this.data.slideProductList[i].check === "/image/Select.png") {
this.num();
}
},
onLoad() {
}
});
这个是支付宝小程序和微信小程序相差不大 细微地方需要修改一下就行
这两个是选择框图片