hqshop/pages/index/index.vue

<template>
	<view class="center">
		<!-- 顶部logo and 搜索 start-->
		<view class="status_bar"></view>
		<view class="top-search flex">
			<view class="search-box flex" @click="clickSearch()">
				<image class="search" src="../../static/icon/search-h.png" mode=""></image>
				<view class="search-font">输入关键词搜索</view>
			</view>
		</view>
		<!-- 顶部logo and 搜索 end-->
		<view class="jg"></view>
		<!-- 轮播图 start -->
		<view class="swiper-wrap">
			<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"
					@click="bannerNavToUrl(item)">
					<image :src="item.pic" />
				</swiper-item>
			</swiper>
		</view>
		<!-- 轮播图 end -->
		<view class="jg"></view>
		<!-- 分类 start-->
		<view class="cate-section flex">
			<view class="cate-item flex" @click="nav('/pages/index/rxbd')">
				<view class="img-wrapper flex">
					<image src="../../static/icon/c1.png" mode=""></image>
				</view>
				<view class="item-title">热销榜</view>
			</view>
			<view class="cate-item flex" @click="goCp()">
				<view class="img-wrapper flex">
					<image src="../../static/icon/c2.png" mode=""></image>
				</view>
				<view class="item-title">环球国际</view>
			</view>
			<view class="cate-item flex" @click="openGg()">
				<view class="img-wrapper flex">
					<image src="../../static/icon/c3.png" mode=""></image>
				</view>
				<view class="item-title">视频领奖</view>
			</view>
			<view class="cate-item flex" @click="nav('/pages/coupon/couponList')">
				<view class="img-wrapper flex">
					<image src="../../static/icon/c4.png" mode=""></image>
				</view>
				<view class="item-title">领券中心</view>
			</view>
			<view class="cate-item flex" @click="nav('/pages/user/shareQrCode')">
				<view class="img-wrapper flex">
					<image src="../../static/icon/c5.png" mode=""></image>
				</view>
				<view class="item-title">邀请有礼</view>
			</view>
		</view>
		<!-- 分类 end-->
		<!-- 专区 start -->
		<view class="zq-wrap flex">
			<view class="zq-item" @click="nav('/pages/index/xfqzq')">
				<view class="zq-tit">
					消费券专区
				</view>
				<view class="item-info flex">
					<image src="../../static/img/xf-bg.png" mode=""></image>
					<view class="info-tit">
						<image src="../../static/icon/ms.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="zq-item bd" @click="nav('/pages/index/bdzq')">
				<view class="zq-tit">
					爆品专区
				</view>
				<view class="item-info flex">
					<image src="../../static/img/bd-bg.png" mode=""></image>
					<view class="info-tit">
						<image src="../../static/icon/bd.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 专区 end -->
		<!-- 商品列表 start -->
		<view class="product-box">
			<view class="product-tit flex">
				<view class="hx">

				</view>
				<view class="tit">
					猜您喜欢
				</view>
				<view class="hx">

				</view>
			</view>
			<view class="hotgoods">
				<view class="hotgoods-item" v-for="item in list" :key="item.id"
					@click="nav('/pages/product/product?id=' + item.id)">
					<view class="image-wrapper">
						<image class="image" :src="item.image" mode="scaleToFill"></image>
					</view>
					<view class="title clamp2">{{item.store_name}}</view>
					<view class="hot-price">
						<view class="price">
							<text class="font-size-sm">￥</text>
							{{ item.price * 1 }}
						</view>
						<view class="yuanPrice">{{ item.ot_price*1 }}</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>

	</view>
</template>

<script>
	import {
		loadIndexs,
		groom1,
		advertisement
	} from '@/api/index.js';
	import {
		getProducts
	} from '@/api/product.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				dataList: '',
				carouselList: [], //轮播图列表
				page: 1,
				limit: 10,
				list: [],
				loadingType: 'more'
			};
		},
		onLoad() {
			this.loadData();
			this.getProduct()
		},
		onShow() {
			console.log(this.$dsbridge, 'dsbridge+++++++++++++')
		},
		onHide() {

		},
		onReachBottom() {
			this.getProduct()
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		// 用户下拉刷新
		async onPullDownRefresh() {
			this.page = 1
			this.loadingType = 'more'
			this.list = []
			await this.getProduct()
			uni.stopPullDownRefresh()
		},
		methods: {
			openGg() {
				this.$dsbridge.call("fnAds.onShowRewardVideoAD", {}, function(result) {
					// alert(result);
					// 奖励状态返回
					// if(result.event)
					let res = JSON.parse(result)
					if(res.event == 'onReward') {
						
						advertisement({
							task:'1'
						}).then(e => {
							// alert('奖励已发放')
							// uni.showToast({
							// 	title:'奖励已发放',
							// 	duration:2000
							// });
						}).catch(err => {
						})
					}
				});
			},
			goCp() {
				
			},
			swiperChange() {

			},
			loadData() {
				loadIndexs({})
					.then(({
						data
					}) => {
						let goods = data.info;
						this.dataList = goods.bastList; //精品推荐
						this.carouselList = data.banner;
					})
					.catch(e => {});
			},
			nav(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						});
					}
				});
			},
			// 點擊搜索框
			clickSearch() {
				uni.navigateTo({
					url: '/pages/product/search'
				});
			},
			// getProduct
			getProduct() {
				let obj = this
				if (obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
					return
				}
				obj.loadingType = 'loading'
				groom1({
					page: obj.page,
					limit: obj.limit
				}).then(res => {
					console.log(res)
					obj.list = obj.list.concat(res.data.list)
					obj.page++
					if (obj.limit == res.data.length) {
						obj.loadingType = 'more'
					} else {
						obj.loadingType = 'noMore'
					}
				})
			}

		}
	};
</script>

<style lang="scss">
	page,
	.center {
		min-height: 100%;
		height: auto;
		background: #fff;
	}

	// 顶部搜索
	.top-search {
		height: 80rpx;
		// padding: 0 20rpx;
		background-color: #f32b09;
		justify-content: center;

		.search-box {
			justify-content: center;
			width: 700rpx;
			height: 60rpx;
			background: #fff;
			// box-shadow: 0px 10rpx 20rpx 0px rgba(4, 114, 69, 0.22);
			border-radius: 30rpx;

			.search {
				width: 34rpx;
				height: 34rpx;
			}

			.search-font {
				margin-left: 14rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #CBCBCB;
			}
		}
	}

	// 顶部轮播图
	.swiper-wrap {
		width: 750rpx;
		background-color: #f32b09;

		.top-swiper {
			width: 700rpx;
			height: 350rpx;
			margin: auto;
			border-radius: 20rpx;

			image {
				width: 700rpx;
				height: 350rpx;
				border-radius: 20rpx;
			}
		}
	}


	.swiper-btm {
		height: 60rpx;
		width: 750rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		font-size: 21rpx;
		font-weight: 500;
		color: #333333;

		.btm-item {
			flex-grow: 1;
			justify-content: center;

			image {
				width: 25rpx;
				height: 25rpx;
				margin-right: 14rpx;
			}
		}
	}

	.jg {
		height: 20rpx;
		background-color: #f32b09;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background: #f32b09;
	}

	// 分类
	.cate-section {
		justify-content: space-around;
		background-color: #fff;
		padding: 0rpx 0 30rpx;
		background: #f32b09;

		.cate-item {
			flex-grow: 0;
			width: 20%;
			flex-direction: column;
			text-align: center;
			align-items: center;
			justify-content: center;

			.img-wrapper {
				width: 90rpx;
				height: 90rpx;
				border-radius: 20rpx;
				position: relative;

				image {
					width: 90rpx;
					height: 90rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.item-title {
				margin-top: 15rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}

	// 专区
	.zq-wrap {
		height: 345rpx;
		width: 750rpx;
		background: linear-gradient(180deg, #f32b09, #fff);

		padding: 0 27rpx;

		.zq-item {
			width: 342rpx;
			height: 300rpx;
			background: linear-gradient(180deg, #fc2f40, #fb829e);
			border-radius: 20rpx;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
			position: relative;

			.zq-tit {
				padding: 15rpx 0 0 20rpx;
				font-size: 32rpx;
				font-weight: bold;
				font-style: italic;
				color: #FFFFFF;
			}

			.item-info {
				position: absolute;
				bottom: 8rpx;
				left: 0;
				right: 0;
				margin: auto;
				width: 324rpx;
				height: 232rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 294rpx;
					height: 160rpx;
				}

				.info-tit {
					margin-top: 12rpx;
					width: 189rpx;
					height: 36rpx;

					image {
						width: 189rpx;

					}
				}
			}
		}

		.bd {

			background: linear-gradient(180deg, #ff601a, #feba9d);
		}
	}

	.product-box {
		margin-top: 20rpx;
		background: #ffffff;
		padding: 26rpx 20rpx 20rpx;

		.product-tit {
			justify-content: center;

			.hx {
				width: 120rpx;
				height: 1rpx;
				background: #989898;
			}

			.tit {
				margin: 0 70rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #363636;
			}
		}
	}

	.hotgoods {
		margin-top: 38rpx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 0 0 30rpx;
		justify-content: space-between;

		.hotgoods-item {
			width: 345rpx;
			background-color: #ffffff;
			border-radius: 12rpx;

			.image-wrapper {
				width: 345rpx;
				height: 345rpx;
				border-radius: 3px;
				overflow: hidden;
				position: relative;

				.image-bg {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					opacity: 1;
					border-radius: 12rpx 12rpx 0 0;
					z-index: 2;
				}

				.image {
					width: 100%;
					height: 100%;
					opacity: 1;
					border-radius: 12rpx 12rpx 0 0;
				}
			}

			.title {
				margin-top: 24rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.hot-price {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 14rpx 0 30rpx;

				.hotPrice-box {
					padding: 2rpx 6rpx;

					background: linear-gradient(90deg, #c79a4c, #f9df7f);
					border-radius: 5rpx;
					text-align: center;
					line-height: 28rpx;
					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;
				}

				.price {
					margin-left: 10rpx;
					font-size: 40rpx;
					color: #ff0000;
					font-weight: 500;
				}

				.yuanPrice {
					margin-left: 10rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					text-decoration: line-through;
					color: #999999;
				}

				.cart-icon {
					image {
						width: 44rpx;
						height: 44rpx;
					}
				}
			}
		}
	}
</style>