front-end/hdApp/src/admin/order/debtList.vue

<template>
<view class="app-content">
	<view class="order-page">
		<view class="top-view">
			<view class="top-row">
				<view class="info-item">
					<image class="logo" :src="customInfo.smallAvatar"/>
					<text class="name">{{ customInfo.name || "" }}</text>
				</view>
				<DateSelect class="bar" top="0" @selectDateFn="selectDateFn" defaultShowName='时间' />
			</view>
		</view>
		<view class="shop-list">
			<block v-if="!$util.isEmpty(detailsList)">
				<DebtItem v-for="(item, index) in detailsList" :key="index" :info="item" :isEdit="true" :isCheck="item.checked" @click="checkItemEvent" ></DebtItem>
			</block>
			<block v-else>
				<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(detailsList)" />
			</block>
		</view>
		<view :class="device == 'ios' ? 'ios-bar-view':'android-bar-view'">
			<template>
				<view class="info-view">
					<view class="details-select" @click="checkFn()" >

						<button class="admin-button-com blue big" v-if="isAllCheck">全不选</button>
						<button class="admin-button-com blue big" v-else>全选</button>

					</view>
					已选 <text class="price">{{ selectList.length }}</text> 笔 <text class="unit">¥</text> <text class="price">{{ parseFloat(selectTotalAmount) }}</text>
				</view>
			</template>
			<view class="btn-view">
				<button :class="['admin-button-com', 'blue']" @click="createOrder">创建账单</button>
			</view>
		</view>
	</view>
</view>
</template>
<script>
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import DebtItem from "./debtItem";
import { getDebtOrderList,clearOrderApi } from "@/api/order";
import DateSelect from "@/components/module/dateSelect";
import ModalModule from "@/components/plugin/modal";
export default {
	components: { AppWrapperEmpty, ModalModule,DebtItem,DateSelect },
	data() {
		return {
			modifyPrice:null,
			customInfo: "",
			num: "",
			detailsList: [],
			listLoading: false,
			isAllCheck: false,
			isModel: false,
			payWayindex:0,
			payWay:0,
			searchTime:'',
			startTime:'',
			endTime:'',
			device:'android'
		};
	},
	onPullDownRefresh() {
		this.initData().then(res => {
			uni.stopPullDownRefresh();
		});
	},
	onLoad(){
		this.initData().then(res => {
			uni.stopPullDownRefresh();
		});

		this.device = uni.getSystemInfoSync().platform

	},
	computed: {
		selectList() {
			let list = [];
			if (this.detailsList) {
				for (const item of this.detailsList) {
					if (item.checked) {
						list.push(item);
					}
				}
			}
			return list;
		},
		selectTotalAmount() {
			let amount = 0;
			if (this.detailsList) {
				for (const item of this.detailsList) {
					if (item.checked) {
						amount=amount+Number(item.remainDebtPrice);
					}
				}
			}
			this.modifyPrice = amount.toFixed(2);
			return amount.toFixed(2);
		}
	},
	watch: {
		selectList () {
		if (this.selectList.length === this.detailsList.length) {
			this.isAllCheck = true
		} else {
			this.isAllCheck = false
		}
		}
	},
	methods: {
		createOrder(){
            this.$msg('开发中')
            return false
			let that = this
			let price = parseFloat(that.modifyPrice)
			that.$util.confirmModal({content:'总金额'+price+'元，确认提交？'},() => {
				that.confirmData()
			})
		},
		payWayChange(e){
			let index = e.detail.value
			this.payWayindex = index
			this.payWay = this.payWayList[index].id
		},
		isModelFun(){
			if (this.$util.isEmpty(this.selectList)) {
				this.$msg("请选择订单");
				return;
			}
			if(this.selectList.length > 100){
				uni.showToast({title: '订单太多，点右上角选月份再结',duration: 2000,icon:"none"})
				return false
			}
			this.isModel = true;
		},
		selectDateFn(val){
			this.searchTime = val.searchTime
			this.startTime = val.startTime
			this.endTime = val.endTime
			this.initData().then(res => {
				uni.stopPullDownRefresh()
			})
		},
		async initData() {
			try {
				this.listLoading = true
				const {data: { customInfo, num, list }} = await getDebtOrderList({id:this.option.id,searchTime:this.searchTime,startTime:this.startTime,endTime:this.endTime})
				this.customInfo = customInfo
				this.num = num
				this.detailsList = list.map(ele => {
					return {
						...ele,
						checked: false
					};
				});
			} catch (error) {

			} finally {
				this.listLoading = false;
			}
		},
		//全选与全不选
		checkFn() {
			this.isAllCheck = !this.isAllCheck
			if (this.isAllCheck) {
				this.detailsList.map(ele => { ele.checked = true })
			} else {
				this.detailsList.map(ele => { ele.checked = false })
			}
		},
		checkItemEvent(item) {
			for (let index = 0; index < this.detailsList.length; index++) {
				const element = this.detailsList[index].id;
				if (element == item.id) {
					this.$set(this.detailsList, index, {
						...this.detailsList[index],
						checked: !this.detailsList[index].checked
					});
					break;
				}
			}
		},
		confirmData() {
			let ids = this.selectList.map(ele => {
				return {id:ele.id};
			});
			let parameter = {
				id:JSON.stringify(ids),
				customId:this.customInfo.id
			}
			this.paySuccess(parameter)			
		},
		batchEvent() {
			try {
				if (this.$util.isEmpty(this.selectList)) {
					this.$msg("请选择还款订单");
					return;
				}
				let ids = this.selectList.map(ele => {
					return {id:ele.id};
				});
				let parameter = {
						id:JSON.stringify(ids),
					customId:this.customInfo.id,
				}
				let that = this;

				that.$util.confirmModal({content:'确定提交？'},() => {
					that.paySuccess(parameter)
				})
			} catch (error) {}
		},
		async paySuccess(parameter) {
			let that = this
			uni.showLoading({mask:true})
			const  res = await clearOrderApi({...parameter,modifyPrice:this.modifyPrice,searchTime:this.searchTime,startTime:this.startTime,endTime:this.endTime});
			uni.hideLoading()
			if(res.code == 1){
				if(res.data.hasUnComplete && res.data.hasUnComplete == 1){
					that.$util.confirmModal({content:'此客户还有待完成的账单',okText:'查看'},() => {
						that.pageTo({url:'/admin/clear/customList',type:2})
					})
				}else{
					that.pageTo({url:'/pagesArrears/clearResult',query:{id:res.data.id},type:2})
				}
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.order-page {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #f9fbfc;
	overflow: scroll;
	.top-view {
		padding: 30upx;
		position:fixed;
		width:100%;
		background-color: #fff;
		.top-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:not(:last-child) {
				margin-bottom: 10upx;
			}
			.header-item {
				font-size: 24upx;
				font-weight: 400;
				color: #999999;
			}
			.info-item {
				display: flex;
				align-items: center;
				.logo {
					margin-right: 10upx;
					width: 32upx;
					height: 32upx;
					border-radius: 50%;
				}
				.name {
					font-size: 28upx;
					font-weight: 600;
					color: #333333;
				}
			}
			.price-item {
				font-size: 34upx;
				font-weight: 600;
				color: #333333;
			}
		}
	}
	.shop-list {
		margin-top:98upx;
		padding: 20upx 30upx;
		flex: 1;
		padding-bottom: 100upx;
	}
	.ios-bar-view {
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		width: 100%;
		height: 100upx;
		background: #fff;
		box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);
		.info-view {
			display: flex;
			align-items: center;
			color: #333;
			font-size: 24upx;
			.iconfont {
				font-size: 32upx;
				color: #dddddd;
			}
			.price {
				margin: 0 3upx;
				color: $redColor;
				font-size: 30upx;
			}
			.unit {
				margin: 0 3upx;
				color: $redColor;
				font-size: 30upx;
			}
		}
		.btn-view {
			display: flex;
			.admin-button-com {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 6upx;
				width: 200upx;
				height: 70upx;
				font-size: 30upx;
			}
		}
	}
	.android-bar-view {
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		width: 100%;
		height: 100upx;
		background: #fff;
		box-shadow: 0upx -1upx 6upx 0upx rgba(4, 0, 0, 0.06);
		.info-view {
			display: flex;
			align-items: center;
			color: #333;
			font-size: 24upx;
			.iconfont {
				font-size: 32upx;
				color: #dddddd;
			}
			.price {
				margin: 0 3upx;
				color: $redColor;
				font-size: 30upx;
			}
			.unit {
				margin: 0 3upx;
				color: $redColor;
				font-size: 30upx;
			}
		}
		.btn-view {
			display: flex;
			.admin-button-com {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 6upx;
				width: 200upx;
				height: 94upx;
				font-size: 30upx;
			}
		}
	}
  .details-select {
    margin-right: 20upx;
    display: inline-block;
    .iconweixuanzhong,
    .iconxuanzhong {
      font-size: 40upx !important;
    }
    .iconxuanzhong {
      color: $mainColor !important;
    }
  }
	.select-cmd_bx {
		.num_bx {
			margin-top:30upx;
			margin-bottom:50upx;
			margin-left:80upx;
			view{
				height: 80upx;
				font-size: 28upx;
			}
			input {
				height: 70upx;
				border: 1upx solid #dddddd;
				border-radius: 4upx;
				text-align: left;
				margin-right: 24upx;
				font-size: 35upx;
				width:300upx;
			}
		}
	}
}
</style>