tuanfeng-shop-user/pages/store/fine-food/food-nearby/food-nearby.vue

<template>
	<view class="food-nearby-page-container">
		<view class="fixed-container">
			<view class="search-container">
				<view class="search-header">
					<BeeBack>
						<view class="header-title">
							<BeeIcon :size="24" color="#000" name="arrowleft"></BeeIcon>
							<h1>{{ title }}</h1>
						</view>
					</BeeBack>
					<SearchBar
						prevent background="#fff" style="flex: 1;margin-right: 15upx;"
						@click="$jump('/pages_category_page1/search/index/index')"
					></SearchBar>
					<view class="control">
						<view class="item">
							<BeeIcon
								:size="24" :src="require('../../../../static/images/icon/location2.png')"
							></BeeIcon>
							<text>位置</text>
						</view>
					</view>
				</view>
			</view>

			<view v-if="list && list.length" class="menus-wrapper">
				<view
					v-for="item in list" :key="item.text" class="item" :class="{ active: queryParam.dressing === item.id }"
					@click="handleChooseMenu(item)"
				>
					<text>{{ item.storeName }}</text>
				</view>
			</view>

			<BeeStoreFilter
				:is-show-filter="false" style="margin: 0;padding: 24upx 28upx 20upx;"
				@select-distance="handleSelectDistance"
			></BeeStoreFilter>
		</view>

		<view class="brand-list">
			<view v-if="$data._list && $data._list.length">
				<BeeBrandPane v-for="item in $data._list" :key="item.id" :is-positioning="false" :brand-info="item"></BeeBrandPane>
			</view>
			<view style="padding-bottom: 45upx;">
				<LoadMore
					:status="!$data._isEmpty && !$data._list.length
						? 'loading' : !$data._isEmpty && $data._list.length && ($data._list.length >= $data._listTotal) ? 'no-more' : ''"
				>
				</LoadMore>
				<tui-no-data v-if="$data._isEmpty" :fixed="false" style="margin-top: 60upx;">暂无商家~</tui-no-data>
			</view>
		</view>
	</view>
</template>

<script>
import loadData from '../../../../mixins/loadData'
import { getSubMenuByPidApi, getHomeBrandListApi } from '../../../../api/user'
export default {
	name: 'FoodNearby',
	mixins: [
		loadData({
			api: getHomeBrandListApi,
			mapKey: {
				list: 'list',
				listTotal: 'total',
				pageSize: 'pageSize'
			},
			dataFn(data) {
				const ignoreBrandList = ['佛山市顺德区修江缘美食餐饮店', '测试门店呀']
				return data.filter((item) => !ignoreBrandList.includes(item.name))
			}
		})
	],
	data() {
		return {
			list: [],
			title: '',
			id: '',
			queryParam: {
				dressing: '',
				distance: ''
			}
		}
	},

	onLoad(options) {
		this.title = options.name
		this.id = options.id
		this.getMenus()
	},

	methods: {
		getBrandList() {
			this.$data._query = {
				...this.$data._query,
				...this.queryParam,
				areaId: this.$store.state.location.locationInfo.adcode,
				longitude: this.$store.state.location.locationInfo.streetNumber.location.split(',')[0],
				latitude: this.$store.state.location.locationInfo.streetNumber.location.split(',')[1]
			}
			this._loadData()
		},

		handleChooseMenu(item) {
			this.queryParam.dressing = item.id
			this.getBrandList()
		},

		// 获取当前页面的分类
		async getMenus() {
			const { data } = await getSubMenuByPidApi({
				dressing: this.id
			})
			this.list = data
			data && data.length ? this.queryParam.dressing = data[0].id : this.queryParam.dressing = this.id
			this.getBrandList()
		},

		handleSelectDistance(e) {
			this.queryParam.distance = e
			this.getBrandList()
		}
	}
}
</script>

<style lang="scss" scoped>
.food-nearby-page-container {
	width: 100vw;
	min-height: 100vh;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, #f6f6f6 0%);

	.fixed-container {
		.search-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 44upx 22upx 0;
			box-sizing: border-box;

			.header-title {
				display: flex;
				align-items: center;
			}

			h1 {
				font-size: 28upx;
				color: #000;
				font-weight: normal;
				margin-right: 10upx;
			}

			.control {
				display: flex;
				align-items: center;

				.item {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					color: #000;
					font-size: 24upx;
					margin-left: 8upx;

					&:nth-child(1) {
						margin-left: 0;
					}
				}
			}
		}

		.menus-wrapper {
			white-space: nowrap;
			display: flex;
			align-items: center;
			overflow: scroll;
			padding: 20upx 20upx 0 20upx;

			.item {
				height: 48upx;
				position: relative;
				font-size: 24upx;
				box-sizing: border-box;
				margin-right: 48upx;
				border-radius: 10upx;
				flex-shrink: 0;

				&::after {
					content: '';
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 0;
					width: 0;
					height: 4upx;
					border-radius: 10upx;
					background-color: #FB5D5D;
					transition: all 350ms ease-in;
				}

				&.active {
					font-size: 28upx;
					font-weight: 500;

					&::after {
						width: 48upx;
					}
				}

			}
		}
	}

	.brand-list {
		padding: 0 20upx;
		box-sizing: border-box;

	}

	.no-data {
		text-align: center;
		color: #747474;
		height: 200upx;
		line-height: 200upx;
	}
}
</style>