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

<!-- 项目列表 -->
<template>
	<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="margin-left: 15rpx;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 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">立即预约</view>
						</view>
					</view>
                </view>
            </scroll-view>
        </view>
	</view>
</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.navigateBack({
			delta:1
		})
	}
	
	// 搜索框
	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 app = uni.getSystemInfoSync()
	const bottomHeightOne = (app.statusBarHeight) + 'rpx'
	const bottomHeight = ref(bottomHeightOne)
</script>
<style scoped lang="scss">
.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: 100vh;
	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 {
	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>