<template>
<view class="social_security_manage">
<uni-card class="addHeight" v-for="(item,index) in info" :key='item.employeesId'>
<view class="main">
<view class="info_list" v-if="info.length>0">
<view class="info_item" >
<view class="l">
<view @click="checkboxChange(item)" class="radio" :class="{active:item.flag}"></view>
</view>
<view class="r">
<view class="title">
订单编号{{item.No}}
</view>
<view class="money">
订单金额:{{item.money}}元
</view>
<view class="tradeCommon">
交易平台:{{item.tradePlatform}}
</view>
<view class="tradeCommon">
交易类型:{{item.tradeType}}
</view>
<view class="tradeCommon">
支付时间:{{item.payTime}}
</view>
<view class="tradeCommon">
支付方式:{{item.payType}}
</view>
</view>
</view>
</view>
</view>
</uni-card>
<view class="footerAll">
<view class="header" @click="isAll()">
<view class="addFle">
<view class="radio" :class="{active:checkedAll}"></view>
<text class="text" v-if="!checkedAll">
全选
</text>
<text class="text deteal" v-else>
取消全选
</text>
</view>
<view class="rText">
开票订单数<text class="count">{{sumCount}}</text><text>个</text>
</view>
</view>
<view class="sumMoney">
合计开票金额:<text>{{sumMoney}}</text>元
</view>
<button class="submitBtn">确认开票金额</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
checkedAll: false,
sumMoney: 0,
sumCount: 0,
info: [
{
flag: false,employeeName: '名字',
employeePhone: '1111111',
employeesId: '0',
No: 'ZS10051680697394389645',
money: 1700.00,
tradePlatform: '简易网数字证书办理平台',
tradeType: '证书新版 ',
payTime: '2021-12-1209:00:00',
payType: '微信'
},
{
flag: false,employeeName: '名字',
employeePhone: '1111111',employeesId: '1',
No: 'ZS1005168069735',money: 2700.00,
tradePlatform: '简易网数字证书办理平台',
tradeType: '证书新版 ',
payTime: '2021-12-1209:00:00',
payType: '微信'
},
{
flag: false,employeeName: '名字',
employeePhone: '1111111',employeesId: '2',
No: 'ZS100516806973943895',money: 3700.00,
tradePlatform: '简易网数字证书办理平台',
tradeType: '证书新版 ',
payTime: '2021-12-1209:00:00',
payType: '微信'
}
]
}
},
methods: {
// 单选
checkboxChange(item) {
item.flag = !item.flag; // 点击让取反
if (!item.flag) { // 取消选中
// item.flag == false
console.log('没选中了')
this.checkedAll = false; // 如果有没选中的就让全选的状态改变。
if(this.sumCount) {
this.sumCount--
}
this.sumMoney = this.sumMoney - item.money
} else { //点击选中
console.log('选中了')
this.sumCount++
this.sumMoney = this.sumMoney + item.money
// item.flag == true
// 判断所有订单的flag是否为true
for (let i = 0; i < this.info.length; i++) {
// false 不全选
if (this.info[i].flag === false) {
this.checkedAll = false;
// 有一个false 则跳出
return;
} else {
// true 全选
this.checkedAll = true;
}
}
}
},
// 全选
isAll: function(e) {
this.checkedAll = !this.checkedAll;
if (this.checkedAll) {
this.info.map((item) => {
item.flag = true;
this.sumMoney += item.money
});
this.sumCount = this.info.length
} else {
this.info.map((item) => {
item.flag = false;
});
this.sumCount = 0
this.sumMoney = 0
}
},
}
}
</script>
<style scoped lang="less">
page {
background-color: #ffffff;
}
/deep/.uni-card {
margin: 20rpx 24rpx !important;
padding: 0 0 !important;
min-height: 360rpx;
border: none;
box-shadow: 0px 8rpx 28rpx 0px rgba(0, 0, 0, 0.1);
border-radius: 16rpx;
background: rgba(255, 255, 255, 1);
}
.addHeight {
&:last-child {
}
}
.deteal {
font-size: 30rpx;
font-weight: 600;
letter-spacing: 0px;
line-height: 44rpx;
color: rgba(255, 141, 26, 1) !important;
}
.social_security_manage {
width: 100%;
padding-bottom: 300rpx;
.footerAll {
width: 100%;
padding: 31rpx 24rpx 10rpx 24rpx;
background: #FFFFFF;
position: fixed;
bottom: 0;
background-color: #fff;
width: 100%;
height: 270rpx;
// padding: 12rpx 24rpx;
z-index: 99;
button {
width: 100%;
height: 96rpx;
line-height: 96rpx;
border-radius: 60rpx;
//
font-size: 30rpx;
font-weight: 400;
letter-spacing: 0px;
// line-height: 30rpx;
background: rgba(0, 118, 246, 1);
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
padding-left: 23rpx;
.addFle {
display: flex;
justify-content: flex-start;
}
.text {
font-size: 30rpx;
color: rgba(102, 102, 102, 1);
text-align: center;
font-weight: 400;
vertical-align: middle;
margin-left: 24rpx;
}
.rText {
font-size: 30rpx;
font-weight: 400;
letter-spacing: 0px;
color: rgba(102, 102, 102, 1);
padding-right: 31rpx;
text {
color: rgba(255, 87, 51, 1);
}
}
}
.sumMoney {
font-size: 32rpx;
font-weight: 600;
letter-spacing: 0px;
line-height: 44rpx;
color: rgba(255, 87, 51, 1);
text-align: right;
padding-bottom: 35rpx;
padding-right: 31rpx;
text {
}
}
.submitBtn {
height: 96rpx;
line-height: 96rpx;
opacity: 1;
border-radius: 60rpx;
background: rgba(0, 118, 246, 1);
font-size: 32rpx;
font-weight: 400;
letter-spacing: 0px;
line-height: 32rpx;
color: rgba(255, 255, 255, 1);
}
.radio {
border-radius: 5%;
width: 40rpx;
height: 40rpx;
border-radius: 6rpx;
background: rgba(247, 251, 255, 1);
border: 1px solid rgba(0, 118, 246, 1);
&.active {
background: url('../../static/img/checkEd.png') no-repeat center;
// background-color: rgba(0, 118, 246, 1);
background-size: 44rpx 44rpx;
}
}
.main {
width: 100%;
margin-top: 20rpx;
box-sizing: border-box;
.info_list {
.info_item {
background: #FFF;
display: flex;
align-items:center;
justify-content: space-between;
// padding-top: 25rpx;
.l {
width: 50rpx;
display: flex;
align-items: center;
justify-content: flex-start;
}
}
}
}
.social_security_manage_btn {
z-index: 9;
padding: 20rpx 25rpx;
background: #FFFFFF;
box-shadow: 0rpx -5rpx 20rpx 0rpx rgba(0, 0, 0, 0.07);
display: flex;
.text_btn {
width: 100%;
display: inline-block;
font-family: PingFangSC-Regular;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
font-weight: 400;
height: 80rpx;
line-height: 80rpx;
background: #23BE9F;
border-radius: 46rpx;
&:not(:last-child) {
margin-right: 20rpx;
}
&.no {
background: #FFFFFF;
border: 2rpx solid rgba(229, 229, 229, 1);
color: #666666;
}
}
}
}
.r {
width: calc(100% - 60rpx);
view {
padding-bottom: 10rpx;
}
.title {
font-size: 32rpx;
font-weight: 500;
letter-spacing: 0px;
line-height: 22rpx;
color: rgba(56, 56, 56, 1);
padding-bottom: 24rpx;
}
.money {
font-size: 28rpx;
font-weight: 600;
letter-spacing: 0px;
line-height: 39.2rpx;
color: rgba(255, 87, 51, 1);
}
.tradeCommon {
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0px;
line-height: 39.2rpx;
color: rgba(153, 153, 153, 1);
}
}
.count {
padding: 0 15rpx;
}
</style>
uniapp全选与取消全选,订单金额与订单量随多选框选择而进行改变
于 2023-05-16 20:47:07 首次发布