unimall/unimall-app/pages/buy/transaction.vue

<template name="buy">
	<view class="content">
		<view class="cu-bar search bg-white">
			<view class="search-form round" @click="naviageToPage('/pageA/product/search?TabCur=')">
				<text style='color: #ccc;' class="cuIcon-search"></text>
				<input type="text" placeholder="你要买什么粮？" confirm-type="search"></input>
			</view>
		</view>
			<scroll-view scroll-x class="nav">
				<view class="flex text-center">
					<view style='position:relative;' class="cu-item flex-sub" :class="item.id==TabCur?'text-white':''" v-for="item in categoryList"@tap="tabSelect" :data-id="item.id">
						<!-- <image v-if='item.id==TabCur' style='width:100%;height:100%;position: absolute;z-index:1;left:0;' src='../../static/bg.png'></image> -->
						<text>{{item.title}}</text>
					</view>
				</view>
			</scroll-view>
		<view class="introduce-section">
			<view v-for="(item, index) in buyInfo" :key="index" class="guess-item" @click="navToDetailPage(item)">
				<view class="price-box">
					<view class="title">{{item.title}}</view>
					<template v-if='item.isFutures==0'>
						
						<view v-if="item.price !== 0" class="title-tip">
							<text class="price-tip">¥</text>
							<text class="price">{{item.price}}</text>
							<text class="price-tip">元/吨</text>
						</view>
						<view v-else class="title-tip">
							<text>市场价</text>
						</view>
					</template>
					<view class="title-tip" v-if='item.isFutures==1'>
						<text style='color:#828282;margin-bottom:10rpx;display:inline-block;' class="price-tip">今日基差</text>&nbsp;
						<view>
							<text class="price-tip">¥</text>
							<text class="price">{{item.basis}}</text>
							<text class="price-tip">元/吨</text>
						</view>
						
					</view>
				</view>
				<view class='tag tag-bule radius line-pink' v-if='item.isFutures==0'>现货</view>
				<view class='tag tag-bule radius line-pink' v-if='item.isFutures==1'>期货</view>
				<view class='tag tag-green radius line-green'>{{item.goodsName}}</view>
				<view class='tag tag-yellow radius line-yellow'>易粮易运</view>
			</view>
			<view v-show="isLoadMore">
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>
		</view>
		<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>
		<drag-button
			:isDock="true"
			:existTabBar="true"
			:isIcon="true"
			text="发布"
			location="20"
			@btnClick="fabu"
			/>
	</view>
</template>

<script>
	export default {
		name: "buy",
		data() {
			return {
				PageCur: "buy",
				buyInfo: [],
				pages:1,//页数
				limit:10 ,//每次取条目数
				loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false  ,//是否加载中
				showTran:true,
				scrollTop: 0,
				categoryList:[{title:'我要买粮',id:'0'},{title:'我要卖粮',id:'1'}],
				TabCur: 0,
				current: 1
			};
		},
		onShow() {
			uni.showTabBar()
		},
		onLoad(options) {
			console.log("buy onload")
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px';
			// #endif
			this.cateId = options.tid ? options.tid : 0;
			this.keywords = options.keywords ? options.keywords : ''
			this.loadData();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		//下拉刷新
		onPullDownRefresh() {
			this.pages = 1
			this.isLoadMore = false
			this.loadStatus = 'loading'
			this.loadData()
		},
		onReachBottom(){  //上拉触底函数
		  if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
				this.isLoadMore=true
				this.pages += 1
				this.getIndexBuyData()
		  }
		},
		methods: {
			naviageToPage(page) {
				page=page+this.TabCur
				uni.navigateTo({
					url: page,
					fail() {
						uni.switchTab({
							url: page
						})
					}
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.category = this.TabCur
				this.pages = 1
				this.loadData()
			},
			fabu() {
				uni.navigateTo({
					url: `/pageB/trust/trust`
				})
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type = 'add', loading) {
				const that = this
				uni.showLoading({
					title: '正在加载',
					mask:true
				})
				var param1= ''
				var param2=''
				if(that.TabCur==0){
					param1='integral'
					param2='getIndexData'
				}else{
					param1='buy'
					param2='getBuyListInfo'
				}
				console.log(param1, param2)
				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(item.price===0){
					this.contactUs();
				}
				else{
					if(this.TabCur==0){
						uni.navigateTo({
							url: `/pageA/product/detail?id=${id}`
						})
					}
					else{
						uni.navigateTo({
							url: `/pageA/product/detail_buy?id=${id}`
						})
					}
				
			  }
			},
			contactUs() {
				const that = this
				uni.makePhoneCall({	 	
				 	// 手机号
				    phoneNumber: '15145408888', 			
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},			
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}					
				  });
			},
			getIndexBuyData(){
				const that = this
			    var pages=that.pages
			    var limit=that.limit
			   
			    uni.showLoading({
			    	title: '正在加载',
					mask:true
			    })
			    that.$api.request('buy', 'getBuyListInfo', {
					page: pages,
					limit:limit
				},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 = res.data
			    	//采购信息
			    	if(data.length > 0){
			    		that.buyInfo = that.buyInfo.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>
	page,
	.content {
		// background: $page-color-base;
	}
	.cu-tag.badge {
	    right: 26rpx;
	}
	.cu-item {
	    height: 80rpx;
	    display: inline-block;
	    line-height: 80rpx;
	}
	.search-form{
		background:#fff;
		box-shadow: 0 0 10px rgba(0,0,0,0.1);
	}
	.title-tip{
		color:#E63113;
		text-align: right;
	}
	.tag-bule{
		background:#CDE7FB;
		color:#0B4572;
	}
	.tag-green{
		background:#C6F7BC;
		color:#065112;
	}
	.tag-yellow{
		background:#FBF4B1;
		color:#5C4409;
	}
	.tag{
		padding:5px;
		display: inline-flex;
		font-size:22rpx;
		margin:3px;
	}
	.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 {
		background: #fff;
		padding: 20upx 30upx;
		padding-bottom: 100upx;
		.guess-item {
			padding-bottom: 20upx;
			border-bottom: 1px solid #ccc;
		}
		.title {
			font-size: 28upx;
			color: $font-color-dark;
			font-weight:bold;
			height: 50upx;
			line-height: 50upx;
			flex:2.5;
		}
		.title-tip {
			flex:1;
		}
		.price-box {
			display: flex;
			align-items: baseline;
			height: 70upx;
			padding: 10upx 0;
			font-size: 26upx;
			color: $uni-color-primary;
		}
	
		.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;
			}
		}
	}
</style>