discounts-minapp/pages/index/index.vue

<template>
	<view>
		<zs-skeleton type="index" :loading="loading"></zs-skeleton>
		<view class="navBarBox">
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<view class="navBar">
				<view>印象贵大文创</view>
				<image class="logo"  mode="scaleToFill"></image>
			</view>
		</view>
		<view class="content">
			<view class="search-box">
				<zs-search style="margin-top: 10px" :showBtn="false" :showPrefix="false" placeholder="请输入商品名称"
					height="80" bgColor="#F6F6F6"></zs-search>
			</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="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.columnImg" mode=""></image>
					<view class="title">{{ item.columnName }}</view>
				</view>
			</view>

			<view class="swiper-box" style="height: 160rpx">
				<swiper class="swiper" @change="swiperChange" :indicator-dots="false" circular :autoplay="false"
					:interval="3000" :duration="1000">
					<swiper-item v-for="(item, index) in advList1" :key="item.id" @click="jump(item.jumpUrl)">
						<image class="swiper-item" mode="" :src="item.advertsImg"> </image>
					</swiper-item>
				</swiper>
			</view>

			<view class="sub-title">
				<view>精选推荐</view>
			</view>

			<view class="goods-list">
				<zs-list class="store-box" mt="0" @load="loadMore" :status="status">
					<view class="left">
						<view class="store-item" v-for="(item, index) in list" :key="index" @click="goShopDetail(item)">
							<zs-img :src="item.goodsImg" width="340rpx" height="340rpx" mode="widthFix"></zs-img>
							<view class="info">
								<view class="title">
									{{ item.goodsName }}
								</view>
								<view class="goods-price">
									<view> ￥{{ item.realPrice }} </view>
									<view class="distance">
										销售{{ (item.saleNum).toFixed(2) }}
									</view>
								</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.goodsImg" width="340rpx" height="340rpx" mode="widthFix"></zs-img>
							<view class="info">
								<view class="title">
									{{ item.goodsName }}
								</view>
								<view class="goods-price">
									<!-- <image
                  class="position"
                  src="../../static/position.png"
                  mode=""
                ></image> -->
									<view> ￥{{ item.realPrice }}</view>
									<view class="distance">
										销售{{ (item.saleNum).toFixed(2) }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</zs-list>
			</view>

			<zs-tab-bar :value="0"></zs-tab-bar>
		</view>
	</view>
</template>

<script>
	import {
		getUserDetail,
		getAdv
	} from "@/api/common.js";
	import {
		appSearch
	} from "@/api/shop.js";
	import {searchMenu} from "@/api/study.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 {
				advList: [],
				advList1: [],
				discountsList: [], //菜单
				current: 0,
				loading: false,
				navBarHeight: 0,
				statusBarHeight: 0,
				list: [],
				list1: [],
				status: "more",
				query: {
					currentPage: 1,
					pageSize: 10,
					shopId: "",
					status:3
				},
			};
		},
		onLoad() {},
		created() {
			this.loading = true;
			this.navBarHeight = this.$navHight(1);
			this.navBarHeight = this.navBarHeight + 10 + "px";
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			Promise.all([this.getSearchMenu(), this.getAdv(), this.getCity(),this.getBanner()]).then((res) => {
				this.appSearch();
			});
			this.query.shopId = uni.getStorageSync("gdShopId");
		},
		methods: {
			// swiper变动
			swiperChange(val) {
				this.current = val.target.current;
			},
			// Banner
			getBanner(){
				return new Promise((resolve, reject) => {
					getAdv({
						currentPage: 1,
						pageSize: 99,
						advertsType: 1
					}).then((res) => {
						if (res.state == "Success") {
							this.advList = res.content.records
							this.loading = false;
							resolve(2);
						}
					});
				});
			},
			// 广告位
			getAdv() {
				return new Promise((resolve, reject) => {
					getAdv({
						currentPage: 1,
						pageSize: 99,
						advertsType: 2
					}).then((res) => {
						if (res.state == "Success") {
							this.advList1 = res.content.records
							this.loading = false;
							resolve(2);
						}
					});
				});
			},
			// 金刚区
			getSearchMenu() {
				return new Promise((resolve, reject) => {
					searchMenu({
						currentPage: 1,
						pageSize: 4,
						belongType:1,
						status:1
					}).then((res) => {
						if (res.state == "Success") {
							this.discountsList = res.content.records;
							resolve(1);
						}
					});
				});
			},
			// 跳转优惠详情
			goDetail(url, id, banner, title) {
				url = "/pages/home/detail";
				uni.navigateTo({
					url: `${url}`,
					success(res) {
						// res.eventChannel.emit("banner", banner);
					},
				});
			},
			appSearch() {
				if (this.status == "noMore") return;
				this.status = "loading";
				appSearch(this.query).then((res) => {
					if (res.state == "Success") {
						this.loading = false;
						let list = [];
						let list1 = [];
						res.content.records.map((item, index) => {
							if (index % 2) {
								list1.push(item);
							} else {
								list.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.currentPage++;
						}
					}
				});
			},
			loadMore() {
				console.log("loadMore");
				if (this.query["location.lat"] && this.query["location.lon"]) {
					this.appSearch();
				}
			},
			// 获取当前城市
			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;
									resolve();
								},
								fail: function(res) {
									that.city = "定位失败";
								},
							});
						},
						fail: (res) => {
							console.log("获取经纬度失败");
						},
					});
				});
			},
		},
	};
</script>

<style lang="scss">
	.navBarBox .navBar .logo {
		width: 0rpx;
		height: 82rpx;
		// margin-right: 10rpx;
	}

	.navBarBox .navBar {
		font-size: 35rpx;
		font-weight: bold;
		padding: 3rpx 50rpx;
		padding-bottom: 8rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.content {
		// padding-top: 24%;
		display: flex;
		flex-direction: column;
		background-color: #fafafa;
		justify-content: center;
	}

	page {
		background-color: #fafafa;
	}

	.search-box {
		width: 100vw;
	}

	.swiper-box {
		position: relative;
		margin: 0 24rpx 10rpx;
		padding-top: 20rpx;
		width: 702rpx;
		height: 280rpx;
		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%;
			padding: 0 10rpx;

			.swiper-item {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
				object-fit: cover;
			}
		}
	}

	.discount-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		justify-content: space-evenly;
		// padding: 30rpx 0;
		// margin: 0 0rpx 0rpx;
		background: #fafafa;
		border-radius: 16rpx;
		position: relative;
		top: 0rpx;
		padding-top: 20rpx;

		.discount-item {
			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			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;
			}
		}
	}

	.sub-title {
		margin: 20rpx 0;
		padding-left: 40rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.goods-list {
		border-radius: 16rpx 16rpx 0 0;
		margin-bottom: 60rpx;
	}

	.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, 0.2);
							padding: 0 14rpx;
							border-radius: 0 8rpx 8rpx 0;
						}
					}
				}

				.goods-price {
					display: flex;
					align-items: center;
					margin-top: 15rpx;
					justify-content: space-between;
					color: #FF4D3A;
					font-weight: bold;
					font-size: 30rpx;
					.distance {
						font-weight: normal;
						font-size: 20rpx;
						color: #999;
					}

					.position {
						color: 999;
						width: 25rpx;
						height: 29rpx;
						margin-right: 8rpx;
					}
				}
			}
		}
	}
</style>