uniapp_lianxi/pages/surpermarket/surpermarket.vue

<template>
	<view>

		<view class="top-box">
			<!-- <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search> -->
			<u-field icon='search' @blur='serachBlur' label-width='0' v-model="search" trim border
				border-color='black' placeholder='请搜索' />

			<u-sticky>
				<!-- <u-dropdown >
					<u-dropdown-item v-model="value1" title="距离" :options="options1"></u-dropdown-item>
					<u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item>
				</u-dropdown> -->
				<u-tabs :list="list" active-color='orange' :current="current" @change="tabsChange"></u-tabs>

				<slFilter @result='result' @changeICon='changeICon' :themeColor="themeColor" :menuList='menuList'>
				</slFilter>
			</u-sticky>
		</view>

		<view class="content">
			<scroll-view scroll-y="true" class="mode-center">
				<template v-for="item in 10">
					<view class="" v-if="flag">
						aaa
					</view>

					<view class="" v-else>
						bbbb
					</view>
				</template>


			</scroll-view>




			<!-- <view v-for="(item, index) in newList" :key="index" class="newList">
				<view>
					{{item.id}}
				</view>
				<view>
					{{item.name}}
				</view>
				<view>
					{{item.address}}
				</view>
			</view>
			<view class="loading" v-if="loading">{{ loadingTxt }}</view> -->
		</view>

	</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import {
		getOrderList
	} from "../../utils/service.js";
	export default {
		components: {
			slFilter
		},
		data() {
			return {
				value1: 1,
				value2: 2,
				search: '',
				touchmove: false,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				newList: [],
				loading: false,
				finished: false,
				loadingTxt: '加载更多',
				page: 1,
				add: [{
						name: '张wwww三',
						title: '啊啊啊啊'
					},
					{
						name: '张三22222',
						title: '啊啊啊2222啊'
					},
				],

				list: [{
						name: '全部'
					}, {
						name: '政采待'
					}, {
						name: '小微数贷',
					}, {
						name: '抵押贷',
					},
					{
						name: '信用贷',
					},
					{
						name: '畜牧贷',
					},
					{
						name: '个转企',
					},
					{
						name: '复工复商',
					},
					{
						name: '电力贷',
					},
				],
				current: 0,
				themeColor: 'orange',
				flag: true,
				filterResult: {},
				menuList: [{
						'title': '排序',
						'key': 'key_1',
						'isSort': true,
						'isMutiple': false,
						'detailList': [{
								'title': '成功对接企业高到底',
								'value': 'val1'
							},
							{
								'title': '参考利率从低到高',
								'value': 'val_3_2'
							},
							{
								'title': '贷款额度从高到低',
								'value': 'val_3_3'
							}
						]
					},
					{
						'title': '金融机构',
						'key': 'key_2',
						'isMutiple': true,
						'detailList': [{
								'title': '长春市',
								'children': [{
										id: '200',
										value: '朝阳区'
									},
									{
										id: '201',
										value: '南关区'
									},
									{
										id: '203',
										value: '南关区'
									},
									{
										id: '204',
										value: '南关区'
									},
								]
							},
							{
								'title': '北京市',
								'children': [{
										id: '300',
										value: '朝阳区'
									},
									{
										id: '301',
										value: '南关区'
									},
									{
										id: '303',
										value: '南关区'
									},
									{
										id: '304',
										value: '南关区'
									},
								]
							},
							{
								'title': '条件_2_2',
								'children': [{
										id: '400',
										value: '朝阳区'
									},
									{
										id: '401',
										value: '南关区'
									},
									{
										id: '403',
										value: '南关区'
									},
									{
										id: '404',
										value: '南关区'
									},
								]
							},

						]
					},
					{
						'title': '地区',
						'key': 'key_3',
						'isMutiple': true,
						'detailList': [{
								'title': '长春市',
								'children': [{
										id: '200',
										value: '朝阳区'
									},
									{
										id: '201',
										value: '南关区'
									},
									{
										id: '203',
										value: '南关区'
									},
									{
										id: '204',
										value: '南关区'
									},
								]
							},
							{
								'title': '北京市',
								'children': [{
										id: '300',
										value: '朝阳区'
									},
									{
										id: '301',
										value: '南关区'
									},
									{
										id: '303',
										value: '南关区'
									},
									{
										id: '304',
										value: '南关区'
									},
								]
							},
							{
								'title': '条件_2_2',
								'children': [{
										id: '400',
										value: '朝阳区'
									},
									{
										id: '401',
										value: '南关区'
									},
									{
										id: '403',
										value: '南关区'
									},
									{
										id: '404',
										value: '南关区'
									},
								]
							},

						]
					},
					{
						'title': '更多',
						'key': 'key_4',
						'isMutiple': true,
						'detailList': [{
								'title': '长春市',
								'children': [{
										id: '200',
										value: '朝阳区'
									},
									{
										id: '201',
										value: '南关区'
									},
									{
										id: '203',
										value: '南关区'
									},
									{
										id: '204',
										value: '南关区'
									},
								]
							},
							{
								'title': '北京市',
								'children': [{
										id: '300',
										value: '朝阳区'
									},
									{
										id: '301',
										value: '南关区'
									},
									{
										id: '303',
										value: '南关区'
									},
									{
										id: '304',
										value: '南关区'
									},
								]
							},
							{
								'title': '更多',
								'children': [{
										id: '400',
										value: '朝阳区'
									},
									{
										id: '401',
										value: '南关区'
									},
									{
										id: '403',
										value: '南关区'
									},
									{
										id: '404',
										value: '南关区'
									},
								]
							},

						]
					},
				]

			};
		},
		onLoad(e) {
			//this.getNews();
		},
		onPullDownRefresh() {
			this.loading = true;
			//下拉的生命周期
			this.getNews();
		},
		onReachBottom() {
			//阻止重复加载
			// if (timer !== null) {
			// 	clearTimeout(timer);
			// }
			//timer = setTimeout(() => this.getMoreNews(), 500);
			this.getMoreNews()
		},
		methods: {
			//下拉刷新事件
			async getNews() {
				this.finished = false;
				this.loadingTxt = '加载中';
				this.page = 1;
				//标题读取样式激活
				uni.showNavigationBarLoading();
				const result = await getOrderList();
				let {
					data,
					code
				} = result
				if (data && code == 0) {
					this.newList = data.tableData
					uni.stopPullDownRefresh();
					//隐藏标题读取
					uni.hideNavigationBarLoading();
					this.loading = false;
				}

			},

			//加载更多的新闻
			async getMoreNews() {
				if (this.finished) return;
				this.loadingTxt = '加载中';
				this.loading = true;
				uni.showNavigationBarLoading();
				this.page++;
				const result = await getOrderList();
				let {
					data,
					code
				} = result
				if (data && code == 0) {
					uni.stopPullDownRefresh();
					//隐藏标题读取
					uni.hideNavigationBarLoading();
					if (this.newList.length == data.total) {
						this.loadingTxt = '已经加载全部';
						this.finished = true;
						return;
					}
					this.newList = [...this.newList, ...data.tableData]
					this.loading = false
				}
				// setTimeout(() => {
				// 	//停止下拉样式
				// 	uni.stopPullDownRefresh();
				// 	//隐藏标题读取
				// 	uni.hideNavigationBarLoading();
				// 	if (that.newList.length > 30) {
				// 		that.loadingTxt = '已经加载全部';
				// 		that.finished = true;
				// 		return;
				// 	}
				// 	that.newList = that.newList.concat(that.add)
				// 	that.loading = false;

				// }, 1500);
			},
			tabsChange(index) {
				console.log(this.filterResult)
				this.current = index;
				let data = {
					...this.filterResult,
					tab: this.current,
					search: this.search,

				}
				console.log(data, 11111)
			},
			serachBlur() {
				console.log(this.search,"该死")
				let data = {
					...this.filterResult,
					tab: this.current,
					search: this.search,

				}
				console.log(data, 11111)
			},
			changeICon(flag) {
				flag ? this.flag = true : this.flag = false
			},
			result(val) {
				// console.log(JSON.stringify(val));
				// this.filterResult = JSON.stringify(val, null, 2)
				let data = {
					tab: this.current,
					search: this.search,
					...val
				}
				this.filterResult = val
				console.log(data)
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import '../../common/box.scss';

	.top-box {
		background: white;
		overflow: hidden;
	}

	::v-deep .u-dropdown__menu {
		background: white;
	}

	::v-deep .u-field {
		border: 1rpx solid black;
		border-radius: 10rpx;
		margin: 20rpx 4%;
	}

	::v-deep .u-dropdown__content {
		height: 700px !important;
	}

	// ::v-deep .u-sticky-wrap {
	// 	height: auto!important;
	// }




	.fixed-box {
		position: fixed;
		z-index: 99;
		width: 100%;
	}

	.newList {
		border: 1rpx solid black;
		padding: 20px;
	}

	.loading {

		line-height: 2em;
		text-align: center;
		color: #888;
		margin-top: 30rpx;
	}
</style>