ydd_front/mer_uniapp/pages/merchant_search/index.vue

<template>
	<view class="container flex-col" :data-theme="theme" :style="{height: winHeight + 'px'}">
		<!-- #ifdef MP -->
		<view class="cart_nav">
			<nav-bar iconColor='#fff' ref="navBarRef" :navTitle="navTitle" backgroundColor="#FF6702" :isBackgroundColor="false">
			</nav-bar>
		</view>
		<!-- #endif -->
		<view class='searchGood'>
			<view class='search-box acea-row row-between-wrapper'>
				<view class="flex-y-center">
					<text class='iconfont icon-sousuo2'></text>
					<input type='text' :value='searchValue' :focus="focus" placeholder='点击搜索外卖商家' confirm-type='search' @confirm="searchBut"
					 placeholder-class='placeholder' @input="setValue" maxlength="20"></input>
					<view class='bnt flex-center' @tap='searchBut'>搜索</view>
				</view>
			</view>
			<scroll-view :scroll-x="true" scroll-with-animation style="white-space: nowrap;margin: 20rpx 0rpx;padding: 0 20rpx;">
				<view :class="optionIndex == item.id ? 'active-option' : ''" style="color: #141414;display: inline-block;margin-right: 30rpx;width: 96rpx;"
				 v-for="(item, index) in optionData" :key="index" @tap="onOptionClick(item)">
					<view class="flex-col flex-center">
						<image style="width: 100%;height: 96rpx;" :src="item.icon"></image>
						<view style="font-size: 21rpx;margin-top: 10rpx;">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="padding: 0 20rpx;flex: 1;overflow: hidden;" class="flex-col">
			<!-- 销量排行 -->
			<view class="tab-list" style="margin-top: 10rpx;">
				<view :class=" item.checked ? 'tab-item2' : 'tab-item2-false' " v-for="item in labelList" :key="item.id" @click="item2Click(item)">{{item.label}}</view>
			</view>
			<view class="flex-center flex-col noCommodity" v-if="noDataTip">
				<view class='pictrue'>
					<image :src="urlDomain+'crmebimage/presets/noSearch.png'"></image>
				</view>
				<text class="text-ccc">{{noDataTip}}</text>
			</view>
			<scroll-view scroll-y scroll-with-animation @scrolltolower="onScrollBottom" style="flex: 1;overflow: hidden;">
				<view class="content-goods2" v-for="item in merchantList" :key="item.id" @click="merchantTab(item)">
					<view>
						<image :src="item.avatar" style="width: 230rpx;height: 230rpx;"></image>
					</view>

					<view style="margin-left: 20rpx;flex: 1;">
						<view class="">
							<text class="goods-title">{{item.name}}</text>
						</view>

						<view style="margin-top: 10rpx;">
							<text class="goods-score">{{item.score}}</text>
							<text class="goods-info" style="margin-left: 10rpx;">月销 {{item.salesVolume}}</text>
							<text class="goods-info" style="margin-left: 25rpx;">人均 ¥ {{item.perCapita}}</text>
						</view>

						<view style="margin-top: 10rpx;display: flex;align-items: center;">
							<text class="goods-info">起送 ¥ {{item.perCapita}}</text>
							<text v-if="!item.isfreeDeliverfee" class="goods-info" style="color: #E5AD21;margin-left: 18rpx;">免配送费</text>
							<view v-if="!item.isfreeDeliverfee && item.freeDeliverFee > 0" style="color: #999999;font-size: 21rpx;margin-left: 10rpx;text-decoration: line-through;">¥
								{{item.freeDeliverFee}}</view>
							<text v-if="item.isfreeDeliverfee" style="color: #999999;font-size: 21rpx;margin-left: 10rpx;">配送费¥
								{{item.distCosts}}</text>
							<text class="goods-info" style="margin-left: 38rpx;">10分钟</text>
							<text class="goods-info" style="margin-left: 10rpx;">{{item.distance}}</text>
						</view>

						<view style="margin-top: 22rpx;"><text class="goods-sales">已售卖{{item.salesVolume}}件</text></view>

						<view style="margin-top: 14rpx;">
							<text class="goods-labels" v-for="(item2,index2) in item.discountLabel" :key="index2">{{item2}}</text>
						</view>

					</view>
				</view>
				<view class='loadingicon flex-center' :hidden='!loading'>
					<text class='loading iconfont icon-jiazai' style="width: auto;"></text>加载更多
				</view>
				<view class="flex-center no-data-tip" v-if="loadTitle">{{loadTitle}}</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {
		getSearchKeyword,
	} from '@/api/product.js';
	// #ifdef MP
	import navBar from '@/components/navBar';
	// #endif
	import {
		getMerchantSearchList,
		getHomeInfo
	} from '@/api/home.js';
	import {
		getProduct
	} from '@/api/takeout.js';
	let app = getApp();
	export default {
		components: {
			// #ifdef MP
			navBar
			// #endif
		},
		data() {
			return {
				optionData: [],
				optionIndex: 0,
				winHeight: 0,
				navTitle: '搜索外卖商家',
				hostProduct: [],
				searchValue: '',
				focus: false,
				bastList: [],
				hotSearchList: [],
				theme: app.globalData.theme,
				page: 1,
				labelList: [{
					id: 1,
					label: "销量排行",
					checked: true
				}, {
					id: 2,
					label: "满减大促",
					checked: false
				}, {
					id: 3,
					label: "首单立减",
					checked: false
				}, {
					id: 4,
					label: "减配送费",
					checked: false
				}],
				urlDomain: this.$Cache.get("imgHost"),
				merchantList: [],
				noDataTip: '',
				loadTitle: '',
				loading: false,
				cateId: 0
			};
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		},
		onShow: function() {
			this.getRoutineHotSearch();
		},
		onLoad(e) {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.winHeight = res.windowHeight
				},
			});
			if (e.searchVal) that.searchValue = e.searchVal;
			e.navTitle ? that.navTitle = e.navTitle : ''
			e.id ? that.cateId = e.id : ''
			getProduct(that.cateId).then(res => {
				const data = res.data;
				// data[0].id = 0;
				if (data.length !== 0) {
					that.optionIndex = data[0].id;
					data[0].name = '全部';
					data[0].icon = '/static/img/quanbu.png';
					that.optionData = data
				}
				that.getMatchedData()
			})
		},
		methods: {
			getMatchedData() {
				if (this.loading) return;
				this.loading = true
				getMerchantSearchList({
					latitude: uni.getStorageSync('user_latitude'),
					longitude: uni.getStorageSync('user_longitude'),
					productType: this.optionIndex || this.cateId,
					keywords: this.searchValue,
					page: this.page,
					limit: 10
				}).then(res => {
					let list = res.data.list || [];
					this.merchantList = this.$util.SplitArray(list, this.merchantList);
					if (this.merchantList.length == 0) {
						this.loadTitle = ''
						this.noDataTip = ' 暂无外卖商家 ';
					} else {
						this.noDataTip = ''
						this.loadTitle = list.length < 10 ? "我也是有底线的~" : '';
					}
					this.loading = false
					console.log('商品信息:', this.merchantList);
					this.page += 1;
				}).catch(err => {
					this.loading = false
					console.log(err)
				});
			},
			onOptionClick(item) {
				if (this.optionIndex === item.id) return
				this.page = 1;
				this.merchantList = [];
				this.optionIndex = item.id;
				this.getMatchedData()
			},
			getRoutineHotSearch: function() {
				let that = this;
				getSearchKeyword().then(res => {
					that.$set(that, 'hotSearchList', res.data);
				});
			},
			setHotSearchValue: function(event) {
				this.$set(this, 'searchValue', event);
				this.page = 1;
				this.merchantList = [];
				this.$set(this, 'bastList', []);
				this.getMatchedData()
				// uni.navigateTo({
				// 	url: `/pages/goods/goods_list/index?searchValue=${this.searchValue}`
				// })
			},
			setValue: function(event) {
				this.$set(this, 'searchValue', event.detail.value);
			},
			searchBut: function(e) {
				let that = this;
				let val = '';
				that.focus = false;
				if (e.detail.value) {
					val = e.detail.value
				}
				if (that.searchValue.length > 0 || val) {
					this.page = 1;
					this.merchantList = [];
					this.getMatchedData()
				} else {
					return this.$util.Tips({
						title: '请输入要搜索的外卖商家',
						icon: 'none',
						duration: 1000,
						mask: true,
					});
				}
			},
			merchantTab(item) {
				// 修改跳转
				uni.navigateTo({
					url: `/pages/merchant/home/index?merId=${item.id}`
					// url: `/pages/goods_cate/index?id=${item.id}`
				})
			},
			onScrollBottom() {
				if (!this.loadTitle) {
					this.getMatchedData()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		overflow: hidden;
		position: relative;
	}

	.no-data-tip {
		color: #CCC;
	}

	page {
		background-color: #f5f5f5 !important;
	}

	.searchGood .search {
		padding-left: 30rpx;
		background-color: #fff !important;
	}

	.searchGood .search {
		/* #ifndef MP */
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		/* #endif */
		/* #ifdef MP */
		position: fixed;
		width: 100%;
		z-index: 9999;
		top: 0;
		/* #endif */
	}

	.searchGood .search .input {
		width: 598rpx;
		background-color: #f7f7f7;
		border-radius: 33rpx;
		padding: 0 35rpx;
		box-sizing: border-box;
		height: 66rpx;
	}

	.searchGood .search .input input {
		width: 472rpx;
		font-size: 26rpx;
	}

	.searchGood .search .input .placeholder {
		color: #bbb;
	}

	.searchGood .search .input .iconfont {
		color: #000;
		font-size: 35rpx;
	}

	.searchGood .search .bnt {
		width: 120rpx;
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 30rpx;
		color: #282828;
	}

	.searchGood .title {
		font-weight: 500;
		font-family: PingFang SC, PingFang SC;
		font-size: 28rpx;
		color: #333;
		margin: 50rpx 30rpx 25rpx 30rpx;
	}

	.searchGood .list {
		padding-left: 10rpx;
	}

	.searchGood .list .item {
		font-size: 26rpx;
		color: #454545;
		padding: 0 21rpx;
		height: 60rpx;
		border-radius: 30rpx;
		line-height: 60rpx;
		border: 1rpx solid #aaa;
		margin: 0 0 20rpx 20rpx;
	}

	.searchGood .line {
		margin: 20rpx 30rpx 0 30rpx;
	}

	.searchBox {
		width: 100%;
	}

	.search-box {
		background-color: #fff;
		padding: 0 39rpx;
		margin-top: 10rpx;
		box-sizing: border-box;
		height: 96rpx;

		.flex-y-center {
			width: 100%;
			height: 69rpx;
			padding-left: 29rpx;
			border-radius: 35rpx;
			border: 2rpx solid #FF6702;
		}

		.bnt {
			background: #FF6702;
			border-radius: 35rpx;
			width: 115rpx;
			height: 100%;
			font-weight: 500;
			font-size: 35rpx;
			color: #FFFFFF;
		}
	}

	.icon-fanhui2 {
		// line-height: 66rpx;
	}

	.search-box input {
		width: 90%;
		font-size: 26rpx;
	}

	.search-box .placeholder {
		color: #bbb;
	}

	.search-box .iconfont {
		color: #000;
		font-size: 35rpx;
	}

	.tab-list {
		display: flex;
		/* 启用弹性布局 */
		flex-direction: row;
		/* 横向排列 */
		justify-content: space-between;
		/* 均匀分布子项 */
		flex-wrap: wrap;
		/* 允许换行（适用于屏幕宽度不足时） */

		.tab-item2 {
			width: 23%;
			/* 5个元素平分宽度，留2%作为间隙 */
			text-align: center;
			background-color: #FFC127;
			border-radius: 8rpx;
			font-size: 23rpx;
			padding: 6rpx;
			font-weight: 400;
		}

		.tab-item2-false {
			width: 23%;
			/* 5个元素平分宽度，留2%作为间隙 */
			text-align: center;
			background-color: #fff;
			border-radius: 8rpx;
			font-size: 23rpx;
			padding: 6rpx;
			font-weight: 400;
		}
	}

	.content-goods2 {
		background: #FFFFFF;
		border-radius: 23rpx;
		margin-top: 10rpx;
		padding: 20rpx;
		display: flex;
	}

	.goods-title {
		color: #141414;
		font-size: 26rpx;
		font-weight: 600;
	}

	.goods-desc {
		color: #646464;
		font-size: 21rpx;
		margin-top: 10rpx;
	}

	.goods-price {
		color: #FF9805;
		font-size: 34rpx;
		font-weight: 600;
	}

	.goods-score {
		color: $bg-color-primary;
		font-size: 27rpx;
	}

	.goods-info {
		color: #999999;
		font-size: 21rpx;
	}

	.goods-info3 {
		color: #999999;
		font-size: 21rpx;
		margin-left: 10rpx;
		text-decoration: line-through;
	}

	.goods-sales {
		background-color: #FEEFE5;
		color: #FF6702;
		border-radius: 8rpx;
		font-size: 21rpx;
		padding: 4rpx 20rpx;
	}

	.goods-labels {
		background-color: #FFF6F6;
		color: #FF4B4B;
		border: 2rpx solid #FF4B4B;
		border-radius: 8rpx;
		font-size: 21rpx;
		padding: 4rpx 16rpx;
		margin-right: 20rpx;
	}

	.active-option {
		color: $bg-color-primary !important;
	}
</style>