yudao-mall-uniapp/pages/XDHome/technicianList/technicianList.vue

<!-- 技师列表 -->
<!-- 首页，支持店铺装修 -->
<template>
  <s-layout
    class="ss-w-100 ss-h-100 box-sizing"
    style="position: relative"
    title="技师"
    navbar="custom"
    tabbar="/pages/XDHome/technicianList/technicianList"
  >
    <view class="body" :style="'padding-top:' + bottomHeight">
      <!-- 头部 -->
      <view style="margin-top: 20rpx; padding: 10rpx" id="head-box">
        <!-- 导航标题 -->
        <view class="ss-flex ss-w-100">
          <view class="ss-flex">
<!--            <view style="width: 40rpx; height: 40rpx">
              <image
                referrerpolicy="no-referrer"
                src="/static/lanhu_shouye/6461e1be91dd49c48afbbacf664a38ec_mergeImage.png"
                class="icon-image"
              ></image>
            </view> -->
            <view style="font-size: 26rpx; color: #fff; margin-left: 15rpx"> 技师列表 </view>
          </view>
          <view class="ss-flex-1"></view>
          <view style="width: 40rpx; height: 40rpx">
            <image
              referrerpolicy="no-referrer"
              src="/static/lanhu_shouye/61f5a7931f9d41caafd7d60ec1efadb4_mergeImage.png"
              class="icon-image"
            ></image>
          </view>
          <view style="width: 40rpx; height: 40rpx; margin-left: 15rpx; margin-right: 15rpx">
            <image
              referrerpolicy="no-referrer"
              src="/static/lanhu_shouye/psza2ppvfwx4d6fnhi4tcrcfmrgvqf7x4jb799f8f8-619e-4a58-9606-3e6cd5bf62c6.png"
              class="icon-image"
            ></image>
          </view>
        </view>
        <!-- 搜索框 -->
        <view style="width: 100%; height: 60rpx; margin-top: 20rpx">
          <uni-search-bar
            radius="30"
            v-model="searchInfo"
            placeholder="请输入搜索关键字"
            cancelButton="none"
            clearButton="none"
            @confirm="onSearch"
          ></uni-search-bar>
        </view>
        <!-- 多种搜索 -->
        <view style="width: 100%; height: 60rpx; margin-top: 20rpx" class="ss-flex">
          <view style="width: 40rpx; height: 40rpx; margin-left: 15rpx; margin-right: 15rpx">
            <image
              referrerpolicy="no-referrer"
              src="/static/lanhu_shouye/psza2ppvfwx4d6fnhi4tcrcfmrgvqf7x4jb799f8f8-619e-4a58-9606-3e6cd5bf62c6.png"
              class="icon-image"
            ></image>
          </view>
          <view style="width: 25%; height: 40rpx">
            <uni-data-select
              class="icon-image"
              v-model="address"
              :localdata="range"
              :clear="false"
              @change="changeAddress"
            ></uni-data-select>
          </view>
          <view style="width: 20rpx"></view>
          <view style="width: 25%; height: 40rpx" class="distance">
            <uni-data-select
              class="icon-image"
              v-model="distance"
              :localdata="distanceData"
              :clear="false"
              @change="changeDistance"
            ></uni-data-select>
          </view>
          <view class="ss-flex-1"></view>
          <view style="width: 120rpx; display: flex; margin-right: 20rpx" @click="searchAll">
            <view
              style="
                width: 80rpx;
                height: 40rpx;
                line-height: 40rpx;
                text-align: center;
                font-size: 26rpx;
                color: #fff;
              "
              >筛选</view
            >
            <view style="width: 40rpx; height: 40rpx; margin-left: 15rpx; margin-right: 15rpx">
              <image
                referrerpolicy="no-referrer"
                src="/static/lanhu_shouye/psza2ppvfwx4d6fnhi4tcrcfmrgvqf7x4jb799f8f8-619e-4a58-9606-3e6cd5bf62c6.png"
                class="icon-image"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 中部 -->
      <view class="list-wrap">
        <scroll-view scroll-y="true" class="list">
          <view class="ss-flex-2 box-sizing list-box" v-for="item in 10" :key="item">
            <!-- 左右布局 -->
            <view style="width: 190rpx">
              <view style="width: 190rpx; height: 160rpx">
                <image
                  referrerpolicy="no-referrer"
                  src="/static/lanhu_shouye/psq752p4oxrur1kwz38o9hz2uugu327v8c905774083-1ff9-40d7-8687-01c969b1461d.png"
                  class="icon-image"
                ></image>
              </view>
			  <!-- 休息中 可服务  服务中  -->
              <view class="bt-box"> 可服务 </view>
            </view>
            <!-- 右边布局 -->
            <view class="ss-flex-1" style="margin-left: 20rpx">
              <view class="ss-flex">
                <view style="font-size: 30rpx; color: #1a2433; font-weight: 650">王琳haha</view>
                <view class="ss-flex" style="margin-left: 20rpx; margin-top: 5rpx">
                  <view style="width: 25rpx; height: 25rpx">
                    <image
                      class="icon-image"
                      referrerpolicy="no-referrer"
                      src="/static/lanhu_shouye/ps45z8ynos8u6p0hlyciknnu9trq6jgvec6ac864-6e48-46fc-a850-9e88158e568c.png"
                    />
                  </view>
                  <view
                    style="font-size: 24rpx; margin-left: 5rpx; color: #009fe8; margin-top: 5rpx"
                    >4.8</view
                  >
                </view>
                <view class="ss-flex-1"></view>
                <view class="job-box"> NO.00158 </view>
              </view>
              <view class="ss-flex-2">
                <view class="flag-box" style="background-color: #e57f3a"> 新人 </view>
                <view class="flag-box" style="background-color: #e50012"> 明星 </view>
                <view class="flag-box" style="background-color: #48b790"> 手法哈哈哈哈 </view>
              </view>
              <uni-tooltip
                style="margin-top: 5rpx"
                content="哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈"
                placement="bottom"
              >
                <view class="text-info-box">
                  哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈，哈哈哈哈哈哈哈，
                </view>
              </uni-tooltip>
              <view class="ss-flex-2">
                <view class="ss-flex-2 shop-box ss-row-center" style="height: 25rpx">
                  <view style="width: 17rpx; height: 17rpx; margin-top: 3rpx" class="ss-flex-2">
                    <image
                      class="icon-image"
                      referrerpolicy="no-referrer"
                      src="/static/lanhu_shouye/ps45z8ynos8u6p0hlyciknnu9trq6jgvec6ac864-6e48-46fc-a850-9e88158e568c.png"
                    />
                  </view>
                  <view style="font-size: 16rpx; margin-left: 5rpx; color: #444">秋水伊人</view>
                </view>
              </view>
              <view class="ss-flex-2 ss-row-center ss-col-center" style="box-sizing: border-box">
                <view style="width: 23rpx; height: 25rpx">
                  <image
                    class="icon-image"
                    referrerpolicy="no-referrer"
                    src="/static/lanhu_shouye/ps45z8ynos8u6p0hlyciknnu9trq6jgvec6ac864-6e48-46fc-a850-9e88158e568c.png"
                  />
                </view>
                <view style="font-size: 22rpx; margin-left: 5rpx; margin-top: 15rpx"> 15 </view>
                <view style="width: 17rpx; height: 25rpx; margin-left: 30rpx">
                  <image
                    class="icon-image"
                    referrerpolicy="no-referrer"
                    src="/static/lanhu_shouye/ps45z8ynos8u6p0hlyciknnu9trq6jgvec6ac864-6e48-46fc-a850-9e88158e568c.png"
                  />
                </view>
                <view
                  style="font-size: 22rpx; margin-left: 5rpx; color: #009fe8; margin-top: 15rpx"
                >
                  15.256km
                </view>
                <view style="font-size: 16rpx; margin-left: 20rpx; color: #666; margin-top: 15rpx">
                  莱山区哈哈哈
                </view>
                <view class="ss-flex-1"></view>
                <view class="bt-box-two" @click="onTechnician">点TA</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- 弹窗 -->
    <view v-if="isShow" class="popup-box" :style="'top:' + topSize" @click="close(2)">
      <view style="position: relative; width: 100%; background-color: #fff" @click.stop="prevent">
        <view style="display: flex; flex-direction: row; border-bottom: 4rpx solid #dcdcdc">
          <!-- 左右布局 -->
          <view style="width: 160rpx; background-color: #dcdcdc; color: #6b6b6b; font-size: 26rpx">
            <view
              style="
                width: 100%;
                height: 90rpx;
                line-height: 90rpx;
                text-align: center;
                font-size: 34rpx;
                color: #333;
                font-weight: 650;
                background-color: #fff;
              "
              >技师筛选</view
            >
            <view style="width: 100%; height: 90rpx; line-height: 90rpx; text-align: center"
              >时段</view
            >
            <view style="width: 100%; height: 90rpx; line-height: 90rpx; text-align: center"
              >价格</view
            >
            <view style="width: 100%; height: 90rpx; line-height: 90rpx; text-align: center"
              >服务状态</view
            >
            <view style="width: 100%; height: 90rpx; line-height: 90rpx; text-align: center"
              >服务类别</view
            >
          </view>
          <view class="ss-flex-1 box-sizing" style="padding-top: 10rpx">
            <view class="search-title"> 技师登记 </view>
            <view class="content-info-box">
              <view class="content-text" @click.stop="newInfo(1)">新人组</view>
              <view class="content-text">明星组</view>
              <view class="content-text">专业组</view>
              <view class="content-text">5星好评</view>
            </view>
            <view class="search-title"> 技师性别 </view>
            <view class="content-info-box">
              <view class="content-text">女技师</view>
              <view class="content-text">男技师</view>
              <view class="content-text">性别不限</view>
            </view>
            <view class="search-title"> 服务类别 </view>
            <view class="content-info-box">
              <view class="content-text">上门服务</view>
              <view class="content-text">店面体验</view>
            </view>
            <view class="search-title"> 服务状态 </view>
            <view class="content-info-box">
              <view class="content-text">空闲中</view>
              <view class="content-text">休息中</view>
              <view class="content-text">服务中</view>
            </view>
            <view class="search-title"> 技师年龄（岁） </view>
            <view style="width: 95%; margin-left: 2.5%">
              <slider :value="age" @change="sliderChange" min="18" max="55" show-value />
            </view>
            <view class="search-title"> 技师距离（km） </view>
            <view style="width: 95%; margin-left: 2.5%">
              <slider
                :value="distanceNum"
                @change="changeDistanceTwo"
                min="3"
                max="20"
                show-value
              />
            </view>
          </view>
        </view>
        <view style="display: flex; flex-wrap: nowrap; width: 100%; height: 120rpx">
          <view class="button-info-box" style="color: #41474b; background-color: #dcdcdc"
            >重置</view
          >
          <view class="button-info-box" style="color: #fff; background-color: #49b58e">完成</view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import $share from '@/sheep/platform/share';
  // 隐藏原生tabBar
  uni.hideTabBar();

  /**搜索栏*/
  const searchInfo = ref('');
  //搜索事件
  const onSearch = async (e) => {
    console.log(e, '触发搜索事件');
  };
  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 distance = ref(0);
  const distanceData = ref([
    { value: 0, text: '距离' },
    { value: 1, text: '0~3km' },
    { value: 2, text: '3~5km' },
    { value: 2, text: '5~10km' },
  ]);
  const changeDistance = async (e) => {
    console.log(e, '获取距离');
  };
  const topSize = ref('0rpx');
  const isShow = ref(false);
  const searchAll = async () => {
    //获取头部盒子宽高
    const query = uni.createSelectorQuery().select('#head-box');
    //获取宽度
    query
      .boundingClientRect(function (data) {
        console.log(data, '元素的各种信息');
        topSize.value = data.height * 2 + 20 + 'rpx';
        isShow.value = true;
      })
      .exec();
  };
  const age = ref(21);
  const sliderChange = async (e) => {
    console.log(e.detail.value, '技师年龄');
    age.value = e.detail.value;
  };
  const distanceNum = ref(3);
  const changeDistanceTwo = async (e) => {
    console.log(e.detail.value, '技师距离');
    distanceNum.value = e.detail.value;
  };
  const newInfo = async (e) => {
    console.log(e, 'pppppppppppppp');
  };
  const prevent = async () => {
    console.log('阻止事件冒泡');
  };
  const close = async (e) => {
    console.log(e, 'qqqqqq');
    isShow.value = false;
  };

  //获取顶部安全距离
  const app = uni.getSystemInfoSync();
  const bottomHeightOne = app.statusBarHeight + 'rpx';
  const bottomHeight = ref(bottomHeightOne);

  // 点击技师，跳转到技师详情
  const onTechnician = async () => {
    uni.reLaunch({
      url: '/pages/XDHome/technician/technicianDetails/technicianDetails',
    });
  };
  onLoad((options) => {});
</script>
<style scoped>
  /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>
<style scoped lang="scss">
  .list-box {
    width: 95%;
    margin-left: 2.5%;
    margin-top: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 3rpx dashed #aaaaaa;
  }
  .bt-box-two {
    padding: 5rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    font-size: 20rpx;
    color: #fff;
    background-color: #009fe8;
    border-radius: 5rpx;
  }
  .shop-box {
    padding: 3rpx;
    padding-left: 15rpx;
    padding-right: 15rpx;
    // background-color: #E3007F;
    color: #fff;
    border-radius: 5rpx;
    box-sizing: border-box;
  }
  .text-info-box {
    width: 100%;
    font-size: 23rpx;
    color: #6f7379;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 60rpx;
  }
  .flag-box {
    font-size: 16rpx !important;
    color: #fff;
    margin-right: 15rpx;
    padding-top: 2rpx;
    padding-bottom: 2rpx;
    text-align: center;
    box-sizing: border-box;
    border-radius: 5rpx;
    margin-top: 5rpx;
    padding-left: 15rpx;
    padding-right: 15rpx;
  }
  .job-box {
    font-size: 22rpx;
    color: #fff;
    background-color: #898f96;
    padding: 3rpx;
    padding-left: 5rpx;
    padding-right: 5rpx;
    -moz-box-sizing: border-box;
  }
  .bt-box {
    width: 100rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    color: #fff;
    background-color: #009fe8;
    font-size: 20rpx;
    padding: 3rpx;
    border-radius: 5rpx;
    margin-top: 10rpx;
    margin-left: 40rpx;
  }
  .button-info-box {
    width: 41%;
    margin-left: 6%;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    font-size: 40rpx;
    margin-top: 25rpx;
    border-radius: 10rpx;
  }
  .content-text {
    width: 30%;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    font-size: 28rpx;
    color: #707374;
    background-color: #efeef1;
    margin-top: 15rpx;
    border-radius: 10rpx;
    margin-left: 2.5%;
  }
  .content-info-box {
    width: 95%;
    margin-left: 2.5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }
  .search-title {
    width: 90%;
    height: 50rpx;
    margin-left: 5%;
    margin-top: 20rpx;
    font-size: 30rpx;
    color: #333;
    font-weight: 650;
    text-align: left;
  }
  .popup-box {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.2);
  }
  .icon-image {
    width: 100%;
    height: 100%;
  }
  // 上中下布局样式
  .body {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    background: linear-gradient(to bottom, #08a3e9, #fff);
    box-sizing: border-box;
  }
  // 中部滚动
  .list-wrap {
    flex-grow: 1;
    position: relative;
    background-color: #fff;
    border-radius: 10rpx;
    width: 95%;
    margin-left: 2.5%;
    box-sizing: border-box;
  }
  .list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10rpx;
    box-sizing: border-box;
  }
  .list-scroll-view {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 2vw;
    margin-right: 2vw;
  }
  .course-card {
    width: 47vw;
    margin-top: 10px;
    margin-bottom: 10px;
  }
</style>