yiliangyiyun-app/pages/bill/index.vue

<template>
	<view  :class="show ? 'tl-show': ''">
		<view>
			<view style='background:#fff;display:flex;' class="cu-bar search">
				<view style='flex:6;' class="search-form round Medium">
					<text style='color: #ccc;text-indent:6px;' class="cuIcon-search"></text>
					<input type="text" maxlength="20" :focus="true" v-model="searchKeyWord" @confirm="doSearch()"
						 placeholder="请输入买方名称或编号" confirm-type="search"></input>
				</view>
				<view @click='doSearch()' class="Regular" style="width:4%;flex:1;">搜索</view>
				<u-icon @click='emptysearch' class="cuIcon" v-if='searchKeyWord.length>0' size="34" name="close-circle-fill" color="#D6D9E0"></u-icon>
				<!-- <text @click='emptysearch' v-if='searchKeyWord.length>0' class='tip_text cuIcon-roundclosefill'></text> -->
			</view>
			<view style='background:#fff;padding:0 15px;border-radius:0rpx 0rpx 30rpx 30rpx;' class="Semibold">
				<view @click='tabcarchange(0)' class='line' :class='TabCur==0?"active":""'>全部</view>
				<view @click='tabcarchange(5)' class='line' :class='TabCur==5?"active":""'>待付款</view>
				<view @click='tabcarchange(6)' class='line' :class='TabCur==6?"active":""'>已付款</view>
			</view>
		</view>
		<view class='wrap' v-for='item in dataInfo'>
			<view style='margin:5px;padding:10px 0;border-bottom:1px solid #eee;' class="flex justify-between align-item-center">
				<view style='color:#878C9C;'>{{item.paymentNo}}</view>
				<view class='not' v-if='item.status=="待结算"'>待付款</view>
				<view class='already' v-else>已付款</view>
			</view>
			<view style='line-height:30px;'>
				<view class='purchaser'>买方</view><view style='font-size:14px;display:inline-block;'>{{item.compName}}</view>
			</view>
			<view style='line-height:30px;'>
				<view class='seller'>卖方</view><view style='font-size:14px;display:inline-block;'>{{item.customerName}}</view>
				
			</view>
			<view class='flex justify-between align-item-center'>
				<view style="color:#878C9C;padding:5px;">{{item.goodsName}}</view>
				<view>{{item.netWeight}}</view>
			</view>
			<view class='flex justify-between align-item-center'>
				<view style="color:#878C9C;padding:5px;">单价</view><view>{{item.tidalGrainPrice}}</view>
			</view>
			<view class='flex justify-between align-item-center'>
				<view style="color:#878C9C;padding:5px;">应付</view>
				<view>{{item.amountIngPayable}}</view>
			</view>
			<view class='flex justify-between align-item-center'>
				<view style='color:#878C9C;padding:5px;'>单价</view>
				<view>{{item.amountEdPayable}}</view>
			</view>
			<view style='flex-direction:row-reverse;' class='flex'>
				<view @click='showImage(3,item)' class='button'>结算单</view>
				<view @click='showImage(2,item)' class='button'>检斤单</view>
				<view @click='showImage(1,item)' class='button'>质检单</view>
			</view>
		</view>
		<view v-show="isContent">
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>
		<view @click='closepop' class='popup' v-if='show'>
			<view class='imagewrap' style='text-align:center;'>
				<image :src="img" mode=""></image>
			</view>
			<view @click='xiazai' class='xiazai'><image style='width:24px;height:24px;' src="../../static/img/erp/xiazai@3x.png" mode=""></image></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: "business",
		data() {
			return {
				TabCur:0,
				pageSize:10,
				currentPage:1,
				isLoadMore:false,
				isContent:false,
				loadStatus:'noMore',
				searchKeyWord:'',
				show:false,
				img:'',
				searchType:'',
				dataInfo:[]
			}
		},
		onShow() {
		},
		onLoad(options) {
			this.loadData();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		// onPageScroll(e) {
		// 	this.scrollTop = e.scrollTop;
		// },
		//下拉刷新
		onPullDownRefresh() {
			this.currentPage = 1
			this.isLoadMore = false
			this.loadStatus = 'loading'
			this.loadData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.currentPage += 1
				this.loadData("add")
			}
		},
		methods: {
			closepop(){
				this.show=false
			},
			xiazai(){
				const that = this;
							uni.downloadFile({
								url:that.img,
								success: res => {
									if (res.statusCode === 200) {
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: function() {
												this.tools.toast('保存成功');
												that.show=false
											},
											fail: function() {
												this.tools.toast('保存失败，请稍后重试');
											}
										});
									} else {
										this.tools.toast('下载失败');
									}
								}
							});
				
			},
			showImage(status,item){
				console.log(1111)
				if(status==1){
					this.img=item.qualityInspectionPictureAddress
				}else if(status==2){
					this.img=item.weighingPictureAddress
				}else if(status==3){
					this.img=item.pictureAddress
				}
				this.show=true
			},
			tabcarchange(status){
				this.TabCur=status
				if(status==0){
					this.searchType=''
				}else{
					this.searchType=status
				}
				this.currentPage = 1
				this.loadData()
				
			},
			top() { //回到顶部  
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			},
			naviageToPage(page) {
				page = page + this.TabCur
				uni.navigateTo({
					url: page,
					fail() {
						uni.switchTab({
							url: page
						})
					}
				})
			},
			locationChange(e) {
				console.log(e)
				this.location = this.locationType[e[0]]
				this.receivePrivate = this.locationType[e[0]]
				this.currentPage = 1
				this.loadData()
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.category = this.TabCur
				this.currentPage = 1
				this.loadData()
			},
			emptysearch(){
				this.searchKeyWord=''
				this.dataInfo=[]
				this.loadData()
			},
			doSearch(){
				this.dataInfo=[]
				this.loadData()
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type, loading) {
				if(!this.hasLogin){
					ni.showModal({
						title: '登录提示',
						content: '您尚未登录，是否立即登录？',
						showCancel: true,
						confirmText: '登录',
						success: (e) => {
							if (e.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								})
							}
						},
						fail: () => {},
						complete: () => {}
					})
				}else{
					const that = this
				uni.showLoading({
					title: '正在加载'
				})
				var param1 = ''
				this.$api.doRequest('get', '/paymentManagement/selectPaymentManagement', {
						pageSize: this.pageSize,
						currentPage: this.currentPage,
						searchKeyWord: this.searchKeyWord,
						searchType: this.searchType,
						managementType:1,
						// customerPhone:this.userInfo.phone,
						// pcFlag:1
						// warehouseName:'',
					}).then(res => {
						uni.hideLoading()
						var data= res.data.data.records
						if(type == "add"){
							this.dataInfo = this.dataInfo.concat(data)
						}
						else{
							this.dataInfo = data
						}
						if(data.length==0){
							this.isContent=true
						}
					})
					.catch(res => {
						uni.hideLoading()
						if (res.errmsg) {
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: "系统异常，请联系管理员",
								icon: 'none',
								duration: 2000
							})
						}
					});
				}
				
			},
		}
	}
</script>

<style scoped>
	.wrap{
		background:#fff;
		margin:10px;
		border-radius:10px;
		padding:0  10px 10px;
		font-size:12px;
	}
	.already{
		color:#22C572;
	}
	.not{
		color:#FE6430;
	}
	.purchaser{
		padding:5px;background:#E9F8F0;color:#22C572;
		display:inline;
		border-radius:3px;
		margin-right:10px;
	}
	.seller{
		padding:5px;background:#FEECE6;color:#FE6430;
		display:inline;
		border-radius:3px;
		margin-right:10px;
	}
	.button{
		display:inline-block;
		border:1px solid #CDCDCD;
		padding:6px 15px;
		border-radius:15px;
		margin:5px 3px;
	}
	.search-form {
			background: #F5F6F9;
		}
	
		.search-box {
			width: 100%;
			background-color: rgb(242, 242, 242);
			padding: 15upx 2.5%;
			display: flex;
			justify-content: space-between;
		}
	
		.search-box .mSearch-input-box {
			width: 100%;
		}
	
		.search-box .input-box {
			width: 85%;
			flex-shrink: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
		.search-box .search-btn {
			width: 15%;
			margin: 0 0 0 2%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
			font-size: 28upx;
			color: #fff;
			background: linear-gradient(to right, #ff9801, #ff570a);
			border-radius: 60upx;
		}
	
		.search-box .input-box>input {
			width: 100%;
			height: 60upx;
			font-size: 32upx;
			border: 0;
			border-radius: 60upx;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			padding: 0 3%;
			margin: 0;
			background-color: #ffffff;
		}
	.cuIcon {
			position: absolute;
			right: 80px;
		}
		.line {
			display: inline-block;
			padding: 5px;
			position: relative;
			font-size: 17px;
		}
		
		.line.active {
			font-size: 19px;
			font-weight: 900;
		}
		
		.line.active:after {
			content: '';
			display: block;
			position: absolute;
			width: 36rpx;
			height: 6rpx;
			left: 50%;
			transform: translateX(-50%);
			bottom: 0;
			background: #22C572;
			/* border-bottom: 1px solid #22C572; */
		}
		.popup{
			background:rgba(0, 0, 0, 0.8);
			position:fixed;top:0;left:0;width:100%;height:100%;
		}
		.imagewrap{
			position:absolute;
			top:50%;
			transform: translateY(-50%) translateX(-50%);
			left:50%;
		}
		.xiazai{
			position: absolute;
			bottom:10px;
			left:50%;
			transform: translateX(-50%);
		}
		.tl-show{
		  overflow: hidden;
		  position:fixed;
		  height: 100%;
		  width: 100%;
		}
</style>