leromro-mini/components/Client/new_file.vue

<template>
  <view>
    <template>
      <view class="Wrapper-grid">
        <view class="serve-title client-title" v-if="userType == 2"></view>
        <up-grid :border="false" col="3">
          <up-grid-item v-for="(item, index) in serveiceList" :key="index" @click="handleGridClick(item)">
            <view class="grid-box">
              <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 @click="DataInit" class="paiban-sty" v-if="userType == 2">
          <image src="/static/serverImg/home/icon/icon8.png" class="service-img" mode="aspectFit" />
          排班管理
        </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,
  volunteerDataList
} from "@/api/volunteerDetailsApi/details.js"
import { getTreeList } from '@/api/volunteer'
import Calendar from '../../components/uni-calendar/components/uni-calendar/uni-calendar.vue'

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 handleGridClick = async (service) => {
  // 用户
  if (userType == 1) {

    // 动态获取 parentId
    const params = {
      parentId: service.id,
    }
    const res = await volunteerSeachgetTreeList(params)
    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) => {
  console.log('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 => {
    console.log('item.fulldate !== e.date', item.date, e.fulldate);

    return item.date !== e.fulldate
  })
  console.log(e, selected.value);
}


//排班时间去重处理
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;
  console.log('确定', parmas);
  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 => {
    console.log("TCL: init -> res", res)
    serveiceList.value = res.data;
  })
}

const DataInit = () => {
  getDataTime().then(res => {
    console.log('res', 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();
    }


  })
}



onMounted(() => {
  init();
});
</script>

<style scoped lang="scss">
.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: 10rpx;

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

.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;
  }
}
</style>