整个页面代码 、
<template>
<div class="about">
<div class="orderlist">
<div class="info">
<div >
<b>已开票订单(共{{ orderList.length }}笔){{checkOrders}}</b>
</div>
</div>
<div class="orders">
<el-checkbox-group
@change="checkOrdersChange"
v-model="checkOrders">
<div
class="order-item"
v-for="(order, index) in orderList" :key="index">
<el-checkbox
:label="order.orderId">
<span></span>
</el-checkbox>
<div @click="clickOrder(order)" class="order-info">
<!-- 这里的样式最后写就行了 -->
<div class="timeandshopname">
<span>{{order.createTime}}</span>
<span class="shopName">{{order.shopName}}</span>
</div>
<div class="price">
<span class="rmb">¥</span>
<span class="money">{{order.amount}}</span>
</div>
<div class="goodsnum">合计商品{{order.num}}种</div>
<div
@click.stop="() => {}"
class="orderNo">
<span> 订单编号:</span>
<span>{{order.orderNo}}</span>
</div>
</div>
</div>
</el-checkbox-group>
</div>
<div
v-if="orderList.length"
class="btns">
<el-checkbox
@change="checkAllChange"
v-model="checkAll">全选</el-checkbox>
<!-- <el-button type="primary">确定</el-button> -->
</div>
</div>
</div>
</template>
<script>
// import { getLodop } from "../utils/LodopFuncs";
export default {
data(){
return{
orderList:[
{
orderId:'1',
orderNo:'87546765897878',
createTime:'2023/02/21',
shopName:'供应商自营1',
amount:'7650',
num:'250'
},
{
orderId:'2',
orderNo:'8754654478',
createTime:'2023/02/21',
shopName:'供应商自营2',
amount:'750',
num:'2650'
},
{
orderId:'3',
orderNo:'875465476878',
createTime:'2023/02/21',
shopName:'供应商自营3',
amount:'7800',
num:'440'
},
{
orderId:'4',
orderNo:'875465987897878',
createTime:'2023/02/21',
shopName:'民生自营4',
amount:'72300',
num:'30'
}
],
checkAll:false,
checkOrders:[],
}
},
methods:{
checkAllChange(){
this.checkOrders = this.checkAll ? this.orderList.map(order => {
return order.orderId;
}) : [];
// this.getOrderInfoList();
},
checkOrdersChange(){
this.checkAll = this.orderList.length ? this.orderList.every(order => {
return this.checkOrders.indexOf(order.orderId) > -1;
}) : false;
// this.getOrderInfoList();
},
clickOrder(order){
console.log('clickOrder', order)
if (this.checkOrders.indexOf(order.orderId) > -1) {
this.checkOrders = this.checkOrders.filter(id => {
return id != order.orderId;
})
} else {
this.checkOrders.push(order.orderId);
}
console.log('checkOrders', this.checkOrders)
this.checkOrdersChange();
},
}
}
</script>
<style lang='less' scoped>
.orderlist{
flex: 1;
display: flex;
flex-direction: column;
border-radius: 4px;
border: 1px solid #ddd;
padding: 20px;
margin-top: 16px;
overflow: hidden;
.info{
display: flex;
&>div{
flex: 1;
}
}
.orders{
flex: 1;
overflow-y: auto;
margin: 16px 0;
.order-item{
padding: 10px 0;
display: flex;
justify-items: center;
align-items: center;
.order-info{
font-size: 14px;
flex: 0.3;
cursor: pointer;
border: 1px solid #eee;
border-radius: 10px;
padding: 12px 20px;
.shopName{
margin-left: 20px;
}
.price{
color: #e1012e;
margin: 12px 0;
.money{
font-size: 24px;
}
}
.orderNo{
margin-top: 12px;
}
}
}
}
.btns{
display: flex;
justify-content: space-between;
align-items: center;
}
}
</style>