|
|
@@ -0,0 +1,326 @@
|
|
|
+<!-- 项目列表 -->
|
|
|
+<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>
|
jhy