yicangzongtai_app_240321/pages/research/recommend/list.vue

<template>
	<view class="details">
		<!-- 详情页面 -->
		<navbar :config="config">
			<view slot="right"
			style="margin-right: 30rpx;
			"
			@click="ProvideData"
			>确认</view>
		</navbar>
		<view class="zdtopbox">
			<view class="top-input">
				<text class="iconfont position-ab u-mt15 u-ml30 u-D1D9D4">&#xe7a6;</text>
				<input type="text" style="font-size: 28rpx;flex: 1;" value=""  @confirm='confirmSubmit' v-model="value" placeholder="请输入搜索关键字" placeholder-class="pc" />
				<text style="color: #FFFFFF;font-size: 36rpx; font-weight: 500;margin-left: 20rpx" @click="SearchContent">搜索</text>
			</view>
			<view class="details-top">
						<view class="item"  @click="changecolor(1)" >
							<view class="content" :class="topIndex==1?'itemcolor':''">
								综合
							</view>
							<view class="icontb">
							<!-- <view class="iconfont u-font24 linge top" :class="topIndex==1&&!price?'itemcolor':''" >&#xeb20;</view> -->
							<!-- <view class="iconfont u-font24 linge" :class="topIndex==1&&price?'itemcolor':''">&#xeb1f;</view>	 -->
							</view>
						</view>
						<view class="item"  @click="changecolor(2)" >
							<view class="content" :class="topIndex==2?'itemcolor':''">
								最新
							</view>
			<!-- 				<view class="icontb">
								<view class="iconfont u-font24 linge top" :class="topIndex==2&&!towPrice?'twoitemcolor':''">&#xeb20;</view>
								<view class="iconfont u-font24 linge"  :class="topIndex==2&&towPrice?'twoitemcolor':''">&#xeb1f;</view>	
							</view> -->
						</view>
						<view class="item"  @click="changecolor(3)" >
							<view class="content" :class="topIndex==3?'itemcolor':''">
								利润
							</view>
							<view class="icontb">
							<view class="iconfont arrow"  :class="topIndex==3&&!threePrice?'twoitemcolor':''">&#xe648;</view>
							<view class="iconfont arrow" :class="topIndex==3&&threePrice?'twoitemcolor':''">&#xe645;</view>	
							</view>
						</view>
						<view class="item"  @click="changecolor(4)" >
							<view class="content" :class="topIndex==4?'itemcolor':''">
								销量
							</view>
			<!-- 				<view class="icontb">
							<view class="iconfont u-font24 linge top" :class="topIndex==4&&!fourPrice?'twoitemcolor':''">&#xeb20;</view>
							<view class="iconfont u-font24 linge" :class="topIndex==4&&fourPrice?'twoitemcolor':''">&#xeb1f;</view>	
							</view> -->
						</view>
						<!-- <view class="item"  @click="changecolor(5)" >
							<view class="content" :class="topIndex==5?'itemcolor':''">
								筛选
							</view>
							<view class="icontb">
								<view class="iconfont u-font24 linge top" :class="topIndex==5&&!fivePrice?'twoitemcolor':''">&#xe648;</view>
								<view class="iconfont u-font24 linge" :class="topIndex==5&&fivePrice?'twoitemcolor':''">&#xe645;</view>	
							</view>
						</view> -->
					</view>
			
		</view>

		

		<!-- 中间的列表 -->
		<view class="middle-content">
			<view class="white-lump" v-for="(item,index) in goodsList" @click="onFlag(item,index)" :key="index">
				<view class="radio">	
						<view class="addcommodity" v-if="item.flag" >
							<icon type="success" color="#ff0000"   size="18"></icon>
						</view>
						<view class="addcommodity" v-else  style="width: 16px; height: 16px; border-radius: 50%;border: 1px solid #333;box-sizing: border-box;">
							
						</view>
				</view>
				<image :src="item.cover" mode="" class="list-image"></image>
				<view class="name-and-num">
					<div>
					<view class="name">
						{{item.title}}
					</view>
					<view class="sell">
						已售<text class="yello">{{item.result_sale_num}}</text>
					</view>
					</div>
					<view class="num  u-FF0000">
	<!-- 					<view class="red">
							<text class="symbol">￥</text>
							<text class="one">1</text>
							<text class="large">25.</text>
							<text class="zero">00</text>
						</view> -->
						<rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
						<view class="past">
						<!-- 	￥{{item.max_market_price}} -->
							<rich-text :nodes="$mUtil.priceBigSmall(item.max_market_price)"></rich-text>
						</view>
					</view>
				</view>
	
			</view>

		</view>
		<loadMore v-if="goodsList.length>0" :status="status"></loadMore>
		<nodata v-else :config="{top:20,content:'暂无商品~'}"></nodata>
		
		<!-- 页面加载动画 -->
		<ldLoading isFullScreen :active="loading"></ldLoading>
	</view>
</template>

<script>
	var app = getApp()
	export default{
		data(){
			return{
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '选择商品',
					color: '#fff',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#0B844A"],
					statusBarFontColor: '#ffffff',
					rightSlot:true,
				},
				comprehensivedata:[
					{
						id:1,
						name:"综合"
					},
					{
						id:2,
						name:"最新"
					},
					{
						id:3,
						name:"利润"
					},
					{
						id:4,
						name:"销量"
					},
					{
						id:5,
						name:"筛选"
					}
				],
				topIndex:1,
				price:false,//综合的上下切换
				towPrice:false,//最新的上下切换
				threePrice:false,//利润的上下切换
				fourPrice:false,//销量的上下切换
				fivePrice:false,//筛选的上下切换
				newest:false,
				screeningIndex:1, //
				loading:true,
				value:"",
				status:'more',  //more|loading|noMore
				noData:false,
				goodsList:[],
				tabTop:0,
				params:{
					limit:10,
					page:1,
					order_type:1,//1是综合（按发布时间），2是新品，3价格，4销量
					order_mode:''//asc 或 desc
				},
				currPage: 1,
				totalPage: 1,
				ischeckbox:[]
			}
		},
		// onShow() {
		// 	this.getShopList()
		// },
		//监听页面加载
		onLoad(options){
			this.tabTop = app.globalData.barHeight+44;
			if(options.keyword){
				this.params.title = options.keyword
				this.value = options.keyword
				this.getShopList()
			}else{
				this.getShopList()
			}
		},
		//页面滚动到底部的事件
		onReachBottom(e){
			if (this.totalPage <= this.currPage) {
				this.status = "noMore";
			} else {
				this.status='loading'
				this.params.page++
				this.getShopList()
			}
			
		},
		//下拉刷新
		onPullDownRefresh(){
			this.rest()
			this.getShopList()
		},
		
		
		
		methods:{
			//模糊搜索
			confirmSubmit(e){
				this.params.title = e.detail.value
				this.value = e.detail.value
				this.rest()
				this.getShopList()
			},
			SearchContent(){
				this.params.title = this.value
				this.rest();
				this.getShopList();
			},
			//每个选项
			onFlag(item,index){
			
			item.flag=!item.flag
			if(item.flag){
				this.ischeckbox.push(item)
				console.log(item)
			}else{
				this.ischeckbox.splice(index,1)
				// if(this.ischeckbox.some(val=>val.id==item.id)){
				// 	this.ischeckbox.shift(item)
				// }
			}
			console.log(this.ischeckbox)
			},
			//获取数据
			// getShopList(){
			// 	let shop= uni.getStorageSync("shop")
			// },
			// addList(){
			// 	uni.$emit("changeList",data)
			// },
			
			ProvideData(){
			
				if(this.ischeckbox.length==0||this.ischeckbox==null){
					   this.$mUtil.toast("请选择需要添加的商品");
					   return false
				}
				
				if(this.ischeckbox.length>6){
									   this.$mUtil.toast("最多添加6件商品");
									   return false
								}
console.log(this.ischeckbox)
				
					uni.setStorageSync("ischeckbox",this.ischeckbox)

//  let checkList = uni.getStorageSync("ischeckbox")
//         ? uni.getStorageSync("ischeckbox")
//         : [];
// 		this.ischeckbox.forEach(val=>{
// 			checkList.unshift(val)
// 		})
    
//       let arr = JSON.parse(JSON.stringify(checkList));

     
//        let hash = {}; 
// 	   arr = arr.reduce((preVal, curVal) => {
// 	hash[curVal.id] ? '' : hash[curVal.id] = true && preVal.push(curVal); 
// 	return preVal 
// }, [])


// if(arr.length>6){
// 					   this.$mUtil.toast("最多添加6件商品");
// 					   return false
// 				}




// 				uni.setStorageSync("ischeckbox",arr)
				
				var pages = getCurrentPages();
				 var beforePage = pages[pages.length - 2];
				// console.log(beforePage.smallBox,1111111111)
		
				//返回上一层页面并保持上一层页面的数据
				uni.navigateBack()

			},
			
			//获取数据
			getShopList(){
				this.$http.get("/goods/all/pages",this.params)
					.then(res=>{
						uni.stopPullDownRefresh()
						this.loading = false;
						this.triggered=false
						if(res&&res.code==200){
							this.ischeckbox=uni.getStorageSync("ischeckbox")?uni.getStorageSync("ischeckbox"):[]
							if(this.ischeckbox){

								res.page.list.forEach((val,index)=>{
								if(this.ischeckbox.some(item=>item.id==val.id)){
								res.page.list[index].flag=true
								}else{
									res.page.list[index].flag=false
								}
								})
							}else{
							res.page.list.forEach(val=>{
									val.flag=false
								})
							}
							
							this.goodsList = this.goodsList.concat(res.page.list)
							if(this.goodsList.length==0){
								this.noData = true
							}else{
								this.noData=false
							}
							if(res.page.currPage >= res.page.totalPage){
								this.status="noMore"
							}else{
								this.status = "more"
							}
							this.currPage = res.page.currPage
							this.totalPage = res.page.totalPage
						}
						
					})
			},
			//点击切换排序条件
			 changecolor(e){
				 // this.loading=true;
				this.topIndex=e
				this.params.order_type = e
			// 	if(e==1){
			// 		this.price=!this.price
				
			// 		if(this.price){
			// 			this.params.order_mode='asc'
			// 		}else{
			// 			this.params.order_mode='desc'
					
			// 		}
			
			// 	}
				// if(e==2){
				// 	this.towPrice=!this.towPrice
					
				// 	if(this.params){
				// 		this.params.order_mode='asc'
				// 	}else{
				// 		this.params.order_mode='desc'
				// 	}
				// }
				if(e==3){
					this.threePrice=!this.threePrice
					if(this.threePrice){
						this.params.order_mode="asc"
					}else{
						this.params.order_mode="desc"
					}
				}
				if(e==4){
					this.fourPrice=!this.fourPrice
					this.params.order_mode='desc'
				}
				if(e==5){
					this.fivePrice=!this.fivePrice
				}
				this.rest()
				this.getShopList()
			},
			//初始化数据
			rest(){
				this.params.page =1
				this.goodsList=[]
			},
		}
	}
</script>

<style lang="scss" scoped>
	.arrow{
		
		font-size: 20rpx;
	}
	/deep/ .pc{
		font-size: 22rpx;
		color: #dbdbdb !important;
	}
	.position-ab{
		position: absolute;
		margin-top: 4rpx;
		margin-left: 30rpx;
		color: #D1D9D4;
	}
	.zdtopbox{
		background-color: #0B844A;
		padding: 8rpx 30rpx 0 30rpx;
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 66;
		box-sizing: border-box;
	}
	.top-input{
		display: flex;
		background-color: #0B844A;
		align-items: center;
		input{
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 50rpx;
			background-color: rgba($color: #ABC5B5, $alpha: .4);
			color: #fff;
			padding-left: 78rpx;
			box-sizing: border-box;
		}
	}
	.details{
		.middle-content{
			margin-top: 140rpx;
			background-color: #f5f5f5;
			overflow: hidden;
			.white-lump{
				display: flex;
				background-color: white;
				height: 227rpx;
				width: 690rpx;
				border-radius: 18rpx;
				margin: 32rpx 30rpx 25rpx 30rpx;
				.name-and-num{
					margin-left: 30rpx;
					width: 368rpx;
					margin-top: 20rpx;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 187rpx;
					.name{
						font-size: 28rpx;
						font-weight: 400;
						color: #181818;
						opacity: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-wrap: break-word;
						word-break: break-all;
						white-space: normal !important
					}
					.sell{
						color: #999999;
						font-size: 28rpx;
						font-weight: 500;
						margin-top: 3rpx;
						.yello{
						color: rgba(254,144,0,1);
						}
					}
					.num{
						display: flex;
						margin-top: 30rpx;
						.red{
							color: #ff0000;
							.symbol{
								font-size: 20rpx;
								font-weight: 500;
							}
							.one{
								font-size: 32rpx;
								font-weight: 500;
								
							}
							.large{
								font-size: 32rpx;
								font-weight: Bold;
								
							}
							.zero{
								font-size: 20rpx;
								font-weight: Bold;
							}
						}
						.past{
							color: #cccccc;
							font-weight: 500;
							font-size: 22rpx;
							margin-left: 17rpx;
							margin-top: 8rpx;
							text-decoration: line-through;
						}
					}
				}
				.radio{
					display: flex;
					align-items: center;
					margin-left: 22rpx;
					width: 18px;
					.addcommodity{
						// margin-top: 80rpx;
					}
				}
				.list-image{
					width: 187rpx;
					height: 187rpx;
					margin-left: 15rpx;
					border-radius: 18rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
	.twoitemcolor{
		color: rgba(220,205,164,1) ;
	}
	.details-top{
		margin-top: 30rpx;
		margin-bottom: 24rpx;
		display: flex;
		justify-content: space-around;
		color: #ffffff;
		font-weight: 500;
		font-size: 28rpx;
		align-items: center;
		background-color: #0B844A;
		.item{
			display: flex;
		
			.content{
				// line-height: 14rpx;
			}
			}
			//图标上下

		.icontb{
			margin-left: 8rpx;
		.top{
			padding-top:10rpx;
		}
			.linge{
				line-height: 12rpx;
				}
		}
	}
	.itemcolor{
		color: rgba(220,205,164,1);
	}

</style>