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.linkUrl,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="goShopDetail(item)">
							<zs-img :src="item.logoPath" width="340rpx" height="340rpx" mode="widthFix"></zs-img>
							<view class="info">
								<view class="title">
									{{item.shopVo.shopName}}
								</view>
								<view class="address">

									<image class="position" src="../../static/position.png" mode=""></image>
									{{(item.shopVo.distance/1000).toFixed(2)}}km
								</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="store-item" v-for="(item,index) in list1" :key="index" @click="goShopDetail(item)">
							<zs-img :src="item.logoPath" width="340rpx" height="340rpx" mode="widthFix"></zs-img>
							<view class="info">
								<view class="title">
									{{item.shopVo.shopName}}
								</view>
								<view class="address">
									<image class="position" src="../../static/position.png" mode=""></image>
									{{(item.shopVo.distance/1000).toFixed(2)}}km
								</view>
							</view>
						</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);
										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)
					}
				})
			},
			goShopDetail(item) {
				uni.setStorageSync('shopInfo', JSON.stringify(item))
				uni.reLaunch({
					url: `../../detail/shopDetail/shopDetail`
				})
			},

			// 更多套餐
			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 = []
						res.content.records.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){
							this.status = 'noMore'
						}else{
							this.status = 'more'
							this.query.pageCurrent++
						}
						
					}
				})
			},
			// 金刚区
			getMenu(){
				return new Promise((resolve,reject)=>{
					getMenu({currentPage:1,pageSize:10}).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}).then(res=>{
						if(res.state == 'Success'){
							this.advList = res.content.records.filter((item,index)=>index<2)
							this.advList1 = res.content.records.filter((item,index)=>index>=2)
							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%);



		.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: 56rpx;
						height: 56rpx;
					}

					.title {
						font-size: 26rpx;
						margin-top: 10rpx;
					}

					.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;
						}
					}
				}

				.right {

				}

				.store-item {
					width: 340rpx;
					margin-bottom: 25rpx;
					// 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 {
						padding: 20rpx;
						background: #fff;
						border-radius: 0 0 16rpx 16rpx;
						position: relative;

						
						.title {
							font-weight: bold;
							width: 100%;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.tags {
							display: flex;
							align-items: center;

							.tag-item {
								line-height: 50rpx;
								border-radius: 8rpx;
								padding: 6rpx 0;
								font-size: 24rpx;
								margin-left: 10rpx;
								display: flex;

								.label {
									background: #FFF;
									color: #FE5B47;
									padding: 0 10rpx;
									border-radius: 8rpx 0 0 8rpx;
								}

								.value {
									color: #FFF;
									background: rgba(255, 255, 255, .2);
									padding: 0 14rpx;
									border-radius: 0 8rpx 8rpx 0;
								}
							}
						}

						.address {
							display: flex;
							align-items: center;
							margin-top: 15rpx;
							color: #999;

							.position {
								width: 25rpx;
								height: 29rpx;
								margin-right: 8rpx;
							}
						}
					}
				}
			}
		}

	}
</style>