book-shop/components/navbar/navbar-search.vue

<template>
	<view class="slot">
		<view class="toph">
			<u-search
				:placeholder="placeholder"
				:value="value"
				height="70"
				@search="searchConfirm"
				@custom="searchConfirm"
			></u-search>
			<view class="goodsSort">
				<view class="item" :class="{'active':!sortTypes.price_sc && !sortTypes.sales_sc}" @click="changeSort(1)">
					<text>综合</text>
				</view>
				<view class="item" :class="{'active':['asc','desc'].includes(sortTypes.price_sc)}" @click="changeSort(2)">
					<text>价格</text>
					<view :class="['sortIcon',sortTypes.price_sc]"></view>
				</view>
				<view class="item" :class="{'active':sortTypes.sales_sc=='desc'}" @click="changeSort(3)">
					<text>销量</text>
				</view>
			</view>
		</view>
		<view class="siteBar"></view>
	</view>
</template>

<script>
const app = getApp();
export default {
	name: 'navbar-search',
	props: {
		title: {
			type: String,
			default: '搜索'
		},
		value: {
			type: String,
			default: ''
		},
		// 占位内容
		placeholder: {
			type: String,
			default: '请输入'
		},
	},
	data() {
		return {
			// 导航栏高度
			navBarHeight: app.globalData.navBarHeight,
			statusBarHeight: app.globalData.statusBarHeight,
			menuRight: app.globalData.menuRight,
			menuBotton: app.globalData.menuBotton,
			menuHeight: app.globalData.menuHeight,
			menuTop: app.globalData.menuTop,
			menuWidth: app.globalData.menuWidth,
			// 背景色
			searchBgColor: this.$appTheme.appThemeSearchBgColor,
			// 排序类型
			sortTypes:{
				price_sc:'',//desc 降序，asc升序
				sales_sc:'',//desc 降序，asc升序
			},
			/* // priceSort: [{
			// 		label: '默认排序',
			// 		value: 1,
			// 	},
			// 	{
			// 		label: '距离优先',
			// 		value: 2,
			// 	},
			// 	{
			// 		label: '价格优先',
			// 		value: 3,
			// 	}
			// ],
			// saleSort: [{
			// 		label: '去冰',
			// 		value: 1,
			// 	},
			// 	{
			// 		label: '加冰',
			// 		value: 2,
			// 	},
			// ], */
		};
	},
	

	methods: {		
		// 搜索
		searchConfirm(e) {
			this.$emit('confirm', e);
		},
		changeSort(e){
			switch (e){
				case 1:
					// 综合
					this.sortTypes = {
						price_sc:'',
						sales_sc:'',
					}
					break;
				case 2:
					// 价格
					this.sortTypes.price_sc = this.sortTypes.price_sc=='desc'?'asc':'desc';
					this.sortTypes.sales_sc = '';
					break;
				case 3:
				// 销量
					this.sortTypes.sales_sc = 'desc';
					this.sortTypes.price_sc = '';
					break;
				default:
					break;
			}
			// this.sortType = e;
			this.$emit('sortType', this.sortTypes);
		}
	}
};
</script>

<style lang="scss" scoped>
.siteBar{
	height: 140rpx;
}
.toph {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 899;
	overflow: hidden;
	background-color: $app-theme-bg-color;
	box-sizing: border-box;
	padding: 0 30rpx;
}

.goodsSort{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	height: 80rpx;
	box-sizing: content-box;
	border-bottom: 1rpx solid $app-theme-border-color;
	.item{
		position: relative;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: $app-theme-text-gray-color;
		text{
			font-size: 30rpx;
		}
		.sortIcon{
			width: 18rpx;
			height: 30rpx;
			background-image: url('../../static/icon/sort.png');
			background-position: 0 0;
			background-size: auto 100%;
			margin-left: 10rpx;
			&.asc{
				background-position: 42rpx 0;
			}
			&.desc{
				background-position:20rpx 0;
			}
		}
		&.active{
			color: $app-theme-color;
		}
		&.priceAsc{
			
		}
	}
}

</style>