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" 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;position:relative;' 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 style='position:absolute;right: 20px;font-weight:500;top:25%;' @click='dateshow=true'>{{datetext?datetext:'日期筛选'}}</view>
			</view>
			
			<u-picker :range="dateList" range-key="value" @confirm='dateCheck($event)' v-model="dateshow"
				mode="selector">
			</u-picker>
		</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='already' v-if='item.status=="部分付款"'>部分付款</view>
				<view class='already' v-else-if='item.status=="全部付款"'>全部付款</view>
				<view class='not' 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='flex justify-between align-item-center'>
					<view>
						<view class='seller'>卖方</view>
						<view style='font-size:14px;display:inline-block;'>{{item.customerName}}</view>
					</view>
					<view>{{item.carNo}}</view>
				</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-item.unitDeduction).toFixed(2)}}</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 v-show="item.pictureAddress" @click='showImage(item.pictureAddress)' class='button'>结算单</view>
				<view v-show="item.weighingPictureAddress" @click='showImage(item.weighingPictureAddress)'
					class='button'>检斤单</view>
				<view v-show="item.qualityInspectionPictureAddress"
					@click='showImage(item.qualityInspectionPictureAddress)' 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="aspectFit"></image>
			</view>
			<view @click='xiazai' class='xiazai'>
				<image style='width:24px;height:24px;' src="../../static/img/erp/xiazai@3x.png" mode=""></image>
			</view>
		</view>
		<u-modal v-model="isShowAlert" :title-style="{fontSize: '18px',fontWeight:'500'}"
			:content-style="{fontSize: '14px',fontWeight:'400'}" confirm-color='#22C572' confirm-text='确定' title='提示'
			:showCancelButton='false' :content="content" @confirm="alertBtn" @cancel="cancelClick"></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: "business",
		data() {
			return {
				isShowAlert: false,
				content: '您尚未登录，是否立即登录?',
				TabCur: 0,
				pageSize: 10,
				currentPage: 1,
				isLoadMore: false,
				isContent: false,
				loadStatus: 'noMore',
				searchKeyWord: '',
				show: false,
				img: '',
				searchType: '',
				dataInfo: [],
				dateshow:false,
				dateList:[{value:'一个月'},{value:'三个月'},{value:'一年'}],
				datetext:'一个月'
			}
		},
		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
			},
			dateCheck(e){
				this.datetext=this.dateList[e[0]].value
				this.loadData()
			},
			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(url) {
				var img = [];
				img.push(url)
				uni.previewImage({
					current: 0,
					urls: img
				});

			},
			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.currentPage = 1
				this.isLoadMore = false
				this.loadData()
			},
			alertBtn() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			cancelClick() {
				this.isShowAlert = false
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type, loading) {
				if(!this.hasLogin){
					this.isShowAlert = true;
				// 	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,
						appFlag:1,
						customerPhone: this.userInfo.phone,
						dateFilter:this.datetext
						// pcFlag:1
						// warehouseName:'',
					}).then(res => {
						uni.hideLoading()
						var data = res.data.data.records
						if (type == "add") {
							this.dataInfo = this.dataInfo.concat(data)
							this.isLoadMore = false
						} else {
							this.dataInfo = data
						}
						if (data.length == 0) {
							this.isContent = true
							this.isLoadMore = false
							this.loadStatus = 'nomore'
						}
					})
					.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>