yicangzongtai_app_240321/pages/research/homepage/result.vue

<template>
	<view class="result">
		<view class="top">
			<navbar :config="config">
				<view slot="right" style="font-size: 36rpx; font-weight: 500; color: #FFFFFF;margin-right: 30rpx;">
					搜索
				</view>
			</navbar>
		</view>
		<view class="list">
			<view class="item" @click="changeColor(1)" >
				<view class="item-top" :class="colorIndex==1?'item-active':''">
					综合
				</view>
				<view class="item-bottom" >
					<view class="iconfont u-font24 linge"  >&#xeb20;</view>
					<view class="iconfont u-font24 linge" >&#xeb1f;</view>	
				</view>
			</view>
			<view class="item" @click="changeColor(2)" :class="colorIndex==2?'item-active':''">
				<view class="item-top">
					销量
				</view>
				<view class="item-bottom">
					<view class="iconfont u-font24 linge top" >&#xeb20;</view>
					<view class="iconfont u-font24 linge" >&#xeb1f;</view>	
				</view>
			</view>
			<view class="item" @click="changeColor(3)" :class="colorIndex==3?'item-active':''">
				<view class="item-top">
					价格
				</view>
				<view class="item-bottom">
					<view class="iconfont u-font24 linge top"  >&#xeb20;</view>
					<view class="iconfont u-font24 linge" >&#xeb1f;</view>	
				</view>
			</view>
			<view class="item" @click="changeColor(4)" :class="colorIndex==4?'item-active':''">
				<view class="item-top">
					销量
				</view>
				<view class="item-bottom">
					<view class="iconfont u-font24 linge top">&#xeb20;</view>
					<view class="iconfont u-font24 linge" >&#xeb1f;</view>	
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="content-item" v-for="(item,index) in 4" :key="index">
				<view class="content-image">
					<image :src="imgUrl+'/cosmetics.png'" mode=""></image>
				</view>
				<view class="content-right">
					<view class="top">
						<image :src="imgUrl+'/logoOne.png'" mode=""></image>
						<text>雅诗兰黛（Estee Lauder）特润修护肌透精华露</text> 
					</view>
					<view class="number">
						<view class="number-red">
							<view class="large">
								<text>￥</text>
								64.
							</view>
							<view class="small">
								20
							</view>
							</view>
						<view class="before">
							￥64.00
						</view>
					</view>
					
					<view class="comment">
						<text>302</text>条评价<text>99%</text>好评
					</view>
					<view class="storefront">
						金字火腿旗舰店 >
					</view>
				</view>	
			</view>

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '店铺',
					color: '#FFFFFF',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#0B844A"],
					statusBarFontColor: '#FFFFFF',
					rightSlot: true,
					search: {
						value: '',
						placeholder: '请输入搜索关键字',
						disabled: false,
					},
				},
				colorIndex:1,
				flag:false,
				params:{
					limit:10,
					page:1,
					order_type:1,//1是综合（按发布时间），2是新品，3价格，4销量
					order_mode:''//asc 或 desc
				},
				imgUrl: this.$mConfig.staticUrl
			}
		},
		methods:{
			changeColor(e){
				this.colorIndex=e
				this.params.order_type =e
				if(e==1){
					this.flag=!this.flag
					if(this.price){
						this.params.order_mode='asc'
					}else{
						this.params.order_mode='desc'
					}
					
				}
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: #f5f5f5;
		padding: 30rpx;
		.content-item{
			margin-bottom: 26rpx;
			padding: 42rpx 22rpx;
			border-radius: 6rpx;
			background-color: #ffffff;
			display: flex;
			.content-image{
				image{
					width: 226rpx;
					height: 226rpx;
					border-radius: 10rpx;
				}
			}
			.content-right{
				margin-left: 20rpx;
				.storefront{
					color: #999999;
					font-size: 24rpx;
					font-weight: Medium;
					line-height: 24rpx;
					margin-top: 6rpx;
				}
				.comment{
					font-size: 20rpx;
					color: #999999;
					line-height: 24rpx;
					font-weight: Regular;
					margin-top: 30rpx;
					text{
						color: #FF4E15;
					}
				}
				.number{
					display: flex;
					margin-top: 20rpx;
					.before{
						margin-left: 20rpx;
						font-size: 22rpx;
						font-weight: 500;
						color: #CCCCCC;
						text-decoration: line-through;
					}
					.number-red{
						color: #FF0000;
						display: flex;
						.large{
							font-size: 32rpx;
							font-weight: 700;
							line-height: 24rpx;
						}
						.small{
							font-size: 20rpx;
							font-weight: Bold;
							line-height: 24rpx;
						}
					}
				}
				.top{
					text{
						line-height: 36rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #181818;
						margin-left: 20rpx;
					}
					image{
						font-size: 28rpx;
						font-weight: 400;
						line-height: 36rpx;
						color: red;
						width: 102rpx;
						height: 30rpx;
					}
					font-size: 28rpx;
					font-weight: 400;
					color: #181818;
					line-height: 36rpx;
					
				}
			}
		}
	}
	.list {
		display: flex;
		justify-content: space-around;
		color: #FFFFFF;
		font-weight: 700;
		line-height: 24rpx;
		font-size: 28rpx;
		padding: 42rpx 0 24rpx 0;
		background-color: #0B844A;
		.item{
			display: flex;
			.linge{
				line-height: 12rpx;
			}
		}
		.item-active{
			color: #DCCDA4;
		}
	}
	
	
</style>