yudao-mall-uniapp/pages/XDHome/technician/itemList/itemList.vue

<!-- 项目列表 -->
<template>
	<s-layout class="homepage-wrap ss-w-100 box-sizing" title="首页" navbar="custom"
		tabbar="/pages/XDHome/technician/itemList/itemList">
		<view class="body" :style="'padding-top:' + bottomHeight">
			<!-- 导航 -->
			<view class="ss-flex-2 ss-col-center ss-margin-width2" style="position: relative">
				<view class="ss-flex-2 ss-col-center">
					<!-- <text class="textIcon icon-fanhui icon-navigation" @click="backPage"></text> -->
					<view style="color: #fff; font-size: 28rpx">项目列表</view>
				</view>
				<view class="ss-flex-1"></view>
				<text class="textIcon icon-kefu icon-navigation"></text>
				<text class="textIcon icon-tongzhiguanli icon-navigation" style="margin-left: 30rpx"></text>
			</view>
			<!-- 搜索框 -->
			<view class="ss-margin-width2" style="margin-top: 1rpx">
				<uni-search-bar radius="30" v-model="searchInfo" placeholder="请输入搜索关键字" cancelButton="none"
					clearButton="none" @confirm="onSearch"></uni-search-bar>
			</view>
			<!-- 选择地址 -->
			<view class="ss-flex-2 ss-col-center public-box" style="margin-top: -15rpx">
				<text class="textIcon icon-ditu" style="margin-left: 30rpx; color: #fff; font-size: 26rpx"></text>
				<uni-data-select style="font-size: 22rpx; margin-left: 10rpx" v-model="address" :localdata="range"
					:clear="false" @change="changeAddress"></uni-data-select>
				<view class="ss-flex-1"></view>
			</view>
			<!-- 中部 -->
			<view class="list-wrap">
				<scroll-view scroll-y="true" class="list">
					<view class="list-scroll-view" v-for="item in listData">
						<!-- 蒙版点击跳转到 -->
						<view class="mb-box" @tap="jumpPackage"></view>
						<!-- 左右布局 -->
						<view style="width: 200rpx">
							<image class="wh" referrerpolicy="no-referrer"
								src="/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png" />
						</view>
						<!-- 上下布局 -->
						<view class="ss-flex-1" style="margin-left: 10rpx; margin-top: 5rpx">
							<!-- 服务大项 -->
							<view class="ss-flex-2 ss-col-center">
								<view>精油按摩</view>
								<view class="ss-flex-1"></view>
								<view class="ss-flex-2 ss-col-center ss-row-center">
									<text class="textIcon icon-fenzhong"
										style="font-size: 22rpx; color: #3a4450"></text>
									<view
										style="font-size: 20rpx; color: #3a4450; margin-left: 10rpx; padding-top: 5rpx">
										80分钟</view>
								</view>
								<view style="margin-left: 20rpx; font-size: 20rpx; color: #8f8f93; padding-top: 5rpx">
									已预约11636单</view>
							</view>
							<!-- 服务小项 -->
							<view class="ss-flex-2 event-wrap" style="margin-top: 5rpx; flex-wrap: wrap">
								<view class="ss-flex-2" v-for="i in 4">
									<view class="event-box">舒缓疲劳{{ i }}</view>
									<view class="line-box"></view>
								</view>
							</view>
							<!-- 加减 -->
							<!--         <view class="ss-flex-2">
                <view class="ss-flex-1"></view>
                <view class="ss-flex-2 ss-col-center">
                  <view @click="minusNumber($event, item)">
                    <text class="textIcon icon-jianhao- count-icon"></text>
                  </view>
                  <view class="count-number">{{ item.number }}</view>
                  <view @click="addNumber($event, item)">
                    <text class="textIcon icon-jiahao- count-icon" style="color: #2dafd1"></text>
                  </view>
                </view>
              </view> -->
							<!-- 价格以及预约 -->
							<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx">
								<view class="ss-flex-2 ss-col-center ss-row-center">
									<text class="textIcon icon-renminbi1688 icon-rmb"></text>
									<view class="maney-number-box">498.00</view>
								</view>
								<view class="ss-flex-1"></view>
								<view class="reservation-box" @click="placeOrder(item)">立即预约</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</s-layout>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		computed
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onReady,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// 隐藏原生tabBar
	uni.hideTabBar();

	// 返回首页
	const backPage = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/homePage/homePage',
		});
	};

	// 搜索框
	const searchInfo = ref('');
	const onSearch = async (e) => {
		console.log(e, searchInfo.value, '搜索信息');
	};
	// 选择地址
	const address = ref(0);
	const range = ref([{
			value: 0,
			text: '华庭路橡树湾小区10-909',
		},
		{
			value: 1,
			text: '足球',
		},
		{
			value: 2,
			text: '游泳',
		},
	]);
	const changeAddress = async (e) => {
		console.log(e, '获取地址信息');
	};

	// 项目列表
	const listData = ref([{
			id: 1,
			price: 240,
			allManey: 0,
			number: 0,
		},
		{
			id: 2,
			price: 220,
			allManey: 0,
			number: 0,
		},
		{
			id: 3,
			price: 270,
			allManey: 0,
			number: 0,
		},
		{
			id: 4,
			price: 499,
			allManey: 0,
			number: 0,
		},
	]);
	// 每个项目的加减
	const minusNumber = async (e, item) => {
		item.number--;
		if (item.number <= 0) {
			item.number = 0;
		}
	};
	const addNumber = async (e, item) => {
		item.number++;
		if (item.number >= 5) {
			item.number = 5;
		}
	};
	//跳转到套餐详情
	const jumpPackage = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/myFeat/Packages/Packages',
		});
	}
	// 预约下单
	const placeOrder = async (item) => {
		console.log(item, '传递的参数');
		uni.navigateTo({
			url: '/pages/XDHome/technician/reservationPlaceOrder/reservationPlaceOrder?item=',
		});
	};
	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	const bottomHeight = ref(bottomHeightOne);
</script>
<style scoped lang="scss">
	.mb-box {
		position: absolute;
		top: 10rpx;
		left: 100rpx;
		width: 440rpx;
		height: 150rpx;
		z-index: 9;
	}

	.reservation-box {
		font-size: 22rpx;
		background-color: #2ab0d5;
		padding: 5rpx 20rpx;
		color: #fff;
		border-radius: 5rpx;
	}

	.icon-rmb {
		font-size: 30rpx;
		color: #e60012;
		font-weight: 700;
	}

	.maney-number-box {
		font-size: 30rpx;
		color: #e60012;
		margin-left: 5rpx;
		padding-top: 5rpx;
		font-weight: 650;
	}

	.count-number {
		font-size: 24rpx;
		color: #555;
		padding-left: 10rpx;
		padding-right: 10rpx;
		box-sizing: border-box;
	}

	.count-icon {
		font-size: 30rpx;
		color: #999;
	}

	.line-box {
		width: 2rpx;
		height: 30rpx;
		background-color: #d2d3d5;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.event-box {
		font-size: 22rpx;
		color: #909295;
		height: 30rpx;
		line-height: 30rpx;
		box-sizing: border-box;
	}

	.event-wrap {
		width: 100%;
		max-height: 60rpx;
		min-height: 60rpx;
		overflow-y: auto;
	}

	.icon-navigation {
		font-size: 32rpx;
		color: #fff;
		font-weight: 700;
	}

	// 上中下布局样式
	.body {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 50px);
		background: linear-gradient(to bottom, #08a3e9, #f8fcff);
		box-sizing: border-box;
	}

	// 中部滚动
	.list-wrap {
		flex-grow: 1;
		position: relative;
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
	}

	.list {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 50rpx;
		padding: 10rpx;
		border-radius: 15rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.list-scroll-view {
		position: relative;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #999ba2;
		box-sizing: border-box;
	}

	.course-card {
		width: 47vw;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	// 底部
	.tools {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tools-item {
		width: 45px;
		text-align: center;
		font-size: 14px;
		padding: 20px;
	}
</style>
<style scoped>
	/deep/.uni-select__input-text {
		font-size: 22rpx !important;
		color: #fff !important;
	}

	/deep/uni-slider .uni-slider-handle-wrapper {
		height: 18rpx !important;
	}

	.distance {
		/deep/.uni-select__input-text {
			width: 130rpx;
			color: #fff;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 24rpx;
			text-align: right;
		}
	}

	/deep/.uni-select__input-text {
		width: 180rpx;
		color: #fff;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 24rpx;
		text-align: right;
	}

	/deep/.uni-searchbar__box {
		height: 100% !important;
	}

	/deep/.uni-select {
		border: none !important;
		padding-left: 0rpx;
	}
</style>