moxuan_takeaway_user/pages/index/search/index.vue

<template>
	<view class="content">
		<view class="search-box">
			<!-- mSearch组件 如果使用原样式，删除组件元素-->
			<!-- <mSearch class="mSearch-input-box" :mode="2" button="inside" :placeholder="defaultKeyword"
				@search="doSearch(false)" @input="inputChange" @confirm="doSearch(false)" v-model="keyword"></mSearch> -->
			<!-- 原样式 如果使用原样式，恢复下方注销代码 -->

			<!-- <view class="input-box">
				<input type="text" :adjust-position="true" :placeholder="defaultKeyword" @input="inputChange" v-model="keyword" @confirm="doSearch(false)"
				 placeholder-class="placeholder-class" confirm-type="search">
			</view>
			<view class="search-btn" @tap="doSearch(false)">搜索</view> -->
			<view class="margin-lr">
				<u-search style="width: 100%;" placeholder="请输入商家或者商品名称" :focus="true" v-model="keyword"
					:show-action="true" :animation="true" shape="square" action-text="取消" @custom="goBack()"
					@search="doSearch(false)">
				</u-search>
			</view>

			<!-- <u-dropdown v-show="isShowKeywordList">
				<u-dropdown-item v-model="value1" :title="title" :options="options1" @change="confirm">
				</u-dropdown-item>
				<u-dropdown-item v-model="value2" :title="title1" :options="options2" @change="confirm2">
				</u-dropdown-item>
			</u-dropdown> -->
			<view v-show="isShowKeywordList" style="width: 100%;z-index: 999;">
				<view class="flex justify-between align-center bg-white padding-tb padding-lr-sm">
					<view class="flex-sub text-center" :class="current==1?'select':''" @click="confirm(1)">综合排序</view>
					<view class="flex-sub text-center" :class="current==3?'select':''" @click="confirm(3)">距离优先</view>
					<view class="flex-sub text-center" :class="current==4?'select':''" @click="confirm(4)">销量优先</view>
					<view class="flex-sub text-center flex" @click="isShow = !isShow" >
						<view class="flex align-center" style="margin: 0 auto;">
							<view :class="isShow?'select':''" >筛选</view>
							<u-icon v-if="!isShow" name="arrow-down" size="28"></u-icon>
							<u-icon v-if="isShow" name="arrow-up" color="#FCD202" size="28"></u-icon>
						</view>
					</view>
				</view>
				<view v-if="isShow" style="position: absolute;top: 150rpx;width: 100%;z-index: 1000;background: rgba(0,0,0,.5);height: 100vh;" @click="isShow =false">
					<view class="padding-lr bg-white">
						<view class="flex justify-between align-center padding-tb-sm u-border-bottom" v-for="(item,index) in options4" :key='index' @click.stop="getSelect(item)" >
							<view class="text-df" :class="item.select?'select':''">{{item.shopTypeName}}</view>
							<u-icon v-if="item.select" name="checkmark" color="#FCD202" size="28"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 原样式 end -->
			<!-- 活动筛选 -->
			<view class="hd flex justify-center" v-if="hdlist.length>0 && isShowKeywordList">
				<view class="hd-box">
					<scroll-view scroll-x="true" class="scroll-view_H">
						<view class="hd-box-item" :style="currenthd==index?'background-color:#fcd202;font-weight:bold':''" @click="searchhd(index,item.activityId)" v-for="(item,index) in hdlist" :key="index">{{item.activityTitle}}</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="search-keyword">
			<view class="keyword-list-box" v-show="isShowKeywordList" scroll-y>

				<view class="padding-lr">
					<view class="" v-for="(item,index) in keywordList" :key='index'>
						<view class=" flex justify-between bg-white padding" style="margin-bottom: 20rpx;"
							@click="goNav('/pages/index/shop/index?shopId='+item.shopId)">
							<image :src="item.shopCover" class="radius" style="width: 160rpx;height: 160rpx;"></image>
							<view class=" margin-left-sm" style="width: 450rpx;">
								<view class=" flex flex-direction justify-between">
									<view class="text-lg text-bold text-black">{{item.shopName}}</view>
									<view class="flex align-center margin-top-xs" style="width: 100%;">
										<u-icon name="star-fill" color="#FD6416" size="28"></u-icon>
										<text class="text-lg" style=""> {{item.shopScore?item.shopScore:0}}</text>
										<text class="text-gray flex-sub margin-left-xs">销量{{item.shopSales?item.shopSales:0}}</text>
										<text class="text-gray margin-left-xs">{{item.errandTime}}分钟</text>
										<text class="text-gray margin-left-xs">{{item.distance}}</text>
									</view>
									<view class="text-gray margin-top-xs flex justify-between">
										<view>起送 ¥{{item.minimumDelivery}} 配送 ¥{{item.errandMoney?item.errandMoney:0}}</view>
										<view style="color: #FCD202;">{{item.autoSendOrder==1?'商家配送':'平台配送'}}</view>
									</view>
									<view class="text-gray margin-top-xs" v-if="item.businessHours&&item.lockHours">
										营业时间：{{item.businessHours}}-{{item.lockHours}}</view>
									<view class="flex margin-top-xs justify-between align-start" style="width: 100%;">
										<view class="flex flex-wrap align-center" style="width: 100%;height: 100%;overflow: hidden;">
											<view class="lable flex justify-center align-center" v-if="item.exemptMinMoney">满{{item.exemptMinMoney}}免配送费</view>
											<view class="lable flex justify-center align-center" v-for="(ite,ind) in item.shopLable" :key='ind'
												v-if="item.shopLable">
												{{ite}}
											</view>
											<view class="lable flex justify-center align-center" v-if="item.couponList" style="border-radius: 4rpx;border: 1rpx solid red;background-color: #ffffff;color: red;box-sizing: border-box;" v-for="(it,ide) in item.couponList" :key="ide">满{{it.minMoney}}减{{it.money}}</view>
										</view>
									</view>
								</view>
								<view class="flex margin-top-xs">
									<view v-for="(ite,ind) in item.goodsList" :key='ind'
										@click.stop="goDet(ite.goodsId,item.shopId)" style="width: 33%;">
										<image :src="ite.goodsCover" style="width: 120rpx;height: 120rpx;"
											class="radius" mode=""></image>
										<view class="u-line-1 text-df text-bold margin-top-xs">{{ite.goodsName}}</view>
										<view class="text-bold margin-top-xs" style="color: #FD6416;"> <text
												class="text-sm">¥</text> {{ite.goodsMoney}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view v-if="keywordList.length == 0">
					暂无数据
				</view> -->
				<empty v-if="keywordList.length == 0"></empty>
			</view>
			<view class="keyword-box" v-show="!isShowKeywordList" scroll-y>
				<view class="keyword-block" v-if="hotKeywordList.length>0">
					<view class="keyword-list-header">
						<view>热门搜索</view>
						<view>
							<image @tap="hotToggle" :src="'/static/images/index/attention'+forbid+'.png'"></image>
						</view>
					</view>
					<view class="keyword" v-if="forbid==''">
						<view v-for="(keyword,index) in hotKeywordList" @tap="doSearch(keyword)" :key="index">
							{{keyword}}
						</view>
					</view>
					<view class="hide-hot-tis" v-else>
						<view>当前搜热已隐藏</view>
					</view>
				</view>
				<view class="keyword-block" v-if="oldKeywordList.length>0">
					<view class="keyword-list-header">
						<view>历史记录</view>
						<view>
							<image @tap="oldDelete" src="/static/images/index/delete.png"></image>
						</view>
					</view>
					<view class="keyword">
						<view v-for="(keyword,index) in oldKeywordList" @tap="doSearch(keyword.message)" :key="index">
							{{keyword.message}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				currenthd:-1,
				hdlist:[],
				activityId:'',
				isShow: false,
				defaultKeyword: "",
				keyword: "",
				oldKeywordList: [], //历史记录
				hotKeywordList: [], //热搜
				keywordList: [], //搜索列表
				forbid: '',
				isShowKeywordList: false,
				limit: 10,
				page: 1,
				userId: '',
				isVip: false,
				lng: '',
				lat: '',

				value1: 1,
				value2: 0,
				options1: [{
						label: '综合排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 3,
					},
					{
						label: '销量优先',
						value: 4,
					}
				],
				options2: [{
					value: '',
					label: "全部"
				}],
				options4: [{
					id: '',
					select: true,
					shopTypeName: "全部"
				}],
				current: 1,
				shopTypeId: '',
				title: '综合排序',
				title1: '筛选',
				totalCount: 0
			}
		},
		onLoad() {
			let that = this
			this.getSearchList()
			this.gethdlist();
			this.userId = uni.getStorageSync('userId') ? uni.getStorageSync('userId') : ''
			this.lng = uni.getStorageSync('lng')
			this.lat = uni.getStorageSync('lat')
			this.getShopType()
			this.isVip = uni.getStorageSync('isVIP')
			uni.getLocation({
				type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				success: function(res) {
					// that.lat = res.latitude;
					// that.lng = res.longitude;
				}
			});
		},
		methods: {
			//筛选活动
			searchhd(index,activityId){
				if(index==this.currenthd){
					this.currenthd = -1
					this.activityId = '';
					this.doSearch(false);
				}else{
					this.currenthd = index;
					this.activityId=activityId;
					this.doSearch(false);
				}
			},
			//获取所有活动
			gethdlist(){
				this.$Request.get("/app/activityManage/getActivityList").then(res => {
					if (res.code == 0) {
						res.data.records.map((item,index)=>{
							if(item.activityId==14){
								res.data.records.splice(index, 1)
							}
						})
						this.hdlist = res.data.records
					}
				});
			},
			getSelect(e) {
				this.options4.forEach(res=>{
					if(res.id == e.id) {
						res.select = true
						this.page = 1
						this.shopTypeId = e.id
						// this.getShopList();
						this.doSearch(this.keyword);
						this.isShow = false
					} else {
						res.select = false
					}
				})
			},
			confirm(e) {
				console.log(e)
				this.page = 1
				this.current = e;
				
				this.doSearch(this.keyword);
			},
			confirm2(e) {
				console.log(e)
				this.page = 1
				this.shopTypeId = e
				if (e == 0) {
					this.title1 = '筛选'
				} else {
					this.title1 = this.options2[e].label
				}
				this.doSearch(this.keyword);
			},
			// 获取搜索历史
			getSearchList() {
				let data = {
					page: this.page,
					limit: this.limit,
				}
				this.$Request.get("/app/searchhistory/selectSearchHistory", data).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.oldKeywordList = res.data.list
					}
				});
				this.$Request.getT('/app/common/type/309').then(res => { //订单状态通知
					if (res.code == 0) {
						this.hotKeywordList = res.data.value.split(',')
					}
				})
			},
			//清除历史搜索
			oldDelete() {
				uni.showModal({
					content: '确定清除历史搜索记录？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$Request.get("/app/searchhistory/deleteSearchHistory").then(res => {
								if (res.code == 0) {
									this.getSearchList()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//执行搜索
			doSearch(keyword) {
				this.keyword = keyword === false ? this.keyword : keyword;
				this.isShowKeywordList = true;
				if (!this.keyword) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none',
						duration: 1000
					})
					return
				}

				let data = {
					impotr: this.keyword,
					screen: this.current,
					shopTypeId: this.shopTypeId,
					limit: this.limit,
					page: this.page,
					lng: this.lng,
					lat: this.lat,
					userId: this.userId,
					activityId:this.activityId
				}

				this.$Request.get("/app/goods/selectShop", data).then(res => {
					if (res.code == 0) {
						this.totalCount = res.data.totalCount
						res.data.list.forEach(ret => {
							if (ret.distance > 1000) {
								ret.distance = Number((ret.distance / 1000)).toFixed(2) + "km"
							} else {
								if (ret.distance == 0) {
									ret.distance = "0m";
								} else {
									ret.distance = Number(ret.distance).toFixed(1) + "m";
								}
							}
							ret.shopLable = ret.shopLable ? ret.shopLable.split(',') : ''
							ret.errandTime = Math.round(ret.errandTime)
							ret.shopScore = ret.shopScore.toFixed(1)
						})

						if (this.page == 1) this.keywordList = [];
						this.keywordList = [...this.keywordList, ...res.data.list]
					}
				});
			},
			// 商户类型
			getShopType() {
				this.$Request.getT('/app/shoptype/selectShopTypeList').then(res => {
					if (res.code == 0) {
						res.data.forEach(res => {
							res.select = false
						})
						this.options4 = [...this.options4, ...res.data]
					}
				})
			},
			// 点击取消返回首页
			goBack() {
				uni.navigateBack()
			},
			//热门搜索开关
			hotToggle() {
				this.forbid = this.forbid ? '' : '_forbid';
			},
			// 跳转商品详情
			goDet(goodsId, shopId) {
				uni.navigateTo({
					url: '/pages/index/shop/goodsDet?goodsId=' + goodsId + '&shopId=' + shopId + '&orderType=1'
				})
			},
			goNav(url) {
				console.log(url)
				if (this.userId) {
					uni.navigateTo({
						url
					})
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				}

			},
			// 跳转订单
			goOrder(e) {
				if (this.userId) {
					uni.navigateTo({
						url: '/pages/index/game/order?id=' + e.id
					});
				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			},

		},
		onReachBottom: function() {
			// this.page = this.page + 1;
			// this.doSearch(false);
			if(this.keywordList.length<this.totalCount) {
				this.page = this.page + 1;
				this.doSearch(false);
			} else {
				uni.showToast({
					title: '已经到底了',
					icon: 'none'
				})
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.doSearch(false);
		},
	}
</script>
<style lang="scss">
	page {
		/* background-color: #FFFFFF; */
	}
	.hd{
		width: 100%;
		height: auto;
		// margin-top: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		background-color: rgb(248,248,248);
		.hd-box{
			width: 686rpx;
			height: 100%;
			.scroll-view_H{
				width: 100%;
				white-space: nowrap;
			}
			.hd-box-item{
				display: inline-block;
				padding: 10rpx 20rpx 10rpx 20rpx;
				background-color: #ffffff;
				font-size: 24rpx;
				border-radius: 8rpx;
				margin-right: 10rpx;
			}
			
		}
	}
	.select{
		color: #FCD202;
	}
	.search-box {
		width: 100%;
		/* background-color: rgb(242, 242, 242); */
		padding: 15upx 0 0;
		/* display: flex; */
		/* justify-content: space-between; */
		position: sticky;
		top: 0;
		background-color: #FFF;
		z-index: 99;
	}

	.search-box .mSearch-input-box {
		width: 100%;
	}

	.search-box .input-box {
		width: 85%;
		flex-shrink: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-box .search-btn {
		width: 15%;
		margin: 0 0 0 2%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		font-size: 28upx;
		/* color: #fff; */
		background: linear-gradient(to right, #ff9801, #ff570a);
		border-radius: 60upx;
	}

	.search-box .input-box>input {
		width: 100%;
		height: 60upx;
		font-size: 32upx;
		border: 0;
		border-radius: 60upx;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 0 3%;
		margin: 0;
		background-color: #ffffff;
	}

	.placeholder-class {
		color: #9e9e9e;
	}

	.search-keyword {
		width: 100%;
		/* background-color: #111224; */
	}

	.keyword-list-box {
		height: calc(100vh - 110upx);
		/* padding-top: 10upx; */
		/* border-radius: 20upx 20upx 0 0; */
		/* background-color: #fff; */
	}

	.keyword-entry-tap {
		background-color: #eee;
	}

	.keyword-entry {
		width: 94%;
		height: 80upx;
		margin: 0 3%;
		font-size: 30upx;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1upx #e7e7e7;
	}

	.keyword-entry image {
		width: 60upx;
		height: 60upx;
	}

	.keyword-entry .keyword-text,
	.keyword-entry .keyword-img {
		height: 80upx;
		display: flex;
		align-items: center;
	}

	.keyword-entry .keyword-text {
		width: 90%;
	}

	.keyword-entry .keyword-img {
		width: 10%;
		justify-content: center;
	}

	.keyword-box {
		height: calc(100vh - 110upx);
		/* border-radius: 20upx 20upx 0 0; */
		/* background-color: #111224; */
	}

	.keyword-box .keyword-block {
		padding: 10upx 0;
	}

	.keyword-box .keyword-block .keyword-list-header {
		width: 94%;
		padding: 10upx 3%;
		font-size: 27upx;
		font-weight: 700;
		/* color: #FFFFFF; */
		display: flex;
		justify-content: space-between;
	}

	.keyword-box .keyword-block .keyword-list-header image {
		width: 40upx;
		height: 40upx;
	}

	.keyword-box .keyword-block .keyword {
		width: 94%;
		padding: 3px 3%;
		display: flex;
		flex-flow: wrap;
		justify-content: flex-start;
	}

	.keyword-box .keyword-block .hide-hot-tis {
		display: flex;
		justify-content: center;
		font-size: 28upx;
		/* color: #FFFFFF; */
	}

	.keyword-box .keyword-block .keyword>view {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10upx;
		padding: 0 20upx;
		margin: 10upx 20upx 10upx 0;
		height: 60upx;
		font-size: 28upx;
		background-color: #eee;
		/* color: #FFFFFF; */
	}

	.lable {
		border: 1rpx solid #FFE6D9;
		height: 40rpx;
		padding: 0 14rpx;
		background: #FFE6D9;
		border-radius: 4rpx;
		font-weight: 500;
		color: #FD6416;
		font-size: 20rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}
</style>