积分商城增加条加筛选

App.vue

@@ -11,6 +11,7 @@
 		onHide() {
 			//用户下线
 			this.$api.census.offline()
+			uni.removeStorageSync('isWorksSkip');
 		},
 		methods: {
 			//设置主题色

components/filterBar/filterBar.vue

@@ -0,0 +1,77 @@
+<template>
+	<!-- <u-sticky> -->
+		<view class="filter-bar-container" :style="vuex_skin">
+			<view class="filter-bar">
+				<view class="filter-item" v-for="(item, index) in filterList" :key="index" @click="handleExchangeTag(index)">
+					<text :class="currentIndex == index ? 'activity' : ''">{{item.title}}</text>
+					<view class="filter-icon" v-if="index == 2">
+						<u-icon name="arrow-up-fill" :color="currentIndex == index && sort == 'asc' ? vuex_theme.bgColor : ''" size="14"></u-icon>
+						<u-icon name="arrow-down-fill" :color="currentIndex == index && sort == 'desc' ? vuex_theme.bgColor : ''" size="14"></u-icon>
+					</view>
+				</view>
+			</view>
+		</view>
+	<!-- </u-sticky> -->
+</template>
+
+<script>
+	export default {
+		props: {
+			currentIndex: 0
+		},
+		data() {
+			return {
+				filterList: [{
+					title: '综合'
+				},{
+					title: '销量',
+				},{
+					title: '价格',
+				}],
+				sort: '', //升序: asc 降序: desc,
+			}
+		},
+		methods: {
+			handleExchangeTag(index) {
+				this.currentIndex = index;
+				this.$emit('exchangeTag', index);
+				if(this.currentIndex == 0 || this.currentIndex == 1){
+					this.sort = '';
+					return;
+				}
+				if (this.currentIndex == 2) {
+				  this.sort = this.sort != 'asc' ? 'asc' : 'desc';
+				  return;
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.filter-bar-container{
+		z-index: 999;
+		.filter-bar{
+			display: flex;
+			padding: 20rpx 0;
+			background: #fff;
+			.filter-item{
+				flex: 1;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				.filter-icon{
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					margin-left: 5rpx;
+				}
+			}
+		}
+	}
+
+.activity{
+	color: var(--bgColor);
+	font-weight: bold;
+}
+</style>

pages/shop/shop.vue

@@ -33,6 +33,7 @@
 			<view class="swiper">
 				<u-swiper :list="swiperList" name="url" mode="rect" border-radius="12" height="270"></u-swiper>
 			</view>
+			<filter-bar :currentIndex="currentIndex" ref="filterBar" @exchangeTag="handeExchangeTag"></filter-bar>
 			<view class="recommend-info">
 				<view class="goods-list">
 					<navigator hover-class="none" :url="'detail?id='+item.id" class="list" v-for="(item,index) in list"
@@ -66,8 +67,12 @@
 
 <script>
 	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	import filterBar from "@/components/filterBar/filterBar.vue"
 	import {tabbar} from "@/assets/http/tabbar.js"
 	export default {
+		components: {
+			filterBar,
+		},
 		mixins: [MescrollMixin],
 		data() {
 			return {
@@ -85,14 +90,13 @@
 				userData: {},
 				list: [],
 				isWorksSkip: false, //是否从作品详情页跳转进来
+				currentIndex: 0, //筛选栏下标，默认为0, 1: 销量 2
+				searchType: 0, //搜索类型
 			}
 		},
 		onShow() {
 			this.init()
 		},
-		onUnload() {
-			uni.removeStorageSync('isWorksSkip');
-		},
 		async onLoad() {
 			//加载底部导航栏
 			this.fetchTabbar()
@@ -104,6 +108,9 @@
 		watch: {
 			isWorksSkip(newVal, oldVal) {
 				if(newVal != oldVal){this.fetchGoods();}
+			},
+			searchType(newVal, oldVal) {
+				if(newVal != oldVal){this.fetchGoods();}
 			}
 		},
 		methods: {
@@ -162,36 +169,46 @@
 			},
 			upCallback(mescroll) {
 				try {
+					let params = {};
 					if(this.isWorksSkip){
-						let params = {
+						params = {
+							searchType: this.searchType,
 							current: mescroll.num,
 							size: mescroll.size,
 							activeId: this.vuex_active_setting.defaultActiveId
 						}
-						this.$api.pointgoods.queryList(params).then(res => {
-							let data = res.data.data.records
-							let total = res.data.data.total
-							mescroll.endBySize(data.length, total);
-							if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
-							this.list = this.list.concat(data); //追加新数据
-						})
 					}else{
-						let params = {
+						params = {
+							searchType: this.searchType,
 							current: mescroll.num,
 							size: mescroll.size,
 						}
-						this.$api.pointgoods.list(params).then(res => {
-							let data = res.data.data.records
-							let total = res.data.data.total
-							mescroll.endBySize(data.length, total);
-							if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
-							this.list = this.list.concat(data); //追加新数据
-						})
 					}
+					this.$api.pointgoods.queryList(params).then(res => {
+						let data = res.data.data.records
+						let total = res.data.data.total
+						mescroll.endBySize(data.length, total);
+						if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
+						this.list = this.list.concat(data); //追加新数据
+					})
 				} catch (e) {
 					console.error(e);
 					this.mescroll.endErr()
 				}
+			},
+			handeExchangeTag(index) {
+				this.currentIndex = index;
+				if(this.currentIndex == 0){
+					this.searchType = 0
+				}else if(this.currentIndex == 1){
+					this.searchType = 1
+				}else if(this.currentIndex == 2){
+					if(this.$refs.filterBar.sort != 'asc'){
+						this.searchType = 3
+					}else{
+						this.searchType = 2
+					}
+				}
 			}
 		}
 	}