<template>
<view class="index">
<u-navbar title="购物车" :is-back="false" :border-bottom="false" title-color="#333"
:background="{background:'#fff'}">
<view class="page_navbar_warp">
<image src="../../static/icon/0.png" mode="" class="page_navbar_commonImg" @click="$go(1,1)"></image>
</view>
<view class="page_navbar_warp" slot="right" @click="set_checked = !set_checked">{
{set_checked ? '取消' : '管理'}}</view>
</u-navbar>
<u-checkbox-group @change="checkboxGroupChange">
<view class="list">
<view class="item" v-for="(item, index) in list" :key="index">
<u-checkbox v-model="item.checked" :name="item.id" shape="circle" active-color="#FE3400" size="40" @change="checkboxChange"></u-checkbox>
<view class="goods width">
<image src="../../static/img/3.png" mode=""></image>
<view class="name">
<view class="text1 u-line-1">珍稀古钱珍稀古钱币珍稀古钱币珍稀古钱币珍稀古钱币珍稀古钱币币</view>
<view class="text2">默认</view>
<view class="text3">¥300</view>
<u-number-box v-model="item.num" :min="1" size="26"></u-number-box>
</view>
</view>
</view>
</view>
</u-checkbox-group>
<view class="footer">
<u-checkbox-group >
<u-checkbox shape="circle" active-color="#FE3400" size="40" @change="checkedAll" v-model="all_checked" >全选</u-checkbox>
</u-checkbox-group>
<view class="right" v-if="!set_checked">
<view class="text1">合计:</view>
<view class="text2">¥</view>
<view class="text3">199.00</view>
<u-button :ripple="true" class="btn t-c">去结算</u-button>
</view>
<view class="right" v-else>
<u-button :ripple="true" class="btn btn2 t-c">删除</u-button>
</view>
<view class="bg"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
set_checked:false, // 管理
all_checked:false, // 全选
list: [{
id:1,
name: 'apple',
checked: false,
num:1
},
{
id:2,
name: 'banner',
checked: false,
num:2
},
{
id:3,
name: 'orange',
checked: false,
num:3
}
],
select_id:[], // 购物车选中的id
}
},
methods: {
// 选中id集合
checkboxGroupChange(e) {
this.select_id = e;
console.log(this.select_id);
},
// 单选
checkboxChange(e) {
this.$nextTick(()=>{
this.all_checked =this.list.every(item=>{
return item.checked == true
})
})
},
// 全选
checkedAll() {
this.$nextTick(()=>{
this.list.map(item => {
item.checked = !item.checked;
this.select_id.push(item.id)
})
if(!this.all_checked) this.select_id = []
})
}
}
}
</script>
<style scoped lang="scss">
.index {
min-height: 100vh;
background: #fff;
padding-bottom: 200rpx;
.list{
.item{
padding: 0 25rpx;
width: 750rpx;
display: flex;
align-items: center;
height: 225rpx;
border-bottom: 1rpx solid #E9E9E9;
position: relative;
.goods{
width: 100%;
display: flex;
uni-image{
width: 152rpx;
height: 152rpx;
border-radius: 20rpx;
margin-right: 20rpx;
}
.name{
width: 500rpx;
padding-top: 6rpx;
/deep/.u-numberbox {
position: absolute;
right: 26rpx;
bottom: 30rpx;
width: 180rpx;
height: 52rpx;
border-radius: 52rpx;
margin: 0;
}
.text1{
font-size: 30rpx;
margin-bottom: 16rpx;
}
.text2{
font-size: 26rpx;
color: #999999;
margin-bottom: 14rpx;
}
.text3{
font-size: 36rpx;
color: #FE3400;
}
}
}
.width{
width: 640rpx;
.name{
width: 450rpx;
}
}
}
}
.footer{
width: 750rpx;
height: 98rpx;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 4rpx 1rpx rgba(0,0,0,0.16);
border-radius: 0rpx 0rpx 0rpx 0rpx;
position: fixed;
left: 0;
bottom: var(--window-bottom);
z-index: 9;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20rpx 0 25rpx;
.bg{
position: absolute;
left: 0;
bottom: 0;
width: 750rpx;
height: 1rpx;
box-shadow: 0rpx 2rpx 4rpx 1rpx rgba(0,0,0,0.16);
}
.right{
display: flex;
align-items: center;
.text1{
font-size: 28rpx;}
.text2{
font-size: 28rpx;color: #F7382B;}
.text3{
font-size: 36rpx;color: #F7382B;}
.btn{
margin-left: 16rpx;
width: 210rpx;
height: 81rpx;
background: #FE3400;
border-radius: 41rpx 41rpx 41rpx 41rpx;
font-size: 32rpx;
color: #fff;
}
.btn2{
background: #fff;
border: 1rpx solid #FE3400;
color: #FE3400;
}
}
}
}
</style>
チェックボックス、ショッピングカート機能、ラジオ、すべて選択
おすすめ
転載: blog.csdn.net/qq_40745143/article/details/131702771
ランキング