great_mobileui/center/invoice.vue

<template>
	<view class="pages">
		<view class="" :style="{height: navHeight+'px' }"></view>
		<view class="navbar-box">
			<u-navbar title="开具发票" :safeAreaInsetTop="true" @leftClick="leftClick" :titleStyle="{color:'#fff'}" leftIconColor="#fff" bgColor="#EF1818"></u-navbar>
		</view>
		<view class="page-wrap">
			<mescroll-body class="" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<!-- :down="downOption" :up="upOption" -->
				<view class="list">
					<u-checkbox-group placement="column" @change="checkboxChange" >
					<view v-for="(item,index) in dataList" class="list-item u-flex" :key="item.id">
						<view class="left">
							<u-checkbox shape="circle" :disabled="item.quantity>item.stock" activeColor="#ED0000" :key="index" :name="item.name" :checked="item.checked" @change="toggleCheck(index)" class="checkbox" />
						</view>
						<view class="right">
							<view class="order-number">订单号：360123456789079797</view>
							<view class="info u-flex">
								<image class="img" :src="item.showImg||staticUrl+'/img/newsdetails-banner.png'"></image>
								<view class="text">
									<view class="name">《伟大转折》-【成人票】</view>
									<view class="time">2023-11–03 14:00-16:00</view>
									<view class="position">5排6座</view>
									<view class="statistics">
										<text>共1张</text>
										<text class="label">合计：</text>
										<text class="price">¥120.00</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					</u-checkbox-group>
				</view>
			</mescroll-body>
		</view>
		<view class="page-bottom">
			<view class="inner u-flex u-row-between">
				<view class="left">
					<u-checkbox-group @change="allCheckboxChange">
						<u-checkbox shape="circle" :checked="allChecked" activeColor="#ED0000" :name="allCheckbox.name" label="全选"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="right u-flex">
					<view class="total-price u-flex">
						<text>合计：</text>
						<text class="num">{{totalPrice}}</text>
					</view>
					<view class="btn active" v-if="totalPrice>0&&cansubmit" @click="submitorder">申请开票</view>
					<view class="btn" v-else>申请开票</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin,systemInfo], // 使用mixin
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				allCheckbox:{name: '全选'},
				dataList:[
					{name:'路线推荐',checked:false,pic:`${this.$commonConfig.staticUrl}/img/indexnav-luxian.png`,id:1},
					{name:'路线推荐',checked:false,pic:`${this.$commonConfig.staticUrl}/img/indexnav-luxian.png`,id:2},
				],
			}
		},
		onShow() {
		},
		onLoad() {
			this.getSystemInfo();

		},
		computed: {
		    // 是否全选
		    allChecked() {
		        return this.dataList.every(item => item.checked)
		    },
		    // 商品合计价格
		    selectGoods() {
				let selectGoods = [];
		        this.dataList.forEach(item => {
		            if (item.checked) {
		               selectGoods.push(item)
		            }
		        })
		        return selectGoods
		    },
			totalPrice() {
			  let that = this;
			  return this.dataList.reduce((total, item) => {
				if (item.checked) {
					let price = null;
					// if(that.vuex_member_info.priceType>1){
					// 	price = item.vipPrice
					// }else{
					// 	price = item.salePrice
					// }
					price = item.levelPrice
				  total += price * item.quantity;
				}
				return total;
			  }, 0).toFixed(2);
			}
		},
		methods: {
			leftClick(e){
				let pages = getCurrentPages();
				if(pages.length==1){
					uni.$u.route('/pages/index/index')
				}else{
					uni.navigateBack()
				};
			},
			/*下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
			downCallback(){
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				// 此处可以继续请求其他接口
				// if(page.num == 1){
				// 	// 请求其他接口...
				// }
			
				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
				// if(!this.hasTypeId){
				// 	this.mescroll.endErr();//没有接口暂时不调用
				// 	return // 此处return,先获取xx
				// }
			
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
			
				let params = {
					pageNum : page.num,
					pageSize :  page.size,
					status:this.status
				}
				// console.log('this.params',params);
				this.$u.api.orderList(params).then(data => {
					this.hasfetch = true;
					console.log('data',JSON.parse(JSON.stringify(data)));
					// 接口返回的当前页数据列表 (数组)
					let curPageData = data.data.rows;
					curPageData = curPageData.map( item =>{
						item.checked = false
						return  item
					})
					// console.log('curPageData',JSON.parse(JSON.stringify(curPageData)));
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length; 
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					// let totalPage =  data.data.data.totalPage; 
					// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
					let totalSize = data.data.total; 
					// 接口返回的是否有下一页 (true/false)
					// let hasNext = data.xxx; 
					// console.log('totalPage',totalPage,'curPageLen',curPageLen);
					//设置列表数据
					if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
					this.dataList = this.dataList.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					// this.mescroll.endByPage(curPageLen, totalPage); 
					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					this.mescroll.endBySize(curPageLen, totalSize); 
				}).catch(err => {
					this.mescroll.endErr()
					console.log(err)
				});	
			
			},
			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
			reloadList() {
				this.mescroll.resetUpScroll();
			},
			search(e){
				this.reloadList();
			},
			checkboxChange(n){
				// console.log('checkboxChange',n);
			},
			toggleCheck(index) {
				console.log('toggleCheck',index);
			    this.dataList[index].checked = !this.dataList[index].checked
			},
			checkboxClick(){
				console.log('checkboxClick',this.allChecked);
				this.dataList.forEach(item => {
					if(item.quantity<=item.stock){
						item.checked = !this.allChecked
					}
				})
			},
			// 切换全选状态
			allCheckboxChange(n){
				// console.log('allCheckboxChange',n[0]);
				// console.log('allCheckboxChange',n);
				let selectAll = n[0]?true:false;
				this.dataList.forEach(item => {
					item.checked = selectAll
				});
				 console.log('selectGoods',this.selectGoods);
			},

		}
	}
</script>
<style>
	page{background-color: #F7F7F9;}
</style>
<style lang="scss" scoped>
.list-item{
	background: #FFFFFF;
	box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(221,221,221,0.5);
	border-radius: 20rpx;
	margin-bottom: 24rpx;
	padding: 34rpx 32rpx 50rpx 20rpx;
	.right{
		flex: 1;
		padding-left: 24rpx;
		.order-number{
			font-size: 24rpx;
			font-weight: 400;
			color: #7F7F7F;
			line-height: 36rpx;
			margin-bottom: 36rpx;
		}
		.info{
			.img{
				width: 180rpx;
				height: 160rpx;
			}
			.text{
				font-size: 24rpx;
				font-weight: 400;
				color: #7F7F7F;
				padding-left: 26rpx;
				.name{
					font-size: 28rpx;
					font-weight: bold;
					color: #363636;
					margin-bottom: 20rpx;
				}
				.time{
					margin-bottom: 20rpx;
				}
				.position{
					margin-bottom: 20rpx;
				}
				.statistics{
					text-align: right;
				}
				.label{
					font-size: 24rpx;
					font-weight: 400;
					color: #363636;
					margin-left: 10rpx;
				}
				.price{
					font-size: 32rpx;
					font-weight: bold;
					color: #ED0000;
				}
			}
		}
	}
}
.page-bottom{
	position: relative;
	z-index: 1001;
	height: 98rpx;
	padding: 24rpx 20rpx 50rpx;
	.inner{
		position: fixed;
		background-color: #fff;
		height: 98rpx;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 24rpx 20rpx 50rpx;
		box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(215,215,215,0.5);
		.total-price{
			font-size: 28rpx;
			font-weight: 400;
			color: #313131;
			margin-right: 32rpx;
			.num{
				font-size: 40rpx;
				font-weight: bold;
				color: #ED0000;
			}
		}
		.btn{
			font-size: 28rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			padding: 0 50rpx;
			background-color: #eee;
			color: #333;
			text-align: center;
			&.active{
				background: linear-gradient(90deg, #FF7979 0%, #ED0000 100%);
				color: #fff;
			}
		}
	}
}
</style>