discounts-minapp/pages/index/index.vue

<template>
	<view class="home">
		<zs-skeleton :loading="loading"></zs-skeleton>

		<zs-banner :city="city" :background="background" position @search="handleSearch"></zs-banner>

		<view class="login-home">
			<!-- 登录显示的套餐列表 -->
			<view class="discount-list">
				<view class="discount-item" v-for="(item,index) in discountsList" :key="index" @click="goDetail(item.domainUrl,item.id,item.secondaryImg,item.menuName)">
					<image class="icon" :src="item.imgUrl" mode=""></image>
					<view class="title">{{item.menuName}}</view>
					<view class="tag" v-if="item.labelAbove">
						{{item.labelAbove}}
					</view>
					<view class="desc">
						{{item.labelBelow || ''}}
					</view>
				</view>
			</view>
			
			<view class="swiper-box">
				<view class="progress">
					{{current+1+'/'+advList.length}}
				</view>
				<swiper class="swiper" @change="swiperChange" :current="current" :indicator-dots="false" circular :autoplay="true"
					:interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in advList" :key="item.id"  @click="jump(item.jumpUrl)">
						<image class="swiper-item" mode="" :src="item.advertsImg">
						</image>
					</swiper-item>
						
				</swiper>
			</view>


			<!-- 广告位 -->
<!-- 			<view class="advertise-box">
				<view class="item" v-for="item in advList" :key="item.id">
					<zs-img
						:src="item.advertsImg"
						width="335rpx" height="188rpx" radius="full" mode=""></zs-img>
				</view>
			</view> -->

			<view class="content">

				<!-- 列表 -->
				<zs-list class="store-box" mt="0" @load="loadMore" :status="status">
					<view class="left">
						<!-- 广告banner -->
					<!-- 	<swiper class="adv-swiper" v-if="advList1.length" indicator-active-color="#fff" indicator-color="rgba(255, 255, 255, .46)" :indicator-dots="advList1.length>1" circular  autoplay>
						
							<swiper-item v-for="item in advList1" :key="item" @click="jump(item.jumpUrl)">
								<image class="adv-item"
									:src="item.advertsImg"
									mode=""></image>
							</swiper-item>
						</swiper> -->

						
						<view class="store-item" v-for="(item,index) in list" :key="index" @click="goGoodsDetail(item)">
							<template v-if="item.isAdv">
								<image class="ad" :src="item.advertsImg" mode="widthFix"></image>
							</template>
							<template v-else>
								<zs-img :src="item.goodsVos[0].goodsImg" width="340rpx" height="340rpx" mode="widthFix"></zs-img>
								<view class="info">
									<view class="title">
										{{item.goodsVos[0].goodsName}}
									</view>
									<view class="desc">
										{{item.goodsVos[0].goodsDescribe}}
									</view>
									<view class="price-box">
										<view class="left">
											<view class="unit">
												￥
											</view>
											<view class="price">
											{{item.goodsVos[0].realPrice}}
											</view>
										</view>
										
										<view class="right">
											销量{{item.goodsVos[0].saleNum}}
										</view>
									</view>
								</view>
							</template>
							
						</view>
					</view>
					<view class="right">
						
						<view class="store-item" v-for="(item,index) in list1" :key="index" @click="goGoodsDetail(item)">
							<template v-if="item.isAdv">
								<image class="ad" :src="item.advertsImg" mode="widthFix"></image>
							</template>
							<template v-else>
								<zs-img :src="item.goodsVos[0].goodsImg" width="340rpx" height="340rpx" mode="widthFix"></zs-img>
								<view class="info">
									<view class="title">
										{{item.goodsVos[0].goodsName}}
									</view>
									<view class="desc">
										{{item.goodsVos[0].goodsDescribe}}
									</view>
									<view class="price-box">
										<view class="left">
											<view class="unit">
												￥
											</view>
											<view class="price">
											{{item.goodsVos[0].realPrice}}
											</view>
										</view>
										
										<view class="right">
											销量{{item.goodsVos[0].saleNum}}
										</view>
									</view>
								</view>
							</template>
						</view>
					</view>

				</zs-list>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getUserDetail,
		getMenu,
		getAdv
	} from '@/api/common.js'
	import { search } from '@/api/shop.js';
	// 腾讯地图
	var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
	var qqmapsdk = new QQMapWX({key:'KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF'});
	export default {
		data() {
			return {
				background:false,
				loading: false,
				userId: '',
				city:'定位中',
				status: 'more',
				current:0,
				bannerList:['https://alipic.lanhuapp.com/XDSlicePNGMAX2f4cb415a269b2e935c7a97da9077db4d78ddb8306ac44ec1e10274387048a22.png',
				'https://alipic.lanhuapp.com/XDSlicePNGMAX2f4cb415a269b2e935c7a97da9077db4d78ddb8306ac44ec1e10274387048a22.png'],
				discountsList: [],//菜单
				advList:[],
				advList1:[],
				list: [],
				list1: [],
				query:{
					queryName:'',
					'location.lat':0,
					'location.lon':0,
					pageCurrent:1,
					pageSize:10
				},
				
			}
		},
		
		methods: {
			// swiper变动
			swiperChange(val) {
				this.current = val.target.current
			},
			jump(url){
				uni.reLaunch({
					url
				})
			},
			// 点击搜索
			handleSearch(){
				if(!uni.getStorageSync('token')){
					return uni.showModal({
						title:'请登录',
						confirmText:'去登录',
						success(res){
							console.log(res);
							if(res.confirm){
								uni.navigateTo({
									url:'/login/login/login?redirect=/pages/index/index'
								})
							}
						}
					})
				}
				uni.reLaunch({
					url:'./search'
				})
				// if(!val) return
				// this.query.queryName = val
				// this.query.pageCurrent = 1
				// this.list = []
				// this.list1 = []
				// this.status = 'more'
				// this.search()
			},
			// 获取当前城市
			getCity(){
				let that = this
				return new Promise((resolve,reject)=>{
					uni.getLocation({
							type: 'gcj02',
							success: (res) => {
								// 解析地址
								that.query['location.lat'] = res.latitude
								that.query['location.lon'] = res.longitude
								// 存储经纬度
								uni.setStorageSync('location',JSON.stringify({latitude:res.latitude,longitude:res.longitude}))
								qqmapsdk.reverseGeocoder({
									location: {
										latitude: res.latitude,
										longitude: res.longitude
									},
									success: function(res) {
										// 市
										that.city = res.result.address_component.city
										console.log(9999,that.city,res);
										if(uni.setStorageSync('districtList')&&uni.getStorageSync('city')==that.city) return
										uni.setStorageSync('city',res.result.address_component.city)
										// 获取市区的行政区
										qqmapsdk.getDistrictByCityId({
										  // 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
										  id: res.result.ad_info.city_code.substr(3), //对应接口getCityList返回数据的Id，如：北京是'110000'
										  success: function(res) {//成功后的回调
										    console.log('对应城市ID下的区县数据：', res.result[0]);
											let data = res.result[0]
											data.map(item=>{
												item.label = item.fullname
											})
											uni.setStorageSync('districtList',JSON.stringify(data))
										  },
										  fail: function(error) {
										    console.error(error);
										  },
										  complete: function(res) {
										    console.log(res);
										  }
										});
										resolve()
									},
									fail: function(res) {
										that.city = '定位失败'
									},
								})
								  
								
							},
							fail: () => {
								console.log("获取经纬度失败");
							},
						})
				})
			},

			// 跳转优惠详情
			goDetail(url,id,banner,title) {
				uni.navigateTo({
					url: `${url}?id=${id}&title=${title}`,
					success(res) {
						res.eventChannel.emit('banner', banner)
					}
				})
			},
			goGoodsDetail(item) {
				uni.setStorageSync('shopInfo', JSON.stringify(item))
				uni.reLaunch({
					url: `../../detail/goodsDetail/index?id=${item.goodsVos[0].goodsId}`
				})
			},

			// 更多套餐
			handleMore() {
				uni.reLaunch({
					// url:'../../login/login/login'
					url: '../../combo/combo/combo'
				})
			},

			// 获取用户详情
			getUserDetail() {
				getUserDetail().then(res => {
					uni.setStorageSync('userInfo', JSON.stringify(res.content))
				})
			},
			loadMore() {
				if(this.query['location.lat']&&this.query['location.lon']){
					this.search()
				}
			},
			search() {
				if(this.status == 'noMore') return
				this.status = 'loading'
				search(this.query).then(res=>{
					if(res.state == 'Success'){
						this.loading = false
						let list = []
						let list1 = []
						let data = res.content.records
						data.map((item,index)=>{
							if(index%2 == 0){
								list.push(item)
							}else{
								list1.push(item)
							}
						})
						this.list = this.list.concat(list)
						this.list1 = this.list1.concat(list1)
						if(this.query.pageCurrent == res.content.pages){
							this.status = 'noMore'
						}else{
							this.status = 'more'
							this.query.pageCurrent++
						}
						if(!this.advList1.length){
							this.getGoodsAdv().then(()=>{
								this.advList1.map(item=>{
									if(item.showSort<= (this.list.length + this.list1.length)){
										if((item.showSort-1)%2 == 0){
											this.list.splice(Math.ceil(item.showSort/2)-1,0,{isAdv:true,...item})
										}else{
											this.list1.splice(Math.ceil(item.showSort/2)-1,0,{isAdv:true,...item})
										}
									}
								})
							}
						  )
						}else{
							this.advList1.map(item=>{
								if(item.showSort<= (this.list.length + this.list1.length)){
									if((item.showSort-1)%2 == 0){
										this.list.splice(Math.ceil(item.showSort/2)-1,0,{isAdv:true,...item})
									}else{
										this.list1.splice(Math.ceil(item.showSort/2)-1,0,{isAdv:true,...item})
									}
								}
							})
						}
						// 获取商品里面的广告
						// getAdv({currentPage:1,pageSize:99,advertsType:2,status:1}).then(res1=>{
						// 	if(res.state == 'Success'){
						// 		res1.content.records.map(item=>{
						// 			data.splice(item.showSort-1,0,{isAdv:true,...item})
						// 		})
						// 		console.log(data);
						// 		data.map((item,index)=>{
						// 			if(index%2){
						// 				list.push(item)
						// 			}else{
						// 				list1.push(item)
						// 			}
						// 		})
						// 		this.list = this.list.concat(list)
						// 		this.list1 = this.list1.concat(list1)
						// 		// let total = this.list.length+this.list1.length
						// 		// if(total>=res.content.total){
						// 		if(this.query.pageCurrent == res.content.pages){
						// 			this.status = 'noMore'
						// 		}else{
						// 			this.status = 'more'
						// 			this.query.pageCurrent++
						// 		}
						// 	}
						// })
						
						
					}
				})
			},
			// 金刚区
			getMenu(){
				return new Promise((resolve,reject)=>{
					getMenu({currentPage:1,pageSize:10,status:2}).then(res=>{
						if(res.state == 'Success'){
							this.discountsList = res.content.records
							resolve(1)
						}
					})
				})
			},
			// 广告位
			getAdv(){
				return new Promise((resolve,reject)=>{
					getAdv({currentPage:1,pageSize:99,advertsType:1,status:1}).then(res=>{
						if(res.state == 'Success'){
							this.advList = res.content.records
							// this.advList = res.content.records.filter((item,index)=>index<2)
							// this.advList1 = res.content.records.filter((item,index)=>index>=2)
							resolve(2)
						}
					})
				})
			},
			// 获取商品列表内广告位
			getGoodsAdv(){
				return new Promise((resolve,reject)=>{
					getAdv({currentPage:1,pageSize:99,advertsType:2,status:1}).then(res=>{
						if(res.state == 'Success'){
							this.advList1 = res.content.records
							resolve(2)
						}
					})
				})
			},
		},
		onPageScroll(e) {
				if(e.scrollTop >= 50){
					this.background = true
				}else{
					this.background = false
				}
		},
		onShow() {
			if (uni.getStorageSync('token')&&!uni.getStorageSync('userInfo')) {
				this.getUserDetail()
			}
		},
		onHide() {},
		onLoad(query){
			
			 uni.setStorageSync('inviteCode',decodeURIComponent(query.scene))
		},
		created() {
			this.loading = true
			Promise.all([this.getMenu(),this.getAdv(),this.getCity()]).then(res=>{
				this.search()
			})
			
		}
	}
</script>

<style lang="scss">
	.home {
		// padding-bottom:120rpx;
		// background: linear-gradient(180deg, #FFFFFF 0%, #DCE8FF 100%);
		background: #F9F9F9;

		.card-title {
			display: flex;
			justify-content: center;

			.title {
				font-size: 32rpx;
				text-align: center;
				color: #fff;
				width: 210rpx;
				line-height: 64rpx;
				background: linear-gradient(360deg, #3074F8 0%, #568FFF 100%);
				border-radius: 0rpx 0rpx 24rpx 24rpx;
			}

		}

		.login-home {
			// background: linear-gradient(178deg, #FFFFFF 0%, #F9F9F9 100%);
			// background: #FFF;

			.discount-list {
				display: flex;
				flex-wrap: wrap;
				// padding: 30rpx 0;
				margin: 0 24rpx 20rpx;
				// background: #fff;
				border-radius: 16rpx;
				position: relative;
				top: 20rpx;
				padding-top: 20rpx;
				.discount-item {
					width: 20%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					position: relative;

					.icon {
						width: 80rpx;
						height: 80rpx;
					}

					.title {
						font-size: 24rpx;
						margin-top: 10rpx;
						font-weight: 300;
						color: #222222;
					}

					.tag {
						position: absolute;
						top: -20rpx;
						left: 50%;
						background: #FF0615;
						box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255, 255, 255, 0.16);
						border-radius: 12rpx 14rpx 14rpx 0rpx;
						color: #fff;
						white-space: nowrap;
						font-size: 18rpx;
						line-height: -14rpx;
						height: 24rpx;
						padding: 0 10rpx;
						// width: fit-content;
						background-size: 100% 34rpx;
					}

					.desc {
						color: #FF0817;
						font-size: 16rpx;
						text-align: center;
						margin-top: 4rpx;
					}
				}
			}

			.title-img {
				width: 686rpx;
				height: 166rpx;
				margin: 24rpx 32rpx;
			}
			.swiper-box{
				position: relative;
				margin: 0 24rpx 20rpx;
				padding-top: 20rpx;
				width: 702rpx;
				height: 284rpx;
				border-radius: 16rpx;
				.progress{
					position: absolute;
					top: 38rpx;
					right: 20rpx;
					z-index: 2;
					color: #FFFFFF;
					font-size: 16rpx;
					background: rgba(255, 255, 255, 0.3);
					padding: 2rpx 10rpx;
					border-radius: 14rpx;
				}
				.swiper {
					position: relative;
					height: 100%;
					.swiper-item {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
						object-fit: cover;
					}
				}
			}

			.advertise-box {
				display: flex;
				justify-content: space-between;
				margin: 0 24rpx;
				padding: 20rpx 0;
				
			}

			.content {
				border-radius: 16rpx 16rpx 0 0;
			}


			.zs-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 0 24rpx;

				.left {
					.adv-swiper{
						width: 340rpx;
						height: 444rpx;
						margin-bottom: 25rpx;
						.adv-item{
							width: 340rpx;
							height: 444rpx;
						}
					}
				}
					.ad{
						width: 340rpx;
						border-radius: 16rpx;
					}

				.store-item {
					width: 340rpx;
					margin-bottom: 20rpx;
					// box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);
					border-radius: 16rpx;
					background: #fff;

					.icon {
						width: 100%;
						height: 300rpx;
						border-radius: 16rpx 16rpx 0 0;
					}

					.info{
						flex: 1;
						padding: 16rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						position: relative;
						.title{
							font-size: 28rpx;
							font-weight: bold;
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							margin-top: 10rpx;
						}
						
						.desc{
							font-size: 24rpx;
							color: #AAAAAA;
							overflow: hidden;
							text-overflow: ellipsis;
							/* 弹性伸缩盒子模型显示 */
							display: -webkit-box;
							/* 限制在一个块元素显示的文本的行数 */
							-webkit-line-clamp: 2;
							/* 设置或检索伸缩盒对象的子元素的排列方式 */
							-webkit-box-orient: vertical;
							margin-top: 12rpx;
						}
						
						.price-box{
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 12rpx;
							.left{
								display: flex;
								align-items: flex-end;
								.unit{
									font-size: 20rpx;
									color: #FF4D3A;
									font-weight: bold;
								}
								.price{
									font-size: 32rpx;
									color: #FF4D3A;
									font-weight: bold;
								}
							}
							.right{
								font-size: 24rpx;
								color: #AAAAAA;
							}
						}
						
					}
				}
			}
		}

	}
</style>