unimall/unimall-app/pageB/contract/look.vue

<template>
	<view class="container">
		<view style='background:#E6F3F9;border-bottom:1px solid #ccc;' class='flex justify-between padding-xl' @click='unfold1()'>
			<view style='width:92%;margin-top: -4px;text-align:center;' class='flex justify-between'>
				结算明细
			</view>
			<view :class="isOpen1 ? 'cuIcon-unfold' : 'cuIcon-right'" ></view>
		</view>
		<view :class="isOpen1 ? 'content-open' : 'content-close'" class='content1'>
			<view class="table  u-font-xs">
				<view class="tr bg-w">
					<view class="th">车牌号</view>
					<view class="th">净重(吨)</view>
					<view class="th">应收(元)</view>
					<view class="th ">已收(元)</view>
					<view class="th ">未收(元)</view>
				</view>
				<view class='tbody'>
					<block v-for='(item,index) in contractInfo.taskDTOList' >
						<view class="tr" >
							<view class="td">{{item.carNo}}</view>
							<view class="td">{{item.netWeight}}</view>
							<view class="td">{{numFilter(item.sumPrice)}}</view>
							<view class="td">{{numFilter(item.sumPrice - item.notPay)}}</view>
							<view class="td">{{numFilter(item.notPay)}}</view>
						</view>
					</block>
					<view class="tr" >
						<view class="td">合计:</view>
						<view class="td">{{contractInfo.sumNet}}</view>
						<view class="td">{{numFilter(contractInfo.sumTotal)}}</view>
						<view class="td">{{numFilter(contractInfo.payMoney)}}</view>
						<view class="td">{{numFilter(contractInfo.notPayMoney)}}</view>
					</view>
				</view>
			</view>
			<!-- <view class='flex justify-between padding-xs' v-for='item in contractInfo.taskDTOList'>
				<view>{{item.carNo}}</view>
				<view>{{item.netWeight}}</view>
				<view>{{item.sumPrice}}</view>
				<view>{{item.sumPrice - item.notPay}}</view>
				<view>{{item.notPay}}</view>
			</view> -->
		</view>
		<view style='background:#E6F3F9;border-bottom:1px solid #ccc;' class='flex justify-between padding-xl' @click='unfold2()'>
			<view style='width:92%;margin-top: -4px;' class='flex justify-between'>
				平仓明细
			</view>
			<view :class="isOpen2 ? 'cuIcon-unfold' : 'cuIcon-right'" ></view>
		</view>
		<view :class="isOpen2 ? 'content-open' : 'content-close'" class='content2'>
			<view class="table u-font-xs">
				<view class="tr bg-w">
					<view class="th">序号</view>
					<view class="th">平仓数(吨)</view>
					<view class="th">应收(元)</view>
					<view class="th ">已收(元)</view>
					<view class="th ">未收(元)</view>
				</view>
				<view class='tbody'>
					<block v-for='(item,index) in contractInfo.taskDTOList1' >
						<view class="tr" >
							<view class="td">{{index+1}}</view>
							<view class="td">{{item.closeTon}}</view>
							<view class="td">{{numFilter(item.sumPriceClose)}}</view>
							<view class="td">{{numFilter(item.sumPriceClose - item.notPayClose)}}</view>
							<view class="td">{{numFilter(item.notPayClose)}}</view>
						</view>
					</block>
					<view class="tr" >
						<view class="td">合计</view>
						<view class="td">{{contractInfo.sumNetClose}}</view>
						<view class="td">{{numFilter(contractInfo.sumTotalClose)}}</view>
						<view class="td">{{numFilter(contractInfo.payMoneyClose)}}</view>
						<view class="td">{{numFilter(contractInfo.notPayMoneyClose)}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
			data() {
				return {
					contractInfo: [],
					pages:1,//页数
					limit:10 ,//每次取条目数
					price: 0,
					loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
					isLoadMore:false, //是否加载中
					isOpen1:false,
					isOpen2:false
				};
			},
			computed: {
				...mapState(['hasLogin','userInfo'])
			},
			onShow() {
				
			},
			//下拉刷新
			onPullDownRefresh() {
				this.pages = 1
				this.isLoadMore = false
				this.loadStatus = 'loading'
				this.loadData()
			},
			onLoad(options) {
				this.contractNo=options.contractNo
				this.loadData()
			},
			// onPageScroll(e) {
			// 	//兼容iOS端下拉时顶部漂移
			// 	if (e.scrollTop >= 0) {
			// 		this.headerPosition = "fixed";
			// 	} else {
			// 		this.headerPosition = "absolute";
			// 	}
			// },
			onReachBottom(){  //上拉触底函数
			  if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
					this.isLoadMore=true
					this.pages += 1
					this.getContractData()
			  }
			},
			
			methods: {
				numFilter (value) {
					if(!value){
						return 0
					}
					// 截取当前数据到小数点后两位
					let realVal = parseFloat(value).toFixed(2)
					return realVal
				},
				unfold1(){
					this.isOpen1=!this.isOpen1
				},
				unfold2(){
					this.isOpen2=!this.isOpen2
				},
				async loadData() {
					const that = this
					uni.showLoading({
						title: '正在加载',
						mask:true
					})
					that.$api.request('contract', 'getContractInfo',{
						page: this.pages,
						limit:this.limit,
						contractNo:that.contractNo
					}, failres => {
						that.$api.msg(failres.errmsg)
						this.isLoadMore = false
						this.loadStatus = 'nomore'
						if(this.pages>1){this.pages=1}
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}).then(res => {
						that.contractInfo = res.data
						uni.hideLoading()
						uni.stopPullDownRefresh()
					})
					if (!this.hasLogin) {
						uni.showModal({
							title: '登录提示',
							content: '您尚未登录，是否立即登录？',
							showCancel: true,
							confirmText: '登录',
							success: (e) => {
								if (e.confirm) {
									uni.navigateTo({
										url: '/pages/public/login'
									})
								}
							},
							fail: () => {},
							complete: () => {}
						})
					}
				},
			},
		}
</script>

<style scoped>
	.padding-xl{
		padding:25rpx 50rpx;
	}
	.content-open{
		display:block;
	}
	.content1,.content2{
		padding: 10rpx 18rpx;
	}
	.content-close{
		display:none;
	}
	.table {
	 border: 0px solid darkgray;
	}
	.tr {
	 display: flex;
	 width: 100%;
	 justify-content: center;
	 height: 3rem;
	 align-items: center;
	}
	.td {
	 width:40%;
	 justify-content: center;
	 text-align: center;
	}
	.bg-w{
	 background: snow;
	}
	.bg-g{
	 background: #E6F3F9;
	}
	.th {
	 width: 40%;
	 justify-content: center;
	 /* background: #3366FF; */
	 /* color: #fff; */
	 display: flex;
	 height: 3rem;
	 align-items: center;
	 border-bottom:1px solid #ccc;
	 border-top:1px solid #ccc;
	 text-align:center;
	 padding:10px;
	 font-weight:600;
	}
	.tr .th:first-child{
		border-left:1px solid #ccc;
	}
	.tr .th:last-child{
		border-right:1px solid #ccc;
	}
	.tbody .tr{
		border-bottom:1px solid #ccc;
		border-left:1px solid #ccc;
		border-right:1px solid #ccc;
	}
</style>