关于uniapp，复选框选中
所有数据通过uni.request,动态计算总价，我想了解一下关于uniapp框架的购物页呈现
<template>
<view class="box">
<!-- 自定义导航栏 -->
<view class="border">
<view class="border_left" @click="onleft()">
管理
</view>
<view class="border_center">
购物车
</view>
<view class="border_right">
</view>
</view>
<view class="border-lis"></view>
<!-- 购物车内容显示 -->
<view class="box_content">
<view class="box_content_one" v-for="item in list" :key='item.id'>
<view class="box_content_oput">
<view class="box_content_oput_input" >
<!-- <label >
<checkbox :value="item.id" @change="checkboxChange($event,item.id)" :checked="item.isChecked" />
</label> -->
<checkbox-group @change="checkboxChange($event,item.id)">
<checkbox :value="item.id" :checked="item.isChecked" />
</checkbox-group>
</view>
<view class="box_content_oput_imges">
<image :src="item.img" mode=""></image>
</view>
</view>
<view class="box_content_number">
<view class="box_content_title">
{{item.name}}
</view>
<view class="box_content_effect">
{{item.size}}
</view>
<view class="box_content_and">
<view class="box_content_number_discount">
￥{{item.price}}.00
</view>
<view class="box_content_number_original">
{{item.prcs}}.00
</view>
</view>
</view>
<view class="calculator">
<text class="left_i" @tap="editNum(item.id,-1)">-</text>
<text class="center_con">{{item.count}}</text>
<!-- <input class="center_con" type="text" value="1" /> -->
<text class="right_i" @tap="editNum(item.id,1)">+</text>
</view>
</view>
</view>
<view v-if="boton_markes.length != ''" style="text-align: center; margin: auto; font-size: 14px; color: #F0F0F0;margin-bottom: 50rpx;">
--------------------热卖推荐--------------------
</view>
<view class="box_botton" v-if="boton_markes.length != ''">
<view class="box_bottcontent">
<!-- goods_id -->
<view class="box_bottent" v-for="(hell,indet) in boton_markes" :key="indet">
<view class="box_boent_one">
<!-- <image src="../../static/image/3_2.jpg" mode=""></image> -->
<!-- ${{url}}/api/goods/goodsThumImages?goods_id=${{item.goods_id}}&width=400&height=400-->
<image :src="hell.img_url" mode="widthFix">
</view>
<view class="box_boent_two">
{{hell.goods_name}}888{{hell.goods_name}}
</view>
<view class="box_boent_three">
<view class="box_boent_three_ins">
<text>￥</text>
{{hell.shop_price}}
<text>00</text>
</view>
<view class="box_boent_three_let">
已售{{hell.virtual_sales_sum}}件
</view>
</view>
</view>
</view>
</view>
<!-- 底部导航栏 -->
<view class="tabbar">
<view class="all">
<checkbox-group @change="checkboxChangeAll">
<checkbox :checked="isAllChecked" />全选
</checkbox-group>
</view>
<view class="totalPrice">
<text class="totalPrice_ff">合计:</text>
<text class="totalPrice_red">￥{{totalPrice}}.00</text>
</view>
<view class="submitOrder" @tap="submitOrder">
付款
</view>
</view>
<view style="width: 100%; height: 50rpx; background-color: #F0F0F0; margin-bottom: 50rpx;"></view>
</view>
</template>
<script>
export default {
data() {
return {
//购物车有无商品
show: true,
//全选是否选中
isAllChecked: false, //是否全选
totalPrice: 0, //总价
//商品
list: [{
id: '0',
name: '爆款VC精华 韩夕梦377vc乙基醚 精',
price: 89.00,
prcs: 179.00,
count: 1,
size: '深层洁净除菌洗衣凝珠',
img: '/static/logo.png'
},
{
id: '1',
name: '爆款VC精华 韩夕梦37韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦7vc乙基醚 精',
price: 89.00,
prcs: 179.00,
count: 1,
size: '深层洁净除菌洗衣凝珠',
img: '/static/logo.png'
},
{
id: '2',
name: '爆款VC精华 韩夕梦377v韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦韩夕梦c乙基醚 精',
price: 89.00,
prcs: 179.00,
count: 1,
size: '深层洁净除菌洗衣凝珠',
img: '/static/logo.png'
}, {
id: '3',
name: '爆款VC精华 韩夕梦377vc乙基醚 精',
price: 89.00,
prcs: 179.00,
count: 1,
size: '深层洁净除菌洗衣凝珠',
img: '/static/logo.png'
},
{
id: '4',
name: '爆款VC精华 韩夕梦377vc乙基醚 精',
price: 89.00,
prcs: 179.00,
count: 1,
size: '深层洁净除菌洗衣凝珠',
img: '/static/logo.png'
}
],
boton_markes:[]
}
},
methods: {
setCart() { //计算总价
let totalPrice = 0
this.list.forEach(v => {
if (v.isChecked) {
totalPrice += v.count * v.price
}
})
this.totalPrice = totalPrice
},
editNum(id, type) { //编辑数量
const index = this.list.findIndex(v => v.id == id)
if (this.list[index].count == 1 && type == -1) {
uni.showToast({
title: '至少购买一件商品',
icon: 'none'
})
} else {
this.list[index].count += type
}
this.setCart()
},
// 全选
checkboxChangeAll(e) {
this.isAllChecked = !this.isAllChecked
this.list.forEach(v => v.isChecked = this.isAllChecked)
this.setCart()
},
// 选择每一项
checkboxChange: function(e, id) {
console.log(e,id)
var temp = []
// 找到被修改的商品对象
let index = this.list.findIndex(v => v.id === id)
// 选中状态取反
this.list[index].isChecked = !this.list[index].isChecked
temp = this.list.every(v => v.isChecked)
if (temp) {
this.isAllChecked = true
} else {
this.isAllChecked = false
}
this.setCart()
},
// 管理 关闭checkbox标签
// onleft(){
// this.list.forEach(v => {
// console.log('1',v)
// if (v.isChecked) {
// totalPrice += v.count * v.price
// }
// })
// },
submitOrder() { // 提交购物车订单
// 判断是否选择购物车商品
var bol = this.list.every(el => el.isChecked == false)
if (bol) {
uni.showToast({
title: "这些你都不喜欢吗，你是不是只喜欢喝水，你倒是选一个啊商品啊",
icon: "none",
duration: 2000
})
} else {
uni.showToast({
title: "你肯定没有钱,还是算了吧",
icon: "none",
duration: 2000
})
}
}
},
}
</script>
<style lang="less">
.box {
width: 100%;
// background-color: #F0F0F0;
background-color: #aaff7f;
.border {
width: 100%;
height: 130rpx;
line-height: 160rpx;
background-color: #ffffff;
display: flex;
justify-content: space-between;
position: fixed;
z-index: 999;
top: 0;
.border_left {
padding: 14rpx 20rpx;
font-size: 28rpx;
color: #333333;
}
.border_center {
padding-right: 96rpx;
font-size: 36rpx;
font-weight: 600;
}
}
.border-lis {
width: 100%;
height: 130rpx;
}
.box_content {
.box_content_one {
width: 712rpx;
height: 244rpx;
background: #FFFFFF;
border-radius: 20rpx;
margin: 20rpx auto;
margin-top: 30rpx;
display: flex;
box-sizing: border-box;
position: relative;
.box_content_oput {
display: flex;
.box_content_oput_input {
padding: 92rpx 10rpx;
/* #ifdef APP-PLUS ||MP-WEIXIN */
checkbox .wx-checkbox-input {
border-radius: 50% !important;
/* color: #ffffff !important; */
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
color: #fff;
background-image: linear-gradient(to right, #39FDCE, #48E3FD);
}
/* .wx-checkbox-input.wx-checkbox-input-checked {
border: none !important;
} */
/* #endif */
}
.box_content_oput_imges {
width: 100%;
margin: 30rpx 0rpx auto;
image {
width: 180rpx;
height: 180rpx;
}
}
}
.box_content_number {
padding: 35rpx 20rpx;
.box_content_title {
width: 412rpx;
height: 52rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 28rpx;
//字体超出俩行 隐藏显示省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.box_content_effect {
width: 242rpx;
height: 24rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #7E7E7E;
line-height: 24rpx;
background-color: #f9f5f5;
margin: 20rpx 0rpx;
}
.box_content_and {
display: flex;
padding: 10rpx 0rpx;
.box_content_number_discount {
font-size: 40rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FF4E3B;
}
.box_content_number_original {
color: #999999;
font-size: 22rpx;
padding: 15rpx 20rpx;
}
}
}
.calculator {
position: absolute;
display: flex;
top: 62%;
left: 78%;
.left_i {
width: 30rpx;
}
.center_con {
width: 40rpx;
background-color: #F6F6F6;
padding: 0rpx 20rpx;
text-align: center;
}
.right_i {
width: 30rpx;
}
}
}
}
.box_botton {
width: 100%;
margin-bottom: 50rpx;
font-family: PingFangSC-Regular, PingFang SC;
.box_bottcontent {
width: 95%;
margin: auto;
display: flex;
flex-flow: initial;
flex-wrap: wrap;
align-items: center;
.box_bottent {
// width: 330rpx;
width: 46%;
background: #ffffff;
border-radius: 12rpx;
margin: 15rpx 14rpx;
box-sizing: border-box;
.box_boent_one {
width: 330rpx;
height: 330rpx;
}
.box_boent_one image {
width: 100%;
height: 100%;
border-radius: 12rpx;
}
.box_boent_two {
width: 300rpx;
height: 58rpx;
padding: 20rpx 20rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #0F0C10;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.box_boent_three {
display: flex;
flex-flow: initial;
justify-content: space-between;
padding: 20rpx 10rpx;
.box_boent_three_ins {
width: 130rpx;
height: 28rpx;
line-height: 28rpx;
font-size: 36rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 600;
color: #FF4E3B;
display: flex;
flex-direction: row;
text {
font-size: 20rpx;
padding-top: 8rpx;
}
}
.box_boent_three_let {
font-size: 20rpx;
color: #999999;
background: #FFFFFF;
}
}
}
}
}
// 底部导航
.tabbar {
width: 100%;
height: 112rpx;
background-color: #ffffff;
position: fixed;
bottom: -5rpx;
display: flex;
align-items: center;
justify-content: space-around;
// border-radius: 8% 8%;
.all {
font-size: 32rpx;
color: #3E3E3E;
letter-spacing: 2.29rpx;
display: flex;
/* #ifdef APP-PLUS ||MP-WEIXIN */
checkbox .wx-checkbox-input {
border-radius: 50% !important;
/* color: #ffffff !important; */
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
color: #fff;
background-image: linear-gradient(to right, #39FDCE, #48E3FD);
}
/* .wx-checkbox-input.wx-checkbox-input-checked {
border: none !important;
} */
/* #endif */
}
.totalPrice {
letter-spacing: 2.29rpx;
padding-left: 200rpx;
.totalPrice_ff {
font-size: 24rpx;
color: #999999;
}
.totalPrice_red {
font-size: 32rpx;
color: #FF4E3B;
}
}
.submitOrder {
width: 208rpx;
height: 80rpx;
background-image: linear-gradient(to right, #38FFCB, #49E1FF);
border-radius: 60rpx;
font-size: 36rpx;
color: #FFFFFF;
letter-spacing: 2.57rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
}
</style>
提供参考实例，以作你编写程序时地参考：https://blog.csdn.net/babyxuqian/article/details/121141936
【博文主要讲解uniapp中的购物车全选多选实例（ checkbox ）】
checkbox标签。官网都有的
你好，可以参考一下https://blog.csdn.net/pumpkin_truck/article/details/120140769
用for循环把通过uni.request获取到的数据动态渲染到页面上即可
这个可以，满足你的需求，可以直接用，需要滴滴我
希望对你有所帮助：
https://blog.csdn.net/CuiCui_web/article/details/108252196