leromro-mini/components/Client/new_file.vue

<template>
  <view>
    <template>
      <view class="Wrapper-grid">
        <!-- <view class="serve-title-Box" v-if="userType == 2">
          <view class="serve-content">
            <image src="/static/container.png" class="serve-content-img" mode="aspectFill"></image>
            <text class="serve-content-text">注册专区</text>
          </view>
          <view class="serve-content-box2">
            <text class="serve-content-text">认证资质专区</text>
          </view>
        </view> -->

        <up-grid :border="false" col="3" v-if="userType === 1">
          <up-grid-item v-for="(item, index) in serveiceList" :key="index" @click="handleGridClick(item)">
            <view class="grid-box" :class="index < 3 && 'first-row'">
              <view class="grid-image">
                <image :src="item.businessIcon" class="service-img" mode="aspectFit" />
              </view>
              <view class="grid-content">
                <text class="grid-text">{{ item.businessName }}</text>
                <text class="grid-text-bone">{{ item.businessDescribe }}</text>
              </view>
            </view>
          </up-grid-item>
        </up-grid>
        <up-toast ref="uToastRef" />

        <view v-if="userType === 2" class="flex_c_c serveice-list">
          <view v-for="item in serveiceList" :key="item.id" class="serveice-item flex_c_s"
            @click="handleCertification(item)">
            <view>
              <view class="serveice-name">{{ item.businessName }}</view>
              <view class="serveice-text">{{ item.text }}</view>
            </view>
            <up-icon name="arrow-right" color="#7B7B7B" size="14"></up-icon>
            <view :class="item.class"></view>
          </view>
        </view>

        <view class="paiBanSty" v-if="userType == 2">
          <!-- 背景图片 -->
          <!-- <image src="/static/img/14147@2x.png" class="background-image" mode="aspectFill" /> -->

          <!-- 左侧轮播图 -->
          <swiper class="zhiYuanZheSwiper" vertical circular autoplay :interval="4000" :duration="800"
            @change="onSwiperChange">
            <swiper-item v-for="(imgUrl, index) in volunteerImages" :key="index">
              <view class="swiper-item-container" :class="currentSwiperIndex === index && 'active-swiper'">
                <image :src="imgUrl" class="zhiYuanZhe" mode="aspectFill" />
              </view>
            </swiper-item>
          </swiper>


          <!-- 右侧内容区域 -->
          <view class="content-wrapper">
            <view class="title-button-row">
              <view class="paiBanTitle">我的排班</view>
              <button class="paiBanBtn" @click="DataInit">去管理排班</button>
            </view>
            <view class="paiBanDesc">管理排班时间，合理分配服务订单</view>
          </view>
        </view>
      </view>
    </template>

    <Calendar ref="calendar" class="uni-calendar--hook" :clear-date="false" :date="info.date" :insert="info.insert"
      :lunar="info.lunar" :range="info.range" @change="change" :clearDate="true" @confirm="confirm" :selected="selected"
      @delete="onDelete" />
  </view>

</template>

<script setup>
import {
  ref,
  onMounted,
  watch,
  computed,
  provide
} from 'vue';
import {
  workDate,
  getDataTime,
  getVolunteerInfo
} from '@/api/volunteer.js'
import {
  volunteerSeachgetTreeList,
  volunteerVolunteerPicture
} from "@/api/volunteerDetailsApi/details.js"
import { getTreeList } from '@/api/volunteer'
import Calendar from '../../components/uni-calendar/components/uni-calendar/uni-calendar.vue'
import { getToken } from '@/utils/auth'
const swiperList = ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'];

// Toast 控制宫格
const uToastRef = ref(null);
const userType = uni.getStorageSync('userType') //读取本地存储
// 用户/志愿者 识别标识
const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储

const calendar = ref(null)
const info = ref({
  lunar: true,
  range: true,
  insert: false,
})
const selected = ref([])

const serveiceList = ref([]);

// 志愿者图片
const volunteerImages = ref(['/static/serverImg/home/zyz_pb.png']);

const getVolunteerImages = () => {
  volunteerVolunteerPicture({}).then(res => {
    if (Array.isArray(res)) {
      volunteerImages.value = res;
    } else if (res.code === 200 && res.data) {
      volunteerImages.value = res.data;
    }
  })
}
// 当前显示的轮播图索引
const currentSwiperIndex = ref(0);

// 轮播图切换事件
const onSwiperChange = (e) => {
  currentSwiperIndex.value = e.detail.current;
};

// 宫格点击事件
const handleGridClick = async (service) => {
  // 用户
  if (userType == 1) {

    // 动态获取 parentId
    const params = {
      parentId: service.id,
    }
    const res = await volunteerSeachgetTreeList(params)
    console.log("TCL: handleGridClick -> res", res)
    uni.navigateTo({
      url: `/pages_home/pages/client/details?dataList=${encodeURIComponent(JSON.stringify(res.data))}&serviceCategory=${service.id}`
    });
  }
  // 志愿者
  if (userType == 2) {
    const res = await getVolunteerInfo({
      serviceCategory: service.id
    });
    if (res.code === 200 && res.data) {
      //已有注册，跳转详情页面
      uni.navigateTo({
        url: `/pages_home/pages/details/index?data=${encodeURIComponent(JSON.stringify({ ...service, key: service.id }))}`
      })
      return
    }

    uni.navigateTo({
      url: `/pages_home/pages/register/index?data=${encodeURIComponent(JSON.stringify({ ...service, key: service.id }))}`
    })

  }
};

const change = (e) => {
  let dates = [{
    date: e.fulldate,
    info: `${e.time.startTime}~${e.time.endTime}`,
    time: e.time
  }]
  if (e.range.before && e.range.after) {
    dates = e.range.data.map(item => {
      return {
        date: item,
        info: `${e.time.startTime}~${e.time.endTime}`,
        time: e.time
      }
    })
  }
  selected.value = [...selected.value, ...dates]
}

const onDelete = (e) => {
  selected.value = selected.value.filter(item => {

    return item.date !== e.fulldate
  })
}


//排班时间去重处理
const handleDates = computed(() => {
  const parmas = selected.value.map(item => {
    return {
      workDate: item.date,
      workStartTime: item.time.startTime,
      workEndTime: item.time.endTime
    }
  })
  return parmas.reduce((acc, current) => {
    const existing = acc.find(item => item.workDate === current.workDate);
    if (existing) {
      Object.assign(existing, current);
    } else {
      acc.push(current);
    }
    return acc;
  }, []);
});
const confirm = (e) => {
  const parmas = handleDates.value;
  workDate(parmas).then(res => {
    if (res.code == 200) {
      uni.showToast({
        title: '修改成功',
        icon: 'success',
        success: () => {
          setTimeout(() => {
            close();
          }, 1000)
        }
      })

      return;
    }
    uni.showToast({
      title: res.msg,
      icon: 'none'
    })
  })
};
const close = () => {
  calendar.value.close();
}

const init = () => {
  getTreeList({ parentId: '0' }).then(res => {
    serveiceList.value = res.data;
  })
}

const DataInit = () => {
  getDataTime().then(res => {
    if (res.code === 200) {
      selected.value = res.data.map(item => {
        return {
          date: item.workDate,
          info: `${item.workStartTime}~${item.workEndTime}`,
          time: {
            startTime: item.workStartTime,
            endTime: item.workEndTime
          }
        }
      })
      calendar.value.open();
    }


  })
}

const serveInit = () => {
  serveiceList.value = [
    {
      id: '1',
      businessName: '资质认证',
      text: '智慧养老',
      class: 'icon1'
    },
    {
      id: '1',
      businessName: '服务管理',
      text: '智慧养老',
      class: 'icon2'
    },
  ]
}

const handleCertification = (record) => {
  console.log("TCL: handleCertification -> record", record)
  uni.navigateTo({
    url: `/pages_home/pages/publicize/index`
  });

  // uni.navigateTo({
  //   url: `/pages_home/pages/certification/index?data=${encodeURIComponent(JSON.stringify(record))}`
  // });
}

onMounted(() => {
  userType === 2 ? serveInit() : init();
  const token = getToken();
  token && getVolunteerImages();

 
});
</script>

<style scoped lang="scss">
.serve-title-Box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
  margin-top: 24rpx;

  .serve-content {
    display: flex;
    align-items: center;

    .serve-content-img {
      width: 36rpx;
      height: 36rpx;
      margin-left: 34rpx;
    }

    .serve-content-text {
      width: 136rpx;
      height: 40rpx;
      font-family: PingFang SC;
      font-size: 34rpx;
      font-weight: 500;
      line-height: 40rpx;
      letter-spacing: normal;
      color: rgba(0, 0, 0, 0.8);
      margin-left: 10rpx;
    }
  }

  .serve-content-box2 {
    .serve-content-text {
      width: 144rpx;
      height: 42rpx;
      font-family: Yuppy SC;
      font-size: 24rpx;
      font-weight: 500;
      line-height: 42rpx;
      text-align: right;
      letter-spacing: normal;
      color: #E58182;
      margin-right: 40rpx;
    }
  }
}


.grid-box {
  width: 226rpx;
  height: 116rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-right: 5rpx;
  margin-left: 5rpx;
  background: #fff;
  border-radius: 14rpx;
  // background: red;
  background: linear-gradient(180deg, #FFF9F3 0%, #FFFFFF 100%);
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
  margin-top: 20rpx;

  .grid-image {
    width: 64rpx;
    height: 68rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* 只保留一个针对第一排的样式 */
.grid-box.first-row {
  margin-top: 40rpx;
}

.grid-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  .grid-text {
    width: 112rpx;
    height: 36rpx;
    font-family: PingFang SC;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 36rpx;
    letter-spacing: normal;
    color: #313131;
  }

  .grid-text-bone {
    width: 130rpx;
    height: 28rpx;
    font-family: PingFang SC;
    font-size: 22rpx;
    font-weight: normal;
    line-height: 28rpx;
    letter-spacing: -0.02em;
    color: #818181;
    margin-left: 6rpx;
    margin-top: 10rpx;
  }
}

.paiBanSty {
  margin-top: 30rpx;
  display: flex;
  flex-direction: row;
  background: #FFFFFF;
  background-image: url('/static/img/14147@2x.png');
  background-size: cover;
  // background-position: center;
  border-radius: 20rpx;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
  overflow: hidden;
  height: 330rpx;

  .background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .zhiYuanZheSwiper {
    width: 196rpx;
    height: 240rpx;
    border-radius: 38rpx;
    overflow: hidden;
    margin: 30rpx;
  }

  .swiper-item-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;

    &.active-swiper {
      transform: scale(1);
    }
  }

  .zhiYuanZhe {
    width: 100%;
    height: 100%;
    border-radius: 38rpx;
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
  }

  .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .title-button-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12rpx;
    width: 100%;
    margin-top: 129rpx;
    margin-left: 0rpx;
  }

  .paiBanTitle {
    font-family: PingFang SC;
    font-size: 34rpx;
    font-weight: 600;
    line-height: 40rpx;
    letter-spacing: normal;
    color: rgba(0, 0, 0, 0.8);
    width: 136rpx;
    height: 25rpx;
    margin-top: 95rpx;
    margin-left: 33rpx;
  }

  .paiBanDesc {
    font-family: PingFang SC;
    font-size: 26rpx;
    font-weight: normal;
    line-height: 40rpx;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 12rpx;
    margin-left: 33rpx;
  }

  .paiBanBtn {
    width: 200rpx;
    height: 70rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 36rpx;
    background: #D94342;
    font-family: PingFang SC;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 30rpx;
    color: #FFFFFF;
    border: none;
    padding: 0;
    margin-top: 55rpx;
    margin-left: 53rpx;
  }
}

.home-ranking {}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(10rpx);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0.8;
    transform: scale(0.95) translateY(-10rpx);
  }
}


.icon1 {
  width: 68rpx;
  height: 68rpx;
  background-image: url(data:image/png;base64,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);
  background-position: center;
  background-size: 68rpx auto;
  background-repeat: no-repeat;
}

.icon2 {
  width: 68rpx;
  height: 68rpx;
  background-image: url(data:image/png;base64,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);
  background-position: center;
  background-size: 68rpx auto;
  background-repeat: no-repeat;
}

.serveice-list {
  padding: 0 34rpx;
  gap: 16rpx;
  margin-top: 49rpx;

  .serveice-item {
    flex: 1;

    border-radius: 14rpx;
    background: #FFF7EC;
    padding: 28rpx 51rpx 28rpx 25rpx;

  }

  .serveice-item:first-child {
    background: #FFF6F5;
  }

  .serveice-name {
    font-family: PingFang SC;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 36rpx;
    letter-spacing: normal;
    color: #313131;
    margin-bottom: 10rpx;
  }

  .serveice-text {
    font-family: PingFang SC;
    font-size: 26rpx;
    font-weight: normal;
    line-height: 28rpx;
    letter-spacing: -0.02em;
    color: #818181;
  }

}
</style>