123

unimall-app/pages/buy/transaction.nvue

@@ -0,0 +1,706 @@
+<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>
+		<!-- <view class="cu-bar tabbar bg-white shadow foot">
+			<view :class="PageCur=='sale'?'action text-pink':'action text-gray'" @click="NavChange" data-cur="sale">
+				<view><image style='width:21px;height:23px;' :src="PageCur=='sale'?'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/zixun_check.png':'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/zixun.png'"></image></view> 资讯
+			</view>
+			<view :class="PageCur=='buy'?'action text-pink':'action text-gray'" @click="NavChange" data-cur="buy">
+				<view><image style='width:25px;height:25px;' :src="PageCur=='buy'?'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/jiaoyi_check.png':'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/jiaoyi.png'"></image></view>交易
+			</view>
+			<view :class="PageCur=='trust'?'action text-pink add-action':'action text-gray add-action'" @click="NavChange"
+			 data-cur="trust">
+				<button :class="PageCur=='trust'?'cuIcon-group':'cu-btn cuIcon-group bg-white '">
+					<view v-if="liangxinTip" class="cu-tag badge">{{liangxinTip}}</view>
+				</button>
+				粮信
+			</view>
+			<view  :class="PageCur=='tran'?'action text-pink':'action text-gray'" @click="NavChange" data-cur="tran">
+				<view><image style='width:25px;height:20px;' :src="PageCur=='tran'?'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wuliu_check.png':'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wuliu.png'"></image></view> 物流
+			</view>
+			<view :class="PageCur=='my'?'action text-pink':'action text-gray'" @click="NavChange" data-cur="my">
+				<view>
+				<view v-if="myTip" class="cu-tag badge">{{myTip}}</view>
+				<image style='width:21px;height:21px;' :src="PageCur=='my'?'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wode_check.png':'https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wode.png'"></image>
+				</view>
+				 我的
+			</view>
+		</view> -->
+		
+		<u-tabbar v-model="current" :list="listTab" :mid-button="true"></u-tabbar>
+		<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,
+				listTab: [
+					{
+						iconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/zixun.png",
+						selectedIconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/zixun_check.png",
+						text: '资讯',
+						count: 0	,
+						isDot: true,
+						customIcon: false,
+						pagePath:'/pages/sale/information'
+					},
+					{
+						iconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/jiaoyi.png",
+						selectedIconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/jiaoyi_check.png",
+						text: '交易',
+						customIcon: false,
+						pagePath:'/pages/buy/transaction'
+					},
+					{
+						iconPath: "chat",
+						selectedIconPath: "chat",
+						text: '粮信',
+						midButton: true,
+						customIcon: false,
+						pagePath:'/pages/home/home'
+					},
+					{
+						iconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wuliu.png",
+						selectedIconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wuliu_check.png",
+						text: '物流',
+						customIcon: false,
+						pagePath:'/pages/tran/tran'
+					},
+					{
+						iconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wode.png",
+						selectedIconPath: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/tmp/wode_check.png",
+						text: '我的',
+						count: this.myTip,
+						isDot: false,
+						customIcon: false,
+						pagePath:'/pages/user/user'
+					},
+				],
+				current: 1
+			};
+		},
+		onShow() {
+			uni.hideTabBar()
+			if(uni.getStorageSync("PageCur")){
+				this.PageCur = uni.getStorageSync("PageCur");
+			}
+			this.showTran = uni.getStorageSync("showTran")
+			console.log("buy onShow")
+		},
+		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();
+			uni.hideTabBar()
+		},
+		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`
+				})
+			},
+			NavChange: function(e) {
+				// console.log(e)
+				var preCur = this.PageCur
+				this.PageCur = e.currentTarget.dataset.cur
+				uni.setStorageSync('PageCur', this.PageCur);
+				switch (this.PageCur) {
+					case "sale":
+						uni.switchTab({
+							url: '/pages/sale/information'
+						});
+						break;
+					case "buy":
+						uni.switchTab({
+							url: '/pages/buy/transaction'
+						});
+						break;
+					case "tran":
+						uni.switchTab({
+							url: '/pages/tran/tran'
+						});
+						break;
+					case "trust":
+						// uni.showModal({
+						// 	title: '温馨提示',
+						// 	content: '此功能正在开发中',
+						// 	showCancel: false,
+						// 	confirmText: '确定',
+						// 	success: (e) => {
+						// 	},
+						// 	fail: () => {},
+						// 	complete: () => {}
+						// })
+						// this.PageCur = preCur
+						// uni.setStorageSync('PageCur', this.PageCur);
+						uni.setTabBarItem({
+						  index: 0,
+						  pagePath:'pages/home/home'
+						})
+						uni.switchTab({
+							url: '/pages/home/home'
+						});
+						break;
+					case "my":
+						uni.switchTab({
+							url: '/pages/user/user'
+						});
+						break;
+				};
+				
+			},
+			//加载商品 ，带下拉刷新和上滑加载
+			async loadData(type = 'add', loading) {
+				const that = this
+				uni.showLoading({
+					title: '正在加载'
+				})
+				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: '正在加载'
+			    })
+			    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>