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

<template>
	<view v-if='contractInfo'>
		<view class="content">
			<scroll-view class="list-scroll-content" scroll-y @scrolltolower="onReachBottomTmp">
				<view class="guess-section">
					<view 
						v-for="(item, index) in contractInfo.tran" :key="index"
						class="guess-item"
						@click="navToDetailPage(item)"
					>
					<view class="flex justify-between padding-xs ">
						<view style='background:#4BA831;' class='contractType'>{{item.contractType}}</view>
						<view style='width:75%;'>
							<view>合同编号：{{item.contractNo}}</view>
							<view>运输人员：{{item.driver}}</view>
							<view>运输车牌：{{item.carNo}}</view>
						</view>
					</view>
					</view>
					<view
						v-for="(item, index) in contractInfo.trade" :key="index"
						class="guess-item"
					>
					<view class="flex justify-between padding-xs ">
						<view style='background:#3C73F2;' v-if="item.contractType == '销售合同'" class='contractType'>
							<text v-if='item.tips != 0' class='badge'>{{item.tips}}</text>
							<!-- <text class='badge'>1</text> -->
							{{item.contractType}}
						</view>
						<view style='background:#E3A13E;' v-if="item.contractType == '采购合同'" class='contractType'>
							<text v-if='item.tips != 0' class='badge'>{{item.tips}}</text>
							<!-- <text class='badge'>1</text> -->
							{{item.contractType}}
						</view>
						<view style='width:75%;'>
							
							<view class='flex justify-between'>
								<view>合同编号：{{item.contractNo}}</view>
								<view v-if='item.tradeStatus==2'>已受理</view>
								<view v-if='item.tradeStatus==3'>已成交</view>
								<view v-if='item.tradeStatus==4'>已完成</view>
							</view>
							<view v-if='item.tradeStatus==2' class='flex justify-between'>
								<text style='display:inline-block;margin-right:5px;' v-if="item.price">暂定价：{{item.price}}</text>
								<text style='display:inline-block;margin-right:5px;' v-if="item.basis">基差：{{item.basis}}</text>  
								<text style='display:inline-block;margin-right:5px;' v-if="item.allCount">吨位：{{item.allCount}}T</text>  
							</view>
							<view v-else class='flex justify-between'>
								<text style='display:inline-block;margin-right:5px;' v-if="item.price">成交价：{{item.price}}</text>
								<text style='display:inline-block;margin-right:5px;' v-if="item.basis">基差：{{item.basis}}</text>  
								<text style='display:inline-block;margin-right:5px;' v-if="item.allCount">吨位：{{item.allCount}}T</text>  
							</view>
							<view class='flex button-group'><button @click="navToDetailPage2(item)">操作</button><button  @click="examine(item)">查看</button></view>
							<!-- <view class='flex justify-between' v-if="item.contractType == '采购合同'">
								<text style='display:inline-block;margin-right:5px;' >总量：{{item.allCount}}</text> 
								<text style='display:inline-block;margin-right:5px;' >已完成量 {{item.num}}</text>
							</view>
							<view class='flex justify-between' v-if="item.contractType == '采购合同'">
								<text style='display:inline-block;margin-right:5px;' v-if="item.money">应付金额：{{item.money}}</text>
								<text style='display:inline-block;margin-right:5px;' v-if='item.notMoney'>未付金额：{{item.notMoney}}</text>
							</view>
							<view class='flex justify-between' v-if="item.contractType == '销售合同'">
								<text style='display:inline-block;margin-right:5px;' v-if="item.money">应收金额：{{item.money}}</text> 
								<text style='display:inline-block;margin-right:5px;' v-if='item.notMoney'>未收金额：{{item.notMoney}}</text>
							</view>
							<view class='flex justify-between'>
								<text style='display:inline-block;margin-right:5px;' v-if="item.basis">基差：{{item.basis}}</text>  
								<text style='display:inline-block;margin-right:5px;' v-if="item.price">点价金额：{{item.price}}</text>
							</view>
							<view class='flex justify-between'>
								<text v-if="item.invoiceMoney">发票费：{{item.invoiceMoney}}</text>  
								<text v-if="item.packingMoney">包装费：{{item.packingMoney}}</text>
								<text v-if="item.unloadingFee">卸车费：{{item.unloadingFee}}</text>
								<text v-if="item.deductionFee">总扣款(元)：{{item.deductionFee}}</text>
							</view> -->
						</view>
						<!-- <text  class='badge'>11</text> -->
					</view>
					<!-- <view class="flex justify-between padding-xs ">
					  <view class=" padding-xs">
						  <view  class="cu-capsule radius">
							<view class="cu-tag bg-green">
								{{item.contractType}}
							</view>
							<view class="cu-tag line-green">
								{{item.contractNo}}
							</view>
						  </view>
						  <view class="cu-capsule radius">
							<view v-if="item.allCount" class="cu-tag bg-orange">
								总量  {{item.allCount}}
							</view>
							<view v-if="item.allCount&&item.num" class="cu-tag line-orange">
								<view v-if="item.allCount-item.num > 0">未完成量  {{item.allCount-item.num}}</view>
								<view v-else>未完成量  0</view>
							</view>
							<view v-if="item.basis" class="cu-tag line-orange">
								<view>基差 {{basis}}</view>
							</view>
							<view v-if="item.price" class="cu-tag bg-orange">
								点价金额  {{item.price}}
							</view>
						  </view>
						  <view class="cu-capsule radius">
							<view v-if="item.money && item.contractType == '销售合同'" class="cu-tag bg-orange">
								应收款  {{item.money}}
							</view>
							<view v-if="item.notMoney && item.contractType == '销售合同'" class="cu-tag line-orange">
								未收款  {{item.notMoney}}
							</view>
							<view v-if="item.money && item.contractType == '采购合同'" class="cu-tag bg-orange">
								应付款  {{item.money}}
							</view>
							<view v-if="item.notMoney && item.contractType == '采购合同'" class="cu-tag line-orange">
								未付款  {{item.notMoney}}
							</view>
							<view v-if="item.definitePrice" class="cu-tag bg-orange">
								我的定金  {{item.definitePrice}}
							</view>
						  </view>
					  </view>
					  <text v-if='item.tips != 0' class='badge'>{{item.tips}}</text>
					</view> -->
					</view>
					<view v-show="isLoadMore">
						<uni-load-more :status="loadStatus" ></uni-load-more>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
	<view v-else>
		当前暂无合同信息
	</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  //是否加载中
				};
			},
			computed: {
				...mapState(['hasLogin','userInfo'])
			},
			onShow() {
				this.loadData()
			},
			//下拉刷新
			onPullDownRefresh() {
				this.pages = 1
				this.isLoadMore = false
				this.loadStatus = 'loading'
				this.loadData()
			},
			onLoad(options) {
			},
			// 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: {
				async loadData() {
					const that = this
					uni.showLoading({
						title: '正在加载',
						mask:true
					})
					that.$api.request('contract', 'getTranContractList',{
						page: this.pages,
						limit:this.limit
					}, 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: () => {}
						})
					}
				},
				examine(item){
					uni.navigateTo({
						url: `/pageB/contract/look?contractNo=${item.contractNo}`
					})
				},
				//详情
				navToDetailPage(item) {
					var that = this
					uni.showLoading({
						title: '正在加载',
						mask:true
					})
					uni.downloadFile({
					  url: item.contractImg,
					  success: function (res) {
					    var filePath = res.tempFilePath;
					    uni.openDocument({
					      filePath: filePath,
					      success: function (res) {						
							uni.hideLoading()
					        console.log('打开文档成功');
					      }
					    });
					  },
					})
				},
				navToDetailPage2(item) {
					uni.navigateTo({
						url: `/pageA/pages/deliver_goods?id=${item.id}&contractType=${item.contractType}&tradeStatus=${item.tradeStatus}`
					})
					
				},
				onReachBottomTmp(){  //上拉触底函数
				  if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
						this.isLoadMore=true
						this.pages += 1
						this.getContractData()
				  }
				},
				getContractData(){
					const that = this
					var pages=that.pages
					var limit=that.limit
				   
					uni.showLoading({
						title: '正在加载',
						mask:true
					})
					that.$api.request('contract', 'getTranContractList', {
						page: pages,
						limit:limit
					},failres => {
						that.$api.msg(failes.errmsg)
						that.isLoadMore=false
						that.loadStatus = 'nomore'
						if(that.pages>1){that.pages-=1}
						uni.hideLoading()
					}).then(res => {
						//销售信息
						if(that.contractInfo.length > 0){
							that.contractInfo = that.contractInfo.concat(data)
							that.isLoadMore=false
						}
						else{
							if(that.pages>1){that.pages-=1}						
							that.isLoadMore=true
							that.loadStatus = 'nomore'
						}
						uni.hideLoading()
					})
				}
			},
		}
</script>

<style lang='scss' scoped>
	.contractType{
		padding: 10px 15px;
		width: 118rpx;
		border-radius: 9rpx;
		height: 118rpx;
		position: relative;
	}
	.button-group{
		margin-top:10px;
		justify-content: space-between;
	}
	.button-group button{
		height: 30px;
		font-size: 12px;
		line-height: 30px;
		margin:0;
	}
	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}
	.cu-tag {
	    font-size: 40rpx;
	    word-break:break-all;
	}
	.container{
		padding-bottom: 100upx;
	}
	.cu-capsule+.cu-capsule {
	    margin-left: 0rpx;
	}
	.cu-capsule {
	    display: flex;
		position: relative;
	    margin: 5px 0;
	}
	.cu-form-group input {
		text-align: right;
	}
	.cu-form-group textarea {
		text-align: right;
	}
	.place{
		font-size: 40rpx;
		line-height: 1;
		padding-right: 10upx;
	}
	.place-center{
		font-size: 28rpx;
	}
	.guess-item{
		/* margin-top: 10rpx; */
	}
	.btn-size{
		font-size: 28rpx;
	}
	.place-bottom{
		margin-top: 20rpx;
	}
	.swiper-box {
		height: calc(100% - 40px);
	}
	.list-scroll-content {
		height: 100%;
	}
	.uni-swiper-item {
		height: auto;
	}
	/* 标题简介 */
	.introduce-section_contract {
		background: #fff;
		padding: 20upx 30upx;
	}
		.title {
			font-size: 34upx;
			color: $font-color-dark;
			height: 50upx;
			line-height: 50upx;
			flex:3;
		}
		.title-tip {
			flex:1;
			color:#fa436a;
		}
		.price-box {
			display: flex;
			align-items: baseline;
			height: 100upx;
			padding: 10upx 0;
			font-size: 26upx;
			color: $uni-color-primary;
		}
	
		.price_contract {
			font-size: 34rpx;
		}
	
		.m-price {
			margin: 0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}
	
		.coupon-tip {
			align-items: center;
			padding: 4upx 10upx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx);
		}
	
		.bot-row {
			display: flex;
			align-items: center;
			height: 50upx;
			font-size: $font-sm;
			color: $font-color-light;
		}
	.guess-section{
		padding-bottom: 100upx;
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: #fff;
		.guess-item{
			display:flex;
			flex-direction: column;
			width: 98%;
			border-bottom:1px solid #f8f8f8;
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-lg;
			color: #121212;
		}
		.price-orther{
			font-size: $font-sm;
			color:$font-color-base;
		}
		.price{
			font-size: 64rpx;
			color: #39b54a;
			line-height: 1;
			padding-right: 10upx;
		}
		
		.goods1{
			font-size: $font-sm;
			color: $font-color-base;
		}
		.goods2{
			font-size: $font-sm;
			color: $font-color-base;
			padding-left: 10%;
		}
		.goods3{
			font-size: $font-sm;
			color: $font-color-base;
			padding-left: 10%;
		}
		.goods4{
			font-size: $font-sm;
			color: #ff5500;
		}
		.goods5{
			font-size: $font-sm;
			color: $font-color-base;
		}
		.view-item{
			width: 100%;
			// line-height: 40upx;
			padding-top: 10upx;
		}
		.confirm-btn {
			margin-left: 20%;
		}
		.date-time {
			margin-left: 30%;
		}
		.padding-xs-tmp {
			padding: 15upx 10upx 10upx 10upx;
		}
	}
	.badge{
		position: absolute;
		right: -5px;
		top: -16px;
		color: #fff;
		background-color: #dc3545;
		display: inline-block;
		padding: .25em .4em;
		height: 15px;
		margin: 20rpx 0;
		font-size: 75%;
		font-weight: 700;
		line-height: 1;
		text-align: center;
		white-space: nowrap;
		vertical-align: top;
		border-radius: 50%;
		-webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
		transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
		}
</style>