jzhw_uni/pages/index/index.vue

<template>
	<view class="container">
		<keep-alive>
			<MyTabBar @tab-switch="onTabSwitch" :actived="actived"></MyTabBar>
		</keep-alive>
		<view class="toutu-container">
		</view>

		<view class="bolang" @tap="loginHandle">
			<view class="zx">
				<image src="../../static/shouye/guanjiaicon.png" class="zx-img"></image>
				<text>尊享花王认证保洁师服务</text>
				<view class="zx-one">一天只服务一家，承诺不满意重做</view>
			</view>
			<button class="loginBtn" v-if="!isLogin">注册/登陆</button>
		</view>
		<view class="sort">
			<view class="single" v-if="dcGoods.length>0">
				<view class="single-title">
					<text class="sort-title ">花王除菌保洁</text>
				</view>
				<text class="sort-tip sort-tip1">除菌率99.9%，品质家庭就选它</text>
				<view v-for="(item, index) in dcGoods" :key="index"
					:class="{ 'last-items-style': index === dcGoods.length - 1 }">
					<navigator :url="'/pages/goods/goods?id=' + item.id" hover-class="none">
						<view class="sproducts">
							<view class="single-img">
								<image :src="item.picUrl" class="ssingle-img" />
							</view>

							<view class="ssproducts">
								<text class="ssproducts-title"
									:class="item.name.startsWith('【')?'indent':''">{{item.name}}</text>
								<view class="ssproducts-contents">
									<text class="ssproducts-content">{{item.brief}}</text>
									<view class="productPrice"
										style="display: flex;justify-content: space-between; width: 420rpx;">
										<view class="">
											<text class="salePrice">￥</text>
											<text class="salePrice-num">{{item.retailPrice}}</text>
											<text class="salePrice-spe">/次</text>
											<text class="originalPrice">￥{{item.counterPrice}}</text>
										</view>
										<view class="appointmentNow">
											立即预约
										</view>
									</view>
								</view>

							</view>
						</view>
					</navigator>
				</view>
			</view>

			<view class="single" v-if="zhGoods.length>0">
				<view class="single-title single-title1">
					<text class="sort-title ">全屋焕新，除菌必备</text>
				</view>
				<text class="sort-tip sort-tip1">适用于新房/二手房</text>
				<view v-for="(item, index) in zhGoods" :key="index"
					:class="{ 'last-items-style': index === zhGoods.length - 1 }">
					<navigator :url="'/pages/goods/goods?id=' + item.id" hover-class="none">
						<view class="sproducts">
							<view class="single-img">
								<image :src="item.picUrl" class="ssingle-img" />
							</view>

							<view class="ssproducts">
								<text class="ssproducts-title"
									:class="item.name.startsWith('【')?'indent':''">{{item.name}}</text>
								<view class="ssproducts-contents">
									<text class="ssproducts-content">{{item.brief}}</text>
									<view class="productPrice"
										style="display: flex;justify-content: space-between;width: 420rpx;">
										<view class="">
											<text class="salePrice">￥</text>
											<text class="salePrice-num">{{item.retailPrice}}</text>
											<text class="salePrice-spe">/次</text>
											<text class="originalPrice">￥{{item.counterPrice}}</text>
										</view>
										<view class="appointmentNow">
											立即预约
										</view>
									</view>
								</view>

							</view>
						</view>
					</navigator>
				</view>
			</view>


			<view class="single" v-if="khGoods.length>0">
				<view class="single-title single-title3">
					<text class="sort-title ">精细日式开荒保洁</text>
				</view>
				<text class="sort-tip sort-tip1">拎包入住，一步到位</text>
				<view v-for="(item, index) in khGoods" :key="index"
					:class="{ 'last-items-style': index === khGoods.length - 1 }">
					<navigator :url="'/pages/goods/goods?id=' + item.id" hover-class="none">
						<view class="sproducts">
							<view class="single-img">
								<image :src="item.picUrl" class="ssingle-img" />
							</view>

							<view class="ssproducts">
								<text class="ssproducts-title"
									:class="item.name.startsWith('【')?'indent':''">{{item.name}}</text>
								<view class="ssproducts-contents">
									<text class="ssproducts-content">{{item.brief}}</text>
									<view class="productPrice"
										style="display: flex;justify-content: space-between; width: 420rpx;">
										<view class="">
											<text class="salePrice">￥</text>
											<text class="salePrice-num">{{item.retailPrice}}</text>
											<text class="salePrice-spe">/次</text>
											<text class="originalPrice">￥{{item.counterPrice}}</text>
										</view>
										<view class="appointmentNow">
											立即预约
										</view>
									</view>
								</view>

							</view>
						</view>
					</navigator>
				</view>
			</view>

			<view class="single" v-if="zqGoods.length>0">
				<view class="single-title single-title2">
					<text class="sort-title ">周期服务更省心 </text>
				</view>
				<text class="sort-tip sort-tip1">可以优先指定除菌保洁师</text>
				<view v-for="(item, index) in zqGoods" :key="index"
					:class="{ 'last-items-style': index === dcGoods.length - 1 }">
					<navigator :url="'/pages/goods/goods?id=' + item.id" hover-class="none">
						<view class="sproducts">
							<view class="single-img">
								<image :src="item.picUrl" class="ssingle-img" />
							</view>

							<view class="ssproducts">
								<text class="ssproducts-title"
									:class="item.name.startsWith('【')?'indent':''">{{item.name}}</text>
								<view class="ssproducts-contents">
									<text class="ssproducts-content">{{item.brief}}</text>
									<view class="productPrice"
										style="display: flex;justify-content: space-between; width: 420rpx;">
										<view class="">
											<text class="salePrice">￥</text>
											<text class="salePrice-num">{{item.retailPrice}}</text>
											<text class="salePrice-spe">/次</text>
											<text class="originalPrice">￥{{item.counterPrice}}</text>
										</view>
										<view class="appointmentNow">
											立即预约
										</view>
									</view>
								</view>

							</view>
						</view>
					</navigator>
				</view>
			</view>

			<view class="combination">
				<view class="bottom">
					<view class="hw-title">

					</view>
					<view class="bottom-image">

					</view>
					<view class="kouhao">

					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	const util = require('../../utils/util.js');
	const api = require('../../config/api.js');
	const user = require('../../utils/user.js');
	const map = require('../../utils/map.js');
	const area = require('../../utils/area.js');
	export default {
		data() {
			return {
				actived: 0,
				dcGoods: [],
				zqGoods: [],
				zhGoods: [],
				khGoods: [],
				isLogin: ''
			}
		},
		onShow() {
			this.setData({
				isLogin: uni.getStorageSync("token")
			})
			console.log(this.isLogin);
			this.getIndexData()
		},
		onPullDownRefresh() {
			let that = this;
			util.request(api.IndexUrl).then(function(res) {
				console.log('111111', res.data.goods);
				if (res.errno === 0) {
					that.setData({
						dcGoods: res.data.goods.dcGoods,
						zqGoods: res.data.goods.zqGoods,
						zhGoods: res.data.goods.zhGoods,
						khGoods: res.data.goods.khGoods
					});
					console.log(that.dcGoods);
					setTimeout(() => {
						uni.stopPullDownRefresh()
					}, 2000)

				}
			});
		},
		methods: {
			onTabSwitch(index) {
				console.log('Switched to tab index:', index);
				// 根据索引进行页面跳转或逻辑处理
				if (index == 2) {
					uni.reLaunch({
						url: "/pages/tabBar/ucenter/index/index"
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: "/pages/oneToone/1to1"
					})
				} else {
					return
				}
			},
			getIndexData() {
				uni.showLoading({
					title: '加载中'
				});
				let that = this;
				util.request(api.IndexUrl).then(function(res) {
					console.log('11', res.data.goods);
					if (res.errno === 0) {
						that.setData({
							dcGoods: res.data.goods.dcGoods,
							zqGoods: res.data.goods.zqGoods,
							zhGoods: res.data.goods.zhGoods,
							khGoods: res.data.goods.khGoods
						});
						console.log(that.dcGoods);
						uni.hideLoading();
					}
				});
			},
			loginHandle() {
				if (this.isLogin) {
					return
				} else {
					uni.navigateTo({
						url: "/pages/auth/login/login"
					})
				}
			},


		}
	}
</script>
<style>
	.container {
		width: 100%;
		overflow: hidden;
		height: auto;
		background-color: #f2f2f2;
	}

	.tabbar.data-v-56e9c485 {
		border: none !important;
	}

	.toutu-container {
		background-image: url('https://mall.zhaijieshi.cc/file/wx-huawang/tb2.png');
		background-size: cover;
		width: 100%;
		height: 730rpx;
	}

	.bolang {
		position: absolute;
		top: 400rpx;
		width: 750rpx;
		height: 640rpx;
		background: url('https://mall.zhaijieshi.cc/file/wx-huawang/shouye.png') no-repeat center center;
		background-size: 101% 100%;
	}

	.zx {
		width: 450rpx;
		height: 52rpx;
		font-size: 40rpx;
		color: #B43C14;
		line-height: 52rpx;
		margin-top: 156rpx;
		margin-left: 48rpx;
		font-weight: bold;
	}

	.zx-one {
		font-size: 25rpx;
		font-weight: normal;
	}


	.zx-img {
		display: block;
		width: 114rpx;
		height: 128rpx;
		position: absolute;
		top: 72rpx;
		left: 0;
	}


	.loginBtn {
		width: 144rpx;
		height: 44rpx;
		background: #D42525;
		border-radius: 22rpx;
		color: #FEF5ED;
		font-size: 25rpx;
		padding: 0rpx;
		line-height: 44rpx;
		margin-right: 39rpx;
	}

	.sort {
		position: absolute;
		top: 700rpx;
	}

	.single {
		width: 701rpx;
		background-color: #fff;
		border-radius: 18rpx;
		margin: 0rpx auto 30rpx;
		background-size: 100% 100%;
		position: relative;
		padding-bottom: 10rpx;
	}

	.period {
		width: 701rpx;
		border-radius: 22rpx;
		margin: 22rpx auto;
		background-color: #fff;
		background-size: 100% 100%;
		position: relative;
		padding-bottom: 12rpx;
	}

	.period-title {
		position: absolute;
		top: -13rpx;
		left: -1rpx;
		width: 228rpx;
		height: 76rpx;
		background: url(https://mall.zhaijieshi.cc/file/wx-huawang/daohanglan.png) no-repeat center center;
		background-size: 100% 100%;
		display: inline-block;
	}

	.combination {
		width: 750rpx;
	}

	.cproducts {
		width: 701rpx;
		padding-bottom: 20rpx;
		background: url('https://mall.zhaijieshi.cc/file/wx-huawang/shouye_1.png') no-repeat;
		background-size: 100% 100%;
		margin: 22rpx auto;
		border-radius: 18rpx;
		filter: drop-shadow(1rpx -3rpx 2rpx rgba(0, 0, 0, .1)) drop-shadow(-1rpx 3rpx 2rpx rgba(0, 0, 0, .1));
	}

	.sort-title {
		display: inline-block;
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 24rpx;
		height: 50rpx;
		width: 500rpx;
		margin-top: 12rpx;
		color: #29292A;
	}

	.sort-tip {
		display: inline-block;
		font-size: 27rpx;
		font-weight: bold;
		margin-right: 25rpx;
		color: #AD7857;
		margin-top: 28rpx;
		width: 400rpx;
		float: right;
		text-align: right;
		height: 40rpx;
		overflow: hidden;
	}

	.sort-tip1 {
		margin: 15rpx 25rpx 15rpx 0rpx
	}

	.sort-tip2 {
		display: inline-block;
		font-size: 27rpx;
		font-weight: bold;
		margin-right: 25rpx;
		color: #AD7857;
		margin-top: 28rpx;
		width: 400rpx;
	}

	.title-val {
		text-align: right;
	}

	.title-val__text {
		display: inline-block;
		text-align: justify;
	}

	.cproducts-img {
		width: 649rpx;
		height: 325rpx;
		box-shadow: 0rpx 2rpx 26rpx 0rpx rgba(186, 184, 184, 0.32);
		border-radius: 18rpx;
		margin: 20rpx auto;
		border-radius: 10rpx;
		display: block;
	}

	.ctipstitle {
		height: 31rpx;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		font-size: 33rpx;
		color: #8F572F;
		line-height: 40rpx;
		display: inline-block;
		margin-right: 20rpx;
	}

	.ctipscontent {
		width: 381rpx;
		height: 23rpx;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		font-size: 24rpx;
		color: #8F572F;
		line-height: 40rpx;
	}

	.ctitle {
		height: 53rpx;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		font-size: 56rpx;
		color: #942914;
		line-height: 50rpx;
		display: inline-block;
		margin: 43rpx 0 20rpx 51rpx;
	}

	.cproducts-bottom {
		display: flex;
		margin: auto;
		width: 649rpx;
		justify-content: space-around;
	}

	.single-title {
		position: absolute;
		top: -12rpx;
		left: -2rpx;
		width: 280rpx;
		height: 76rpx;
		background: url('https://mall.zhaijieshi.cc/file/wx-huawang/daohanglan.png') no-repeat center center;
		background-size: 100% 100%;
		display: inline-block;
	}

	.single-title1 {
		width: 380rpx !important;
	}

	.single-title2 {
		width: 310rpx !important;
	}

	.single-title3 {
		width: 346rpx !important;
	}

	.sproducts {
		width: 650rpx;
		height: 224rpx;
		background-color: #fff;
		margin: 0rpx auto 20rpx;
		border-radius: 18rpx;
		display: flex;
		box-shadow: 2rpx 2rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
	}

	.last-items-style {
		margin: 0rpx auto;
	}

	.single-img {
		width: 187rpx;
		height: 187rpx;
		display: block;
		margin: 20rpx 20rpx 10rpx 10rpx;
		border-radius: 10rpx;
	}

	.ssingle-img {
		width: 187rpx;
		height: 187rpx;
		border-radius: 10rpx;
	}

	.ssproducts {
		display: inline-block;
		padding-top: 10rpx;
		width: 500rpx;
	}

	.ssproducts-title {
		height: 28rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 28rpx;
		display: block;
		margin: 20rpx 0rpx;
		overflow: hidden;
		font-family: Alibaba PuHuiTi 2.0;
		text-overflow: ellipsis;
		width: 420rpx;
		white-space: nowrap;
	}

	.indent {
		text-indent: -0.5rem;
	}

	.ssproducts-contents {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 130rpx;
	}

	.ssproducts-content {
		display: inline-block;
		width: 382rpx;
		font-weight: normal;
		font-size: 25rpx;
		text-wrap: wrap;
		color: #999999;
	}

	.appointmentNow {
		width: 154rpx;
		height: 51rpx;
		background: #D42525;
		border-radius: 25rpx;
		font-size: 33rpx;
		color: #FEFEFE;
		line-height: 51rpx;
		text-align: center;
	}

	.salePrice {
		color: #EC351D;
		font-size: 21rpx;
		font-weight: bold;
	}

	.salePrice-num {
		color: #EC351D;
		font-weight: bold;
		font-size: 33rpx;
	}

	.originalPrice {
		color: #c7c7c7;
		text-decoration: line-through;
		font-size: 25rpx;
		display: inline-block;
		margin-left: 10rpx;
	}

	.salePrice-spe {
		color: #c7c7c7;
		font-size: 24rpx;
	}



	.appointment {
		width: 76rpx;
		height: 44rpx;
		background: #D42525;
		border-radius: 19rpx;
		font-size: 27rpx;
		color: #fff;
		text-align: center;
		margin: 10rpx 0 0 20rpx;
		line-height: 44rpx;
	}

	.hw-title {
		width: 580rpx;
		height: 72rpx;
		background-image: url('https://mall.zhaijieshi.cc/file/wx-huawang/huawang.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

		position: absolute;
		left: 50%;
		/* 水平方向上居中 */
		transform: translate(-50%, 0);
	}

	.bottom {
		position: absolute;
		margin-top: 30rpx;
	}

	.bottom-image {
		width: 750rpx;
		height: 2389rpx;
		background-image: url('https://mall.zhaijieshi.cc/file/wx-huawang/xq.png');
		background-size: cover;
		background-position: center;
	}

	.kouhao {
		margin: 30rpx auto 185rpx;
		width: 451rpx;
		height: 135rpx;
		background-image: url('https://mall.zhaijieshi.cc/file/wx-huawang/db.png');
		background-size: cover;
		background-position: center;
	}
</style>