RiyueGorge/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"></u-search>
		</view>
		<view class="list">
			<u-checkbox-group  v-model="checkboxValue1"  placement="column"  @change="checkboxChange" shape="circle" size=32>
			  	<view class="content">
			  		<view class="flextop">
			  			<view class="">		
			  				单号  RYX202213582
			  			</view>
			  			<view class="price" >
			  				订单金额 <text style="font-weight: 700;font-size: 28rpx;margin-left: 10rpx;">￥1690</text>
			  			</view>
			  		</view>
			  		<view class="detail">
						<u-checkbox  iconSize=32 style="padding: 0 100rpx;" activeColor="#1E9F6A"></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;">
			  					日期：2022-04-25 ~ 2022-05-01
			  				</view>
			  				<view class="">
			  					数量     1
			  				</view>
			  			</view>
			  		</view>
			  	</view>
			</u-checkbox-group>
		</view>
		 <view class="navbar">
		     <view class="navbar-item">
		 		总金额  ￥12929
		 	</view>
		 	<view class="navbar-item want" @click="choose"  >
		 		选择抬头
		 	</view>
		 </view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				keyword:'',
				 checkboxValue1:[],
			}
		},
		methods:{
			 checkboxChange(n) {
			            console.log('change', n);
			        },
					// 跳转抬头管理
			choose(){
				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;
			.flextop{
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #E3E3E3;
				padding: 30rpx;
			}
			.detail{
				padding: 30rpx;
				display: flex;
			}
		}
		.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>