<template>
<div class="content-list">
<div class="all-down">
<div class="all-l">
<span style="margin-right: 4px"> 全选</span>
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
></el-checkbox>
</div>
<div class="down-r">
<span style="margin-left: 10px; margin-right: 4px">下载</span
><i
class="el-icon-download"
style="color: #409eff; font-size: 18px; font-weight: 600"
></i>
</div>
</div>
<div class="content-div-style">
<div v-for="item in orderList" :key="item.number" class="v-for-list">
<!-- -->
<div>
<div class="div-title">
<div class="div-title-l">
<el-checkbox-group
v-model="checkedOrder"
@change="handleCheckedOrderChange"
>
<div class="for-el-check-box">
<el-checkbox :label="item"
><span
>bumner:<span class="order-number">{{
item.number
}}</span></span
>
</el-checkbox>
</div>
</el-checkbox-group>
<!-- 判断项目类型 -->
<div class="for-type" v-if="item.type === 'A'">
{{ item.name }}
</div>
<div class="for-type for-type-wb" v-if="item.type === 'wb'">
{{ item.name }}
</div>
<div class="for-type for-type-nb" v-if="item.type === 'nb'">
{{ item.name }}
</div>
<div class="for-time">
<div>右边:</div>
<div>{{ item.createTime }}</div>
</div>
</div>
<div class="for-creater">
<div>右边:</div>
<div>{{ item.createName }}</div>
</div>
</div>
<!-- 内容布局 -->
<div class="list-div-content">
<!-- 左边图片 -->
<div class="list-div-content-l">
<img src="./img.png" />
</div>
<div class="list-div-content-r">
<!-- 右边顶部 -->
<div>
<div class="content-top">
<h3>{{ item.title }}</h3>
<div class="top-r">
<span class="top-r-app">¥{{ toFixed(item.app) }}</span>
<span class="top-r-line"></span>
<span class="top-r-name">{{ item.confirmName }}</span>
</div>
</div>
<div class="content-bott">
<!-- 判断11或者22 -->
<div
class="for-teacher for-teacher-comm"
v-if="item.type === 'A'"
>
<div>22:</div>
<div>{{ item.teacher }}</div>
</div>
<div
class="for-teacher for-teacher-comm"
v-if="item.type === 'nb' || item.type === 'wb'"
>
<div>11:</div>
<div>{{ item.teacher }}</div>
</div>
<div class="for-who for-teacher-comm">
<div>meme:</div>
<div>{{ item.who }}</div>
</div>
<div class="for-class-mone for-teacher-comm">
<div>:</div>
<div>{{ item.money }}</div>
</div>
<div class="for-class-time for-teacher-comm">
<div>:</div>
<div>{{ item.time }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="list-div-footer">
<el-button plain type="primary" v-if="item.type === 'A'"
>点击按钮</el-button
>
<el-button
plain
type="primary"
v-if="item.type === 'nb' || item.type === 'wb'"
>点击按钮</el-button
>
<el-button
plain
type="primary"
v-if="item.type === 'nb' || item.type === 'wb'"
>点击按钮</el-button
>
<el-button
plain
type="primary"
v-if="item.type === 'nb' || item.type === 'wb'"
>点击按钮</el-button
>
</div>
</div>
</div>
</div>
<div class="page-style">
<el-pagination
background
layout="prev, pager, next"
@current-change="handleCurrentChange"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "OrderList",
//props: ["formValidate", "type"],
data() {
return {
total: 100,
checkedArray: [],
checkAll: false,
isIndeterminate: false,
checkedOrder: [],
orderList: [
{
type: "A",
number: "A123456789",
name: "212121", //
createTime: "2021年12月23日 15:45:34", //
createName: "人名", //
title: " 2 2",
confirmName: "122",
teacher: "222", //11
who: "账号账号", //
money: "1222", //
time: "12", //
app: 120,
},
{
type: "A",
number: "A123456780",
name: "212121", //
createTime: "2021年12月23日 15:45:34", //
createName: "人名", //
title: " 2",
confirmName: "122",
teacher: "222", //11
who: "账号账号", //
money: "1222", //
time: "12", //
app: 120,
},
{
type: "nb",
number: "A123456123",
name: "222", //
createTime: "2021年12月23日 15:45:34", //
createName: "人名", //
title: " 2",
confirmName: "122",
teacher: "222", //11
who: "账号账号", //
money: "1222", //
time: "12", //
app: "8202", //
},
{
type: "nb",
number: "A123212780",
name: "222", //
createTime: "2021年12月23日 15:45:34", //
createName: "人名", //
title: " 2",
confirmName: "122",
teacher: "222", //11
who: "账号账号", //
money: "1222", //
time: "12", //
app: "8202", //
},
{
type: "wb",
number: "A213456780",
name: "2", //
createTime: "2021年12月23日 15:45:34", //
createName: "人名", //
title: " 2 2",
confirmName: "122",
teacher: "222", //11
who: "账号账号", //
money: "1222", //
time: "12", //
app: "8202", //
},
{
type: "wb",
number: "A123236780",
name: "2", //
createTime: "2021年12月23日 15:45:34", //
createName: "人名", //
title: " 2",
confirmName: "122",
teacher: "222", //11
who: "账号账号", //
money: "1222", //
time: "12", //
app: "8202", //
},
],
};
},
mounted() {},
methods: {
clickMe() {
console.log(11);
},
//全选
handleCheckAllChange(val) {
this.checkedOrder = val ? this.orderList : [];
this.isIndeterminate = false;
console.log(this.checkedOrder);
},
//选择每一个
handleCheckedOrderChange(value) {
console.log(value.length, this.checkedOrder.length);
let checkedCount = value.length;
this.checkAll = checkedCount === this.orderList.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.orderList.length;
},
handleCurrentChange(val) {
console.log(val);
},
toFixed(num) {
return parseFloat(num).toLocaleString("en", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
},
},
};
</script>
<style lang="scss" scoped>
.content-list {
height: 100%;
.all-down {
color: #333333;
font-size: 14px;
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: 20px;
margin-top: 20px;
.all-l {
}
}
.content-div-style {
box-sizing: border-box;
padding: 20px 20px;
.v-for-list {
padding-bottom: 10px;
border: 1px solid #d9d9d9;
margin-bottom: 10px;
.div-title {
padding-left: 20px;
padding-right: 20px;
background: #f5f5f5;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
.div-title-l {
display: flex;
align-items: center;
.for-el-check-box {
.order-number {
color: #409eff;
font-weight: 600;
}
}
.for-time {
display: flex;
align-items: center;
& div:nth-of-type(1) {
color: #666666;
}
& div:nth-of-type(2) {
color: #333333;
}
}
.for-type {
background: #fe774e;
color: #ffffff;
padding: 2px 10px;
border-radius: 4px;
margin-left: 10px;
margin-right: 20px;
}
.for-type-wb {
background: #717cff;
}
.for-type-nb {
background: #ffbb29;
}
}
.for-creater {
display: flex;
align-items: center;
& div:nth-of-type(1) {
color: #666666;
}
& div:nth-of-type(2) {
color: #333333;
}
}
}
.list-div-content {
padding-left: 20px;
padding-right: 20px;
width: 100%;
display: flex;
align-items: flex-end;
.list-div-content-l {
width: 120px;
height: 80px;
border-radius: 4px;
margin-bottom: 4px;
img {
width: 100%;
}
}
.list-div-content-r {
margin-left: 20px;
width: 100%;
.content-top {
margin-top: 16px;
display: flex;
align-items: center;
justify-content: space-between;
h3 {
color: #333333;
font-size: 16px;
width: 650px;
}
.top-r {
display: flex;
align-items: flex-start;
justify-content: space-between;
.top-r-class {
}
.top-r-app {
color: #fe774e;
font-size: 16px;
font-weight: bold;
}
.top-r-line {
width: 2px;
height: 16px;
background: #cccccc;
margin-left: 10px;
margin-right: 10px;
margin-top: 3px;
}
.top-r-name {
color: #666666;
font-size: 16px;
font-weight: bold;
}
}
}
.content-bott {
font-size: 14px;
margin-top: 16px;
.for-teacher-comm {
display: flex;
align-items: center;
& div:nth-of-type(1) {
color: #999999;
}
& div:nth-of-type(2) {
color: #333333;
}
}
.for-who {
display: flex;
align-items: center;
}
.for-class-mone {
display: flex;
align-items: center;
}
.for-class-time {
display: flex;
align-items: center;
}
}
}
}
.list-div-footer {
text-align: right;
padding-right: 20px;
margin-top: 20px;
button {
height: 32px;
line-height: 8px;
padding: 12px 16px;
width: 88px;
font-size: 12px;
color: #409eff;
background: #ffffff;
border: 1px solid #409eff;
font-size: 14px !important;
}
}
}
}
.page-style {
text-align: right;
margin-bottom: 30px;
}
::v-deep .el-checkbox__label {
font-size: 12px;
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
color: #666666;
}
}
</style>