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">
			<!-- <image src="https://mall.zhaijieshi.cc/file/wx-huawang/tb.png" mode="aspectFill" /> -->
		</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">
				<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">{{item.name}}</text>
								<view class="ssproducts-contents">
									<text class="ssproducts-content">{{item.brief}}</text>
									<view class="productPrice"
										style="display: flex;justify-content: space-between; margin-top: 20rpx;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="period">
				<view class="period-title">
					<text class=" sort-title">周期更省心</text>
				</view>

				<text class="sort-tip1 sort-tip">用过1次，一定会用第2次的服务</text>
				<view class="pproducts">
					<view class="pproducts-one" :class="{ 'last-item-style': (index+1)%3==0 }"
						v-for="(item, index) in zqGoods" :key="index">
						<navigator :url="'/pages/goods/goods?id=' + item.id" hover-class="none">
							<image :src="item.picUrl" class="pproducts-img"></image>
							<text
								:class="item.name.startsWith('【')?'pproducts-title1':'pproducts-title'">{{item.name}}</text>
							<view style="display: flex;justify-content: space-around;">
								<view class="" style="margin :7rpx 0rpx  0rpx 10rpx;;">
									<text class="pproducts-price">￥</text>
									<text style="color: #EC351D; font-weight:bold; font-size: 30rpx;"
										class="pproducts-price-num">{{item.retailPrice}}</text>
									<text class="pproducts-originalPrice">￥{{item.counterPrice}}</text>
								</view>
								<view class="appointment">
									预约
								</view>
							</view>
						</navigator>
					</view>

				</view>
			</view>
			<view class="combination">
				<text class="ctitle">全屋焕新 除菌必备</text>
				<view class="ctips">
					<image src="../../static/shouye/wuxin.png" class="ctips-icon"></image>
					<text class="ctipstitle">新房入住</text>
					<text class="ctipscontent">清除基础开荒后残留的有害化学物质</text>
				</view>
				<view class="ctips">
					<image src="../../static/shouye/wuxin.png" class="ctips-icon"></image>
					<text class="ctipstitle">二手房入住</text>
					<text class="ctipscontent">清除前任居住遗留的细菌和异味</text>
				</view>
				<view class="cproducts" v-for="(item, index) in zhGoods" :key="index">
					<navigator :url="'/pages/goods/goods?id=' + item.id" hover-class="none">
						<view class="title" style="display: flex;justify-content: space-between;">
							<view class="sort-title">焕新入住</view>
							<view class="sort-tip2 title-val" >
								<view class="title-val__text">
									{{item.brief}}
								</view>
							
							</view>
							
						</view>
						<view class="cproducts-img">
							<image :src="item.gallery.split(',')[0]" class="cproducts-img"></image>
						</view>		
						<view class="cproducts-bottom">
							<view class="cproducts-price">
								<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>

					</navigator>
				</view>
				<view class="bottom">
					<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: [],
				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
					});
					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
						});
						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;
		/* position: relative; */
		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;
		/* or contain based on your need */
		/* background-position: center; */
		/* Center the background image */
		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: auto;
		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;
		/* height: 778rpx; */
		background-color: #fff;
		padding-bottom: 20rpx;
	}

	.cproducts {
		width: 701rpx;
		padding-bottom: 20rpx;
		/* height: 506rpx; */
		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: 200rpx;
		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: 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;
	}

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

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

	.ssproducts-content {
		display: inline-block;
		width: 382rpx;
		height: 30rpx;
		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;
		margin-right: 30rpx;
	}

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

	.pproducts {
		width: 664rpx;
		/* 	height: 402rpx; */
		background: #fff;
		box-shadow: 0rpx 2rpx 26rpx 0rpx rgba(186, 184, 184, 0.32);
		border-radius: 19rpx;
		margin: 23rpx auto;
		display: flex;
		flex-wrap: wrap;
	}

	.pproducts-img {
		display: block;
		width: 181rpx;
		height: 181rpx;
		margin: 0rpx auto 21rpx;
		border-radius: 10rpx;
	}

	.pproducts-title {
		font-size: 25rpx;
		color: #333333;
		font-weight: bold;
		display: block;
		width: 181rpx;
		height: 65rpx;
		margin: 2rpx auto 10rpx;
	}

	.pproducts-title1 {
		    font-size: 25rpx;
		    color: #333333;
		    font-weight: bold;
		    display: block;
		    width: 181rpx;
		    margin: 2rpx auto 10rpx;
		    text-indent: -0.5em;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		   height: 65rpx;
		    
	}

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

	.pproducts-originalPrice {
		color: #c7c7c7;
		text-decoration: line-through;
		font-size: 19rpx;
		display: block;
	}

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

	.ctips-icon {
		width: 24rpx;
		height: 24rpx;
		margin: 20rpx 20rpx 0 55rpx;
	}

	.pproducts-one {
		width: 221rpx;
		margin-top: 21rpx;
		border-right: 1rpx dashed #999;
		margin-bottom: 30rpx;
	}

	.last-item-style {
		border: none;
	}

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

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