ryx/pages/invoice/invoiceList.vue

<template>
	<view class="curpage">
		<view class="search" style="margin-bottom: 24rpx;">
			<u-search placeholder="请输入单号" v-model="keyword" borderColor="#A8A8A8" height="64rpx" searchIconSize="44" @search="loadLsit" @custom="loadLsit()"></u-search>
		</view>
		<view class="list" v-for="(item,index) in bill " :key="index">
			<view class="content">
				<view class="flextop">
					<view class="">
						单号 {{item.code}}
					</view>
					<view class="price">
						订单金额 <text style="font-weight: 700;font-size: 28rpx;margin-left: 10rpx;">￥{{item.amount}}</text>
					</view>
				</view>
				<view class="detail">
					<radio color="#1E9F6A" style="font-size: 26rpx;" :checked="item.checked" :value="index"
						@click="checkbox(index)"></radio>
					<!-- <u-checkbox  iconSize=32 style="padding: 0 100rpx;" activeColor="#1E9F6A" :key="index" :name="item.amount"></u-checkbox> -->
					<view class="" style="margin-left: 30rpx;">
						<view class="" style="font-weight: 700;font-size: 36rpx;">
							夕阳红康养团7日游
						</view>
						<view class="" style="margin: 24rpx 0;">
							日期：{{item.start_at}} ~ {{item.end_at}}
						</view>
						<view class="">
							数量 {{item.number}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="navbar">
			<view class="navbar-item">
				总金额 ￥{{total}}
			</view>
			<view class="navbar-item want" @click="choose">
				选择抬头
			</view>
		</view>
		<view v-show="bill.length==0" class="more"><text>暂无更多</text></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bill: [],
				keyword: '',
				checkboxValue1: [],
				ids:[]
			}
		},

		onLoad() {
			this.loadLsit()
		},
		computed:{
			total(){
				let allprice=0
				this.bill.forEach(item=>{
					if(item.checked){
						allprice+=Number(item.price)
					}
				})
				return allprice
			}
		},
		
		methods: {
			loadLsit() {
				this.$showLoadding("加载中")
				uni.$u.http.post('/api/order/bill', {
					keyword:this.keyword
				},{
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.hideLoading()
					let nawarr = res
					nawarr.forEach(item => {
						item.checked = false
					})
					this.bill = nawarr
				}).catch((err) => {
					uni.hideLoading()
					console.log(err)
				})
			},
			checkbox(n) {
				let data = this.bill
				if (data[n].checked) {
					data[n].checked = false;
				} else {
					data[n].checked = true;
				}
				this.ids=[]
				data.forEach(item=>{
					if(item.checked){
						this.ids.push(item.id)
					}
				})
				console.log('ids',this.ids);
			},
			// 跳转抬头管理
			choose() {
				if(this.ids.length<=0){
					this.$toast("请选择开票订单")
					return
				}
				let order={
					ids:this.ids,
					total:this.total
				}
				uni.setStorageSync("order",order)
				uni.navigateTo({
					url: "/pages/invoice/applyInvoice"
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F4F4F4;
		font-size: 26rpx;
	}

	.curpage {
		padding: 24rpx 30rpx;

		.list {
			box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.02);
			border-radius: 8rpx 8rpx 8rpx 32rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			.flextop {
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #E3E3E3;
				padding: 30rpx;
			}

			.detail {
				padding: 30rpx;
				display: flex;
				align-items: center;
			}
		}

		.navbar {
			display: flex;
			font-size: 30rpx;
			align-items: center;
			bottom: 0;
			left: 0;
			position: fixed;
			width: 100%;
			height: 104rpx;
			background: #1E9F6A;
			border-radius: 16rpx 16rpx 0px 0px;
			color: #ffffff;

			.navbar-item {
				flex: 1;
				text-align: center;
			}

			.want {
				border-left: 1rpx solid #FFFFFF;
			}
		}
	}
</style>