yiliangyiyun-app/pages/sale/portprice.vue

<template>
	<view>
		<view class="guess-section">
					<view class="cu-card article no-card" style='width: 100%;'>
						<view class="cu-item shadow factoryItem justify-between align-center" style="display:flex;">
							<view style='flex:1.5;color:#B2B3BB;'>港口</view>
							<view style='flex:1;color:#B2B3BB;'>价格</view>
							<view style='flex:1;color:#B2B3BB;'>较昨日</view>
						</view>
					</view>
					<view
						v-for="(item, index) in newsInfo" :key="index"
						class="guess-item"
					>
					<view class="cu-card article no-card" >
						<view class="cu-item shadow factoryItem justify-between align-center" style="display:flex;">
							<view style='flex:1.5;'><view class='factory'>{{item.port}}</view><view class='wrap'>{{item.goodsName}}</view></view>
							<view style='flex:1;' >
								<view class='price'>{{item.price}}</view>
								<view class='wrap'>
									<text style='margin-right:5px;'><image style='width:11px;height:11px;' src='../../static/img/homepage/water@3x.png'></image><={{item.waterContent}}</text>
									<text><image style='width:11px;height:11px;' src='../../static/img/homepage/unitweight@3x.png'></image>>={{item.bulkDensity}}</text>
								</view>
								</view>
							<view style='flex:1;' class='positive' v-if='item.comparePrice>0'><image class='up' src='../../static/img/homepage/shangsheng.png'>{{item.comparePrice}}</image></view>
							<view style='flex:1;' class='negative' v-if='item.comparePrice<0'><image class='down' src='../../static/img/homepage/xiajiang.png'>{{-item.comparePrice}}</image></view>
							<view style='flex:1;font-weight:900;' v-if='item.comparePrice==0'>-</view>
						</view>
					</view>
					</view>
					<view v-show="isLoadMore">
					    <uni-load-more :status="loadStatus" ></uni-load-more>
					</view>
				</view>
	</view>
</template>

<script>
	import {
			mapState
		} from 'vuex';
	export default {
			name: "sale",
			data() {
				return {
					titleNViewBackground: '',
					swiperCurrent: 0,
					swiperLength: 0,
					carouselList: [],
					windowSpuList: [],
					categoryPickList: [],
					categoryButtomList: [],
					salesTop: [],
					saleInfo: [],
					portInfo: [],
					banner: undefined,
					isVip: false,
					pages: 1, //页数
					limit: 10, //每次取条目数
					loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
					isLoadMore: false, //是否加载中
					showTran:true,
					list: [],
					scrollTop: 0,
					cardCur: 0,
			        dotStyle: false,
					newsInfo: [],
					categoryList:[],
					pages:1,//页数
					limit:10 ,//每次取条目数
					loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
					TabCur: 0,
					category:0,
					current: 0,
					infoList1:[]
				};
			},
			onReady() {
			},
			onShow() {
				uni.showTabBar()
				this.pages = 1
				this.isLoadMore = false
				this.loadStatus = 'more'
				this.loadData()
			},
			onLoad(options) {
				var that = this
				var infoList = [];
				uni.request({
				    url: "https://hq.sinajs.cn/list=C0,C2109,C2111,C2201,C2203,C2205,C2207,A0,A2109,A2111,A2201,A2203,A2205,A2207",
				    // url: "https://hq.sinajs.cn/list=C2109",
				    header: {
				        'content-type': 'application/x-www-form-urlencoded'
				    },
				    success: function(result) {
				        // resolve调用后，即可传递到调用方使用then或者async+await同步方式进行处理逻辑
						var tmp = result.data.split('"')
						for(var i = 1; i<tmp.length;i=i+2){
							var list = tmp[i].split(",")
							var data = {
								goodsName:list[0],
								newPrice:list[6],
								openPrice:list[2]
							}
							if(data.goodsName){
								infoList.push(data)
							}
						}
						let name = 'infoList';
						let value = infoList;
						that.$store.commit('$uStore', {
							name,
							value
						});
						// console.log("infoList",infoList)
				    },
				    fail: function(e) {
				        console.log('error in...')
				        // reject调用后，即可传递到调用方使用catch或者async+await同步方式进行处理逻辑
				        reject(e)
				    },
				})
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			onReachBottom() { //上拉触底函数
				if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
					this.isLoadMore = true
					this.pages += 1
					this.getIndexSaleData()
				}
			},
			onPullDownRefresh() {
				this.pages = 1
				this.isLoadMore = false
				this.loadStatus = 'loading'
				this.loadData()
			},
			computed: {
				...mapState(['hasLogin', 'userInfo'])
			},
			methods: {
				
				DotStyle(e) {
					this.dotStyle = e.detail.value
				},
				cardSwiper(e) {
					this.cardCur = e.detail.current
				},
				hangqing() {
					uni.navigateTo({
						url: `/pageB/news/news`
					})
				},
				tabSelect(e) {
					this.TabCur = e.currentTarget.dataset.id;
					this.category = this.TabCur
					this.pages = 1
					this.loadData()
				},
				 //回到顶部
				  goTop(e) {  // 一键回到顶部
				  console.log(e)
				    if (wx.pageScrollTo) {
				      wx.pageScrollTo({
				        scrollTop: 0
				      })
				    } else {
				      wx.showModal({
				        title: '提示',
				        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
				      })
				    }
				  },
				async loadData() {
					var that=this
					// 新闻内容
					that.$api.request('news', 'getPortPriceInfo',{
						category:this.category,
						page: this.pages,
						limit:this.limit
					}, failres => {
						that.$api.msg(failres.errmsg)
						this.isLoadMore = false
						this.loadStatus = 'nomore'
						if(this.pages>1){this.pages=1}
						uni.hideLoading()
					}).then(res => {
						let data = res.data
						that.newsInfo = data
						uni.hideLoading()
					})
					
				},
				//轮播图切换修改背景色
				swiperChange(e) {
					const index = e.detail.current;
					this.swiperCurrent = index;
					// this.titleNViewBackground = this.carouselList[index].color;
				},
				//详情
				navToDetailPage(item) {
					let id = item;
					uni.navigateTo({
						url: `/pageB/news/news_detail?id=${id}`
					})
				},
				naviageToPage(page) {
					uni.navigateTo({
						url: page,
						fail() {
							uni.switchTab({
								url: page
							})
						}
					})
				},
				getIndexSaleData() {
					// const that = this
					// var pages = that.pages
					// var limit = that.limit
					// uni.showLoading({
					// 	title: '正在加载'
					// })
					// that.$api.request('integral', 'getIndexSaleData', {
					// 	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.saleInfo.length > 0 ) {
					// 		that.saleInfo = that.saleInfo.concat(data.saleInfo)
					// 		that.isLoadMore = false
					// 	} else {
					// 		if (that.pages > 1) {
					// 			that.pages -= 1
					// 		}
					// 		that.isLoadMore = true
					// 		that.loadStatus = 'nomore'
					// 	}
					// 	if(data.saleInfo.length < that.limit){
					// 		if (that.pages > 1) {
					// 			that.pages -= 1
					// 		}
					// 		that.isLoadMore = true
					// 		that.loadStatus = 'nomore'
					// 	}
					// 	uni.hideLoading()
					// })
					const that = this
					var pages=that.pages
					var limit=that.limit
								   
					uni.showLoading({
						title: '正在加载',
						mask:true
					})
					that.$api.request('news', 'getNewsInfo', {
						category:this.category,
						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){
							for(var k =0;k<data.length;k++){
								data[k].gmtUpdate=formatDate(Date.parse(data[k].gmtUpdate))
							}
							that.newsInfo = that.newsInfo.concat(data)
							that.isLoadMore=false
						}
						else{
							if(that.pages>1){that.pages-=1}						
							that.isLoadMore=true
							that.loadStatus = 'nomore'
						}
						uni.hideLoading()
					})
				}
	
			},
	
			// #ifndef MP
			// 标题栏input搜索框点击
			onNavigationBarSearchInputClicked: async function(e) {
				uni.navigateTo({
					url: '/pageA/product/search'
				})
			},
			//点击导航栏 buttons 时触发
			// onNavigationBarButtonTap(e) {
			// 	const index = e.index;
			// 	if (index === 0) {
			// 		this.$api.msg('点击了扫描');
			// 	} else if (index === 1) {
			// 		// #ifdef APP-PLUS
			// 		const pages = getCurrentPages();
			// 		const page = pages[pages.length - 1];
			// 		const currentWebview = page.$getAppWebview();
			// 		currentWebview.hideTitleNViewButtonRedDot({
			// 			index
			// 		});
			// 		// #endif
			// 		uni.navigateTo({
			// 			url: '/pages/notice/notice'
			// 		})
			// 	}
			// }
			// #endif
		}
</script>

<style>
	.price{
		color:#FD714F;
	}
	.container{
			margin: 10rpx 10rpx 10rpx 10rpx;
		}
		.cu-tag.badge {
		    right: 26rpx;
		}
		.up,.down{
			width: 7.5px;
			height: 9px;
			position:relative;
			top:-2px;
			vertical-align: middle;
			margin-right: 2px;
		}
		.gird-left,.gird-right{
			
		}
		.cu-tag.radius[class*="line"]::after {
	    border-radius: 66rpx;
		}
		.goTop{
		  height: 32px;
		  width: 32px;
		  position: fixed;
		  bottom: 200rpx;
		  right: 30rpx;
		  border-radius: 50%;
		}
		.goTop image{
			width:32px;
			height:32px;
		}
		.flex{
			display:flex;
		}
		.text-white{
			color:#fff;
		}
		.cu-card{
			border-bottom:1rpx solid #f8f8f8;
			text-align: center;
		}
		.factory{
			font-size:26rpx;
			font-weight:900;
		}
		.positive{
			color:#FD714F;
			font-size:26rpx;
			font-weight:900;
		}
		.negative{
			color:#22C572;
			font-size:26rpx;
			font-weight:900;
		}
		.wrap{
			font-size:20rpx;
			color: rgba(0,0,0,0.5);
		}
		.align-center{
			align-items: center;
		}
		.flex-direction-row{
			flex-direction:row;
		}
		.factoryItem{
			padding: 20rpx 0;
		}
		/* #ifdef MP */
		.mp-search-box {
			// position:relative;
			left: 0;
			top: 30upx;
			z-index: 9999;
			width: 100%;
			padding: 0 80upx;
			background: rgba(255, 170, 0, 0.6);
	
			.ser-input {
				flex: 1;
				height: 56upx;
				line-height: 56upx;
				text-align: center;
				font-size: 28upx;
				color: $font-color-base;
				border-radius: 10px;
				background: rgba(255, 255, 255, .6);
			}
		}
		.desc{
		    width:73%;
			margin-right:2%;
		}
	    .justify-between{
			justify-content: space-between;
		}
		page {
			.cate-section {
				position: relative;
				z-index: 5;
				border-radius: 16upx 16upx 0 0;
				margin-top: -20upx;
			}
	
			.carousel-section {
				padding: 0;
	
				.titleNview-placing {
					padding-top: 0;
					height: 0;
				}
	
				.carousel {
					.carousel-item {
						padding: 0;
					}
				}
	
				.swiper-dots {
					left: 50%;
					bottom: 5upx;
					transform: translateX(-50%);
				}
			}
		}
	
		/* #endif */
		.cuIcon-notification::before{
			color:#f37b1;
		}
		.cu-card.article>.cu-item .content>image {
		    height: 3.4em;
			margin-right: 0rpx;
			margin-top: 24rpx;
		}
		.screen-swiper.price-swiper{
			height:70rpx;
			min-height: 70rpx;
			background: #fff;
			margin-bottom: 10px;
		}
		.swiper-item{
			border-radius: 5%;
		}
		.guess-section {
			margin-bottom: 120rpx;
			margin-top:20rpx;
		}
		.guess-section .price{
			color:#FD714F;
			font-size: 34rpx;
			font-weight:600;
		}
		page {
			background: #f5f5f5;
		}
	
		.m-t {
			margin-top: 16upx;
		}
		
		/* 销售信息 */
		.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>