zh_order_food_xcx/pages/index/index.vue

<template>
	<view class="index-box">
		<image class="bg-img" src="@/static/img/index/index-bg.png" mode="scaleToFill"></image>

		<view class="nav-z">
			<Nav class="" :leftShow='false' :customNav='true' :bgckgroundBox='bgckgroundBox'>
				<template>
					<view slot="custom" class="align-items-center" @click="toSelectSchool()">
						<!-- <uni-icons type="location-filled" size="20"></uni-icons> -->
						<image class="wh-40" src="@/static/img/index/dw.png" mode=""></image>
						<view class="fs-32 maxw-220 fw-600 ml-10 text-overflow-ellipsis-one">{{schoolData.school_name||''}}
						</view>
						<image class="nav-icon ml-10" src="@/static/img/index/index-right.png" mode="aspectFit"></image>
					</view>
				</template>
			</Nav>
		</view>

		<!-- 搜索 -->
		<view class="index-search box-border-box mt-4" @click="toUrl(1)"
			:style="[{'top': BarH + 'px','background':bgckgroundSearch}]">
			<view class="index-search-box box-border-box align-items-center">
				<!-- <uni-icons type="search" size="20" color="#000"></uni-icons> -->
				<image class="wh32" src="@/static/img/index/ss.png" mode=""></image>
				<view class="fs-28 fc-9 ml-10">搜索店铺名称或者商品名称</view>
				<view class="fs-28 fc-f index-search-box-buttom">搜索</view>
			</view>
		</view>


		<view class="index-box-1 ">
			<!-- 轮播 -->
			<view class="box-border-box plr-24 mb-32">
				<uni-swiper-dot :info="bannerList" mode="dot" :dotsStyles="dotStyle">
					<swiper class="swiper">
						<swiper-item v-for="(item,i) in bannerList" :key="i">
							<image class="swiper-item" :src="item.image" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>


			<!-- 导航 -->
			<view class="box-border-box plr-24">
				<view class="nav-list flex-wrap-wrap box-border-box mb-22">
					<view class="nav-list-item" v-for="(item,i) in navList" :key="i" @click="toUrl(item.type)">
						<image :src="item.img" mode="scaleToFill"></image>
						<view class="fs-26 fc-3 text-align-center">{{item.name}}</view>
					</view>
				</view>
			</view>


			<!-- 通知 -->
			<view class="box-border-box plr-24">
				<view class="msg-box align-items-center box-border-box mb-32">
					<image class="image-1" src="@/static/img/index/index-tz.png" mode="scaleToFill"></image>
					<view class="box-1 fs-20 fc-41ABF5">公告</view>
					<swiper class="tz-swiper" :vertical="true" circular :autoplay="true" :interval="3000"
						:duration="500">
						<swiper-item v-for="(item,i) in noticeList" :key="i" @click="toNoticeDet(item)">
							<view class="tz-swiper-item">{{item.title}}</view>
						</swiper-item>
					</swiper>
					<!-- <image class="image-2" src="@/static/img/toRight.png" mode="scaleToFill"></image> -->
				</view>
			</view>


			<!-- 限时秒杀 -->
			<view class="box-border-box plr-24" v-if="seckillGoodsList.length > 0">
				<view class="xsms-box mb-32">
					<image class="image-title" src="@/static/img/index/index-xsms.png" mode="scaleToFill"></image>
					<view class="xsms-box-list-f box-border-box plr-12">
						<view class="xsms-box-list display-flex ">
							<view class="xsms-box-list-item box-border-box p-8" v-for="(item,i) in seckillGoodsList"
								:key="i" @click="toShop(item)">
								<image class="xsms-box-list-item-img-1 mb-4" :src="item.goods_image" mode="aspectFill">
								</image>
								<view class="text-overflow-ellipsis-one fs-26 mb-4">{{item.goods_name}}</view>
								<view class="mb-4">
									<span class="fs-20 fw-b fc-FB3D03">￥</span><span
										class="fs-32 fw-b fc-FB3D03">{{item.seckill_money}}</span>
								</view>
								<view class="fs-20 fc-9 text-line-through">￥{{item.line_price}}</view>
								<image class="xsms-box-list-item-img-2" src="@/static/img/index/index-q.png"
									mode="scaleToFill"></image>
							</view>
						</view>
					</view>
				</view>
			</view>


			<!-- 类型选择 -->
			<view class="type-list-box display-flex" :style="[{'background':bgckgroundType}]">
				<view class="type-item-box view-nowrap" :class="category_id==item.id?'s-type':'n-type'"
					v-for="(item,i) in typeList" :key="i" @click="selectType(item.id)">{{item.name}}</view>
			</view>
			<!-- 商品列表 -->
			<view class="box-border-box plr-24">
				<view class="goos-list-box box-border-box p-24 display-flex" v-for="(item,i) in goodsList" :key="i"
					@click="toShop(item)">
					<image class="left-img" :src="item.shop_logo" mode="aspectFill"></image>
					<view class="flex-1">
						<view class="align-items-center mb-8">
							<view class="right-box-title fs-32 fw-600 text-overflow-ellipsis-one">{{item.shop_name}}
							</view>
							<image class="right-box-title-img" src="@/static/img/toRight.png" mode=""></image>
						</view>
						<view class="align-items-center mb-12">
							<image class="img-x mr-12" src="@/static/img/index/index-x.png" mode=""></image>
							<view class="fs-26 fw-600 fc-FF7F00 mr-12">{{item.shop_score}}分</view>
							<view class="fc-6 fs-24 mr-12">| 预计{{item.delivery_time}}分钟 |</view>
							<view class="fc-6 fs-24 mr-12">{{item.shop_sales}}人购买</view>
						</view>
						<view class="align-items-center flex-wrap-wrap">
							<view class="quan-list align-items-center mr-12 mb-16" v-for="(info1,index1) in item.coupon"
								:key="index1">
								<view class="quan-list-1 fs-24 fc-f">券</view>
								<view class="quan-list-2 fs-24 fc-FB3D03">{{info1.money}}元</view>
							</view>
						</view>
						<view class="goods-items-list display-flex">
							<view class="goods-items-list-box" v-for="(info2,index2) in item.goods" :key="index2">
								<image class="mb-12" :src="info2.goods_image" mode="aspectFill"></image>
								<view class="mb-8 fw-600 text-overflow-ellipsis-one fs-26">{{info2.goods_name}}</view>
								<view class="">
									<span class="fs-24 fc-FB3D03">￥</span>
									<span class="fs-32 fc-FB3D03 fw-b">{{info2.price}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center" border-radius="10px 10px 10px 10px" :is-mask-click="false">
			<view class="roll-pop">
				<!-- <image class="lq-bg" src="@/static/img/index/lq-bg.png" mode=""></image> -->
				<image class="tc-top" src="@/static/img/index/tc-top.png" mode=""></image>
				<view class="coupon-box">
					<image class="tc-content" src="@/static/img/index/tc-content.png" mode=""></image>
					<view class="item-box display-flex" v-for="(item,index) in couponData" :key="index">
						<view class="item-right flex-direction flex-justify-center flex-1 bgc-FCE7E2">
							<view class="fs-28 mb-12 ticket-name text-overflow-ellipsis fc-3 fw-600">
								{{item.name}}
							</view>
							<view class="fs-24 fc-6">
								有效时间：{{item.start_time}} - {{item.end_time}}
							</view>
						</view>
						<view class="item-hr"></view>
						<view class="item-left flex-direction align-items-center flex-justify-center bgc-FCE7E2">
							<view class="align-items-center">
								<view class="fs-30 fw-600 fc-FB3D03">￥</view>
								<view class="fs-48 fw-600 fc-FB3D03">{{item.money}}</view>
							</view>
							<view class="fs-24 mb-18 fc-6">
								{{item.desc}}
							</view>
							<view class="but-box fs-28 fc-f" @click="receive(item)">立即领取</view>
							<view class="ball"></view>
							<view class="ball-two"></view>
						</view>
					</view>
				</view>
				<image class="tc-bot" src="@/static/img/index/tc-bot.png" mode=""></image>
				<uni-icons @click="gbPOp" class="pop-gb" color='#fff' type="close" size="30"></uni-icons>
			</view>
		</uni-popup>
	</view>

</template>
<script>
	import tools from "@/service/tools";
	import {
		getNotice,
		getBanner,
	} from '@/api/common.js';
	import {
		getSeckillGoods
	} from '@/api/seckill.js'
	import {
		getTakeaway
	} from '@/api/category.js';
	import {
		getGoodsList
	} from '@/api/goods.js';
	import {
		couponHome
	} from '@/api/coupon.js'
	export default {
		data() {
			return {
				BarH: 0,
				bgckgroundBox: 'transparent',
				bgckgroundSearch: '',
				bgckgroundType: '',
				navList: [{
						name: "外卖",
						img: require('@/static/img/index/index-wm.png'),
						type: 2
					},
					{
						name: "代取",
						img: require('@/static/img/index/index-dq.png'),
						type: 3
					},
					{
						name: "校友圈",
						img: require('@/static/img/index/index-xyq.png'),
						type: 7
					},
					{
						name: "团购",
						img: require('@/static/img/index/index-tg.png'),
						type: 5
					},
					{
						name: "票务",
						img: require('@/static/img/index/index-pw.png'),
						type: 4
					},
					{
						name: "干洗",
						img: require('@/static/img/index/index-gx.png'),
						type: 6
					},
					{
						name: "租凭",
						img: require('@/static/img/index/index-zp.png'),
					},
					{
						name: "二手市场",
						img: require('@/static/img/index/index-esss.png'),
					},
					{
						name: "回收",
						img: require('@/static/img/index/index-hs.png'),
					},
					{
						name: "实习岗位",
						img: require('@/static/img/index/index-sxgw.png'),
						type: 8
					},
				],

				schoolData: {
					school_name: '',
				},
				noticeList: [],
				bannerList: [],
				seckillGoodsList: [],

				typeList: [], //分类数组
				category_id: 0, //分类id

				goodsList: [],
				total: 0,
				page: 1,
				couponData: [],
				dotStyle: {
					width: 6,
					bottom: 6,
					backgroundColor: 'rgba(51, 51, 51,0.3)',
					border: '1px rgba(51, 51, 51,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(79, 179, 239,0.9)',
					selectedBorder: '1px rgba(255, 255, 255,0.9) solid'
				}
			}
		},

		onShow() {
			let lon = uni.getStorageSync('lon');
			let lat = uni.getStorageSync('lat');
			if (!lon || !lat) {
				uni.getLocation({
					type: "gcj02",
					success: (res) => {
						if (res.errMsg === 'getLocation:ok') {
							uni.setStorageSync('lon', res.longitude);
							uni.setStorageSync('lat', res.latitude);
						} else {
							tools.error('位置授权失败，请检查是否开始授权')
						}
					},
					fail: (res) => {
						tools.error('位置授权失败，请检查是否开始授权')
					},
				})
			}

			let school_id = uni.getStorageSync('school_id');
			let operate_id = uni.getStorageSync('operate_id');
			let school_name = uni.getStorageSync('school_name');
			if (!school_id || !operate_id) {
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages-address/select-school?type=1'
					})
				}, 1000)
			} else {
				this.schoolData.school_name = school_name;
			}

			this.getBanner();
			this.getNotice();
			this.getSeckillGoods();
			this.getTakeaway();
			this.page = 1;
			this.goodsList = [];
			this.getGoodsList();
		},
		onPageScroll(e) {
			if (e.scrollTop > 1) {
				this.bgckgroundBox = '#fff';
				this.bgckgroundSearch = '#fff';
				if (e.scrollTop > 500) {
					this.bgckgroundType = '#fff';
				} else {
					this.bgckgroundType = '';
				}
			} else {
				this.bgckgroundBox = 'transparent';
				this.bgckgroundSearch = '';
				this.bgckgroundType = '';
			}
		},
		onReachBottom() {
			console.log('触底刷新');
			if (this.goodsList.length < this.total) {
				this.page += 1;
				this.getGoodsList();
			}
		},
		created() {
			uni.getSystemInfo({
				success: (e) => {
					let statusBarH = e.statusBarHeight + 10
					let custom = 0;
					custom = wx.getMenuButtonBoundingClientRect()
					let customBarH = custom.height;
					this.BarH = statusBarH + customBarH;
				}
			})
		},
		mounted() {
			this.couponHome()
		},
		methods: {
			couponHome() {
				let operate_id = uni.getStorageSync('operate_id');
				couponHome({
					operate_id: operate_id
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.length > 0) {
							uni.hideTabBar()
							this.couponData = res.data
							this.$refs.popup.open()
						}
					}
				})
			},
			gbPOp() {
				uni.showTabBar()
				this.$refs.popup.close()
			},
			getBanner() {
				getBanner().then((res) => {
					if (res.code === 1) {
						this.bannerList = res.data;
					}
				})
			},
			getNotice() {
				getNotice().then((res) => {
					if (res.code === 1) {
						this.noticeList = res.data;
					}
				})
			},
			getSeckillGoods() {
				let operate_id = uni.getStorageSync('operate_id');
				getSeckillGoods({
					operate_id: operate_id
				}).then((res) => {
					if (res.code === 1) {
						this.seckillGoodsList = res.data
					}
				})
			},
			getTakeaway() {
				getTakeaway().then((res) => {
					if (res.code === 1) {
						this.typeList = res.data;
						this.typeList.unshift({
							name: "全部",
							id: 0
						})
					}
				})
			},
			getGoodsList() {
				let operate_id = uni.getStorageSync('operate_id');
				getGoodsList({
					page: this.page,
					operate_id: operate_id,
					category_id: this.category_id
				}).then((res) => {
					if (res.code === 1) {
						this.goodsList = [...this.goodsList, ...res.data.items];
						this.total = res.data.total;
					}
				})
			},
			selectType(id) {
				if (this.category_id != id) {
					this.category_id = id;
					this.page = 1;
					this.goodsList = [];
					this.getGoodsList();
				}
			},
			toUrl(type) {
				if (type === 1) {
					// 去搜索
					uni.navigateTo({
						url: '/pages/index/search-record'
					})
				} else if (type === 2) {
					// 去外卖
					uni.navigateTo({
						url: '/pages-takeout/takeout'
					})
				} else if (type === 3) {
					// 去外卖
					uni.navigateTo({
						url: '/pages-takeout/replace-take'
					})
				} else if (type === 4) {
					// 去票务
					uni.navigateTo({
						url: '/pages-buy/ticket'
					})
				} else if (type === 5) {
					// 去团购
					uni.navigateTo({
						url: '/pages-buy/group'
					})
				} else if (type === 6) {
					// 去干洗
					uni.navigateTo({
						url: '/pages-buy/dry-clean'
					})
				} else if (type === 7) {
					// 去校友圈
					uni.navigateTo({
						url: '/pages-school/school-circle'
					})
				} else if (type === 8) {
					// 去实习岗位
					uni.navigateTo({
						url: '/pages-position/Internship-position'
					})
				} else {
					tools.error('暂未开放')
				}
			},
			toSelectSchool() {
				uni.navigateTo({
					url: '/pages-address/select-school?type=1'
				})
			},
			toShop(item) {
				uni.navigateTo({
					url: '/pages-takeout/shop?shop_id=' + item.shop_id
				})
			},
			toNoticeDet(item) {
				uni.navigateTo({
					url: '/pages-my/notice/info?id=' + item.id
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	.wh32 {
		width: 32rpx;
		height: 32rpx;
	}

	.nav-z {
		position: relative;
		z-index: 1 !important;
	}

	.wh-40 {
		width: 40rpx;
		height: 40rpx;
	}

	.item-box {
		margin-bottom: 20rpx;
	}

	.item-box:last-child {
		margin: 0;
	}

	.roll-pop {
		position: relative;
		width: 100vw;
		// height: 1000rpx;

		.tc-top {
			width: 100%;
			height: 202rpx;
		}

		.tc-bot {
			width: 100%;
			height: 178rpx;
		}

		.pop-gb {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			bottom: -65rpx;
			left: calc((100% - 28rpx) / 2);
		}
	}

	.coupon-box {
		width: 100%;
		// min-height: 590rpx;
		padding: 0 82rpx 0 92rpx;
		box-sizing: border-box;
		position: relative;

		.tc-content {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}

	.index-box {
		.maxw-220 {
			max-width: 220rpx;
		}

		position: relative;

		.bg-img {
			width: 100%;
			height: 930rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -2;
		}

		.nav-icon {
			width: 32rpx;
			height: 32rpx;
		}

		.index-box-1 {
			width: 100%;

			// height: 3000rpx;
			.swiper {
				width: 702rpx;
				height: 220rpx;
				border-radius: 20rpx;

				.swiper-item {
					width: 702rpx;
					height: 220rpx;
					border-radius: 20rpx;
				}
			}

			.nav-list {
				padding: 0 22rpx;

				.nav-list-item {
					margin-right: 52rpx;
					margin-bottom: 16rpx;

					image {
						width: 88rpx;
						height: 88rpx;
						margin: 0 auto;
					}
				}

				.nav-list-item:nth-child(7) {
					margin-right: 42rpx !important;
				}

				.nav-list-item:nth-child(8) {
					margin-right: 46rpx !important;
				}

				.nav-list-item:nth-child(9) {
					margin-right: 44rpx !important;
				}

				.nav-list-item:nth-child(5),
				.nav-list-item:nth-child(10) {
					margin-right: 0;
				}
			}

			.msg-box {
				width: 100%;
				height: 66rpx;
				background: #F7F8FC;
				border-radius: 12rpx;
				padding: 0 14rpx;

				.image-1 {
					width: 72rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}

				.image-2 {
					width: 40rpx;
					height: 40rpx;
					margin-left: auto;
				}

				.box-1 {
					width: 50rpx;
					height: 26rpx;
					border-radius: 2rpx;
					border: 2rpx solid #41ABF5;
					text-align: center;
					line-height: 26rpx;
					margin-right: 10rpx;
				}

				.tz-swiper {
					width: 444rpx;
					height: 66rpx;

					.tz-swiper-item {
						width: 444rpx;
						height: 66rpx;
						line-height: 66rpx;
						color: #666;
						font-size: 30rpx;
					}
				}
			}

			.xsms-box {
				.image-title {
					width: 100%;
					height: 92rpx;
				}

				.xsms-box-list-f {
					width: 100%;
					height: 310rpx;
					background: linear-gradient(180deg, #ABDEFE 4%, #C9EAFF 30%, #C9EAFF 100%);
					border-radius: 0rpx 0rpx 20rpx 20rpx;
				}

				.xsms-box-list {
					overflow-y: scroll;

					.xsms-box-list-item:last-child {
						margin-right: 0;
					}

					.xsms-box-list-item {
						width: 180rpx;
						height: 300rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						margin-right: 8rpx;
						position: relative;

						.xsms-box-list-item-img-1 {
							width: 164rpx;
							height: 175rpx;
							border-radius: 9rpx;
						}

						.xsms-box-list-item-img-2 {
							position: absolute;
							width: 62rpx;
							height: 36rpx;
							right: 0;
							bottom: 8rpx;
						}
					}
				}
			}

			.type-list-box {
				position: sticky;
				left: 0;
				// top: calc(var(BarH)px + 93rpx);
				top: calc(86px + 93rpx);
				padding: 0 24rpx 24rpx 24rpx;
				overflow-x: scroll;

				.type-item-box {
					margin-right: 16rpx;
					padding: 0 24rpx;
					// min-width: 300rpx;
					height: 56rpx;
					line-height: 56rpx;
					border-radius: 200rpx;
					text-align: center;
					font-size: 28rpx;
				}

				.type-item-box:last-child {
					margin-right: 0;
				}

				.s-type {
					color: #fff;
					font-weight: 600;
					background: linear-gradient(280deg, #44B1F7 0%, #96D6F4 100%);
				}

				.n-type {
					color: #666;
					background-color: #fff;
				}
			}

			.goos-list-box {
				width: 100%;
				min-height: 100rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.goods-items-list {
					width: 530rpx;
					overflow-y: scroll;

					.goods-items-list-box {
						width: 140rpx;
						margin-right: 16rpx;

						image {
							width: 140rpx;
							height: 140rpx;
							border-radius: 12rpx
						}
					}
				}

				.left-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 12rpx;
					margin-right: 16rpx;
				}

				.img-x {
					width: 24rpx;
					height: 24rpx;
				}

				.right-box-title {
					width: 438rpx;
				}

				.right-box-title-img {
					width: 32rpx;
					height: 32rpx;
					margin-left: auto;
				}

				.quan-list {
					.quan-list-1 {
						width: 32rpx;
						height: 34rpx;
						background: #FB3D03;
						border-radius: 5rpx 0rpx 0rpx 5rpx;
						text-align: center;
						line-height: 34rpx;
					}

					.quan-list-2 {
						box-sizing: border-box;
						height: 34rpx;
						line-height: 34rpx;
						padding: 0 4rpx;
						border-radius: 0 5rpx 5rpx 0;
						border: 1rpx solid #FB3D03;
						text-align: center;
					}
				}
			}
		}

		.index-search {
			position: sticky;
			left: 0;
			z-index: 10;
			padding: 0 24rpx 20rpx 24rpx;

			.index-search-box {
				width: 100%;
				height: 72rpx;
				padding: 0 6rpx 0 24rpx;
				border-radius: 200rpx;
				border: 2rpx solid #4FB3EF;

				.index-search-box-buttom {
					width: 120rpx;
					height: 60rpx;
					background: linear-gradient(90deg, #57CAFF 0%, #41ABF5 100%);
					border-radius: 200rpx;
					margin-left: auto;
					line-height: 60rpx;
					text-align: center;
				}
			}
		}
	}

	.item-hr {
		width: 0px;
		height: auto;
		border-right: 1rpx dashed #FB7850;
	}

	.item-hr-two {
		width: 0px;
		height: auto;
		border-right: 1rpx dashed #999;
	}

	.item-left {
		width: 200rpx;
		height: auto;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		position: relative;
		border-radius: 0 20rpx 20rpx 0;
	}

	.ball {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		position: absolute;
		top: -12rpx;
		left: -12rpx;
		background: #fff;
		z-index: 2;
	}

	.ball-two {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		position: absolute;
		background: #fff;
		z-index: 10;
		bottom: -12rpx;
		left: -12rpx;
	}

	.item-right {
		padding: 24rpx;
		box-sizing: border-box;
		border-radius: 20rpx 0 0 20rpx;
		position: relative;
	}

	.but-box {
		width: 152rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		background: linear-gradient(225deg, #FB3D03 0%, #FF6901 100%);
		border-radius: 200rpx;
	}
</style>