yiliangyiyun-app/pages/sale/newsinfo.vue

<template>
	<view>
		<view class="guess-section-wrap1">
			<view class='guess-section-wrap-content'>
				<view style='margin:19rpx;background:#fff;padding:15px;border-radius:5px;' class='flex justify-between'  v-for='(item, index) in newsInfo' :key="index" @click="navToDetailPage(item.id)">
					<view style='margin-right:10px;'>
						<view style='font-size:16px;height:54px;' class="Regular">{{item.title}}</view>
						<view class="Regular" style='color:#B2B3BB;font-size:12px;'><text style='margin-right:5px;'>{{item.from}}</text>{{item.gmtUpdate}}</view>
					</view>
					<view><image style='width:100px;height:72px;border-radius:5px;' :src='item.titleImg'></image></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:[],
					time:""
				};
			},
			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()
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			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', 'getNewsInfo',{
						category:2,
						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
						for(var i=0;i<data.length;i++){
							if(data[i].title.length > 25){
								data[i].title = data[i].title.substring(0,25) + "..."
							}
							let _date = new Date(data[i].gmtUpdate)
							data[i].gmtUpdate = this.$u.timeFormat(_date.getTime(), 'mm-dd hh:MM');
						}
						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('news', 'getNewsInfo', {
						category:2,
						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++){
								if(data[k].title.length > 20){
									data[k].title = data[k].title.substring(0,20) + "..."
								}
								let _date = new Date(data[k].gmtUpdate)
								data[k].gmtUpdate = this.$u.timeFormat(_date.getTime(), 'mm-dd hh:MM');
							}
							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>