school_uni/package1/group/groupBuyList.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'}" @tap="goDetail('search')">
					<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons>
					<input type="text" placeholder="搜索" disabled />
				</view>
			</view>
			<view class="title-tab">
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item>
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1d1edcc3e39c4a7cafeb64cf3209ed5e.png" alt="" />
					</swiper-item>
				</swiper>
			</view>
			<view class="menu-box">
				<view class="menu-list" v-for="(item,index) in menuBtn" :key="index" @tap="goDetail('search',item)">
					<img :src="item.url" alt="" />
					<view class="menu-name">{{item.name}}</view>
				</view>
			</view>
			<view class="menu-box">
				<view class="menu-list" v-for="(item,index) in menuBtn1" :key="index" @tap="goDetail('search',item)">
					<img :src="item.url" alt="" />
					<view class="menu-name">{{item.name}}</view>
				</view>
			</view>
			<view class="title-sort">
				<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>
							</view>
							<view class="shop-tag">
								<text style="padding: 4rpx 10rpx;background: rgba(223, 255, 176, 1);color: #777;border-radius: 6rpx;">
									{{item.shopTypeTitle == undefined ? '美食' : item.shopTypeTitle}}
								</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.isPush == 1 && 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" />
		</view>
		<view class="zaixian">
			当前2000名配送员在线
		</view>
		<view style="width: 100%;height: 120rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'more',
				isArea:false,
				indicatorDots: false,
				autoplay: true,
				interval: 4000,
				duration: 1000,
				searchScore: false,
				searchSale: false,
				shopArea:[],
				totalPages:1,
				searchForm:{
					regionId:JSON.parse(uni.getStorageSync('area')).id,
					shopType:'',
					shopArea:'',
					pageNumber: 1,
					keyWord:'',
					pageSize: '10',
					sort: "shoprank",
					order: "desc",
					sortOrder:'shoprank',
					orderOrder:'desc',
					sortScore:'',
					orderScore:'',
					sortSale:'',
					orderSale:''
				},
				shopList:[],
				menuBtn:[{
					name:'美食',
					value:'',
					url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/d6b53eb217644e74bbf957ff7462c27b.png',
					index:1
				},{
					name:'甜点饮品',
					value:'',
					url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/b43aea98962b402f900eca84b2c171ae.png',
					index:2
				},{
					name:'超市便利',
					value:'',
					url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/e082a4c10b9a47f0bdb588fb91bc9afb.png',
					index:3
				},{
					name:'蔬菜水果',
					value:'',
					url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/e6adc80518c24c488522ab19f036af27.png',
					index:4
				},{
					name:'看病买药',
					value:'',
					url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/766761af471a4f9f90e9a137f9c4f701.png',
					index:5
				}],
				menuBtn1:[{
					name:'米粉面馆',
					value:'',
					url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/8d2f7ffb67a4477ebe663f562b3bd018.png',
					index:6
				},{
					name:'早点',
					value:'',
					url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/5e4fa14df92942eeb62254c8eb82f122.png',
					index:7
				},{
					name:'快餐',
					value:'',
					url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/05d2286ac1be4ae784858409889690d5.png',
					index:8
				},{
					name:'麻辣烫冒菜',
					value:'',
					url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/0ac5e0095a5d4097b338ec450df8d3dd.png',
					index:9
				},{
					name:'汉堡披萨',
					value:'',
					url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/14b93d4bce134b3db4b42b13b6993e6c.png',
					index:10
				}],
				menuButtonInfo:{}
			}
		},
		components: {
			
		},
		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() {
			this.getEatType();
			this.getShopArea();
			this.getShopList();
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// uni.showLoading({
			// 	title: '加载中...',
			// 	mask: true
			// })
		},
		methods: {
			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();
			},
			getEatType(){
				let that = this
				that.tui.request("/dictData/getByCondition", "GET", {
					sort:'sortOrder',
					order:'asc',
					dictId:'1712359407444168704'
				}, false, true).then((res) => {
					if (res.code == 200) {
						for(let i = 0;i<res.result.content.length;i++){
							for(let m = 0;m<this.menuBtn.length;m++){
								if(this.menuBtn[m].name == res.result.content[i].title){
									this.menuBtn[m].value = res.result.content[i].value
								}
							}
							for(let m = 0;m<this.menuBtn1.length;m++){
								if(this.menuBtn1[m].name == res.result.content[i].title){
									this.menuBtn1[m].value = res.result.content[i].value
								}
							}
						}
					} else {
						that.tui.toast(res.message)
						return
					}
				}).catch((res) => {})
			},
			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)
							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'){
					if(item){
						console.log("11111",item)
						uni.navigateTo({
							url:'/package1/group/searchGroup?shopType=' + (item.value || '')
						})
					}else{
						uni.navigateTo({
							url:'/package1/group/searchGroup'
						})
					}
				}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;
	}
	.swiper {
		width: 100%;
		height: 500rpx;
		z-index: 99 !important;
	}
	
	.swiper img {
		width: 100%;
		height: 100%;
		z-index: 99 !important;
	}
	.menu-box {
		width: 100%;
		height: 160rpx;
		display: flex;
		margin-top: 30rpx;
	}
	
	.menu-list {
		flex: 1;
	}
	
	.menu-list img {
		width: 70%;
		height: 70%;
		display: block;
		margin: 0 auto;
	}
	
	.menu-name {
		text-align: center;
		font-size: 24rpx;
		font-weight: 700;
		margin-top: 15rpx;
	}
	.title-tab{
		width: 95%;
		margin: 0 auto;
		height: 210rpx;
	}
	.swiper{
		width: 100%;
		height: 210rpx;
	}
	.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: 380rpx;
		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;
	}
	.zaixian{
		position: fixed;
		bottom: 40rpx;
		left: 10%;
		width: 80%;
		height: 76rpx;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		border-radius: 76rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 76rpx;
		font-weight: bold;
	}
</style>