yiliangyiyun-app/pages/business/business.vue

<template>
	<view>
		<view :style="statusBarHeight" class="status_bar">
		</view>
		<view class="top-style">
			<view style='background:#fff;border-bottom:1px solid #EEE;padding-bottom:10px;'>
				<view class="cu-bar search">
					<view style='position:absolute;left:30px;top:50%;transform: translateY(-50%);' @click='status=true'>
						{{location}}
						<image style='width:10px;height:6px;margin-left:4px;position:relative;top:-2px;'
							src='../../static/img/jiaoyi/down.png'></image>
					</view>
					<u-picker mode="selector" @confirm='locationChange' v-model="status" :range="locationType">
					</u-picker>
					<!-- <view>
						<picker style='display:inline-block;' @change="locationChange" :value="location"
							:range="locationType">
							<view class="picker">
								{{location>-1?locationType[location]:'请选择'}}
							</view>
						</picker>
						<image style='width:10px;height:6px;margin-left:4px;position:relative;top:-2px;'
							src='../../static/img/jiaoyi/down.png'></image>
					</view> -->

					<view class="search-form round" @click="naviageToPage('/pageA/product/lookup?TabCur=')">
						<text style='color: #ccc;text-indent:56px;' class="cuIcon-search"></text>
						<view class="Medium search-title"> 请输入货名或标题</view>
					</view>
				</view>
				<view style='margin:0 15px;' class="Medium">
					<view class='tag radius line-pink' @click="sousuo('玉米')">玉米</view>
					<view class='tag radius line-pink' @click="sousuo('大豆')">大豆</view>
					<view class='tag radius line-pink' @click="sousuo('小麦')">小麦</view>
					<view class='tag radius line-pink' @click="sousuo('水稻')">水稻</view>
					<view class='tag radius line-pink' @click="sousuo('高粱')">高粱</view>
				</view>
			</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(1)' class='line' :class='TabCur==1?"active":""'>销售</view>
			</view>
		</view>
		<view v-if='buyInfo.length>0' class="introduce-section Semibold">
			<view v-for="(item, index) in buyInfo" :key="index" class="guess-item" @click="navToDetailPage(item)">
				<view class="price-box">
					<view class="title Medium">{{item.title}}</view>
				</view>
				<view class='flex justify-between align-item-center Regular'>
					<view v-if='TabCur==0' class='address'>
						{{item.receivePrivate}}{{item.receiveCity}}{{item.receiveArea}}{{item.receiveWarehouse}}
					</view>
					<view v-if='TabCur==1' class='address'>
						{{item.sendPrivate}}{{item.sendCity}}{{item.sendArea}}{{item.sendWarehouse}}
					</view>
					<view class='price NumberBold' v-if='item.procurementPlanType=="期货" && item.basisPrice'>
						<text class="number-style">{{item.basisPrice}}</text><text style='font-size:13px;color:#333333;'
							class="Semibold">元/吨</text></view>
					<view class='price NumberBold' v-if='item.procurementPlanType=="现货" && item.procurementPrice'>
						<text class="number-style">{{item.procurementPrice}}</text><text style='font-size:13px;color:#333;'
							class="Semibold">元/吨</text></view>
					<view class='price NumberBold' v-if='item.salePlanType=="期货" && item.basisPrice'><text class="number-style">+{{item.basisPrice}}</text><text
							style='font-size:13px;color:#333333;' class="Semibold">元/吨</text></view>
					<view class='price NumberBold' v-if='item.salePlanType=="现货" && item.salePrice'><text class="number-style">{{item.salePrice}}</text><text
							style='font-size:13px;color:#333;' class="Semibold">元/吨</text></view>
				</view>
				<view class='flex justify-between Regular'>
					<view class="Regular">
						<view class='tag1 tag-bule radius line-pink' v-if='item.procurementPlanType=="现货"'>现货</view>
						<view class='tag1 tag-bule radius line-pink' v-if='item.procurementPlanType=="期货"'>期货</view>
						<view class='tag1 tag-bule radius line-pink' v-if='item.salePlanType=="现货"'>现货</view>
						<view class='tag1 tag-bule radius line-pink' v-if='item.salePlanType=="期货"'>期货</view>
						<view class='tag1 tag-yellow radius line-green'>{{item.goodsName}}</view>
						<view class='tag1 tag-red radius line-yellow' v-if="TabCur== 0">{{item.plannedPurchaseVolume}}吨
						</view>
						<view class='tag1 tag-red radius line-yellow' v-if="TabCur== 1">{{item.plannedSaleVolume}}吨
						</view>
					</view>
					<view style='font-size: 12px;color:#878C9C;padding-top:5px;' v-if='item.procurementPlanType=="期货" && TabCur== 0'>
						今日基差</view>
					<view style='font-size: 12px;color:#878C9C;padding-top:5px;' v-if='item.procurementPlanType=="现货" && TabCur== 0 && item.procurementPrice'>
						采购价格</view>
					<view style='font-size: 12px;color:#878C9C;padding-top:5px;' v-if='item.salePlanType=="期货" && TabCur== 1'>今日基差
					</view>
					<view style='font-size: 12px;color:#878C9C;padding-top:5px;' v-if='item.salePlanType=="现货" && TabCur== 1 && item.salePrice'>销售价格
					</view>
				</view>
			</view>
			<view v-show="isLoadMore">
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>
		</view>
		<view style='height:65vh;background:#F5F6FA;line-height:65vh;text-align:center;' v-if='buyInfo.length==0'>
			当前暂无结果
		</view>
		<image v-if='topState' @click='top' class='back' src="../../static/img/jiaoyi/back@3x.png" mode=""></image>
		<image @click='show=true' class='fabu' src="../../static/img/jiaoyi/ic_fabu@3x.png" mode=""></image>
		<u-picker mode="selector" @confirm='confirmrelease' v-model="show"   :range="releaseType"></u-picker>
		<!-- <u-back-top :scroll-top="scrollTop" tips="顶部" :custom-style="{backgroundColor: '#a0cfff',color: '#2979ff'}"
			:iconStyle="{color: '#2979ff',fontSize: '34rpx'}" mode="square" icon="arrow-up"></u-back-top> -->
	</view>
</template>

<script>
	export default {
		name: "business",
		data() {
			return {
				PageCur: "buy",
				buyInfo: [],
				releaseType: ["我要卖粮", "我要买粮"],
				limit: 10, //每次取条目数
				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				showTran: true,
				scrollTop: 0,
				show:false,
				status: false,
				pageSize: 10,
				searchKeyWord: '',
				receivePrivate: '全国',
				currentPage: 1,
				categoryList: [{
					title: '我要买粮',
					id: '0'
				}, {
					title: '我要卖粮',
					id: '1'
				}],
				topState:false,
				TabCur: 0,
				current: 1,
				location: '全国',
				params: {
					province: true,
				},
				locationType: ['全国', '黑龙江', '河南', '山东', '安徽', '吉林', '河北', '江苏', '内蒙古', '四川', '湖南', '湖北', '辽宁',
					'江西', '云南', '新疆', '山西', '广西', '陕西', '广东', '甘肃', '重庆', '贵州', '浙江', '福建',
					'宁夏', '天津', '海南', '青海', '西藏', '上海', '北京'
				],
				statusBarHeight: "height:"
			}
		},
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>300){ //当距离大于600时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于600时显示回到顶部按钮
		        this.topState = false
		    }
		},
		onShow() {
			uni.showTabBar()
			uni.hideKeyboard()
			var userInfo = uni.getStorageSync("userInfo")
			var that = this
			console.log("userInfo", userInfo)
			// setTimeout(function() {
			// 	that.$api.doRequest('get', '/appVersion/test', {
			// 		userId: "7e83070d05fc4d50aaa46e00a3ee03d8"
			// 	}).then(res => {
					
			// 	})
			// }, 500);
			uni.removeTabBarBadge({
				index: 4
			})
			this.$api.doRequest('get', '/newNoticeTask/query/noticeTasks').then(res => {
				if (res.data.data) {
					let name = 'myTip';
					let value = res.data.data.total;
					that.$store.commit('$uStore', {
						name,
						value
					});
					if(value != 0&&value){
						uni.setTabBarBadge({
							index:4,
							text:value+""
						})
					}
					name = 'taskTip';
					value = res.data.data.total;
					that.$store.commit('$uStore', {
						name,
						value
					});
					// name = 'contractTip';
					// value = res.data.data.contractTip;
					// that.$store.commit('$uStore', {
					// 	name,
					// 	value
					// });
				}
			})
		},
		onLoad(options) {
			console.log("buy onload")
			var that = this
			uni.getSystemInfo({
				success: function(res) {
					console.log("statusBarHeight", res.statusBarHeight)
					that.statusBarHeight += res.statusBarHeight + "px"; //这就是状态栏的高度
				},
			});
			this.cateId = options.tid ? options.tid : 0;
			this.keywords = options.keywords ? options.keywords : ''
			this.loadData();
		},
		// 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.getIndexBuyData()
			}
		},
		methods: {
			top() { //回到顶部  
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			},
			confirmrelease(e){
				console.log(e)
				if(e[0]==1){
					uni.navigateTo({
						url: `/pageD/myRelease/buyGrain`
					})
				}else{
					uni.navigateTo({
						url: `/pageD/myRelease/sellGrain`
					})
				}
			},
			sousuo(name) {
				var page = '/pageA/product/lookup?TabCur=' + this.TabCur + '&searchKeyWord=' + name
				uni.navigateTo({
					url: page,
					fail() {
						uni.switchTab({
							url: page
						})
					}
				})
			},
			tabcarchange(status) {
				this.TabCur = status
				this.currentPage = 1
				this.pageSize = 10
				this.loadData()
			},
			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()
			},
			fabu() {
				uni.showActionSheet({
					itemList: ['我要买粮', '我要卖粮'],
					success(res) {
						console.log(res.tapIndex)
					},
					fail(res) {
						console.log(res.errMsg)
					}
				})
				// uni.navigateTo({
				// 	url: `/pageB/trust/trust`
				// })
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type = 'add', loading) {
				const that = this
				uni.showLoading({
					title: '正在加载'
				})
				var param1 = ''
				if (that.TabCur == 0) {
					param1 = '/procurementPlanInfo/selectProcurementPlanInfo'
				} else {
					param1 = '/salePlanInfo/selectSalePlanInfo'
				}
				this.$api.doRequest('get', param1, {
						pageSize: this.pageSize,
						showFlag: 1,
						currentPage: this.currentPage,
						searchKeyWord: this.searchKeyWord,
						receivePrivate: this.receivePrivate
					}).then(res => {
						uni.hideLoading()
						this.buyInfo = res.data.data.records
					})
					.catch(res => {
						uni.hideLoading()
						if (res.errmsg) {
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: "系统异常，请联系管理员",
								icon: 'none',
								duration: 2000
							})
						}
					});
				// that.$api.request(param1, param2, {
				// 	page: 1,
				// 	limit: 10
				// }, failres => {
				// 	that.$api.msg(failres.errmsg)
				// 	that.isLoadMore = false
				// 	that.loadStatus = 'nomore'
				// 	if (that.pages > 1) {
				// 		that.pages -= 1
				// 	}
				// 	uni.hideLoading()
				// }).then(res => {
				// 	let data = null
				// 	if (that.TabCur == 0) {
				// 		data = res.data.saleInfo
				// 	} else {
				// 		data = res.data
				// 	}
				// 	uni.stopPullDownRefresh()

				// 	//采购信息
				// 	if (data.length > 0) {
				// 		that.buyInfo = data
				// 		that.isLoadMore = false
				// 	} else {
				// 		if (that.pages > 1) {
				// 			that.pages -= 1
				// 		}
				// 		that.isLoadMore = true
				// 		that.loadStatus = 'nomore'
				// 	}
				// 	uni.hideLoading()
				// })
			},
			//详情
			navToDetailPage(item) {
				let id = item.id;
				if (this.TabCur == 0) {
					uni.navigateTo({
						url: `/pageA/product/detail?id=${id}&compId=${item.compId}`
					})
				} else {
					uni.navigateTo({
						url: `/pageA/product/sales_detail?id=${id}&compId=${item.compId}`
					})
				}
			},
			getIndexBuyData() {
				const that = this
				uni.showLoading({
					title: '正在加载'
				})
				var param1 = ''
				if (that.TabCur == 0) {
					param1 = '/procurementPlanInfo/selectProcurementPlanInfo'
				} else {
					param1 = '/salePlanInfo/selectSalePlanInfo'
				}
				this.$api.doRequest('get', param1, {
						pageSize: this.pageSize,
						showFlag: 1,
						currentPage: this.currentPage,
						searchKeyWord: this.searchKeyWord,
						receivePrivate: this.receivePrivate
					}).then(res => {
						uni.hideLoading()
						// this.buyInfo = res.data.records
						let data = res.data.data.records
						//采购信息
						if (data.length > 0) {
							that.buyInfo = that.buyInfo.concat(data)
							that.isLoadMore = false
						} else {
							if (that.currentPage > 1) {
								that.currentPage -= 1
							}
							that.isLoadMore = true
							that.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 lang='scss'>
	page,
	.content {
		background: #F5F6FA;
	}

	.line {
		display: inline-block;
		padding: 5px;
		position: relative;
		font-size: 17px;
		margin-right: 10rpx;
	}

	.line.active {
		font-size: 38rpx;
		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; */
	}

	.cu-tag.badge {
		right: 26rpx;
	}

	.cu-item {
		height: 80rpx;
		display: inline-block;
		line-height: 80rpx;
	}

	.search-form {
		background: #F5F6F9;
		padding-left: 20rpx;
	}

	.title-tip {
		color: #E63113;
		text-align: right;
	}

	.tag1 {
		background: #F5F6F9;
		padding: 2px 10rpx;
		color: #333333;
		display: inline-flex;
		font-size: 22rpx;
		border-radius: 3px;
		margin: 3px;
	}

	.tag {
		background: #F5F6F9;
		padding: 7px 12px;
		color: #333333;
		display: inline-flex;
		font-size: 22rpx;
		border-radius: 15px;
		margin: 3px;
	}

	.tag-bule {
		background: #EBEEFA;
		color: #5C76DF;
	}

	.tag-green {
		background: #C6F7BC;
		color: #065112;
	}

	.tag-yellow {
		background: #F9F2EA;
		color: #BE9C69;
	}

	.tag-red {
		background: #FEECE6;
		color: #FE6430;
	}

	.text-white {
		color: #fff;
	}

	.text-white text {
		position: relative;
		z-index: 2;
		background: linear-gradient(45deg, #3DC146, #B2D612);
		padding: 5px 10px;
		border-radius: 38rpx;
	}

	.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 #ccc;
		}

		.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;
		}
	}

	.navbar {
		position: fixed;
		left: 0;
		top: var(--window-top);
		display: flex;
		width: 100%;
		height: 80upx;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid $base-color;
				}
			}
		}

		.p-box {
			display: flex;
			flex-direction: column;

			.yticon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;

				&.active {
					color: $base-color;
				}
			}

			.xia {
				transform: scaleY(-1);
			}
		}

		.cate-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;

			&:after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	/* 分类 */
	.cate-mask {
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 95;
		transition: .3s;

		.cate-content {
			width: 630upx;
			height: 100%;
			background: #fff;
			float: right;
			transform: translateX(100%);
			transition: .3s;
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.cate-content {
				transform: translateX(0);
			}
		}
	}

	.cate-list {
		display: flex;
		flex-direction: column;
		height: 100%;

		.cate-item {
			display: flex;
			align-items: center;
			height: 90upx;
			padding-left: 30upx;
			font-size: 28upx;
			color: #555;
			position: relative;
		}

		.two {
			height: 64upx;
			color: #303133;
			font-size: 30upx;
			background: #f8f8f8;
		}

		.active {
			color: $base-color;
		}
	}

	.introduce-section {
		padding-top: 135px;
	}

	.introduce-section .title {
		font-size: 17px;
		height: 40px;
		line-height: 40px;
		flex: 2.5;
		/* border-bottom: 1px solid #EEEEEE; */
	}

	.introduce-section .address {
		color: #878C9C;
		font-size: 12px;
		/* padding-left:10px; */
	}

	.introduce-section .price {
		/* padding-left:10px; */
		color: #FD714F;
		font-size: 19px;
		font-weight: 700;
	}

	.introduce-section .guess-item {
		border-radius: 10px;
		background: #fff;
		padding: 0upx 30upx 20upx;
		margin: 18upx;
		/* border-bottom: 1px solid #ccc; */
	}

	/* 销售信息 */
	.introduce-section {
		.title-tip {
			flex: 1;
		}

		.price-box {
			display: flex;
			align-items: baseline;
			font-size: 26upx;
		}

		.price {
			font-size: $font-lg + 2upx;
		}

		.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;

			view {
				flex: 1;
			}
		}
	}

	.side-bg {
		position: absolute;
		width: 64px;
		height: 64px;
		z-index: 1;
	}

	.drag {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		color: $uni-text-color-inverse;
		width: 64px;
		height: 64px;
		background: transparent;
		font-size: $uni-font-size-sm;
		position: fixed;
		z-index: 9;

		&.transition {
			transition: left .3s ease, top .3s ease;
		}
	}

	.top-style {
		position: fixed;
		width: 100%;
	}

	.status_bar {
		width: 100%;
	}

	.search-title {
		font-size: 28rpx;
		color: #AFB3BF;
	}

	.tag {
		font-size: 24rpx;
	}

	.align-item-center {
		align-items: center;
	}
	.number-style{
		font-size: 44rpx;
	}
	.fabu{
		position:fixed;
		bottom:60px;right:0;
		width:64px;
		height:64px;
	}
	.back{
		position:fixed;
		bottom:130px;right:7px;
		width:52px;
		height:52px;
	}
</style>