school_uni/package1/group/searchGroup.vue

<template>
	<!-- 拼团页 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'padding-top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					搜索页
				</view>
				<view class="title-search" :style="{'margin-top': menuButtonInfo.top +'px'}">
					<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons>
					<input type="text" placeholder="搜索" v-model="searchForm.keyWord" @confirm="goSearch" confirm-type="search" />
				</view>
			</view>
			<view style="width: 95%;background: #fff;margin: 0 auto;border-radius: 10px;padding: 10px;min-height: 80px;" v-if="historyList.length > 0 && !searchForm.shopName">
				<view style="height: 30px;color: #777;display: flex;justify-content: space-between;align-items: center;">
					<text>历史搜索</text>
					<uni-icons type="trash" size="18" color="#999" @tap="clearHistory"></uni-icons>
				</view>
				<view style="overflow: hidden;">
					<view v-for="(item, index) in historyList" :key="index" @tap="clickHistory(item)" style="margin-right:10px;margin-bottom:10px;background: #eee;display: inline-block;padding: 5px 10px;border-radius: 5px;float: left;">
						{{item}}
					</view>
				</view>
			</view>
			<view class="title-sort" style="clear: both;">
				<view class="sort-member">
					<view class="sort-text"  @tap="searchShop('all','')">
						综合排序 <text style="font-size: 20rpx;">▼</text>
					</view>
				</view>
				<view class="sort-member">
					<view class="sort-text"  @tap="searchShop('sale','')">
						销量优先 <text style="font-size: 20rpx;">▼</text>
					</view>
				</view>
				<view class="sort-member">
					<view class="sort-text" @tap="searchShop('score','')">
						评分优先 <text style="font-size: 20rpx;">▼</text>
					</view>
				</view>
				<view class="sort-member" style="position: relative;">
					<view class="sort-text" @tap="checkArea">
						区域选择 <text style="font-size: 20rpx;">▼</text>
					</view>
					<view class="sort-value" v-if="isArea">
						<view class="sort-value1"   v-for="(item,index) in shopArea" :key="index" @tap="searchShop('area',item.id)">{{item.title}}</view>
					</view>
				</view> 
			</view>
		</view>
		<view class="shop-list">
			<view class="shop-member"  v-for="(item,index) in shopList" :key="index" @tap="goDetail('shop',item)">
				<view class="shop-top">
					<view class="shop-img">
						<img :src="item.shopIcon" alt=""  @tap="goDetail('shop',item)">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png" alt="" style="width:30rpx;height:30rpx;position: absolute;top: 0;left: 0;background-size: 100%;" />
					</view>
					<view class="shop-content" @tap="goDetail('shop',item)">
						<view class="shop-name">
							{{item.shopName}}
						</view>
						<view class="shop-content-center">
							<view class="shop-rate">
								<view class="shop-rate-num">{{item.shopScore}}</view>
								<view style="padding-top: 2px;">
									<uni-rate :disabled="true" size="16" disabledColor="rgba(255, 184, 84, 1)" :value="item.shopScore" />
								</view>
								<uni-rate :disabled="true" size="16" disabledColor="rgba(255, 184, 84, 1)" :value="item.shopScore" />
							</view>
							<view class="shop-tag">
								<text style="padding: 4rpx 10rpx;background: rgba(223, 255, 176, 1);color: #777;border-radius: 6rpx;">
									{{item.shopTakeaway && item.shopTakeaway.type ? item.shopTakeaway.type : '美食'}}
								</text>
							</view>
						</view>
						<view class="shop-content-bottom">
							<view class="shop-deal">
								<text v-if = "item.subtitle != null" style="padding: 4rpx 10rpx;background: rgba(223, 255, 176, 1);color: #777;border-radius: 6rpx;">
									{{item.subtitle}}
								</text>
							</view>
							<view class="shop-deal1">
								已拼<text style="color: red;font-weight: 700;"> {{item.saleCount != null ? item.saleCount : 0}} </text>单
							</view>
						</view>
					</view>
				</view>
				<view class="shop-bottom" v-if="item.products != null && item.products.length > 0">
					<view class="menu-member" v-if='item1.delFlag == 1'  v-for="(item1,index1) in item.products" :key="index1" @tap="goDetail('product',item1)">
						<view class="menu-img">
							<img :src="item1.productPicture" alt="">
						</view>
						<view class="menu-content">
							<view class="shop-menu-name">
								{{item1.productName}}
							</view>
							<view class="shop-menu-price">
								¥{{item1.attributeListPrice | sliceMsg}}
							</view>
							<view class="shop-menu-purchase">
								拼团 <text style="color: red;">¥{{item1.productGroupBuyPrices | slicePrice}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>	
			<uni-load-more :status="loadStatus" @change="onChange" v-if="shopList.length > 0" />
		</view>
		<view style="width: 100%;height: 120rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'more',
				isArea:false,
				searchScore: false,
				searchSale: false,
				shopArea:[],
				totalPages:1,
				historyList: [],
				searchForm:{
					regionId:JSON.parse(uni.getStorageSync('area')).id,
					shopName:'',
					shopType:'',
					keyWord:'',
					shopArea:'',
					pageNumber: 1,
					pageSize: '10',
					sort: "shoprank",
					order: "desc",
					sortOrder:'shoprank',
					orderOrder:'desc',
					sortScore:'',
					orderScore:'',
					sortSale:'',
					orderSale:''
				},
				shopList:[],
				menuButtonInfo:{}
			}
		},
		filters: {
			sliceMsg(val) {
				var name = ''
				if (typeof(val) == 'string') {
					let newObj = JSON.parse(val)
					for (let as in newObj) {
						name = newObj[as].specPrice
					}
				}
				return name;
			},
			slicePrice(val){
				let begin = ''
				if(val != null){
					begin = val[0].groupPrice
					for(let i = 0;i < val.length;i++){
						if(val[i].groupPrice < begin){
							begin = val[i].groupPrice
						}
					}
				}
				return begin;
			}
		},
		onReachBottom() {
			if (this.searchForm.pageNumber >= this.totalPages) return;
			// this.status = 'loading';
			this.searchForm.pageNumber ++;
			this.getShopList();
		
		},
		onLoad(option) {
			if (option && option.shopType && option.shopType !== 'undefined') {
				this.searchForm.shopType = option.shopType;
				this.getShopList();
			}
			let history = uni.getStorageSync('searchHistoryGroup');
			if (history) {
				this.historyList = JSON.parse(history);
			}
			this.getShopArea();
			//this.getShopList();
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			goSearch() {
				if (this.searchForm.keyWord && this.searchForm.keyWord.trim()) {
					let list = this.historyList;
					let index = list.indexOf(this.searchForm.keyWord.trim());
					if (index !== -1) list.splice(index, 1);
					list.unshift(this.searchForm.keyWord.trim());
					if (list.length > 10) list.pop();
					this.historyList = list;
					uni.setStorageSync('searchHistoryGroup', JSON.stringify(list));
				}
				this.searchForm.pageNumber = 1;
				this.getShopList();
			},
			clickHistory(item) {
				this.searchForm.keyWord = item;
				this.goSearch();
				this.$forceUpdate()
			},
			clearHistory() {
				uni.showModal({
					title: '提示',
					content: '确定清空历史搜索吗？',
					success: (res) => {
						if (res.confirm) {
							this.historyList = [];
							uni.setStorageSync('searchHistoryGroup', '[]');
						}
					}
				});
			},
			searchShop(type,value){
				this.searchForm.pageNumber = 1
				if(type == 'area'){
					this.searchForm.shopArea = value
				}else if(type == 'score'){
					this.searchScore = !this.searchScore
					this.searchSale = false
					this.searchForm.sort = 'shopScore'
				}else if(type == 'sale'){
					this.searchSale = !this.searchSale
					this.searchScore = false
					this.searchForm.sort = 'saleCount'
				}else if(type == 'all'){
					this.searchForm.sortOrder = 'shoprank'
					this.searchForm.orderOrder = 'desc'
					this.searchForm.shopArea = ''
					this.searchForm.sort = 'shoprank'
					this.searchScore = false
					this.searchScore = false
					this.searchSale = false 
				}else if(type == 'typeUp'){
					//TODO跳转新页面
				}
				this.getShopList();
			},
			getShopArea(){
				let that = this
				that.tui.request("/app/shopArea/getByParentId/"+JSON.parse(uni.getStorageSync('area')).id, "GET", {}, false, true).then((res) => {
					if (res.code == 200) {
						if(res.result != null){
							for(let m = 0;m<res.result.length;m++){
								if(res.result[m].isCanteen == 1){
									that.shopArea.push(res.result[m])
								}
							}
							console.log(that.shopArea)
						}
					} else {
						that.tui.toast(res.message)
						return
					}
				}).catch((res) => {})
			},
			getShopList(){
				this.loadStatus = 'loading'
				if(this.searchSale){
					this.searchForm.sortSale = 'saleCount'
					this.searchForm.orderSale = 'desc'
					this.searchForm.sortOrder = ''
				}else{
					this.searchForm.sortSale = ''
				}
				if(this.searchScore){
					this.searchForm.sortScore = 'shopScore'
					this.searchForm.orderScore = 'desc'
					this.searchForm.sortOrder = ''
				}else{
					this.searchForm.sortScore = ''
				}
				let that = this
				that.tui.request("/app/shop/getByCondition", "GET", this.searchForm, false, true).then((res) => {
					that.loadStatus = 'nomore';
					if (res.code == 200) {
						if (that.searchForm.pageNumber == 1) {
							that.shopList = res.result.content
						} else {
							that.shopList = [...that.shopList, ...res.result.content]
						}
						that.totalPages = res.result.totalPages
						that.isArea = false
						that.$forceUpdate()
					} else {
						that.tui.toast(res.message)
						return
					}
					uni.hideLoading()
				}).catch((res) => {})
			},
			goDetail(type,item){
				if(type == 'shop'){
					uni.navigateTo({
						url:'/package1/group/groupBuySingle?type=shop&item=' + JSON.stringify(item)
					})
				}else if(type == 'search'){
					uni.navigateTo({
						url:'/package1/group/groupBuySingle'
					})
				}else{
					uni.navigateTo({
						url:'/package1/group/groupBuySingle?type=product&item=' + JSON.stringify(item)
					})
				}
			},
			back(){
				uni.navigateBack()
			},
			checkArea(){
				this.isArea = !this.isArea
			}
		}
		
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}
	
	.page1 {
		width: 100%;
		min-height: 100vh;
		font-size: 24rpx;
		position: relative;
	}
	.title{
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: auto;
		padding-bottom: 20rpx;
	}
	.title-sreach{
		width: 75%;
		display: flex;
		height: 200rpx;
	}
	.back-btn{
		padding-top: 55px;
	}
	.title-name{
		padding-top: 55px;
		font-size: 36rpx;
		font-weight: 700;
	}
	.title-search{
		margin-top: 55px;
		display: flex;
		background: #fff;
		height: 54rpx;
		margin-left: 20rpx;
		border-radius: 54rpx;
		width: 370rpx;
		input{
			height: 54rpx;
			line-height: 54rpx;
		}
	}
	.title-sort{
		height: 60rpx;
		display: flex;
		margin-top: 20rpx;
	}
	.sort-member{
		line-height: 60rpx;
		text-align: center;
		background: #fff;
		width: 20%;
		margin-left: 4%;
		border-radius: 10rpx;
	}
	.sort-value{
		width: 160rpx;
		height: auto;
		max-height: 300rpx;
		overflow: scroll;
		background: rgba(0, 0, 0, 0.7);
		position: absolute;
		top: 80rpx;
		right: 0;
		border-radius: 20rpx;
		color: #fff;
		font-size: 22rpx;
	}
	.sort-value1{
		border-bottom: 1rpx solid #eee;
	}
	.shop-list{
		width: 95%;
		height: auto;
		margin: 0 auto;
	}
	.shop-member{
		width: 100%;
		height: auto;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}
	.shop-img{
		width: 160rpx;
		height: 160rpx;
		position: relative;
		img{
			width: 100%;
			background-size: 100%;
			height: 100%;
		}
	}
	.shop-top{
		padding: 20rpx;
		display: flex;
	}
	.shop-content{
		flex: 1;
		padding-left: 20rpx;
	}
	.shop-name{
		font-size: 32rpx;
		font-weight: 900;
	}
	.shop-content-center{
		display: flex;
		margin: 20rpx 0;
	}
	.shop-rate{
		background: rgba(249, 212, 157, 0.34);
		height: 40rpx;
		display: flex;
		border-radius: 20rpx;
		padding: 0 5px 0 0;
	}
	.shop-rate-num{
		width: 50rpx;
		height: 100%;
		text-align: center;
		background: linear-gradient(90deg, rgba(255, 77, 0, 1), rgba(255, 184, 84, 1));
		color: #fff;
		line-height: 40rpx;
		font-size: 22rpx;
		border-bottom-left-radius: 20rpx;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}
	.shop-tag{
		flex: 1;
		line-height: 40rpx;
		text-align: right;
	}
	.shop-content-bottom{
		display: flex;
	}
	.shop-deal{
		flex:1;
	}
	.shop-bottom{
		border-top: 2rpx solid #eee;
		width: 100%;
		overflow-x: scroll;
		display: flex;
		height: 280rpx;
		overflow-y: hidden;
	}
	.menu-member{
		width: 140rpx;
		height: 100%;
		margin: 10rpx 0 0 20rpx;
	}
	.menu-img{
		height: 140rpx;
		width: 140rpx;
		img{
			width: 100%;
			height: 100%;
			background-size: 100%;
		}
	}
	.menu-content{
		font-size: 22rpx;
	}
	.shop-menu-name{
		margin-top: 10rpx;
		font-weight: 700;
	}
	.shop-menu-price{
		margin-top: 6rpx;
		font-weight: 700;
	}
	.shop-menu-purchase{
		display: flex;
		background: rgba(255, 57, 57, 0.1);
		height: 36rpx;
		line-height: 36rpx;
		padding: 0 0 0 4rpx;
		border-radius: 8rpx;
		font-weight: 700;
		margin-top: 10rpx;
		color: #777;
	}
</style>