uniapp-shunfengche/pageA/invoice/Invoicing.vue

<template>
	<view>
		<!-- 可开发票列表 -->
		<view class="fpList flex justify-center flex-wrap" v-if="orderList.length>0">
			<view class="fpList-box">
				<u-checkbox-group shape="circle">
					<view class="fpList-box-item flex justify-center" v-for="(item,index) in orderList" :key="index">
						<view class="fpList-box-item-c flex justify-between align-center">
							<view class="fpList-box-item-c-l flex align-center">
								<view class="fpList-box-item-c-l-s">
									<u-checkbox @change="checkboxChange(item)" v-model="item.checked"
										:name="index"></u-checkbox>
								</view>
								<view class="fpList-box-item-c-l-info"
									@click.stop="gototx(item.ordersNo,item.payMoney)">
									<view class="fpList-box-item-c-l-info-t">
										<text>顺风车</text>
										<span>{{item.createTime}}</span>
									</view>
									<block>
										<view class="fpList-box-item-c-l-info-c">
											<span>
												<text></text>
											</span>
											{{item.shipAddress}}
										</view>
									</block>
									<view class="fpList-box-item-c-l-info-b">
										<span><text></text></span>
										{{item.deliveryAddress}}
									</view>

								</view>
							</view>
							<view class="fpList-box-item-c-r">
								<span>{{item.payMoney}}</span>元
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>

		<empty v-if="orderList.length==0" />


		<!-- 底部操作栏 -->
		<view class="select flex justify-center flex-wrap">
			<view class="select-se flex justify-center">
				<view class="select-se-box flex align-center">
					已选<text>{{count}}</text>个记录，共<text>{{price.toFixed(2)}}</text>元
				</view>
			</view>
			<view class="select-box flex justify-center align-center">
				<view class="select-box-c flex justify-between">
					<view class="select-box-c-s">
						<u-checkbox shape="circle" @change="checkboxChanges" v-model="selectAll">本页全选
						</u-checkbox>
					</view>
					<view class="select-box-c-btn flex justify-center align-center" v-if="ids.length==0">
						开发票
					</view>
					<view @click="gotokp()" class="select-box-c-btn flex justify-center align-center"
						style="background-color: #346EF6;color:#ffffff;" v-if="ids.length>0">
						开发票
					</view>
				</view>
			</view>
		</view>
		<!-- 遮罩 -->
		<u-mask :show="show"></u-mask>
		<!-- 开始时间 -->
		<u-picker v-model="showTimes" :params="params" mode="time" @confirm="confirms"></u-picker>
		<u-picker v-model="showTimee" :params="params" mode="time" @confirm="confirme"></u-picker>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	export default {
		data() {
			return {
				count: 0,
				price: 0,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				selectAll: false,
				orderList: [],
				startTime: '',
				endtime: '',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				showTimes: false,
				showTimee: false,
				show: false,
				open: false,
				current: 0,
				page: 1,
				limit: 10,
				totalPage: 0,
				ids: [],
				tabs: [{
						id: 1,
						name: '即时代驾'
					},
					{
						id: 2,
						name: '朋友代驾'
					},
					{
						id: 3,
						name: '预约代驾'
					}
				],
			}
		},
		//监听选择变化计算总价
		watch: {
			ids(newData, oldData) {
				this.price = 0
				this.orderList.map(item => {
					if (item.checked == true) {
						this.price += item.payMoney
					}
				})
			},
			deep: true
		},
		onLoad() {
			// this.startTime = new Date().toISOString().slice(0, 10),
			// this.endtime = new Date().toISOString().slice(0, 10),
			this.getOrderList();
		},
		onShow() {
			this.getOrderList();
			this.getPrice()
		},
		onReachBottom: function() {
			if (this.page < this.totalPage) {
				this.page = this.page + 1;
				this.status = 'loading'
				this.getPrice()
				this.getOrderList();
			} else {
				this.status = 'nomore'
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getPrice()
			this.getOrderList();
		},
		methods: {
			// 多个开票
			gotokp() {
				let id = this.ids.join(',')
				let price = this.price.toFixed(2)
				uni.navigateTo({
					url: '/pageA/invoice/kaipiao?indentNumber=' + id + '&price=' + price
				})
			},
			//计算单数与价格
			getPrice() {
				this.selectAll = false
				this.orderList.map(item => {
					item.checked = false
				})
				this.ids = []
				this.count = this.ids.length
				this.price = 0
			},
			//根据时间筛选
			submit() {
				this.show = false
				this.open = false
				this.page = 1
				this.getOrderList();
			},
			// 去开票
			gototx(id, price) {
				uni.navigateTo({
					url: '/pageA/invoice/kaipiao?indentNumber=' + id + '&price=' + price
				})
			},
			//切换订单类型
			qiehuans(index, id) {
				this.current = index
				this.page = 1
				this.orderList = []
				this.getPrice()
				this.startTime = '开始时间'
				this.endtimec = '截止时间'
				this.getOrderList()
			},
			//订单数据
			getOrderList() {
				let data = {
					page: this.page,
					limit: this.limit,
					indentType: parseInt(this.current) + 1,
					startTime: this.startTime == '开始时间' ? '' : this.startTime,
					endTime: this.endtime == '截止时间' ? '' : this.endtime,
				}
				this.$Request.getT("/app/invoice/getIndentList", data).then(res => {
					if (res.code == 0) {
						this.totalPage = res.data.pages
						let data = res.data.records
						data.map(item => {
							item.checked = false
						})
						if (this.page == 1) {
							this.orderList = data
						} else {
							if (data.length > 0) {
								this.orderList = this.orderList.concat(data)
							}
						}

					}
				});
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				if (this.ids.indexOf(e.ordersNo) == -1) { //如果没有选中则把goodsid增加到数组中
					this.ids.push(e.ordersNo)
				} else { //如果找到了则把goodsid删除
					this.ids.splice(this.ids.indexOf(e.ordersNo), 1)
				}
				if (this.ids.length == this.orderList.length) { //判断是否全部选中
					this.selectAll = true
				} else {
					this.selectAll = false
				}
				this.count = this.ids.length
			},
			//全选
			checkboxChanges(e) {
				this.ids = []
				if (this.selectAll == false) { //全选（把总复选框选中并把id赋给数组）
					this.orderList.map(item => {
						item.checked = true
						this.ids.push(item.ordersNo)
					})
				} else { //全不选
					this.orderList.map(item => {
						item.checked = false
					})
				}
				this.count = this.ids.length
				this.price = 0
				this.orderList.map(item => {
					if (item.checked == true) {
						this.price += item.payMoney
					}
				})
			},
			confirms(e) {
				this.startTime = e.year + '-' + e.month + '-' + e.day
			},
			confirme(e) {
				this.endtime = e.year + '-' + e.month + '-' + e.day
			},
			//切换
			qiehuan() {
				//初始化时间
				this.startTime = '开始时间'
				this.endtime = '截止时间'
				this.show = !this.show
				this.open = !this.open
			},
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		background-color: rgba(3, 159, 255, 0.1) !important;
		color: #068bff;
	}

	.selectDown {
		width: 100%;
		// height: 300rpx;
		background-color: #ffffff;
		z-index: 99999;
		border-radius: 0 0 20rpx 20rpx;

		.selectDown-box {
			width: 686rpx;
			margin-top: 20rpx;

			.selectDown-box-time {
				margin-top: 20rpx;

				.selectDown-box-time-l {
					width: 40%;
					height: 70rpx;
					background-color: #f2f2f2;
					border-radius: 16rpx;
				}

				.selectDown-box-time-r {
					width: 40%;
					height: 70rpx;
					background-color: #f2f2f2;
					border-radius: 16rpx;
				}
			}
		}

		.selectDown-btn {
			width: 100%;
			height: 80rpx;
			margin-top: 30rpx;

			.selectDown-btn-l {
				width: 50%;
				height: 100%;
				background-color: #f2f2f2;
				border-radius: 0 0 0 20rpx;
			}

			.selectDown-btn-r {
				width: 50%;
				background-color: #346EF6;
				color: #ffffff;
				height: 100%;
				border-radius: 0 0 20rpx 0;
			}
		}
	}

	.selectTypes {
		width: 100%;
		height: 70rpx;
		background-color: #ffffff;
		position: relative;
		z-index: 99999;

		.shgaixuan {
			position: absolute;
			width: 60rpx;
			height: 100%;
			right: 31rpx;
			background-color: #ffffff;
			z-index: 9999;
		}

		.selectTypes-box {
			width: 626rpx;
			height: 100%;
			// background-color: red;
			overflow-x: auto;
			overflow-y: hidden;
			white-space: nowrap;
			margin-left: 32rpx;

			.selectTypes-item {
				background-color: #f2f2f2;
				padding: 10rpx 20rpx 10rpx 20rpx;
				border-radius: 12rpx;
				margin-right: 10rpx;
				font-size: 24rpx;
			}
		}
	}

	.fpList {
		width: 100%;
		height: auto;
		margin-top: 30rpx;
		margin-bottom: 190rpx;

		.fpList-box {
			width: 686rpx;
			height: 100%;

			.fpList-box-item {
				width: 686rpx;
				// height: 200rpx;
				padding: 20rpx 0;
				border-radius: 26rpx;
				background-color: #ffffff;
				margin-bottom: 20rpx;
			}

			.fpList-box-item-c {
				width: 646rpx;
				height: 100%;

				.fpList-box-item-c-l-info-t {
					font-size: 30rpx;
					font-weight: bold;

					span {
						margin-left: 20rpx;
						color: #333333;
						font-size: 24rpx;
						font-weight: 300;
					}
				}

				.fpList-box-item-c-l-info-c {
					width: 460rpx;
					margin-top: 10rpx;
					color: rgb(126, 126, 126);

					span {
						display: inline-block;
						width: 20rpx;
						height: 20rpx;
						background-color: #346EF6;
						border-radius: 50%;
						position: relative;
						margin-right: 20rpx;

						text {
							display: inline-block;
							width: 10rpx;
							height: 10rpx;
							background-color: #ffffff;
							border-radius: 50%;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}
					}
				}

				.fpList-box-item-c-l-info-b {
					width: 460rpx;
					margin-top: 10rpx;
					color: rgb(126, 126, 126);

					span {
						display: inline-block;
						width: 20rpx;
						height: 20rpx;
						background-color: black;
						border-radius: 50%;
						position: relative;
						margin-right: 20rpx;

						text {
							display: inline-block;
							width: 10rpx;
							height: 10rpx;
							background-color: #ffffff;
							border-radius: 50%;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}
					}
				}

				.fpList-box-item-c-r {
					margin-top: 94rpx;

					span {
						font-size: 30rpx;
						font-weight: bold;
						margin-right: 10rpx;
					}
				}
			}
		}
	}

	.select {
		width: 100%;
		height: 150rpx;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;
		z-index: 1;

		.select-se {
			width: 100%;
			height: 50rpx;
			background-color: rgb(211, 233, 252);

			.select-se-box {
				width: 686rpx;
				height: 100%;
				font-size: 24rpx;

				text {
					margin-left: 10rpx;
					margin-right: 10rpx;
					color: rgb(118, 167, 219);
				}
			}
		}

		.select-box {
			width: 686rpx;
			height: 100%;

			.select-box-c {
				width: 646rpx;
				height: 100%;

				.select-box-c-s {
					height: 100%;
					margin-top: 20rpx;
				}

				.select-box-c-btn {
					width: 240rpx;
					height: 80rpx;
					border-radius: 60rpx;
					background-color: rgb(219, 219, 219);
					color: #ffffff;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>